rsuite 5.12.0 → 5.13.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [5.13.0](https://github.com/rsuite/rsuite/compare/v5.12.0...v5.13.0) (2022-05-19)
+
+### Bug Fixes
+
+- **listbox:** fix broken keyboard navigation after filtering ([#2491](https://github.com/rsuite/rsuite/issues/2491)) ([329623a](https://github.com/rsuite/rsuite/commit/329623a21e8d551db3e634894ddcbb3658b1579d))
+
+### Performance Improvements
+
+- **Cascader:** apply tree view pattern ([#2492](https://github.com/rsuite/rsuite/issues/2492)) ([f3a5808](https://github.com/rsuite/rsuite/commit/f3a5808eb60cc4f5250cce908322a702a91a9d96))
+
 # [5.12.0](https://github.com/rsuite/rsuite/compare/v5.11.0...v5.12.0) (2022-05-12)
 
 ### Features

package/Nav/styles/index.less

@@ -82,9 +82,15 @@
     });
   }
 
-  > .rs-icon {
+  &-icon {
     margin-right: 6px;
   }
+
+  &-caret {
+    font-size: 16px;
+    vertical-align: text-bottom;
+    margin-left: 6px;
+  }
 }
 
 // Orientations

package/Navbar/styles/index.less

@@ -63,10 +63,15 @@
   display: flex;
   align-items: center;
 
-  > .rs-icon {
+  &-icon {
     font-size: 16px;
     margin-right: 5px;
   }
+
+  &-caret {
+    font-size: 16px;
+    margin-left: 6px;
+  }
 }
 
 // Focus style

package/Sidenav/styles/index.less

@@ -68,11 +68,12 @@
 
       // Submenu toggle icon
       &-icon {
+        font-size: @sidenav-item-caret-size;
         position: absolute;
         right: @sidenav-padding-horizontal;
         top: @sidenav-children-padding-vertical;
-        width: auto;
-        height: @sidenav-dropdown-toggle-caret-width;
+        // width: auto;
+        // height: @sidenav-dropdown-toggle-caret-width;
         transform: rotate(90deg);
       }
     }
@@ -115,6 +116,7 @@
     padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
 
     .rs-dropdown-toggle-caret {
+      font-size: @sidenav-item-caret-size;
       right: @sidenav-padding-horizontal;
       top: @sidenav-padding-vertical;
 
@@ -425,7 +427,7 @@
 
   .rs-sidenav-item.rs-sidenav-item-active,
   .rs-dropdown-item.rs-dropdown-item-active,
-  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon {
+  .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
     color: var(--rs-sidenav-default-selected-text);
   }
 
@@ -466,7 +468,7 @@
 .rs-sidenav-default.rs-sidenav-collapsing,
 .rs-sidenav-default.rs-sidenav-collapse-out {
   // Set active Level1 style
-  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon {
+  .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
     color: var(--rs-sidenav-default-selected-text);
   }
 }
@@ -546,7 +548,7 @@
   // Active
   .rs-sidenav-item.rs-sidenav-item-active,
   .rs-dropdown-item.rs-dropdown-item-active,
-  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
+  .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
     color: var(--rs-sidenav-subtle-selected-text);
   }
 

package/cjs/Cascader/DropdownMenu.js

@@ -123,11 +123,13 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     return /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenuItem, {
       classPrefix: "picker-cascader-menu-item",
       as: 'li',
+      role: "treeitem",
       key: layer + "-" + onlyKey,
       disabled: disabled,
       active: !(0, _isUndefined.default)(activeItemValue) && (0, _utils.shallowEqual)(activeItemValue, value),
       focus: focus,
       value: value,
+      "aria-owns": node.children ? 'treeitem-' + value + '-children' : undefined,
       className: children ? prefix('has-children') : undefined,
       onSelect: function onSelect(_value, event) {
         return handleSelect(layer, node, event);
@@ -143,14 +145,15 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   };
   var cascadeNodes = cascadeData.map(function (children, layer) {
     var onlyKey = layer + "_" + children.length;
+    var parentNode = cascadePaths[layer - 1];
 
     var menu = /*#__PURE__*/_react.default.createElement("ul", {
-      role: "listbox"
+      role: layer === 0 ? 'none presentation' : 'group',
+      id: parentNode ? 'treeitem-' + parentNode[valueKey] + '-children' : undefined
     }, children.map(function (item, index) {
       return renderCascadeNode(item, index, layer, cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]));
     }));
 
-    var parentNode = cascadePaths[layer - 1];
     return /*#__PURE__*/_react.default.createElement("div", {
       key: onlyKey,
       className: prefix('column'),
@@ -162,7 +165,9 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }
     }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
   });
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    role: "tree"
+  }, rest, {
     ref: (0, _utils.mergeRefs)(rootRef, ref),
     className: classes
   }), /*#__PURE__*/_react.default.createElement("div", {

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,