rsuite 5.37.2 → 5.37.3

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [5.37.3](https://github.com/rsuite/rsuite/compare/v5.37.2...v5.37.3) (2023-08-02)
+
+### Bug Fixes
+
+- **SelectPicker:** fix display options not updating when data prop is updated ([#3319](https://github.com/rsuite/rsuite/issues/3319)) ([06c9cce](https://github.com/rsuite/rsuite/commit/06c9cce64ea27a756f87aa74a0af0287afdf106a))
+
 ## [5.37.2](https://github.com/rsuite/rsuite/compare/v5.37.1...v5.37.2) (2023-07-28)
 
 ### Bug Fixes

package/cjs/Picker/utils.js

@@ -554,24 +554,17 @@ function useSearch(data, props) {
     }
 
     return shouldDisplay(checkValue, _keyword);
-  }, [labelKey, searchBy, searchKeyword]); // TODO-Doma
-  // filteredData should be derived from data and searchKeyword
-  // This redundant state might be here for preventing callback firing multiple times
-  // Find out if this is the case and remove this state if possible
-
-  var _useState5 = (0, _react.useState)(function () {
+  }, [labelKey, searchBy, searchKeyword]);
+  var filteredData = (0, _react.useMemo)(function () {
     return data.filter(function (item) {
-      return checkShouldDisplay(item);
+      return checkShouldDisplay(item, searchKeyword);
     });
-  }),
-      filteredData = _useState5[0],
-      setFilteredData = _useState5[1];
+  }, [checkShouldDisplay, data, searchKeyword]);
 
   var handleSearch = function handleSearch(searchKeyword, event) {
     var filteredData = data.filter(function (item) {
       return checkShouldDisplay(item, searchKeyword);
     });
-    setFilteredData(filteredData);
     setSearchKeyword(searchKeyword);
     callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);
   };

package/dist/rsuite.js

@@ -3920,7 +3920,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.createConcatChildrenFunction = createConcatChildrenFunction;\nexports.shouldDisplay = shouldDisplay;\nexports.usePickerClassName = usePickerClassName;\nexports.onMenuKeyDown = onMenuKeyDown;\nexports.useSearch = useSearch;\nexports.usePublicMethods = usePublicMethods;\nexports.useToggleKeyDownEvent = exports.useFocusItemValue = void 0;\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 _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n\nvar _trim = _interopRequireDefault(__webpack_require__(/*! lodash/trim */ \"./node_modules/lodash/trim.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _find = _interopRequireDefault(__webpack_require__(/*! lodash/find */ \"./node_modules/lodash/find.js\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _domLib = __webpack_require__(/*! dom-lib */ \"./node_modules/dom-lib/esm/index.js\");\n\nvar defaultNodeKeys = {\n  valueKey: 'value',\n  childrenKey: 'children'\n};\n\nfunction createConcatChildrenFunction(node, nodeValue, nodeKeys) {\n  if (nodeKeys === void 0) {\n    nodeKeys = defaultNodeKeys;\n  }\n\n  var _nodeKeys = nodeKeys,\n      valueKey = _nodeKeys.valueKey,\n      childrenKey = _nodeKeys.childrenKey;\n  return function (data, children) {\n    if (nodeValue) {\n      node = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n        return nodeValue === item[valueKey];\n      });\n    }\n\n    node[childrenKey] = children;\n    return data.concat([]);\n  };\n}\n\nfunction shouldDisplay(label, searchKeyword) {\n  if (!(0, _trim.default)(searchKeyword)) {\n    return true;\n  }\n\n  var keyword = searchKeyword.toLocaleLowerCase();\n\n  if (typeof label === 'string' || typeof label === 'number') {\n    return (\"\" + label).toLocaleLowerCase().indexOf(keyword) >= 0;\n  } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {\n    var nodes = (0, _utils.reactToString)(label);\n    return nodes.join('').toLocaleLowerCase().indexOf(keyword) >= 0;\n  }\n\n  return false;\n}\n\n/**\n * The className of the assembled Toggle is on the Picker.\n */\nfunction usePickerClassName(props) {\n  var _withClassPrefix;\n\n  var name = props.name,\n      classPrefix = props.classPrefix,\n      className = props.className,\n      placement = props.placement,\n      appearance = props.appearance,\n      cleanable = props.cleanable,\n      block = props.block,\n      disabled = props.disabled,\n      countable = props.countable,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      hasValue = props.hasValue,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"name\", \"classPrefix\", \"className\", \"placement\", \"appearance\", \"cleanable\", \"block\", \"disabled\", \"countable\", \"readOnly\", \"plaintext\", \"hasValue\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix))); // Those props that're used for composing the className\n\n  var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext', 'name'])));\n  return [classes, usedClassNamePropKeys];\n}\n\n/**\n * Handling keyboard events...\n * @param event Keyboard event object\n * @param events Event callback functions\n */\nfunction onMenuKeyDown(event, events) {\n  var down = events.down,\n      up = events.up,\n      enter = events.enter,\n      del = events.del,\n      esc = events.esc,\n      right = events.right,\n      left = events.left;\n\n  switch (event.key) {\n    // down\n    case _utils.KEY_VALUES.DOWN:\n      down === null || down === void 0 ? void 0 : down(event);\n      event.preventDefault();\n      break;\n    // up\n\n    case _utils.KEY_VALUES.UP:\n      up === null || up === void 0 ? void 0 : up(event);\n      event.preventDefault();\n      break;\n    // enter\n\n    case _utils.KEY_VALUES.ENTER:\n      enter === null || enter === void 0 ? void 0 : enter(event);\n      event.preventDefault();\n      break;\n    // delete\n\n    case _utils.KEY_VALUES.BACKSPACE:\n      del === null || del === void 0 ? void 0 : del(event);\n      break;\n    // esc | tab\n\n    case _utils.KEY_VALUES.ESC:\n    case _utils.KEY_VALUES.TAB:\n      esc === null || esc === void 0 ? void 0 : esc(event);\n      break;\n    // left arrow\n\n    case _utils.KEY_VALUES.LEFT:\n      left === null || left === void 0 ? void 0 : left(event);\n      break;\n    // right arrow\n\n    case _utils.KEY_VALUES.RIGHT:\n      right === null || right === void 0 ? void 0 : right(event);\n      break;\n\n    default:\n  }\n}\n\n/**\n * Checks if the element has a vertical scrollbar.\n */\nfunction hasVerticalScroll(element) {\n  var scrollHeight = element.scrollHeight,\n      clientHeight = element.clientHeight;\n  return scrollHeight > clientHeight;\n}\n/**\n * Checks if the element is within the visible area of the container\n */\n\n\nfunction isVisible(element, container, direction) {\n  if (!hasVerticalScroll(container)) {\n    return true;\n  }\n\n  var _element$getBoundingC = element.getBoundingClientRect(),\n      top = _element$getBoundingC.top,\n      bottom = _element$getBoundingC.bottom,\n      height = _element$getBoundingC.height;\n\n  var _container$getBoundin = container.getBoundingClientRect(),\n      containerTop = _container$getBoundin.top,\n      containerBottom = _container$getBoundin.bottom;\n\n  if (direction === 'top') {\n    return top + height > containerTop;\n  }\n\n  return bottom - height < containerBottom;\n}\n\nfunction scrollTo(container, direction, step) {\n  var scrollTop = container.scrollTop;\n  container.scrollTop = direction === 'top' ? scrollTop - step : scrollTop + step;\n}\n/**\n * A hook that manages the focus state of the option.\n * @param defaultFocusItemValue\n * @param props\n */\n\n\nvar useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props) {\n  var _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      _props$focusableQuery = props.focusableQueryKey,\n      focusableQueryKey = _props$focusableQuery === void 0 ? '[data-key][aria-disabled=\"false\"]' : _props$focusableQuery,\n      _props$defaultLayer = props.defaultLayer,\n      defaultLayer = _props$defaultLayer === void 0 ? 0 : _props$defaultLayer,\n      data = props.data,\n      target = props.target,\n      rtl = props.rtl,\n      callback = props.callback,\n      _props$getParent = props.getParent,\n      getParent = _props$getParent === void 0 ? function (item) {\n    return item === null || item === void 0 ? void 0 : item.parent;\n  } : _props$getParent;\n\n  var _useState = (0, _react.useState)(defaultFocusItemValue),\n      focusItemValue = _useState[0],\n      setFocusItemValue = _useState[1];\n\n  var _useState2 = (0, _react.useState)(defaultLayer),\n      layer = _useState2[0],\n      setLayer = _useState2[1];\n\n  var _useState3 = (0, _react.useState)([]),\n      keys = _useState3[0],\n      setKeys = _useState3[1];\n\n  var getScrollContainer = (0, _react.useCallback)(function () {\n    var menu = (0, _isFunction.default)(target) ? target() : target; // For Cascader and MutiCascader\n\n    var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(\"[data-layer=\\\"\" + layer + \"\\\"]\");\n\n    if (subMenu) {\n      return subMenu;\n    } // For SelectPicker、CheckPicker、Autocomplete、InputPicker、TagPicker\n\n\n    return menu === null || menu === void 0 ? void 0 : menu.querySelector('[role=\"listbox\"]');\n  }, [layer, target]);\n  /**\n   * Get the elements visible in all options.\n   */\n\n  var getFocusableMenuItems = (0, _react.useCallback)(function () {\n    if (!target) {\n      return [];\n    }\n\n    var currentKeys = keys;\n\n    if (layer < 1) {\n      var popup = (0, _isFunction.default)(target) ? target() : target;\n      var rootMenu = popup === null || popup === void 0 ? void 0 : popup.querySelector('[data-layer=\"0\"]');\n\n      if (rootMenu) {\n        var _rootMenu$querySelect;\n\n        currentKeys = Array.from((_rootMenu$querySelect = rootMenu.querySelectorAll(focusableQueryKey)) !== null && _rootMenu$querySelect !== void 0 ? _rootMenu$querySelect : []).map(function (item) {\n          var _item$dataset;\n\n          return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;\n        });\n      } else {\n        var _popup$querySelectorA;\n\n        currentKeys = Array.from((_popup$querySelectorA = popup === null || popup === void 0 ? void 0 : popup.querySelectorAll(focusableQueryKey)) !== null && _popup$querySelectorA !== void 0 ? _popup$querySelectorA : []).map(function (item) {\n          var _item$dataset2;\n\n          return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;\n        });\n      }\n    } // 1. It is necessary to traverse the `keys` instead of `data` here to preserve the order of the array.\n    // 2. The values ​​in `keys` are all string, so the corresponding value of `data` should also be converted to string\n\n\n    return currentKeys.map(function (key) {\n      return (0, _find.default)(data, function (i) {\n        return \"\" + i[valueKey] === key;\n      });\n    });\n  }, [data, focusableQueryKey, keys, target, valueKey, layer]);\n  /**\n   * Get the index of the focus item.\n   */\n\n  var findFocusItemIndex = (0, _react.useCallback)(function (callback) {\n    var items = getFocusableMenuItems();\n\n    for (var i = 0; i < items.length; i += 1) {\n      var _items$i;\n\n      if ((0, _utils.shallowEqual)(focusItemValue, (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i[valueKey])) {\n        callback(items, i);\n        return;\n      }\n    }\n\n    callback(items, -1);\n  }, [focusItemValue, getFocusableMenuItems, valueKey]);\n  var scrollListItem = (0, _react.useCallback)(function (direction, itemValue, willOverflow) {\n    var container = getScrollContainer();\n    var item = container === null || container === void 0 ? void 0 : container.querySelector(\"[data-key=\\\"\" + itemValue + \"\\\"]\");\n\n    if (willOverflow && container) {\n      var scrollHeight = container.scrollHeight,\n          clientHeight = container.clientHeight;\n      container.scrollTop = direction === 'top' ? scrollHeight - clientHeight : 0;\n      return;\n    }\n\n    if (item && container) {\n      if (!isVisible(item, container, direction)) {\n        var height = (0, _domLib.getHeight)(item);\n        scrollTo(container, direction, height);\n      }\n    }\n  }, [getScrollContainer]);\n  var focusNextMenuItem = (0, _react.useCallback)(function (event) {\n    findFocusItemIndex(function (items, index) {\n      var willOverflow = index + 2 > items.length;\n      var nextIndex = willOverflow ? 0 : index + 1;\n      var focusItem = items[nextIndex];\n\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);\n        scrollListItem('bottom', focusItem[valueKey], willOverflow);\n      }\n    });\n  }, [callback, findFocusItemIndex, scrollListItem, valueKey]);\n  var focusPrevMenuItem = (0, _react.useCallback)(function (event) {\n    findFocusItemIndex(function (items, index) {\n      var willOverflow = index === 0;\n      var nextIndex = willOverflow ? items.length - 1 : index - 1;\n      var focusItem = items[nextIndex];\n\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);\n        scrollListItem('top', focusItem[valueKey], willOverflow);\n      }\n    });\n  }, [callback, findFocusItemIndex, scrollListItem, valueKey]);\n  var getSubMenuKeys = (0, _react.useCallback)(function (nextLayer) {\n    var menu = (0, _isFunction.default)(target) ? target() : target;\n    var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(\"[data-layer=\\\"\" + nextLayer + \"\\\"]\");\n\n    if (subMenu) {\n      var _Array$from;\n\n      return (_Array$from = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (item) {\n        var _item$dataset3;\n\n        return (_item$dataset3 = item.dataset) === null || _item$dataset3 === void 0 ? void 0 : _item$dataset3.key;\n      });\n    }\n\n    return null;\n  }, [focusableQueryKey, target]);\n  var focusNextLevelMenu = (0, _react.useCallback)(function (event) {\n    var nextLayer = layer + 1;\n    var nextKeys = getSubMenuKeys(nextLayer);\n\n    if (nextKeys) {\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      setFocusItemValue(nextKeys[0]);\n      callback === null || callback === void 0 ? void 0 : callback(nextKeys[0], event);\n    }\n  }, [callback, getSubMenuKeys, layer]);\n  var focusPrevLevelMenu = (0, _react.useCallback)(function (event) {\n    var nextLayer = layer - 1;\n    var nextKeys = getSubMenuKeys(nextLayer);\n\n    if (nextKeys) {\n      var _getParent;\n\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n        return item[valueKey] === focusItemValue;\n      });\n      var parentItemValue = (_getParent = getParent(focusItem)) === null || _getParent === void 0 ? void 0 : _getParent[valueKey];\n\n      if (parentItemValue) {\n        setFocusItemValue(parentItemValue);\n        callback === null || callback === void 0 ? void 0 : callback(parentItemValue, event);\n      }\n    }\n  }, [callback, data, focusItemValue, getParent, getSubMenuKeys, layer, valueKey]);\n  var handleKeyDown = (0, _react.useCallback)(function (event) {\n    var _onMenuKeyDown;\n\n    onMenuKeyDown(event, (_onMenuKeyDown = {\n      down: focusNextMenuItem,\n      up: focusPrevMenuItem\n    }, _onMenuKeyDown[rtl ? 'left' : 'right'] = focusNextLevelMenu, _onMenuKeyDown[rtl ? 'right' : 'left'] = focusPrevLevelMenu, _onMenuKeyDown));\n  }, [focusNextLevelMenu, focusNextMenuItem, focusPrevLevelMenu, focusPrevMenuItem, rtl]);\n  return {\n    focusItemValue: focusItemValue,\n    setFocusItemValue: setFocusItemValue,\n    layer: layer,\n    setLayer: setLayer,\n    keys: keys,\n    setKeys: setKeys,\n    onKeyDown: handleKeyDown\n  };\n};\n\nexports.useFocusItemValue = useFocusItemValue;\n\n/**\n * A hook to control the toggle keyboard operation\n * @param props\n */\nvar useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {\n  var _props$toggle = props.toggle,\n      toggle = _props$toggle === void 0 ? true : _props$toggle,\n      triggerRef = props.triggerRef,\n      targetRef = props.targetRef,\n      overlayRef = props.overlayRef,\n      searchInputRef = props.searchInputRef,\n      active = props.active,\n      readOnly = props.readOnly,\n      disabled = props.disabled,\n      onExit = props.onExit,\n      onOpen = props.onOpen,\n      onClose = props.onClose,\n      onKeyDown = props.onKeyDown,\n      onMenuKeyDown = props.onMenuKeyDown,\n      onMenuPressEnter = props.onMenuPressEnter,\n      onMenuPressBackspace = props.onMenuPressBackspace;\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose, triggerRef]);\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current2, _triggerRef$current2$;\n\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n  }, [onOpen, triggerRef]);\n  var handleToggleDropdown = (0, _react.useCallback)(function () {\n    if (active) {\n      handleClose();\n      return;\n    }\n\n    handleOpen();\n  }, [active, handleOpen, handleClose]);\n  var onToggle = (0, _react.useCallback)(function (event) {\n    // Keyboard events should not be processed when readOnly and disabled are set.\n    if (readOnly || disabled) {\n      return;\n    }\n\n    if (event.target === (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current)) {\n      // enter\n      if (toggle && event.key === _utils.KEY_VALUES.ENTER) {\n        handleToggleDropdown();\n      } // delete\n\n\n      if (event.key === _utils.KEY_VALUES.BACKSPACE) {\n        onExit === null || onExit === void 0 ? void 0 : onExit(event);\n      }\n    }\n\n    if (overlayRef !== null && overlayRef !== void 0 && overlayRef.current) {\n      // The keyboard operation callback on the menu.\n      onMenuKeyDown === null || onMenuKeyDown === void 0 ? void 0 : onMenuKeyDown(event);\n\n      if (event.key === _utils.KEY_VALUES.ENTER) {\n        onMenuPressEnter === null || onMenuPressEnter === void 0 ? void 0 : onMenuPressEnter(event);\n      }\n      /**\n       * There is no callback when typing the Backspace key in the search box.\n       * The default is to remove search keywords\n       */\n\n\n      if (event.key === _utils.KEY_VALUES.BACKSPACE && event.target !== (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current)) {\n        onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);\n      } // The search box gets focus when typing characters and numbers.\n\n\n      if (event.key.length === 1 && /\\w/.test(event.key)) {\n        var _event$target;\n\n        // Exclude Input\n        // eg: <SelectPicker renderExtraFooter={() => <Input />} />\n        if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) !== 'INPUT') {\n          var _searchInputRef$curre;\n\n          searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();\n        }\n      }\n    }\n\n    if (event.key === _utils.KEY_VALUES.ESC || event.key === _utils.KEY_VALUES.TAB) {\n      handleClose();\n    } // Native event callback\n\n\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  }, [readOnly, disabled, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);\n  return onToggle;\n};\n\nexports.useToggleKeyDownEvent = useToggleKeyDownEvent;\n\n/**\n * A hook that handles search filter options\n */\nfunction useSearch(data, props) {\n  var labelKey = props.labelKey,\n      searchBy = props.searchBy,\n      callback = props.callback; // Use search keywords to filter options.\n\n  var _useState4 = (0, _react.useState)(''),\n      searchKeyword = _useState4[0],\n      setSearchKeyword = _useState4[1];\n\n  var resetSearch = (0, _react.useCallback)(function () {\n    setSearchKeyword('');\n  }, []);\n  /**\n   * Index of keyword  in `label`\n   * @param {node} label\n   */\n\n  var checkShouldDisplay = (0, _react.useCallback)(function (item, keyword) {\n    var checkValue = typeof item === 'object' ? item === null || item === void 0 ? void 0 : item[labelKey] : String(item);\n\n    var _keyword = (0, _isUndefined.default)(keyword) ? searchKeyword : keyword;\n\n    if (typeof searchBy === 'function') {\n      return searchBy(_keyword, checkValue, item);\n    }\n\n    return shouldDisplay(checkValue, _keyword);\n  }, [labelKey, searchBy, searchKeyword]); // TODO-Doma\n  // filteredData should be derived from data and searchKeyword\n  // This redundant state might be here for preventing callback firing multiple times\n  // Find out if this is the case and remove this state if possible\n\n  var _useState5 = (0, _react.useState)(function () {\n    return data.filter(function (item) {\n      return checkShouldDisplay(item);\n    });\n  }),\n      filteredData = _useState5[0],\n      setFilteredData = _useState5[1];\n\n  var handleSearch = function handleSearch(searchKeyword, event) {\n    var filteredData = data.filter(function (item) {\n      return checkShouldDisplay(item, searchKeyword);\n    });\n    setFilteredData(filteredData);\n    setSearchKeyword(searchKeyword);\n    callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);\n  };\n\n  return {\n    searchKeyword: searchKeyword,\n    filteredData: filteredData,\n    checkShouldDisplay: checkShouldDisplay,\n    handleSearch: handleSearch,\n    resetSearch: resetSearch\n  };\n}\n\n/**\n * A hook of the exposed method of Picker\n */\nfunction usePublicMethods(ref, parmas) {\n  var triggerRef = parmas.triggerRef,\n      overlayRef = parmas.overlayRef,\n      targetRef = parmas.targetRef,\n      rootRef = parmas.rootRef,\n      listRef = parmas.listRef,\n      inline = parmas.inline;\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current3;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.open();\n  }, [triggerRef]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current4;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.close();\n  }, [triggerRef]);\n  var handleUpdatePosition = (0, _react.useCallback)(function () {\n    var _triggerRef$current5;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();\n  }, [triggerRef]);\n  (0, _react.useImperativeHandle)(ref, function () {\n    // Tree and CheckTree\n    if (inline) {\n      return {\n        get root() {\n          var _triggerRef$current$r, _triggerRef$current6;\n\n          return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current$r = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root) !== null && _triggerRef$current$r !== void 0 ? _triggerRef$current$r : null;\n        },\n\n        get list() {\n          if (!(listRef !== null && listRef !== void 0 && listRef.current)) {\n            throw new Error('The list is not found, please set `virtualized` for the component.');\n          }\n\n          return listRef === null || listRef === void 0 ? void 0 : listRef.current;\n        }\n\n      };\n    }\n\n    return {\n      get root() {\n        var _ref, _triggerRef$current7;\n\n        return (_ref = (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) || (triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current7 = triggerRef.current) === null || _triggerRef$current7 === void 0 ? void 0 : _triggerRef$current7.root)) !== null && _ref !== void 0 ? _ref : null;\n      },\n\n      get overlay() {\n        var _overlayRef$current;\n\n        if (!(overlayRef !== null && overlayRef !== void 0 && overlayRef.current)) {\n          throw new Error('The overlay is not found. Please confirm whether the picker is open.');\n        }\n\n        return (_overlayRef$current = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) !== null && _overlayRef$current !== void 0 ? _overlayRef$current : null;\n      },\n\n      get target() {\n        var _targetRef$current;\n\n        return (_targetRef$current = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current !== void 0 ? _targetRef$current : null;\n      },\n\n      get list() {\n        if (!(listRef !== null && listRef !== void 0 && listRef.current)) {\n          throw new Error(\"\\n            The list is not found.\\n            1.Please set virtualized for the component.\\n            2.Please confirm whether the picker is open.\\n          \");\n        }\n\n        return listRef === null || listRef === void 0 ? void 0 : listRef.current;\n      },\n\n      updatePosition: handleUpdatePosition,\n      open: handleOpen,\n      close: handleClose\n    };\n  });\n}\n\n//# sourceURL=webpack://rsuite/./src/Picker/utils.ts?");
+eval("\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nexports.__esModule = true;\nexports.createConcatChildrenFunction = createConcatChildrenFunction;\nexports.shouldDisplay = shouldDisplay;\nexports.usePickerClassName = usePickerClassName;\nexports.onMenuKeyDown = onMenuKeyDown;\nexports.useSearch = useSearch;\nexports.usePublicMethods = usePublicMethods;\nexports.useToggleKeyDownEvent = exports.useFocusItemValue = void 0;\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 _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n\nvar _trim = _interopRequireDefault(__webpack_require__(/*! lodash/trim */ \"./node_modules/lodash/trim.js\"));\n\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _find = _interopRequireDefault(__webpack_require__(/*! lodash/find */ \"./node_modules/lodash/find.js\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _domLib = __webpack_require__(/*! dom-lib */ \"./node_modules/dom-lib/esm/index.js\");\n\nvar defaultNodeKeys = {\n  valueKey: 'value',\n  childrenKey: 'children'\n};\n\nfunction createConcatChildrenFunction(node, nodeValue, nodeKeys) {\n  if (nodeKeys === void 0) {\n    nodeKeys = defaultNodeKeys;\n  }\n\n  var _nodeKeys = nodeKeys,\n      valueKey = _nodeKeys.valueKey,\n      childrenKey = _nodeKeys.childrenKey;\n  return function (data, children) {\n    if (nodeValue) {\n      node = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n        return nodeValue === item[valueKey];\n      });\n    }\n\n    node[childrenKey] = children;\n    return data.concat([]);\n  };\n}\n\nfunction shouldDisplay(label, searchKeyword) {\n  if (!(0, _trim.default)(searchKeyword)) {\n    return true;\n  }\n\n  var keyword = searchKeyword.toLocaleLowerCase();\n\n  if (typeof label === 'string' || typeof label === 'number') {\n    return (\"\" + label).toLocaleLowerCase().indexOf(keyword) >= 0;\n  } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {\n    var nodes = (0, _utils.reactToString)(label);\n    return nodes.join('').toLocaleLowerCase().indexOf(keyword) >= 0;\n  }\n\n  return false;\n}\n\n/**\n * The className of the assembled Toggle is on the Picker.\n */\nfunction usePickerClassName(props) {\n  var _withClassPrefix;\n\n  var name = props.name,\n      classPrefix = props.classPrefix,\n      className = props.className,\n      placement = props.placement,\n      appearance = props.appearance,\n      cleanable = props.cleanable,\n      block = props.block,\n      disabled = props.disabled,\n      countable = props.countable,\n      readOnly = props.readOnly,\n      plaintext = props.plaintext,\n      hasValue = props.hasValue,\n      rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"name\", \"classPrefix\", \"className\", \"placement\", \"appearance\", \"cleanable\", \"block\", \"disabled\", \"countable\", \"readOnly\", \"plaintext\", \"hasValue\"]);\n\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n      withClassPrefix = _useClassNames.withClassPrefix,\n      merge = _useClassNames.merge;\n\n  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix[\"placement-\" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix))); // Those props that're used for composing the className\n\n  var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext', 'name'])));\n  return [classes, usedClassNamePropKeys];\n}\n\n/**\n * Handling keyboard events...\n * @param event Keyboard event object\n * @param events Event callback functions\n */\nfunction onMenuKeyDown(event, events) {\n  var down = events.down,\n      up = events.up,\n      enter = events.enter,\n      del = events.del,\n      esc = events.esc,\n      right = events.right,\n      left = events.left;\n\n  switch (event.key) {\n    // down\n    case _utils.KEY_VALUES.DOWN:\n      down === null || down === void 0 ? void 0 : down(event);\n      event.preventDefault();\n      break;\n    // up\n\n    case _utils.KEY_VALUES.UP:\n      up === null || up === void 0 ? void 0 : up(event);\n      event.preventDefault();\n      break;\n    // enter\n\n    case _utils.KEY_VALUES.ENTER:\n      enter === null || enter === void 0 ? void 0 : enter(event);\n      event.preventDefault();\n      break;\n    // delete\n\n    case _utils.KEY_VALUES.BACKSPACE:\n      del === null || del === void 0 ? void 0 : del(event);\n      break;\n    // esc | tab\n\n    case _utils.KEY_VALUES.ESC:\n    case _utils.KEY_VALUES.TAB:\n      esc === null || esc === void 0 ? void 0 : esc(event);\n      break;\n    // left arrow\n\n    case _utils.KEY_VALUES.LEFT:\n      left === null || left === void 0 ? void 0 : left(event);\n      break;\n    // right arrow\n\n    case _utils.KEY_VALUES.RIGHT:\n      right === null || right === void 0 ? void 0 : right(event);\n      break;\n\n    default:\n  }\n}\n\n/**\n * Checks if the element has a vertical scrollbar.\n */\nfunction hasVerticalScroll(element) {\n  var scrollHeight = element.scrollHeight,\n      clientHeight = element.clientHeight;\n  return scrollHeight > clientHeight;\n}\n/**\n * Checks if the element is within the visible area of the container\n */\n\n\nfunction isVisible(element, container, direction) {\n  if (!hasVerticalScroll(container)) {\n    return true;\n  }\n\n  var _element$getBoundingC = element.getBoundingClientRect(),\n      top = _element$getBoundingC.top,\n      bottom = _element$getBoundingC.bottom,\n      height = _element$getBoundingC.height;\n\n  var _container$getBoundin = container.getBoundingClientRect(),\n      containerTop = _container$getBoundin.top,\n      containerBottom = _container$getBoundin.bottom;\n\n  if (direction === 'top') {\n    return top + height > containerTop;\n  }\n\n  return bottom - height < containerBottom;\n}\n\nfunction scrollTo(container, direction, step) {\n  var scrollTop = container.scrollTop;\n  container.scrollTop = direction === 'top' ? scrollTop - step : scrollTop + step;\n}\n/**\n * A hook that manages the focus state of the option.\n * @param defaultFocusItemValue\n * @param props\n */\n\n\nvar useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props) {\n  var _props$valueKey = props.valueKey,\n      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n      _props$focusableQuery = props.focusableQueryKey,\n      focusableQueryKey = _props$focusableQuery === void 0 ? '[data-key][aria-disabled=\"false\"]' : _props$focusableQuery,\n      _props$defaultLayer = props.defaultLayer,\n      defaultLayer = _props$defaultLayer === void 0 ? 0 : _props$defaultLayer,\n      data = props.data,\n      target = props.target,\n      rtl = props.rtl,\n      callback = props.callback,\n      _props$getParent = props.getParent,\n      getParent = _props$getParent === void 0 ? function (item) {\n    return item === null || item === void 0 ? void 0 : item.parent;\n  } : _props$getParent;\n\n  var _useState = (0, _react.useState)(defaultFocusItemValue),\n      focusItemValue = _useState[0],\n      setFocusItemValue = _useState[1];\n\n  var _useState2 = (0, _react.useState)(defaultLayer),\n      layer = _useState2[0],\n      setLayer = _useState2[1];\n\n  var _useState3 = (0, _react.useState)([]),\n      keys = _useState3[0],\n      setKeys = _useState3[1];\n\n  var getScrollContainer = (0, _react.useCallback)(function () {\n    var menu = (0, _isFunction.default)(target) ? target() : target; // For Cascader and MutiCascader\n\n    var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(\"[data-layer=\\\"\" + layer + \"\\\"]\");\n\n    if (subMenu) {\n      return subMenu;\n    } // For SelectPicker、CheckPicker、Autocomplete、InputPicker、TagPicker\n\n\n    return menu === null || menu === void 0 ? void 0 : menu.querySelector('[role=\"listbox\"]');\n  }, [layer, target]);\n  /**\n   * Get the elements visible in all options.\n   */\n\n  var getFocusableMenuItems = (0, _react.useCallback)(function () {\n    if (!target) {\n      return [];\n    }\n\n    var currentKeys = keys;\n\n    if (layer < 1) {\n      var popup = (0, _isFunction.default)(target) ? target() : target;\n      var rootMenu = popup === null || popup === void 0 ? void 0 : popup.querySelector('[data-layer=\"0\"]');\n\n      if (rootMenu) {\n        var _rootMenu$querySelect;\n\n        currentKeys = Array.from((_rootMenu$querySelect = rootMenu.querySelectorAll(focusableQueryKey)) !== null && _rootMenu$querySelect !== void 0 ? _rootMenu$querySelect : []).map(function (item) {\n          var _item$dataset;\n\n          return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;\n        });\n      } else {\n        var _popup$querySelectorA;\n\n        currentKeys = Array.from((_popup$querySelectorA = popup === null || popup === void 0 ? void 0 : popup.querySelectorAll(focusableQueryKey)) !== null && _popup$querySelectorA !== void 0 ? _popup$querySelectorA : []).map(function (item) {\n          var _item$dataset2;\n\n          return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;\n        });\n      }\n    } // 1. It is necessary to traverse the `keys` instead of `data` here to preserve the order of the array.\n    // 2. The values ​​in `keys` are all string, so the corresponding value of `data` should also be converted to string\n\n\n    return currentKeys.map(function (key) {\n      return (0, _find.default)(data, function (i) {\n        return \"\" + i[valueKey] === key;\n      });\n    });\n  }, [data, focusableQueryKey, keys, target, valueKey, layer]);\n  /**\n   * Get the index of the focus item.\n   */\n\n  var findFocusItemIndex = (0, _react.useCallback)(function (callback) {\n    var items = getFocusableMenuItems();\n\n    for (var i = 0; i < items.length; i += 1) {\n      var _items$i;\n\n      if ((0, _utils.shallowEqual)(focusItemValue, (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i[valueKey])) {\n        callback(items, i);\n        return;\n      }\n    }\n\n    callback(items, -1);\n  }, [focusItemValue, getFocusableMenuItems, valueKey]);\n  var scrollListItem = (0, _react.useCallback)(function (direction, itemValue, willOverflow) {\n    var container = getScrollContainer();\n    var item = container === null || container === void 0 ? void 0 : container.querySelector(\"[data-key=\\\"\" + itemValue + \"\\\"]\");\n\n    if (willOverflow && container) {\n      var scrollHeight = container.scrollHeight,\n          clientHeight = container.clientHeight;\n      container.scrollTop = direction === 'top' ? scrollHeight - clientHeight : 0;\n      return;\n    }\n\n    if (item && container) {\n      if (!isVisible(item, container, direction)) {\n        var height = (0, _domLib.getHeight)(item);\n        scrollTo(container, direction, height);\n      }\n    }\n  }, [getScrollContainer]);\n  var focusNextMenuItem = (0, _react.useCallback)(function (event) {\n    findFocusItemIndex(function (items, index) {\n      var willOverflow = index + 2 > items.length;\n      var nextIndex = willOverflow ? 0 : index + 1;\n      var focusItem = items[nextIndex];\n\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);\n        scrollListItem('bottom', focusItem[valueKey], willOverflow);\n      }\n    });\n  }, [callback, findFocusItemIndex, scrollListItem, valueKey]);\n  var focusPrevMenuItem = (0, _react.useCallback)(function (event) {\n    findFocusItemIndex(function (items, index) {\n      var willOverflow = index === 0;\n      var nextIndex = willOverflow ? items.length - 1 : index - 1;\n      var focusItem = items[nextIndex];\n\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);\n        scrollListItem('top', focusItem[valueKey], willOverflow);\n      }\n    });\n  }, [callback, findFocusItemIndex, scrollListItem, valueKey]);\n  var getSubMenuKeys = (0, _react.useCallback)(function (nextLayer) {\n    var menu = (0, _isFunction.default)(target) ? target() : target;\n    var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(\"[data-layer=\\\"\" + nextLayer + \"\\\"]\");\n\n    if (subMenu) {\n      var _Array$from;\n\n      return (_Array$from = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (item) {\n        var _item$dataset3;\n\n        return (_item$dataset3 = item.dataset) === null || _item$dataset3 === void 0 ? void 0 : _item$dataset3.key;\n      });\n    }\n\n    return null;\n  }, [focusableQueryKey, target]);\n  var focusNextLevelMenu = (0, _react.useCallback)(function (event) {\n    var nextLayer = layer + 1;\n    var nextKeys = getSubMenuKeys(nextLayer);\n\n    if (nextKeys) {\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      setFocusItemValue(nextKeys[0]);\n      callback === null || callback === void 0 ? void 0 : callback(nextKeys[0], event);\n    }\n  }, [callback, getSubMenuKeys, layer]);\n  var focusPrevLevelMenu = (0, _react.useCallback)(function (event) {\n    var nextLayer = layer - 1;\n    var nextKeys = getSubMenuKeys(nextLayer);\n\n    if (nextKeys) {\n      var _getParent;\n\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n        return item[valueKey] === focusItemValue;\n      });\n      var parentItemValue = (_getParent = getParent(focusItem)) === null || _getParent === void 0 ? void 0 : _getParent[valueKey];\n\n      if (parentItemValue) {\n        setFocusItemValue(parentItemValue);\n        callback === null || callback === void 0 ? void 0 : callback(parentItemValue, event);\n      }\n    }\n  }, [callback, data, focusItemValue, getParent, getSubMenuKeys, layer, valueKey]);\n  var handleKeyDown = (0, _react.useCallback)(function (event) {\n    var _onMenuKeyDown;\n\n    onMenuKeyDown(event, (_onMenuKeyDown = {\n      down: focusNextMenuItem,\n      up: focusPrevMenuItem\n    }, _onMenuKeyDown[rtl ? 'left' : 'right'] = focusNextLevelMenu, _onMenuKeyDown[rtl ? 'right' : 'left'] = focusPrevLevelMenu, _onMenuKeyDown));\n  }, [focusNextLevelMenu, focusNextMenuItem, focusPrevLevelMenu, focusPrevMenuItem, rtl]);\n  return {\n    focusItemValue: focusItemValue,\n    setFocusItemValue: setFocusItemValue,\n    layer: layer,\n    setLayer: setLayer,\n    keys: keys,\n    setKeys: setKeys,\n    onKeyDown: handleKeyDown\n  };\n};\n\nexports.useFocusItemValue = useFocusItemValue;\n\n/**\n * A hook to control the toggle keyboard operation\n * @param props\n */\nvar useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {\n  var _props$toggle = props.toggle,\n      toggle = _props$toggle === void 0 ? true : _props$toggle,\n      triggerRef = props.triggerRef,\n      targetRef = props.targetRef,\n      overlayRef = props.overlayRef,\n      searchInputRef = props.searchInputRef,\n      active = props.active,\n      readOnly = props.readOnly,\n      disabled = props.disabled,\n      onExit = props.onExit,\n      onOpen = props.onOpen,\n      onClose = props.onClose,\n      onKeyDown = props.onKeyDown,\n      onMenuKeyDown = props.onMenuKeyDown,\n      onMenuPressEnter = props.onMenuPressEnter,\n      onMenuPressBackspace = props.onMenuPressBackspace;\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current, _triggerRef$current$c;\n\n    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n  }, [onClose, triggerRef]);\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current2, _triggerRef$current2$;\n\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n  }, [onOpen, triggerRef]);\n  var handleToggleDropdown = (0, _react.useCallback)(function () {\n    if (active) {\n      handleClose();\n      return;\n    }\n\n    handleOpen();\n  }, [active, handleOpen, handleClose]);\n  var onToggle = (0, _react.useCallback)(function (event) {\n    // Keyboard events should not be processed when readOnly and disabled are set.\n    if (readOnly || disabled) {\n      return;\n    }\n\n    if (event.target === (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current)) {\n      // enter\n      if (toggle && event.key === _utils.KEY_VALUES.ENTER) {\n        handleToggleDropdown();\n      } // delete\n\n\n      if (event.key === _utils.KEY_VALUES.BACKSPACE) {\n        onExit === null || onExit === void 0 ? void 0 : onExit(event);\n      }\n    }\n\n    if (overlayRef !== null && overlayRef !== void 0 && overlayRef.current) {\n      // The keyboard operation callback on the menu.\n      onMenuKeyDown === null || onMenuKeyDown === void 0 ? void 0 : onMenuKeyDown(event);\n\n      if (event.key === _utils.KEY_VALUES.ENTER) {\n        onMenuPressEnter === null || onMenuPressEnter === void 0 ? void 0 : onMenuPressEnter(event);\n      }\n      /**\n       * There is no callback when typing the Backspace key in the search box.\n       * The default is to remove search keywords\n       */\n\n\n      if (event.key === _utils.KEY_VALUES.BACKSPACE && event.target !== (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current)) {\n        onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);\n      } // The search box gets focus when typing characters and numbers.\n\n\n      if (event.key.length === 1 && /\\w/.test(event.key)) {\n        var _event$target;\n\n        // Exclude Input\n        // eg: <SelectPicker renderExtraFooter={() => <Input />} />\n        if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) !== 'INPUT') {\n          var _searchInputRef$curre;\n\n          searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();\n        }\n      }\n    }\n\n    if (event.key === _utils.KEY_VALUES.ESC || event.key === _utils.KEY_VALUES.TAB) {\n      handleClose();\n    } // Native event callback\n\n\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n  }, [readOnly, disabled, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);\n  return onToggle;\n};\n\nexports.useToggleKeyDownEvent = useToggleKeyDownEvent;\n\n/**\n * A hook that handles search filter options\n */\nfunction useSearch(data, props) {\n  var labelKey = props.labelKey,\n      searchBy = props.searchBy,\n      callback = props.callback; // Use search keywords to filter options.\n\n  var _useState4 = (0, _react.useState)(''),\n      searchKeyword = _useState4[0],\n      setSearchKeyword = _useState4[1];\n\n  var resetSearch = (0, _react.useCallback)(function () {\n    setSearchKeyword('');\n  }, []);\n  /**\n   * Index of keyword  in `label`\n   * @param {node} label\n   */\n\n  var checkShouldDisplay = (0, _react.useCallback)(function (item, keyword) {\n    var checkValue = typeof item === 'object' ? item === null || item === void 0 ? void 0 : item[labelKey] : String(item);\n\n    var _keyword = (0, _isUndefined.default)(keyword) ? searchKeyword : keyword;\n\n    if (typeof searchBy === 'function') {\n      return searchBy(_keyword, checkValue, item);\n    }\n\n    return shouldDisplay(checkValue, _keyword);\n  }, [labelKey, searchBy, searchKeyword]);\n  var filteredData = (0, _react.useMemo)(function () {\n    return data.filter(function (item) {\n      return checkShouldDisplay(item, searchKeyword);\n    });\n  }, [checkShouldDisplay, data, searchKeyword]);\n\n  var handleSearch = function handleSearch(searchKeyword, event) {\n    var filteredData = data.filter(function (item) {\n      return checkShouldDisplay(item, searchKeyword);\n    });\n    setSearchKeyword(searchKeyword);\n    callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);\n  };\n\n  return {\n    searchKeyword: searchKeyword,\n    filteredData: filteredData,\n    checkShouldDisplay: checkShouldDisplay,\n    handleSearch: handleSearch,\n    resetSearch: resetSearch\n  };\n}\n\n/**\n * A hook of the exposed method of Picker\n */\nfunction usePublicMethods(ref, parmas) {\n  var triggerRef = parmas.triggerRef,\n      overlayRef = parmas.overlayRef,\n      targetRef = parmas.targetRef,\n      rootRef = parmas.rootRef,\n      listRef = parmas.listRef,\n      inline = parmas.inline;\n  var handleOpen = (0, _react.useCallback)(function () {\n    var _triggerRef$current3;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.open();\n  }, [triggerRef]);\n  var handleClose = (0, _react.useCallback)(function () {\n    var _triggerRef$current4;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.close();\n  }, [triggerRef]);\n  var handleUpdatePosition = (0, _react.useCallback)(function () {\n    var _triggerRef$current5;\n\n    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();\n  }, [triggerRef]);\n  (0, _react.useImperativeHandle)(ref, function () {\n    // Tree and CheckTree\n    if (inline) {\n      return {\n        get root() {\n          var _triggerRef$current$r, _triggerRef$current6;\n\n          return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current$r = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root) !== null && _triggerRef$current$r !== void 0 ? _triggerRef$current$r : null;\n        },\n\n        get list() {\n          if (!(listRef !== null && listRef !== void 0 && listRef.current)) {\n            throw new Error('The list is not found, please set `virtualized` for the component.');\n          }\n\n          return listRef === null || listRef === void 0 ? void 0 : listRef.current;\n        }\n\n      };\n    }\n\n    return {\n      get root() {\n        var _ref, _triggerRef$current7;\n\n        return (_ref = (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) || (triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current7 = triggerRef.current) === null || _triggerRef$current7 === void 0 ? void 0 : _triggerRef$current7.root)) !== null && _ref !== void 0 ? _ref : null;\n      },\n\n      get overlay() {\n        var _overlayRef$current;\n\n        if (!(overlayRef !== null && overlayRef !== void 0 && overlayRef.current)) {\n          throw new Error('The overlay is not found. Please confirm whether the picker is open.');\n        }\n\n        return (_overlayRef$current = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) !== null && _overlayRef$current !== void 0 ? _overlayRef$current : null;\n      },\n\n      get target() {\n        var _targetRef$current;\n\n        return (_targetRef$current = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current !== void 0 ? _targetRef$current : null;\n      },\n\n      get list() {\n        if (!(listRef !== null && listRef !== void 0 && listRef.current)) {\n          throw new Error(\"\\n            The list is not found.\\n            1.Please set virtualized for the component.\\n            2.Please confirm whether the picker is open.\\n          \");\n        }\n\n        return listRef === null || listRef === void 0 ? void 0 : listRef.current;\n      },\n\n      updatePosition: handleUpdatePosition,\n      open: handleOpen,\n      close: handleClose\n    };\n  });\n}\n\n//# sourceURL=webpack://rsuite/./src/Picker/utils.ts?");
 
 /***/ }),