rsuite 5.4.1 → 5.5.0

package/esm/Dropdown/DropdownMenu.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import React, { useCallback, useContext, useMemo } from 'react';
 import omit from 'lodash/omit';
@@ -15,8 +15,10 @@ import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
 import AngleRight from '@rsuite/icons/legacy/AngleRight';
 import useCustom from '../utils/useCustom';
 import DropdownContext from './DropdownContext';
+import { NavbarContext } from '../Navbar';
 import Menubar from '../Menu/Menubar';
 import SidenavDropdownMenu from '../Sidenav/SidenavDropdownMenu';
+import Disclosure from '../Disclosure';
 
 /**
  * The <Dropdown.Menu> API
@@ -49,6 +51,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var dropdown = useContext(DropdownContext);
   var sidenav = useContext(SidenavContext);
+  var withinNavbar = Boolean(useContext(NavbarContext));
 
   var _useCustom = useCustom('DropdownMenu'),
       rtl = _useCustom.rtl;
@@ -113,22 +116,69 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       disabled = _omit.disabled,
       menuProps = _objectWithoutPropertiesLoose(_omit, ["icon", "className", "disabled"]);
 
-  var Icon = rtl ? AngleLeft : AngleRight;
+  var Icon = rtl ? AngleLeft : AngleRight; // Renders a disclosure when used within <Navbar>
+
+  if (withinNavbar) {
+    return /*#__PURE__*/React.createElement(Disclosure, {
+      hideOnClickOutside: true,
+      trigger: ['click', 'mouseover']
+    }, function (_ref, containerRef) {
+      var open = _ref.open,
+          props = _objectWithoutPropertiesLoose(_ref, ["open"]);
+
+      var classes = mergeItemClassNames(className, withItemClassPrefix({
+        disabled: disabled,
+        open: open,
+        submenu: true
+      }));
+      return /*#__PURE__*/React.createElement("li", _extends({
+        ref: mergeRefs(ref, containerRef),
+        className: classes
+      }, props), /*#__PURE__*/React.createElement(Disclosure.Button, null, function (_ref2, buttonRef) {
+        var open = _ref2.open,
+            buttonProps = _objectWithoutPropertiesLoose(_ref2, ["open"]);
+
+        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))), withItemClassPrefix({
+          'with-icon': icon,
+          open: open,
+          disabled: disabled
+        }));
+        return /*#__PURE__*/React.createElement("div", _extends({
+          ref: mergeRefs(buttonRef, buttonRef),
+          className: classes,
+          "data-event-key": eventKey,
+          "data-event-key-type": typeof eventKey
+        }, buttonProps), icon && /*#__PURE__*/React.cloneElement(icon, {
+          className: prefix('menu-icon')
+        }), title, /*#__PURE__*/React.createElement(Icon, {
+          className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["toggle-icon"])))
+        }));
+      }), /*#__PURE__*/React.createElement(Disclosure.Content, null, function (_ref3, elementRef) {
+        var open = _ref3.open;
+        var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
+        return /*#__PURE__*/React.createElement("ul", _extends({
+          ref: elementRef,
+          className: menuClassName,
+          hidden: !open
+        }, menuProps), children);
+      }));
+    });
+  }
+
   return /*#__PURE__*/React.createElement(Menu, {
     openMenuOn: ['mouseover', 'click'],
-    renderMenuButton: function renderMenuButton(_ref, buttonRef) {
-      var open = _ref.open,
-          menuButtonProps = _objectWithoutPropertiesLoose(_ref, ["open"]);
+    renderMenuButton: function renderMenuButton(_ref4, buttonRef) {
+      var open = _ref4.open,
+          menuButtonProps = _objectWithoutPropertiesLoose(_ref4, ["open"]);
 
       return /*#__PURE__*/React.createElement(MenuItem, {
         disabled: disabled
-      }, function (_ref2, menuitemRef) {
-        var selected = _ref2.selected,
-            active = _ref2.active,
-            menuitem = _objectWithoutPropertiesLoose(_ref2, ["selected", "active"]);
+      }, function (_ref5, menuitemRef) {
+        var selected = _ref5.selected,
+            active = _ref5.active,
+            menuitem = _objectWithoutPropertiesLoose(_ref5, ["selected", "active"]);
 
-        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))), // prefixItemClassName`submenu`,
-        withItemClassPrefix({
+        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["toggle"]))), withItemClassPrefix({
           'with-icon': icon,
           open: open,
           active: selected,
@@ -143,13 +193,13 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }, menuitem, omit(menuButtonProps, ['role'])), icon && /*#__PURE__*/React.cloneElement(icon, {
           className: prefix('menu-icon')
         }), title, /*#__PURE__*/React.createElement(Icon, {
-          className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["toggle-icon"])))
+          className: prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["toggle-icon"])))
         }));
       });
     },
-    renderMenuPopup: function renderMenuPopup(_ref3, popupRef) {
-      var open = _ref3.open,
-          popupProps = _objectWithoutPropertiesLoose(_ref3, ["open"]);
+    renderMenuPopup: function renderMenuPopup(_ref6, popupRef) {
+      var open = _ref6.open,
+          popupProps = _objectWithoutPropertiesLoose(_ref6, ["open"]);
 
       var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
       return /*#__PURE__*/React.createElement("ul", _extends({
@@ -159,15 +209,14 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, popupProps, menuProps), children);
     },
     onToggleMenu: handleToggleSubmenu
-  }, function (_ref4, menuContainerRef) {
-    var open = _ref4.open,
-        menuContainer = _objectWithoutPropertiesLoose(_ref4, ["open"]);
+  }, function (_ref7, menuContainerRef) {
+    var open = _ref7.open,
+        menuContainer = _objectWithoutPropertiesLoose(_ref7, ["open"]);
 
     var classes = mergeItemClassNames(className, withItemClassPrefix({
       disabled: disabled,
       open: open,
-      submenu: true // focus: hasFocus
-
+      submenu: true
     }));
     return /*#__PURE__*/React.createElement("li", _extends({
       ref: mergeRefs(ref, menuContainerRef),

package/esm/Dropdown/test/Dropdown.test.d.ts

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

package/esm/Dropdown/test/Dropdown.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Dropdown from '../Dropdown';
+var ref = /*#__PURE__*/React.createRef(); // Infer `toggleAs` props (defaults to Button)
+
+/*#__PURE__*/
+React.createElement(Dropdown, {
+  ref: ref,
+  appearance: "subtle",
+  size: "sm"
+});
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+var CustomToggle = function CustomToggle(_props) {
+  return null;
+};
+
+/*#__PURE__*/
+React.createElement(Dropdown, {
+  ref: ref,
+  toggleAs: CustomToggle,
+  myProp: "myValue"
+});

package/esm/InputNumber/InputNumber.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { WithAsProps, TypeAttributes, FormControlBaseProps } from '../@types/common';
-export interface InputNumberProps<T = number | string> extends WithAsProps, FormControlBaseProps<T> {
+export interface InputNumberProps<T = number | string> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
     /** Button can have different appearances */
     buttonAppearance?: TypeAttributes.Appearance;
     /** An input can show that it is disabled */

package/esm/InputNumber/InputNumber.js

@@ -10,7 +10,7 @@ import InputGroup from '../InputGroup/InputGroup';
 import InputGroupAddon from '../InputGroup/InputGroupAddon';
 import Input from '../Input';
 import Button from '../Button';
-import { partitionHTMLProps, createChainedFunction, useClassNames, useControlled } from '../utils';
+import { partitionHTMLProps, createChainedFunction, useClassNames, useControlled, KEY_VALUES } from '../utils';
 
 /**
  * Check if the value is a number.
@@ -93,16 +93,17 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
       step = _props$step === void 0 ? 1 : _props$step,
       _props$buttonAppearan = props.buttonAppearance,
       buttonAppearance = _props$buttonAppearan === void 0 ? 'subtle' : _props$buttonAppearan,
-      _props$min = props.min,
-      min = _props$min === void 0 ? -Infinity : _props$min,
-      _props$max = props.max,
-      max = _props$max === void 0 ? Infinity : _props$max,
+      minProp = props.min,
+      maxProp = props.max,
       _props$scrollable = props.scrollable,
       scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
       onChange = props.onChange,
       onWheel = props.onWheel,
       restProps = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "disabled", "readOnly", "plaintext", "value", "defaultValue", "size", "prefix", "postfix", "step", "buttonAppearance", "min", "max", "scrollable", "onChange", "onWheel"]);
 
+  var min = minProp !== null && minProp !== void 0 ? minProp : -Infinity;
+  var max = maxProp !== null && maxProp !== void 0 ? maxProp : Infinity;
+
   var _useControlled = useControlled(valueProp, defaultValue),
       value = _useControlled[0],
       setValue = _useControlled[1];
@@ -166,6 +167,35 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var bit = decimals(val, step);
     handleChangeValue(getSafeValue((val - step).toFixed(bit)), event);
   }, [getSafeValue, handleChangeValue, step, value]);
+  var handleKeyDown = useCallback(function (event) {
+    switch (event.key) {
+      case KEY_VALUES.UP:
+        event.preventDefault();
+        handlePlus(event);
+        break;
+
+      case KEY_VALUES.DOWN:
+        event.preventDefault();
+        handleMinus(event);
+        break;
+
+      case KEY_VALUES.HOME:
+        if (typeof minProp !== 'undefined') {
+          event.preventDefault();
+          handleChangeValue(getSafeValue(minProp), event);
+        }
+
+        break;
+
+      case KEY_VALUES.END:
+        if (typeof maxProp !== 'undefined') {
+          event.preventDefault();
+          handleChangeValue(getSafeValue(maxProp), event);
+        }
+
+        break;
+    }
+  }, [handlePlus, handleMinus, minProp, maxProp, handleChangeValue, getSafeValue]);
   var handleWheel = useCallback(function (event) {
     if (!disabled && !readOnly && event.target === document.activeElement) {
       event.preventDefault();
@@ -211,7 +241,7 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   }, [handleWheel, scrollable]);
   var input = /*#__PURE__*/React.createElement(Input, _extends({}, htmlInputProps, {
-    type: "text",
+    type: "number",
     autoComplete: "off",
     step: step,
     inputRef: inputRef,
@@ -221,7 +251,8 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: disabled,
     readOnly: readOnly,
     plaintext: plaintext,
-    ref: plaintext ? ref : undefined
+    ref: plaintext ? ref : undefined,
+    onKeyDown: handleKeyDown
   }));
 
   if (plaintext) {

package/esm/InputNumber/test/InputNumber.test.d.ts

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

package/esm/InputNumber/test/InputNumber.test.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import InputNumber from '../InputNumber'; // Inherits <input type="number" /> attributes
+
+/*#__PURE__*/
+React.createElement(InputNumber, {
+  placeholder: "Enter number"
+});

package/esm/Modal/Modal.js

@@ -4,14 +4,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 
 var _templateObject, _templateObject2;
 
-import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useRef, useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import on from 'dom-lib/on';
 import getAnimationEnd from 'dom-lib/getAnimationEnd';
 import BaseModal, { modalPropTypes } from '../Overlay/Modal';
 import Bounce from '../Animation/Bounce';
-import { useClassNames, mergeRefs, SIZE } from '../utils';
+import { useClassNames, mergeRefs, SIZE, useWillUnmount } from '../utils';
 import ModalDialog, { modalDialogPropTypes } from './ModalDialog';
 import { ModalContext } from './ModalContext';
 import ModalBody from './ModalBody';
@@ -64,6 +64,10 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       merge = _useClassNames.merge,
       prefix = _useClassNames.prefix;
 
+  var _useState = useState(false),
+      shake = _useState[0],
+      setShake = _useState[1];
+
   var classes = merge(className, prefix(size, {
     full: full
   }));
@@ -90,24 +94,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       isDrawer: drawer
     };
   }, [dialogId, onClose, bodyStyles, drawer]);
-
-  var _useState = useState(false),
-      shake = _useState[0],
-      setShake = _useState[1];
-
-  var handleBackdropClick = 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 = on(dialogRef.current, getAnimationEnd(), function () {
-          setShake(false);
-        });
-      }
-    }
-  }, [backdrop]);
   var handleExited = useCallback(function (node) {
     var _transitionEndListene;
 
@@ -124,11 +110,37 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onEntering === null || onEntering === void 0 ? void 0 : onEntering(node);
     onChangeBodyStyles(true);
   }, [onChangeBodyStyles, onEntering]);
-  useEffect(function () {
+  var handleBackdropClick = 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 = on(dialogRef.current, getAnimationEnd(), function () {
+          setShake(false);
+        });
+      }
+
+      return;
+    }
+
+    onClose === null || onClose === void 0 ? void 0 : onClose(e);
+  }, [backdrop, onClose]);
+  var handleClick = useCallback(function (e) {
+    if (dialogRef.current && e.target !== dialogRef.current) {
+      handleBackdropClick(e);
+    }
+  }, [handleBackdropClick]);
+  useWillUnmount(function () {
     var _transitionEndListene2;
 
     (_transitionEndListene2 = transitionEndListener.current) === null || _transitionEndListene2 === void 0 ? void 0 : _transitionEndListene2.off();
-  }, []);
+  });
   return /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modalContextValue
   }, /*#__PURE__*/React.createElement(BaseModal, _extends({}, rest, {
@@ -136,7 +148,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     backdrop: backdrop,
     open: open,
     onClose: onClose,
-    onBackdropClick: handleBackdropClick,
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["wrapper"]))),
     onEntered: handleEntered,
     onEntering: handleEntering,
@@ -149,7 +160,8 @@ var Modal = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(transitionProps, ["className"]);

package/esm/Modal/utils.js

@@ -45,20 +45,28 @@ export 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 = useCallback(function (entering) {
-    if (overflow && !drawer) {
+    if (overflow && !drawer && ref.current) {
       updateBodyStyles(undefined, entering);
       contentElement.current = ref.current.querySelector("." + prefix('content'));
-      windowResizeListener.current = on(window, 'resize', updateBodyStyles);
-      contentElementResizeObserver.current = new ResizeObserver(function () {
-        return updateBodyStyles();
-      });
-      contentElementResizeObserver.current.observe(contentElement.current);
+
+      if (!windowResizeListener.current) {
+        windowResizeListener.current = on(window, 'resize', updateBodyStyles);
+      }
+
+      if (contentElement.current && !contentElementResizeObserver.current) {
+        contentElementResizeObserver.current = new ResizeObserver(function () {
+          return updateBodyStyles();
+        });
+        contentElementResizeObserver.current.observe(contentElement.current);
+      }
     }
   }, [drawer, overflow, prefix, ref, updateBodyStyles]);
   useEffect(function () {
-    onDestroyEvents();
-  }, [onDestroyEvents]);
+    return onDestroyEvents; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return [overflow ? bodyStyles : {}, onChangeBodyStyles, onDestroyEvents];
 };

package/esm/MultiCascader/MultiCascader.js

@@ -196,8 +196,11 @@ var MultiCascader = /*#__PURE__*/React.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;
@@ -234,7 +237,7 @@ var MultiCascader = /*#__PURE__*/React.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 = useCallback(function (event) {
-    if (disabled) {
+    if (disabled || !targetRef.current) {
       return;
     }
 
@@ -456,6 +459,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _usePickerClassName = usePickerClassName(_extends({}, props, {
     classPrefix: classPrefix,
     hasValue: hasValue,
+    countable: countable,
     name: 'cascader',
     appearance: appearance,
     cleanable: cleanable

package/esm/Nav/NavItem.js

@@ -83,7 +83,9 @@ var NavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   if (navbar) {
-    return /*#__PURE__*/React.createElement(NavbarItem, props);
+    return /*#__PURE__*/React.createElement(NavbarItem, _extends({
+      ref: ref
+    }, props));
   }
 
   return /*#__PURE__*/React.createElement(Component, _extends({

package/esm/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/esm/Navbar/index.js

@@ -1,2 +1,3 @@
 import Navbar from './Navbar';
+export { NavbarContext } from './Navbar';
 export default Navbar;

package/esm/Overlay/Modal.js

@@ -72,7 +72,6 @@ var Modal = /*#__PURE__*/React.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,
@@ -82,7 +81,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onEntered = props.onEntered,
       onClose = props.onClose,
       onOpen = props.onOpen,
-      rest = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useState(!open),
       exited = _useState[0],
@@ -139,17 +138,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     handleFocusDialog();
   });
-  var handleBackdropClick = 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 = useRef();
   var documentFocusListener = useRef();
   var handleOpen = useEventCallback(function () {
@@ -215,11 +203,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   var renderBackdrop = function renderBackdrop() {
-    var backdropPorps = {
-      style: backdropStyle,
-      onClick: handleBackdropClick
-    };
-
     if (Transition) {
       return /*#__PURE__*/React.createElement(Fade, {
         transitionAppear: true,
@@ -231,18 +214,19 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
         return /*#__PURE__*/React.createElement("div", _extends({
           "aria-hidden": true
-        }, rest, backdropPorps, {
+        }, rest, {
+          style: backdropStyle,
           ref: mergeRefs(modal.setBackdropRef, ref),
           className: classNames(backdropClassName, className)
         }));
       });
     }
 
-    return /*#__PURE__*/React.createElement("div", _extends({
-      "aria-hidden": true
-    }, backdropPorps, {
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
+      style: backdropStyle,
       className: backdropClassName
-    }));
+    });
   };
 
   var dialogElement = Transition ? /*#__PURE__*/React.createElement(Transition, _extends({}, animationProps, {
@@ -259,12 +243,12 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children) : children;
   return /*#__PURE__*/React.createElement(OverlayContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Portal, null, backdrop && renderBackdrop(), /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: mergeRefs(modal.setDialogRef, ref),
     style: style,
     className: className,
     tabIndex: -1
-  }), backdrop && renderBackdrop(), dialogElement)));
+  }), dialogElement)));
 });
 export var modalPropTypes = {
   as: PropTypes.elementType,
@@ -289,7 +273,6 @@ Modal.propTypes = _extends({}, animationPropTypes, modalPropTypes, {
   dialogTransitionTimeout: PropTypes.number,
   backdropTransitionTimeout: PropTypes.number,
   transition: PropTypes.any,
-  onEsc: PropTypes.func,
-  onBackdropClick: PropTypes.func
+  onEsc: PropTypes.func
 });
 export default Modal;

package/esm/Picker/DropdownMenu.js

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

package/esm/Picker/PickerToggle.js

@@ -90,11 +90,9 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [input, onFocus]);
   var handleBlur = 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/esm/RangeSlider/RangeSlider.d.ts

@@ -1,6 +1,16 @@
 import React from 'react';
 import { SliderProps } from '../Slider';
 export declare type Range = [number, number];
-export declare type RangeSliderProps = SliderProps<Range>;
-declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<unknown>>;
+export declare type RangeSliderProps = SliderProps<Range> & {
+    /**
+     * Add constraint to validate before onChange is dispatched
+     */
+    constraint?: (range: Range) => boolean;
+};
+declare const RangeSlider: React.ForwardRefExoticComponent<SliderProps<Range> & {
+    /**
+     * Add constraint to validate before onChange is dispatched
+     */
+    constraint?: ((range: Range) => boolean) | undefined;
+} & React.RefAttributes<unknown>>;
 export default RangeSlider;