rsuite 5.40.0 → 5.42.0

package/cjs/InputPicker/InputPicker.js

@@ -1,178 +1,140 @@
+'use client';
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 exports.__esModule = true;
 exports.default = exports.InputPickerContext = void 0;
-
 var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
-
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
-
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
-
 var _remove = _interopRequireDefault(require("lodash/remove"));
-
 var _clone = _interopRequireDefault(require("lodash/clone"));
-
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
-
 var _omit = _interopRequireDefault(require("lodash/omit"));
-
 var _pick = _interopRequireDefault(require("lodash/pick"));
-
 var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
-
 var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
-
 var _treeUtils = require("../utils/treeUtils");
-
 var _Plaintext = _interopRequireDefault(require("../Plaintext"));
-
 var _utils = require("../utils");
-
 var _getDataGroupBy = require("../utils/getDataGroupBy");
-
 var _Picker = require("../Picker");
-
 var _Tag = _interopRequireDefault(require("../Tag"));
-
 var _InputAutosize = _interopRequireDefault(require("./InputAutosize"));
-
 var _InputSearch = _interopRequireDefault(require("./InputSearch"));
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 var InputPickerContext = /*#__PURE__*/_react.default.createContext({
   tagProps: {},
   trigger: 'Enter'
 });
-
 exports.InputPickerContext = InputPickerContext;
-
 var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _merge;
-
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      _props$appearance = props.appearance,
-      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-      _props$cleanable = props.cleanable,
-      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
-      _props$cacheData = props.cacheData,
-      cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
-      _props$data = props.data,
-      controlledData = _props$data === void 0 ? [] : _props$data,
-      disabled = props.disabled,
-      readOnly = props.readOnly,
-      plaintext = props.plaintext,
-      defaultValue = props.defaultValue,
-      _props$defaultOpen = props.defaultOpen,
-      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
-      _props$disabledItemVa = props.disabledItemValues,
-      disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
-      overrideLocale = props.locale,
-      toggleAs = props.toggleAs,
-      style = props.style,
-      _props$searchable = props.searchable,
-      searchable = _props$searchable === void 0 ? true : _props$searchable,
-      controlledOpen = props.open,
-      placeholder = props.placeholder,
-      groupBy = props.groupBy,
-      menuClassName = props.menuClassName,
-      menuStyle = props.menuStyle,
-      _props$menuAutoWidth = props.menuAutoWidth,
-      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
-      _props$menuMaxHeight = props.menuMaxHeight,
-      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
-      creatable = props.creatable,
-      shouldDisplayCreateOption = props.shouldDisplayCreateOption,
-      valueProp = props.value,
-      _props$valueKey = props.valueKey,
-      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
-      virtualized = props.virtualized,
-      _props$labelKey = props.labelKey,
-      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
-      listProps = props.listProps,
-      id = props.id,
-      tabIndex = props.tabIndex,
-      sort = props.sort,
-      renderMenu = props.renderMenu,
-      renderExtraFooter = props.renderExtraFooter,
-      renderValue = props.renderValue,
-      renderMenuItem = props.renderMenuItem,
-      renderMenuGroup = props.renderMenuGroup,
-      onEnter = props.onEnter,
-      onEntered = props.onEntered,
-      onExit = props.onExit,
-      onExited = props.onExited,
-      onChange = props.onChange,
-      onClean = props.onClean,
-      onCreate = props.onCreate,
-      onSearch = props.onSearch,
-      onSelect = props.onSelect,
-      onOpen = props.onOpen,
-      onClose = props.onClose,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      searchBy = props.searchBy,
-      _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "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", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
-
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+    _props$cleanable = props.cleanable,
+    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
+    _props$cacheData = props.cacheData,
+    cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
+    _props$data = props.data,
+    controlledData = _props$data === void 0 ? [] : _props$data,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    plaintext = props.plaintext,
+    defaultValue = props.defaultValue,
+    _props$defaultOpen = props.defaultOpen,
+    defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
+    _props$disabledItemVa = props.disabledItemValues,
+    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
+    overrideLocale = props.locale,
+    toggleAs = props.toggleAs,
+    style = props.style,
+    _props$searchable = props.searchable,
+    searchable = _props$searchable === void 0 ? true : _props$searchable,
+    controlledOpen = props.open,
+    placeholder = props.placeholder,
+    groupBy = props.groupBy,
+    menuClassName = props.menuClassName,
+    menuStyle = props.menuStyle,
+    _props$menuAutoWidth = props.menuAutoWidth,
+    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
+    _props$menuMaxHeight = props.menuMaxHeight,
+    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
+    creatable = props.creatable,
+    shouldDisplayCreateOption = props.shouldDisplayCreateOption,
+    valueProp = props.value,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    virtualized = props.virtualized,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    listProps = props.listProps,
+    id = props.id,
+    tabIndex = props.tabIndex,
+    sort = props.sort,
+    renderMenu = props.renderMenu,
+    renderExtraFooter = props.renderExtraFooter,
+    renderValue = props.renderValue,
+    renderMenuItem = props.renderMenuItem,
+    renderMenuGroup = props.renderMenuGroup,
+    onEnter = props.onEnter,
+    onEntered = props.onEntered,
+    onExit = props.onExit,
+    onExited = props.onExited,
+    onChange = props.onChange,
+    onClean = props.onClean,
+    onCreate = props.onCreate,
+    onSearch = props.onSearch,
+    onSelect = props.onSelect,
+    onOpen = props.onOpen,
+    onClose = props.onClose,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    searchBy = props.searchBy,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "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", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
   var _useContext = (0, _react.useContext)(InputPickerContext),
-      multi = _useContext.multi,
-      tagProps = _useContext.tagProps,
-      trigger = _useContext.trigger,
-      disabledOptions = _useContext.disabledOptions;
-
+    multi = _useContext.multi,
+    tagProps = _useContext.tagProps,
+    trigger = _useContext.trigger,
+    disabledOptions = _useContext.disabledOptions,
+    onTagRemove = _useContext.onTagRemove;
   if (groupBy === valueKey || groupBy === labelKey) {
     throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
   }
-
   var overlayRef = (0, _react.useRef)(null);
   var targetRef = (0, _react.useRef)(null);
   var triggerRef = (0, _react.useRef)(null);
   var inputRef = (0, _react.useRef)();
   var listRef = (0, _react.useRef)(null);
-
   var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),
-      locale = _useCustom.locale;
-
+    locale = _useCustom.locale;
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge;
-
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
   var _useState = (0, _react.useState)(controlledData),
-      uncontrolledData = _useState[0],
-      setData = _useState[1];
-
+    uncontrolledData = _useState[0],
+    setData = _useState[1];
   var _useState2 = (0, _react.useState)(100),
-      maxWidth = _useState2[0],
-      setMaxWidth = _useState2[1];
-
+    maxWidth = _useState2[0],
+    setMaxWidth = _useState2[1];
   var _useState3 = (0, _react.useState)([]),
-      newData = _useState3[0],
-      setNewData = _useState3[1];
-
+    newData = _useState3[0],
+    setNewData = _useState3[1];
   var _useState4 = (0, _react.useState)(defaultOpen),
-      uncontrolledOpen = _useState4[0],
-      setOpen = _useState4[1];
-
+    uncontrolledOpen = _useState4[0],
+    setOpen = _useState4[1];
   var open = (0, _isUndefined.default)(controlledOpen) ? uncontrolledOpen : controlledOpen;
   var getAllData = (0, _react.useCallback)(function () {
     return [].concat(uncontrolledData, newData);
@@ -180,55 +142,49 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var getAllDataAndCache = (0, _react.useCallback)(function () {
     return [].concat(getAllData(), cacheData);
   }, [getAllData, cacheData]);
-
   var _useControlled = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),
-      value = _useControlled[0],
-      setValue = _useControlled[1],
-      isControlled = _useControlled[2];
-
+    value = _useControlled[0],
+    setValue = _useControlled[1],
+    isControlled = _useControlled[2];
   var cloneValue = (0, _react.useCallback)(function () {
     return multi ? (0, _clone.default)(value) || [] : value;
   }, [multi, value]);
   var handleClose = (0, _react.useCallback)(function () {
     var _triggerRef$current;
-
     triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();
-  }, [triggerRef]); // Used to hover the focuse item  when trigger `onKeydown`
+  }, [triggerRef]);
 
+  // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {
-    data: getAllDataAndCache(),
-    valueKey: valueKey,
-    target: function target() {
-      return overlayRef.current;
-    }
-  }),
-      focusItemValue = _useFocusItemValue.focusItemValue,
-      setFocusItemValue = _useFocusItemValue.setFocusItemValue,
-      onKeyDown = _useFocusItemValue.onKeyDown;
-
+      data: getAllDataAndCache(),
+      valueKey: valueKey,
+      target: function target() {
+        return overlayRef.current;
+      }
+    }),
+    focusItemValue = _useFocusItemValue.focusItemValue,
+    setFocusItemValue = _useFocusItemValue.setFocusItemValue,
+    onKeyDown = _useFocusItemValue.onKeyDown;
   var handleSearchCallback = (0, _react.useCallback)(function (searchKeyword, filteredData, event) {
     var _filteredData$;
-
     // The first option after filtering is the focus.
     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);
-  }, [disabledOptions, setFocusItemValue, valueKey, onSearch]); // Use search keywords to filter options.
+  }, [disabledOptions, setFocusItemValue, valueKey, onSearch]);
 
+  // Use search keywords to filter options.
   var _useSearch = (0, _Picker.useSearch)(getAllData(), {
-    labelKey: labelKey,
-    searchBy: searchBy,
-    callback: handleSearchCallback
-  }),
-      searchKeyword = _useSearch.searchKeyword,
-      resetSearch = _useSearch.resetSearch,
-      checkShouldDisplay = _useSearch.checkShouldDisplay,
-      handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes
-
-
+      labelKey: labelKey,
+      searchBy: searchBy,
+      callback: handleSearchCallback
+    }),
+    searchKeyword = _useSearch.searchKeyword,
+    resetSearch = _useSearch.resetSearch,
+    checkShouldDisplay = _useSearch.checkShouldDisplay,
+    handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes
   (0, _react.useEffect)(function () {
     if (controlledData && !(0, _shallowEqual.default)(controlledData, uncontrolledData)) {
       var _controlledData$;
-
       setData(controlledData);
       setNewData([]);
       setFocusItemValue(controlledData === null || controlledData === void 0 ? void 0 : (_controlledData$ = controlledData[0]) === null || _controlledData$ === void 0 ? void 0 : _controlledData$[valueKey]);
@@ -236,19 +192,17 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [setFocusItemValue, controlledData, uncontrolledData, valueKey]);
   (0, _react.useEffect)(function () {
     var _triggerRef$current2;
-
     // In multiple selection, you need to set a maximum width for the input.
     if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {
       setMaxWidth((0, _getWidth.default)(triggerRef.current.root));
     }
-  }, []); // Update the position of the menu when the search keyword and value change
+  }, []);
 
+  // Update the position of the menu when the search keyword and value change
   (0, _react.useEffect)(function () {
     var _triggerRef$current3, _triggerRef$current3$;
-
     (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.updatePosition) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);
   }, [searchKeyword, value]);
-
   var getDateItem = function getDateItem(value) {
     // Find active `MenuItem` by `value`
     var allData = getAllDataAndCache();
@@ -256,48 +210,39 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return (0, _shallowEqual.default)(item[valueKey], value);
     });
     var 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
     };
   };
-
   var getInput = (0, _react.useCallback)(function () {
     var _inputRef$current;
-
     return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;
   }, [inputRef, multi]);
   var focusInput = (0, _react.useCallback)(function () {
     var _getInput;
-
     return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();
   }, [getInput]);
   var blurInput = (0, _react.useCallback)(function () {
     var _getInput2;
-
     return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();
   }, [getInput]);
+
   /**
    * Convert the string of the newly created option into an object.
    */
-
   var createOption = (0, _react.useCallback)(function (value) {
     var _ref2;
-
     if (groupBy) {
       var _ref;
-
       return _ref = {
         create: true
       }, _ref[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _ref[valueKey] = value, _ref[labelKey] = value, _ref;
     }
-
     return _ref2 = {
       create: true
     }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;
@@ -313,23 +258,23 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     });
     setValue(val);
     handleChange(val, event);
-  }, [setValue, cloneValue, handleChange]);
+    onTagRemove === null || onTagRemove === void 0 ? void 0 : onTagRemove(tag, event);
+  }, [cloneValue, setValue, handleChange, onTagRemove]);
   var handleSelect = (0, _react.useCallback)(function (value, item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);
-
     if (creatable && item.create) {
       delete item.create;
       onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);
       setNewData(newData.concat(item));
     }
   }, [creatable, newData, onSelect, onCreate]);
+
   /**
    * Callback triggered by single selection
    * @param value
    * @param item
    * @param event
    */
-
   var handleSelectItem = function handleSelectItem(value, item, event) {
     setValue(value);
     setFocusItemValue(value);
@@ -338,6 +283,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     handleChange(value, event);
     handleClose();
   };
+
   /**
    * Callback triggered by multiple selection
    * @param nextItemValue
@@ -345,11 +291,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * @param event
    * @param checked
    */
-
-
   var handleCheckTag = function handleCheckTag(nextItemValue, item, event, checked) {
     var val = cloneValue();
-
     if (checked) {
       val.push(nextItemValue);
     } else {
@@ -357,7 +300,6 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         return (0, _shallowEqual.default)(itemVal, nextItemValue);
       });
     }
-
     setValue(val);
     resetSearch();
     setFocusItemValue(nextItemValue);
@@ -365,27 +307,23 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     handleChange(val, event);
     focusInput();
   };
-
   var handleTagKeyPress = (0, _react.useCallback)(function (event) {
     // When composing, ignore the keypress event.
     if (event.nativeEvent.isComposing) {
       return;
     }
-
     var val = cloneValue();
     var data = getAllData();
-
     if (!focusItemValue || !data) {
       return;
-    } // If the value is disabled in this option, it is returned.
-
+    }
 
+    // If the value is disabled in this option, it is returned.
     if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {
       return item === focusItemValue;
     })) {
       return;
     }
-
     if (!val.some(function (v) {
       return (0, _shallowEqual.default)(v, focusItemValue);
     })) {
@@ -395,15 +333,12 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         return (0, _shallowEqual.default)(itemVal, focusItemValue);
       });
     }
-
     var focusItem = data.find(function (item) {
       return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);
     });
-
     if (!focusItem) {
       focusItem = createOption(focusItemValue);
     }
-
     setValue(val);
     resetSearch();
     handleSelect(val, focusItem, event);
@@ -412,32 +347,30 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleMenuItemKeyPress = (0, _react.useCallback)(function (event) {
     if (!focusItemValue || !controlledData) {
       return;
-    } // If the value is disabled in this option, it is returned.
-
+    }
 
+    // If the value is disabled in this option, it is returned.
     if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {
       return item === focusItemValue;
     })) {
       return;
-    } // Find active `MenuItem` by `value`
-
+    }
 
+    // Find active `MenuItem` by `value`
     var allData = getAllData();
     var focusItem = allData.find(function (item) {
       return (0, _shallowEqual.default)(item[valueKey], focusItemValue);
-    }); // FIXME Bad state flow
+    });
 
+    // FIXME Bad state flow
     if (!focusItem && focusItemValue === searchKeyword) {
       focusItem = createOption(searchKeyword);
     }
-
     setValue(focusItemValue);
     resetSearch();
-
     if (focusItem) {
       handleSelect(focusItemValue, focusItem, event);
     }
-
     handleChange(focusItemValue, event);
     handleClose();
   }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, resetSearch, createOption, getAllData, handleChange, handleSelect]);
@@ -447,23 +380,20 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     targetRef: targetRef,
     listRef: listRef
   });
+
   /**
    * Remove the last item, after pressing the back key on the keyboard.
    * @param event
    */
-
   var removeLastItem = (0, _react.useCallback)(function (event) {
     var target = event === null || event === void 0 ? void 0 : event.target;
-
     if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {
       focusInput();
       return;
     }
-
     if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {
       return;
     }
-
     var val = cloneValue();
     val.pop();
     setValue(val);
@@ -473,17 +403,14 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (disabled || searchKeyword !== '') {
       return;
     }
-
     setValue(null);
     setFocusItemValue(null);
     resetSearch();
-
     if (multi) {
       handleChange([], event);
     } else {
       handleChange(null, event);
     }
-
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
   }, [disabled, searchKeyword, setValue, setFocusItemValue, resetSearch, multi, onClean, handleChange]);
   var events = {
@@ -497,27 +424,24 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {
       handleTagKeyPress(event);
       event.preventDefault();
-    } // When typing a comma, create a tag.
-
+    }
 
+    // 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,
@@ -531,7 +455,6 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleFocus = (0, _react.useCallback)(function () {
     if (!readOnly) {
       var _triggerRef$current4;
-
       setOpen(true);
       (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();
     }
@@ -544,13 +467,11 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     blurInput();
     setOpen(false);
   }, [blurInput]);
-
   var renderDropdownMenuItem = function renderDropdownMenuItem(label, item) {
     // 'Create option "{0}"' =>  Create option "xxxxx"
     var newLabel = item.create ? /*#__PURE__*/_react.default.createElement("span", null, (0, _utils.tplTransform)(locale.createOption, label)) : label;
     return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;
   };
-
   var checkValue = function checkValue() {
     if (multi) {
       return {
@@ -558,43 +479,35 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         itemNode: null
       };
     }
-
     var dataItem = getDateItem(value);
     var itemNode = dataItem.itemNode;
-
     if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {
       itemNode = renderValue(value, dataItem.activeItem, itemNode);
     }
-
     return {
       isValid: dataItem.isValid,
       itemNode: itemNode
     };
   };
-
   var renderMultiValue = function renderMultiValue() {
     if (!multi) {
       return null;
     }
-
     var _tagProps$closable = tagProps.closable,
-        closable = _tagProps$closable === void 0 ? true : _tagProps$closable,
-        onClose = tagProps.onClose,
-        tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, ["closable", "onClose"]);
+      closable = _tagProps$closable === void 0 ? true : _tagProps$closable,
+      onClose = tagProps.onClose,
+      tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, ["closable", "onClose"]);
     var tags = value || [];
     var items = [];
     var tagElements = tags.map(function (tag) {
       var _getDateItem = getDateItem(tag),
-          isValid = _getDateItem.isValid,
-          itemNode = _getDateItem.itemNode,
-          activeItem = _getDateItem.activeItem;
-
+        isValid = _getDateItem.isValid,
+        itemNode = _getDateItem.itemNode,
+        activeItem = _getDateItem.activeItem;
       items.push(activeItem);
-
       if (!isValid) {
         return null;
       }
-
       return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({}, tagRest, {
         key: tag,
         size: rest.size === 'lg' ? 'lg' : rest.size === 'xs' ? 'sm' : 'md',
@@ -605,18 +518,15 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }).filter(function (item) {
       return item !== null;
     });
-
     if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {
       return renderValue(value, items, tagElements);
     }
-
     return tagElements;
   };
-
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
-        top = positionProps.top,
-        className = positionProps.className;
+      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 = (0, _extends2.default)({}, menuStyle, {
@@ -624,26 +534,23 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       top: top
     });
     var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);
-
     if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {
       return item[valueKey] === searchKeyword;
     }))) {
       items = [].concat(items, [createOption(searchKeyword)]);
-    } // Create a tree structure data when set `groupBy`
-
+    }
 
+    // Create a tree structure data when set `groupBy`
     if (groupBy) {
       items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);
     } else if (typeof sort === 'function') {
       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,
@@ -657,7 +564,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,
       maxHeight: menuMaxHeight,
-      data: items // FIXME-Doma
+      data: items
+      // FIXME-Doma
       // `group` is redundant so long as `groupBy` exists
       ,
       group: !(0, _isUndefined.default)(groupBy),
@@ -679,32 +587,28 @@ var InputPicker = /*#__PURE__*/_react.default.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;
-
+    isValid = _checkValue.isValid,
+    itemNode = _checkValue.itemNode;
   var 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 = !(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;
-
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
-    classPrefix: classPrefix,
-    appearance: appearance,
-    hasValue: hasValue,
-    name: 'input',
-    cleanable: cleanable
-  })),
-      pickerClasses = _usePickerClassName[0],
-      usedClassNamePropKeys = _usePickerClassName[1];
-
+      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 = (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;
@@ -716,23 +620,21 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   } : {
     as: 'input'
   };
-
   if (plaintext) {
-    var plaintextProps = {}; // TagPicker has -6px margin-left on the plaintext wrapper
-    // for fixing margin-left on tags from 2nd line on
+    var plaintextProps = {};
 
+    // TagPicker has -6px margin-left on the plaintext wrapper
+    // for fixing margin-left on tags from 2nd line on
     if (multi && hasValue) {
       plaintextProps.style = {
         marginLeft: -6
       };
     }
-
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
       localeKey: "notSelected",
       ref: targetRef
     }, 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),
@@ -777,7 +679,6 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     value: open ? searchKeyword : ''
   })))));
 });
-
 InputPicker.displayName = 'InputPicker';
 InputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {
   locale: _propTypes.default.any,