rsuite 5.3.0 → 5.4.3

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/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

@@ -75,13 +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: {
-        activeKey: activeKey,
-        onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
-      }
+      value: contextValue
     }, /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
       ref: ref,
       className: classes
@@ -92,10 +96,7 @@ var Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   if (sidenav) {
     return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {
-      value: {
-        activeKey: activeKey,
-        onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
-      }
+      value: contextValue
     }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {
       vertical: !!sidenav
     }, function (menubar, ref) {
@@ -108,10 +109,7 @@ var Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {
-    value: {
-      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/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/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

@@ -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() {
@@ -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],
@@ -125,12 +124,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,32 +138,31 @@ 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) {
-    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]);
+    handleFocusDialog();
+  });
   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 +174,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 +191,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;
@@ -218,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,
@@ -239,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, {
@@ -265,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 = {
@@ -297,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/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,

package/cjs/Overlay/Position.d.ts

@@ -8,7 +8,7 @@ export interface PositionChildProps {
 export interface PositionProps {
     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/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/propTypes.d.ts

@@ -9,7 +9,6 @@ export declare const pickerPropTypes: {
     containerPadding: PropTypes.Requireable<number>;
     container: PropTypes.Requireable<any>;
     disabled: PropTypes.Requireable<boolean>;
-    toggleAs: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     menuClassName: PropTypes.Requireable<string>;
     menuStyle: PropTypes.Requireable<object>;
     placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -26,7 +25,7 @@ export declare const pickerPropTypes: {
     onOpen: PropTypes.Requireable<(...args: any[]) => any>;
     onClose: PropTypes.Requireable<(...args: any[]) => any>;
     onClean: PropTypes.Requireable<(...args: any[]) => any>;
-    listProps: PropTypes.Requireable<object>;
+    listProps: PropTypes.Requireable<any>;
     onEnter: PropTypes.Requireable<(...args: any[]) => any>;
     onEntering: PropTypes.Requireable<(...args: any[]) => any>;
     onEntered: PropTypes.Requireable<(...args: any[]) => any>;
@@ -35,7 +34,7 @@ export declare const pickerPropTypes: {
     onExited: PropTypes.Requireable<(...args: any[]) => any>;
 };
 export declare const listPickerPropTypes: {
-    data: PropTypes.Requireable<any[]>;
+    data: PropTypes.Validator<any[]>;
     valueKey: PropTypes.Requireable<string>;
     labelKey: PropTypes.Requireable<string>;
     childrenKey: PropTypes.Requireable<string>;
@@ -52,7 +51,6 @@ export declare const listPickerPropTypes: {
     containerPadding: PropTypes.Requireable<number>;
     container: PropTypes.Requireable<any>;
     disabled: PropTypes.Requireable<boolean>;
-    toggleAs: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     menuClassName: PropTypes.Requireable<string>;
     menuStyle: PropTypes.Requireable<object>;
     placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -69,7 +67,7 @@ export declare const listPickerPropTypes: {
     onOpen: PropTypes.Requireable<(...args: any[]) => any>;
     onClose: PropTypes.Requireable<(...args: any[]) => any>;
     onClean: PropTypes.Requireable<(...args: any[]) => any>;
-    listProps: PropTypes.Requireable<object>;
+    listProps: PropTypes.Requireable<any>;
     onEnter: PropTypes.Requireable<(...args: any[]) => any>;
     onEntering: PropTypes.Requireable<(...args: any[]) => any>;
     onEntered: PropTypes.Requireable<(...args: any[]) => any>;

package/cjs/Picker/propTypes.js

@@ -23,7 +23,8 @@ var pickerPropTypes = (0, _extends2.default)({}, _utils2.animationPropTypes, {
   containerPadding: _propTypes.default.number,
   container: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.func]),
   disabled: _propTypes.default.bool,
-  toggleAs: _propTypes.default.elementType,
+  // PropTypes.elementType conflictin with React.ElementType
+  // toggleAs: PropTypes.elementType,
   menuClassName: _propTypes.default.string,
   menuStyle: _propTypes.default.object,
   placeholder: _propTypes.default.node,
@@ -41,11 +42,11 @@ var pickerPropTypes = (0, _extends2.default)({}, _utils2.animationPropTypes, {
   onOpen: _propTypes.default.func,
   onClose: _propTypes.default.func,
   onClean: _propTypes.default.func,
-  listProps: _propTypes.default.object
+  listProps: _propTypes.default.any
 });
 exports.pickerPropTypes = pickerPropTypes;
 var listPickerPropTypes = (0, _extends2.default)({}, pickerPropTypes, {
-  data: _propTypes.default.array,
+  data: _propTypes.default.array.isRequired,
   valueKey: _propTypes.default.string,
   labelKey: _propTypes.default.string,
   childrenKey: _propTypes.default.string,

package/cjs/Picker/utils.d.ts

@@ -56,13 +56,13 @@ interface FocusItemValueProps {
  * @param defaultFocusItemValue
  * @param props
  */
-export declare const useFocusItemValue: <T extends string | number>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps) => {
+export declare const useFocusItemValue: <T>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps) => {
     focusItemValue: T | null | undefined;
     setFocusItemValue: React.Dispatch<React.SetStateAction<T | null | undefined>>;
     layer: number;
     setLayer: React.Dispatch<React.SetStateAction<number>>;
-    keys: (string | undefined)[];
-    setKeys: React.Dispatch<React.SetStateAction<(string | undefined)[]>>;
+    keys: any[];
+    setKeys: React.Dispatch<React.SetStateAction<any[]>>;
     onKeyDown: (event: any) => void;
 };
 interface ToggleKeyDownEventProps {