rsuite 5.12.0 → 5.14.0

package/cjs/CustomProvider/CustomProvider.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Locale } from '../locales';
+import { ToastContainerInstance } from '../toaster/ToastContainer';
 export interface CustomValue<T = Locale> {
     /** Language configuration */
     locale: T;
@@ -33,6 +34,10 @@ export interface CustomValue<T = Locale> {
      *
      * */
     parseDate: (dateString: string, formatString: string) => Date;
+    /**
+     * A Map of toast containers
+     */
+    toasters?: React.MutableRefObject<Map<string, ToastContainerInstance>>;
 }
 export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {
     /** Supported themes */
@@ -41,6 +46,8 @@ export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>>
     classPrefix?: string;
     /** Primary content */
     children?: React.ReactNode;
+    /** Sets a container for toast rendering */
+    toastContainer?: HTMLElement | (() => HTMLElement | null) | null;
 }
 declare const CustomContext: React.Context<CustomProviderProps<{
     common?: {
@@ -75,7 +82,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -93,7 +100,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -112,7 +119,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -125,6 +132,9 @@ declare const CustomContext: React.Context<CustomProviderProps<{
     } | undefined;
     InputPicker?: {
         newItem: string;
+        /**
+         * A Map of toast containers
+         */
         createOption: string;
     } | undefined;
     Uploader?: {
@@ -179,7 +189,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -197,7 +207,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -216,7 +226,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -229,6 +239,9 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
     } | undefined;
     InputPicker?: {
         newItem: string;
+        /**
+         * A Map of toast containers
+         */
         createOption: string;
     } | undefined;
     Uploader?: {
@@ -250,6 +263,6 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         off: string;
     } | undefined;
 }>>;
-declare const CustomProvider: (props: CustomProviderProps) => JSX.Element;
+declare const CustomProvider: (props: Omit<CustomProviderProps, 'toasters'>) => JSX.Element;
 export { CustomContext, Consumer as CustomConsumer };
 export default CustomProvider;

package/cjs/CustomProvider/CustomProvider.js

@@ -17,6 +17,10 @@ var _prefix = require("../utils/prefix");
 
 var _DOMHelper = require("../DOMHelper");
 
+var _ToastContainer = _interopRequireWildcard(require("../toaster/ToastContainer"));
+
+var _utils = require("../utils");
+
 var CustomContext = /*#__PURE__*/_react.default.createContext({});
 
 exports.CustomContext = CustomContext;
@@ -30,12 +34,21 @@ var CustomProvider = function CustomProvider(props) {
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? (0, _prefix.getClassNamePrefix)() : _props$classPrefix,
       theme = props.theme,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "classPrefix", "theme"]);
+      container = props.toastContainer,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "classPrefix", "theme", "toastContainer"]);
+
+  var toasters = _react.default.useRef(new Map());
+
+  var _usePortal = (0, _utils.usePortal)({
+    container: container
+  }),
+      Portal = _usePortal.Portal;
 
   var value = _react.default.useMemo(function () {
     return (0, _extends2.default)({
       classPrefix: classPrefix,
-      theme: theme
+      theme: theme,
+      toasters: toasters
     }, rest);
   }, [classPrefix, theme, rest]);
 
@@ -52,7 +65,15 @@ var CustomProvider = function CustomProvider(props) {
   }, [classPrefix, theme]);
   return /*#__PURE__*/_react.default.createElement(Provider, {
     value: value
-  }, children);
+  }, children, /*#__PURE__*/_react.default.createElement(Portal, null, _ToastContainer.toastPlacements.map(function (placement) {
+    return /*#__PURE__*/_react.default.createElement(_ToastContainer.default, {
+      key: placement,
+      placement: placement,
+      ref: function ref(_ref) {
+        toasters.current.set(placement, _ref);
+      }
+    });
+  })));
 };
 
 var _default = CustomProvider;

package/cjs/Disclosure/Disclosure.d.ts

@@ -15,7 +15,7 @@ export interface DisclosureProps {
     /** 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[];
+    trigger?: readonly DisclosureTrigger[];
 }
 export interface DisclosureComponent extends React.FC<DisclosureProps> {
     Button: typeof DisclosureButton;

package/cjs/Disclosure/DisclosureContext.d.ts

@@ -17,7 +17,7 @@ export declare type DisclosureContextProps = [
     DisclosureState,
     Dispatch<DisclosureAction>,
     {
-        trigger: DisclosureTrigger[];
+        trigger: readonly DisclosureTrigger[];
         onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
     }
 ];

package/cjs/Dropdown/Dropdown.js

@@ -23,8 +23,6 @@ var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
 
 var _utils = require("../utils");
 
-var _Sidenav = require("../Sidenav/Sidenav");
-
 var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
 
 var _DropdownItem = _interopRequireDefault(require("./DropdownItem"));
@@ -35,22 +33,16 @@ var _Menu = _interopRequireDefault(require("../Menu/Menu"));
 
 var _DropdownToggle = _interopRequireDefault(require("./DropdownToggle"));
 
-var _MenuContext = _interopRequireDefault(require("../Menu/MenuContext"));
-
-var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
-
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 
-var _Navbar = require("../Navbar");
-
-var _Disclosure = _interopRequireDefault(require("../Disclosure/Disclosure"));
-
-var _SidenavDropdown = _interopRequireDefault(require("../Sidenav/SidenavDropdown"));
-
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 
 var _DropdownState = require("./DropdownState");
 
+var _warnOnce = _interopRequireDefault(require("../utils/warnOnce"));
+
+var _Nav = _interopRequireDefault(require("../Nav"));
+
 /**
  * The <Dropdown> API
  * When used inside <Sidenav>, renders a <TreeviewRootItem>;
@@ -58,7 +50,7 @@ var _DropdownState = require("./DropdownState");
  */
 var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var activeKey = props.activeKey,
-      onSelectProp = props.onSelect,
+      onSelect = props.onSelect,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["activeKey", "onSelect"]);
   var _rest$as = rest.as,
       Component = _rest$as === void 0 ? 'div' : _rest$as,
@@ -66,7 +58,6 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onClose = rest.onClose,
       onOpen = rest.onOpen,
       onToggle = rest.onToggle,
-      eventKey = rest.eventKey,
       _rest$trigger = rest.trigger,
       trigger = _rest$trigger === void 0 ? 'click' : _rest$trigger,
       _rest$placement = rest.placement,
@@ -82,30 +73,17 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       children = rest.children,
       menuStyle = rest.menuStyle,
       style = rest.style,
-      toggleProps = (0, _objectWithoutPropertiesLoose2.default)(rest, ["as", "title", "onClose", "onOpen", "onToggle", "eventKey", "trigger", "placement", "toggleAs", "toggleClassName", "open", "defaultOpen", "classPrefix", "className", "disabled", "children", "menuStyle", "style"]);
-
-  var _useContext = (0, _react.useContext)(_NavContext.default),
-      onSelectFromNav = _useContext.onSelect;
-
-  var emitSelect = (0, _react.useCallback)(function (eventKey, event) {
-    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event); // If <Dropdown> is inside <Nav>, also trigger `onSelect` on <Nav>
-
-    onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);
-  }, [onSelectProp, onSelectFromNav]);
+      toggleProps = (0, _objectWithoutPropertiesLoose2.default)(rest, ["as", "title", "onClose", "onOpen", "onToggle", "trigger", "placement", "toggleAs", "toggleClassName", "open", "defaultOpen", "classPrefix", "className", "disabled", "children", "menuStyle", "style"]);
+  var nav = (0, _react.useContext)(_NavContext.default);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
-      withClassPrefix = _useClassNames.withClassPrefix,
-      prefix = _useClassNames.prefix;
+      withClassPrefix = _useClassNames.withClassPrefix;
 
   var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),
       withMenuClassPrefix = _useClassNames2.withClassPrefix,
       mergeMenuClassName = _useClassNames2.merge;
 
-  var _useClassNames3 = (0, _utils.useClassNames)('nav-item'),
-      withNavItemClassPrefix = _useClassNames3.withClassPrefix,
-      mergeNavItemClassNames = _useClassNames3.merge;
-
   var menuButtonTriggers = (0, _react.useMemo)(function () {
     if (!trigger) {
       return undefined;
@@ -125,9 +103,6 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return triggerMap[t];
     });
   }, [trigger]);
-  var parentMenu = (0, _react.useContext)(_MenuContext.default);
-  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
-  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);
 
   var _useReducer = (0, _react.useReducer)(_DropdownState.reducer, _DropdownState.initialState),
       items = _useReducer[0].items,
@@ -141,54 +116,18 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var dropdownContextValue = (0, _react.useMemo)(function () {
     return {
       activeKey: activeKey,
-      onSelect: emitSelect,
+      onSelect: onSelect,
       hasSelectedItem: hasSelectedItem,
       dispatch: dispatch
     };
-  }, [activeKey, emitSelect, hasSelectedItem, dispatch]); // Render a disclosure when inside expanded <Sidenav>
+  }, [activeKey, onSelect, hasSelectedItem, dispatch]); // Deprecate <Dropdown> within <Nav> usage
+  // in favor of <Nav.Menu> API
 
-  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
-    return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {
-      value: dropdownContextValue
-    }, /*#__PURE__*/_react.default.createElement(_SidenavDropdown.default, (0, _extends2.default)({
+  if (nav) {
+    (0, _warnOnce.default)('Usage of <Dropdown> within <Nav> is deprecated. Replace with <Nav.Menu>');
+    return /*#__PURE__*/_react.default.createElement(_Nav.default.Menu, (0, _extends2.default)({
       ref: ref
-    }, rest)));
-  } // Renders a disclosure when used inside <Navbar>
-
-
-  if (navbar) {
-    return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {
-      value: dropdownContextValue
-    }, /*#__PURE__*/_react.default.createElement(_Disclosure.default, {
-      hideOnClickOutside: true
-    }, function (_ref, containerRef) {
-      var _withClassPrefix;
-
-      var open = _ref.open;
-      var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix.disabled = disabled, _withClassPrefix.open = open, _withClassPrefix)));
-      return /*#__PURE__*/_react.default.createElement(Component, {
-        ref: (0, _utils.mergeRefs)(ref, containerRef),
-        className: classes,
-        style: style
-      }, /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, function (buttonProps, buttonRef) {
-        return /*#__PURE__*/_react.default.createElement(_DropdownToggle.default, (0, _extends2.default)({
-          ref: buttonRef,
-          as: toggleAs,
-          className: toggleClassName,
-          placement: placement,
-          disabled: disabled
-        }, (0, _omit.default)(buttonProps, ['open']), toggleProps), title);
-      }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, null, function (_ref2, elementRef) {
-        var open = _ref2.open;
-        var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
-        return /*#__PURE__*/_react.default.createElement("ul", {
-          ref: elementRef,
-          className: menuClassName,
-          style: menuStyle,
-          hidden: !open
-        }, children);
-      }));
-    }));
+    }, props));
   }
 
   var renderMenuButton = function renderMenuButton(menuButtonProps, menuButtonRef) {
@@ -201,24 +140,6 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }, (0, _omit.default)(menuButtonProps, ['open']), (0, _omit.default)(toggleProps, ['data-testid'])), title);
   };
 
-  if (parentMenu) {
-    renderMenuButton = function renderMenuButton(menuButtonProps, buttonRef) {
-      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-        disabled: disabled
-      }, function (_ref3, menuitemRef) {
-        var active = _ref3.active,
-            menuitemProps = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["active"]);
-        return /*#__PURE__*/_react.default.createElement(_DropdownToggle.default, (0, _extends2.default)({
-          ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),
-          as: toggleAs,
-          className: mergeNavItemClassNames(toggleClassName, withNavItemClassPrefix({
-            focus: active
-          }))
-        }, menuButtonProps, (0, _omit.default)(menuitemProps, ['onClick']), (0, _omit.default)(toggleProps, 'data-testid')), title);
-      });
-    };
-  }
-
   return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {
     value: dropdownContextValue
   }, /*#__PURE__*/_react.default.createElement(_Menu.default, {
@@ -227,24 +148,19 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     menuButtonText: title,
     renderMenuButton: renderMenuButton,
     openMenuOn: menuButtonTriggers,
-    renderMenuPopup: function renderMenuPopup(_ref4, popupRef) {
-      var open = _ref4.open,
-          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["open"]);
-      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix({})); // When inside a collapsed <Sidenav>, render a header in menu
-
-      var showHeader = !!sidenav;
+    renderMenuPopup: function renderMenuPopup(_ref, popupRef) {
+      var open = _ref.open,
+          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["open"]);
+      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix({}));
       return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
         ref: popupRef,
         className: menuClassName,
         style: menuStyle,
         hidden: !open
-      }, popupProps), showHeader && /*#__PURE__*/_react.default.createElement("div", {
-        className: prefix('header')
-      }, title), children);
+      }, popupProps), children);
     },
-    onToggleMenu: function onToggleMenu(open, event) {
+    onToggleMenu: function onToggleMenu(open) {
       onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);
-      sidenav === null || sidenav === void 0 ? void 0 : sidenav.onOpenChange(eventKey, event);
 
       if (open) {
         onOpen === null || onOpen === void 0 ? void 0 : onOpen();
@@ -252,12 +168,12 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         onClose === null || onClose === void 0 ? void 0 : onClose();
       }
     }
-  }, function (_ref5, menuContainerRef) {
-    var _withClassPrefix2;
+  }, function (_ref2, menuContainerRef) {
+    var _withClassPrefix;
 
-    var open = _ref5.open,
-        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref5, ["open"]);
-    var classes = merge(className, withClassPrefix((_withClassPrefix2 = {}, _withClassPrefix2["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix2.disabled = disabled, _withClassPrefix2.open = open, _withClassPrefix2.submenu = !!parentMenu, _withClassPrefix2['selected-within'] = hasSelectedItem, _withClassPrefix2)));
+    var open = _ref2.open,
+        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["open"]);
+    var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix.disabled = disabled, _withClassPrefix.open = open, _withClassPrefix['selected-within'] = hasSelectedItem, _withClassPrefix)));
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, menuContainerRef),
       className: classes

package/cjs/Dropdown/DropdownItem.js

@@ -15,8 +15,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Sidenav = require("../Sidenav/Sidenav");
-
 var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
 
 var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
@@ -27,12 +25,6 @@ var _isNil = _interopRequireDefault(require("lodash/isNil"));
 
 var _utils = require("../utils");
 
-var _Navbar = require("../Navbar/Navbar");
-
-var _SidenavDropdownItem = _interopRequireDefault(require("../Sidenav/SidenavDropdownItem"));
-
-var _DisclosureContext = _interopRequireWildcard(require("../Disclosure/DisclosureContext"));
-
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 
 var _useInternalId = _interopRequireDefault(require("../utils/useInternalId"));
@@ -41,6 +33,10 @@ var _DropdownState = require("./DropdownState");
 
 var _useRenderDropdownItem = require("./useRenderDropdownItem");
 
+var _warnOnce = _interopRequireDefault(require("../utils/warnOnce"));
+
+var _Nav = _interopRequireDefault(require("../Nav"));
+
 /**
  * The <Dropdown.Item> API
  * When used inside <Sidenav>, renders a <TreeviewItem>
@@ -76,21 +72,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
     dropdown === null || dropdown === void 0 ? void 0 : (_dropdown$onSelect = dropdown.onSelect) === null || _dropdown$onSelect === void 0 ? void 0 : _dropdown$onSelect.call(dropdown, eventKey, event);
   }, [onSelect, eventKey, dropdown]);
-  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
-  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);
-  var disclosure = (0, _react.useContext)(_DisclosureContext.default);
-
-  var _ref = disclosure !== null && disclosure !== void 0 ? disclosure : [],
-      dispatchDisclosure = _ref[1];
-
-  var handleClickNavbarDropdownItem = (0, _react.useCallback)(function (event) {
-    dispatchDisclosure === null || dispatchDisclosure === void 0 ? void 0 : dispatchDisclosure({
-      type: _DisclosureContext.DisclosureActionTypes.Hide,
-      cascade: true
-    });
-    handleSelectItem === null || handleSelectItem === void 0 ? void 0 : handleSelectItem(event);
-  }, [dispatchDisclosure, handleSelectItem]);
-  var selected = activeProp || !(0, _isNil.default)(eventKey) && ((0, _utils.shallowEqual)(dropdown === null || dropdown === void 0 ? void 0 : dropdown.activeKey, eventKey) || (0, _utils.shallowEqual)(nav === null || nav === void 0 ? void 0 : nav.activeKey, eventKey));
+  var selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(dropdown === null || dropdown === void 0 ? void 0 : dropdown.activeKey, eventKey);
   var dispatch = dropdown === null || dropdown === void 0 ? void 0 : dropdown.dispatch;
   (0, _react.useEffect)(function () {
     if (dispatch) {
@@ -113,10 +95,12 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       };
     }
   }, [internalId, selected, dispatch]);
-  var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);
+  var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component); // If using <Dropdown.Item> within <Nav>
+  // Suggest <Nav.Item>
 
-  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
-    return /*#__PURE__*/_react.default.createElement(_SidenavDropdownItem.default, (0, _extends2.default)({
+  if (nav) {
+    (0, _warnOnce.default)('Usage of <Dropdown.Item> within <Nav> is deprecated. Replace with <Nav.Item> within <Nav.Menu>.');
+    return /*#__PURE__*/_react.default.createElement(_Nav.default.Item, (0, _extends2.default)({
       ref: ref
     }, props));
   }
@@ -137,42 +121,14 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }, restProps));
   }
 
-  if (navbar) {
-    var classes = merge(className, withClassPrefix({
-      'with-icon': icon,
-      disabled: disabled,
-      divider: divider,
-      panel: panel,
-      active: selected
-    }));
-    var dataAttributes = {
-      'data-event-key': eventKey
-    };
-
-    if (!(0, _isNil.default)(eventKey) && typeof eventKey !== 'string') {
-      dataAttributes['data-event-key-type'] = typeof eventKey;
-    }
-
-    return renderDropdownItem((0, _extends2.default)({
-      ref: ref,
-      className: classes,
-      'aria-current': selected || undefined
-    }, dataAttributes, restProps, {
-      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, {
     selected: selected,
     disabled: disabled,
     onActivate: handleSelectItem
-  }, function (_ref2, menuitemRef) {
-    var selected = _ref2.selected,
-        active = _ref2.active,
-        menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["selected", "active"]);
+  }, function (_ref, menuitemRef) {
+    var selected = _ref.selected,
+        active = _ref.active,
+        menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["selected", "active"]);
     var classes = merge(className, withClassPrefix({
       'with-icon': icon,
       active: selected,