rsuite 4.10.9 → 4.10.10

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+<a name="4.10.10"></a>
+## [4.10.10](https://github.com/rsuite/rsuite/compare/v4.10.9...v4.10.10) (2022-03-22)
+
+
+### Bug Fixes
+
+* fix SelectPicker when search is controlled and exit Dropdown without resetting external search ([#2409](https://github.com/rsuite/rsuite/issues/2409)) ([309ebe5](https://github.com/rsuite/rsuite/commit/309ebe5))
+
+
+
 ## [4.10.9](https://github.com/rsuite/rsuite/compare/v4.10.8...v4.10.9) (2022-03-11)
 
 

package/dist/rsuite.js

@@ -9772,7 +9772,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _inheritsLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/inheritsLoose */ \"./node_modules/@babel/runtime/helpers/inheritsLoose.js\"));\n\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar React = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\n\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _DropdownMenu = _interopRequireWildcard(__webpack_require__(/*! ../Picker/DropdownMenu */ \"./src/Picker/DropdownMenu.tsx\"));\n\nvar _propTypes2 = __webpack_require__(/*! ../Picker/propTypes */ \"./src/Picker/propTypes.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/SelectPicker/SelectPicker.tsx\";\n\nvar SelectPicker =\n/*#__PURE__*/\nfunction (_React$Component) {\n  (0, _inheritsLoose2.default)(SelectPicker, _React$Component);\n\n  function SelectPicker(props) {\n    var _this;\n\n    _this = _React$Component.call(this, props) || this;\n    _this.positionRef = void 0;\n    _this.menuContainerRef = void 0;\n    _this.searchBarContainerRef = void 0;\n    _this.toggleRef = void 0;\n    _this.triggerRef = void 0;\n\n    _this.getFocusableMenuItems = function () {\n      var menuItems = _this.menuContainerRef.current.menuItems;\n\n      if (!menuItems) {\n        return [];\n      }\n\n      var items = Object.values(menuItems).map(function (item) {\n        return item.props.getItemData();\n      });\n      return (0, _treeUtils.filterNodesOfTree)(items, function (item) {\n        return _this.shouldDisplay(item);\n      });\n    };\n\n    _this.getToggleInstance = function () {\n      return _this.toggleRef.current;\n    };\n\n    _this.getPositionInstance = function () {\n      return _this.positionRef.current;\n    };\n\n    _this.focusNextMenuItem = function () {\n      var valueKey = _this.props.valueKey;\n\n      _this.findNode(function (items, index) {\n        var focusItem = items[index + 1];\n\n        if (!(0, _isUndefined2.default)(focusItem)) {\n          _this.setState({\n            focusItemValue: focusItem[valueKey]\n          });\n        }\n      });\n    };\n\n    _this.focusPrevMenuItem = function () {\n      var valueKey = _this.props.valueKey;\n\n      _this.findNode(function (items, index) {\n        var focusItem = items[index - 1];\n\n        if (!(0, _isUndefined2.default)(focusItem)) {\n          _this.setState({\n            focusItemValue: focusItem[valueKey]\n          });\n        }\n      });\n    };\n\n    _this.selectFocusMenuItem = function (event) {\n      var focusItemValue = _this.state.focusItemValue;\n      var _this$props = _this.props,\n          data = _this$props.data,\n          valueKey = _this$props.valueKey;\n\n      if (!focusItemValue) {\n        return;\n      } // Find active `MenuItem` by `value`\n\n\n      var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n        return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n      });\n\n      _this.setState({\n        value: focusItemValue\n      });\n\n      _this.handleSelect(focusItemValue, focusItem, event);\n\n      _this.handleChange(focusItemValue, event);\n\n      _this.handleCloseDropdown();\n    };\n\n    _this.handleKeyDown = function (event) {\n      var _this$toggleRef, _this$toggleRef$curre, _this$toggleRef$curre2;\n\n      var _this$state = _this.state,\n          focusItemValue = _this$state.focusItemValue,\n          active = _this$state.active; // enter\n\n      if ((!focusItemValue || !active) && event.keyCode === 13) {\n        _this.handleToggleDropdown();\n      } // delete\n\n\n      if (event.keyCode === 8 && event.target === ((_this$toggleRef = _this.toggleRef) === null || _this$toggleRef === void 0 ? void 0 : (_this$toggleRef$curre = _this$toggleRef.current) === null || _this$toggleRef$curre === void 0 ? void 0 : (_this$toggleRef$curre2 = _this$toggleRef$curre.getToggleNode) === null || _this$toggleRef$curre2 === void 0 ? void 0 : _this$toggleRef$curre2.call(_this$toggleRef$curre))) {\n        _this.handleClean(event);\n      }\n\n      if (!_this.menuContainerRef.current) {\n        return;\n      }\n\n      (0, _Picker.onMenuKeyDown)(event, {\n        down: _this.focusNextMenuItem,\n        up: _this.focusPrevMenuItem,\n        enter: _this.selectFocusMenuItem,\n        esc: _this.handleCloseDropdown\n      });\n    };\n\n    _this.handleItemSelect = function (value, item, event) {\n      var nextState = {\n        value: value,\n        focusItemValue: value\n      };\n\n      _this.setState(nextState);\n\n      _this.handleSelect(value, item, event);\n\n      _this.handleChange(value, event);\n\n      _this.handleCloseDropdown();\n    };\n\n    _this.handleSelect = function (value, item, event) {\n      var _this$props$onSelect, _this$props2, _this$toggleRef$curre3;\n\n      (_this$props$onSelect = (_this$props2 = _this.props).onSelect) === null || _this$props$onSelect === void 0 ? void 0 : _this$props$onSelect.call(_this$props2, value, item, event);\n      (_this$toggleRef$curre3 = _this.toggleRef.current) === null || _this$toggleRef$curre3 === void 0 ? void 0 : _this$toggleRef$curre3.onFocus();\n    };\n\n    _this.handleSearch = function (searchKeyword, event) {\n      var _filteredData$;\n\n      var _this$props3 = _this.props,\n          onSearch = _this$props3.onSearch,\n          valueKey = _this$props3.valueKey,\n          data = _this$props3.data;\n      var filteredData = (0, _treeUtils.filterNodesOfTree)(data, function (item) {\n        return _this.shouldDisplay(item, searchKeyword);\n      });\n\n      _this.setState({\n        searchKeyword: searchKeyword,\n        focusItemValue: filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]\n      });\n\n      onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n    };\n\n    _this.handleCloseDropdown = function () {\n      var _this$triggerRef$curr, _this$triggerRef$curr2;\n\n      (_this$triggerRef$curr = _this.triggerRef.current) === null || _this$triggerRef$curr === void 0 ? void 0 : (_this$triggerRef$curr2 = _this$triggerRef$curr.hide) === null || _this$triggerRef$curr2 === void 0 ? void 0 : _this$triggerRef$curr2.call(_this$triggerRef$curr);\n    };\n\n    _this.handleOpenDropdown = function () {\n      var _this$triggerRef$curr3, _this$triggerRef$curr4;\n\n      (_this$triggerRef$curr3 = _this.triggerRef.current) === null || _this$triggerRef$curr3 === void 0 ? void 0 : (_this$triggerRef$curr4 = _this$triggerRef$curr3.show) === null || _this$triggerRef$curr4 === void 0 ? void 0 : _this$triggerRef$curr4.call(_this$triggerRef$curr3);\n    };\n\n    _this.open = function () {\n      var _this$handleOpenDropd, _this2;\n\n      (_this$handleOpenDropd = (_this2 = _this).handleOpenDropdown) === null || _this$handleOpenDropd === void 0 ? void 0 : _this$handleOpenDropd.call(_this2);\n    };\n\n    _this.close = function () {\n      var _this$handleCloseDrop, _this3;\n\n      (_this$handleCloseDrop = (_this3 = _this).handleCloseDropdown) === null || _this$handleCloseDrop === void 0 ? void 0 : _this$handleCloseDrop.call(_this3);\n    };\n\n    _this.handleToggleDropdown = function () {\n      var active = _this.state.active;\n\n      if (active) {\n        _this.handleCloseDropdown();\n\n        return;\n      }\n\n      _this.handleOpenDropdown();\n    };\n\n    _this.handleChange = function (value, event) {\n      var _this$props$onChange, _this$props4;\n\n      (_this$props$onChange = (_this$props4 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props4, value, event);\n    };\n\n    _this.handleClean = function (event) {\n      var _this$props5 = _this.props,\n          disabled = _this$props5.disabled,\n          cleanable = _this$props5.cleanable;\n\n      if (disabled || !cleanable) {\n        return;\n      }\n\n      var nextState = {\n        value: null,\n        focusItemValue: null\n      };\n\n      _this.setState(nextState);\n\n      _this.handleChange(null, event);\n    };\n\n    _this.handleExit = function () {\n      var _this$props$onClose, _this$props6;\n\n      _this.setState({\n        searchKeyword: '',\n        active: false\n      });\n\n      (_this$props$onClose = (_this$props6 = _this.props).onClose) === null || _this$props$onClose === void 0 ? void 0 : _this$props$onClose.call(_this$props6);\n    };\n\n    _this.handleOpen = function () {\n      var _this$props$onOpen, _this$props7;\n\n      var value = _this.getValue();\n\n      _this.setState({\n        active: true,\n        focusItemValue: value\n      });\n\n      (_this$props$onOpen = (_this$props7 = _this.props).onOpen) === null || _this$props$onOpen === void 0 ? void 0 : _this$props$onOpen.call(_this$props7);\n    };\n\n    _this.addPrefix = function (name) {\n      return (0, _utils.prefix)(_this.props.classPrefix)(name);\n    };\n\n    var _value = props.value,\n        defaultValue = props.defaultValue,\n        groupBy = props.groupBy,\n        _valueKey = props.valueKey,\n        labelKey = props.labelKey;\n    var nextValue = _value || defaultValue;\n    _this.state = {\n      value: nextValue,\n      focusItemValue: nextValue,\n      searchKeyword: ''\n    };\n    _this.positionRef = React.createRef();\n    _this.menuContainerRef = React.createRef();\n    _this.toggleRef = React.createRef();\n    _this.triggerRef = React.createRef(); // for test\n\n    _this.searchBarContainerRef = React.createRef();\n\n    if (groupBy === _valueKey || groupBy === labelKey) {\n      throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n    }\n\n    return _this;\n  }\n\n  var _proto = SelectPicker.prototype;\n\n  _proto.getValue = function getValue() {\n    var value = this.props.value;\n    return (0, _isUndefined2.default)(value) ? this.state.value : value;\n  };\n\n  /**\n   * Index of keyword  in `label`\n   * @param {node} label\n   */\n  _proto.shouldDisplay = function shouldDisplay(item, word) {\n    var _this$props8 = this.props,\n        searchBy = _this$props8.searchBy,\n        labelKey = _this$props8.labelKey;\n    var label = item === null || item === void 0 ? void 0 : item[labelKey];\n    var searchKeyword = typeof word === 'undefined' ? this.state.searchKeyword : word;\n\n    if (typeof searchBy === 'function') {\n      return searchBy(searchKeyword, label, item);\n    }\n\n    return (0, _Picker.shouldDisplay)(label, searchKeyword);\n  };\n\n  _proto.findNode = function findNode(focus) {\n    var items = this.getFocusableMenuItems();\n    var valueKey = this.props.valueKey;\n    var focusItemValue = this.state.focusItemValue;\n\n    for (var i = 0; i < items.length; i += 1) {\n      if ((0, _shallowEqual.default)(focusItemValue, items[i][valueKey])) {\n        focus(items, i);\n        return;\n      }\n    }\n\n    focus(items, -1);\n  };\n\n  _proto.renderDropdownMenu = function renderDropdownMenu() {\n    var _this4 = this;\n\n    var _this$props9 = this.props,\n        data = _this$props9.data,\n        groupBy = _this$props9.groupBy,\n        searchable = _this$props9.searchable,\n        locale = _this$props9.locale,\n        renderMenu = _this$props9.renderMenu,\n        renderExtraFooter = _this$props9.renderExtraFooter,\n        menuClassName = _this$props9.menuClassName,\n        menuStyle = _this$props9.menuStyle,\n        menuAutoWidth = _this$props9.menuAutoWidth,\n        sort = _this$props9.sort,\n        virtualized = _this$props9.virtualized;\n    var focusItemValue = this.state.focusItemValue;\n    var classes = (0, _classnames.default)(this.addPrefix('select-menu'), menuClassName);\n    var filteredData = (0, _treeUtils.filterNodesOfTree)(data, function (item) {\n      return _this4.shouldDisplay(item);\n    }); // Create a tree structure data when set `groupBy`\n\n    if (groupBy) {\n      filteredData = (0, _utils.getDataGroupBy)(filteredData, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      filteredData = filteredData.sort(sort(false));\n    }\n\n    var menuProps = (0, _pick2.default)(this.props, Object.keys((0, _omit2.default)(_DropdownMenu.dropdownMenuPropTypes, ['className', 'style', 'classPrefix'])));\n    var menu = filteredData.length ? React.createElement(_DropdownMenu.default, (0, _extends2.default)({}, menuProps, {\n      classPrefix: this.addPrefix('select-menu'),\n      dropdownMenuItemClassPrefix: this.addPrefix('select-menu-item'),\n      dropdownMenuItemComponentClass: _Picker.DropdownMenuItem,\n      ref: this.menuContainerRef,\n      activeItemValues: [this.getValue()],\n      focusItemValue: focusItemValue,\n      data: filteredData,\n      group: !(0, _isUndefined2.default)(groupBy),\n      onSelect: this.handleItemSelect,\n      virtualized: virtualized,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 335\n      },\n      __self: this\n    })) : React.createElement(\"div\", {\n      className: this.addPrefix('none'),\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 349\n      },\n      __self: this\n    }, locale.noResultsText);\n    return React.createElement(_Picker.MenuWrapper, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: menuStyle,\n      onKeyDown: this.handleKeyDown,\n      getToggleInstance: this.getToggleInstance,\n      getPositionInstance: this.getPositionInstance,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 353\n      },\n      __self: this\n    }, searchable && React.createElement(_Picker.SearchBar, {\n      ref: this.searchBarContainerRef,\n      placeholder: locale.searchPlaceholder,\n      onChange: this.handleSearch,\n      value: this.state.searchKeyword,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 362\n      },\n      __self: this\n    }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  _proto.render = function render() {\n    var _this$props10 = this.props,\n        data = _this$props10.data,\n        valueKey = _this$props10.valueKey,\n        labelKey = _this$props10.labelKey,\n        placeholder = _this$props10.placeholder,\n        renderValue = _this$props10.renderValue,\n        disabled = _this$props10.disabled,\n        cleanable = _this$props10.cleanable,\n        locale = _this$props10.locale,\n        toggleComponentClass = _this$props10.toggleComponentClass,\n        style = _this$props10.style,\n        onEntered = _this$props10.onEntered,\n        onExited = _this$props10.onExited,\n        onClean = _this$props10.onClean,\n        positionRef = _this$props10.positionRef,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props10, [\"data\", \"valueKey\", \"labelKey\", \"placeholder\", \"renderValue\", \"disabled\", \"cleanable\", \"locale\", \"toggleComponentClass\", \"style\", \"onEntered\", \"onExited\", \"onClean\", \"positionRef\"]);\n    var unhandled = (0, _utils.getUnhandledProps)(SelectPicker, rest);\n    var value = this.getValue(); // Find active `MenuItem` by `value`\n\n    var activeItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\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     */\n\n    var hasValue = !!activeItem || !(0, _isNil2.default)(value) && (0, _isFunction2.default)(renderValue);\n    var selectedElement = placeholder;\n\n    if (activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey]) {\n      selectedElement = activeItem[labelKey];\n    }\n\n    if (!(0, _isNil2.default)(value) && (0, _isFunction2.default)(renderValue)) {\n      selectedElement = renderValue(value, activeItem, selectedElement);\n\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValue = false;\n      }\n    }\n\n    var classes = (0, _Picker.getToggleWrapperClassName)('select', this.addPrefix, this.props, hasValue);\n    return React.createElement(_Picker.PickerToggleTrigger, {\n      pickerProps: this.props,\n      ref: this.triggerRef,\n      positionRef: (0, _utils.mergeRefs)(this.positionRef, positionRef),\n      onEntered: (0, _utils.createChainedFunction)(this.handleOpen, onEntered),\n      onExited: (0, _utils.createChainedFunction)(this.handleExit, onExited),\n      speaker: this.renderDropdownMenu(),\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 423\n      },\n      __self: this\n    }, React.createElement(\"div\", {\n      className: classes,\n      style: style,\n      tabIndex: -1,\n      role: \"menu\",\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 431\n      },\n      __self: this\n    }, React.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, unhandled, {\n      ref: this.toggleRef,\n      onClean: (0, _utils.createChainedFunction)(this.handleClean, onClean),\n      onKeyDown: this.handleKeyDown,\n      componentClass: toggleComponentClass,\n      cleanable: cleanable && !disabled,\n      hasValue: hasValue,\n      active: this.state.active,\n      \"aria-disabled\": disabled,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 432\n      },\n      __self: this\n    }), selectedElement || locale.placeholder)));\n  };\n\n  return SelectPicker;\n}(React.Component);\n\nSelectPicker.propTypes = (0, _extends2.default)({}, _propTypes2.listPickerPropTypes, {\n  menuAutoWidth: _propTypes.default.bool,\n  maxHeight: _propTypes.default.number,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n\n  /**\n   * group by key in `data`\n   */\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  searchable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nSelectPicker.defaultProps = (0, _extends2.default)({}, _propTypes2.listPickerDefaultProps, {\n  searchable: true,\n  menuAutoWidth: true,\n  virtualized: true,\n  maxHeight: 320,\n  locale: {\n    placeholder: 'Select',\n    searchPlaceholder: 'Search',\n    noResultsText: 'No results found'\n  }\n});\n\nvar _default = (0, _utils.defaultProps)({\n  classPrefix: 'picker'\n})(SelectPicker);\n\nexports.default = _default;\nmodule.exports = exports.default;\n\n//# sourceURL=webpack://rsuite/./src/SelectPicker/SelectPicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\n\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\n\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\n\nvar _inheritsLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/inheritsLoose */ \"./node_modules/@babel/runtime/helpers/inheritsLoose.js\"));\n\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\n\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\n\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\n\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\n\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\n\nvar React = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\n\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\n\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\n\nvar _shallowEqual = _interopRequireDefault(__webpack_require__(/*! ../utils/shallowEqual */ \"./src/utils/shallowEqual.ts\"));\n\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\n\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\n\nvar _Picker = __webpack_require__(/*! ../Picker */ \"./src/Picker/index.ts\");\n\nvar _DropdownMenu = _interopRequireWildcard(__webpack_require__(/*! ../Picker/DropdownMenu */ \"./src/Picker/DropdownMenu.tsx\"));\n\nvar _propTypes2 = __webpack_require__(/*! ../Picker/propTypes */ \"./src/Picker/propTypes.ts\");\n\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/SelectPicker/SelectPicker.tsx\";\n\nvar SelectPicker =\n/*#__PURE__*/\nfunction (_React$Component) {\n  (0, _inheritsLoose2.default)(SelectPicker, _React$Component);\n\n  function SelectPicker(props) {\n    var _this;\n\n    _this = _React$Component.call(this, props) || this;\n    _this.positionRef = void 0;\n    _this.menuContainerRef = void 0;\n    _this.searchBarContainerRef = void 0;\n    _this.toggleRef = void 0;\n    _this.triggerRef = void 0;\n\n    _this.getFocusableMenuItems = function () {\n      var menuItems = _this.menuContainerRef.current.menuItems;\n\n      if (!menuItems) {\n        return [];\n      }\n\n      var items = Object.values(menuItems).map(function (item) {\n        return item.props.getItemData();\n      });\n      return (0, _treeUtils.filterNodesOfTree)(items, function (item) {\n        return _this.shouldDisplay(item);\n      });\n    };\n\n    _this.getToggleInstance = function () {\n      return _this.toggleRef.current;\n    };\n\n    _this.getPositionInstance = function () {\n      return _this.positionRef.current;\n    };\n\n    _this.focusNextMenuItem = function () {\n      var valueKey = _this.props.valueKey;\n\n      _this.findNode(function (items, index) {\n        var focusItem = items[index + 1];\n\n        if (!(0, _isUndefined2.default)(focusItem)) {\n          _this.setState({\n            focusItemValue: focusItem[valueKey]\n          });\n        }\n      });\n    };\n\n    _this.focusPrevMenuItem = function () {\n      var valueKey = _this.props.valueKey;\n\n      _this.findNode(function (items, index) {\n        var focusItem = items[index - 1];\n\n        if (!(0, _isUndefined2.default)(focusItem)) {\n          _this.setState({\n            focusItemValue: focusItem[valueKey]\n          });\n        }\n      });\n    };\n\n    _this.selectFocusMenuItem = function (event) {\n      var focusItemValue = _this.state.focusItemValue;\n      var _this$props = _this.props,\n          data = _this$props.data,\n          valueKey = _this$props.valueKey;\n\n      if (!focusItemValue) {\n        return;\n      } // Find active `MenuItem` by `value`\n\n\n      var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n        return (0, _shallowEqual.default)(item[valueKey], focusItemValue);\n      });\n\n      _this.setState({\n        value: focusItemValue\n      });\n\n      _this.handleSelect(focusItemValue, focusItem, event);\n\n      _this.handleChange(focusItemValue, event);\n\n      _this.handleCloseDropdown();\n    };\n\n    _this.handleKeyDown = function (event) {\n      var _this$toggleRef, _this$toggleRef$curre, _this$toggleRef$curre2;\n\n      var _this$state = _this.state,\n          focusItemValue = _this$state.focusItemValue,\n          active = _this$state.active; // enter\n\n      if ((!focusItemValue || !active) && event.keyCode === 13) {\n        _this.handleToggleDropdown();\n      } // delete\n\n\n      if (event.keyCode === 8 && event.target === ((_this$toggleRef = _this.toggleRef) === null || _this$toggleRef === void 0 ? void 0 : (_this$toggleRef$curre = _this$toggleRef.current) === null || _this$toggleRef$curre === void 0 ? void 0 : (_this$toggleRef$curre2 = _this$toggleRef$curre.getToggleNode) === null || _this$toggleRef$curre2 === void 0 ? void 0 : _this$toggleRef$curre2.call(_this$toggleRef$curre))) {\n        _this.handleClean(event);\n      }\n\n      if (!_this.menuContainerRef.current) {\n        return;\n      }\n\n      (0, _Picker.onMenuKeyDown)(event, {\n        down: _this.focusNextMenuItem,\n        up: _this.focusPrevMenuItem,\n        enter: _this.selectFocusMenuItem,\n        esc: _this.handleCloseDropdown\n      });\n    };\n\n    _this.handleItemSelect = function (value, item, event) {\n      var nextState = {\n        value: value,\n        focusItemValue: value\n      };\n\n      _this.setState(nextState);\n\n      _this.handleSelect(value, item, event);\n\n      _this.handleChange(value, event);\n\n      _this.handleCloseDropdown();\n    };\n\n    _this.handleSelect = function (value, item, event) {\n      var _this$props$onSelect, _this$props2, _this$toggleRef$curre3;\n\n      (_this$props$onSelect = (_this$props2 = _this.props).onSelect) === null || _this$props$onSelect === void 0 ? void 0 : _this$props$onSelect.call(_this$props2, value, item, event);\n      (_this$toggleRef$curre3 = _this.toggleRef.current) === null || _this$toggleRef$curre3 === void 0 ? void 0 : _this$toggleRef$curre3.onFocus();\n    };\n\n    _this.handleSearch = function (searchKeyword, event) {\n      var _filteredData$;\n\n      var _this$props3 = _this.props,\n          onSearch = _this$props3.onSearch,\n          valueKey = _this$props3.valueKey,\n          data = _this$props3.data;\n      var filteredData = (0, _treeUtils.filterNodesOfTree)(data, function (item) {\n        return _this.shouldDisplay(item, searchKeyword);\n      });\n\n      _this.setState({\n        searchKeyword: searchKeyword,\n        focusItemValue: filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]\n      });\n\n      onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n    };\n\n    _this.handleCloseDropdown = function () {\n      var _this$triggerRef$curr, _this$triggerRef$curr2;\n\n      (_this$triggerRef$curr = _this.triggerRef.current) === null || _this$triggerRef$curr === void 0 ? void 0 : (_this$triggerRef$curr2 = _this$triggerRef$curr.hide) === null || _this$triggerRef$curr2 === void 0 ? void 0 : _this$triggerRef$curr2.call(_this$triggerRef$curr);\n    };\n\n    _this.handleOpenDropdown = function () {\n      var _this$triggerRef$curr3, _this$triggerRef$curr4;\n\n      (_this$triggerRef$curr3 = _this.triggerRef.current) === null || _this$triggerRef$curr3 === void 0 ? void 0 : (_this$triggerRef$curr4 = _this$triggerRef$curr3.show) === null || _this$triggerRef$curr4 === void 0 ? void 0 : _this$triggerRef$curr4.call(_this$triggerRef$curr3);\n    };\n\n    _this.open = function () {\n      var _this$handleOpenDropd, _this2;\n\n      (_this$handleOpenDropd = (_this2 = _this).handleOpenDropdown) === null || _this$handleOpenDropd === void 0 ? void 0 : _this$handleOpenDropd.call(_this2);\n    };\n\n    _this.close = function () {\n      var _this$handleCloseDrop, _this3;\n\n      (_this$handleCloseDrop = (_this3 = _this).handleCloseDropdown) === null || _this$handleCloseDrop === void 0 ? void 0 : _this$handleCloseDrop.call(_this3);\n    };\n\n    _this.handleToggleDropdown = function () {\n      var active = _this.state.active;\n\n      if (active) {\n        _this.handleCloseDropdown();\n\n        return;\n      }\n\n      _this.handleOpenDropdown();\n    };\n\n    _this.handleChange = function (value, event) {\n      var _this$props$onChange, _this$props4;\n\n      (_this$props$onChange = (_this$props4 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props4, value, event);\n    };\n\n    _this.handleClean = function (event) {\n      var _this$props5 = _this.props,\n          disabled = _this$props5.disabled,\n          cleanable = _this$props5.cleanable;\n\n      if (disabled || !cleanable) {\n        return;\n      }\n\n      var nextState = {\n        value: null,\n        focusItemValue: null\n      };\n\n      _this.setState(nextState);\n\n      _this.handleChange(null, event);\n    };\n\n    _this.handleExit = function () {\n      var _this$props$onSearch, _this$props6, _this$props$onClose, _this$props7;\n\n      _this.setState({\n        searchKeyword: '',\n        active: false\n      });\n\n      (_this$props$onSearch = (_this$props6 = _this.props).onSearch) === null || _this$props$onSearch === void 0 ? void 0 : _this$props$onSearch.call(_this$props6, '');\n      (_this$props$onClose = (_this$props7 = _this.props).onClose) === null || _this$props$onClose === void 0 ? void 0 : _this$props$onClose.call(_this$props7);\n    };\n\n    _this.handleOpen = function () {\n      var _this$props$onOpen, _this$props8;\n\n      var value = _this.getValue();\n\n      _this.setState({\n        active: true,\n        focusItemValue: value\n      });\n\n      (_this$props$onOpen = (_this$props8 = _this.props).onOpen) === null || _this$props$onOpen === void 0 ? void 0 : _this$props$onOpen.call(_this$props8);\n    };\n\n    _this.addPrefix = function (name) {\n      return (0, _utils.prefix)(_this.props.classPrefix)(name);\n    };\n\n    var _value = props.value,\n        defaultValue = props.defaultValue,\n        groupBy = props.groupBy,\n        _valueKey = props.valueKey,\n        labelKey = props.labelKey;\n    var nextValue = _value || defaultValue;\n    _this.state = {\n      value: nextValue,\n      focusItemValue: nextValue,\n      searchKeyword: ''\n    };\n    _this.positionRef = React.createRef();\n    _this.menuContainerRef = React.createRef();\n    _this.toggleRef = React.createRef();\n    _this.triggerRef = React.createRef(); // for test\n\n    _this.searchBarContainerRef = React.createRef();\n\n    if (groupBy === _valueKey || groupBy === labelKey) {\n      throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n    }\n\n    return _this;\n  }\n\n  var _proto = SelectPicker.prototype;\n\n  _proto.getValue = function getValue() {\n    var value = this.props.value;\n    return (0, _isUndefined2.default)(value) ? this.state.value : value;\n  };\n\n  /**\n   * Index of keyword  in `label`\n   * @param {node} label\n   */\n  _proto.shouldDisplay = function shouldDisplay(item, word) {\n    var _this$props9 = this.props,\n        searchBy = _this$props9.searchBy,\n        labelKey = _this$props9.labelKey;\n    var label = item === null || item === void 0 ? void 0 : item[labelKey];\n    var searchKeyword = typeof word === 'undefined' ? this.state.searchKeyword : word;\n\n    if (typeof searchBy === 'function') {\n      return searchBy(searchKeyword, label, item);\n    }\n\n    return (0, _Picker.shouldDisplay)(label, searchKeyword);\n  };\n\n  _proto.findNode = function findNode(focus) {\n    var items = this.getFocusableMenuItems();\n    var valueKey = this.props.valueKey;\n    var focusItemValue = this.state.focusItemValue;\n\n    for (var i = 0; i < items.length; i += 1) {\n      if ((0, _shallowEqual.default)(focusItemValue, items[i][valueKey])) {\n        focus(items, i);\n        return;\n      }\n    }\n\n    focus(items, -1);\n  };\n\n  _proto.renderDropdownMenu = function renderDropdownMenu() {\n    var _this4 = this;\n\n    var _this$props10 = this.props,\n        data = _this$props10.data,\n        groupBy = _this$props10.groupBy,\n        searchable = _this$props10.searchable,\n        locale = _this$props10.locale,\n        renderMenu = _this$props10.renderMenu,\n        renderExtraFooter = _this$props10.renderExtraFooter,\n        menuClassName = _this$props10.menuClassName,\n        menuStyle = _this$props10.menuStyle,\n        menuAutoWidth = _this$props10.menuAutoWidth,\n        sort = _this$props10.sort,\n        virtualized = _this$props10.virtualized;\n    var focusItemValue = this.state.focusItemValue;\n    var classes = (0, _classnames.default)(this.addPrefix('select-menu'), menuClassName);\n    var filteredData = (0, _treeUtils.filterNodesOfTree)(data, function (item) {\n      return _this4.shouldDisplay(item);\n    }); // Create a tree structure data when set `groupBy`\n\n    if (groupBy) {\n      filteredData = (0, _utils.getDataGroupBy)(filteredData, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      filteredData = filteredData.sort(sort(false));\n    }\n\n    var menuProps = (0, _pick2.default)(this.props, Object.keys((0, _omit2.default)(_DropdownMenu.dropdownMenuPropTypes, ['className', 'style', 'classPrefix'])));\n    var menu = filteredData.length ? React.createElement(_DropdownMenu.default, (0, _extends2.default)({}, menuProps, {\n      classPrefix: this.addPrefix('select-menu'),\n      dropdownMenuItemClassPrefix: this.addPrefix('select-menu-item'),\n      dropdownMenuItemComponentClass: _Picker.DropdownMenuItem,\n      ref: this.menuContainerRef,\n      activeItemValues: [this.getValue()],\n      focusItemValue: focusItemValue,\n      data: filteredData,\n      group: !(0, _isUndefined2.default)(groupBy),\n      onSelect: this.handleItemSelect,\n      virtualized: virtualized,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 335\n      },\n      __self: this\n    })) : React.createElement(\"div\", {\n      className: this.addPrefix('none'),\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 349\n      },\n      __self: this\n    }, locale.noResultsText);\n    return React.createElement(_Picker.MenuWrapper, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: menuStyle,\n      onKeyDown: this.handleKeyDown,\n      getToggleInstance: this.getToggleInstance,\n      getPositionInstance: this.getPositionInstance,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 353\n      },\n      __self: this\n    }, searchable && React.createElement(_Picker.SearchBar, {\n      ref: this.searchBarContainerRef,\n      placeholder: locale.searchPlaceholder,\n      onChange: this.handleSearch,\n      value: this.state.searchKeyword,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 362\n      },\n      __self: this\n    }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  _proto.render = function render() {\n    var _this$props11 = this.props,\n        data = _this$props11.data,\n        valueKey = _this$props11.valueKey,\n        labelKey = _this$props11.labelKey,\n        placeholder = _this$props11.placeholder,\n        renderValue = _this$props11.renderValue,\n        disabled = _this$props11.disabled,\n        cleanable = _this$props11.cleanable,\n        locale = _this$props11.locale,\n        toggleComponentClass = _this$props11.toggleComponentClass,\n        style = _this$props11.style,\n        onEntered = _this$props11.onEntered,\n        onExited = _this$props11.onExited,\n        onClean = _this$props11.onClean,\n        positionRef = _this$props11.positionRef,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props11, [\"data\", \"valueKey\", \"labelKey\", \"placeholder\", \"renderValue\", \"disabled\", \"cleanable\", \"locale\", \"toggleComponentClass\", \"style\", \"onEntered\", \"onExited\", \"onClean\", \"positionRef\"]);\n    var unhandled = (0, _utils.getUnhandledProps)(SelectPicker, rest);\n    var value = this.getValue(); // Find active `MenuItem` by `value`\n\n    var activeItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {\n      return (0, _shallowEqual.default)(item[valueKey], value);\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     */\n\n    var hasValue = !!activeItem || !(0, _isNil2.default)(value) && (0, _isFunction2.default)(renderValue);\n    var selectedElement = placeholder;\n\n    if (activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey]) {\n      selectedElement = activeItem[labelKey];\n    }\n\n    if (!(0, _isNil2.default)(value) && (0, _isFunction2.default)(renderValue)) {\n      selectedElement = renderValue(value, activeItem, selectedElement);\n\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValue = false;\n      }\n    }\n\n    var classes = (0, _Picker.getToggleWrapperClassName)('select', this.addPrefix, this.props, hasValue);\n    return React.createElement(_Picker.PickerToggleTrigger, {\n      pickerProps: this.props,\n      ref: this.triggerRef,\n      positionRef: (0, _utils.mergeRefs)(this.positionRef, positionRef),\n      onEntered: (0, _utils.createChainedFunction)(this.handleOpen, onEntered),\n      onExited: (0, _utils.createChainedFunction)(this.handleExit, onExited),\n      speaker: this.renderDropdownMenu(),\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 423\n      },\n      __self: this\n    }, React.createElement(\"div\", {\n      className: classes,\n      style: style,\n      tabIndex: -1,\n      role: \"menu\",\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 431\n      },\n      __self: this\n    }, React.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, unhandled, {\n      ref: this.toggleRef,\n      onClean: (0, _utils.createChainedFunction)(this.handleClean, onClean),\n      onKeyDown: this.handleKeyDown,\n      componentClass: toggleComponentClass,\n      cleanable: cleanable && !disabled,\n      hasValue: hasValue,\n      active: this.state.active,\n      \"aria-disabled\": disabled,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 432\n      },\n      __self: this\n    }), selectedElement || locale.placeholder)));\n  };\n\n  return SelectPicker;\n}(React.Component);\n\nSelectPicker.propTypes = (0, _extends2.default)({}, _propTypes2.listPickerPropTypes, {\n  menuAutoWidth: _propTypes.default.bool,\n  maxHeight: _propTypes.default.number,\n  renderMenu: _propTypes.default.func,\n  renderMenuItem: _propTypes.default.func,\n  renderMenuGroup: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  onGroupTitleClick: _propTypes.default.func,\n  onSearch: _propTypes.default.func,\n\n  /**\n   * group by key in `data`\n   */\n  groupBy: _propTypes.default.any,\n  sort: _propTypes.default.func,\n  searchable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchBy: _propTypes.default.func\n});\nSelectPicker.defaultProps = (0, _extends2.default)({}, _propTypes2.listPickerDefaultProps, {\n  searchable: true,\n  menuAutoWidth: true,\n  virtualized: true,\n  maxHeight: 320,\n  locale: {\n    placeholder: 'Select',\n    searchPlaceholder: 'Search',\n    noResultsText: 'No results found'\n  }\n});\n\nvar _default = (0, _utils.defaultProps)({\n  classPrefix: 'picker'\n})(SelectPicker);\n\nexports.default = _default;\nmodule.exports = exports.default;\n\n//# sourceURL=webpack://rsuite/./src/SelectPicker/SelectPicker.tsx?");
 
 /***/ }),