rsuite 5.2.1 → 5.3.0

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

@@ -3,7 +3,7 @@ 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);
+    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

@@ -67,7 +67,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/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

@@ -109,8 +109,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 +119,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 +231,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,11 +2,11 @@ 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);
     containerPadding?: number;

package/cjs/Overlay/Position.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _elementResizeEvent = _interopRequireDefault(require("element-resize-event"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -27,6 +25,8 @@ var _addClass = _interopRequireDefault(require("dom-lib/addClass"));
 
 var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
 
+var _resizeObserver = require("@juggle/resize-observer");
+
 var _isElement = _interopRequireDefault(require("../DOMHelper/isElement"));
 
 var _positionUtils = _interopRequireDefault(require("./positionUtils"));
@@ -36,13 +36,15 @@ 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,
     positionTop: 0,
@@ -87,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) {
@@ -96,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"
@@ -129,17 +136,19 @@ var usePosition = function usePosition(props, ref) {
 
     if (overlay) {
       // Update the position when the size of the overlay changes
-      (0, _elementResizeEvent.default)(overlay, function () {
+      overlayResizeObserver.current = new _resizeObserver.ResizeObserver(function () {
         return updatePosition(true, true);
       });
+      overlayResizeObserver.current.observe(overlay);
     }
 
     return function () {
-      var _containerScrollListe;
+      var _containerScrollListe, _overlayResizeObserve;
 
       lastTargetRef.current = null;
       (_containerScrollListe = containerScrollListener) === null || _containerScrollListe === void 0 ? void 0 : _containerScrollListe.off();
       resizeListener === null || resizeListener === void 0 ? void 0 : resizeListener.off();
+      (_overlayResizeObserve = overlayResizeObserver.current) === null || _overlayResizeObserve === void 0 ? void 0 : _overlayResizeObserve.disconnect();
     };
   }, [preventOverflow, ref, updatePosition]);
   (0, _utils.useUpdateEffect)(function () {
@@ -152,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],
@@ -190,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;
 };

package/cjs/Overlay/positionUtils.js

@@ -13,7 +13,7 @@ var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 
 var _ownerDocument = _interopRequireDefault(require("dom-lib/ownerDocument"));
 
-var _getOffset3 = _interopRequireDefault(require("dom-lib/getOffset"));
+var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
 
 var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
 
@@ -45,10 +45,10 @@ function getContainerDimensions(containerNode) {
     scrollY = (0, _scrollTop.default)((0, _ownerDocument.default)(containerNode).documentElement) || (0, _scrollTop.default)(containerNode);
     scrollX = (0, _scrollLeft.default)((0, _ownerDocument.default)(containerNode).documentElement) || (0, _scrollLeft.default)(containerNode);
   } else {
-    var _getOffset = (0, _getOffset3.default)(containerNode);
+    var _ref = (0, _getOffset.default)(containerNode);
 
-    width = _getOffset.width;
-    height = _getOffset.height;
+    width = _ref.width;
+    height = _ref.height;
     scrollY = (0, _scrollTop.default)(containerNode);
     scrollX = (0, _scrollLeft.default)(containerNode);
   }
@@ -143,7 +143,7 @@ var _default = function _default(props) {
 
   return {
     getPosition: function getPosition(target, container) {
-      var offset = container.tagName === 'BODY' ? (0, _getOffset3.default)(target) : (0, _getPosition2.default)(target, container, false);
+      var offset = container.tagName === 'BODY' ? (0, _getOffset.default)(target) : (0, _getPosition2.default)(target, container, false);
       return offset;
     },
     calcAutoPlacement: function calcAutoPlacement(targetOffset, container, overlay) {
@@ -213,9 +213,9 @@ var _default = function _default(props) {
     calcOverlayPosition: function calcOverlayPosition(overlayNode, target, container) {
       var childOffset = this.getPosition(target, container);
 
-      var _getOffset2 = (0, _getOffset3.default)(overlayNode),
-          overlayHeight = _getOffset2.height,
-          overlayWidth = _getOffset2.width;
+      var _ref2 = (0, _getOffset.default)(overlayNode),
+          overlayHeight = _ref2.height,
+          overlayWidth = _ref2.width;
 
       var top = childOffset.top,
           left = childOffset.left;

package/cjs/Pagination/Pagination.d.ts

@@ -31,7 +31,7 @@ export interface PaginationProps extends WithAsProps {
     /** A pagination can have different sizes */
     size?: TypeAttributes.Size;
     /** callback function for pagination clicked */
-    onSelect?: (eventKey: number, event: React.MouseEvent) => void;
+    onSelect?: (eventKey: string | number, event: React.MouseEvent) => void;
 }
 declare const Pagination: RsRefForwardingComponent<'div', PaginationProps>;
 export default Pagination;

package/cjs/Pagination/PaginationButton.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-export interface PaginationButtonProps extends WithAsProps, Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> {
+export interface PaginationButtonProps<T = number | string> extends WithAsProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {
     /** The value of the current option */
-    eventKey?: number | string;
+    eventKey: T;
     /** Called when the button is clicked. */
     onClick?: React.MouseEventHandler;
     /** A button can show it is currently unable to be interacted with */
@@ -12,7 +12,7 @@ export interface PaginationButtonProps extends WithAsProps, Omit<React.HTMLAttri
     /** Primary content */
     children?: React.ReactNode;
     /** Select the callback function for the current option  */
-    onSelect?: (eventKey: number | string, event: React.MouseEvent) => void;
+    onSelect?: (eventKey: T, event: React.MouseEvent) => void;
 }
 declare const PaginationButton: RsRefForwardingComponent<'button', PaginationButtonProps>;
 export default PaginationButton;

package/cjs/Pagination/PaginationGroup.js

@@ -35,7 +35,7 @@ var LimitPicker = function LimitPicker(props) {
       onChangeLimit = props.onChangeLimit,
       size = props.size,
       prefix = props.prefix;
-  var disabledPicker = typeof disabled === 'function' ? disabled('picker') : disabled;
+  var disabledPicker = typeof disabled === 'function' ? disabled('picker') : Boolean(disabled);
   var formatlimitOptions = limitOptions.map(function (item) {
     return {
       value: item,
@@ -51,7 +51,8 @@ var LimitPicker = function LimitPicker(props) {
     placement: "topStart",
     data: formatlimitOptions,
     value: limit,
-    onChange: onChangeLimit,
+    onChange: onChangeLimit // fixme don't use any
+    ,
     menuStyle: {
       minWidth: 'auto'
     },
@@ -153,7 +154,8 @@ var PaginationGroup = /*#__PURE__*/_react.default.forwardRef(function (props, re
         maxButtons: maxButtons,
         pages: pages,
         disabled: disabled,
-        onSelect: onChangePage,
+        onSelect: onChangePage // fixme don't use any
+        ,
         activePage: activePage
       }, rest));
     } else if (key === 'total') {

package/cjs/Panel/Panel.d.ts

@@ -24,7 +24,7 @@ export interface PanelProps<T = string | number> extends WithAsProps, AnimationE
     /** Role of Panel */
     panelRole?: string;
     /** callback function for the panel clicked */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 declare const Panel: RsRefForwardingComponent<'div', PanelProps>;
 export default Panel;

package/cjs/Panel/Panel.js

@@ -127,7 +127,7 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         className: prefix('title'),
         role: "presentation"
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: expanded ? null : 'collapsed'
+        className: expanded ? undefined : 'collapsed'
       }, header))) : header;
     } else {
       var _className = merge(prefix('title'), (0, _get.default)(header, 'props.className'));
@@ -139,7 +139,7 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     return /*#__PURE__*/_react.default.createElement("div", {
       role: headerRole,
-      "aria-controls": collapsible && id ? "" + id : null,
+      "aria-controls": collapsible && id ? "" + id : undefined,
       "aria-expanded": expanded,
       className: prefix('header'),
       onClick: collapsible ? handleSelect : undefined,

package/cjs/PanelGroup/PanelGroup.d.ts

@@ -13,12 +13,12 @@ export interface PanelGroupProps<T = KeyType> extends WithAsProps {
     /** Primary content */
     children?: React.ReactNode;
     /** Toggles the callback function for the expand panel */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 interface PanelGroupContext {
     accordion?: boolean;
     activeKey?: KeyType;
-    onGroupSelect?: (activeKey: KeyType, event: React.MouseEvent) => void;
+    onGroupSelect?: (activeKey: KeyType | undefined, event: React.MouseEvent) => void;
 }
 export declare const PanelGroupContext: React.Context<PanelGroupContext>;
 declare const PanelGroup: React.ForwardRefExoticComponent<PanelGroupProps<KeyType> & React.RefAttributes<unknown>>;

package/cjs/Picker/DropdownMenu.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ListProps } from './VirtualizedList';
 import { StandardProps, ItemDataType } from '../@types/common';
-export interface DropdownMenuProps extends StandardProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface DropdownMenuProps<Multiple = false> extends StandardProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     classPrefix: string;
     data?: ItemDataType[];
     group?: boolean;
@@ -23,14 +23,17 @@ export interface DropdownMenuProps extends StandardProps, Omit<React.HTMLAttribu
     /** Custom selected option */
     renderMenuItem?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
     renderMenuGroup?: (title: React.ReactNode, item: any) => React.ReactNode;
-    onSelect?: (value: any, item: any, event: React.MouseEvent, checked?: boolean) => void;
+    onSelect?: Multiple extends true ? (value: any, item: any, event: React.MouseEvent, checked: boolean) => void : Multiple extends false ? (value: any, item: any, event: React.MouseEvent) => void : any;
     onGroupTitleClick?: (event: React.MouseEvent) => void;
 }
-declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
+export declare type DropdownMenuComponent = React.ForwardRefExoticComponent<DropdownMenuProps> & {
+    <Multiple = false>(props: DropdownMenuProps<Multiple>): React.ReactElement | null;
+};
+declare const DropdownMenu: DropdownMenuComponent;
 export declare const dropdownMenuPropTypes: {
-    classPrefix: PropTypes.Requireable<string>;
+    classPrefix: PropTypes.Validator<string>;
     className: PropTypes.Requireable<string>;
-    dropdownMenuItemAs: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+    dropdownMenuItemAs: PropTypes.Validator<PropTypes.ReactComponentLike>;
     dropdownMenuItemClassPrefix: PropTypes.Requireable<string>;
     data: PropTypes.Requireable<any[]>;
     group: PropTypes.Requireable<boolean>;

package/cjs/Picker/DropdownMenu.js

@@ -87,7 +87,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var styles = (0, _extends2.default)({}, style, {
     maxHeight: maxHeight
   });
-  var menuBodyContainerRef = (0, _react.useRef)();
+  var menuBodyContainerRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)([]),
       foldedGroupKeys = _useState[0],
@@ -209,7 +209,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
   var useVirtualized = virtualized && rowCount * rowHeight > maxHeight;
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    role: !useVirtualized ? 'listbox' : null
+    role: !useVirtualized ? 'listbox' : undefined
   }, rest, {
     className: classes,
     ref: (0, _utils.mergeRefs)(menuBodyContainerRef, ref),
@@ -226,7 +226,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     return /*#__PURE__*/_react.default.createElement(_VirtualizedList.List, (0, _extends2.default)({
       role: "listbox",
       containerRole: '',
-      "aria-readonly": null,
+      "aria-readonly": undefined,
       width: width,
       height: height || maxHeight,
       scrollToIndex: (0, _findIndex.default)(data, function (item) {
@@ -244,9 +244,9 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 });
 
 var dropdownMenuPropTypes = {
-  classPrefix: _propTypes.default.string,
+  classPrefix: _propTypes.default.string.isRequired,
   className: _propTypes.default.string,
-  dropdownMenuItemAs: _propTypes.default.elementType,
+  dropdownMenuItemAs: _propTypes.default.elementType.isRequired,
   dropdownMenuItemClassPrefix: _propTypes.default.string,
   data: _propTypes.default.array,
   group: _propTypes.default.bool,

package/cjs/Picker/PickerOverlay.js

@@ -31,10 +31,11 @@ var PickerOverlay = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       classPrefix = _props$classPrefix === void 0 ? 'picker-menu' : _props$classPrefix,
       autoWidth = props.autoWidth,
       className = props.className,
-      placement = props.placement,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
       target = props.target,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "autoWidth", "className", "placement", "target"]);
-  var overlayRef = (0, _react.useRef)();
+  var overlayRef = (0, _react.useRef)(null);
   var handleResize = (0, _react.useCallback)(function () {
     var instance = target === null || target === void 0 ? void 0 : target.current;
 
@@ -48,7 +49,7 @@ var PickerOverlay = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   (0, _react.useEffect)(function () {
     var toggle = target === null || target === void 0 ? void 0 : target.current;
 
-    if (autoWidth && toggle.root) {
+    if (autoWidth && toggle !== null && toggle !== void 0 && toggle.root) {
       // Get the width value of the button,
       // and then set it to the menu to make their width consistent.
       var width = (0, _getWidth.default)((0, _utils.getDOMNode)(toggle.root));

package/cjs/Picker/PickerToggle.js

@@ -29,7 +29,7 @@ var _Plaintext = _interopRequireDefault(require("../Plaintext"));
 
 var _useToggleCaret = _interopRequireDefault(require("../utils/useToggleCaret"));
 
-var _MaskedInput = _interopRequireDefault(require("../MaskedInput"));
+var _TextMask = _interopRequireDefault(require("../MaskedInput/TextMask"));
 
 var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
 
@@ -68,12 +68,13 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       onClean = props.onClean,
       onFocus = props.onFocus,
       onBlur = props.onBlur,
-      placement = props.placement,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
       caretComponent = props.caretComponent,
       _props$caretAs = props.caretAs,
       caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "cleanable", "tabIndex", "id", "value", "input", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs"]);
-  var inputRef = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),
       activeState = _useState[0],
@@ -104,15 +105,17 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
 
     if (input) {
-      inputRef.current.focus();
+      var _inputRef$current;
+
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
   }, [input, onFocus]);
   var handleBlur = (0, _react.useCallback)(function (event) {
     if (document.activeElement !== inputRef.current) {
-      var _inputRef$current;
+      var _inputRef$current2;
 
       setActive(false);
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
     }
 
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
@@ -167,7 +170,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onFocus: !disabled ? handleFocus : null // The debounce is set to 200 to solve the flicker caused by the switch between input and div.
     ,
     onBlur: !disabled ? (0, _debounce.default)(handleBlur, 200) : null
-  }), /*#__PURE__*/_react.default.createElement(_MaskedInput.default, {
+  }), /*#__PURE__*/_react.default.createElement(_TextMask.default, {
     mask: inputMask,
     value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,
     onBlur: handleInputBlur,
@@ -191,7 +194,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
   }), children ? /*#__PURE__*/_react.default.createElement("span", {
     className: prefix(hasValue ? 'value' : 'placeholder'),
-    "aria-placeholder": typeof children === 'string' ? children : null
+    "aria-placeholder": typeof children === 'string' ? children : undefined
   }, children) : null, showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["clean"]))),
     tabIndex: -1,