rsuite 5.76.2 → 6.0.0-canary-20250103

package/esm/InputPicker/InputPicker.js

@@ -1,12 +1,6 @@
 'use client';
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var _excluded = ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "size", "searchable", "open", "placeholder", "placement", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "shouldDisplayCreateOption", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onBlur", "onFocus", "searchBy"],
-  _excluded2 = ["closable", "onClose"];
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import remove from 'lodash/remove';
@@ -20,8 +14,7 @@ import Plaintext from "../internals/Plaintext/index.js";
 import { useClassNames, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
 import { createChainedFunction, tplTransform, mergeRefs, isOneOf } from "../internals/utils/index.js";
-import { oneOf } from "../internals/propTypes/index.js";
-import { Listbox, ListItem, ListCheckItem, PickerToggle, PickerPopup, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePickerRef, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from "../internals/Picker/index.js";
+import { Listbox, ListItem, ListCheckItem, PickerToggle, PickerPopup, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePickerRef, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys } from "../internals/Picker/index.js";
 import Tag from "../Tag/index.js";
 import TextBox from "./TextBox.js";
 import Stack from "../Stack/index.js";
@@ -35,152 +28,137 @@ import { useCustom } from "../CustomProvider/index.js";
  *
  * @see https://rsuitejs.com/components/input-picker
  */
-var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _merge;
-  var _useCustom = useCustom('InputPicker', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
-    _propsWithDefaults$ap = propsWithDefaults.appearance,
-    appearance = _propsWithDefaults$ap === void 0 ? 'default' : _propsWithDefaults$ap,
-    _propsWithDefaults$cl = propsWithDefaults.cleanable,
-    cleanable = _propsWithDefaults$cl === void 0 ? true : _propsWithDefaults$cl,
-    _propsWithDefaults$ca = propsWithDefaults.cacheData,
-    cacheData = _propsWithDefaults$ca === void 0 ? [] : _propsWithDefaults$ca,
-    _propsWithDefaults$cl2 = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl2 === void 0 ? 'picker' : _propsWithDefaults$cl2,
-    _propsWithDefaults$da = propsWithDefaults.data,
-    controlledData = _propsWithDefaults$da === void 0 ? [] : _propsWithDefaults$da,
-    disabled = propsWithDefaults.disabled,
-    readOnly = propsWithDefaults.readOnly,
-    plaintext = propsWithDefaults.plaintext,
-    defaultValue = propsWithDefaults.defaultValue,
-    _propsWithDefaults$de = propsWithDefaults.defaultOpen,
-    defaultOpen = _propsWithDefaults$de === void 0 ? false : _propsWithDefaults$de,
-    _propsWithDefaults$di = propsWithDefaults.disabledItemValues,
-    disabledItemValues = _propsWithDefaults$di === void 0 ? [] : _propsWithDefaults$di,
-    locale = propsWithDefaults.locale,
-    toggleAs = propsWithDefaults.toggleAs,
-    style = propsWithDefaults.style,
-    size = propsWithDefaults.size,
-    _propsWithDefaults$se = propsWithDefaults.searchable,
-    searchable = _propsWithDefaults$se === void 0 ? true : _propsWithDefaults$se,
-    controlledOpen = propsWithDefaults.open,
-    placeholder = propsWithDefaults.placeholder,
-    _propsWithDefaults$pl = propsWithDefaults.placement,
-    placement = _propsWithDefaults$pl === void 0 ? 'bottomStart' : _propsWithDefaults$pl,
-    groupBy = propsWithDefaults.groupBy,
-    menuClassName = propsWithDefaults.menuClassName,
-    menuStyle = propsWithDefaults.menuStyle,
-    _propsWithDefaults$me = propsWithDefaults.menuAutoWidth,
-    menuAutoWidth = _propsWithDefaults$me === void 0 ? true : _propsWithDefaults$me,
-    _propsWithDefaults$me2 = propsWithDefaults.menuMaxHeight,
-    menuMaxHeight = _propsWithDefaults$me2 === void 0 ? 320 : _propsWithDefaults$me2,
-    creatable = propsWithDefaults.creatable,
-    shouldDisplayCreateOption = propsWithDefaults.shouldDisplayCreateOption,
-    valueProp = propsWithDefaults.value,
-    _propsWithDefaults$va = propsWithDefaults.valueKey,
-    valueKey = _propsWithDefaults$va === void 0 ? 'value' : _propsWithDefaults$va,
-    virtualized = propsWithDefaults.virtualized,
-    _propsWithDefaults$la = propsWithDefaults.labelKey,
-    labelKey = _propsWithDefaults$la === void 0 ? 'label' : _propsWithDefaults$la,
-    listProps = propsWithDefaults.listProps,
-    id = propsWithDefaults.id,
-    tabIndex = propsWithDefaults.tabIndex,
-    sort = propsWithDefaults.sort,
-    renderMenu = propsWithDefaults.renderMenu,
-    renderExtraFooter = propsWithDefaults.renderExtraFooter,
-    renderValue = propsWithDefaults.renderValue,
-    renderMenuItem = propsWithDefaults.renderMenuItem,
-    renderMenuGroup = propsWithDefaults.renderMenuGroup,
-    onEnter = propsWithDefaults.onEnter,
-    onEntered = propsWithDefaults.onEntered,
-    onExit = propsWithDefaults.onExit,
-    onExited = propsWithDefaults.onExited,
-    onChange = propsWithDefaults.onChange,
-    onClean = propsWithDefaults.onClean,
-    onCreate = propsWithDefaults.onCreate,
-    onSearch = propsWithDefaults.onSearch,
-    onSelect = propsWithDefaults.onSelect,
-    onBlur = propsWithDefaults.onBlur,
-    onFocus = propsWithDefaults.onFocus,
-    searchBy = propsWithDefaults.searchBy,
-    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var _useTagContext = useTagContext(),
-    multi = _useTagContext.multi,
-    tagProps = _useTagContext.tagProps,
-    trigger = _useTagContext.trigger,
-    disabledOptions = _useTagContext.disabledOptions,
-    onTagRemove = _useTagContext.onTagRemove,
-    renderCheckbox = _useTagContext.renderCheckbox;
+const InputPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('InputPicker', props);
+  const {
+    as: Component = 'div',
+    appearance = 'default',
+    cleanable = true,
+    cacheData = [],
+    classPrefix = 'picker',
+    data: controlledData = [],
+    disabled,
+    readOnly,
+    plaintext,
+    defaultValue,
+    defaultOpen = false,
+    disabledItemValues = [],
+    locale,
+    toggleAs,
+    style,
+    size,
+    searchable = true,
+    open: controlledOpen,
+    placeholder,
+    placement = 'bottomStart',
+    groupBy,
+    menuClassName,
+    menuStyle,
+    menuAutoWidth = true,
+    menuMaxHeight = 320,
+    creatable,
+    shouldDisplayCreateOption,
+    value: valueProp,
+    valueKey = 'value',
+    virtualized,
+    labelKey = 'label',
+    listProps,
+    id,
+    tabIndex,
+    sort,
+    renderMenu,
+    renderExtraFooter,
+    renderValue,
+    renderMenuItem,
+    renderMenuGroup,
+    onEnter,
+    onEntered,
+    onExit,
+    onExited,
+    onChange,
+    onClean,
+    onCreate,
+    onSearch,
+    onSelect,
+    onBlur,
+    onFocus,
+    searchBy,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    multi,
+    tagProps,
+    trigger,
+    disabledOptions,
+    onTagRemove,
+    renderCheckbox
+  } = useTagContext();
   if (groupBy === valueKey || groupBy === labelKey) {
     throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
   }
-  var _usePickerRef = usePickerRef(ref),
-    triggerRef = _usePickerRef.trigger,
-    root = _usePickerRef.root,
-    target = _usePickerRef.target,
-    overlay = _usePickerRef.overlay,
-    list = _usePickerRef.list;
-  var _useClassNames = useClassNames(classPrefix),
-    prefix = _useClassNames.prefix,
-    merge = _useClassNames.merge;
-  var _useControlled = useControlled(controlledOpen, defaultOpen),
-    open = _useControlled[0],
-    setOpen = _useControlled[1];
-  var _useInput = useInput({
-      multi: multi,
-      triggerRef: triggerRef
-    }),
-    inputRef = _useInput.inputRef,
-    inputProps = _useInput.inputProps,
-    focus = _useInput.focus,
-    blur = _useInput.blur;
-  var handleDataChange = function handleDataChange(data) {
+  const {
+    trigger: triggerRef,
+    root,
+    target,
+    overlay,
+    list
+  } = usePickerRef(ref);
+  const {
+    prefix,
+    merge
+  } = useClassNames(classPrefix);
+  const [open, setOpen] = useControlled(controlledOpen, defaultOpen);
+  const {
+    inputRef,
+    inputProps,
+    focus,
+    blur
+  } = useInput({
+    multi,
+    triggerRef
+  });
+  const handleDataChange = data => {
     var _data$;
     setFocusItemValue(data === null || data === void 0 || (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$[valueKey]);
   };
-  var _useData = useData({
-      controlledData: controlledData,
-      cacheData: cacheData,
-      onChange: handleDataChange
-    }),
-    data = _useData.data,
-    dataWithCache = _useData.dataWithCache,
-    newData = _useData.newData,
-    setNewData = _useData.setNewData;
-  var _useControlled2 = useControlled(valueProp, multi ? defaultValue || [] : defaultValue),
-    value = _useControlled2[0],
-    setValue = _useControlled2[1],
-    isControlled = _useControlled2[2];
-  var cloneValue = function cloneValue() {
-    return multi ? clone(value) || [] : value;
-  };
-  var handleClose = useEventCallback(function () {
+  const {
+    data,
+    dataWithCache,
+    newData,
+    setNewData
+  } = useData({
+    controlledData,
+    cacheData,
+    onChange: handleDataChange
+  });
+  const [value, setValue, isControlled] = useControlled(valueProp, multi ? defaultValue || [] : defaultValue);
+  const cloneValue = () => multi ? clone(value) || [] : value;
+  const handleClose = useEventCallback(() => {
     var _triggerRef$current, _target$current, _target$current$focus;
     triggerRef === null || triggerRef === void 0 || (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.close();
 
     // The focus is on the trigger button after closing
     (_target$current = target.current) === null || _target$current === void 0 || (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 || _target$current$focus.call(_target$current);
   });
-  var focusItemValueOptions = {
+  const focusItemValueOptions = {
     data: dataWithCache,
-    valueKey: valueKey,
-    target: function target() {
-      return overlay.current;
-    }
+    valueKey,
+    target: () => overlay.current
   };
 
   // Used to hover the focuse item  when trigger `onKeydown`
-  var _useFocusItemValue = useFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value, focusItemValueOptions),
-    focusItemValue = _useFocusItemValue.focusItemValue,
-    setFocusItemValue = _useFocusItemValue.setFocusItemValue,
-    onKeyDown = _useFocusItemValue.onKeyDown;
-  var onSearchCallback = useEventCallback(function (searchKeyword, filteredData, event) {
+  const {
+    focusItemValue,
+    setFocusItemValue,
+    onKeyDown
+  } = useFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value, focusItemValueOptions);
+  const onSearchCallback = useEventCallback((searchKeyword, filteredData, event) => {
     if (!disabledOptions) {
       var _filteredData$;
       // The first option after filtering is the focus.
-      var firstItemValue = filteredData === null || filteredData === void 0 || (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey];
+      let firstItemValue = filteredData === null || filteredData === void 0 || (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey];
 
       // If there is no value in the option and new options are supported, the search keyword is the first option
       if (!firstItemValue && creatable) {
@@ -190,69 +168,68 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     onSearch === null || onSearch === void 0 || onSearch(searchKeyword, event);
   });
-  var searchOptions = {
-    labelKey: labelKey,
-    searchBy: searchBy,
+  const searchOptions = {
+    labelKey,
+    searchBy,
     callback: onSearchCallback
   };
 
   // Use search keywords to filter options.
-  var _useSearch = useSearch(data, searchOptions),
-    searchKeyword = _useSearch.searchKeyword,
-    resetSearch = _useSearch.resetSearch,
-    checkShouldDisplay = _useSearch.checkShouldDisplay,
-    handleSearch = _useSearch.handleSearch;
+  const {
+    searchKeyword,
+    resetSearch,
+    checkShouldDisplay,
+    handleSearch
+  } = useSearch(data, searchOptions);
 
   // Update the position of the menu when the search keyword and value change
-  useEffect(function () {
+  useEffect(() => {
     var _triggerRef$current2, _triggerRef$current2$;
     (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || (_triggerRef$current2$ = _triggerRef$current2.updatePosition) === null || _triggerRef$current2$ === void 0 || _triggerRef$current2$.call(_triggerRef$current2);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchKeyword, value]);
-  var getDataItem = function getDataItem(value) {
+  const getDataItem = value => {
     // Find active `MenuItem` by `value`
-    var activeItem = dataWithCache.find(function (item) {
-      return shallowEqual(item[valueKey], value);
-    });
-    var itemNode = placeholder;
+    const activeItem = dataWithCache.find(item => shallowEqual(item[valueKey], value));
+    let itemNode = placeholder;
     if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {
       itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];
     }
     return {
       isValid: !!activeItem,
-      activeItem: activeItem,
-      itemNode: itemNode
+      activeItem,
+      itemNode
     };
   };
 
   /**
    * Convert the string of the newly created option into an object.
    */
-  var createOption = function createOption(value) {
-    var _option;
-    var option = (_option = {
-      create: true
-    }, _option[valueKey] = value, _option[labelKey] = value, _option);
+  const createOption = value => {
+    const option = {
+      create: true,
+      [valueKey]: value,
+      [labelKey]: value
+    };
     if (groupBy) {
-      var _extends2;
-      return _extends((_extends2 = {}, _extends2[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _extends2), option);
+      return {
+        [groupBy]: locale === null || locale === void 0 ? void 0 : locale.newItem,
+        ...option
+      };
     }
     return option;
   };
-  var handleChange = useEventCallback(function (value, event) {
+  const handleChange = useEventCallback((value, event) => {
     onChange === null || onChange === void 0 || onChange(value, event);
   });
-  var handleRemoveItemByTag = useEventCallback(function (tag, event) {
+  const handleRemoveItemByTag = useEventCallback((tag, event) => {
     event.stopPropagation();
-    var val = cloneValue();
-    remove(val, function (itemVal) {
-      return shallowEqual(itemVal, tag);
-    });
+    const val = cloneValue();
+    remove(val, itemVal => shallowEqual(itemVal, tag));
     setValue(val);
     handleChange(val, event);
     onTagRemove === null || onTagRemove === void 0 || onTagRemove(tag, event);
   });
-  var handleSelect = useEventCallback(function (value, item, event) {
+  const handleSelect = useEventCallback((value, item, event) => {
     onSelect === null || onSelect === void 0 || onSelect(value, item, event);
     if (creatable && item.create) {
       delete item.create;
@@ -267,7 +244,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * @param item
    * @param event
    */
-  var handleSelectItem = useEventCallback(function (value, item, event) {
+  const handleSelectItem = useEventCallback((value, item, event) => {
     setValue(value);
     setFocusItemValue(value);
     resetSearch();
@@ -283,14 +260,12 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * @param event
    * @param checked
    */
-  var handleCheckTag = useEventCallback(function (nextItemValue, item, event, checked) {
-    var val = cloneValue();
+  const handleCheckTag = useEventCallback((nextItemValue, item, event, checked) => {
+    const val = cloneValue();
     if (checked) {
       val.push(nextItemValue);
     } else {
-      remove(val, function (itemVal) {
-        return shallowEqual(itemVal, nextItemValue);
-      });
+      remove(val, itemVal => shallowEqual(itemVal, nextItemValue));
     }
     setValue(val);
     resetSearch();
@@ -299,13 +274,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleChange(val, event);
     focus();
   });
-  var handleTagKeyPress = useEventCallback(function (event) {
+  const handleTagKeyPress = useEventCallback(event => {
     // When composing, ignore the keypress event.
     if (event.nativeEvent.isComposing) {
       return;
     }
-    var val = cloneValue();
-    var newItemValue = focusItemValue || '';
+    const val = cloneValue();
+    let newItemValue = focusItemValue || '';
 
     // In TagInput
     if (multi && disabledOptions) {
@@ -316,23 +291,15 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     // If the value is disabled in this option, it is returned.
-    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {
-      return item === newItemValue;
-    })) {
+    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(item => item === newItemValue)) {
       return;
     }
-    if (!val.some(function (v) {
-      return shallowEqual(v, newItemValue);
-    })) {
+    if (!val.some(v => shallowEqual(v, newItemValue))) {
       val.push(newItemValue);
     } else if (!disabledOptions) {
-      remove(val, function (itemVal) {
-        return shallowEqual(itemVal, newItemValue);
-      });
+      remove(val, itemVal => shallowEqual(itemVal, newItemValue));
     }
-    var focusItem = data.find(function (item) {
-      return shallowEqual(item === null || item === void 0 ? void 0 : item[valueKey], newItemValue);
-    });
+    let focusItem = data.find(item => shallowEqual(item === null || item === void 0 ? void 0 : item[valueKey], newItemValue));
     if (!focusItem) {
       focusItem = createOption(newItemValue);
     }
@@ -341,22 +308,18 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleSelect(val, focusItem, event);
     handleChange(val, event);
   });
-  var handleMenuItemKeyPress = useEventCallback(function (event) {
+  const handleMenuItemKeyPress = useEventCallback(event => {
     if (!focusItemValue || !controlledData) {
       return;
     }
 
     // If the value is disabled in this option, it is returned.
-    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {
-      return item === focusItemValue;
-    })) {
+    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(item => item === focusItemValue)) {
       return;
     }
 
     // Find active `MenuItem` by `value`
-    var focusItem = data.find(function (item) {
-      return shallowEqual(item[valueKey], focusItemValue);
-    });
+    let focusItem = data.find(item => shallowEqual(item[valueKey], focusItemValue));
 
     // FIXME Bad state flow
     if (!focusItem && focusItemValue === searchKeyword) {
@@ -375,8 +338,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * Remove the last item, after pressing the back key on the keyboard.
    * @param event
    */
-  var removeLastItem = useEventCallback(function (event) {
-    var target = event === null || event === void 0 ? void 0 : event.target;
+  const removeLastItem = useEventCallback(event => {
+    const target = event === null || event === void 0 ? void 0 : event.target;
     if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {
       focus();
       return;
@@ -384,12 +347,12 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {
       return;
     }
-    var val = cloneValue();
+    const val = cloneValue();
     val.pop();
     setValue(val);
     handleChange(val, event);
   });
-  var handleClean = useEventCallback(function (event) {
+  const handleClean = useEventCallback(event => {
     if (disabled || searchKeyword !== '') {
       return;
     }
@@ -403,13 +366,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     onClean === null || onClean === void 0 || onClean(event);
   });
-  var events = {
+  const events = {
     onMenuPressBackspace: multi ? removeLastItem : handleClean,
     onMenuKeyDown: onKeyDown,
     onMenuPressEnter: undefined,
     onKeyDown: undefined
   };
-  var handleKeyPress = useEventCallback(function (event) {
+  const handleKeyPress = useEventCallback(event => {
     // When typing a space, create a tag.
     if (isOneOf('Space', trigger) && event.key === KEY_VALUES.SPACE) {
       handleTagKeyPress(event);
@@ -432,16 +395,18 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   } else {
     events.onMenuPressEnter = handleMenuItemKeyPress;
   }
-  var onPickerKeyDown = useToggleKeyDownEvent(_extends({
+  const onPickerKeyDown = useToggleKeyDownEvent({
     trigger: triggerRef,
-    target: target,
-    overlay: overlay
-  }, events, rest));
-  var handleExited = useEventCallback(function () {
+    target,
+    overlay,
+    ...events,
+    ...rest
+  });
+  const handleExited = useEventCallback(() => {
     setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);
     resetSearch();
   });
-  var handleFocus = useEventCallback(function (event) {
+  const handleFocus = useEventCallback(event => {
     if (!readOnly) {
       var _triggerRef$current3;
       setOpen(true);
@@ -449,51 +414,53 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     onFocus === null || onFocus === void 0 || onFocus(event);
   });
-  var handleEnter = useEventCallback(function () {
+  const handleEnter = useEventCallback(() => {
     focus();
     setOpen(true);
   });
-  var handleExit = useEventCallback(function () {
+  const handleExit = useEventCallback(() => {
     blur();
     setOpen(false);
   });
-  var renderListItem = function renderListItem(label, item) {
+  const renderListItem = (label, item) => {
     // 'Create option "{0}"' =>  Create option "xxxxx"
-    var newLabel = item.create ? /*#__PURE__*/React.createElement("span", null, tplTransform((locale === null || locale === void 0 ? void 0 : locale.createOption) || '', label)) : label;
+    const newLabel = item.create ? /*#__PURE__*/React.createElement("span", null, tplTransform((locale === null || locale === void 0 ? void 0 : locale.createOption) || '', label)) : label;
     return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;
   };
-  var checkValue = function checkValue() {
+  const checkValue = () => {
     if (multi) {
       return {
         isValid: false,
         itemNode: null
       };
     }
-    var dataItem = getDataItem(value);
-    var itemNode = dataItem.itemNode;
+    const dataItem = getDataItem(value);
+    let itemNode = dataItem.itemNode;
     if (!isNil(value) && isFunction(renderValue)) {
       itemNode = renderValue(value, dataItem.activeItem, itemNode);
     }
     return {
       isValid: dataItem.isValid,
-      itemNode: itemNode
+      itemNode
     };
   };
-  var renderMultiValue = function renderMultiValue() {
+  const renderMultiValue = () => {
     if (!multi) {
       return null;
     }
-    var _tagProps$closable = tagProps.closable,
-      closable = _tagProps$closable === void 0 ? true : _tagProps$closable,
-      onClose = tagProps.onClose,
-      tagRest = _objectWithoutPropertiesLoose(tagProps, _excluded2);
-    var tags = value || [];
-    var items = [];
-    var tagElements = tags.map(function (tag) {
-      var _getDataItem = getDataItem(tag),
-        isValid = _getDataItem.isValid,
-        itemNode = _getDataItem.itemNode,
-        activeItem = _getDataItem.activeItem;
+    const {
+      closable = true,
+      onClose,
+      ...tagRest
+    } = tagProps;
+    const tags = value || [];
+    const items = [];
+    const tagElements = tags.map(tag => {
+      const {
+        isValid,
+        itemNode,
+        activeItem
+      } = getDataItem(tag);
       items.push(activeItem);
       if (!isValid) {
         return null;
@@ -507,29 +474,28 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         title: typeof itemNode === 'string' ? itemNode : undefined,
         onClose: createChainedFunction(handleRemoveItemByTag.bind(null, tag), onClose)
       }), itemNode);
-    }).filter(function (item) {
-      return item !== null;
-    });
+    }).filter(item => item !== null);
     if ((tags.length > 0 || isControlled) && isFunction(renderValue)) {
       return renderValue(value, items, tagElements);
     }
     return tagElements;
   };
-  var renderPopup = function renderPopup(positionProps, speakerRef) {
-    var left = positionProps.left,
-      top = positionProps.top,
-      className = positionProps.className;
-    var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';
-    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));
-    var styles = _extends({}, menuStyle, {
-      left: left,
-      top: top
-    });
-    var items = filterNodesOfTree(data, checkShouldDisplay);
-    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {
-      return item[valueKey] === searchKeyword;
-    }))) {
-      items = [].concat(items, [createOption(searchKeyword)]);
+  const renderPopup = (positionProps, speakerRef) => {
+    const {
+      left,
+      top,
+      className
+    } = positionProps;
+    const menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';
+    const classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));
+    const styles = {
+      ...menuStyle,
+      left,
+      top
+    };
+    let items = filterNodesOfTree(data, checkShouldDisplay);
+    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(item => item[valueKey] === searchKeyword))) {
+      items = [...items, createOption(searchKeyword)];
     }
 
     // Create a tree structure data when set `groupBy`
@@ -543,17 +509,17 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         ref: mergeRefs(overlay, speakerRef)
       });
     }
-    var menu = items.length ? /*#__PURE__*/React.createElement(Listbox, {
+    const menu = items.length ? /*#__PURE__*/React.createElement(Listbox, {
       listProps: listProps,
       listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
       classPrefix: menuClassPrefix,
-      listItemClassPrefix: multi ? undefined : menuClassPrefix + "-item",
+      listItemClassPrefix: multi ? undefined : `${menuClassPrefix}-item`,
       listItemAs: multi ? ListCheckItem : ListItem,
       listItemProps: {
-        renderCheckbox: renderCheckbox
+        renderCheckbox
       },
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,
@@ -566,7 +532,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderMenuItem: renderListItem,
       virtualized: virtualized
     }) : /*#__PURE__*/React.createElement("div", {
-      className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["none"])))
+      className: prefix`none`
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
     return /*#__PURE__*/React.createElement(PickerPopup, {
       ref: mergeRefs(overlay, speakerRef),
@@ -577,33 +543,38 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onKeyDown: onPickerKeyDown
     }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
-  var _checkValue = checkValue(),
-    isValid = _checkValue.isValid,
-    itemNode = _checkValue.itemNode;
-  var tagElements = renderMultiValue();
+  const {
+    isValid,
+    itemNode
+  } = checkValue();
+  const tagElements = renderMultiValue();
 
   /**
    * 1.Have a value and the value is valid.
    * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.
    * 3.If renderValue returns null or undefined, hasValue is false.
    */
-  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;
-  var _usePickerClassName = usePickerClassName(_extends({}, props, {
-      classPrefix: classPrefix,
-      appearance: appearance,
-      hasValue: hasValue,
-      name: 'input',
-      cleanable: cleanable
-    })),
-    pickerClasses = _usePickerClassName[0],
-    usedClassNamePropKeys = _usePickerClassName[1];
-  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["tag"])))] = multi, _merge[prefix((multi ? 'tag' : 'input') + "-" + size)] = size, _merge[prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["disabled-options"])))] = disabledOptions, _merge));
-  var searching = !!searchKeyword && open;
-  var editable = searchable && !disabled && !rest.loading;
+  const hasSingleValue = !isNil(value) && isFunction(renderValue) && !isNil(itemNode);
+  const hasMultiValue = isArray(value) && value.length > 0 && isFunction(renderValue) && !isNil(tagElements);
+  const hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;
+  const [pickerClasses, usedClassNamePropKeys] = usePickerClassName({
+    ...props,
+    classPrefix,
+    appearance,
+    hasValue,
+    name: 'input',
+    cleanable
+  });
+  const classes = merge(pickerClasses, {
+    [prefix`tag`]: multi,
+    [prefix(`${multi ? 'tag' : 'input'}-${size}`)]: size,
+    [prefix`focused`]: open,
+    [prefix`disabled-options`]: disabledOptions
+  });
+  const searching = !!searchKeyword && open;
+  const editable = searchable && !disabled && !rest.loading;
   if (plaintext) {
-    var plaintextProps = {};
+    const plaintextProps = {};
 
     // When multiple selection, the tag is displayed in a stack layout.
     if (multi && hasValue) {
@@ -617,7 +588,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: target
     }, 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);
+  const placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     id: id,
     multiple: multi,
@@ -636,7 +607,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: focus,
     onKeyDown: onPickerKeyDown,
     ref: root
-  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
+  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [...omitTriggerPropKeys, ...usedClassNamePropKeys]), {
     appearance: appearance,
     readOnly: readOnly,
     plaintext: plaintext,
@@ -669,24 +640,4 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })));
 });
 InputPicker.displayName = 'InputPicker';
-InputPicker.propTypes = _extends({}, listPickerPropTypes, {
-  locale: PropTypes.any,
-  appearance: oneOf(['default', 'subtle']),
-  cacheData: PropTypes.array,
-  menuAutoWidth: PropTypes.bool,
-  menuMaxHeight: PropTypes.number,
-  searchable: PropTypes.bool,
-  creatable: PropTypes.bool,
-  groupBy: PropTypes.any,
-  sort: PropTypes.func,
-  renderMenu: PropTypes.func,
-  renderMenuItem: PropTypes.func,
-  renderMenuGroup: PropTypes.func,
-  onCreate: PropTypes.func,
-  onSelect: PropTypes.func,
-  onGroupTitleClick: PropTypes.func,
-  onSearch: PropTypes.func,
-  virtualized: PropTypes.bool,
-  searchBy: PropTypes.func
-});
 export default InputPicker;