rsuite 5.4.1 → 5.4.2

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [5.4.2](https://github.com/rsuite/rsuite/compare/v5.4.1...v5.4.2) (2021-12-24)
+
+### Bug Fixes
+
+- **Affix:** fix unupdated position after window size change ([#2256](https://github.com/rsuite/rsuite/issues/2256)) ([61c7b27](https://github.com/rsuite/rsuite/commit/61c7b279f136ae44b9470046344cd6e163d02589))
+- **Modal:** improve the mouse scrolling experience on Modal ([#2254](https://github.com/rsuite/rsuite/issues/2254)) ([137d57e](https://github.com/rsuite/rsuite/commit/137d57ef1e79ca0055b3af8d6cd5cff2a9c4ef55))
+- **Navbar:** fix dropdown submenu throwing error ([#2250](https://github.com/rsuite/rsuite/issues/2250)) ([875130d](https://github.com/rsuite/rsuite/commit/875130d342f58e4078babe428913640e0b2faa04))
+
 ## [5.4.1](https://github.com/rsuite/rsuite/compare/v5.4.0...v5.4.1) (2021-12-23)
 
 ### Bug Fixes

package/Modal/styles/index.less

@@ -5,6 +5,27 @@
 // Modals
 // --------------------------------------------------
 
+// Modal background
+.rs-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: @zindex-modal - 1;
+  background-color: var(--rs-bg-backdrop);
+
+  // Fade for backdrop
+  &.rs-anim-fade {
+    opacity: 0;
+    transition: opacity 0.3s ease-in;
+  }
+
+  &.rs-anim-in {
+    opacity: 1;
+  }
+}
+
 // Kill the scroll on the body
 .rs-modal-open {
   overflow: hidden;
@@ -15,9 +36,9 @@
   overflow: auto;
   z-index: @zindex-modal;
   top: 0;
-  bottom: 0;
-  right: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 // Container that the modal scrolls within
@@ -71,26 +92,6 @@
   padding: @modal-content-padding;
 }
 
-// Modal background
-.rs-modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: var(--rs-bg-backdrop);
-
-  // Fade for backdrop
-  &.rs-anim-fade {
-    opacity: 0;
-    transition: opacity 0.3s ease-in;
-  }
-
-  &.rs-anim-in {
-    opacity: 1;
-  }
-}
-
 // Modal header
 // Top section of the modal w/ title and dismiss
 .rs-modal-header {

package/Navbar/styles/index.less

@@ -1,4 +1,5 @@
 @import '../../styles/common';
+@import '../../Dropdown/styles/index';
 
 // NavBar
 // --------------------------------------------------
@@ -97,7 +98,13 @@
   margin: 0 !important;
 }
 
-// DropDown
+.rs-navbar-item.rs-navbar-item-active {
+  .high-contrast-mode({
+    text-decoration: underline;
+  });
+}
+
+// Dropdown
 .rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle {
   &:extend(.rs-navbar-item);
 
@@ -117,10 +124,10 @@
   }
 }
 
-.rs-navbar-item.rs-navbar-item-active {
-  .high-contrast-mode({
-    text-decoration: underline;
-  });
+.rs-navbar .rs-dropdown-item {
+  &:hover {
+    .menuitem-active();
+  }
 }
 
 // Default Navbar

package/cjs/Affix/Affix.js

@@ -35,7 +35,9 @@ function useOffset(mountRef) {
     return mountRef.current;
   }, updateOffset); // Initialize after the first render
 
-  (0, _react.useEffect)(updateOffset, [updateOffset]);
+  (0, _utils.useMount)(updateOffset); // Update after window size changes
+
+  (0, _utils.useEventListener)(window, 'resize', updateOffset, false);
   return offset;
 }
 /**

package/cjs/Disclosure/Disclosure.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import DisclosureButton from './DisclosureButton';
 import DisclosureContent from './DisclosureContent';
-export interface DisclosureRenderProps {
+export declare type DisclosureTrigger = 'click' | 'mouseover';
+export interface DisclosureRenderProps extends Pick<React.HTMLAttributes<HTMLElement>, 'onMouseOver' | 'onMouseOut'> {
     open: boolean;
 }
 export interface DisclosureProps {
@@ -13,10 +14,12 @@ export interface DisclosureProps {
     hideOnClickOutside?: boolean;
     /** Callback when disclosure button is being activated to update the open state */
     onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
+    /** What mouse events should disclosure reacts to */
+    trigger?: DisclosureTrigger[];
 }
-declare function Disclosure(props: DisclosureProps): JSX.Element;
-declare namespace Disclosure {
-    var Button: typeof DisclosureButton;
-    var Content: typeof DisclosureContent;
+export interface DisclosureComponent extends React.FC<DisclosureProps> {
+    Button: typeof DisclosureButton;
+    Content: typeof DisclosureContent;
 }
+declare const Disclosure: DisclosureComponent;
 export default Disclosure;

package/cjs/Disclosure/Disclosure.js

@@ -41,14 +41,17 @@ function disclosureReducer(state, action) {
   return state;
 }
 
-function Disclosure(props) {
+var Disclosure = /*#__PURE__*/_react.default.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 = (0, _react.useContext)(_DisclosureContext.default);
 
   var _useReducer = (0, _react.useReducer)(disclosureReducer, (0, _extends2.default)({}, initialDisclosureState, {
     open: defaultOpen
@@ -71,19 +74,56 @@ function Disclosure(props) {
       });
     }
   });
+  var onMouseOver = (0, _react.useCallback)(function (event) {
+    if (!open) {
+      dispatch({
+        type: _DisclosureContext.DisclosureActionTypes.Show
+      });
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(true, event);
+    }
+  }, [open, dispatch, onToggle]);
+  var onMouseOut = (0, _react.useCallback)(function (event) {
+    if (open) {
+      dispatch({
+        type: _DisclosureContext.DisclosureActionTypes.Hide
+      });
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(false, event);
+    }
+  }, [open, dispatch, onToggle]);
   var contextValue = (0, _react.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]);
+  }, [parentDisclosure, open, dispatch, onToggle, trigger]);
+  var renderProps = (0, _react.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.default.createElement(_DisclosureContext.default.Provider, {
     value: contextValue
-  }, children({
-    open: open
-  }, containerElementRef));
-}
+  }, children(renderProps, containerElementRef));
+});
 
 Disclosure.Button = _DisclosureButton.default;
 Disclosure.Content = _DisclosureContent.default;

package/cjs/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/cjs/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/cjs/Dropdown/Dropdown.js

@@ -41,7 +41,7 @@ var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
 
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 
-var _Navbar = require("../Navbar/Navbar");
+var _Navbar = require("../Navbar");
 
 var _Disclosure = _interopRequireDefault(require("../Disclosure/Disclosure"));
 

package/cjs/Dropdown/DropdownItem.js

@@ -33,8 +33,6 @@ var _SidenavDropdownItem = _interopRequireDefault(require("../Sidenav/SidenavDro
 
 var _DisclosureContext = _interopRequireWildcard(require("../Disclosure/DisclosureContext"));
 
-var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
-
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 
 var _useInternalId = _interopRequireDefault(require("../utils/useInternalId"));
@@ -87,7 +85,8 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
   var handleClickNavbarDropdownItem = (0, _react.useCallback)(function (event) {
     dispatchDisclosure === null || dispatchDisclosure === void 0 ? void 0 : dispatchDisclosure({
-      type: _DisclosureContext.DisclosureActionTypes.Hide
+      type: _DisclosureContext.DisclosureActionTypes.Hide,
+      cascade: true
     });
     handleSelectItem === null || handleSelectItem === void 0 ? void 0 : handleSelectItem(event);
   }, [dispatchDisclosure, handleSelectItem]);
@@ -154,16 +153,16 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       dataAttributes['data-event-key-type'] = typeof eventKey;
     }
 
-    return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({
+    return renderDropdownItem((0, _extends2.default)({
       ref: ref,
       className: classes,
-      "aria-current": selected || undefined
+      'aria-current': selected || undefined
     }, dataAttributes, restProps, {
-      as: Component,
-      onClick: (0, _utils.createChainedFunction)(handleClickNavbarDropdownItem, restProps.onClick)
-    }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
-      className: prefix('menu-icon')
-    }), children));
+      onClick: (0, _utils.createChainedFunction)(handleClickNavbarDropdownItem, restProps.onClick),
+      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+        className: prefix('menu-icon')
+      }), children)
+    }));
   }
 
   return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {

package/cjs/Dropdown/DropdownMenu.js

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

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