rsuite 5.3.0 → 5.4.3

package/esm/Disclosure/Disclosure.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 // Headless Disclosure
 // Ref: https://w3c.github.io/aria-practices/#disclosure
-import React, { useMemo, useReducer, useRef } from 'react';
+import React, { useMemo, useReducer, useRef, useCallback, useContext } from 'react';
 import DisclosureContext, { DisclosureActionTypes } from './DisclosureContext';
 import DisclosureButton from './DisclosureButton';
 import DisclosureContent from './DisclosureContent';
@@ -26,14 +26,17 @@ function disclosureReducer(state, action) {
   return state;
 }
 
-function Disclosure(props) {
+var Disclosure = /*#__PURE__*/React.memo(function (props) {
   var children = props.children,
       openProp = props.open,
       _props$defaultOpen = props.defaultOpen,
       defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
       _props$hideOnClickOut = props.hideOnClickOutside,
       hideOnClickOutside = _props$hideOnClickOut === void 0 ? false : _props$hideOnClickOut,
-      onToggle = props.onToggle;
+      onToggle = props.onToggle,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? ['click'] : _props$trigger;
+  var parentDisclosure = useContext(DisclosureContext);
 
   var _useReducer = useReducer(disclosureReducer, _extends({}, initialDisclosureState, {
     open: defaultOpen
@@ -56,20 +59,56 @@ function Disclosure(props) {
       });
     }
   });
-  var context = useMemo(function () {
+  var onMouseOver = useCallback(function (event) {
+    if (!open) {
+      dispatch({
+        type: DisclosureActionTypes.Show
+      });
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(true, event);
+    }
+  }, [open, dispatch, onToggle]);
+  var onMouseOut = useCallback(function (event) {
+    if (open) {
+      dispatch({
+        type: DisclosureActionTypes.Hide
+      });
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(false, event);
+    }
+  }, [open, dispatch, onToggle]);
+  var contextValue = useMemo(function () {
+    var cascadeDispatch = function cascadeDispatch(action) {
+      var result = dispatch(action);
+
+      if ('cascade' in action) {
+        parentDisclosure === null || parentDisclosure === void 0 ? void 0 : parentDisclosure[1](action);
+      }
+
+      return result;
+    };
+
     return [{
       open: open
-    }, dispatch, {
-      onToggle: onToggle
+    }, cascadeDispatch, {
+      onToggle: onToggle,
+      trigger: trigger
     }];
-  }, [open, dispatch, onToggle]);
-  return /*#__PURE__*/React.createElement(DisclosureContext.Provider, {
-    value: context
-  }, children({
-    open: open
-  }, containerElementRef));
-}
+  }, [parentDisclosure, open, dispatch, onToggle, trigger]);
+  var renderProps = useMemo(function () {
+    var renderProps = {
+      open: open
+    };
+
+    if (trigger.includes('mouseover')) {
+      renderProps.onMouseOver = onMouseOver;
+      renderProps.onMouseOut = onMouseOut;
+    }
 
+    return renderProps;
+  }, [open, trigger, onMouseOver, onMouseOut]);
+  return /*#__PURE__*/React.createElement(DisclosureContext.Provider, {
+    value: contextValue
+  }, children(renderProps, containerElementRef));
+});
 Disclosure.Button = DisclosureButton;
 Disclosure.Content = DisclosureContent;
 export default Disclosure;

package/esm/Disclosure/DisclosureButton.d.ts

@@ -3,9 +3,9 @@ export interface DisclosureButtonRenderProps {
     open: boolean;
 }
 export interface DisclosureButtonProps {
-    children: (props: React.ButtonHTMLAttributes<HTMLButtonElement> & DisclosureButtonRenderProps, ref: React.Ref<HTMLButtonElement>) => React.ReactElement<React.HTMLAttributes<HTMLButtonElement>>;
+    children: (props: React.HTMLAttributes<HTMLElement> & DisclosureButtonRenderProps, ref: React.Ref<HTMLElement>) => React.ReactElement<React.HTMLAttributes<HTMLElement>>;
 }
-declare function DisclosureButton(props: DisclosureButtonProps): React.ReactElement<React.HTMLAttributes<HTMLButtonElement>, string | React.JSXElementConstructor<any>>;
+declare function DisclosureButton(props: DisclosureButtonProps): React.ReactElement<React.HTMLAttributes<HTMLElement>, string | React.JSXElementConstructor<any>>;
 declare namespace DisclosureButton {
     var displayName: string;
 }

package/esm/Disclosure/DisclosureContext.d.ts

@@ -1,4 +1,5 @@
 import React, { Dispatch } from 'react';
+import type { DisclosureTrigger } from './Disclosure';
 export interface DisclosureState {
     open: boolean;
 }
@@ -7,12 +8,16 @@ export declare enum DisclosureActionTypes {
     Hide = 1
 }
 export declare type DisclosureAction = {
-    type: DisclosureActionTypes;
+    type: DisclosureActionTypes.Show;
+} | {
+    type: DisclosureActionTypes.Hide;
+    cascade?: boolean;
 };
 export declare type DisclosureContextProps = [
     DisclosureState,
     Dispatch<DisclosureAction>,
     {
+        trigger: DisclosureTrigger[];
         onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
     }
 ];

package/esm/Dropdown/Dropdown.js

@@ -15,7 +15,7 @@ import DropdownToggle from './DropdownToggle';
 import MenuContext from '../Menu/MenuContext';
 import MenuItem from '../Menu/MenuItem';
 import kebabCase from 'lodash/kebabCase';
-import { NavbarContext } from '../Navbar/Navbar';
+import { NavbarContext } from '../Navbar';
 import Disclosure from '../Disclosure/Disclosure';
 import SidenavDropdown from '../Sidenav/SidenavDropdown';
 import NavContext from '../Nav/NavContext';

package/esm/Dropdown/DropdownItem.js

@@ -11,7 +11,6 @@ import { createChainedFunction, mergeRefs, shallowEqual, useClassNames } from '.
 import { NavbarContext } from '../Navbar/Navbar';
 import SidenavDropdownItem from '../Sidenav/SidenavDropdownItem';
 import DisclosureContext, { DisclosureActionTypes } from '../Disclosure/DisclosureContext';
-import SafeAnchor from '../SafeAnchor';
 import NavContext from '../Nav/NavContext';
 import useInternalId from '../utils/useInternalId';
 import { DropdownActionType } from './DropdownState';
@@ -62,7 +61,8 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var handleClickNavbarDropdownItem = useCallback(function (event) {
     dispatchDisclosure === null || dispatchDisclosure === void 0 ? void 0 : dispatchDisclosure({
-      type: DisclosureActionTypes.Hide
+      type: DisclosureActionTypes.Hide,
+      cascade: true
     });
     handleSelectItem === null || handleSelectItem === void 0 ? void 0 : handleSelectItem(event);
   }, [dispatchDisclosure, handleSelectItem]);
@@ -129,16 +129,16 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dataAttributes['data-event-key-type'] = typeof eventKey;
     }
 
-    return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(SafeAnchor, _extends({
+    return renderDropdownItem(_extends({
       ref: ref,
       className: classes,
-      "aria-current": selected || undefined
+      'aria-current': selected || undefined
     }, dataAttributes, restProps, {
-      as: Component,
-      onClick: createChainedFunction(handleClickNavbarDropdownItem, restProps.onClick)
-    }), icon && /*#__PURE__*/React.cloneElement(icon, {
-      className: prefix('menu-icon')
-    }), children));
+      onClick: createChainedFunction(handleClickNavbarDropdownItem, restProps.onClick),
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.cloneElement(icon, {
+        className: prefix('menu-icon')
+      }), children)
+    }));
   }
 
   return /*#__PURE__*/React.createElement(MenuItem, {

package/esm/Dropdown/DropdownMenu.js

@@ -2,9 +2,9 @@ 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 } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import omit from 'lodash/omit';
 import Menu from '../Menu/Menu';
 import MenuItem from '../Menu/MenuItem';
@@ -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;
@@ -69,17 +72,20 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useClassNames3 = useClassNames('dropdown-item'),
       mergeItemClassNames = _useClassNames3.merge,
       withItemClassPrefix = _useClassNames3.withClassPrefix,
-      prefixItemClassName = _useClassNames3.prefix; // <Dropdown.Menu> is used outside of <Dropdown>
+      prefixItemClassName = _useClassNames3.prefix;
+
+  var contextValue = 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.createElement(DropdownContext.Provider, {
-      value: {
-        activeKey: activeKey,
-        onSelect: onSelect
-      }
+      value: contextValue
     }, /*#__PURE__*/React.createElement(Menubar, {
       vertical: true,
       onActivateItem: function onActivateItem(event) {
@@ -110,21 +116,73 @@ 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 // focus: hasFocus
+
+      }));
+      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("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))), // prefixItemClassName`submenu`,
+        withItemClassPrefix({
+          'with-icon': icon,
+          open: open,
+          // active: selected,
+          disabled: disabled // focus: active
+
+        }));
+        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`,
+        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["toggle"]))), // prefixItemClassName`submenu`,
         withItemClassPrefix({
           'with-icon': icon,
           open: open,
@@ -140,13 +198,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({
@@ -156,9 +214,9 @@ 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,

package/esm/Dropdown/DropdownToggle.js

@@ -6,6 +6,7 @@ import Button from '../Button';
 import { useClassNames } from '../utils';
 import useToggleCaret from '../utils/useToggleCaret';
 import { SidenavContext } from '../Sidenav/Sidenav';
+import NavContext from '../Nav/NavContext';
 var DropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? Button : _props$as,
@@ -22,6 +23,9 @@ var DropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var sidenav = useContext(SidenavContext);
 
+  var _useContext = useContext(NavContext),
+      withinNav = _useContext.withinNav;
+
   var _useClassNames = useClassNames(classPrefix),
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -33,7 +37,9 @@ var DropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var inSidenav = !!sidenav; // Caret icon is down by default, when Dropdown is used in Sidenav.
 
   var Caret = useToggleCaret(inSidenav ? 'bottomStart' : placement);
-  var toggle = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  var toggle = /*#__PURE__*/React.createElement(Component, _extends({
+    appearance: withinNav ? 'subtle' : undefined
+  }, rest, {
     ref: ref,
     className: classes
   }), icon && /*#__PURE__*/React.cloneElement(icon, {

package/esm/FormGroup/FormGroup.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 export var FormGroupContext = /*#__PURE__*/React.createContext({});
@@ -18,10 +18,13 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       merge = _useClassNames.merge;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/React.createElement(FormGroupContext.Provider, {
-    value: {
+  var contextValue = useMemo(function () {
+    return {
       controlId: controlId
-    }
+    };
+  }, [controlId]);
+  return /*#__PURE__*/React.createElement(FormGroupContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes,

package/esm/Menu/MenuItem.js

@@ -42,7 +42,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 = useCallback(function () {
     if (!isNil(menuitemRef.current) && !hasFocus) {

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/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/esm/Nav/Nav.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import NavItem from './NavItem';
 import Dropdown from '../Dropdown';
@@ -55,13 +55,17 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelectFromSidenav = _ref$onSelect === void 0 ? onSelectProp : _ref$onSelect;
 
   var activeKey = activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav;
+  var contextValue = 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.createElement(NavContext.Provider, {
-      value: {
-        activeKey: activeKey,
-        onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
-      }
+      value: contextValue
     }, /*#__PURE__*/React.createElement("ul", _extends({
       ref: ref,
       className: classes
@@ -72,10 +76,7 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   if (sidenav) {
     return /*#__PURE__*/React.createElement(NavContext.Provider, {
-      value: {
-        activeKey: activeKey,
-        onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
-      }
+      value: contextValue
     }, /*#__PURE__*/React.createElement(Menubar, {
       vertical: !!sidenav
     }, function (menubar, ref) {
@@ -88,10 +89,7 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/React.createElement(NavContext.Provider, {
-    value: {
-      activeKey: activeKey,
-      onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
-    }
+    value: contextValue
   }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: menubarRef,
     className: classes

package/esm/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/esm/Nav/NavContext.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import noop from 'lodash/noop';
 var NavContext = /*#__PURE__*/React.createContext({
+  withinNav: false,
   activeKey: null,
   onSelect: noop
 });

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;