rsuite 5.40.0 → 5.42.0

package/esm/InputPicker/InputPicker.js

@@ -1,9 +1,8 @@
+'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, _templateObject5;
-
 import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import isUndefined from 'lodash/isUndefined';
@@ -30,115 +29,105 @@ export var InputPickerContext = /*#__PURE__*/React.createContext({
 });
 var InputPicker = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = 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 = useRef(null);
   var targetRef = useRef(null);
   var triggerRef = useRef(null);
   var inputRef = useRef();
   var listRef = useRef(null);
-
   var _useCustom = useCustom(['Picker', 'InputPicker'], overrideLocale),
-      locale = _useCustom.locale;
-
+    locale = _useCustom.locale;
   var _useClassNames = useClassNames(classPrefix),
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge;
-
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
   var _useState = useState(controlledData),
-      uncontrolledData = _useState[0],
-      setData = _useState[1];
-
+    uncontrolledData = _useState[0],
+    setData = _useState[1];
   var _useState2 = useState(100),
-      maxWidth = _useState2[0],
-      setMaxWidth = _useState2[1];
-
+    maxWidth = _useState2[0],
+    setMaxWidth = _useState2[1];
   var _useState3 = useState([]),
-      newData = _useState3[0],
-      setNewData = _useState3[1];
-
+    newData = _useState3[0],
+    setNewData = _useState3[1];
   var _useState4 = useState(defaultOpen),
-      uncontrolledOpen = _useState4[0],
-      setOpen = _useState4[1];
-
+    uncontrolledOpen = _useState4[0],
+    setOpen = _useState4[1];
   var open = isUndefined(controlledOpen) ? uncontrolledOpen : controlledOpen;
   var getAllData = useCallback(function () {
     return [].concat(uncontrolledData, newData);
@@ -146,55 +135,49 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var getAllDataAndCache = useCallback(function () {
     return [].concat(getAllData(), cacheData);
   }, [getAllData, cacheData]);
-
   var _useControlled = 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 = useCallback(function () {
     return multi ? clone(value) || [] : value;
   }, [multi, value]);
   var handleClose = 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 = 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 = 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 = 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
   useEffect(function () {
     if (controlledData && !shallowEqual(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]);
@@ -202,19 +185,17 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [setFocusItemValue, controlledData, uncontrolledData, valueKey]);
   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(getWidth(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
   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();
@@ -222,48 +203,39 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return shallowEqual(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 = 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 = useCallback(function () {
     var _getInput;
-
     return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();
   }, [getInput]);
   var blurInput = 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 = 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;
@@ -279,23 +251,23 @@ var InputPicker = /*#__PURE__*/React.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 = 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);
@@ -304,6 +276,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleChange(value, event);
     handleClose();
   };
+
   /**
    * Callback triggered by multiple selection
    * @param nextItemValue
@@ -311,11 +284,8 @@ var InputPicker = /*#__PURE__*/React.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 {
@@ -323,7 +293,6 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return shallowEqual(itemVal, nextItemValue);
       });
     }
-
     setValue(val);
     resetSearch();
     setFocusItemValue(nextItemValue);
@@ -331,27 +300,23 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleChange(val, event);
     focusInput();
   };
-
   var handleTagKeyPress = 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 shallowEqual(v, focusItemValue);
     })) {
@@ -361,15 +326,12 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return shallowEqual(itemVal, focusItemValue);
       });
     }
-
     var focusItem = data.find(function (item) {
       return shallowEqual(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);
     });
-
     if (!focusItem) {
       focusItem = createOption(focusItemValue);
     }
-
     setValue(val);
     resetSearch();
     handleSelect(val, focusItem, event);
@@ -378,32 +340,30 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleMenuItemKeyPress = 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 shallowEqual(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]);
@@ -413,23 +373,20 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     targetRef: targetRef,
     listRef: listRef
   });
+
   /**
    * Remove the last item, after pressing the back key on the keyboard.
    * @param event
    */
-
   var removeLastItem = 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);
@@ -439,17 +396,14 @@ var InputPicker = /*#__PURE__*/React.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 = {
@@ -463,27 +417,24 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (isOneOf('Space', trigger) && event.key === KEY_VALUES.SPACE) {
       handleTagKeyPress(event);
       event.preventDefault();
-    } // When typing a comma, create a tag.
-
+    }
 
+    // When typing a comma, create a tag.
     if (isOneOf('Comma', trigger) && event.key === KEY_VALUES.COMMA) {
       handleTagKeyPress(event);
       event.preventDefault();
     }
   }, [handleTagKeyPress, trigger]);
-
   if (multi) {
     if (isOneOf('Enter', trigger)) {
       events.onMenuPressEnter = handleTagKeyPress;
     }
-
     if (creatable) {
       events.onKeyDown = handleKeyPress;
     }
   } else {
     events.onMenuPressEnter = handleMenuItemKeyPress;
   }
-
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     triggerRef: triggerRef,
     targetRef: targetRef,
@@ -497,7 +448,6 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleFocus = useCallback(function () {
     if (!readOnly) {
       var _triggerRef$current4;
-
       setOpen(true);
       (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();
     }
@@ -510,13 +460,11 @@ var InputPicker = /*#__PURE__*/React.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.createElement("span", null, tplTransform(locale.createOption, label)) : label;
     return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;
   };
-
   var checkValue = function checkValue() {
     if (multi) {
       return {
@@ -524,44 +472,35 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         itemNode: null
       };
     }
-
     var dataItem = getDateItem(value);
     var itemNode = dataItem.itemNode;
-
     if (!isNil(value) && isFunction(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 = _objectWithoutPropertiesLoose(tagProps, ["closable", "onClose"]);
-
+      closable = _tagProps$closable === void 0 ? true : _tagProps$closable,
+      onClose = tagProps.onClose,
+      tagRest = _objectWithoutPropertiesLoose(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.createElement(Tag, _extends({}, tagRest, {
         key: tag,
         size: rest.size === 'lg' ? 'lg' : rest.size === 'xs' ? 'sm' : 'md',
@@ -572,47 +511,39 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }).filter(function (item) {
       return item !== null;
     });
-
     if ((tags.length > 0 || isControlled) && isFunction(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 = _extends({}, menuStyle, {
       left: left,
       top: top
     });
-
     var items = 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 = getDataGroupBy(items, groupBy, sort);
     } else if (typeof sort === 'function') {
       items = items.sort(sort(false));
     }
-
     if (disabledOptions) {
       return /*#__PURE__*/React.createElement(PickerOverlay, {
         ref: mergeRefs(overlayRef, speakerRef)
       });
     }
-
     var menu = items.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
@@ -626,7 +557,8 @@ var InputPicker = /*#__PURE__*/React.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: !isUndefined(groupBy),
@@ -648,32 +580,28 @@ 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;
-
+    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 = !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];
-
+      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(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["disabled-options"])))] = disabledOptions, _merge));
   var searching = !!searchKeyword && open;
   var displaySearchInput = searchable && !disabled;
@@ -685,23 +613,21 @@ var InputPicker = /*#__PURE__*/React.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.createElement(Plaintext, _extends({
       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.createElement(PickerToggleTrigger, {
     pickerProps: pick(props, pickTriggerPropKeys),