rsuite 6.2.1 → 6.2.2

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [6.2.2](https://github.com/rsuite/rsuite/compare/v6.2.1...v6.2.2) (2026-07-15)
+
+
+### Bug Fixes
+
+* **docs:** repair online sandbox examples ([#4588](https://github.com/rsuite/rsuite/issues/4588)) ([2bd4f65](https://github.com/rsuite/rsuite/commit/2bd4f655e47d1eab02a95be52a06bba0042f2d8e))
+* **InputPicker:** ignore Enter during IME composition when selecting an item ([#4585](https://github.com/rsuite/rsuite/issues/4585)) ([81c0b0f](https://github.com/rsuite/rsuite/commit/81c0b0fb129ef7aea6078b9395ab5358c88d215a))
+
+
+### Features
+
+* **locales:** add Norwegian Bokmål (nb_NO) locale ([#4583](https://github.com/rsuite/rsuite/issues/4583)) ([98b2024](https://github.com/rsuite/rsuite/commit/98b20249b18b89f7b121021dbfda36105f577c20))
+
+
+
 ## [6.2.1](https://github.com/rsuite/rsuite/compare/v6.2.0...v6.2.1) (2026-06-12)
 
 

package/cjs/InputPicker/InputPicker.js

@@ -314,6 +314,10 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     handleChange(val, event);
   });
   const handleMenuItemKeyPress = (0, _hooks.useEventCallback)(event => {
+    // When composing, ignore the keypress event.
+    if (event.nativeEvent.isComposing) {
+      return;
+    }
     if (!focusItemValue || !controlledData) {
       return;
     }

package/cjs/locales/index.d.ts

@@ -13,6 +13,7 @@ export { default as huHU } from './hu_HU';
 export { default as itIT } from './it_IT';
 export { default as kkKZ } from './kk_KZ';
 export { default as koKR } from './ko_KR';
+export { default as nbNO } from './nb_NO';
 export { default as nlNL } from './nl_NL';
 export { default as ptBR } from './pt_BR';
 export { default as ruRU } from './ru_RU';

package/cjs/locales/index.js

@@ -3,7 +3,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.zhTW = exports.zhCN = exports.ukUA = exports.trTR = exports.thTH = exports.svSE = exports.ruRU = exports.ptBR = exports.plPL = exports.nlNL = exports.neNP = exports.koKR = exports.kkKZ = exports.jaJP = exports.itIT = exports.huHU = exports.guIN = exports.frFR = exports.fiFI = exports.faIR = exports.esES = exports.esAR = exports.enUS = exports.enGB = exports.deDE = exports.daDK = exports.csCZ = exports.caES = exports.arEG = void 0;
+exports.zhTW = exports.zhCN = exports.ukUA = exports.trTR = exports.thTH = exports.svSE = exports.ruRU = exports.ptBR = exports.plPL = exports.nlNL = exports.neNP = exports.nbNO = exports.koKR = exports.kkKZ = exports.jaJP = exports.itIT = exports.huHU = exports.guIN = exports.frFR = exports.fiFI = exports.faIR = exports.esES = exports.esAR = exports.enUS = exports.enGB = exports.deDE = exports.daDK = exports.csCZ = exports.caES = exports.arEG = void 0;
 var _ar_EG = _interopRequireDefault(require("./ar_EG"));
 exports.arEG = _ar_EG.default;
 var _da_DK = _interopRequireDefault(require("./da_DK"));
@@ -30,6 +30,8 @@ var _kk_KZ = _interopRequireDefault(require("./kk_KZ"));
 exports.kkKZ = _kk_KZ.default;
 var _ko_KR = _interopRequireDefault(require("./ko_KR"));
 exports.koKR = _ko_KR.default;
+var _nb_NO = _interopRequireDefault(require("./nb_NO"));
+exports.nbNO = _nb_NO.default;
 var _nl_NL = _interopRequireDefault(require("./nl_NL"));
 exports.nlNL = _nl_NL.default;
 var _pt_BR = _interopRequireDefault(require("./pt_BR"));

package/cjs/locales/nb_NO.d.ts

@@ -0,0 +1,173 @@
+declare const _default: {
+    code: string;
+    common: {
+        loading: string;
+        emptyMessage: string;
+        remove: string;
+        clear: string;
+    };
+    Plaintext: {
+        unfilled: string;
+        notSelected: string;
+        notUploaded: string;
+    };
+    Pagination: {
+        more: string;
+        prev: string;
+        next: string;
+        first: string;
+        last: string;
+        limit: string;
+        total: string;
+        skip: string;
+    };
+    DateTimeFormats: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        /**
+         * Format of the string is based on Unicode Technical Standard #35:
+         * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+         **/
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    Calendar: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        /**
+         * Format of the string is based on Unicode Technical Standard #35:
+         * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+         **/
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    DatePicker: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        /**
+         * Format of the string is based on Unicode Technical Standard #35:
+         * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+         **/
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    DateRangePicker: {
+        last7Days: string;
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        /**
+         * Format of the string is based on Unicode Technical Standard #35:
+         * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+         **/
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    Combobox: {
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
+    };
+    InputPicker: {
+        newItem: string;
+        createOption: string;
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
+    };
+    TagPicker: {
+        newItem: string;
+        createOption: string;
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
+    };
+    Uploader: {
+        inited: string;
+        progress: string;
+        error: string;
+        complete: string;
+        emptyFile: string;
+        upload: string;
+        removeFile: string;
+    };
+    CloseButton: {
+        closeLabel: string;
+    };
+    Breadcrumb: {
+        expandText: string;
+    };
+    Toggle: {
+        on: string;
+        off: string;
+    };
+    Dialog: {
+        alert: string;
+        confirm: string;
+        ok: string;
+        cancel: string;
+    };
+};
+export default _default;

package/cjs/locales/nb_NO.js

@@ -0,0 +1,101 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _nb = require("date-fns/locale/nb");
+const DateTimeFormats = {
+  sunday: 'Sø',
+  monday: 'Ma',
+  tuesday: 'Ti',
+  wednesday: 'On',
+  thursday: 'To',
+  friday: 'Fr',
+  saturday: 'Lø',
+  ok: 'OK',
+  today: 'I dag',
+  yesterday: 'I går',
+  now: 'Nå',
+  hours: 'Timer',
+  minutes: 'Minutter',
+  seconds: 'Sekunder',
+  /**
+   * Format of the string is based on Unicode Technical Standard #35:
+   * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+   **/
+  formattedMonthPattern: 'MMM yyyy',
+  formattedDayPattern: 'dd MMM yyyy',
+  shortDateFormat: 'dd.MM.yyyy',
+  shortTimeFormat: 'HH:mm',
+  dateLocale: _nb.nb
+};
+const Combobox = {
+  noResultsText: 'Ingen resultater funnet',
+  placeholder: 'Velg',
+  searchPlaceholder: 'Søk',
+  checkAll: 'Alle'
+};
+const CreatableComboBox = {
+  ...Combobox,
+  newItem: 'Nytt element',
+  createOption: 'Opprett alternativ "{0}"'
+};
+var _default = exports.default = {
+  code: 'nb-NO',
+  common: {
+    loading: 'Laster...',
+    emptyMessage: 'Fant ingen data',
+    remove: 'Fjern',
+    clear: 'Tøm'
+  },
+  Plaintext: {
+    unfilled: 'Ikke utfylt',
+    notSelected: 'Ikke valgt',
+    notUploaded: 'Ikke lastet opp'
+  },
+  Pagination: {
+    more: 'Mer',
+    prev: 'Forrige',
+    next: 'Neste',
+    first: 'Første',
+    last: 'Siste',
+    limit: '{0} / side',
+    total: 'Totalt antall rader: {0}',
+    skip: 'Gå til {0}'
+  },
+  DateTimeFormats,
+  Calendar: DateTimeFormats,
+  DatePicker: DateTimeFormats,
+  DateRangePicker: {
+    ...DateTimeFormats,
+    last7Days: 'Siste 7 dager'
+  },
+  Combobox,
+  InputPicker: CreatableComboBox,
+  TagPicker: CreatableComboBox,
+  Uploader: {
+    inited: 'Klar',
+    progress: 'Laster opp',
+    error: 'Feil',
+    complete: 'Fullført',
+    emptyFile: 'Tom',
+    upload: 'Last opp',
+    removeFile: 'Fjern fil'
+  },
+  CloseButton: {
+    closeLabel: 'Lukk'
+  },
+  Breadcrumb: {
+    expandText: 'Vis sti'
+  },
+  Toggle: {
+    on: 'PÅ',
+    off: 'AV'
+  },
+  Dialog: {
+    alert: 'Varsel',
+    confirm: 'Bekreft',
+    ok: 'OK',
+    cancel: 'Avbryt'
+  }
+};

package/dist/rsuite.js

@@ -3524,7 +3524,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\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\nvar _TextBox = _interopRequireDefault(__webpack_require__(/*! ./TextBox */ \"./src/InputPicker/TextBox.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _useInput = _interopRequireDefault(__webpack_require__(/*! ./hooks/useInput */ \"./src/InputPicker/hooks/useInput.ts\"));\nvar _useData = _interopRequireDefault(__webpack_require__(/*! ./hooks/useData */ \"./src/InputPicker/hooks/useData.ts\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _InputPickerContext = __webpack_require__(/*! ./InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/InputPicker/utils.ts\");\nvar _utils3 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _Position = __webpack_require__(/*! ../internals/Overlay/Position */ \"./src/internals/Overlay/Position.tsx\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\";\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n/**\n * Single item selector with text box input.\n *\n * @see https://rsuitejs.com/components/input-picker\n */\nconst InputPicker = (0, _utils3.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _hooks.useCustom)('InputPicker', props);\n  const {\n    as,\n    appearance = 'default',\n    block,\n    cleanable = true,\n    cacheData = [],\n    className,\n    classPrefix = 'picker',\n    caretAs,\n    data: controlledData = [],\n    disabled,\n    readOnly,\n    plaintext,\n    defaultValue,\n    defaultOpen = false,\n    disabledItemValues = [],\n    locale,\n    toggleAs,\n    style,\n    size = 'md',\n    searchable = true,\n    open: controlledOpen,\n    placeholder,\n    placement = 'bottomStart',\n    groupBy,\n    popupClassName,\n    popupStyle,\n    popupAutoWidth = true,\n    listboxMaxHeight = 320,\n    creatable,\n    shouldDisplayCreateOption,\n    value: valueProp,\n    valueKey = 'value',\n    virtualized,\n    labelKey = 'label',\n    listProps,\n    id,\n    tabIndex,\n    loading,\n    label,\n    sort,\n    renderListbox,\n    renderExtraFooter,\n    renderValue,\n    renderOption,\n    renderOptionGroup,\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    onChange,\n    onClean,\n    onCreate,\n    onSearch,\n    onSelect,\n    onBlur,\n    onFocus,\n    searchBy,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    multi,\n    tagProps,\n    trigger,\n    disabledOptions,\n    onTagRemove,\n    renderCheckbox\n  } = (0, _InputPickerContext.useTagContext)();\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n  const {\n    trigger: triggerRef,\n    root,\n    target,\n    overlay,\n    list\n  } = (0, _Picker.usePickerRef)(ref);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const [open, setOpen] = (0, _hooks.useControlled)(controlledOpen, defaultOpen);\n  const {\n    inputRef,\n    inputProps,\n    focus,\n    blur\n  } = (0, _useInput.default)({\n    multi,\n    triggerRef\n  });\n  const handleDataChange = data => {\n    setFocusItemValue(data?.[0]?.[valueKey]);\n  };\n  const {\n    data,\n    dataWithCache,\n    newData,\n    setNewData\n  } = (0, _useData.default)({\n    controlledData,\n    cacheData,\n    onChange: handleDataChange\n  });\n  const [value, setValue, isControlled] = (0, _hooks.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue);\n  const cloneValue = () => multi ? (0, _clone.default)(value) || [] : value;\n  const handleClose = (0, _hooks.useEventCallback)(() => {\n    triggerRef?.current?.close();\n\n    // The focus is on the trigger button after closing\n    target.current?.focus?.();\n  });\n  const focusItemValueOptions = {\n    data: dataWithCache,\n    valueKey,\n    target: () => overlay.current\n  };\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    onKeyDown\n  } = (0, _Picker.useFocusItemValue)(multi ? value?.[0] : value, focusItemValueOptions);\n  const onSearchCallback = (0, _hooks.useEventCallback)((searchKeyword, filteredData, event) => {\n    if (!disabledOptions) {\n      // The first option after filtering is the focus.\n      let firstItemValue = filteredData?.[0]?.[valueKey];\n\n      // If there is no value in the option and new options are supported, the search keyword is the first option\n      if (!firstItemValue && creatable) {\n        firstItemValue = searchKeyword;\n      }\n      setFocusItemValue(firstItemValue);\n    }\n    onSearch?.(searchKeyword, event);\n  });\n  const searchOptions = {\n    labelKey,\n    searchBy,\n    callback: onSearchCallback\n  };\n\n  // Use search keywords to filter options.\n  const {\n    searchKeyword,\n    resetSearch,\n    checkShouldDisplay,\n    handleSearch\n  } = (0, _Picker.useSearch)(data, searchOptions);\n\n  // Update the position of the menu when the search keyword and value change\n  (0, _react.useEffect)(() => {\n    triggerRef.current?.updatePosition?.();\n  }, [searchKeyword, value]);\n  const getDataItem = value => {\n    // Find active `MenuItem` by `value`\n    const activeItem = dataWithCache.find(item => (0, _utils3.shallowEqual)(item[valueKey], value));\n    let itemNode = placeholder;\n    if (activeItem?.[labelKey]) {\n      itemNode = activeItem?.[labelKey];\n    }\n    return {\n      isValid: !!activeItem,\n      activeItem,\n      itemNode\n    };\n  };\n\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n  const createOption = value => {\n    const option = {\n      create: true,\n      [valueKey]: value,\n      [labelKey]: value\n    };\n    if (groupBy) {\n      return {\n        [groupBy]: locale?.newItem,\n        ...option\n      };\n    }\n    return option;\n  };\n  const handleChange = (0, _hooks.useEventCallback)((value, event) => {\n    onChange?.(value, event);\n  });\n  const handleRemoveItemByTag = (0, _hooks.useEventCallback)((tag, event) => {\n    event.stopPropagation();\n    const val = cloneValue();\n    (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, tag));\n    setValue(val);\n    handleChange(val, event);\n    onTagRemove?.(tag, event);\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((value, item, event) => {\n    onSelect?.(value, item, event);\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate?.(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  });\n\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n  const handleSelectItem = (0, _hooks.useEventCallback)((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  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n  const handleCheckTag = (0, _hooks.useEventCallback)((nextItemValue, item, event, checked) => {\n    const val = cloneValue();\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, nextItemValue));\n    }\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focus();\n  });\n  const handleTagKeyPress = (0, _hooks.useEventCallback)(event => {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n    const val = cloneValue();\n    let newItemValue = focusItemValue || '';\n\n    // In TagInput\n    if (multi && disabledOptions) {\n      newItemValue = searchKeyword;\n    }\n    if (!newItemValue || !data) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues?.some(item => item === newItemValue)) {\n      return;\n    }\n    if (!val.some(v => (0, _utils3.shallowEqual)(v, newItemValue))) {\n      val.push(newItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, newItemValue));\n    }\n    let focusItem = data.find(item => (0, _utils3.shallowEqual)(item?.[valueKey], newItemValue));\n    if (!focusItem) {\n      focusItem = createOption(newItemValue);\n    }\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  });\n  const handleMenuItemKeyPress = (0, _hooks.useEventCallback)(event => {\n    if (!focusItemValue || !controlledData) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues?.some(item => item === focusItemValue)) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    let focusItem = data.find(item => (0, _utils3.shallowEqual)(item[valueKey], focusItemValue));\n\n    // FIXME Bad state flow\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n    setValue(focusItemValue);\n    resetSearch();\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n    handleChange(focusItemValue, event);\n    handleClose();\n  });\n\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n  const removeLastItem = (0, _hooks.useEventCallback)(event => {\n    const target = event?.target;\n    if (target?.tagName !== 'INPUT') {\n      focus();\n      return;\n    }\n    if (target?.tagName === 'INPUT' && target?.value) {\n      return;\n    }\n    const val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    if (disabled) {\n      return;\n    }\n\n    // When there is a value in the search box and the user presses the delete key on the keyboard,\n    // do not trigger clearing\n    if (inputRef.current === event.target && searchKeyword !== '') {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n    onClean?.(event);\n  });\n  const events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  const handleKeyPress = (0, _hooks.useEventCallback)(event => {\n    // When typing a space, create a tag.\n    if ((0, _utils3.isOneOf)('Space', trigger) && event.key === _constants.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n\n    // When typing a comma, create a tag.\n    if ((0, _utils3.isOneOf)('Comma', trigger) && event.key === _constants.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  });\n  if (multi) {\n    if ((0, _utils3.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    trigger: triggerRef,\n    target,\n    overlay,\n    loading,\n    ...events,\n    ...rest\n  });\n  const handleExited = (0, _hooks.useEventCallback)(() => {\n    setFocusItemValue(multi ? value?.[0] : value);\n    resetSearch();\n  });\n  const handleFocus = (0, _hooks.useEventCallback)(event => {\n    if (!readOnly) {\n      setOpen(true);\n      triggerRef.current?.open();\n    }\n    onFocus?.(event);\n  });\n  const handleEnter = (0, _hooks.useEventCallback)(() => {\n    focus();\n    setOpen(true);\n  });\n  const handleExit = (0, _hooks.useEventCallback)(() => {\n    blur();\n    setOpen(false);\n  });\n  const renderListItem = (label, item) => {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    const newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 507,\n        columnNumber: 7\n      }\n    }, (0, _utils3.tplTransform)(locale?.createOption || '', label)) : label;\n    return renderOption ? renderOption(newLabel, item) : newLabel;\n  };\n  const checkValue = () => {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n    const dataItem = getDataItem(value);\n    let itemNode = dataItem.itemNode;\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n    return {\n      isValid: dataItem.isValid,\n      itemNode\n    };\n  };\n  const renderMultiValue = () => {\n    if (!multi) {\n      return null;\n    }\n    const {\n      closable = true,\n      onClose,\n      ...tagRest\n    } = tagProps;\n    const tags = value || [];\n    const items = [];\n    const tagElements = tags.map(tag => {\n      const {\n        isValid,\n        itemNode,\n        activeItem\n      } = getDataItem(tag);\n      items.push(activeItem);\n      if (!isValid) {\n        return null;\n      }\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({\n        role: \"option\"\n      }, tagRest, {\n        key: tag,\n        size: (0, _utils2.convertSize)(size),\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils3.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 548,\n          columnNumber: 11\n        }\n      }), itemNode);\n    }).filter(item => item !== null);\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n    return tagElements;\n  };\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      className,\n      left,\n      top\n    } = positionProps;\n    const menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    const classes = merge(className, popupClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    const mergedPopupStyle = (0, _utils3.mergeStyles)((0, _Position.getPositionStyle)(left, top), popupStyle);\n    let items = (0, _utils.filterNodesOfTree)(data, checkShouldDisplay);\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(item => item[valueKey] === searchKeyword))) {\n      items = [...items, createOption(searchKeyword)];\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _utils3.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n        ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 595,\n          columnNumber: 14\n        }\n      });\n    }\n    const listbox = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      listItemClassPrefix: multi ? undefined : `${menuClassPrefix}-item`,\n      listItemAs: multi ? _Picker.ListCheckItem : _Picker.ListItem,\n      listItemProps: {\n        renderCheckbox\n      },\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: listboxMaxHeight,\n      data: items,\n      query: searchKeyword,\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem,\n      renderOptionGroup: renderOptionGroup,\n      renderOption: renderListItem,\n      virtualized: virtualized,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 599,\n        columnNumber: 7\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix`none`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 621,\n        columnNumber: 7\n      }\n    }, locale?.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: mergedPopupStyle,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 625,\n        columnNumber: 7\n      }\n    }, renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter?.());\n  };\n  const {\n    isValid,\n    itemNode\n  } = checkValue();\n  const tagElements = renderMultiValue();\n\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  const hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  const hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  const hasValue = multi ? !!tagElements?.length || hasMultiValue : isValid || hasSingleValue;\n  const searching = !!searchKeyword && open;\n  const editable = searchable && !disabled && !loading;\n  if (plaintext) {\n    const plaintextProps = {};\n\n    // When multiple selection, the tag is displayed in a stack layout.\n    if (multi && hasValue) {\n      plaintextProps.as = _Stack.default;\n      plaintextProps.spacing = 6;\n      plaintextProps.wrap = true;\n    }\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: target\n    }, plaintextProps, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 665,\n        columnNumber: 7\n      }\n    }), itemNode || (tagElements?.length ? tagElements : null) || placeholder);\n  }\n  const placeholderNode = placeholder || (disabledOptions ? null : locale?.placeholder);\n  const triggerProps = {\n    ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n    onEnter: (0, _utils3.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExit: (0, _utils3.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited)\n  };\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, (0, _extends2.default)({\n    id: id,\n    multiple: multi,\n    pickerType: multi ? 'tag' : 'input',\n    block: block,\n    disabled: disabled,\n    appearance: appearance,\n    as: as,\n    triggerProps: triggerProps,\n    ref: triggerRef,\n    trigger: \"active\",\n    speaker: renderPopup,\n    placement: placement,\n    rootRef: root,\n    style: style,\n    size: size,\n    classPrefix: classPrefix,\n    className: className,\n    responsive: searchable === false,\n    onClick: focus,\n    onKeyDown: onPickerKeyDown,\n    \"data-focus\": open,\n    \"data-disabled-options\": disabledOptions\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 681,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, {\n    loading: loading,\n    label: label,\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: target,\n    as: toggleAs,\n    caretAs: caretAs,\n    tabIndex: tabIndex,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    caret: !disabledOptions,\n    size: size,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 706,\n      columnNumber: 7\n    }\n  }, searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {\n    showTagList: multi,\n    inputRef: inputRef,\n    inputValue: open ? searchKeyword : '',\n    inputProps: inputProps,\n    tags: tagElements,\n    editable: editable,\n    readOnly: readOnly,\n    disabled: disabled,\n    multiple: multi,\n    onBlur: onBlur,\n    onFocus: handleFocus,\n    onChange: handleSearch,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 729,\n      columnNumber: 7\n    }\n  }));\n});\nInputPicker.displayName = 'InputPicker';\nvar _default = exports[\"default\"] = InputPicker;\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\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\nvar _TextBox = _interopRequireDefault(__webpack_require__(/*! ./TextBox */ \"./src/InputPicker/TextBox.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _useInput = _interopRequireDefault(__webpack_require__(/*! ./hooks/useInput */ \"./src/InputPicker/hooks/useInput.ts\"));\nvar _useData = _interopRequireDefault(__webpack_require__(/*! ./hooks/useData */ \"./src/InputPicker/hooks/useData.ts\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _InputPickerContext = __webpack_require__(/*! ./InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/InputPicker/utils.ts\");\nvar _utils3 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _Position = __webpack_require__(/*! ../internals/Overlay/Position */ \"./src/internals/Overlay/Position.tsx\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/InputPicker/InputPicker.tsx\";\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n/**\n * Single item selector with text box input.\n *\n * @see https://rsuitejs.com/components/input-picker\n */\nconst InputPicker = (0, _utils3.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _hooks.useCustom)('InputPicker', props);\n  const {\n    as,\n    appearance = 'default',\n    block,\n    cleanable = true,\n    cacheData = [],\n    className,\n    classPrefix = 'picker',\n    caretAs,\n    data: controlledData = [],\n    disabled,\n    readOnly,\n    plaintext,\n    defaultValue,\n    defaultOpen = false,\n    disabledItemValues = [],\n    locale,\n    toggleAs,\n    style,\n    size = 'md',\n    searchable = true,\n    open: controlledOpen,\n    placeholder,\n    placement = 'bottomStart',\n    groupBy,\n    popupClassName,\n    popupStyle,\n    popupAutoWidth = true,\n    listboxMaxHeight = 320,\n    creatable,\n    shouldDisplayCreateOption,\n    value: valueProp,\n    valueKey = 'value',\n    virtualized,\n    labelKey = 'label',\n    listProps,\n    id,\n    tabIndex,\n    loading,\n    label,\n    sort,\n    renderListbox,\n    renderExtraFooter,\n    renderValue,\n    renderOption,\n    renderOptionGroup,\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    onChange,\n    onClean,\n    onCreate,\n    onSearch,\n    onSelect,\n    onBlur,\n    onFocus,\n    searchBy,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    multi,\n    tagProps,\n    trigger,\n    disabledOptions,\n    onTagRemove,\n    renderCheckbox\n  } = (0, _InputPickerContext.useTagContext)();\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n  const {\n    trigger: triggerRef,\n    root,\n    target,\n    overlay,\n    list\n  } = (0, _Picker.usePickerRef)(ref);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const [open, setOpen] = (0, _hooks.useControlled)(controlledOpen, defaultOpen);\n  const {\n    inputRef,\n    inputProps,\n    focus,\n    blur\n  } = (0, _useInput.default)({\n    multi,\n    triggerRef\n  });\n  const handleDataChange = data => {\n    setFocusItemValue(data?.[0]?.[valueKey]);\n  };\n  const {\n    data,\n    dataWithCache,\n    newData,\n    setNewData\n  } = (0, _useData.default)({\n    controlledData,\n    cacheData,\n    onChange: handleDataChange\n  });\n  const [value, setValue, isControlled] = (0, _hooks.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue);\n  const cloneValue = () => multi ? (0, _clone.default)(value) || [] : value;\n  const handleClose = (0, _hooks.useEventCallback)(() => {\n    triggerRef?.current?.close();\n\n    // The focus is on the trigger button after closing\n    target.current?.focus?.();\n  });\n  const focusItemValueOptions = {\n    data: dataWithCache,\n    valueKey,\n    target: () => overlay.current\n  };\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    onKeyDown\n  } = (0, _Picker.useFocusItemValue)(multi ? value?.[0] : value, focusItemValueOptions);\n  const onSearchCallback = (0, _hooks.useEventCallback)((searchKeyword, filteredData, event) => {\n    if (!disabledOptions) {\n      // The first option after filtering is the focus.\n      let firstItemValue = filteredData?.[0]?.[valueKey];\n\n      // If there is no value in the option and new options are supported, the search keyword is the first option\n      if (!firstItemValue && creatable) {\n        firstItemValue = searchKeyword;\n      }\n      setFocusItemValue(firstItemValue);\n    }\n    onSearch?.(searchKeyword, event);\n  });\n  const searchOptions = {\n    labelKey,\n    searchBy,\n    callback: onSearchCallback\n  };\n\n  // Use search keywords to filter options.\n  const {\n    searchKeyword,\n    resetSearch,\n    checkShouldDisplay,\n    handleSearch\n  } = (0, _Picker.useSearch)(data, searchOptions);\n\n  // Update the position of the menu when the search keyword and value change\n  (0, _react.useEffect)(() => {\n    triggerRef.current?.updatePosition?.();\n  }, [searchKeyword, value]);\n  const getDataItem = value => {\n    // Find active `MenuItem` by `value`\n    const activeItem = dataWithCache.find(item => (0, _utils3.shallowEqual)(item[valueKey], value));\n    let itemNode = placeholder;\n    if (activeItem?.[labelKey]) {\n      itemNode = activeItem?.[labelKey];\n    }\n    return {\n      isValid: !!activeItem,\n      activeItem,\n      itemNode\n    };\n  };\n\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n  const createOption = value => {\n    const option = {\n      create: true,\n      [valueKey]: value,\n      [labelKey]: value\n    };\n    if (groupBy) {\n      return {\n        [groupBy]: locale?.newItem,\n        ...option\n      };\n    }\n    return option;\n  };\n  const handleChange = (0, _hooks.useEventCallback)((value, event) => {\n    onChange?.(value, event);\n  });\n  const handleRemoveItemByTag = (0, _hooks.useEventCallback)((tag, event) => {\n    event.stopPropagation();\n    const val = cloneValue();\n    (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, tag));\n    setValue(val);\n    handleChange(val, event);\n    onTagRemove?.(tag, event);\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((value, item, event) => {\n    onSelect?.(value, item, event);\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate?.(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  });\n\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n  const handleSelectItem = (0, _hooks.useEventCallback)((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  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n  const handleCheckTag = (0, _hooks.useEventCallback)((nextItemValue, item, event, checked) => {\n    const val = cloneValue();\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, nextItemValue));\n    }\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focus();\n  });\n  const handleTagKeyPress = (0, _hooks.useEventCallback)(event => {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n    const val = cloneValue();\n    let newItemValue = focusItemValue || '';\n\n    // In TagInput\n    if (multi && disabledOptions) {\n      newItemValue = searchKeyword;\n    }\n    if (!newItemValue || !data) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues?.some(item => item === newItemValue)) {\n      return;\n    }\n    if (!val.some(v => (0, _utils3.shallowEqual)(v, newItemValue))) {\n      val.push(newItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, newItemValue));\n    }\n    let focusItem = data.find(item => (0, _utils3.shallowEqual)(item?.[valueKey], newItemValue));\n    if (!focusItem) {\n      focusItem = createOption(newItemValue);\n    }\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  });\n  const handleMenuItemKeyPress = (0, _hooks.useEventCallback)(event => {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n    if (!focusItemValue || !controlledData) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues?.some(item => item === focusItemValue)) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    let focusItem = data.find(item => (0, _utils3.shallowEqual)(item[valueKey], focusItemValue));\n\n    // FIXME Bad state flow\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n    setValue(focusItemValue);\n    resetSearch();\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n    handleChange(focusItemValue, event);\n    handleClose();\n  });\n\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n  const removeLastItem = (0, _hooks.useEventCallback)(event => {\n    const target = event?.target;\n    if (target?.tagName !== 'INPUT') {\n      focus();\n      return;\n    }\n    if (target?.tagName === 'INPUT' && target?.value) {\n      return;\n    }\n    const val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    if (disabled) {\n      return;\n    }\n\n    // When there is a value in the search box and the user presses the delete key on the keyboard,\n    // do not trigger clearing\n    if (inputRef.current === event.target && searchKeyword !== '') {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n    onClean?.(event);\n  });\n  const events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  const handleKeyPress = (0, _hooks.useEventCallback)(event => {\n    // When typing a space, create a tag.\n    if ((0, _utils3.isOneOf)('Space', trigger) && event.key === _constants.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n\n    // When typing a comma, create a tag.\n    if ((0, _utils3.isOneOf)('Comma', trigger) && event.key === _constants.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  });\n  if (multi) {\n    if ((0, _utils3.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    trigger: triggerRef,\n    target,\n    overlay,\n    loading,\n    ...events,\n    ...rest\n  });\n  const handleExited = (0, _hooks.useEventCallback)(() => {\n    setFocusItemValue(multi ? value?.[0] : value);\n    resetSearch();\n  });\n  const handleFocus = (0, _hooks.useEventCallback)(event => {\n    if (!readOnly) {\n      setOpen(true);\n      triggerRef.current?.open();\n    }\n    onFocus?.(event);\n  });\n  const handleEnter = (0, _hooks.useEventCallback)(() => {\n    focus();\n    setOpen(true);\n  });\n  const handleExit = (0, _hooks.useEventCallback)(() => {\n    blur();\n    setOpen(false);\n  });\n  const renderListItem = (label, item) => {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    const newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 512,\n        columnNumber: 7\n      }\n    }, (0, _utils3.tplTransform)(locale?.createOption || '', label)) : label;\n    return renderOption ? renderOption(newLabel, item) : newLabel;\n  };\n  const checkValue = () => {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n    const dataItem = getDataItem(value);\n    let itemNode = dataItem.itemNode;\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n    return {\n      isValid: dataItem.isValid,\n      itemNode\n    };\n  };\n  const renderMultiValue = () => {\n    if (!multi) {\n      return null;\n    }\n    const {\n      closable = true,\n      onClose,\n      ...tagRest\n    } = tagProps;\n    const tags = value || [];\n    const items = [];\n    const tagElements = tags.map(tag => {\n      const {\n        isValid,\n        itemNode,\n        activeItem\n      } = getDataItem(tag);\n      items.push(activeItem);\n      if (!isValid) {\n        return null;\n      }\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({\n        role: \"option\"\n      }, tagRest, {\n        key: tag,\n        size: (0, _utils2.convertSize)(size),\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils3.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 553,\n          columnNumber: 11\n        }\n      }), itemNode);\n    }).filter(item => item !== null);\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n    return tagElements;\n  };\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      className,\n      left,\n      top\n    } = positionProps;\n    const menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    const classes = merge(className, popupClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    const mergedPopupStyle = (0, _utils3.mergeStyles)((0, _Position.getPositionStyle)(left, top), popupStyle);\n    let items = (0, _utils.filterNodesOfTree)(data, checkShouldDisplay);\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(item => item[valueKey] === searchKeyword))) {\n      items = [...items, createOption(searchKeyword)];\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _utils3.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n        ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 600,\n          columnNumber: 14\n        }\n      });\n    }\n    const listbox = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      listItemClassPrefix: multi ? undefined : `${menuClassPrefix}-item`,\n      listItemAs: multi ? _Picker.ListCheckItem : _Picker.ListItem,\n      listItemProps: {\n        renderCheckbox\n      },\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: listboxMaxHeight,\n      data: items,\n      query: searchKeyword,\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem,\n      renderOptionGroup: renderOptionGroup,\n      renderOption: renderListItem,\n      virtualized: virtualized,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 604,\n        columnNumber: 7\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix`none`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 626,\n        columnNumber: 7\n      }\n    }, locale?.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: mergedPopupStyle,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 630,\n        columnNumber: 7\n      }\n    }, renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter?.());\n  };\n  const {\n    isValid,\n    itemNode\n  } = checkValue();\n  const tagElements = renderMultiValue();\n\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  const hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  const hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  const hasValue = multi ? !!tagElements?.length || hasMultiValue : isValid || hasSingleValue;\n  const searching = !!searchKeyword && open;\n  const editable = searchable && !disabled && !loading;\n  if (plaintext) {\n    const plaintextProps = {};\n\n    // When multiple selection, the tag is displayed in a stack layout.\n    if (multi && hasValue) {\n      plaintextProps.as = _Stack.default;\n      plaintextProps.spacing = 6;\n      plaintextProps.wrap = true;\n    }\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: target\n    }, plaintextProps, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 670,\n        columnNumber: 7\n      }\n    }), itemNode || (tagElements?.length ? tagElements : null) || placeholder);\n  }\n  const placeholderNode = placeholder || (disabledOptions ? null : locale?.placeholder);\n  const triggerProps = {\n    ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n    onEnter: (0, _utils3.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExit: (0, _utils3.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited)\n  };\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, (0, _extends2.default)({\n    id: id,\n    multiple: multi,\n    pickerType: multi ? 'tag' : 'input',\n    block: block,\n    disabled: disabled,\n    appearance: appearance,\n    as: as,\n    triggerProps: triggerProps,\n    ref: triggerRef,\n    trigger: \"active\",\n    speaker: renderPopup,\n    placement: placement,\n    rootRef: root,\n    style: style,\n    size: size,\n    classPrefix: classPrefix,\n    className: className,\n    responsive: searchable === false,\n    onClick: focus,\n    onKeyDown: onPickerKeyDown,\n    \"data-focus\": open,\n    \"data-disabled-options\": disabledOptions\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 686,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, {\n    loading: loading,\n    label: label,\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: target,\n    as: toggleAs,\n    caretAs: caretAs,\n    tabIndex: tabIndex,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    caret: !disabledOptions,\n    size: size,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 711,\n      columnNumber: 7\n    }\n  }, searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {\n    showTagList: multi,\n    inputRef: inputRef,\n    inputValue: open ? searchKeyword : '',\n    inputProps: inputProps,\n    tags: tagElements,\n    editable: editable,\n    readOnly: readOnly,\n    disabled: disabled,\n    multiple: multi,\n    onBlur: onBlur,\n    onFocus: handleFocus,\n    onChange: handleSearch,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 734,\n      columnNumber: 7\n    }\n  }));\n});\nInputPicker.displayName = 'InputPicker';\nvar _default = exports[\"default\"] = InputPicker;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
 
 /***/ }),