rsuite 5.0.0-beta.5 → 5.0.0

package/cjs/Dropdown/DropdownState.d.ts

@@ -0,0 +1,37 @@
+interface DropdownItemState {
+    /**
+     * Internal ID
+     */
+    id: string;
+    /**
+     *
+     */
+    props: {
+        selected: boolean;
+    };
+}
+interface DropdownState {
+    items: DropdownItemState[];
+}
+export declare const initialState: DropdownState;
+export declare enum DropdownActionType {
+    RegisterItem = 0,
+    UnregisterItem = 1,
+    UpdateItem = 2
+}
+export declare type DropdownAction = {
+    type: DropdownActionType.RegisterItem;
+    payload: {
+        id: string;
+        props: {
+            selected: boolean;
+        };
+    };
+} | {
+    type: DropdownActionType.UnregisterItem;
+    payload: {
+        id: string;
+    };
+};
+export declare function reducer(state: DropdownState, action: DropdownAction): DropdownState;
+export {};

package/cjs/Dropdown/DropdownState.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.reducer = reducer;
+exports.DropdownActionType = exports.initialState = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var initialState = {
+  items: []
+};
+exports.initialState = initialState;
+var DropdownActionType;
+exports.DropdownActionType = DropdownActionType;
+
+(function (DropdownActionType) {
+  DropdownActionType[DropdownActionType["RegisterItem"] = 0] = "RegisterItem";
+  DropdownActionType[DropdownActionType["UnregisterItem"] = 1] = "UnregisterItem";
+  DropdownActionType[DropdownActionType["UpdateItem"] = 2] = "UpdateItem";
+})(DropdownActionType || (exports.DropdownActionType = DropdownActionType = {}));
+
+function reducer(state, action) {
+  if (state === void 0) {
+    state = initialState;
+  }
+
+  switch (action.type) {
+    case DropdownActionType.RegisterItem:
+      if (state.items.find(function (item) {
+        return item.id === action.payload.id;
+      })) {
+        return (0, _extends2.default)({}, state, {
+          items: state.items.map(function (item) {
+            if (item.id === action.payload.id) {
+              return (0, _extends2.default)({}, item, {
+                props: (0, _extends2.default)({}, item.props, {
+                  selected: action.payload.props.selected
+                })
+              });
+            }
+
+            return item;
+          })
+        });
+      }
+
+      return (0, _extends2.default)({}, state, {
+        items: [].concat(state.items, [{
+          id: action.payload.id,
+          props: action.payload.props
+        }])
+      });
+
+    case DropdownActionType.UnregisterItem:
+      return (0, _extends2.default)({}, state, {
+        items: state.items.filter(function (item) {
+          return item.id !== action.payload.id;
+        })
+      });
+
+    default:
+      return state;
+  }
+}

package/cjs/Dropdown/DropdownToggle.js

@@ -51,16 +51,13 @@ var DropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   var inSidenav = !!sidenav; // Caret icon is down by default, when Dropdown is used in Sidenav.
 
   var Caret = (0, _useToggleCaret.default)(inSidenav ? 'bottomStart' : placement);
-  var buttonProps = Component === _Button.default ? {
-    appearance: 'subtle'
-  } : null;
 
-  var toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, buttonProps, rest, {
+  var toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
     className: prefix('icon')
-  }, icon), children, noCaret ? null : /*#__PURE__*/_react.default.createElement(Caret, {
+  }), children, noCaret ? null : /*#__PURE__*/_react.default.createElement(Caret, {
     className: prefix('caret')
   }));
 

package/cjs/InputNumber/InputNumber.js

@@ -151,7 +151,7 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       rest = _partitionHTMLProps[1];
 
   var inputRef = (0, _react.useRef)();
-  var handleValue = (0, _react.useCallback)(function (currentValue, event) {
+  var handleChangeValue = (0, _react.useCallback)(function (currentValue, event) {
     if (currentValue !== value) {
       // Disable the up button when the value is greater than the maximum value.
       setDisabledUpButton(disableMaxValue(currentValue, max)); // Disable the down button when the value is greater than the minimum value.
@@ -179,13 +179,13 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handlePlus = (0, _react.useCallback)(function (event) {
     var val = +(value || 0);
     var bit = decimals(val, step);
-    handleValue(getSafeValue((val + step).toFixed(bit)), event);
-  }, [getSafeValue, handleValue, step, value]);
+    handleChangeValue(getSafeValue((val + step).toFixed(bit)), event);
+  }, [getSafeValue, handleChangeValue, step, value]);
   var handleMinus = (0, _react.useCallback)(function (event) {
     var val = +(value || 0);
     var bit = decimals(val, step);
-    handleValue(getSafeValue((val - step).toFixed(bit)), event);
-  }, [getSafeValue, handleValue, step, value]);
+    handleChangeValue(getSafeValue((val - step).toFixed(bit)), event);
+  }, [getSafeValue, handleChangeValue, step, value]);
   var handleWheel = (0, _react.useCallback)(function (event) {
     if (!disabled && !readOnly && event.target === document.activeElement) {
       event.preventDefault();
@@ -207,14 +207,14 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return;
     }
 
-    handleValue(value, event);
-  }, [handleValue]);
+    handleChangeValue(value, event);
+  }, [handleChangeValue]);
   var handleBlur = (0, _react.useCallback)(function (event) {
     var _event$target;
 
     var targetValue = Number.parseFloat((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
-    handleValue(getSafeValue(targetValue), event);
-  }, [getSafeValue, handleValue]);
+    handleChangeValue(getSafeValue(targetValue), event);
+  }, [getSafeValue, handleChangeValue]);
   (0, _react.useEffect)(function () {
     var wheelListener;
 
@@ -241,7 +241,8 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     value: (0, _isNil.default)(value) ? '' : "" + value,
     disabled: disabled,
     readOnly: readOnly,
-    plaintext: plaintext
+    plaintext: plaintext,
+    ref: plaintext ? ref : undefined
   }));
 
   if (plaintext) {

package/cjs/InputPicker/InputPicker.d.ts

@@ -4,17 +4,30 @@ import { PickerComponent } from '../Picker';
 import { TagProps } from '../Tag';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 import { SelectProps } from '../SelectPicker';
+export declare type TriggerType = 'Enter' | 'Space' | 'Comma';
+export interface InputPickerContextProps {
+    /** Multiple selections are allowed */
+    multi?: boolean;
+    /** Tag related props. */
+    tagProps?: TagProps;
+    /**
+     * Set the trigger for creating tags. only valid when creatable
+     */
+    trigger?: TriggerType | TriggerType[];
+    /**
+     * No overlay provides options
+     */
+    disabledOptions?: boolean;
+}
+export declare const InputPickerContext: React.Context<InputPickerContextProps>;
 interface InputItemDataType extends ItemDataType {
     create?: boolean;
 }
 export declare type ValueType = any;
 export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<T, InputPickerLocale, InputItemDataType>, SelectProps<T> {
     tabIndex?: number;
-    multi?: boolean;
     /** Settings can create new options */
     creatable?: boolean;
-    /**  Tag related props. */
-    tagProps?: TagProps;
     /** Option to cache value when searching asynchronously */
     cacheData?: InputItemDataType[];
     /** The `onBlur` attribute for the `input` element. */

package/cjs/InputPicker/InputPicker.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.InputPickerContext = void 0;
 
 var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 
@@ -51,8 +51,11 @@ var _InputAutosize = _interopRequireDefault(require("./InputAutosize"));
 
 var _InputSearch = _interopRequireDefault(require("./InputSearch"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
+var InputPickerContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.InputPickerContext = InputPickerContext;
 var defaultProps = {
   as: 'div',
   appearance: 'default',
@@ -66,8 +69,7 @@ var defaultProps = {
   placement: 'bottomStart',
   searchable: true,
   menuAutoWidth: true,
-  menuMaxHeight: 320,
-  tagProps: {}
+  menuMaxHeight: 320
 };
 
 var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -88,10 +90,8 @@ var InputPicker = /*#__PURE__*/_react.default.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,
@@ -126,7 +126,13 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onFocus = props.onFocus,
       searchBy = props.searchBy,
       placement = props.placement,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.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`');
@@ -197,9 +203,9 @@ var InputPicker = /*#__PURE__*/_react.default.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 = (0, _Picker.useSearch)({
     labelKey: labelKey,
@@ -243,16 +249,16 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var activeItem = allData.find(function (item) {
       return (0, _shallowEqual.default)(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
     };
   };
 
@@ -318,7 +324,7 @@ var InputPicker = /*#__PURE__*/_react.default.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('');
@@ -335,7 +341,7 @@ var InputPicker = /*#__PURE__*/_react.default.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) {
@@ -354,7 +360,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     focusInput();
   };
 
-  var selectFocusMenuCheckItem = (0, _react.useCallback)(function (event) {
+  var handleTagKeyPress = (0, _react.useCallback)(function (event) {
     var val = cloneValue();
     var data = getAllData();
 
@@ -373,7 +379,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return (0, _shallowEqual.default)(v, focusItemValue);
     })) {
       val.push(focusItemValue);
-    } else {
+    } else if (!disabledOptions) {
       (0, _remove.default)(val, function (itemVal) {
         return (0, _shallowEqual.default)(itemVal, focusItemValue);
       });
@@ -391,8 +397,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setSearchKeyword('');
     handleSelect(val, focusItem, event);
     handleChange(val, event);
-  }, [setValue, cloneValue, getAllData, handleChange, handleSelect, createOption, setSearchKeyword, disabledItemValues, focusItemValue, valueKey]);
-  var selectFocusMenuItem = (0, _react.useCallback)(function (event) {
+  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, setSearchKeyword, handleSelect, handleChange, valueKey, createOption]);
+  var handleMenuItemKeyPress = (0, _react.useCallback)(function (event) {
     if (!focusItemValue || !controlledData) {
       return;
     } // If the value is disabled in this option, it is returned.
@@ -458,14 +464,43 @@ var InputPicker = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(function (event) {
+    // When typing a space, create a tag.
+    if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {
+      handleTagKeyPress(event);
+      event.preventDefault();
+    } // When typing a comma, create a tag.
+
+
+    if ((0, _utils.isOneOf)('Comma', trigger) && event.key === _utils.KEY_VALUES.COMMA) {
+      handleTagKeyPress(event);
+      event.preventDefault();
+    }
+  }, [handleTagKeyPress, trigger]);
+
+  if (multi) {
+    if ((0, _utils.isOneOf)('Enter', trigger)) {
+      events.onMenuPressEnter = handleTagKeyPress;
+    }
+
+    if (creatable) {
+      events.onKeyDown = handleKeyPress;
+    }
+  } else {
+    events.onMenuPressEnter = handleMenuItemKeyPress;
+  }
+
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     triggerRef: triggerRef,
     targetRef: targetRef,
-    overlayRef: overlayRef,
-    onMenuPressEnter: multi ? selectFocusMenuCheckItem : selectFocusMenuItem,
-    onMenuPressBackspace: multi ? removeLastItem : handleClean,
-    onMenuKeyDown: onKeyDown
-  }, rest));
+    overlayRef: overlayRef
+  }, events, rest));
   var handleExited = (0, _react.useCallback)(function () {
     setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);
     setSearchKeyword('');
@@ -497,24 +532,24 @@ var InputPicker = /*#__PURE__*/_react.default.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 (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {
-      displayElement = renderValue(value, dataItem.activeItem, displayElement);
+      itemNode = renderValue(value, dataItem.activeItem, itemNode);
     }
 
     return {
       isValid: dataItem.isValid,
-      displayElement: displayElement
+      itemNode: itemNode
     };
   };
 
@@ -532,7 +567,7 @@ var InputPicker = /*#__PURE__*/_react.default.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);
@@ -545,9 +580,9 @@ var InputPicker = /*#__PURE__*/_react.default.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: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose)
-      }), displayElement);
+      }), itemNode);
     }).filter(function (item) {
       return item !== null;
     });
@@ -584,6 +619,12 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       items = items.sort(sort(false));
     }
 
+    if (disabledOptions) {
+      return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+        ref: (0, _utils.mergeRefs)(overlayRef, speakerRef)
+      });
+    }
+
     var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
@@ -598,7 +639,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       maxHeight: menuMaxHeight,
       data: items,
       group: !(0, _isUndefined.default)(groupBy),
-      onSelect: multi ? handleCheckItemSelect : handleItemSelect,
+      onSelect: multi ? handleCheckTag : handleSelectItem,
       renderMenuGroup: renderMenuGroup,
       renderMenuItem: renderDropdownMenuItem,
       virtualized: virtualized
@@ -615,9 +656,9 @@ var InputPicker = /*#__PURE__*/_react.default.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();
   /**
@@ -626,7 +667,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * 3.If renderValue returns null or undefined, hasValue is false.
    */
 
-  var hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(displayElement);
+  var hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);
   var hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);
   var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;
 
@@ -637,7 +678,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       pickerClasses = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];
 
-  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["tag"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["focused"])))] = open, _merge));
+  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["tag"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["disabled-options"])))] = disabledOptions, _merge));
   var searching = !!searchKeyword && open;
   var displaySearchInput = searchable && !disabled;
   var inputProps = multi ? {
@@ -662,9 +703,10 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
       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.default.createElement(_Picker.PickerToggleTrigger, {
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     ref: triggerRef,
@@ -693,9 +735,10 @@ var InputPicker = /*#__PURE__*/_react.default.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.default.createElement("div", {
-    className: prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["tag-wrapper"])))
+    inputValue: value,
+    caret: !disabledOptions
+  }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["tag-wrapper"])))
   }, tagElements, displaySearchInput && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {
     tabIndex: tabIndex,
     readOnly: readOnly,
@@ -717,7 +760,6 @@ InputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes,
   menuMaxHeight: _propTypes.default.number,
   searchable: _propTypes.default.bool,
   creatable: _propTypes.default.bool,
-  multi: _propTypes.default.bool,
   groupBy: _propTypes.default.any,
   sort: _propTypes.default.func,
   renderMenu: _propTypes.default.func,
@@ -728,8 +770,7 @@ InputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes,
   onGroupTitleClick: _propTypes.default.func,
   onSearch: _propTypes.default.func,
   virtualized: _propTypes.default.bool,
-  searchBy: _propTypes.default.func,
-  tagProps: _propTypes.default.object
+  searchBy: _propTypes.default.func
 });
 var _default = InputPicker;
 exports.default = _default;

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

@@ -34,7 +34,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 = (0, _react.useCallback)(function (event) {
     if (disabled) {
       return;

package/cjs/MultiCascader/MultiCascader.js

@@ -89,6 +89,7 @@ var MultiCascader = /*#__PURE__*/_react.default.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,
@@ -97,7 +98,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       onOpen = props.onOpen,
       onClose = props.onClose,
       onCheck = props.onCheck,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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,
     labelKey: labelKey,
@@ -202,10 +203,9 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     setActive(true);
   }, [onOpen]);
   var handleExited = (0, _react.useCallback)(function () {
-    onClose === null || onClose === void 0 ? void 0 : onClose();
     setActive(false);
     setSearchKeyword('');
-  }, [onClose]);
+  }, []);
   var handleSelect = (0, _react.useCallback)(function (node, cascadePaths, event) {
     var _node$childrenKey, _node$childrenKey2, _triggerRef$current, _triggerRef$current$u;
 
@@ -493,6 +493,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     placement: placement,
     onEnter: (0, _utils3.createChainedFunction)(handleEntered, onEnter),
     onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),
+    onExit: (0, _utils3.createChainedFunction)(onClose, onExit),
     speaker: renderDropdownMenu
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,