rsuite 5.0.0-beta.5 → 5.0.0

package/esm/InputPicker/InputPicker.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, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
@@ -18,11 +18,12 @@ import { getWidth } from 'dom-lib';
 import shallowEqual from '../utils/shallowEqual';
 import { filterNodesOfTree } from '../utils/treeUtils';
 import Plaintext from '../Plaintext';
-import { createChainedFunction, tplTransform, getDataGroupBy, useClassNames, useCustom, useControlled, mergeRefs } from '../utils';
+import { createChainedFunction, tplTransform, getDataGroupBy, useClassNames, useCustom, useControlled, mergeRefs, isOneOf, KEY_VALUES } from '../utils';
 import { DropdownMenu, DropdownMenuItem, DropdownMenuCheckItem, PickerToggle, PickerOverlay, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 import Tag from '../Tag';
 import InputAutosize from './InputAutosize';
 import InputSearch from './InputSearch';
+export var InputPickerContext = /*#__PURE__*/React.createContext({});
 var defaultProps = {
   as: 'div',
   appearance: 'default',
@@ -36,8 +37,7 @@ var defaultProps = {
   placement: 'bottomStart',
   searchable: true,
   menuAutoWidth: true,
-  menuMaxHeight: 320,
-  tagProps: {}
+  menuMaxHeight: 320
 };
 var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _merge;
@@ -57,10 +57,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       toggleAs = props.toggleAs,
       style = props.style,
       searchable = props.searchable,
-      multi = props.multi,
       controlledOpen = props.open,
       placeholder = props.placeholder,
-      tagProps = props.tagProps,
       groupBy = props.groupBy,
       menuClassName = props.menuClassName,
       menuStyle = props.menuStyle,
@@ -95,7 +93,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onFocus = props.onFocus,
       searchBy = props.searchBy,
       placement = props.placement,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "multi", "open", "placeholder", "tagProps", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
+
+  var _useContext = useContext(InputPickerContext),
+      multi = _useContext.multi,
+      tagProps = _useContext.tagProps,
+      trigger = _useContext.trigger,
+      disabledOptions = _useContext.disabledOptions;
 
   if (groupBy === valueKey || groupBy === labelKey) {
     throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
@@ -166,9 +170,9 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _filteredData$;
 
     // The first option after filtering is the focus.
-    setFocusItemValue((filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);
+    setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
-  }, [setFocusItemValue, onSearch, valueKey]); // Use search keywords to filter options.
+  }, [disabledOptions, setFocusItemValue, valueKey, onSearch]); // Use search keywords to filter options.
 
   var _useSearch = useSearch({
     labelKey: labelKey,
@@ -212,16 +216,16 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var activeItem = allData.find(function (item) {
       return shallowEqual(item[valueKey], value);
     });
-    var displayElement = placeholder;
+    var itemNode = placeholder;
 
     if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {
-      displayElement = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];
+      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];
     }
 
     return {
       isValid: !!activeItem,
       activeItem: activeItem,
-      displayElement: displayElement
+      itemNode: itemNode
     };
   };
 
@@ -287,7 +291,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * @param event
    */
 
-  var handleItemSelect = function handleItemSelect(value, item, event) {
+  var handleSelectItem = function handleSelectItem(value, item, event) {
     setValue(value);
     setFocusItemValue(value);
     setSearchKeyword('');
@@ -304,7 +308,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
 
 
-  var handleCheckItemSelect = function handleCheckItemSelect(nextItemValue, item, event, checked) {
+  var handleCheckTag = function handleCheckTag(nextItemValue, item, event, checked) {
     var val = cloneValue();
 
     if (checked) {
@@ -323,7 +327,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     focusInput();
   };
 
-  var selectFocusMenuCheckItem = useCallback(function (event) {
+  var handleTagKeyPress = useCallback(function (event) {
     var val = cloneValue();
     var data = getAllData();
 
@@ -342,7 +346,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return shallowEqual(v, focusItemValue);
     })) {
       val.push(focusItemValue);
-    } else {
+    } else if (!disabledOptions) {
       remove(val, function (itemVal) {
         return shallowEqual(itemVal, focusItemValue);
       });
@@ -360,8 +364,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setSearchKeyword('');
     handleSelect(val, focusItem, event);
     handleChange(val, event);
-  }, [setValue, cloneValue, getAllData, handleChange, handleSelect, createOption, setSearchKeyword, disabledItemValues, focusItemValue, valueKey]);
-  var selectFocusMenuItem = useCallback(function (event) {
+  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, setSearchKeyword, handleSelect, handleChange, valueKey, createOption]);
+  var handleMenuItemKeyPress = useCallback(function (event) {
     if (!focusItemValue || !controlledData) {
       return;
     } // If the value is disabled in this option, it is returned.
@@ -427,14 +431,43 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleChange(null, event);
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
   }, [disabled, searchKeyword, onClean, handleChange, setValue, setFocusItemValue, setSearchKeyword]);
+  var events = {
+    onMenuPressBackspace: multi ? removeLastItem : handleClean,
+    onMenuKeyDown: onKeyDown,
+    onMenuPressEnter: null,
+    onKeyDown: null
+  };
+  var handleKeyPress = useCallback(function (event) {
+    // When typing a space, create a tag.
+    if (isOneOf('Space', trigger) && event.key === KEY_VALUES.SPACE) {
+      handleTagKeyPress(event);
+      event.preventDefault();
+    } // When typing a comma, create a tag.
+
+
+    if (isOneOf('Comma', trigger) && event.key === KEY_VALUES.COMMA) {
+      handleTagKeyPress(event);
+      event.preventDefault();
+    }
+  }, [handleTagKeyPress, trigger]);
+
+  if (multi) {
+    if (isOneOf('Enter', trigger)) {
+      events.onMenuPressEnter = handleTagKeyPress;
+    }
+
+    if (creatable) {
+      events.onKeyDown = handleKeyPress;
+    }
+  } else {
+    events.onMenuPressEnter = handleMenuItemKeyPress;
+  }
+
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     triggerRef: triggerRef,
     targetRef: targetRef,
-    overlayRef: overlayRef,
-    onMenuPressEnter: multi ? selectFocusMenuCheckItem : selectFocusMenuItem,
-    onMenuPressBackspace: multi ? removeLastItem : handleClean,
-    onMenuKeyDown: onKeyDown
-  }, rest));
+    overlayRef: overlayRef
+  }, events, rest));
   var handleExited = useCallback(function () {
     setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);
     setSearchKeyword('');
@@ -466,24 +499,24 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;
   };
 
-  var renderSingleValue = function renderSingleValue() {
+  var checkValue = function checkValue() {
     if (multi) {
       return {
         isValid: false,
-        displayElement: placeholder
+        itemNode: null
       };
     }
 
     var dataItem = getDateItem(value);
-    var displayElement = dataItem.displayElement;
+    var itemNode = dataItem.itemNode;
 
     if (!isNil(value) && isFunction(renderValue)) {
-      displayElement = renderValue(value, dataItem.activeItem, displayElement);
+      itemNode = renderValue(value, dataItem.activeItem, itemNode);
     }
 
     return {
       isValid: dataItem.isValid,
-      displayElement: displayElement
+      itemNode: itemNode
     };
   };
 
@@ -502,7 +535,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var tagElements = tags.map(function (tag) {
       var _getDateItem = getDateItem(tag),
           isValid = _getDateItem.isValid,
-          displayElement = _getDateItem.displayElement,
+          itemNode = _getDateItem.itemNode,
           activeItem = _getDateItem.activeItem;
 
       items.push(activeItem);
@@ -515,9 +548,9 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         key: tag,
         size: rest.size === 'lg' ? 'lg' : rest.size === 'xs' ? 'sm' : 'md',
         closable: !disabled && closable && !readOnly && !plaintext,
-        title: typeof displayElement === 'string' ? displayElement : undefined,
+        title: typeof itemNode === 'string' ? itemNode : undefined,
         onClose: createChainedFunction(handleRemoveItemByTag.bind(null, tag), onClose)
-      }), displayElement);
+      }), itemNode);
     }).filter(function (item) {
       return item !== null;
     });
@@ -556,6 +589,12 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       items = items.sort(sort(false));
     }
 
+    if (disabledOptions) {
+      return /*#__PURE__*/React.createElement(PickerOverlay, {
+        ref: mergeRefs(overlayRef, speakerRef)
+      });
+    }
+
     var menu = items.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
@@ -570,7 +609,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       maxHeight: menuMaxHeight,
       data: items,
       group: !isUndefined(groupBy),
-      onSelect: multi ? handleCheckItemSelect : handleItemSelect,
+      onSelect: multi ? handleCheckTag : handleSelectItem,
       renderMenuGroup: renderMenuGroup,
       renderMenuItem: renderDropdownMenuItem,
       virtualized: virtualized
@@ -587,9 +626,9 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
 
-  var _renderSingleValue = renderSingleValue(),
-      isValid = _renderSingleValue.isValid,
-      displayElement = _renderSingleValue.displayElement;
+  var _checkValue = checkValue(),
+      isValid = _checkValue.isValid,
+      itemNode = _checkValue.itemNode;
 
   var tagElements = renderMultiValue();
   /**
@@ -598,7 +637,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * 3.If renderValue returns null or undefined, hasValue is false.
    */
 
-  var hasSingleValue = !isNil(value) && isFunction(renderValue) && !isNil(displayElement);
+  var hasSingleValue = !isNil(value) && isFunction(renderValue) && !isNil(itemNode);
   var hasMultiValue = isArray(value) && value.length > 0 && isFunction(renderValue) && !isNil(tagElements);
   var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;
 
@@ -609,7 +648,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       pickerClasses = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];
 
-  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["tag"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["focused"])))] = open, _merge));
+  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["tag"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["disabled-options"])))] = disabledOptions, _merge));
   var searching = !!searchKeyword && open;
   var displaySearchInput = searchable && !disabled;
   var inputProps = multi ? {
@@ -634,9 +673,10 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement(Plaintext, _extends({
       localeKey: "notSelected",
       ref: targetRef
-    }, plaintextProps), displayElement || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null));
+    }, plaintextProps), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);
   }
 
+  var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: triggerRef,
@@ -665,9 +705,10 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     active: open,
     disabled: disabled,
     placement: placement,
-    inputValue: value
-  }), searching || multi && hasValue ? null : displayElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)), !(!multi && disabled) && /*#__PURE__*/React.createElement("div", {
-    className: prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["tag-wrapper"])))
+    inputValue: value,
+    caret: !disabledOptions
+  }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/React.createElement("div", {
+    className: prefix(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["tag-wrapper"])))
   }, tagElements, displaySearchInput && /*#__PURE__*/React.createElement(InputSearch, _extends({}, inputProps, {
     tabIndex: tabIndex,
     readOnly: readOnly,
@@ -688,7 +729,6 @@ InputPicker.propTypes = _extends({}, listPickerPropTypes, {
   menuMaxHeight: PropTypes.number,
   searchable: PropTypes.bool,
   creatable: PropTypes.bool,
-  multi: PropTypes.bool,
   groupBy: PropTypes.any,
   sort: PropTypes.func,
   renderMenu: PropTypes.func,
@@ -699,7 +739,6 @@ InputPicker.propTypes = _extends({}, listPickerPropTypes, {
   onGroupTitleClick: PropTypes.func,
   onSearch: PropTypes.func,
   virtualized: PropTypes.bool,
-  searchBy: PropTypes.func,
-  tagProps: PropTypes.object
+  searchBy: PropTypes.func
 });
 export default InputPicker;

package/esm/List/ListItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WithAsProps } from '../@types/common';
 import { Collection } from './helper/useManager';
-export interface ListItemProps extends WithAsProps {
+export interface ListItemProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
     index?: number;
     collection?: Collection;
     disabled?: boolean;

package/esm/Menu/MenuItem.js

@@ -22,7 +22,7 @@ function MenuItem(props) {
       dispatch = _ref[1]; // Whether this menuitem has focus (indicated by `aria-activedescendant` from parent menu)
 
 
-  var hasFocus = (menuState === null || menuState === void 0 ? void 0 : (_menuState$items$menu = menuState.items[menuState === null || menuState === void 0 ? void 0 : menuState.activeItemIndex]) === null || _menuState$items$menu === void 0 ? void 0 : _menuState$items$menu.element) === menuitemRef.current;
+  var hasFocus = (menuState === null || menuState === void 0 ? void 0 : (_menuState$items$menu = menuState.items[menuState === null || menuState === void 0 ? void 0 : menuState.activeItemIndex]) === null || _menuState$items$menu === void 0 ? void 0 : _menuState$items$menu.element) === menuitemRef.current && !!menuitemRef.current;
   var handleClick = useCallback(function (event) {
     if (disabled) {
       return;

package/esm/MultiCascader/MultiCascader.js

@@ -64,6 +64,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderMenuItem = props.renderMenuItem,
       renderExtraFooter = props.renderExtraFooter,
       onEnter = props.onEnter,
+      onExit = props.onExit,
       onExited = props.onExited,
       onClean = props.onClean,
       onSearch = props.onSearch,
@@ -72,7 +73,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onOpen = props.onOpen,
       onClose = props.onClose,
       onCheck = props.onCheck,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "classPrefix", "defaultValue", "value", "valueKey", "labelKey", "childrenKey", "disabled", "disabledItemValues", "cleanable", "locale", "toggleAs", "style", "countable", "cascade", "inline", "placeholder", "placement", "menuWidth", "menuHeight", "menuClassName", "menuStyle", "searchable", "uncheckableItemValues", "id", "getChildren", "renderValue", "renderMenu", "renderMenuItem", "renderExtraFooter", "onEnter", "onExited", "onClean", "onSearch", "onSelect", "onChange", "onOpen", "onClose", "onCheck"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "classPrefix", "defaultValue", "value", "valueKey", "labelKey", "childrenKey", "disabled", "disabledItemValues", "cleanable", "locale", "toggleAs", "style", "countable", "cascade", "inline", "placeholder", "placement", "menuWidth", "menuHeight", "menuClassName", "menuStyle", "searchable", "uncheckableItemValues", "id", "getChildren", "renderValue", "renderMenu", "renderMenuItem", "renderExtraFooter", "onEnter", "onExit", "onExited", "onClean", "onSearch", "onSelect", "onChange", "onOpen", "onClose", "onCheck"]);
 
   var itemKeys = {
     childrenKey: childrenKey,
@@ -178,10 +179,9 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setActive(true);
   }, [onOpen]);
   var handleExited = useCallback(function () {
-    onClose === null || onClose === void 0 ? void 0 : onClose();
     setActive(false);
     setSearchKeyword('');
-  }, [onClose]);
+  }, []);
   var handleSelect = useCallback(function (node, cascadePaths, event) {
     var _node$childrenKey, _node$childrenKey2, _triggerRef$current, _triggerRef$current$u;
 
@@ -470,6 +470,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     placement: placement,
     onEnter: createChainedFunction(handleEntered, onEnter),
     onExited: createChainedFunction(handleExited, onExited),
+    onExit: createChainedFunction(onClose, onExit),
     speaker: renderDropdownMenu
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,

package/esm/Nav/NavItem.js

@@ -3,32 +3,29 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
-import omit from 'lodash/omit';
 import Ripple from '../Ripple';
 import SafeAnchor from '../SafeAnchor';
-import { appendTooltip, mergeRefs, shallowEqual, useClassNames } from '../utils';
+import { shallowEqual, useClassNames } from '../utils';
 import { SidenavContext } from '../Sidenav/Sidenav';
 import NavContext from './NavContext';
 import { NavbarContext } from '../Navbar/Navbar';
-import MenuItem from '../Menu/MenuItem';
 import SidenavItem from '../Sidenav/SidenavItem';
-var defaultProps = {
-  classPrefix: 'nav-item',
-  as: SafeAnchor
-};
+import NavbarItem from '../Navbar/NavbarItem';
+
 /**
  * The <Nav.Item> API
  */
-
 var NavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? SafeAnchor : _props$as,
       activeProp = props.active,
       disabled = props.disabled,
       eventKey = props.eventKey,
       className = props.className,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'nav-item' : _props$classPrefix,
       style = props.style,
-      _children = props.children,
+      children = props.children,
       icon = props.icon,
       divider = props.divider,
       panel = props.panel,
@@ -64,46 +61,8 @@ var NavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [disabled, emitSelect, onClick]);
 
-  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
-    return /*#__PURE__*/React.createElement(SidenavItem, props);
-  } // If <Nav.Item> is inside collapsed <Sidenav>, render an ARIA `menuitem`
-
-
   if (sidenav) {
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      selected: active,
-      disabled: disabled,
-      onActivate: emitSelect
-    }, function (_ref, menuitemRef) {
-      var selected = _ref.selected,
-          active = _ref.active,
-          menuitem = _objectWithoutPropertiesLoose(_ref, ["selected", "active"]);
-
-      var classes = merge(className, withClassPrefix({
-        focus: active,
-        active: selected,
-        disabled: disabled
-      }));
-      var item = /*#__PURE__*/React.createElement(Component, _extends({
-        ref: mergeRefs(ref, menuitemRef),
-        disabled: Component === SafeAnchor ? disabled : undefined,
-        className: classes,
-        "data-event-key": eventKey
-      }, menuitem, omit(rest, ['divider', 'panel'])), icon, _children, /*#__PURE__*/React.createElement(Ripple, null)); // Show tooltip when inside a collapse <Sidenav>
-
-      return sidenav ? appendTooltip({
-        children: function children(triggerProps, triggerRef) {
-          return /*#__PURE__*/React.createElement(Component, _extends({
-            ref: mergeRefs(mergeRefs(ref, menuitemRef), triggerRef),
-            disabled: Component === SafeAnchor ? disabled : undefined,
-            className: classes,
-            "data-event-key": eventKey
-          }, menuitem, omit(rest, ['divider', 'panel']), triggerProps), icon, _children, /*#__PURE__*/React.createElement(Ripple, null));
-        },
-        message: _children,
-        placement: 'right'
-      }) : item;
-    });
+    return /*#__PURE__*/React.createElement(SidenavItem, props);
   }
 
   if (divider) {
@@ -120,18 +79,11 @@ var NavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: ref,
       style: style,
       className: merge(className, prefix('panel'))
-    }, rest), _children);
+    }, rest), children);
   }
 
   if (navbar) {
-    return /*#__PURE__*/React.createElement(Component, _extends({
-      ref: ref,
-      "aria-selected": active || undefined
-    }, rest, {
-      className: classes,
-      onClick: handleClick,
-      style: style
-    }), icon, _children, /*#__PURE__*/React.createElement(Ripple, null));
+    return /*#__PURE__*/React.createElement(NavbarItem, props);
   }
 
   return /*#__PURE__*/React.createElement(Component, _extends({
@@ -142,9 +94,8 @@ var NavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: handleClick,
     style: style,
     "aria-selected": active || undefined
-  }), icon, _children, /*#__PURE__*/React.createElement(Ripple, null));
+  }), icon, children, /*#__PURE__*/React.createElement(Ripple, null));
 });
-NavItem.defaultProps = defaultProps;
 NavItem.displayName = 'Nav.Item';
 NavItem.propTypes = {
   as: PropTypes.elementType,

package/esm/Navbar/NavbarItem.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IconProps } from '@rsuite/icons/lib/Icon';
+import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+export interface NavItemProps<T = string> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+    /** Activation status */
+    active?: boolean;
+    /** Disabled status */
+    disabled?: boolean;
+    /** Sets the icon for the component */
+    icon?: React.ReactElement<IconProps>;
+    /** The value of the current option */
+    eventKey?: T;
+    /** Providing a `href` will render an `<a>` element */
+    href?: string;
+    /** Select the callback function that the event triggers. */
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+}
+declare const NavbarItem: RsRefForwardingComponent<'a', NavItemProps>;
+export default NavbarItem;

package/esm/Navbar/NavbarItem.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useCallback, useContext } from 'react';
+import PropTypes from 'prop-types';
+import isNil from 'lodash/isNil';
+import Ripple from '../Ripple';
+import SafeAnchor from '../SafeAnchor';
+import { shallowEqual, useClassNames } from '../utils';
+import NavContext from '../Nav/NavContext';
+var NavbarItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? SafeAnchor : _props$as,
+      activeProp = props.active,
+      disabled = props.disabled,
+      eventKey = props.eventKey,
+      className = props.className,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'navbar-item' : _props$classPrefix,
+      style = props.style,
+      children = props.children,
+      icon = props.icon,
+      onClick = props.onClick,
+      onSelectProp = props.onSelect,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "active", "disabled", "eventKey", "className", "classPrefix", "style", "children", "icon", "onClick", "onSelect"]);
+
+  var _useContext = useContext(NavContext),
+      activeKey = _useContext.activeKey,
+      onSelectFromNav = _useContext.onSelect;
+
+  var active = activeProp !== null && activeProp !== void 0 ? activeProp : !isNil(eventKey) && shallowEqual(eventKey, activeKey);
+  var emitSelect = useCallback(function (event) {
+    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);
+    onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);
+  }, [eventKey, onSelectProp, onSelectFromNav]);
+
+  var _useClassNames = useClassNames(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      merge = _useClassNames.merge;
+
+  var classes = merge(className, withClassPrefix({
+    active: active,
+    disabled: disabled
+  }));
+  var handleClick = useCallback(function (event) {
+    if (!disabled) {
+      emitSelect(event);
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+  }, [disabled, emitSelect, onClick]);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    "aria-selected": active || undefined
+  }, rest, {
+    className: classes,
+    onClick: handleClick,
+    style: style
+  }), icon, children, /*#__PURE__*/React.createElement(Ripple, null));
+});
+NavbarItem.displayName = 'Navbar.Item';
+NavbarItem.propTypes = {
+  as: PropTypes.elementType,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  classPrefix: PropTypes.string,
+  onClick: PropTypes.func,
+  style: PropTypes.object,
+  icon: PropTypes.node,
+  onSelect: PropTypes.func,
+  children: PropTypes.node,
+  eventKey: PropTypes.any
+};
+export default NavbarItem;

package/esm/Pagination/Pagination.js

@@ -25,7 +25,7 @@ var defaultProps = {
   classPrefix: 'pagination',
   activePage: 1,
   pages: 1,
-  size: 'md'
+  size: 'xs'
 };
 var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var Component = props.as,

package/esm/Picker/PickerToggle.js

@@ -166,10 +166,10 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
         ref: mergeRefs(inputRef, ref)
       }, props));
     }
-  }), /*#__PURE__*/React.createElement("span", {
+  }), children ? /*#__PURE__*/React.createElement("span", {
     className: prefix(hasValue ? 'value' : 'placeholder'),
     "aria-placeholder": typeof children === 'string' ? children : null
-  }, children), cleanable && /*#__PURE__*/React.createElement(CloseButton, {
+  }, children) : null, cleanable && /*#__PURE__*/React.createElement(CloseButton, {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["clean"]))),
     tabIndex: -1,
     onClick: handleClean

package/esm/Picker/utils.d.ts

@@ -123,5 +123,5 @@ interface Refs {
  * @param ref
  * @param params
  */
-export declare function usePublicMethods(ref: any, { triggerRef, overlayRef, targetRef, rootRef }: Refs): void;
+export declare function usePublicMethods(ref: any, { triggerRef, overlayRef, targetRef, rootRef }: Refs, disabled?: boolean): void;
 export {};