rsuite 5.37.3 → 5.37.4

package/dist/rsuite.css

@@ -3345,7 +3345,7 @@ tbody.rs-anim-collapse.rs-anim-in {
 }
 .rs-calendar-table-cell-week-number {
   display: table-cell;
-  width: 1%;
+  min-width: 30px;
   padding: 1px;
   text-align: center;
   vertical-align: middle;
@@ -3380,14 +3380,14 @@ tbody.rs-anim-collapse.rs-anim-in {
 }
 .rs-calendar-month-dropdown-row {
   position: relative;
-  padding-left: 52px;
+  padding-left: 50px;
   padding-right: 12px;
   padding-top: 5px;
   padding-bottom: 5px;
 }
 .rs-calendar-month-dropdown-row:not(:last-child) {
-  border-bottom: 1px dotted #e5e5ea;
-  border-bottom: 1px dotted var(--rs-border-primary);
+  border-bottom: 1px dashed #e5e5ea;
+  border-bottom: 1px dashed var(--rs-border-primary);
 }
 .rs-calendar-month-dropdown-year {
   position: absolute;
@@ -3400,6 +3400,7 @@ tbody.rs-anim-collapse.rs-anim-in {
 }
 .rs-calendar-month-dropdown-list {
   display: block;
+  min-width: 200px;
 }
 .rs-calendar-month-dropdown-list::before,
 .rs-calendar-month-dropdown-list::after {
@@ -3412,7 +3413,6 @@ tbody.rs-anim-collapse.rs-anim-in {
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: left;
-  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -4244,6 +4244,8 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   top: 8px;
   right: 12px;
   padding: 3px;
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
 }
 .rs-picker-check-menu-items .rs-picker-menu-group.folded .rs-picker-menu-group-caret {
   -webkit-transform: rotate(90deg);
@@ -4482,16 +4484,24 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   max-width: 400px;
 }
 .rs-picker-menu .rs-calendar {
-  min-width: 246px;
+  min-width: 264px;
   display: block;
   margin: 0 auto;
 }
 .rs-picker-menu .rs-calendar-show-week-numbers {
   min-width: 278px;
 }
+.rs-picker-menu .rs-calendar-show-week-numbers .rs-calendar-body {
+  padding-left: 12px;
+  padding-right: 12px;
+}
 .rs-picker-menu .rs-calendar-header {
   width: 100%;
 }
+.rs-picker-menu .rs-calendar-body {
+  padding-left: 15px;
+  padding-right: 15px;
+}
 .rs-picker-menu .rs-calendar-table {
   width: unset;
 }
@@ -8166,11 +8176,11 @@ textarea.rs-input-sm {
   display: block;
   width: 100%;
   border: none;
+  outline: none;
   padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
-  position: absolute;
   z-index: 4;
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
@@ -8231,7 +8241,7 @@ textarea.rs-input-sm {
   top: 0;
   background: none;
   border: none;
-  padding: 10px 13px;
+  padding: 10px 12px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-addon.rs-input-group-btn {
   padding: 8px 13px;
@@ -8242,7 +8252,7 @@ textarea.rs-input-sm {
 .rs-input-group.rs-input-group-inside .rs-input-group-addon ~ .rs-auto-complete > input.rs-input,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon ~ .rs-form-control-wrapper > input.rs-input,
 .rs-input-group.rs-input-group-inside .rs-input-group-btn ~ .rs-form-control-wrapper > input.rs-input {
-  padding-left: 36px;
+  padding-left: 0;
   padding-right: 12px;
 }
 .rs-input-group.rs-input-group-inside input.rs-input ~ .rs-input-group-btn,
@@ -13030,6 +13040,8 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   top: 8px;
   right: 12px;
   padding: 3px;
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
 }
 .rs-picker-select-menu-items .rs-picker-menu-group.folded .rs-picker-menu-group-caret {
   -webkit-transform: rotate(90deg);

package/dist/rsuite.js

@@ -2952,7 +2952,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports[\"default\"] = exports.InputPickerContext = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\n\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\n\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\n\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\n\nvar _InputAutosize = _interopRequireDefault(__webpack_require__(/*! ./InputAutosize */ \"./src/InputPicker/InputAutosize.tsx\"));\n\nvar _InputSearch = _interopRequireDefault(__webpack_require__(/*! ./InputSearch */ \"./src/InputPicker/InputSearch.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2,\n    _templateObject3,\n    _templateObject4,\n    _templateObject5;\n\nvar InputPickerContext = /*#__PURE__*/_react.default.createContext({\n  tagProps: {},\n  trigger: 'Enter'\n});\n\nexports.InputPickerContext = InputPickerContext;\n\nvar InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      _props$cacheData = props.cacheData,\n      cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      _props$data = props.data,\n      controlledData = _props$data === void 0 ? [] : _props$data,\n      disabled = props.disabled,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      defaultValue = props.defaultValue,\n      _props$defaultOpen = props.defaultOpen,\n      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,\n      _props$disabledItemVa = props.disabledItemValues,\n      disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n      overrideLocale = props.locale,\n      toggleAs = props.toggleAs,\n      style = props.style,\n      _props$searchable = props.searchable,\n      searchable = _props$searchable === void 0 ? true : _props$searchable,\n      controlledOpen = props.open,\n      placeholder = props.placeholder,\n      groupBy = props.groupBy,\n      menuClassName = props.menuClassName,\n      menuStyle = props.menuStyle,\n      _props$menuAutoWidth = props.menuAutoWidth,\n      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n      _props$menuMaxHeight = props.menuMaxHeight,\n      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n      creatable = props.creatable,\n      shouldDisplayCreateOption = props.shouldDisplayCreateOption,\n      valueProp = props.value,\n      _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      virtualized = props.virtualized,\n      _props$labelKey = props.labelKey,\n      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n      listProps = props.listProps,\n      id = props.id,\n      tabIndex = props.tabIndex,\n      sort = props.sort,\n      renderMenu = props.renderMenu,\n      renderExtraFooter = props.renderExtraFooter,\n      renderValue = props.renderValue,\n      renderMenuItem = props.renderMenuItem,\n      renderMenuGroup = props.renderMenuGroup,\n      onEnter = props.onEnter,\n      onEntered = props.onEntered,\n      onExit = props.onExit,\n      onExited = props.onExited,\n      onChange = props.onChange,\n      onClean = props.onClean,\n      onCreate = props.onCreate,\n      onSearch = props.onSearch,\n      onSelect = props.onSelect,\n      onOpen = props.onOpen,\n      onClose = props.onClose,\n      onBlur = props.onBlur,\n      onFocus = props.onFocus,\n      searchBy = props.searchBy,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      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\"]);\n\n  var _useContext = (0, _react.useContext)(InputPickerContext),\n      multi = _useContext.multi,\n      tagProps = _useContext.tagProps,\n      trigger = _useContext.trigger,\n      disabledOptions = _useContext.disabledOptions;\n\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var inputRef = (0, _react.useRef)();\n  var listRef = (0, _react.useRef)(null);\n\n  var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),\n      locale = _useCustom.locale;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useState = (0, _react.useState)(controlledData),\n      uncontrolledData = _useState[0],\n      setData = _useState[1];\n\n  var _useState2 = (0, _react.useState)(100),\n      maxWidth = _useState2[0],\n      setMaxWidth = _useState2[1];\n\n  var _useState3 = (0, _react.useState)([]),\n      newData = _useState3[0],\n      setNewData = _useState3[1];\n\n  var _useState4 = (0, _react.useState)(defaultOpen),\n      uncontrolledOpen = _useState4[0],\n      setOpen = _useState4[1];\n\n  var open = (0, _isUndefined.default)(controlledOpen) ? uncontrolledOpen : controlledOpen;\n  var getAllData = (0, _react.useCallback)(function () {\n    return [].concat(uncontrolledData, newData);\n  }, [uncontrolledData, newData]);\n  var getAllDataAndCache = (0, _react.useCallback)(function () {\n    return [].concat(getAllData(), cacheData);\n  }, [getAllData, cacheData]);\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1],\n      isControlled = _useControlled[2];\n\n  var cloneValue = (0, _react.useCallback)(function () {\n    return multi ? (0, _clone.default)(value) || [] : value;\n  }, [multi, value]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n  }, [triggerRef]); // Used to hover the focuse item  when trigger `onKeydown`\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {\n    data: getAllDataAndCache(),\n    valueKey: valueKey,\n    target: function target() {\n      return overlayRef.current;\n    }\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n      onKeyDown = _useFocusItemValue.onKeyDown;\n\n  var handleSearchCallback = (0, _react.useCallback)(function (searchKeyword, filteredData, event) {\n    var _filteredData$;\n\n    // The first option after filtering is the focus.\n    setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  }, [disabledOptions, setFocusItemValue, valueKey, onSearch]); // Use search keywords to filter options.\n\n  var _useSearch = (0, _Picker.useSearch)(getAllData(), {\n    labelKey: labelKey,\n    searchBy: searchBy,\n    callback: handleSearchCallback\n  }),\n      searchKeyword = _useSearch.searchKeyword,\n      resetSearch = _useSearch.resetSearch,\n      checkShouldDisplay = _useSearch.checkShouldDisplay,\n      handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes\n\n\n  (0, _react.useEffect)(function () {\n    if (controlledData && !(0, _shallowEqual.default)(controlledData, uncontrolledData)) {\n      var _controlledData$;\n\n      setData(controlledData);\n      setNewData([]);\n      setFocusItemValue(controlledData === null || controlledData === void 0 ? void 0 : (_controlledData$ = controlledData[0]) === null || _controlledData$ === void 0 ? void 0 : _controlledData$[valueKey]);\n    }\n  }, [setFocusItemValue, controlledData, uncontrolledData, valueKey]);\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current2;\n\n    // In multiple selection, you need to set a maximum width for the input.\n    if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {\n      setMaxWidth((0, _getWidth.default)(triggerRef.current.root));\n    }\n  }, []); // Update the position of the menu when the search keyword and value change\n\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current3, _triggerRef$current3$;\n\n    (_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);\n  }, [searchKeyword, value]);\n\n  var getDateItem = function getDateItem(value) {\n    // Find active `MenuItem` by `value`\n    var allData = getAllDataAndCache();\n    var activeItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\n    });\n    var itemNode = placeholder;\n\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n\n    return {\n      isValid: !!activeItem,\n      activeItem: activeItem,\n      itemNode: itemNode\n    };\n  };\n\n  var getInput = (0, _react.useCallback)(function () {\n    var _inputRef$current;\n\n    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;\n  }, [inputRef, multi]);\n  var focusInput = (0, _react.useCallback)(function () {\n    var _getInput;\n\n    return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();\n  }, [getInput]);\n  var blurInput = (0, _react.useCallback)(function () {\n    var _getInput2;\n\n    return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();\n  }, [getInput]);\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n\n  var createOption = (0, _react.useCallback)(function (value) {\n    var _ref2;\n\n    if (groupBy) {\n      var _ref;\n\n      return _ref = {\n        create: true\n      }, _ref[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _ref[valueKey] = value, _ref[labelKey] = value, _ref;\n    }\n\n    return _ref2 = {\n      create: true\n    }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;\n  }, [groupBy, valueKey, labelKey, locale]);\n  var handleChange = (0, _react.useCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange]);\n  var handleRemoveItemByTag = (0, _react.useCallback)(function (tag, event) {\n    event.stopPropagation();\n    var val = cloneValue();\n    (0, _remove.default)(val, function (itemVal) {\n      return (0, _shallowEqual.default)(itemVal, tag);\n    });\n    setValue(val);\n    handleChange(val, event);\n  }, [setValue, cloneValue, handleChange]);\n  var handleSelect = (0, _react.useCallback)(function (value, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  }, [creatable, newData, onSelect, onCreate]);\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n\n  var handleSelectItem = function handleSelectItem(value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    resetSearch();\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  };\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n\n\n  var handleCheckTag = function handleCheckTag(nextItemValue, item, event, checked) {\n    var val = cloneValue();\n\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, nextItemValue);\n      });\n    }\n\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focusInput();\n  };\n\n  var handleTagKeyPress = (0, _react.useCallback)(function (event) {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n\n    var val = cloneValue();\n    var data = getAllData();\n\n    if (!focusItemValue || !data) {\n      return;\n    } // If the value is disabled in this option, it is returned.\n\n\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n\n    if (!val.some(function (v) {\n      return (0, _shallowEqual.default)(v, focusItemValue);\n    })) {\n      val.push(focusItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, focusItemValue);\n      });\n    }\n\n    var focusItem = data.find(function (item) {\n      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);\n    });\n\n    if (!focusItem) {\n      focusItem = createOption(focusItemValue);\n    }\n\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, resetSearch, handleSelect, handleChange, valueKey, createOption]);\n  var handleMenuItemKeyPress = (0, _react.useCallback)(function (event) {\n    if (!focusItemValue || !controlledData) {\n      return;\n    } // If the value is disabled in this option, it is returned.\n\n\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    } // Find active `MenuItem` by `value`\n\n\n    var allData = getAllData();\n    var focusItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n    }); // FIXME Bad state flow\n\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n\n    setValue(focusItemValue);\n    resetSearch();\n\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n\n    handleChange(focusItemValue, event);\n    handleClose();\n  }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, resetSearch, createOption, getAllData, handleChange, handleSelect]);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    listRef: listRef\n  });\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n\n  var removeLastItem = (0, _react.useCallback)(function (event) {\n    var target = event === null || event === void 0 ? void 0 : event.target;\n\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focusInput();\n      return;\n    }\n\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n\n    var val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  }, [setValue, focusInput, handleChange, cloneValue]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || searchKeyword !== '') {\n      return;\n    }\n\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n  }, [disabled, searchKeyword, setValue, setFocusItemValue, resetSearch, multi, onClean, handleChange]);\n  var events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  var handleKeyPress = (0, _react.useCallback)(function (event) {\n    // When typing a space, create a tag.\n    if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    } // When typing a comma, create a tag.\n\n\n    if ((0, _utils.isOneOf)('Comma', trigger) && event.key === _utils.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  }, [handleTagKeyPress, trigger]);\n\n  if (multi) {\n    if ((0, _utils.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef\n  }, events, rest));\n  var handleExited = (0, _react.useCallback)(function () {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    resetSearch();\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [setFocusItemValue, resetSearch, onClose, value, multi]);\n  var handleFocus = (0, _react.useCallback)(function () {\n    if (!readOnly) {\n      var _triggerRef$current4;\n\n      setOpen(true);\n      (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();\n    }\n  }, [readOnly]);\n  var handleBlur = (0, _react.useCallback)(function () {\n    setOpen(false);\n  }, []);\n  var handleEnter = (0, _react.useCallback)(function () {\n    focusInput();\n    setOpen(true);\n  }, [focusInput]);\n  var handleExit = (0, _react.useCallback)(function () {\n    blurInput();\n    setOpen(false);\n  }, [blurInput]);\n\n  var renderDropdownMenuItem = function renderDropdownMenuItem(label, item) {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 614,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)(locale.createOption, label)) : label;\n    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;\n  };\n\n  var checkValue = function checkValue() {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n\n    var dataItem = getDateItem(value);\n    var itemNode = dataItem.itemNode;\n\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n\n    return {\n      isValid: dataItem.isValid,\n      itemNode: itemNode\n    };\n  };\n\n  var renderMultiValue = function renderMultiValue() {\n    if (!multi) {\n      return null;\n    }\n\n    var _tagProps$closable = tagProps.closable,\n        closable = _tagProps$closable === void 0 ? true : _tagProps$closable,\n        onClose = tagProps.onClose,\n        tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, [\"closable\", \"onClose\"]);\n    var tags = value || [];\n    var items = [];\n    var tagElements = tags.map(function (tag) {\n      var _getDateItem = getDateItem(tag),\n          isValid = _getDateItem.isValid,\n          itemNode = _getDateItem.itemNode,\n          activeItem = _getDateItem.activeItem;\n\n      items.push(activeItem);\n\n      if (!isValid) {\n        return null;\n      }\n\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({}, tagRest, {\n        key: tag,\n        size: rest.size === 'lg' ? 'lg' : rest.size === 'xs' ? 'sm' : 'md',\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 659,\n          columnNumber: 13\n        }\n      }), itemNode);\n    }).filter(function (item) {\n      return item !== null;\n    });\n\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n\n    return tagElements;\n  };\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);\n\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {\n      return item[valueKey] === searchKeyword;\n    }))) {\n      items = [].concat(items, [createOption(searchKeyword)]);\n    } // Create a tree structure data when set `groupBy`\n\n\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n        ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 705,\n          columnNumber: 16\n        }\n      });\n    }\n\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {\n      id: id ? id + \"-listbox\" : undefined,\n      listProps: listProps,\n      listRef: listRef,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      dropdownMenuItemClassPrefix: multi ? undefined : menuClassPrefix + \"-item\",\n      dropdownMenuItemAs: multi ? _Picker.DropdownMenuCheckItem : _Picker.DropdownMenuItem,\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: menuMaxHeight,\n      data: items // FIXME-Doma\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any\n      ,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderDropdownMenuItem,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 709,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 733,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 737,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  var _checkValue = checkValue(),\n      isValid = _checkValue.isValid,\n      itemNode = _checkValue.itemNode;\n\n  var tagElements = renderMultiValue();\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   * 3.If renderValue returns null or undefined, hasValue is false.\n   */\n\n  var hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  var hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;\n\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n    classPrefix: classPrefix,\n    appearance: appearance,\n    hasValue: hasValue,\n    name: 'input',\n    cleanable: cleanable\n  })),\n      pickerClasses = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1];\n\n  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));\n  var searching = !!searchKeyword && open;\n  var displaySearchInput = searchable && !disabled;\n  var inputProps = multi ? {\n    inputStyle: {\n      maxWidth: maxWidth - 63\n    },\n    as: _InputAutosize.default\n  } : {\n    as: 'input'\n  };\n\n  if (plaintext) {\n    var plaintextProps = {}; // TagPicker has -6px margin-left on the plaintext wrapper\n    // for fixing margin-left on tags from 2nd line on\n\n    if (multi && hasValue) {\n      plaintextProps.style = {\n        marginLeft: -6\n      };\n    }\n\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: targetRef\n    }, plaintextProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 797,\n        columnNumber: 9\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n\n  var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    trigger: \"active\",\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(onEntered, onOpen),\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 806,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focusInput,\n    onKeyDown: onPickerKeyDown,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 817,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: targetRef,\n    as: toggleAs,\n    tabIndex: undefined,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    caret: !disabledOptions,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 823,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)([\"tag-wrapper\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 845,\n      columnNumber: 13\n    }\n  }, tagElements, displaySearchInput && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {\n    tabIndex: tabIndex,\n    readOnly: readOnly,\n    onBlur: (0, _utils.createChainedFunction)(handleBlur, onBlur),\n    onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),\n    inputRef: inputRef,\n    onChange: handleSearch,\n    value: open ? searchKeyword : '',\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 848,\n      columnNumber: 17\n    }\n  })))));\n});\n\nInputPicker.displayName = 'InputPicker';\nInputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  cacheData: _propTypes.default.array,\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  searchable: _propTypes.default.bool,\n  creatable: _propTypes.default.bool,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onCreate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = InputPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports[\"default\"] = exports.InputPickerContext = void 0;\n\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\n\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\n\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\n\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/Plaintext/index.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/utils/getDataGroupBy.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\n\nvar _InputAutosize = _interopRequireDefault(__webpack_require__(/*! ./InputAutosize */ \"./src/InputPicker/InputAutosize.tsx\"));\n\nvar _InputSearch = _interopRequireDefault(__webpack_require__(/*! ./InputSearch */ \"./src/InputPicker/InputSearch.tsx\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\",\n    _this = void 0,\n    _templateObject,\n    _templateObject2,\n    _templateObject3,\n    _templateObject4,\n    _templateObject5;\n\nvar InputPickerContext = /*#__PURE__*/_react.default.createContext({\n  tagProps: {},\n  trigger: 'Enter'\n});\n\nexports.InputPickerContext = InputPickerContext;\n\nvar InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _merge;\n\n  var _props$as = props.as,\n      Component = _props$as === void 0 ? 'div' : _props$as,\n      _props$appearance = props.appearance,\n      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n      _props$cleanable = props.cleanable,\n      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n      _props$cacheData = props.cacheData,\n      cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,\n      _props$classPrefix = props.classPrefix,\n      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n      _props$data = props.data,\n      controlledData = _props$data === void 0 ? [] : _props$data,\n      disabled = props.disabled,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      defaultValue = props.defaultValue,\n      _props$defaultOpen = props.defaultOpen,\n      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,\n      _props$disabledItemVa = props.disabledItemValues,\n      disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,\n      overrideLocale = props.locale,\n      toggleAs = props.toggleAs,\n      style = props.style,\n      _props$searchable = props.searchable,\n      searchable = _props$searchable === void 0 ? true : _props$searchable,\n      controlledOpen = props.open,\n      placeholder = props.placeholder,\n      groupBy = props.groupBy,\n      menuClassName = props.menuClassName,\n      menuStyle = props.menuStyle,\n      _props$menuAutoWidth = props.menuAutoWidth,\n      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n      _props$menuMaxHeight = props.menuMaxHeight,\n      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n      creatable = props.creatable,\n      shouldDisplayCreateOption = props.shouldDisplayCreateOption,\n      valueProp = props.value,\n      _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      virtualized = props.virtualized,\n      _props$labelKey = props.labelKey,\n      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n      listProps = props.listProps,\n      id = props.id,\n      tabIndex = props.tabIndex,\n      sort = props.sort,\n      renderMenu = props.renderMenu,\n      renderExtraFooter = props.renderExtraFooter,\n      renderValue = props.renderValue,\n      renderMenuItem = props.renderMenuItem,\n      renderMenuGroup = props.renderMenuGroup,\n      onEnter = props.onEnter,\n      onEntered = props.onEntered,\n      onExit = props.onExit,\n      onExited = props.onExited,\n      onChange = props.onChange,\n      onClean = props.onClean,\n      onCreate = props.onCreate,\n      onSearch = props.onSearch,\n      onSelect = props.onSelect,\n      onOpen = props.onOpen,\n      onClose = props.onClose,\n      onBlur = props.onBlur,\n      onFocus = props.onFocus,\n      searchBy = props.searchBy,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      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\"]);\n\n  var _useContext = (0, _react.useContext)(InputPickerContext),\n      multi = _useContext.multi,\n      tagProps = _useContext.tagProps,\n      trigger = _useContext.trigger,\n      disabledOptions = _useContext.disabledOptions;\n\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n\n  var overlayRef = (0, _react.useRef)(null);\n  var targetRef = (0, _react.useRef)(null);\n  var triggerRef = (0, _react.useRef)(null);\n  var inputRef = (0, _react.useRef)();\n  var listRef = (0, _react.useRef)(null);\n\n  var _useCustom = (0, _utils.useCustom)(['Picker', 'InputPicker'], overrideLocale),\n      locale = _useCustom.locale;\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      prefix = _useClassNames.prefix,\n      merge = _useClassNames.merge;\n\n  var _useState = (0, _react.useState)(controlledData),\n      uncontrolledData = _useState[0],\n      setData = _useState[1];\n\n  var _useState2 = (0, _react.useState)(100),\n      maxWidth = _useState2[0],\n      setMaxWidth = _useState2[1];\n\n  var _useState3 = (0, _react.useState)([]),\n      newData = _useState3[0],\n      setNewData = _useState3[1];\n\n  var _useState4 = (0, _react.useState)(defaultOpen),\n      uncontrolledOpen = _useState4[0],\n      setOpen = _useState4[1];\n\n  var open = (0, _isUndefined.default)(controlledOpen) ? uncontrolledOpen : controlledOpen;\n  var getAllData = (0, _react.useCallback)(function () {\n    return [].concat(uncontrolledData, newData);\n  }, [uncontrolledData, newData]);\n  var getAllDataAndCache = (0, _react.useCallback)(function () {\n    return [].concat(getAllData(), cacheData);\n  }, [getAllData, cacheData]);\n\n  var _useControlled = (0, _utils.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue),\n      value = _useControlled[0],\n      setValue = _useControlled[1],\n      isControlled = _useControlled[2];\n\n  var cloneValue = (0, _react.useCallback)(function () {\n    return multi ? (0, _clone.default)(value) || [] : value;\n  }, [multi, value]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();\n  }, [triggerRef]); // Used to hover the focuse item  when trigger `onKeydown`\n\n  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {\n    data: getAllDataAndCache(),\n    valueKey: valueKey,\n    target: function target() {\n      return overlayRef.current;\n    }\n  }),\n      focusItemValue = _useFocusItemValue.focusItemValue,\n      setFocusItemValue = _useFocusItemValue.setFocusItemValue,\n      onKeyDown = _useFocusItemValue.onKeyDown;\n\n  var handleSearchCallback = (0, _react.useCallback)(function (searchKeyword, filteredData, event) {\n    var _filteredData$;\n\n    // The first option after filtering is the focus.\n    setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);\n    onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n  }, [disabledOptions, setFocusItemValue, valueKey, onSearch]); // Use search keywords to filter options.\n\n  var _useSearch = (0, _Picker.useSearch)(getAllData(), {\n    labelKey: labelKey,\n    searchBy: searchBy,\n    callback: handleSearchCallback\n  }),\n      searchKeyword = _useSearch.searchKeyword,\n      resetSearch = _useSearch.resetSearch,\n      checkShouldDisplay = _useSearch.checkShouldDisplay,\n      handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes\n\n\n  (0, _react.useEffect)(function () {\n    if (controlledData && !(0, _shallowEqual.default)(controlledData, uncontrolledData)) {\n      var _controlledData$;\n\n      setData(controlledData);\n      setNewData([]);\n      setFocusItemValue(controlledData === null || controlledData === void 0 ? void 0 : (_controlledData$ = controlledData[0]) === null || _controlledData$ === void 0 ? void 0 : _controlledData$[valueKey]);\n    }\n  }, [setFocusItemValue, controlledData, uncontrolledData, valueKey]);\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current2;\n\n    // In multiple selection, you need to set a maximum width for the input.\n    if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {\n      setMaxWidth((0, _getWidth.default)(triggerRef.current.root));\n    }\n  }, []); // Update the position of the menu when the search keyword and value change\n\n  (0, _react.useEffect)(function () {\n    var _triggerRef$current3, _triggerRef$current3$;\n\n    (_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);\n  }, [searchKeyword, value]);\n\n  var getDateItem = function getDateItem(value) {\n    // Find active `MenuItem` by `value`\n    var allData = getAllDataAndCache();\n    var activeItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\n    });\n    var itemNode = placeholder;\n\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n\n    return {\n      isValid: !!activeItem,\n      activeItem: activeItem,\n      itemNode: itemNode\n    };\n  };\n\n  var getInput = (0, _react.useCallback)(function () {\n    var _inputRef$current;\n\n    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;\n  }, [inputRef, multi]);\n  var focusInput = (0, _react.useCallback)(function () {\n    var _getInput;\n\n    return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();\n  }, [getInput]);\n  var blurInput = (0, _react.useCallback)(function () {\n    var _getInput2;\n\n    return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();\n  }, [getInput]);\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n\n  var createOption = (0, _react.useCallback)(function (value) {\n    var _ref2;\n\n    if (groupBy) {\n      var _ref;\n\n      return _ref = {\n        create: true\n      }, _ref[groupBy] = locale === null || locale === void 0 ? void 0 : locale.newItem, _ref[valueKey] = value, _ref[labelKey] = value, _ref;\n    }\n\n    return _ref2 = {\n      create: true\n    }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;\n  }, [groupBy, valueKey, labelKey, locale]);\n  var handleChange = (0, _react.useCallback)(function (value, event) {\n    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);\n  }, [onChange]);\n  var handleRemoveItemByTag = (0, _react.useCallback)(function (tag, event) {\n    event.stopPropagation();\n    var val = cloneValue();\n    (0, _remove.default)(val, function (itemVal) {\n      return (0, _shallowEqual.default)(itemVal, tag);\n    });\n    setValue(val);\n    handleChange(val, event);\n  }, [setValue, cloneValue, handleChange]);\n  var handleSelect = (0, _react.useCallback)(function (value, item, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);\n\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  }, [creatable, newData, onSelect, onCreate]);\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n\n  var handleSelectItem = function handleSelectItem(value, item, event) {\n    setValue(value);\n    setFocusItemValue(value);\n    resetSearch();\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  };\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n\n\n  var handleCheckTag = function handleCheckTag(nextItemValue, item, event, checked) {\n    var val = cloneValue();\n\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, nextItemValue);\n      });\n    }\n\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focusInput();\n  };\n\n  var handleTagKeyPress = (0, _react.useCallback)(function (event) {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n\n    var val = cloneValue();\n    var data = getAllData();\n\n    if (!focusItemValue || !data) {\n      return;\n    } // If the value is disabled in this option, it is returned.\n\n\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    }\n\n    if (!val.some(function (v) {\n      return (0, _shallowEqual.default)(v, focusItemValue);\n    })) {\n      val.push(focusItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, function (itemVal) {\n        return (0, _shallowEqual.default)(itemVal, focusItemValue);\n      });\n    }\n\n    var focusItem = data.find(function (item) {\n      return (0, _shallowEqual.default)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue);\n    });\n\n    if (!focusItem) {\n      focusItem = createOption(focusItemValue);\n    }\n\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, resetSearch, handleSelect, handleChange, valueKey, createOption]);\n  var handleMenuItemKeyPress = (0, _react.useCallback)(function (event) {\n    if (!focusItemValue || !controlledData) {\n      return;\n    } // If the value is disabled in this option, it is returned.\n\n\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(function (item) {\n      return item === focusItemValue;\n    })) {\n      return;\n    } // Find active `MenuItem` by `value`\n\n\n    var allData = getAllData();\n    var focusItem = allData.find(function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n    }); // FIXME Bad state flow\n\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n\n    setValue(focusItemValue);\n    resetSearch();\n\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n\n    handleChange(focusItemValue, event);\n    handleClose();\n  }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, resetSearch, createOption, getAllData, handleChange, handleSelect]);\n  (0, _Picker.usePublicMethods)(ref, {\n    triggerRef: triggerRef,\n    overlayRef: overlayRef,\n    targetRef: targetRef,\n    listRef: listRef\n  });\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n\n  var removeLastItem = (0, _react.useCallback)(function (event) {\n    var target = event === null || event === void 0 ? void 0 : event.target;\n\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focusInput();\n      return;\n    }\n\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n\n    var val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  }, [setValue, focusInput, handleChange, cloneValue]);\n  var handleClean = (0, _react.useCallback)(function (event) {\n    if (disabled || searchKeyword !== '') {\n      return;\n    }\n\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n  }, [disabled, searchKeyword, setValue, setFocusItemValue, resetSearch, multi, onClean, handleChange]);\n  var events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  var handleKeyPress = (0, _react.useCallback)(function (event) {\n    // When typing a space, create a tag.\n    if ((0, _utils.isOneOf)('Space', trigger) && event.key === _utils.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    } // When typing a comma, create a tag.\n\n\n    if ((0, _utils.isOneOf)('Comma', trigger) && event.key === _utils.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  }, [handleTagKeyPress, trigger]);\n\n  if (multi) {\n    if ((0, _utils.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n\n  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    triggerRef: triggerRef,\n    targetRef: targetRef,\n    overlayRef: overlayRef\n  }, events, rest));\n  var handleExited = (0, _react.useCallback)(function () {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    resetSearch();\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [setFocusItemValue, resetSearch, onClose, value, multi]);\n  var handleFocus = (0, _react.useCallback)(function () {\n    if (!readOnly) {\n      var _triggerRef$current4;\n\n      setOpen(true);\n      (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();\n    }\n  }, [readOnly]);\n  var handleEnter = (0, _react.useCallback)(function () {\n    focusInput();\n    setOpen(true);\n  }, [focusInput]);\n  var handleExit = (0, _react.useCallback)(function () {\n    blurInput();\n    setOpen(false);\n  }, [blurInput]);\n\n  var renderDropdownMenuItem = function renderDropdownMenuItem(label, item) {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    var newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 610,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)(locale.createOption, label)) : label;\n    return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;\n  };\n\n  var checkValue = function checkValue() {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n\n    var dataItem = getDateItem(value);\n    var itemNode = dataItem.itemNode;\n\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n\n    return {\n      isValid: dataItem.isValid,\n      itemNode: itemNode\n    };\n  };\n\n  var renderMultiValue = function renderMultiValue() {\n    if (!multi) {\n      return null;\n    }\n\n    var _tagProps$closable = tagProps.closable,\n        closable = _tagProps$closable === void 0 ? true : _tagProps$closable,\n        onClose = tagProps.onClose,\n        tagRest = (0, _objectWithoutPropertiesLoose2.default)(tagProps, [\"closable\", \"onClose\"]);\n    var tags = value || [];\n    var items = [];\n    var tagElements = tags.map(function (tag) {\n      var _getDateItem = getDateItem(tag),\n          isValid = _getDateItem.isValid,\n          itemNode = _getDateItem.itemNode,\n          activeItem = _getDateItem.activeItem;\n\n      items.push(activeItem);\n\n      if (!isValid) {\n        return null;\n      }\n\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({}, tagRest, {\n        key: tag,\n        size: rest.size === 'lg' ? 'lg' : rest.size === 'xs' ? 'sm' : 'md',\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 655,\n          columnNumber: 13\n        }\n      }), itemNode);\n    }).filter(function (item) {\n      return item !== null;\n    });\n\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n\n    return tagElements;\n  };\n\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n        top = positionProps.top,\n        className = positionProps.className;\n    var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);\n\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {\n      return item[valueKey] === searchKeyword;\n    }))) {\n      items = [].concat(items, [createOption(searchKeyword)]);\n    } // Create a tree structure data when set `groupBy`\n\n\n    if (groupBy) {\n      items = (0, _getDataGroupBy.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n        ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 701,\n          columnNumber: 16\n        }\n      });\n    }\n\n    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {\n      id: id ? id + \"-listbox\" : undefined,\n      listProps: listProps,\n      listRef: listRef,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      dropdownMenuItemClassPrefix: multi ? undefined : menuClassPrefix + \"-item\",\n      dropdownMenuItemAs: multi ? _Picker.DropdownMenuCheckItem : _Picker.DropdownMenuItem,\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: menuMaxHeight,\n      data: items // FIXME-Doma\n      // `group` is redundant so long as `groupBy` exists\n      ,\n      group: !(0, _isUndefined.default)(groupBy),\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any\n      ,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderDropdownMenuItem,\n      virtualized: virtualized,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 705,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"none\"]))),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 729,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {\n      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 733,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  var _checkValue = checkValue(),\n      isValid = _checkValue.isValid,\n      itemNode = _checkValue.itemNode;\n\n  var tagElements = renderMultiValue();\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   * 3.If renderValue returns null or undefined, hasValue is false.\n   */\n\n  var hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  var hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;\n\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n    classPrefix: classPrefix,\n    appearance: appearance,\n    hasValue: hasValue,\n    name: 'input',\n    cleanable: cleanable\n  })),\n      pickerClasses = _usePickerClassName[0],\n      usedClassNamePropKeys = _usePickerClassName[1];\n\n  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));\n  var searching = !!searchKeyword && open;\n  var displaySearchInput = searchable && !disabled;\n  var inputProps = multi ? {\n    inputStyle: {\n      maxWidth: maxWidth - 63\n    },\n    as: _InputAutosize.default\n  } : {\n    as: 'input'\n  };\n\n  if (plaintext) {\n    var plaintextProps = {}; // TagPicker has -6px margin-left on the plaintext wrapper\n    // for fixing margin-left on tags from 2nd line on\n\n    if (multi && hasValue) {\n      plaintextProps.style = {\n        marginLeft: -6\n      };\n    }\n\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: targetRef\n    }, plaintextProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 793,\n        columnNumber: 9\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n\n  var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    trigger: \"active\",\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(onEntered, onOpen),\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderDropdownMenu,\n    placement: placement,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 802,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focusInput,\n    onKeyDown: onPickerKeyDown,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 813,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    id: id,\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: targetRef,\n    as: toggleAs,\n    tabIndex: undefined,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    caret: !disabledOptions,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 819,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)([\"tag-wrapper\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 841,\n      columnNumber: 13\n    }\n  }, tagElements, displaySearchInput && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {\n    tabIndex: tabIndex,\n    readOnly: readOnly,\n    onBlur: onBlur,\n    onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),\n    inputRef: inputRef,\n    onChange: handleSearch,\n    value: open ? searchKeyword : '',\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 844,\n      columnNumber: 17\n    }\n  })))));\n});\n\nInputPicker.displayName = 'InputPicker';\nInputPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: _propTypes.default.oneOf(['default', 'subtle']),\n  cacheData: _propTypes.default.array,\n  menuAutoWidth: _propTypes.default.bool,\n  menuMaxHeight: _propTypes.default.number,\n  searchable: _propTypes.default.bool,\n  creatable: _propTypes.default.bool,\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onCreate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nvar _default = InputPicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
 
 /***/ }),
 
@@ -3667,7 +3667,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports[\"default\"] = exports.OverlayCloseCause = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\n\nvar _Overlay = _interopRequireDefault(__webpack_require__(/*! ./Overlay */ \"./src/Overlay/Overlay.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _isOneOf = _interopRequireDefault(__webpack_require__(/*! ../utils/isOneOf */ \"./src/utils/isOneOf.ts\"));\n\nvar _OverlayContext = _interopRequireDefault(__webpack_require__(/*! ./OverlayContext */ \"./src/Overlay/OverlayContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Overlay/OverlayTrigger.tsx\",\n    _this = void 0;\n\nfunction mergeEvents(events, props) {\n  if (events === void 0) {\n    events = {};\n  }\n\n  if (props === void 0) {\n    props = {};\n  }\n\n  var nextEvents = {};\n  Object.keys(events).forEach(function (eventName) {\n    if (events[eventName]) {\n      var _props;\n\n      nextEvents[eventName] = (0, _utils.createChainedFunction)(events[eventName], (_props = props) === null || _props === void 0 ? void 0 : _props[eventName]);\n    }\n  });\n  return nextEvents;\n}\n\n/**\n * The reason that triggers closing of an overlay\n * - Clicking outside of the overlay\n * - Direct invocation of triggerRef.current.close()\n */\nvar OverlayCloseCause;\n/**\n * Useful for mouseover and mouseout.\n * In order to resolve the node entering the mouseover element, a mouseout event and a mouseover event will be triggered.\n * https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave\n * @param handler\n * @param event\n */\n\nexports.OverlayCloseCause = OverlayCloseCause;\n\n(function (OverlayCloseCause) {\n  OverlayCloseCause[OverlayCloseCause[\"ClickOutside\"] = 0] = \"ClickOutside\";\n  OverlayCloseCause[OverlayCloseCause[\"ImperativeHandle\"] = 1] = \"ImperativeHandle\";\n})(OverlayCloseCause || (exports.OverlayCloseCause = OverlayCloseCause = {}));\n\nfunction onMouseEventHandler(handler, event, delay) {\n  var target = event.currentTarget;\n  var related = event.relatedTarget || (0, _get.default)(event, ['nativeEvent', 'toElement']);\n\n  if ((!related || related !== target) && !(0, _contains.default)(target, related)) {\n    handler(event, delay);\n  }\n}\n\nvar defaultTrigger = ['hover', 'focus'];\n\nvar OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useContext = (0, _react.useContext)(_OverlayContext.default),\n      overlayContainer = _useContext.overlayContainer;\n\n  var children = props.children,\n      _props$container = props.container,\n      container = _props$container === void 0 ? overlayContainer : _props$container,\n      controlId = props.controlId,\n      defaultOpen = props.defaultOpen,\n      _props$trigger = props.trigger,\n      trigger = _props$trigger === void 0 ? defaultTrigger : _props$trigger,\n      disabled = props.disabled,\n      followCursor = props.followCursor,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      openProp = props.open,\n      delay = props.delay,\n      delayOpenProp = props.delayOpen,\n      delayCloseProp = props.delayClose,\n      enterable = props.enterable,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      speaker = props.speaker,\n      _props$rootClose = props.rootClose,\n      rootClose = _props$rootClose === void 0 ? true : _props$rootClose,\n      onClick = props.onClick,\n      onMouseOver = props.onMouseOver,\n      onMouseMove = props.onMouseMove,\n      onMouseOut = props.onMouseOut,\n      onContextMenu = props.onContextMenu,\n      onFocus = props.onFocus,\n      onBlur = props.onBlur,\n      onClose = props.onClose,\n      onExited = props.onExited,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"children\", \"container\", \"controlId\", \"defaultOpen\", \"trigger\", \"disabled\", \"followCursor\", \"readOnly\", \"plaintext\", \"open\", \"delay\", \"delayOpen\", \"delayClose\", \"enterable\", \"placement\", \"speaker\", \"rootClose\", \"onClick\", \"onMouseOver\", \"onMouseMove\", \"onMouseOut\", \"onContextMenu\", \"onFocus\", \"onBlur\", \"onClose\", \"onExited\"]);\n\n  var _usePortal = (0, _utils.usePortal)({\n    container: container\n  }),\n      Portal = _usePortal.Portal,\n      containerElement = _usePortal.target;\n\n  var triggerRef = (0, _react.useRef)();\n  var overlayRef = (0, _react.useRef)();\n\n  var _useControlled = (0, _utils.useControlled)(openProp, defaultOpen),\n      open = _useControlled[0],\n      setOpen = _useControlled[1];\n\n  var _useState = (0, _react.useState)(null),\n      cursorPosition = _useState[0],\n      setCursorPosition = _useState[1]; // Delay the timer to close/open the overlay\n  // When the cursor moves from the trigger to the overlay, the overlay will be closed.\n  // In order to keep the overlay open, a timer is used to delay the closing.\n\n\n  var delayOpenTimer = (0, _react.useRef)(null);\n  var delayCloseTimer = (0, _react.useRef)(null);\n  var delayOpen = (0, _isNil.default)(delayOpenProp) ? delay : delayOpenProp;\n  var delayClose = (0, _isNil.default)(delayCloseProp) ? delay : delayCloseProp; // Whether the cursor is on the overlay\n\n  var isOnOverlay = (0, _react.useRef)(false); // Whether the cursor is on the trigger\n\n  var isOnTrigger = (0, _react.useRef)(false);\n  (0, _react.useEffect)(function () {\n    return function () {\n      if (!(0, _isNil.default)(delayOpenTimer.current)) {\n        clearTimeout(delayOpenTimer.current);\n      }\n\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n      }\n    };\n  }, []);\n  var handleOpen = (0, _react.useCallback)(function (delay) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayOpen : delay;\n\n    if (ms && typeof ms === 'number') {\n      return delayOpenTimer.current = setTimeout(function () {\n        delayOpenTimer.current = null;\n        setOpen(true);\n      }, ms);\n    }\n\n    setOpen(true);\n  }, [delayOpen, setOpen]);\n  var handleClose = (0, _react.useCallback)(function (delay, callback) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayClose : delay;\n\n    if (ms && typeof ms === 'number') {\n      return delayCloseTimer.current = setTimeout(function () {\n        delayCloseTimer.current = null;\n        setOpen(false);\n        callback === null || callback === void 0 ? void 0 : callback();\n      }, ms);\n    }\n\n    setOpen(false);\n    callback === null || callback === void 0 ? void 0 : callback();\n  }, [delayClose, setOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setCursorPosition(null);\n  }, []);\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      get root() {\n        return triggerRef.current;\n      },\n\n      get overlay() {\n        var _overlayRef$current;\n\n        return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.child;\n      },\n\n      open: handleOpen,\n      close: function close(delay) {\n        return handleClose(delay, function () {\n          return onClose === null || onClose === void 0 ? void 0 : onClose(OverlayCloseCause.ImperativeHandle);\n        });\n      },\n      updatePosition: function updatePosition() {\n        var _overlayRef$current2, _overlayRef$current2$;\n\n        (_overlayRef$current2 = overlayRef.current) === null || _overlayRef$current2 === void 0 ? void 0 : (_overlayRef$current2$ = _overlayRef$current2.updatePosition) === null || _overlayRef$current2$ === void 0 ? void 0 : _overlayRef$current2$.call(_overlayRef$current2);\n      }\n    };\n  });\n  /**\n   * Close after the cursor leaves.\n   */\n\n  var handleCloseWhenLeave = (0, _react.useCallback)(function () {\n    // When the cursor is not on the overlay and not on the trigger, it is closed.\n    if (!isOnOverlay.current && !isOnTrigger.current) {\n      handleClose();\n    }\n  }, [handleClose]);\n  /**\n   * Toggle open and closed state.\n   */\n\n  var handleOpenState = (0, _react.useCallback)(function () {\n    if (open) {\n      handleCloseWhenLeave();\n    } else {\n      handleOpen();\n    }\n  }, [open, handleCloseWhenLeave, handleOpen]);\n  var handleDelayedOpen = (0, _react.useCallback)(function () {\n    if (!enterable) {\n      return handleOpen();\n    }\n\n    isOnTrigger.current = true;\n\n    if (!(0, _isNil.default)(delayCloseTimer.current)) {\n      clearTimeout(delayCloseTimer.current);\n      delayCloseTimer.current = null;\n      return handleOpen();\n    }\n\n    if (open) {\n      return;\n    }\n\n    handleOpen();\n  }, [enterable, open, handleOpen]);\n  var handleDelayedClose = (0, _react.useCallback)(function () {\n    if (!enterable) {\n      handleClose();\n    }\n\n    isOnTrigger.current = false;\n\n    if (!(0, _isNil.default)(delayOpenTimer.current)) {\n      clearTimeout(delayOpenTimer.current);\n      delayOpenTimer.current = null;\n      return;\n    }\n\n    if (!open || !(0, _isNil.default)(delayCloseTimer.current)) {\n      return;\n    }\n\n    delayCloseTimer.current = setTimeout(function () {\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n        delayCloseTimer.current = null;\n      }\n\n      handleCloseWhenLeave();\n    }, 200);\n  }, [enterable, open, handleClose, handleCloseWhenLeave]);\n  var handleSpeakerMouseEnter = (0, _react.useCallback)(function () {\n    isOnOverlay.current = true;\n  }, []);\n  var handleSpeakerMouseLeave = (0, _react.useCallback)(function () {\n    isOnOverlay.current = false;\n\n    if (!(0, _isOneOf.default)('click', trigger) && !(0, _isOneOf.default)('contextMenu', trigger) && !(0, _isOneOf.default)('active', trigger)) {\n      handleCloseWhenLeave();\n    }\n  }, [handleCloseWhenLeave, trigger]);\n  var handledMoveOverlay = (0, _react.useCallback)(function (event) {\n    setCursorPosition(function () {\n      return {\n        top: event.pageY,\n        left: event.pageX,\n        clientTop: event.clientX,\n        clientLeft: event.clientY\n      };\n    });\n  }, []);\n  var preventDefault = (0, _react.useCallback)(function (event) {\n    event.preventDefault();\n  }, []);\n  var triggerEvents = (0, _react.useMemo)(function () {\n    // Pass events by props\n    var events = {\n      onClick: onClick,\n      onContextMenu: onContextMenu,\n      onMouseOver: onMouseOver,\n      onMouseOut: onMouseOut,\n      onFocus: onFocus,\n      onBlur: onBlur,\n      onMouseMove: onMouseMove\n    }; // When trigger is disabled, no predefined event listeners are added.\n\n    if (disabled || readOnly || plaintext || trigger === 'none') {\n      return events;\n    } // Get the cursor position through onMouseMove.\n    // https://rsuitejs.com/components/tooltip/#follow-cursor\n\n\n    if (followCursor) {\n      events.onMouseMove = (0, _utils.createChainedFunction)(handledMoveOverlay, onMouseMove);\n    } // The `click` event is usually used in `toggle` scenarios.\n    // The first click will open and the second click will close.\n\n\n    if ((0, _isOneOf.default)('click', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleOpenState, events.onClick);\n      return events;\n    } // The difference between it and the click event is that it does not trigger the close.\n\n\n    if ((0, _isOneOf.default)('active', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onClick);\n      return events;\n    }\n\n    if ((0, _isOneOf.default)('hover', trigger)) {\n      var onMouseOverListener = function onMouseOverListener(e) {\n        return onMouseEventHandler(handleDelayedOpen, e);\n      };\n\n      var onMouseOutListener = function onMouseOutListener(e) {\n        return onMouseEventHandler(handleDelayedClose, e);\n      };\n\n      events.onMouseOver = (0, _utils.createChainedFunction)(onMouseOverListener, events.onMouseOver);\n      events.onMouseOut = (0, _utils.createChainedFunction)(onMouseOutListener, events.onMouseOut);\n    }\n\n    if ((0, _isOneOf.default)('focus', trigger)) {\n      events.onFocus = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onFocus);\n      events.onBlur = (0, _utils.createChainedFunction)(handleDelayedClose, events.onBlur);\n    }\n\n    if ((0, _isOneOf.default)('contextMenu', trigger)) {\n      events.onContextMenu = (0, _utils.createChainedFunction)(preventDefault, handleOpenState, events.onContextMenu);\n    }\n\n    return events;\n  }, [disabled, followCursor, handleDelayedClose, handleDelayedOpen, handleOpenState, handledMoveOverlay, onBlur, onClick, onContextMenu, onFocus, onMouseMove, onMouseOut, onMouseOver, plaintext, preventDefault, readOnly, trigger]);\n\n  var renderOverlay = function renderOverlay() {\n    var overlayProps = (0, _extends2.default)({}, rest, {\n      rootClose: rootClose,\n      triggerTarget: triggerRef,\n      onClose: trigger !== 'none' ? (0, _utils.createChainedFunction)(handleClose, function () {\n        return onClose === null || onClose === void 0 ? void 0 : onClose(OverlayCloseCause.ClickOutside);\n      }) : undefined,\n      onExited: (0, _utils.createChainedFunction)(followCursor ? handleExited : undefined, onExited),\n      placement: placement,\n      container: containerElement,\n      open: open\n    });\n    var speakerProps = {\n      id: controlId\n    }; // The purpose of adding mouse entry and exit events to the Overlay is to record whether the current cursor is on the Overlay.\n    // When `trigger` is equal to `hover`, if the cursor leaves the `triggerTarget` and stays on the Overlay,\n    // the Overlay will continue to remain open.\n\n    if (trigger !== 'none' && enterable) {\n      speakerProps.onMouseEnter = handleSpeakerMouseEnter;\n      speakerProps.onMouseLeave = handleSpeakerMouseLeave;\n    }\n\n    return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({}, overlayProps, {\n      ref: overlayRef,\n      childrenProps: speakerProps,\n      followCursor: followCursor,\n      cursorPosition: cursorPosition,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 493,\n        columnNumber: 9\n      }\n    }), typeof speaker === 'function' ? function (props, ref) {\n      return speaker((0, _extends2.default)({}, props, {\n        onClose: handleClose\n      }), ref);\n    } : speaker);\n  };\n\n  if (typeof children === 'object' && children.type === _react.default.Fragment || typeof children === 'string') {\n    console.error('[rsuite] The OverlayTrigger component does not accept strings or Fragments as child.');\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ? children(triggerEvents, triggerRef) : /*#__PURE__*/_react.default.cloneElement(children, (0, _extends2.default)({\n    ref: triggerRef,\n    'aria-describedby': controlId\n  }, mergeEvents(triggerEvents, children.props))), /*#__PURE__*/_react.default.createElement(Portal, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 526,\n      columnNumber: 9\n    }\n  }, renderOverlay()));\n});\n\nOverlayTrigger.displayName = 'OverlayTrigger';\nvar _default = OverlayTrigger;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Overlay/OverlayTrigger.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports[\"default\"] = exports.OverlayCloseCause = void 0;\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\n\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\n\nvar _Overlay = _interopRequireDefault(__webpack_require__(/*! ./Overlay */ \"./src/Overlay/Overlay.tsx\"));\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _isOneOf = _interopRequireDefault(__webpack_require__(/*! ../utils/isOneOf */ \"./src/utils/isOneOf.ts\"));\n\nvar _OverlayContext = _interopRequireDefault(__webpack_require__(/*! ./OverlayContext */ \"./src/Overlay/OverlayContext.ts\"));\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Overlay/OverlayTrigger.tsx\",\n    _this = void 0;\n\nfunction mergeEvents(events, props) {\n  if (events === void 0) {\n    events = {};\n  }\n\n  if (props === void 0) {\n    props = {};\n  }\n\n  var nextEvents = {};\n  Object.keys(events).forEach(function (eventName) {\n    if (events[eventName]) {\n      var _props;\n\n      nextEvents[eventName] = (0, _utils.createChainedFunction)(events[eventName], (_props = props) === null || _props === void 0 ? void 0 : _props[eventName]);\n    }\n  });\n  return nextEvents;\n}\n\n/**\n * The reason that triggers closing of an overlay\n * - Clicking outside of the overlay\n * - Direct invocation of triggerRef.current.close()\n */\nvar OverlayCloseCause;\n/**\n * Useful for mouseover and mouseout.\n * In order to resolve the node entering the mouseover element, a mouseout event and a mouseover event will be triggered.\n * https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave\n * @param handler\n * @param event\n */\n\nexports.OverlayCloseCause = OverlayCloseCause;\n\n(function (OverlayCloseCause) {\n  OverlayCloseCause[OverlayCloseCause[\"ClickOutside\"] = 0] = \"ClickOutside\";\n  OverlayCloseCause[OverlayCloseCause[\"ImperativeHandle\"] = 1] = \"ImperativeHandle\";\n})(OverlayCloseCause || (exports.OverlayCloseCause = OverlayCloseCause = {}));\n\nfunction onMouseEventHandler(handler, event, delay) {\n  var target = event.currentTarget;\n  var related = event.relatedTarget || (0, _get.default)(event, ['nativeEvent', 'toElement']);\n\n  if ((!related || related !== target) && !(0, _contains.default)(target, related)) {\n    handler(event, delay);\n  }\n}\n\nvar defaultTrigger = ['hover', 'focus'];\n\nvar OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useContext = (0, _react.useContext)(_OverlayContext.default),\n      overlayContainer = _useContext.overlayContainer;\n\n  var children = props.children,\n      _props$container = props.container,\n      container = _props$container === void 0 ? overlayContainer : _props$container,\n      controlId = props.controlId,\n      defaultOpen = props.defaultOpen,\n      _props$trigger = props.trigger,\n      trigger = _props$trigger === void 0 ? defaultTrigger : _props$trigger,\n      disabled = props.disabled,\n      followCursor = props.followCursor,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      openProp = props.open,\n      delay = props.delay,\n      delayOpenProp = props.delayOpen,\n      delayCloseProp = props.delayClose,\n      enterable = props.enterable,\n      _props$placement = props.placement,\n      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n      speaker = props.speaker,\n      _props$rootClose = props.rootClose,\n      rootClose = _props$rootClose === void 0 ? true : _props$rootClose,\n      onClick = props.onClick,\n      onMouseOver = props.onMouseOver,\n      onMouseMove = props.onMouseMove,\n      onMouseOut = props.onMouseOut,\n      onContextMenu = props.onContextMenu,\n      onFocus = props.onFocus,\n      onBlur = props.onBlur,\n      onClose = props.onClose,\n      onExited = props.onExited,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"children\", \"container\", \"controlId\", \"defaultOpen\", \"trigger\", \"disabled\", \"followCursor\", \"readOnly\", \"plaintext\", \"open\", \"delay\", \"delayOpen\", \"delayClose\", \"enterable\", \"placement\", \"speaker\", \"rootClose\", \"onClick\", \"onMouseOver\", \"onMouseMove\", \"onMouseOut\", \"onContextMenu\", \"onFocus\", \"onBlur\", \"onClose\", \"onExited\"]);\n\n  var _usePortal = (0, _utils.usePortal)({\n    container: container\n  }),\n      Portal = _usePortal.Portal,\n      containerElement = _usePortal.target;\n\n  var triggerRef = (0, _react.useRef)();\n  var overlayRef = (0, _react.useRef)();\n\n  var _useControlled = (0, _utils.useControlled)(openProp, defaultOpen),\n      open = _useControlled[0],\n      setOpen = _useControlled[1];\n\n  var _useState = (0, _react.useState)(null),\n      cursorPosition = _useState[0],\n      setCursorPosition = _useState[1]; // Delay the timer to close/open the overlay\n  // When the cursor moves from the trigger to the overlay, the overlay will be closed.\n  // In order to keep the overlay open, a timer is used to delay the closing.\n\n\n  var delayOpenTimer = (0, _react.useRef)(null);\n  var delayCloseTimer = (0, _react.useRef)(null);\n  var delayOpen = (0, _isNil.default)(delayOpenProp) ? delay : delayOpenProp;\n  var delayClose = (0, _isNil.default)(delayCloseProp) ? delay : delayCloseProp; // Whether the cursor is on the overlay\n\n  var isOnOverlay = (0, _react.useRef)(false); // Whether the cursor is on the trigger\n\n  var isOnTrigger = (0, _react.useRef)(false);\n  (0, _react.useEffect)(function () {\n    return function () {\n      if (!(0, _isNil.default)(delayOpenTimer.current)) {\n        clearTimeout(delayOpenTimer.current);\n      }\n\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n      }\n    };\n  }, []);\n  var handleOpen = (0, _react.useCallback)(function (delay) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayOpen : delay;\n\n    if (ms && typeof ms === 'number') {\n      return delayOpenTimer.current = setTimeout(function () {\n        delayOpenTimer.current = null;\n        setOpen(true);\n      }, ms);\n    }\n\n    setOpen(true);\n  }, [delayOpen, setOpen]);\n  var handleClose = (0, _react.useCallback)(function (delay, callback) {\n    var ms = (0, _isUndefined2.default)(delay) ? delayClose : delay;\n\n    if (ms && typeof ms === 'number') {\n      return delayCloseTimer.current = setTimeout(function () {\n        delayCloseTimer.current = null;\n        setOpen(false);\n        callback === null || callback === void 0 ? void 0 : callback();\n      }, ms);\n    }\n\n    setOpen(false);\n    callback === null || callback === void 0 ? void 0 : callback();\n  }, [delayClose, setOpen]);\n  var handleExited = (0, _react.useCallback)(function () {\n    setCursorPosition(null);\n  }, []);\n  (0, _react.useImperativeHandle)(ref, function () {\n    return {\n      get root() {\n        return triggerRef.current;\n      },\n\n      get overlay() {\n        var _overlayRef$current;\n\n        return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.child;\n      },\n\n      open: handleOpen,\n      close: function close(delay) {\n        return handleClose(delay, function () {\n          return onClose === null || onClose === void 0 ? void 0 : onClose(OverlayCloseCause.ImperativeHandle);\n        });\n      },\n      updatePosition: function updatePosition() {\n        var _overlayRef$current2, _overlayRef$current2$;\n\n        (_overlayRef$current2 = overlayRef.current) === null || _overlayRef$current2 === void 0 ? void 0 : (_overlayRef$current2$ = _overlayRef$current2.updatePosition) === null || _overlayRef$current2$ === void 0 ? void 0 : _overlayRef$current2$.call(_overlayRef$current2);\n      }\n    };\n  });\n  /**\n   * Close after the cursor leaves.\n   */\n\n  var handleCloseWhenLeave = (0, _react.useCallback)(function () {\n    // When the cursor is not on the overlay and not on the trigger, it is closed.\n    if (!isOnOverlay.current && !isOnTrigger.current) {\n      handleClose();\n    }\n  }, [handleClose]);\n  /**\n   * Toggle open and closed state.\n   */\n\n  var handleOpenState = (0, _react.useCallback)(function () {\n    if (open) {\n      handleCloseWhenLeave();\n    } else {\n      handleOpen();\n    }\n  }, [open, handleCloseWhenLeave, handleOpen]);\n  var handleDelayedOpen = (0, _react.useCallback)(function () {\n    if (!enterable) {\n      return handleOpen();\n    }\n\n    isOnTrigger.current = true;\n\n    if (!(0, _isNil.default)(delayCloseTimer.current)) {\n      clearTimeout(delayCloseTimer.current);\n      delayCloseTimer.current = null;\n      return handleOpen();\n    }\n\n    if (open) {\n      return;\n    }\n\n    handleOpen();\n  }, [enterable, open, handleOpen]);\n  var handleDelayedClose = (0, _react.useCallback)(function () {\n    if (!enterable) {\n      return handleClose();\n    }\n\n    isOnTrigger.current = false;\n\n    if (!(0, _isNil.default)(delayOpenTimer.current)) {\n      clearTimeout(delayOpenTimer.current);\n      delayOpenTimer.current = null;\n      return;\n    }\n\n    if (!open || !(0, _isNil.default)(delayCloseTimer.current)) {\n      return;\n    }\n\n    delayCloseTimer.current = setTimeout(function () {\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n        delayCloseTimer.current = null;\n      }\n\n      handleCloseWhenLeave();\n    }, 200);\n  }, [enterable, open, handleClose, handleCloseWhenLeave]);\n  var handleSpeakerMouseEnter = (0, _react.useCallback)(function () {\n    isOnOverlay.current = true;\n  }, []);\n  var handleSpeakerMouseLeave = (0, _react.useCallback)(function () {\n    isOnOverlay.current = false;\n\n    if (!(0, _isOneOf.default)('click', trigger) && !(0, _isOneOf.default)('contextMenu', trigger) && !(0, _isOneOf.default)('active', trigger)) {\n      handleCloseWhenLeave();\n    }\n  }, [handleCloseWhenLeave, trigger]);\n  var handledMoveOverlay = (0, _react.useCallback)(function (event) {\n    setCursorPosition(function () {\n      return {\n        top: event.pageY,\n        left: event.pageX,\n        clientTop: event.clientX,\n        clientLeft: event.clientY\n      };\n    });\n  }, []);\n  var preventDefault = (0, _react.useCallback)(function (event) {\n    event.preventDefault();\n  }, []);\n  var triggerEvents = (0, _react.useMemo)(function () {\n    // Pass events by props\n    var events = {\n      onClick: onClick,\n      onContextMenu: onContextMenu,\n      onMouseOver: onMouseOver,\n      onMouseOut: onMouseOut,\n      onFocus: onFocus,\n      onBlur: onBlur,\n      onMouseMove: onMouseMove\n    }; // When trigger is disabled, no predefined event listeners are added.\n\n    if (disabled || readOnly || plaintext || trigger === 'none') {\n      return events;\n    } // Get the cursor position through onMouseMove.\n    // https://rsuitejs.com/components/tooltip/#follow-cursor\n\n\n    if (followCursor) {\n      events.onMouseMove = (0, _utils.createChainedFunction)(handledMoveOverlay, onMouseMove);\n    } // The `click` event is usually used in `toggle` scenarios.\n    // The first click will open and the second click will close.\n\n\n    if ((0, _isOneOf.default)('click', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleOpenState, events.onClick);\n      return events;\n    } // The difference between it and the click event is that it does not trigger the close.\n\n\n    if ((0, _isOneOf.default)('active', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onClick);\n      return events;\n    }\n\n    if ((0, _isOneOf.default)('hover', trigger)) {\n      var onMouseOverListener = function onMouseOverListener(e) {\n        return onMouseEventHandler(handleDelayedOpen, e);\n      };\n\n      var onMouseOutListener = function onMouseOutListener(e) {\n        return onMouseEventHandler(handleDelayedClose, e);\n      };\n\n      events.onMouseOver = (0, _utils.createChainedFunction)(onMouseOverListener, events.onMouseOver);\n      events.onMouseOut = (0, _utils.createChainedFunction)(onMouseOutListener, events.onMouseOut);\n    }\n\n    if ((0, _isOneOf.default)('focus', trigger)) {\n      events.onFocus = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onFocus);\n      events.onBlur = (0, _utils.createChainedFunction)(handleDelayedClose, events.onBlur);\n    }\n\n    if ((0, _isOneOf.default)('contextMenu', trigger)) {\n      events.onContextMenu = (0, _utils.createChainedFunction)(preventDefault, handleOpenState, events.onContextMenu);\n    }\n\n    return events;\n  }, [disabled, followCursor, handleDelayedClose, handleDelayedOpen, handleOpenState, handledMoveOverlay, onBlur, onClick, onContextMenu, onFocus, onMouseMove, onMouseOut, onMouseOver, plaintext, preventDefault, readOnly, trigger]);\n\n  var renderOverlay = function renderOverlay() {\n    var overlayProps = (0, _extends2.default)({}, rest, {\n      rootClose: rootClose,\n      triggerTarget: triggerRef,\n      onClose: trigger !== 'none' ? (0, _utils.createChainedFunction)(handleClose, function () {\n        return onClose === null || onClose === void 0 ? void 0 : onClose(OverlayCloseCause.ClickOutside);\n      }) : undefined,\n      onExited: (0, _utils.createChainedFunction)(followCursor ? handleExited : undefined, onExited),\n      placement: placement,\n      container: containerElement,\n      open: open\n    });\n    var speakerProps = {\n      id: controlId\n    }; // The purpose of adding mouse entry and exit events to the Overlay is to record whether the current cursor is on the Overlay.\n    // When `trigger` is equal to `hover`, if the cursor leaves the `triggerTarget` and stays on the Overlay,\n    // the Overlay will continue to remain open.\n\n    if (trigger !== 'none' && enterable) {\n      speakerProps.onMouseEnter = handleSpeakerMouseEnter;\n      speakerProps.onMouseLeave = handleSpeakerMouseLeave;\n    }\n\n    return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({}, overlayProps, {\n      ref: overlayRef,\n      childrenProps: speakerProps,\n      followCursor: followCursor,\n      cursorPosition: cursorPosition,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 493,\n        columnNumber: 9\n      }\n    }), typeof speaker === 'function' ? function (props, ref) {\n      return speaker((0, _extends2.default)({}, props, {\n        onClose: handleClose\n      }), ref);\n    } : speaker);\n  };\n\n  if (typeof children === 'object' && children.type === _react.default.Fragment || typeof children === 'string') {\n    console.error('[rsuite] The OverlayTrigger component does not accept strings or Fragments as child.');\n  }\n\n  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ? children(triggerEvents, triggerRef) : /*#__PURE__*/_react.default.cloneElement(children, (0, _extends2.default)({\n    ref: triggerRef,\n    'aria-describedby': controlId\n  }, mergeEvents(triggerEvents, children.props))), /*#__PURE__*/_react.default.createElement(Portal, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 526,\n      columnNumber: 9\n    }\n  }, renderOverlay()));\n});\n\nOverlayTrigger.displayName = 'OverlayTrigger';\nvar _default = OverlayTrigger;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Overlay/OverlayTrigger.tsx?");
 
 /***/ }),