rsuite 5.53.0 → 5.53.2

package/dist/rsuite.js

@@ -6384,7 +6384,7 @@ eval("\n\nexports.__esModule = true;\nexports.getAriaLabel = getAriaLabel;\nvar
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends4 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Carousel/Carousel.tsx\",\n  _this = void 0;\n/**\n * The Carousel component is used to display a series of content.\n * @see https://rsuitejs.com/components/carousel\n */\nvar Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _sliderStyles, _ref;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    children = props.children,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'carousel' : _props$classPrefix,\n    className = props.className,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottom' : _props$placement,\n    _props$shape = props.shape,\n    shape = _props$shape === void 0 ? 'dot' : _props$shape,\n    autoplay = props.autoplay,\n    _props$autoplayInterv = props.autoplayInterval,\n    autoplayInterval = _props$autoplayInterv === void 0 ? 4000 : _props$autoplayInterv,\n    activeIndexProp = props.activeIndex,\n    _props$defaultActiveI = props.defaultActiveIndex,\n    defaultActiveIndex = _props$defaultActiveI === void 0 ? 0 : _props$defaultActiveI,\n    onSelect = props.onSelect,\n    onSlideStart = props.onSlideStart,\n    onSlideEnd = props.onSlideEnd,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"children\", \"classPrefix\", \"className\", \"placement\", \"shape\", \"autoplay\", \"autoplayInterval\", \"activeIndex\", \"defaultActiveIndex\", \"onSelect\", \"onSlideStart\", \"onSlideEnd\"]);\n  var _useCustom = (0, _utils.useCustom)('Carousel'),\n    rtl = _useCustom.rtl;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var count = _utils.ReactChildren.count(children);\n  var labels = [];\n  var vertical = placement === 'left' || placement === 'right';\n  var lengthKey = vertical ? 'height' : 'width';\n  var _useControlled = (0, _utils.useControlled)(activeIndexProp, defaultActiveIndex),\n    activeIndex = _useControlled[0],\n    setActiveIndex = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useState = (0, _react.useState)(0),\n    lastIndex = _useState[0],\n    setLastIndex = _useState[1];\n  var rootRef = (0, _react.useRef)(null);\n  (0, _utils.useUpdateEffect)(function () {\n    // When the index is controlled, the index is not updated when the number of children changes.\n    if (isControlled) {\n      return;\n    }\n    // Reset the index when the number of children changes.\n    setActiveIndex(0);\n  }, [children, isControlled]);\n\n  // Set a timer for automatic playback.\n  // `autoplay` needs to be cast to boolean type to avoid undefined parameters.\n  var _useTimeout = (0, _utils.useTimeout)(function () {\n      return handleSlide();\n    }, autoplayInterval, !!autoplay && count > 1),\n    clear = _useTimeout.clear,\n    reset = _useTimeout.reset;\n  var handleSlide = (0, _react.useCallback)(function (nextActiveIndex, event) {\n    if (!rootRef.current) {\n      return;\n    }\n    clear();\n    var index = nextActiveIndex !== null && nextActiveIndex !== void 0 ? nextActiveIndex : activeIndex + 1;\n\n    // When index is greater than count, start from 1 again.\n    var nextIndex = index % count;\n    setActiveIndex(nextIndex);\n    onSlideStart === null || onSlideStart === void 0 ? void 0 : onSlideStart(nextIndex, event);\n    setLastIndex(nextActiveIndex == null ? activeIndex : nextIndex);\n    reset();\n  }, [activeIndex, count, setActiveIndex, clear, onSlideStart, reset]);\n  var handleChange = function handleChange(event) {\n    var activeIndex = +event.target.value;\n    handleSlide(activeIndex, event);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(activeIndex, event);\n  };\n  var handleTransitionEnd = (0, _react.useCallback)(function (event) {\n    onSlideEnd === null || onSlideEnd === void 0 ? void 0 : onSlideEnd(activeIndex, event);\n  }, [activeIndex, onSlideEnd]);\n  var uniqueId = (0, _react.useMemo)(function () {\n    return (0, _utils.guid)();\n  }, []);\n  var items = _react.default.Children.map(children, function (child, index) {\n    var _extends2;\n    if (!child) {\n      return;\n    }\n    var inputKey = \"indicator_\" + uniqueId + \"_\" + index;\n    labels.push( /*#__PURE__*/_react.default.createElement(\"li\", {\n      key: \"label\" + index,\n      className: prefix('label-wrapper'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 142,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"input\", {\n      name: inputKey,\n      id: inputKey,\n      type: \"radio\",\n      onChange: handleChange,\n      value: index,\n      checked: activeIndex === index,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 143,\n        columnNumber: 13\n      }\n    }), /*#__PURE__*/_react.default.createElement(\"label\", {\n      htmlFor: inputKey,\n      className: prefix('label'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 151,\n        columnNumber: 13\n      }\n    })));\n    return /*#__PURE__*/_react.default.cloneElement(child, {\n      key: \"slider-item\" + index,\n      'aria-hidden': activeIndex !== index,\n      style: (0, _extends4.default)({}, child.props.style, (_extends2 = {}, _extends2[lengthKey] = 100 / count + \"%\", _extends2)),\n      className: (0, _classnames.default)(prefix('slider-item'), child.props.className)\n    });\n  });\n  var classes = merge(className, withClassPrefix(\"placement-\" + placement, \"shape-\" + shape));\n  var positiveOrder = vertical || !rtl;\n  var sign = positiveOrder ? '-' : '';\n  var activeRatio = \"\" + sign + 100 / count * activeIndex + \"%\";\n  var sliderStyles = (_sliderStyles = {}, _sliderStyles[lengthKey] = count * 100 + \"%\", _sliderStyles.transform = vertical ? \"translate3d(0, \" + activeRatio + \" ,0)\" : \"translate3d(\" + activeRatio + \", 0 ,0)\", _sliderStyles);\n  var showMask = count > 1 && activeIndex === 0 && activeIndex !== lastIndex;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends4.default)({}, rest, {\n    ref: (0, _utils.mergeRefs)(ref, rootRef),\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 178,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('content'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 179,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('slider'),\n    style: sliderStyles,\n    onTransitionEnd: handleTransitionEnd,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 180,\n      columnNumber: 11\n    }\n  }, items), showMask && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('slider-after', {\n      'slider-after-vertical': vertical\n    }),\n    style: (_ref = {}, _ref[lengthKey] = '200%', _ref),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 188,\n      columnNumber: 13\n    }\n  }, [items[items.length - 1], items[0]].map(function (node) {\n    var _extends3;\n    return /*#__PURE__*/_react.default.cloneElement(node, {\n      key: node.key,\n      style: (0, _extends4.default)({}, node.props.style, (_extends3 = {}, _extends3[lengthKey] = '50%', _extends3))\n    });\n  }))), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('toolbar'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 201,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"ul\", {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 202,\n      columnNumber: 11\n    }\n  }, labels)));\n});\nCarousel.displayName = 'Carousel';\nCarousel.propTypes = {\n  as: _propTypes.default.elementType,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  activeIndex: _propTypes.default.number,\n  defaultActiveIndex: _propTypes.default.number,\n  autoplay: _propTypes.default.bool,\n  autoplayInterval: _propTypes.default.number,\n  placement: (0, _propTypes2.oneOf)(['top', 'bottom', 'left', 'right']),\n  shape: (0, _propTypes2.oneOf)(['dot', 'bar']),\n  onSelect: _propTypes.default.func,\n  onSlideStart: _propTypes.default.func,\n  onSlideEnd: _propTypes.default.func\n};\nvar _default = Carousel;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Carousel/Carousel.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends4 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Carousel/Carousel.tsx\",\n  _this = void 0;\n/**\n * The Carousel component is used to display a series of content.\n * @see https://rsuitejs.com/components/carousel\n */\nvar Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _sliderStyles, _ref;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    children = props.children,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'carousel' : _props$classPrefix,\n    className = props.className,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottom' : _props$placement,\n    _props$shape = props.shape,\n    shape = _props$shape === void 0 ? 'dot' : _props$shape,\n    autoplay = props.autoplay,\n    _props$autoplayInterv = props.autoplayInterval,\n    autoplayInterval = _props$autoplayInterv === void 0 ? 4000 : _props$autoplayInterv,\n    activeIndexProp = props.activeIndex,\n    _props$defaultActiveI = props.defaultActiveIndex,\n    defaultActiveIndex = _props$defaultActiveI === void 0 ? 0 : _props$defaultActiveI,\n    onSelect = props.onSelect,\n    onSlideStart = props.onSlideStart,\n    onSlideEnd = props.onSlideEnd,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"children\", \"classPrefix\", \"className\", \"placement\", \"shape\", \"autoplay\", \"autoplayInterval\", \"activeIndex\", \"defaultActiveIndex\", \"onSelect\", \"onSlideStart\", \"onSlideEnd\"]);\n  var _useCustom = (0, _utils.useCustom)('Carousel'),\n    rtl = _useCustom.rtl;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var count = _utils.ReactChildren.count(children);\n  var labels = [];\n  var vertical = placement === 'left' || placement === 'right';\n  var lengthKey = vertical ? 'height' : 'width';\n  var _useControlled = (0, _utils.useControlled)(activeIndexProp, defaultActiveIndex),\n    activeIndex = _useControlled[0],\n    setActiveIndex = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useState = (0, _react.useState)(0),\n    lastIndex = _useState[0],\n    setLastIndex = _useState[1];\n  var rootRef = (0, _react.useRef)(null);\n  (0, _utils.useUpdateEffect)(function () {\n    // When the index is controlled, the index is not updated when the number of children changes.\n    if (isControlled) {\n      return;\n    }\n    // Reset the index when the number of children changes.\n    setActiveIndex(0);\n  }, [children, isControlled]);\n\n  // Set a timer for automatic playback.\n  // `autoplay` needs to be cast to boolean type to avoid undefined parameters.\n  var _useTimeout = (0, _utils.useTimeout)(function () {\n      return handleSlide();\n    }, autoplayInterval, !!autoplay && count > 1),\n    clear = _useTimeout.clear,\n    reset = _useTimeout.reset;\n  var handleSlide = (0, _react.useCallback)(function (nextActiveIndex, event) {\n    if (!rootRef.current) {\n      return;\n    }\n    clear();\n    var index = nextActiveIndex !== null && nextActiveIndex !== void 0 ? nextActiveIndex : activeIndex + 1;\n\n    // When index is greater than count, start from 1 again.\n    var nextIndex = index % count;\n    setActiveIndex(nextIndex);\n    onSlideStart === null || onSlideStart === void 0 ? void 0 : onSlideStart(nextIndex, event);\n    setLastIndex(nextActiveIndex == null ? activeIndex : nextIndex);\n    reset();\n  }, [activeIndex, count, setActiveIndex, clear, onSlideStart, reset]);\n  var handleChange = function handleChange(event) {\n    var activeIndex = +event.target.value;\n    handleSlide(activeIndex, event);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(activeIndex, event);\n  };\n  var handleTransitionEnd = (0, _react.useCallback)(function (event) {\n    onSlideEnd === null || onSlideEnd === void 0 ? void 0 : onSlideEnd(activeIndex, event);\n  }, [activeIndex, onSlideEnd]);\n  var uniqueId = (0, _react.useMemo)(function () {\n    return (0, _utils.guid)();\n  }, []);\n  var items = _utils.ReactChildren.map(children, function (child, index) {\n    var _extends2;\n    if (!child) {\n      return;\n    }\n    var inputKey = \"indicator_\" + uniqueId + \"_\" + index;\n    labels.push( /*#__PURE__*/_react.default.createElement(\"li\", {\n      key: \"label\" + index,\n      className: prefix('label-wrapper'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 142,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"input\", {\n      name: inputKey,\n      id: inputKey,\n      type: \"radio\",\n      onChange: handleChange,\n      value: index,\n      checked: activeIndex === index,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 143,\n        columnNumber: 13\n      }\n    }), /*#__PURE__*/_react.default.createElement(\"label\", {\n      htmlFor: inputKey,\n      className: prefix('label'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 151,\n        columnNumber: 13\n      }\n    })));\n    return /*#__PURE__*/_react.default.cloneElement(child, {\n      key: \"slider-item\" + index,\n      'aria-hidden': activeIndex !== index,\n      style: (0, _extends4.default)({}, child.props.style, (_extends2 = {}, _extends2[lengthKey] = 100 / count + \"%\", _extends2)),\n      className: (0, _classnames.default)(prefix('slider-item'), child.props.className)\n    });\n  });\n  var classes = merge(className, withClassPrefix(\"placement-\" + placement, \"shape-\" + shape));\n  var positiveOrder = vertical || !rtl;\n  var sign = positiveOrder ? '-' : '';\n  var activeRatio = \"\" + sign + 100 / count * activeIndex + \"%\";\n  var sliderStyles = (_sliderStyles = {}, _sliderStyles[lengthKey] = count * 100 + \"%\", _sliderStyles.transform = vertical ? \"translate3d(0, \" + activeRatio + \" ,0)\" : \"translate3d(\" + activeRatio + \", 0 ,0)\", _sliderStyles);\n  var showMask = count > 1 && activeIndex === 0 && activeIndex !== lastIndex;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends4.default)({}, rest, {\n    ref: (0, _utils.mergeRefs)(ref, rootRef),\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 178,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('content'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 179,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('slider'),\n    style: sliderStyles,\n    onTransitionEnd: handleTransitionEnd,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 180,\n      columnNumber: 11\n    }\n  }, items), showMask && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('slider-after', {\n      'slider-after-vertical': vertical\n    }),\n    style: (_ref = {}, _ref[lengthKey] = '200%', _ref),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 188,\n      columnNumber: 13\n    }\n  }, [items[items.length - 1], items[0]].map(function (node) {\n    var _extends3;\n    return /*#__PURE__*/_react.default.cloneElement(node, {\n      key: node.key,\n      style: (0, _extends4.default)({}, node.props.style, (_extends3 = {}, _extends3[lengthKey] = '50%', _extends3))\n    });\n  }))), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('toolbar'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 201,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"ul\", {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 202,\n      columnNumber: 11\n    }\n  }, labels)));\n});\nCarousel.displayName = 'Carousel';\nCarousel.propTypes = {\n  as: _propTypes.default.elementType,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  activeIndex: _propTypes.default.number,\n  defaultActiveIndex: _propTypes.default.number,\n  autoplay: _propTypes.default.bool,\n  autoplayInterval: _propTypes.default.number,\n  placement: (0, _propTypes2.oneOf)(['top', 'bottom', 'left', 'right']),\n  shape: (0, _propTypes2.oneOf)(['dot', 'bar']),\n  onSelect: _propTypes.default.func,\n  onSlideStart: _propTypes.default.func,\n  onSlideEnd: _propTypes.default.func\n};\nvar _default = Carousel;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Carousel/Carousel.tsx?");
 
 /***/ }),
 
@@ -6494,7 +6494,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _cloneDeep2 = _interopRequireDefault(__webpack_require__(/*! lodash/cloneDeep */ \"./node_modules/lodash/cloneDeep.js\"));\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _Windowing = __webpack_require__(/*! ../internals/Windowing */ \"./src/internals/Windowing/index.ts\");\nvar _CheckTreeNode = _interopRequireDefault(__webpack_require__(/*! ./CheckTreeNode */ \"./src/CheckTreePicker/CheckTreeNode.tsx\"));\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/CheckTreePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CheckTreePicker/CheckTreePicker.tsx\",\n  _this = void 0;\nvar emptyArray = [];\nvar itemSize = function itemSize() {\n  return 36;\n};\n\n/**\n * The `CheckTreePicker` component is used for selecting multiple options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/check-tree-picker\n */\nvar CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    style = props.style,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$countable = props.countable,\n    countable = _props$countable === void 0 ? true : _props$countable,\n    searchBy = props.searchBy,\n    toggleAs = props.toggleAs,\n    searchKeyword = props.searchKeyword,\n    showIndentLine = props.showIndentLine,\n    overrideLocale = props.locale,\n    _props$cascade = props.cascade,\n    cascade = _props$cascade === void 0 ? true : _props$cascade,\n    disabled = props.disabled,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    placeholder = props.placeholder,\n    controlledValue = props.value,\n    _props$defaultValue = props.defaultValue,\n    defaultValue = _props$defaultValue === void 0 ? emptyArray : _props$defaultValue,\n    _props$defaultExpandA = props.defaultExpandAll,\n    defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    controlledExpandItemValues = props.expandItemValues,\n    _props$defaultExpandI = props.defaultExpandItemValues,\n    defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,\n    _props$height = props.height,\n    height = _props$height === void 0 ? 360 : _props$height,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuStyle = props.menuStyle,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$virtualized = props.virtualized,\n    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    menuClassName = props.menuClassName,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$uncheckableIte = props.uncheckableItemValues,\n    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n    id = props.id,\n    listProps = props.listProps,\n    renderMenu = props.renderMenu,\n    getChildren = props.getChildren,\n    renderExtraFooter = props.renderExtraFooter,\n    onEntered = props.onEntered,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onClose = props.onClose,\n    onExited = props.onExited,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onSelectItem = props.onSelectItem,\n    onOpen = props.onOpen,\n    onScroll = props.onScroll,\n    onExpand = props.onExpand,\n    renderValue = props.renderValue,\n    renderTreeIcon = props.renderTreeIcon,\n    renderTreeNode = props.renderTreeNode,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"style\", \"appearance\", \"cleanable\", \"countable\", \"searchBy\", \"toggleAs\", \"searchKeyword\", \"showIndentLine\", \"locale\", \"cascade\", \"disabled\", \"valueKey\", \"labelKey\", \"placement\", \"childrenKey\", \"placeholder\", \"value\", \"defaultValue\", \"defaultExpandAll\", \"disabledItemValues\", \"expandItemValues\", \"defaultExpandItemValues\", \"height\", \"menuMaxHeight\", \"menuStyle\", \"searchable\", \"virtualized\", \"className\", \"classPrefix\", \"menuClassName\", \"menuAutoWidth\", \"uncheckableItemValues\", \"id\", \"listProps\", \"renderMenu\", \"getChildren\", \"renderExtraFooter\", \"onEntered\", \"onChange\", \"onClean\", \"onClose\", \"onExited\", \"onSearch\", \"onSelect\", \"onSelectItem\", \"onOpen\", \"onScroll\", \"onExpand\", \"renderValue\", \"renderTreeIcon\", \"renderTreeNode\"]);\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n    inline = _useContext.inline;\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref, {\n      inline: inline\n    }),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput,\n    treeView = _usePickerRef.treeView;\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    rtl = _useCustom.rtl,\n    locale = _useCustom.locale;\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _useState2 = (0, _react.useState)(null),\n    activeNode = _useState2[0],\n    setActiveNode = _useState2[1];\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useClassNames2 = (0, _utils.useClassNames)('check-tree'),\n    checkTreePrefix = _useClassNames2.prefix,\n    withCheckTreeClassPrefix = _useClassNames2.withClassPrefix;\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useGetTreeNodeChildr = (0, _treeUtils.useGetTreeNodeChildren)(data, valueKey, childrenKey),\n    treeData = _useGetTreeNodeChildr.data,\n    setTreeData = _useGetTreeNodeChildr.setData,\n    loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,\n    loadChildren = _useGetTreeNodeChildr.loadChildren;\n  var _useControlled2 = (0, _utils.useControlled)(controlledExpandItemValues, (0, _treeUtils.getDefaultExpandItemValues)(treeData, {\n      defaultExpandAll: defaultExpandAll,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      defaultExpandItemValues: defaultExpandItemValues\n    })),\n    expandItemValues = _useControlled2[0],\n    setExpandItemValues = _useControlled2[1];\n  var _useState3 = (0, _react.useState)(null),\n    focusItemValue = _useState3[0],\n    setFocusItemValue = _useState3[1];\n  var _useFlattenTreeData = (0, _treeUtils.useFlattenTreeData)({\n      data: treeData,\n      labelKey: labelKey,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      uncheckableItemValues: uncheckableItemValues,\n      callback: function callback(nodes) {\n        // after flattenData, always unSerialize check property value\n        unSerializeList({\n          nodes: nodes,\n          key: 'check',\n          value: value,\n          cascade: cascade,\n          uncheckableItemValues: uncheckableItemValues\n        });\n        forceUpdate();\n      }\n    }),\n    flattenNodes = _useFlattenTreeData.flattenNodes,\n    forceUpdate = _useFlattenTreeData.forceUpdate,\n    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData,\n    serializeListOnlyParent = _useFlattenTreeData.serializeListOnlyParent,\n    unSerializeList = _useFlattenTreeData.unSerializeList;\n  var _useTreeSearch = (0, _treeUtils.useTreeSearch)({\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      searchKeyword: searchKeyword,\n      data: treeData,\n      searchBy: searchBy,\n      callback: function callback(searchKeyword, _filterData, event) {\n        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n      }\n    }),\n    filteredData = _useTreeSearch.filteredData,\n    searchKeywordState = _useTreeSearch.searchKeywordState,\n    setSearchKeyword = _useTreeSearch.setSearchKeyword,\n    handleSearch = _useTreeSearch.handleSearch,\n    setFilteredData = _useTreeSearch.setFilteredData;\n  var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),\n    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,\n    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;\n  /**\n   * get formatted nodes for render tree\n   * @params render - renderNode function. only used when virtualized setting false\n   */\n  var getFormattedNodes = function getFormattedNodes(render) {\n    if (virtualized) {\n      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {\n        cascade: cascade,\n        searchKeyword: searchKeywordState\n      }).filter(function (item) {\n        return item.visible;\n      });\n    }\n    return (0, _utils2.getFormattedTree)(flattenNodes, filteredData, {\n      childrenKey: childrenKey,\n      cascade: cascade\n    }).map(function (node) {\n      return render === null || render === void 0 ? void 0 : render(node, 1);\n    });\n  };\n  var getTreeNodeProps = function getTreeNodeProps(node, layer) {\n    return {\n      as: Component,\n      rtl: rtl,\n      value: node[valueKey],\n      label: node[labelKey],\n      layer: layer,\n      focus: focusItemValue === node[valueKey],\n      expand: node.expand,\n      visible: node.visible,\n      loading: loadingNodeValues.some(function (item) {\n        return item === node[valueKey];\n      }),\n      disabled: (0, _utils2.getDisabledState)(flattenNodes, node, {\n        disabledItemValues: disabledItemValues,\n        valueKey: valueKey\n      }),\n      nodeData: node,\n      checkState: node.checkState,\n      uncheckable: (0, _utils2.isNodeUncheckable)(node, {\n        uncheckableItemValues: uncheckableItemValues,\n        valueKey: valueKey\n      }),\n      allUncheckable: (0, _utils2.isAllSiblingNodeUncheckable)(node, flattenNodes, uncheckableItemValues, valueKey),\n      onSelect: handleSelect,\n      onExpand: handleExpand,\n      renderTreeNode: renderTreeNode,\n      renderTreeIcon: renderTreeIcon\n    };\n  };\n  var focusActiveNode = function focusActiveNode() {\n    if (list.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: list.current,\n        valueKey: valueKey,\n        selector: \".\" + checkTreePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeView.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  };\n  (0, _react.useEffect)(function () {\n    setValue((0, _utils2.getCheckTreePickerDefaultValue)(value, uncheckableItemValues));\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  (0, _react.useEffect)(function () {\n    setFilteredData(data, searchKeywordState);\n    setTreeData(data);\n  }, [data, searchKeywordState, setFilteredData, setTreeData]);\n  (0, _react.useEffect)(function () {\n    setFilteredData(treeData, searchKeywordState);\n  }, [treeData, searchKeywordState, setFilteredData]);\n  (0, _react.useEffect)(function () {\n    if (Array.isArray(controlledExpandItemValues)) {\n      setExpandItemValues(controlledExpandItemValues);\n    }\n  }, [controlledExpandItemValues, setExpandItemValues]);\n  (0, _react.useEffect)(function () {\n    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  }, [searchKeyword, setSearchKeyword]);\n  (0, _react.useEffect)(function () {\n    unSerializeList({\n      nodes: flattenNodes,\n      key: 'check',\n      value: value,\n      cascade: cascade,\n      uncheckableItemValues: uncheckableItemValues\n    });\n    forceUpdate();\n  }, [cascade, value, uncheckableItemValues, unSerializeList, flattenNodes, forceUpdate]);\n  var toggleUpChecked = (0, _utils.useEventCallback)(function (nodes, node, checked) {\n    var currentNode = node.refKey ? nodes[node.refKey] : null;\n    if (cascade && currentNode) {\n      if (!checked) {\n        currentNode.check = checked;\n        currentNode.checkAll = checked;\n      } else {\n        if ((0, _utils2.isEveryChildChecked)(nodes, currentNode)) {\n          currentNode.check = true;\n          currentNode.checkAll = true;\n        } else {\n          currentNode.check = false;\n          currentNode.checkAll = false;\n        }\n      }\n      if (currentNode.parent) {\n        toggleUpChecked(nodes, currentNode.parent, checked);\n      }\n    }\n  });\n  var toggleDownChecked = (0, _utils.useEventCallback)(function (nodes, node, isChecked) {\n    var currentNode = node.refKey ? nodes[node.refKey] : null;\n    if (!currentNode) {\n      return;\n    }\n    currentNode.check = isChecked;\n    if (!currentNode[childrenKey] || !currentNode[childrenKey].length || !cascade) {\n      currentNode.checkAll = false;\n    } else {\n      currentNode.checkAll = isChecked;\n      currentNode[childrenKey].forEach(function (child) {\n        toggleDownChecked(nodes, child, isChecked);\n      });\n    }\n  });\n  var toggleChecked = (0, _utils.useEventCallback)(function (node, isChecked) {\n    var nodes = (0, _cloneDeep2.default)(flattenNodes);\n    toggleDownChecked(nodes, node, isChecked);\n    node.parent && toggleUpChecked(nodes, node.parent, isChecked);\n    var values = serializeListOnlyParent(nodes, 'check');\n    // filter uncheckableItemValues\n    return values.filter(function (v) {\n      return !uncheckableItemValues.includes(v);\n    });\n  });\n\n  // TODO-Doma\n  // Replace `getKeyParentMap` with `getParentMap`\n  var itemParentMap = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getKeyParentMap)(data, function (node) {\n      return node[valueKey];\n    }, function (node) {\n      return node[childrenKey];\n    });\n  }, [childrenKey, data, valueKey]);\n  var handleSelect = (0, _utils.useEventCallback)(function (node, event) {\n    var currentNode = node.refKey ? flattenNodes[node.refKey] : null;\n    if (!node || !currentNode) {\n      return;\n    }\n    var selectedValues = toggleChecked(node, !currentNode.check);\n    if (!isControlled) {\n      unSerializeList({\n        nodes: flattenNodes,\n        key: 'check',\n        value: selectedValues,\n        cascade: cascade,\n        uncheckableItemValues: uncheckableItemValues\n      });\n      setValue(selectedValues);\n    }\n    setActiveNode(node);\n    setFocusItemValue(node[valueKey]);\n    onChange === null || onChange === void 0 ? void 0 : onChange(selectedValues, event);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, selectedValues, event);\n    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(node, (0, _treeUtils.getPathTowardsItem)(node, function (item) {\n      return itemParentMap.get(item[valueKey]);\n    }));\n  });\n  var handleOpen = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$open;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$open = _trigger$current.open) === null || _trigger$current$open === void 0 ? void 0 : _trigger$current$open.call(_trigger$current);\n    setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);\n    focusActiveNode();\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  });\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current2, _trigger$current2$clo, _target$current;\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$clo = _trigger$current2.close) === null || _trigger$current2$clo === void 0 ? void 0 : _trigger$current2$clo.call(_trigger$current2);\n    setSearchKeyword('');\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    setFocusItemValue(null);\n    setActive(false);\n\n    /**\n     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu\n     */\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n  });\n  var handleExpand = (0, _utils.useEventCallback)(function (node) {\n    var nextExpandItemValues = (0, _treeUtils.toggleExpand)({\n      node: node,\n      isExpand: !node.expand,\n      expandItemValues: expandItemValues,\n      valueKey: valueKey\n    });\n    setExpandItemValues(nextExpandItemValues);\n    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    }));\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    var target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    setActiveNode(null);\n    setFocusItemValue(null);\n    if (!isControlled) {\n      setValue([]);\n      unSerializeList({\n        nodes: flattenNodes,\n        key: 'check',\n        value: [],\n        cascade: cascade,\n        uncheckableItemValues: uncheckableItemValues\n      });\n    }\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  });\n  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {\n    var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      expandItemValues: expandItemValues\n    }, (0, _treeUtils.isSearching)(searchKeywordState));\n    var selector = \".\" + checkTreePrefix('node-label');\n    var focusProps = {\n      focusItemValue: focusItemValue,\n      focusableItems: focusableItems,\n      treeNodesRefs: treeNodesRefs,\n      selector: selector,\n      valueKey: valueKey,\n      callback: function callback(nextFocusItemValue) {\n        setFocusItemValue(nextFocusItemValue);\n      }\n    };\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  });\n  var handleLeftArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.leftArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      onExpand: handleExpand,\n      childrenKey: childrenKey,\n      onFocusItem: function onFocusItem() {\n        var _focusItem$parent, _focusItem$parent2;\n        setFocusItemValue(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey]);\n        (0, _treeUtils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, \".\" + checkTreePrefix('node-label'));\n      }\n    });\n  });\n  var handleRightArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.rightArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      childrenKey: childrenKey,\n      onExpand: handleExpand,\n      onFocusItem: function onFocusItem() {\n        handleFocusItem(_utils.KEY_VALUES.DOWN);\n      }\n    });\n  });\n  var selectActiveItem = function selectActiveItem(event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    if (!(0, _utils2.isNodeUncheckable)(activeItem, {\n      uncheckableItemValues: uncheckableItemValues,\n      valueKey: valueKey\n    }) && activeItem !== null) {\n      handleSelect(activeItem, event);\n    }\n  };\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onClose: handleClose,\n    onMenuKeyDown: function onMenuKeyDown(event) {\n      (0, _Picker.onMenuKeyDown)(event, {\n        down: function down() {\n          return handleFocusItem(_utils.KEY_VALUES.DOWN);\n        },\n        up: function up() {\n          return handleFocusItem(_utils.KEY_VALUES.UP);\n        },\n        left: rtl ? handleRightArrow : handleLeftArrow,\n        right: rtl ? handleLeftArrow : handleRightArrow,\n        enter: selectActiveItem,\n        del: handleClean\n      });\n    }\n  }, rest));\n  var handleTreeKeydown = (0, _utils.useEventCallback)(function (event) {\n    if (!treeView.current) {\n      return;\n    }\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        return handleFocusItem(_utils.KEY_VALUES.DOWN);\n      },\n      up: function up() {\n        return handleFocusItem(_utils.KEY_VALUES.UP);\n      },\n      left: rtl ? handleRightArrow : handleLeftArrow,\n      right: rtl ? handleLeftArrow : handleRightArrow,\n      enter: selectActiveItem\n    });\n  });\n  var renderNode = function renderNode(node, layer) {\n    var visible = node.visible,\n      refKey = node.refKey; // when searching, all nodes should be expand\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    if (!visible) {\n      return null;\n    }\n    var children = node[childrenKey];\n    var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      /**\n       * spread operator don't copy unenumerable properties\n       * so we need to copy them manually\n       */\n      parent: node.parent,\n      expand: expand\n    }), layer), {\n      hasChildren: visibleChildren\n    });\n    if (nodeProps.hasChildren) {\n      var _merge;\n      layer += 1;\n      var openClass = checkTreePrefix('open');\n      var childrenClass = merge(checkTreePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));\n      var nodes = children || [];\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: childrenClass,\n        key: node[valueKey],\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 650,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({}, nodeProps, {\n        ref: function ref(_ref) {\n          return saveTreeNodeRef(_ref, refKey);\n        },\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 651,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: checkTreePrefix('group'),\n        role: \"group\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 652,\n          columnNumber: 11\n        }\n      }, nodes.map(function (child) {\n        return renderNode(child, layer);\n      }), showIndentLine && /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: checkTreePrefix('indent-line'),\n        style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 655,\n          columnNumber: 15\n        }\n      })));\n    }\n    return /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({\n      key: node[valueKey],\n      ref: function ref(_ref2) {\n        return saveTreeNodeRef(_ref2, refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 666,\n        columnNumber: 7\n      }\n    }));\n  };\n  var renderVirtualListNode = function renderVirtualListNode(_ref3) {\n    var index = _ref3.index,\n      style = _ref3.style,\n      data = _ref3.data;\n    var node = data[index];\n    var layer = node.layer,\n      refKey = node.refKey,\n      visible = node.visible;\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      /**\n       * spread operator don't copy unenumerable properties\n       * so we need to copy them manually\n       */\n      parent: node.parent,\n      expand: expand\n    }), layer), {\n      hasChildren: node.hasChildren\n    });\n    return visible && /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({\n      style: style,\n      ref: function ref(_ref4) {\n        return saveTreeNodeRef(_ref4, refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 699,\n        columnNumber: 9\n      }\n    }));\n  };\n  var renderCheckTree = function renderCheckTree() {\n    var _withCheckTreeClassPr, _merge2;\n    var classes = withCheckTreeClassPrefix((_withCheckTreeClassPr = {}, _withCheckTreeClassPr[className !== null && className !== void 0 ? className : ''] = inline, _withCheckTreeClassPr['without-children'] = !(0, _utils2.isSomeNodeHasChildren)(data, childrenKey), _withCheckTreeClassPr.virtualized = virtualized, _withCheckTreeClassPr));\n    var formattedNodes = getFormattedNodes(renderNode);\n    if (!formattedNodes.some(function (v) {\n      return v !== null;\n    })) {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('none'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 714,\n          columnNumber: 14\n        }\n      }, locale.noResultsText);\n    }\n    var treeNodesClass = merge(checkTreePrefix('root'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge2));\n    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, {\n      ref: inline ? root : treeView,\n      multiselectable: true,\n      treeRootClassName: treeNodesClass,\n      className: classes,\n      style: inline ? (0, _extends2.default)({\n        height: height\n      }, style) : {},\n      onScroll: onScroll,\n      onKeyDown: inline ? handleTreeKeydown : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 726,\n        columnNumber: 7\n      }\n    }, virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n      defaultHeight: inline ? height : menuMaxHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 736,\n        columnNumber: 11\n      }\n    }, function (_ref5) {\n      var height = _ref5.height;\n      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n        ref: list,\n        height: height,\n        itemSize: itemSize,\n        itemCount: formattedNodes.length,\n        itemData: formattedNodes\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 741,\n          columnNumber: 15\n        }\n      }), renderVirtualListNode);\n    }) : formattedNodes);\n  };\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = (0, _classnames.default)(className, menuClassName, prefix('check-tree-menu'));\n    var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: mergedMenuStyle,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 766,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 775,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var selectedItems = (0, _react.useMemo)(function () {\n    return (0, _utils2.getSelectedItems)(flattenNodes, value);\n  }, [flattenNodes, value]);\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  var hasValidValue = selectedItems.length > 0 || value.length > 0 && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n  if (hasValidValue) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 798,\n        columnNumber: 7\n      }\n    });\n    if ((0, _isFunction2.default)(renderValue)) {\n      selectedElement = renderValue(value, selectedItems, selectedElement);\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      countable: countable,\n      cleanable: cleanable,\n      disabled: disabled,\n      hasValue: hasValidValue,\n      name: 'check-tree'\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  if (inline) {\n    return renderCheckTree();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    multiple: true,\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: handleOpen,\n    onEntered: onEntered,\n    onExited: (0, _utils.createChainedFunction)(handleClose, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 833,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 845,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    disabled: disabled,\n    as: toggleAs,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 846,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\nCheckTreePicker.displayName = 'CheckTreePicker';\nCheckTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  height: _propTypes.default.number,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  locale: _propTypes.default.any,\n  cascade: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  searchable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchKeyword: _propTypes.default.string,\n  menuAutoWidth: _propTypes.default.bool,\n  defaultExpandAll: _propTypes.default.bool,\n  containerPadding: _propTypes.default.number,\n  disabledItemValues: _propTypes.default.array,\n  expandItemValues: _propTypes.default.array,\n  defaultExpandItemValues: _propTypes.default.array,\n  uncheckableItemValues: _propTypes.default.array,\n  onSearch: _propTypes.default.func,\n  onExpand: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderTreeNode: _propTypes.default.func,\n  renderTreeIcon: _propTypes.default.func,\n  searchBy: _propTypes.default.func,\n  onScroll: _propTypes.default.func\n});\nvar _default = CheckTreePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CheckTreePicker/CheckTreePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _cloneDeep2 = _interopRequireDefault(__webpack_require__(/*! lodash/cloneDeep */ \"./node_modules/lodash/cloneDeep.js\"));\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _Windowing = __webpack_require__(/*! ../internals/Windowing */ \"./src/internals/Windowing/index.ts\");\nvar _CheckTreeNode = _interopRequireDefault(__webpack_require__(/*! ./CheckTreeNode */ \"./src/CheckTreePicker/CheckTreeNode.tsx\"));\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/CheckTreePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/CheckTreePicker/CheckTreePicker.tsx\",\n  _this = void 0;\nvar emptyArray = [];\nvar itemSize = function itemSize() {\n  return 36;\n};\n\n/**\n * The `CheckTreePicker` component is used for selecting multiple options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/check-tree-picker\n */\nvar CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    style = props.style,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$countable = props.countable,\n    countable = _props$countable === void 0 ? true : _props$countable,\n    searchBy = props.searchBy,\n    toggleAs = props.toggleAs,\n    searchKeyword = props.searchKeyword,\n    showIndentLine = props.showIndentLine,\n    overrideLocale = props.locale,\n    _props$cascade = props.cascade,\n    cascade = _props$cascade === void 0 ? true : _props$cascade,\n    disabled = props.disabled,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    placeholder = props.placeholder,\n    controlledValue = props.value,\n    _props$defaultValue = props.defaultValue,\n    defaultValue = _props$defaultValue === void 0 ? emptyArray : _props$defaultValue,\n    _props$defaultExpandA = props.defaultExpandAll,\n    defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    controlledExpandItemValues = props.expandItemValues,\n    _props$defaultExpandI = props.defaultExpandItemValues,\n    defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,\n    _props$height = props.height,\n    height = _props$height === void 0 ? 360 : _props$height,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuStyle = props.menuStyle,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$virtualized = props.virtualized,\n    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    menuClassName = props.menuClassName,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    _props$uncheckableIte = props.uncheckableItemValues,\n    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,\n    id = props.id,\n    listProps = props.listProps,\n    renderMenu = props.renderMenu,\n    getChildren = props.getChildren,\n    renderExtraFooter = props.renderExtraFooter,\n    onEntered = props.onEntered,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onClose = props.onClose,\n    onExited = props.onExited,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onSelectItem = props.onSelectItem,\n    onOpen = props.onOpen,\n    onScroll = props.onScroll,\n    onExpand = props.onExpand,\n    renderValue = props.renderValue,\n    renderTreeIcon = props.renderTreeIcon,\n    renderTreeNode = props.renderTreeNode,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"style\", \"appearance\", \"cleanable\", \"countable\", \"searchBy\", \"toggleAs\", \"searchKeyword\", \"showIndentLine\", \"locale\", \"cascade\", \"disabled\", \"valueKey\", \"labelKey\", \"placement\", \"childrenKey\", \"placeholder\", \"value\", \"defaultValue\", \"defaultExpandAll\", \"disabledItemValues\", \"expandItemValues\", \"defaultExpandItemValues\", \"height\", \"menuMaxHeight\", \"menuStyle\", \"searchable\", \"virtualized\", \"className\", \"classPrefix\", \"menuClassName\", \"menuAutoWidth\", \"uncheckableItemValues\", \"id\", \"listProps\", \"renderMenu\", \"getChildren\", \"renderExtraFooter\", \"onEntered\", \"onChange\", \"onClean\", \"onClose\", \"onExited\", \"onSearch\", \"onSelect\", \"onSelectItem\", \"onOpen\", \"onScroll\", \"onExpand\", \"renderValue\", \"renderTreeIcon\", \"renderTreeNode\"]);\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n    inline = _useContext.inline;\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref, {\n      inline: inline\n    }),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput,\n    treeView = _usePickerRef.treeView;\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    rtl = _useCustom.rtl,\n    locale = _useCustom.locale;\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _useState2 = (0, _react.useState)(null),\n    activeNode = _useState2[0],\n    setActiveNode = _useState2[1];\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useClassNames2 = (0, _utils.useClassNames)(inline && classPrefix !== 'picker' ? classPrefix : 'check-tree'),\n    checkTreePrefix = _useClassNames2.prefix,\n    withCheckTreeClassPrefix = _useClassNames2.withClassPrefix;\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useGetTreeNodeChildr = (0, _treeUtils.useGetTreeNodeChildren)(data, valueKey, childrenKey),\n    treeData = _useGetTreeNodeChildr.data,\n    setTreeData = _useGetTreeNodeChildr.setData,\n    loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,\n    loadChildren = _useGetTreeNodeChildr.loadChildren;\n  var _useControlled2 = (0, _utils.useControlled)(controlledExpandItemValues, (0, _treeUtils.getDefaultExpandItemValues)(treeData, {\n      defaultExpandAll: defaultExpandAll,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      defaultExpandItemValues: defaultExpandItemValues\n    })),\n    expandItemValues = _useControlled2[0],\n    setExpandItemValues = _useControlled2[1];\n  var _useState3 = (0, _react.useState)(null),\n    focusItemValue = _useState3[0],\n    setFocusItemValue = _useState3[1];\n  var _useFlattenTreeData = (0, _treeUtils.useFlattenTreeData)({\n      data: treeData,\n      labelKey: labelKey,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      uncheckableItemValues: uncheckableItemValues,\n      callback: function callback(nodes) {\n        // after flattenData, always unSerialize check property value\n        unSerializeList({\n          nodes: nodes,\n          key: 'check',\n          value: value,\n          cascade: cascade,\n          uncheckableItemValues: uncheckableItemValues\n        });\n        forceUpdate();\n      }\n    }),\n    flattenNodes = _useFlattenTreeData.flattenNodes,\n    forceUpdate = _useFlattenTreeData.forceUpdate,\n    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData,\n    serializeListOnlyParent = _useFlattenTreeData.serializeListOnlyParent,\n    unSerializeList = _useFlattenTreeData.unSerializeList;\n  var _useTreeSearch = (0, _treeUtils.useTreeSearch)({\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      searchKeyword: searchKeyword,\n      data: treeData,\n      searchBy: searchBy,\n      callback: function callback(searchKeyword, _filterData, event) {\n        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n      }\n    }),\n    filteredData = _useTreeSearch.filteredData,\n    searchKeywordState = _useTreeSearch.searchKeywordState,\n    setSearchKeyword = _useTreeSearch.setSearchKeyword,\n    handleSearch = _useTreeSearch.handleSearch,\n    setFilteredData = _useTreeSearch.setFilteredData;\n  var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),\n    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,\n    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;\n  /**\n   * get formatted nodes for render tree\n   * @params render - renderNode function. only used when virtualized setting false\n   */\n  var getFormattedNodes = function getFormattedNodes(render) {\n    if (virtualized) {\n      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {\n        cascade: cascade,\n        searchKeyword: searchKeywordState\n      }).filter(function (item) {\n        return item.visible;\n      });\n    }\n    return (0, _utils2.getFormattedTree)(flattenNodes, filteredData, {\n      childrenKey: childrenKey,\n      cascade: cascade\n    }).map(function (node) {\n      return render === null || render === void 0 ? void 0 : render(node, 1);\n    });\n  };\n  var getTreeNodeProps = function getTreeNodeProps(node, layer) {\n    return {\n      as: Component,\n      rtl: rtl,\n      value: node[valueKey],\n      label: node[labelKey],\n      layer: layer,\n      focus: focusItemValue === node[valueKey],\n      expand: node.expand,\n      visible: node.visible,\n      loading: loadingNodeValues.some(function (item) {\n        return item === node[valueKey];\n      }),\n      disabled: (0, _utils2.getDisabledState)(flattenNodes, node, {\n        disabledItemValues: disabledItemValues,\n        valueKey: valueKey\n      }),\n      nodeData: node,\n      checkState: node.checkState,\n      uncheckable: (0, _utils2.isNodeUncheckable)(node, {\n        uncheckableItemValues: uncheckableItemValues,\n        valueKey: valueKey\n      }),\n      allUncheckable: (0, _utils2.isAllSiblingNodeUncheckable)(node, flattenNodes, uncheckableItemValues, valueKey),\n      onSelect: handleSelect,\n      onExpand: handleExpand,\n      renderTreeNode: renderTreeNode,\n      renderTreeIcon: renderTreeIcon\n    };\n  };\n  var focusActiveNode = function focusActiveNode() {\n    if (list.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: list.current,\n        valueKey: valueKey,\n        selector: \".\" + checkTreePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeView.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  };\n  (0, _react.useEffect)(function () {\n    setValue((0, _utils2.getCheckTreePickerDefaultValue)(value, uncheckableItemValues));\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  (0, _react.useEffect)(function () {\n    setFilteredData(data, searchKeywordState);\n    setTreeData(data);\n  }, [data, searchKeywordState, setFilteredData, setTreeData]);\n  (0, _react.useEffect)(function () {\n    setFilteredData(treeData, searchKeywordState);\n  }, [treeData, searchKeywordState, setFilteredData]);\n  (0, _react.useEffect)(function () {\n    if (Array.isArray(controlledExpandItemValues)) {\n      setExpandItemValues(controlledExpandItemValues);\n    }\n  }, [controlledExpandItemValues, setExpandItemValues]);\n  (0, _react.useEffect)(function () {\n    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  }, [searchKeyword, setSearchKeyword]);\n  (0, _react.useEffect)(function () {\n    unSerializeList({\n      nodes: flattenNodes,\n      key: 'check',\n      value: value,\n      cascade: cascade,\n      uncheckableItemValues: uncheckableItemValues\n    });\n    forceUpdate();\n  }, [cascade, value, uncheckableItemValues, unSerializeList, flattenNodes, forceUpdate]);\n  var toggleUpChecked = (0, _utils.useEventCallback)(function (nodes, node, checked) {\n    var currentNode = node.refKey ? nodes[node.refKey] : null;\n    if (cascade && currentNode) {\n      if (!checked) {\n        currentNode.check = checked;\n        currentNode.checkAll = checked;\n      } else {\n        if ((0, _utils2.isEveryChildChecked)(nodes, currentNode)) {\n          currentNode.check = true;\n          currentNode.checkAll = true;\n        } else {\n          currentNode.check = false;\n          currentNode.checkAll = false;\n        }\n      }\n      if (currentNode.parent) {\n        toggleUpChecked(nodes, currentNode.parent, checked);\n      }\n    }\n  });\n  var toggleDownChecked = (0, _utils.useEventCallback)(function (nodes, node, isChecked) {\n    var currentNode = node.refKey ? nodes[node.refKey] : null;\n    if (!currentNode) {\n      return;\n    }\n    currentNode.check = isChecked;\n    if (!currentNode[childrenKey] || !currentNode[childrenKey].length || !cascade) {\n      currentNode.checkAll = false;\n    } else {\n      currentNode.checkAll = isChecked;\n      currentNode[childrenKey].forEach(function (child) {\n        toggleDownChecked(nodes, child, isChecked);\n      });\n    }\n  });\n  var toggleChecked = (0, _utils.useEventCallback)(function (node, isChecked) {\n    var nodes = (0, _cloneDeep2.default)(flattenNodes);\n    toggleDownChecked(nodes, node, isChecked);\n    node.parent && toggleUpChecked(nodes, node.parent, isChecked);\n    var values = serializeListOnlyParent(nodes, 'check');\n    // filter uncheckableItemValues\n    return values.filter(function (v) {\n      return !uncheckableItemValues.includes(v);\n    });\n  });\n\n  // TODO-Doma\n  // Replace `getKeyParentMap` with `getParentMap`\n  var itemParentMap = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getKeyParentMap)(data, function (node) {\n      return node[valueKey];\n    }, function (node) {\n      return node[childrenKey];\n    });\n  }, [childrenKey, data, valueKey]);\n  var handleSelect = (0, _utils.useEventCallback)(function (node, event) {\n    var currentNode = node.refKey ? flattenNodes[node.refKey] : null;\n    if (!node || !currentNode) {\n      return;\n    }\n    var selectedValues = toggleChecked(node, !currentNode.check);\n    if (!isControlled) {\n      unSerializeList({\n        nodes: flattenNodes,\n        key: 'check',\n        value: selectedValues,\n        cascade: cascade,\n        uncheckableItemValues: uncheckableItemValues\n      });\n      setValue(selectedValues);\n    }\n    setActiveNode(node);\n    setFocusItemValue(node[valueKey]);\n    onChange === null || onChange === void 0 ? void 0 : onChange(selectedValues, event);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, selectedValues, event);\n    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(node, (0, _treeUtils.getPathTowardsItem)(node, function (item) {\n      return itemParentMap.get(item[valueKey]);\n    }));\n  });\n  var handleOpen = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$open;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$open = _trigger$current.open) === null || _trigger$current$open === void 0 ? void 0 : _trigger$current$open.call(_trigger$current);\n    setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);\n    focusActiveNode();\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  });\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current2, _trigger$current2$clo, _target$current;\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$clo = _trigger$current2.close) === null || _trigger$current2$clo === void 0 ? void 0 : _trigger$current2$clo.call(_trigger$current2);\n    setSearchKeyword('');\n    onClose === null || onClose === void 0 ? void 0 : onClose();\n    setFocusItemValue(null);\n    setActive(false);\n\n    /**\n     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu\n     */\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n  });\n  var handleExpand = (0, _utils.useEventCallback)(function (node) {\n    var nextExpandItemValues = (0, _treeUtils.toggleExpand)({\n      node: node,\n      isExpand: !node.expand,\n      expandItemValues: expandItemValues,\n      valueKey: valueKey\n    });\n    setExpandItemValues(nextExpandItemValues);\n    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    }));\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    var target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    setActiveNode(null);\n    setFocusItemValue(null);\n    if (!isControlled) {\n      setValue([]);\n      unSerializeList({\n        nodes: flattenNodes,\n        key: 'check',\n        value: [],\n        cascade: cascade,\n        uncheckableItemValues: uncheckableItemValues\n      });\n    }\n    onChange === null || onChange === void 0 ? void 0 : onChange([], event);\n  });\n  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {\n    var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      expandItemValues: expandItemValues\n    }, (0, _treeUtils.isSearching)(searchKeywordState));\n    var selector = \".\" + checkTreePrefix('node-label');\n    var focusProps = {\n      focusItemValue: focusItemValue,\n      focusableItems: focusableItems,\n      treeNodesRefs: treeNodesRefs,\n      selector: selector,\n      valueKey: valueKey,\n      callback: function callback(nextFocusItemValue) {\n        setFocusItemValue(nextFocusItemValue);\n      }\n    };\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  });\n  var handleLeftArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.leftArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      onExpand: handleExpand,\n      childrenKey: childrenKey,\n      onFocusItem: function onFocusItem() {\n        var _focusItem$parent, _focusItem$parent2;\n        setFocusItemValue(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey]);\n        (0, _treeUtils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, \".\" + checkTreePrefix('node-label'));\n      }\n    });\n  });\n  var handleRightArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.rightArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      childrenKey: childrenKey,\n      onExpand: handleExpand,\n      onFocusItem: function onFocusItem() {\n        handleFocusItem(_utils.KEY_VALUES.DOWN);\n      }\n    });\n  });\n  var selectActiveItem = function selectActiveItem(event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    if (!(0, _utils2.isNodeUncheckable)(activeItem, {\n      uncheckableItemValues: uncheckableItemValues,\n      valueKey: valueKey\n    }) && activeItem !== null) {\n      handleSelect(activeItem, event);\n    }\n  };\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !focusItemValue || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onClose: handleClose,\n    onMenuKeyDown: function onMenuKeyDown(event) {\n      (0, _Picker.onMenuKeyDown)(event, {\n        down: function down() {\n          return handleFocusItem(_utils.KEY_VALUES.DOWN);\n        },\n        up: function up() {\n          return handleFocusItem(_utils.KEY_VALUES.UP);\n        },\n        left: rtl ? handleRightArrow : handleLeftArrow,\n        right: rtl ? handleLeftArrow : handleRightArrow,\n        enter: selectActiveItem,\n        del: handleClean\n      });\n    }\n  }, rest));\n  var handleTreeKeydown = (0, _utils.useEventCallback)(function (event) {\n    if (!treeView.current) {\n      return;\n    }\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        return handleFocusItem(_utils.KEY_VALUES.DOWN);\n      },\n      up: function up() {\n        return handleFocusItem(_utils.KEY_VALUES.UP);\n      },\n      left: rtl ? handleRightArrow : handleLeftArrow,\n      right: rtl ? handleLeftArrow : handleRightArrow,\n      enter: selectActiveItem\n    });\n  });\n  var renderNode = function renderNode(node, layer) {\n    var visible = node.visible,\n      refKey = node.refKey; // when searching, all nodes should be expand\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    if (!visible) {\n      return null;\n    }\n    var children = node[childrenKey];\n    var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      /**\n       * spread operator don't copy unenumerable properties\n       * so we need to copy them manually\n       */\n      parent: node.parent,\n      expand: expand\n    }), layer), {\n      hasChildren: visibleChildren\n    });\n    if (nodeProps.hasChildren) {\n      var _merge;\n      layer += 1;\n      var openClass = checkTreePrefix('open');\n      var childrenClass = merge(checkTreePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));\n      var nodes = children || [];\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: childrenClass,\n        key: node[valueKey],\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 651,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({}, nodeProps, {\n        ref: function ref(_ref) {\n          return saveTreeNodeRef(_ref, refKey);\n        },\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 652,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: checkTreePrefix('group'),\n        role: \"group\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 653,\n          columnNumber: 11\n        }\n      }, nodes.map(function (child) {\n        return renderNode(child, layer);\n      }), showIndentLine && /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: checkTreePrefix('indent-line'),\n        style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 656,\n          columnNumber: 15\n        }\n      })));\n    }\n    return /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({\n      key: node[valueKey],\n      ref: function ref(_ref2) {\n        return saveTreeNodeRef(_ref2, refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 667,\n        columnNumber: 7\n      }\n    }));\n  };\n  var renderVirtualListNode = function renderVirtualListNode(_ref3) {\n    var index = _ref3.index,\n      style = _ref3.style,\n      data = _ref3.data;\n    var node = data[index];\n    var layer = node.layer,\n      refKey = node.refKey,\n      visible = node.visible;\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      /**\n       * spread operator don't copy unenumerable properties\n       * so we need to copy them manually\n       */\n      parent: node.parent,\n      expand: expand\n    }), layer), {\n      hasChildren: node.hasChildren\n    });\n    return visible && /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({\n      style: style,\n      ref: function ref(_ref4) {\n        return saveTreeNodeRef(_ref4, refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 700,\n        columnNumber: 9\n      }\n    }));\n  };\n  var renderCheckTree = function renderCheckTree() {\n    var _merge2, _merge3;\n    var classes = merge(withCheckTreeClassPrefix({\n      'without-children': !(0, _utils2.isSomeNodeHasChildren)(data, childrenKey),\n      virtualized: virtualized\n    }), (_merge2 = {}, _merge2[className !== null && className !== void 0 ? className : ''] = inline, _merge2));\n    var formattedNodes = getFormattedNodes(renderNode);\n    if (!formattedNodes.some(function (v) {\n      return v !== null;\n    })) {\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('none'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 717,\n          columnNumber: 14\n        }\n      }, locale.noResultsText);\n    }\n    var treeNodesClass = merge(checkTreePrefix('root'), (_merge3 = {}, _merge3[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge3));\n    var treeViewProps = {\n      ref: treeView\n    };\n    if (inline) {\n      treeViewProps = (0, _extends2.default)({\n        ref: root,\n        style: (0, _extends2.default)({\n          height: height\n        }, style)\n      }, rest);\n    }\n    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, (0, _extends2.default)({}, treeViewProps, {\n      multiselectable: true,\n      treeRootClassName: treeNodesClass,\n      className: classes,\n      onScroll: onScroll,\n      onKeyDown: inline ? handleTreeKeydown : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 741,\n        columnNumber: 7\n      }\n    }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n      defaultHeight: inline ? height : menuMaxHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 750,\n        columnNumber: 11\n      }\n    }, function (_ref5) {\n      var height = _ref5.height;\n      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n        ref: list,\n        height: height,\n        itemSize: itemSize,\n        itemCount: formattedNodes.length,\n        itemData: formattedNodes\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 755,\n          columnNumber: 15\n        }\n      }), renderVirtualListNode);\n    }) : formattedNodes);\n  };\n  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = (0, _classnames.default)(className, menuClassName, prefix('check-tree-menu'));\n    var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: mergedMenuStyle,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 780,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 789,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  var selectedItems = (0, _react.useMemo)(function () {\n    return (0, _utils2.getSelectedItems)(flattenNodes, value);\n  }, [flattenNodes, value]);\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  var hasValidValue = selectedItems.length > 0 || value.length > 0 && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n  if (hasValidValue) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 812,\n        columnNumber: 7\n      }\n    });\n    if ((0, _isFunction2.default)(renderValue)) {\n      selectedElement = renderValue(value, selectedItems, selectedElement);\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      countable: countable,\n      cleanable: cleanable,\n      disabled: disabled,\n      hasValue: hasValidValue,\n      name: 'check-tree'\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  if (inline) {\n    return renderCheckTree();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    multiple: true,\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: handleOpen,\n    onEntered: onEntered,\n    onExited: (0, _utils.createChainedFunction)(handleClose, onExited),\n    speaker: renderDropdownMenu,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 847,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 859,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    disabled: disabled,\n    as: toggleAs,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 860,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\nCheckTreePicker.displayName = 'CheckTreePicker';\nCheckTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  height: _propTypes.default.number,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  locale: _propTypes.default.any,\n  cascade: _propTypes.default.bool,\n  countable: _propTypes.default.bool,\n  searchable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchKeyword: _propTypes.default.string,\n  menuAutoWidth: _propTypes.default.bool,\n  defaultExpandAll: _propTypes.default.bool,\n  containerPadding: _propTypes.default.number,\n  disabledItemValues: _propTypes.default.array,\n  expandItemValues: _propTypes.default.array,\n  defaultExpandItemValues: _propTypes.default.array,\n  uncheckableItemValues: _propTypes.default.array,\n  onSearch: _propTypes.default.func,\n  onExpand: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderTreeNode: _propTypes.default.func,\n  renderTreeIcon: _propTypes.default.func,\n  searchBy: _propTypes.default.func,\n  onScroll: _propTypes.default.func\n});\nvar _default = CheckTreePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/CheckTreePicker/CheckTreePicker.tsx?");
 
 /***/ }),
 
@@ -6879,7 +6879,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\nvar disabledDateUtils = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _DateRangePickerContext = _interopRequireDefault(__webpack_require__(/*! ./DateRangePickerContext */ \"./src/DateRangePicker/DateRangePickerContext.ts\"));\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ../DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * A date range picker allows you to select a date range from a calendar.\n *\n * @see https://rsuitejs.com/components/date-range-picker\n */\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    className = props.className,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$character = props.character,\n    character = _props$character === void 0 ? ' ~ ' : _props$character,\n    defaultCalendarValue = props.defaultCalendarValue,\n    defaultValue = props.defaultValue,\n    plaintext = props.plaintext,\n    disabled = props.disabled,\n    DEPRECATED_disabledDateProp = props.disabledDate,\n    shouldDisableDate = props.shouldDisableDate,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    hoverRange = props.hoverRange,\n    idProp = props.id,\n    _props$isoWeek = props.isoWeek,\n    isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    loading = props.loading,\n    label = props.label,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    ranges = props.ranges,\n    readOnly = props.readOnly,\n    _props$showOneCalenda = props.showOneCalendar,\n    showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n    showWeekNumbers = props.showWeekNumbers,\n    showMeridian = props.showMeridian,\n    _props$showHeader = props.showHeader,\n    showHeader = _props$showHeader === void 0 ? true : _props$showHeader,\n    style = props.style,\n    size = props.size,\n    caretAsProp = props.caretAs,\n    valueProp = props.value,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onClose = props.onClose,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onOk = props.onOk,\n    onOpen = props.onOpen,\n    onSelect = props.onSelect,\n    onShortcutClick = props.onShortcutClick,\n    renderTitle = props.renderTitle,\n    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"editable\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"plaintext\", \"disabled\", \"disabledDate\", \"shouldDisableDate\", \"format\", \"hoverRange\", \"id\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"loading\", \"label\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"readOnly\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"showHeader\", \"style\", \"size\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onClose\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onOpen\", \"onSelect\", \"onShortcutClick\", \"renderTitle\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate;\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n    value = _useControlled[0],\n    setValue = _useControlled[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n  var _useState = (0, _react.useState)(true),\n    isSelectedIdle = _useState[0],\n    setSelectedIdle = _useState[1];\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n  var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n    selectedDates = _useState2[0],\n    setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n  var _useState3 = (0, _react.useState)(null),\n    hoverDateRange = _useState3[0],\n    setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.\n  var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({\n      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n    })),\n    calendarDate = _useState4[0],\n    setCalendarDate = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n  var selectRangeValueRef = (0, _react.useRef)(null);\n\n  /**\n   * Get the time on the calendar.\n   */\n  var getCalendarDatetime = function getCalendarDatetime(calendarKey) {\n    var index = calendarKey === 'start' ? 0 : 1;\n    return (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);\n  };\n\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n  var setCalendarDateRange = function setCalendarDateRange(_ref3) {\n    var dateRange = _ref3.dateRange,\n      calendarKey = _ref3.calendarKey,\n      eventName = _ref3.eventName;\n    var nextValue = dateRange;\n\n    // The time should remain the same when the dates in the date range are changed.\n    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime') {\n      var _startDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('start'),\n        to: dateRange[0]\n      });\n      var _endDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('end'),\n        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, 1) : dateRange[1]\n      });\n      nextValue = [_startDate, _endDate];\n    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {\n      // Make the calendar render the value of defaultCalendarValue after clearing the value.\n      nextValue = defaultCalendarValue;\n    }\n    var nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n      value: nextValue,\n      calendarKey: calendarKey,\n      allowAameMonth: onlyShowMonth\n    });\n    setCalendarDate(nextCalendarDate);\n    if (onlyShowMonth && eventName === 'changeMonth') {\n      setSelectedDates(nextCalendarDate);\n    }\n  };\n\n  // if valueProp changed then update selectValue/hoverValue\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n  var getDateRangeString = function getDateRangeString(nextValue) {\n    var _ref4 = nextValue !== null && nextValue !== void 0 ? nextValue : [null, null],\n      startDate = _ref4[0],\n      endDate = _ref4[1];\n    if (startDate && endDate) {\n      var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);\n      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[0],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 365,\n          columnNumber: 11\n        }\n      }), character, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[1],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 367,\n          columnNumber: 11\n        }\n      }));\n    }\n    return rangeFormatStr;\n  };\n  var getInputHtmlSize = function getInputHtmlSize() {\n    var padding = 4;\n    var strings = rangeFormatStr;\n    if (value) {\n      var _startDate2 = value[0],\n        _endDate2 = value[1];\n      strings = \"\" + formatDate(_startDate2, formatStr) + character + formatDate(_endDate2, formatStr);\n    }\n    return (0, _utils.getStringLength)(strings) + padding;\n  };\n\n  /**\n   * preset hover range\n   */\n  var getHoverRangeValue = function getHoverRangeValue(date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n      return hoverRange;\n    }\n    var hoverRangeFunc = getHoverRangeFunc();\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n    if (!isHoverRangeValid) {\n      return null;\n    }\n    if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {\n      hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);\n    }\n    return hoverValues;\n  };\n  var setDateRange = function setDateRange(event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n    setValue(nextValue);\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n  var handleMouseMove = (0, _utils.useEventCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date);\n\n    // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n    if (!isSelectedIdle) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n        if ((0, _dateUtils.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      }\n\n      // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  });\n\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n  var handleSelectDate = (0, _utils.useEventCallback)(function (index, date, event) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);\n\n    // in `oneTap` mode\n    if (isSelectedIdle && oneTap) {\n      setDateRange(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);\n      setSelectedIdle(false);\n      return;\n    }\n\n    // no preset hover range can use\n    if (noHoverRangeValid) {\n      // start select\n      if (isSelectedIdle) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!isSelectedIdle) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    }\n    if (nextSelectDates.length === 2) {\n      // If user have completed the selection, then sort the selected dates.\n      if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {\n        nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);\n      }\n      if ((0, _dateUtils.shouldRenderTime)(formatStr)) {\n        nextSelectDates = [(0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('start'),\n          to: nextSelectDates[0]\n        }), (0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('end'),\n          to: nextSelectDates[1]\n        })];\n      }\n      setHoverDateRange(nextSelectDates);\n    } else {\n      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);\n    }\n    setSelectedDates(nextSelectDates);\n    setCalendarDateRange({\n      dateRange: nextSelectDates,\n      calendarKey: calendarKey,\n      eventName: 'changeDate'\n    });\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    setSelectedIdle(!isSelectedIdle);\n  });\n\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var handleSingleCalendarMonth = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeMonth'\n    });\n  });\n  var handleSingleCalendarTime = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeTime'\n    });\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n\n      // if next[index] is not empty, only update the time after aligning the year, month and day\n      next[index] = next[index] ? (0, _dateUtils.copyTime)({\n        from: date,\n        to: next[index]\n      }) : new Date(date.valueOf());\n      return next;\n    });\n  });\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var handleToggleMeridian = (0, _utils.useEventCallback)(function (index) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);\n    setCalendarDate(nextCalendarDate);\n\n    // If the value already exists, update the value again.\n    if (selectedDates.length === 2) {\n      var nextSelectedDates = Array.from(selectedDates);\n      nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);\n      setSelectedDates(nextSelectedDates);\n    }\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    var nextCalendarDate;\n    if (value && value.length) {\n      var _startDate3 = value[0],\n        endData = value[1];\n      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    setCalendarDateRange({\n      dateRange: nextCalendarDate\n    });\n  });\n\n  /**\n   * Toolbar operation callback function\n   */\n  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n    var value = range.value;\n    setCalendarDateRange({\n      dateRange: value\n    });\n    if (closeOverlay) {\n      setDateRange(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    }\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n\n    // End unfinished selections.\n    setSelectedIdle(true);\n  });\n  var handleOK = (0, _utils.useEventCallback)(function (event) {\n    setDateRange(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    setCalendarDateRange({\n      dateRange: null\n    });\n    setDateRange(event, null);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    event.stopPropagation();\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {\n    if (!value) {\n      return;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    var selectValue = [startDate, endDate];\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    setCalendarDateRange({\n      dateRange: selectValue\n    });\n    setDateRange(event, selectValue);\n  });\n  var isDateDisabled = function isDateDisabled(date, options) {\n    var selectDate = options.selectDate,\n      selectedDone = options.selectedDone,\n      target = options.target;\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date, selectDate, selectedDone, target);\n    }\n    if (typeof DEPRECATED_disabledDateProp === 'function') {\n      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);\n    }\n    return false;\n  };\n  var disabledByBetween = function disabledByBetween(start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {\n      if (isDateDisabled(start, {\n        selectDate: selectedDates,\n        selectedDone: isSelectedIdle,\n        target: type\n      })) {\n        return true;\n      }\n      start = (0, _dateUtils.addDays)(start, 1);\n    }\n    return false;\n  };\n  var disabledOkButton = function disabledOkButton() {\n    var start = selectedDates[0],\n      end = selectedDates[1];\n    if (!start || !end || !isSelectedIdle) {\n      return true;\n    }\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  };\n  var disabledShortcutButton = function disabledShortcutButton(value) {\n    if (value === void 0) {\n      value = [];\n    }\n    var _value = value,\n      start = _value[0],\n      end = _value[1];\n    if (!start || !end) {\n      return true;\n    }\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: function enter() {\n        var _trigger$current2;\n        var _ref5 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},\n          open = _ref5.open;\n        if (!open) {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();\n        }\n      }\n    });\n  });\n  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('daterange-menu'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n\n    /**\n     * Set a min-width (528px) when there are two calendars\n     * @see https://github.com/rsuite/rsuite/issues/3522\n     */\n    var panelStyles = {\n      minWidth: showOneCalendar ? 'auto' : 528\n    };\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var calendarProps = {\n      calendarDate: calendarDate,\n      disabledDate: function disabledDate(date, values, type) {\n        return isDateDisabled(date, {\n          selectDate: values,\n          selectedDone: isSelectedIdle,\n          target: type\n        });\n      },\n      format: formatStr,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      limitStartYear: limitStartYear,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarMonth: handleSingleCalendarMonth,\n      onChangeCalendarTime: handleSingleCalendarTime,\n      onMouseMove: handleMouseMove,\n      onSelect: handleSelectDate,\n      onToggleMeridian: handleToggleMeridian,\n      renderTitle: renderTitle\n    };\n    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';\n    })) || [];\n    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? id + \"-label\" : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      target: trigger,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 779,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      style: panelStyles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 788,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 789,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disabledShortcut: disabledShortcutButton,\n      onShortcutClick: handleShortcutPageDate,\n      \"data-testid\": \"daterange-predefined-side\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 791,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 805,\n        columnNumber: 15\n      }\n    }, showHeader && /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-header'),\n      \"data-testid\": \"daterange-header\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 807,\n        columnNumber: 19\n      }\n    }, getDateRangeString(isSelectedIdle ? selectedDates : hoverDateRange)), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 811,\n        columnNumber: 17\n      }\n    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {\n      value: {\n        isSelectedIdle: isSelectedIdle\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 814,\n        columnNumber: 19\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 815,\n        columnNumber: 21\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 816,\n        columnNumber: 42\n      }\n    }))))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disabledOkBtn: disabledOkButton,\n      disabledShortcut: disabledShortcutButton,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onShortcutClick: handleShortcutPageDate,\n      ranges: bottomRanges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 820,\n        columnNumber: 15\n      }\n    })))));\n  };\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'daterange',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var caretAs = (0, _react.useMemo)(function () {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var isErrorValue = function isErrorValue(value) {\n    if (!value) {\n      return false;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    if (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {\n      return true;\n    }\n    if ((0, _dateUtils.isBefore)(endDate, startDate)) {\n      return true;\n    }\n    var disabledOptions = {\n      selectDate: value,\n      selectedDone: isSelectedIdle,\n      target: _utils.DATERANGE_DISABLED_TARGET.INPUT\n    };\n    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {\n      return true;\n    }\n    return false;\n  };\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {\n      htmlProps: [],\n      includeAria: true\n    }),\n    ariaProps = _partitionHTMLProps[0],\n    rest = _partitionHTMLProps[1];\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  var invalidValue = value && isErrorValue(value);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    ref: trigger,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(onOpen, onEntered),\n    onExited: (0, _utils.createChainedFunction)(onClose, onExited),\n    speaker: renderCalendarOverlay,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 887,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: root,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 897,\n      columnNumber: 7\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 903,\n      columnNumber: 11\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    inside: true,\n    size: size,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 905,\n      columnNumber: 11\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"label\"]))),\n    id: id + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 914,\n      columnNumber: 13\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? id + \"-label\" : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: value,\n    character: character,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : rangeFormatStr,\n    disabled: disabled,\n    onChange: handleInputChange,\n    readOnly: readOnly || !editable || loading,\n    plaintext: plaintext,\n    onKeyDown: handleInputKeyDown,\n    htmlSize: getInputHtmlSize(),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 917,\n      columnNumber: 13\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 935,\n      columnNumber: 13\n    }\n  }))));\n});\nDateRangePicker.after = disabledDateUtils.after;\nDateRangePicker.afterToday = disabledDateUtils.afterToday;\nDateRangePicker.allowedDays = disabledDateUtils.allowedDays;\nDateRangePicker.allowedMaxDays = disabledDateUtils.allowedMaxDays;\nDateRangePicker.allowedRange = disabledDateUtils.allowedRange;\nDateRangePicker.before = disabledDateUtils.before;\nDateRangePicker.beforeToday = disabledDateUtils.beforeToday;\nDateRangePicker.combine = disabledDateUtils.combine;\nDateRangePicker.displayName = 'DateRangePicker';\nDateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  ranges: _propTypes.default.array,\n  value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultCalendarValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  hoverRange: _propTypes.default.oneOfType([(0, _propTypes2.oneOf)(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _partial = _interopRequireDefault(__webpack_require__(/*! lodash/partial */ \"./node_modules/lodash/partial.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/Calendar */ \"./node_modules/@rsuite/icons/legacy/Calendar.js\"));\nvar _ClockO = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/legacy/ClockO */ \"./node_modules/@rsuite/icons/legacy/ClockO.js\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _dateUtils = __webpack_require__(/*! ../utils/dateUtils */ \"./src/utils/dateUtils.ts\");\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\nvar disabledDateUtils = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _DateRangePickerContext = _interopRequireDefault(__webpack_require__(/*! ./DateRangePickerContext */ \"./src/DateRangePicker/DateRangePickerContext.ts\"));\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ../DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\",\n  _this = void 0,\n  _templateObject;\n/**\n * A date range picker allows you to select a date range from a calendar.\n *\n * @see https://rsuitejs.com/components/date-range-picker\n */\nvar DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _ref, _ref2, _merge;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    className = props.className,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    _props$editable = props.editable,\n    editable = _props$editable === void 0 ? true : _props$editable,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$character = props.character,\n    character = _props$character === void 0 ? ' ~ ' : _props$character,\n    defaultCalendarValue = props.defaultCalendarValue,\n    defaultValue = props.defaultValue,\n    plaintext = props.plaintext,\n    disabled = props.disabled,\n    DEPRECATED_disabledDateProp = props.disabledDate,\n    shouldDisableDate = props.shouldDisableDate,\n    _props$format = props.format,\n    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,\n    hoverRange = props.hoverRange,\n    idProp = props.id,\n    _props$isoWeek = props.isoWeek,\n    isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,\n    _props$limitEndYear = props.limitEndYear,\n    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,\n    limitStartYear = props.limitStartYear,\n    overrideLocale = props.locale,\n    loading = props.loading,\n    label = props.label,\n    menuClassName = props.menuClassName,\n    menuStyle = props.menuStyle,\n    oneTap = props.oneTap,\n    _props$placeholder = props.placeholder,\n    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    ranges = props.ranges,\n    readOnly = props.readOnly,\n    _props$showOneCalenda = props.showOneCalendar,\n    showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,\n    showWeekNumbers = props.showWeekNumbers,\n    showMeridian = props.showMeridian,\n    _props$showHeader = props.showHeader,\n    showHeader = _props$showHeader === void 0 ? true : _props$showHeader,\n    style = props.style,\n    size = props.size,\n    caretAsProp = props.caretAs,\n    valueProp = props.value,\n    onChange = props.onChange,\n    onClean = props.onClean,\n    onClose = props.onClose,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onExited = props.onExited,\n    onOk = props.onOk,\n    onOpen = props.onOpen,\n    onSelect = props.onSelect,\n    onShortcutClick = props.onShortcutClick,\n    renderTitle = props.renderTitle,\n    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"appearance\", \"editable\", \"cleanable\", \"character\", \"defaultCalendarValue\", \"defaultValue\", \"plaintext\", \"disabled\", \"disabledDate\", \"shouldDisableDate\", \"format\", \"hoverRange\", \"id\", \"isoWeek\", \"limitEndYear\", \"limitStartYear\", \"locale\", \"loading\", \"label\", \"menuClassName\", \"menuStyle\", \"oneTap\", \"placeholder\", \"placement\", \"ranges\", \"readOnly\", \"showOneCalendar\", \"showWeekNumbers\", \"showMeridian\", \"showHeader\", \"style\", \"size\", \"caretAs\", \"value\", \"onChange\", \"onClean\", \"onClose\", \"onEnter\", \"onEntered\", \"onExited\", \"onOk\", \"onOpen\", \"onSelect\", \"onShortcutClick\", \"renderTitle\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),\n    locale = _useCustom.locale,\n    formatDate = _useCustom.formatDate;\n  var rangeFormatStr = \"\" + formatStr + character + formatStr;\n  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),\n    value = _useControlled[0],\n    setValue = _useControlled[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);\n\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n  var _useState = (0, _react.useState)(true),\n    isSelectedIdle = _useState[0],\n    setSelectedIdle = _useState[1];\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n  var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),\n    selectedDates = _useState2[0],\n    setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n  var _useState3 = (0, _react.useState)(null),\n    hoverDateRange = _useState3[0],\n    setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.\n  var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({\n      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null\n    })),\n    calendarDate = _useState4[0],\n    setCalendarDate = _useState4[1];\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n  var selectRangeValueRef = (0, _react.useRef)(null);\n\n  /**\n   * Get the time on the calendar.\n   */\n  var getCalendarDatetime = function getCalendarDatetime(calendarKey) {\n    var index = calendarKey === 'start' ? 0 : 1;\n    return (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);\n  };\n\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n  var setCalendarDateRange = function setCalendarDateRange(_ref3) {\n    var dateRange = _ref3.dateRange,\n      calendarKey = _ref3.calendarKey,\n      eventName = _ref3.eventName;\n    var nextValue = dateRange;\n\n    // The time should remain the same when the dates in the date range are changed.\n    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime') {\n      var _startDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('start'),\n        to: dateRange[0]\n      });\n      var _endDate = (0, _dateUtils.copyTime)({\n        from: getCalendarDatetime('end'),\n        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, 1) : dateRange[1]\n      });\n      nextValue = [_startDate, _endDate];\n    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {\n      // Make the calendar render the value of defaultCalendarValue after clearing the value.\n      nextValue = defaultCalendarValue;\n    }\n    var nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n      value: nextValue,\n      calendarKey: calendarKey,\n      allowAameMonth: onlyShowMonth\n    });\n    setCalendarDate(nextCalendarDate);\n    if (onlyShowMonth && eventName === 'changeMonth') {\n      setSelectedDates(nextCalendarDate);\n    }\n  };\n\n  // if valueProp changed then update selectValue/hoverValue\n  (0, _react.useEffect)(function () {\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n  var getDateRangeString = function getDateRangeString(nextValue) {\n    var _ref4 = nextValue !== null && nextValue !== void 0 ? nextValue : [null, null],\n      startDate = _ref4[0],\n      endDate = _ref4[1];\n    if (startDate && endDate) {\n      var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);\n      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[0],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 365,\n          columnNumber: 11\n        }\n      }), character, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {\n        date: displayValue[1],\n        formatStr: formatStr,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 367,\n          columnNumber: 11\n        }\n      }));\n    }\n    return rangeFormatStr;\n  };\n  var getInputHtmlSize = function getInputHtmlSize() {\n    var padding = 4;\n    var strings = rangeFormatStr;\n    if (value) {\n      var _startDate2 = value[0],\n        _endDate2 = value[1];\n      strings = \"\" + formatDate(_startDate2, formatStr) + character + formatDate(_endDate2, formatStr);\n    }\n    return (0, _utils.getStringLength)(strings) + padding;\n  };\n\n  /**\n   * preset hover range\n   */\n  var getHoverRangeValue = function getHoverRangeValue(date) {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);\n      } else if (hoverRange === 'month') {\n        return _utils2.getMonthHoverRange;\n      }\n      return hoverRange;\n    }\n    var hoverRangeFunc = getHoverRangeFunc();\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n    var hoverValues = hoverRangeFunc(date);\n    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n    if (!isHoverRangeValid) {\n      return null;\n    }\n    if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {\n      hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);\n    }\n    return hoverValues;\n  };\n  var setDateRange = function setDateRange(event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n    setValue(nextValue);\n    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {\n      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n  var handleMouseMove = (0, _utils.useEventCallback)(function (date) {\n    var nextHoverDateRange = getHoverRangeValue(date);\n\n    // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n    if (!isSelectedIdle) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n        if ((0, _dateUtils.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(function (prevHoverValue) {\n          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];\n        });\n      }\n\n      // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  });\n\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n  var handleSelectDate = (0, _utils.useEventCallback)(function (index, date, event) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    var hoverRangeValue = getHoverRangeValue(date);\n    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);\n\n    // in `oneTap` mode\n    if (isSelectedIdle && oneTap) {\n      setDateRange(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);\n      setSelectedIdle(false);\n      return;\n    }\n\n    // no preset hover range can use\n    if (noHoverRangeValid) {\n      // start select\n      if (isSelectedIdle) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!isSelectedIdle) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    }\n    if (nextSelectDates.length === 2) {\n      // If user have completed the selection, then sort the selected dates.\n      if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {\n        nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);\n      }\n      if ((0, _dateUtils.shouldRenderTime)(formatStr)) {\n        nextSelectDates = [(0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('start'),\n          to: nextSelectDates[0]\n        }), (0, _dateUtils.copyTime)({\n          from: getCalendarDatetime('end'),\n          to: nextSelectDates[1]\n        })];\n      }\n      setHoverDateRange(nextSelectDates);\n    } else {\n      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);\n    }\n    setSelectedDates(nextSelectDates);\n    setCalendarDateRange({\n      dateRange: nextSelectDates,\n      calendarKey: calendarKey,\n      eventName: 'changeDate'\n    });\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);\n    setSelectedIdle(!isSelectedIdle);\n  });\n\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n  (0, _react.useEffect)(function () {\n    var selectValueLength = selectedDates.length;\n    var doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  var handleSingleCalendarMonth = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeMonth'\n    });\n  });\n  var handleSingleCalendarTime = (0, _utils.useEventCallback)(function (index, date) {\n    var calendarKey = index === 0 ? 'start' : 'end';\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey: calendarKey,\n      eventName: 'changeTime'\n    });\n    setSelectedDates(function (prev) {\n      var next = [].concat(prev);\n\n      // if next[index] is not empty, only update the time after aligning the year, month and day\n      next[index] = next[index] ? (0, _dateUtils.copyTime)({\n        from: date,\n        to: next[index]\n      }) : new Date(date.valueOf());\n      return next;\n    });\n  });\n\n  /**\n   * The callback triggered when PM/AM is switched.\n   */\n  var handleToggleMeridian = (0, _utils.useEventCallback)(function (index) {\n    var nextCalendarDate = Array.from(calendarDate);\n    nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);\n    setCalendarDate(nextCalendarDate);\n\n    // If the value already exists, update the value again.\n    if (selectedDates.length === 2) {\n      var nextSelectedDates = Array.from(selectedDates);\n      nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);\n      setSelectedDates(nextSelectedDates);\n    }\n  });\n  var handleEnter = (0, _utils.useEventCallback)(function () {\n    var nextCalendarDate;\n    if (value && value.length) {\n      var _startDate3 = value[0],\n        endData = value[1];\n      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils2.getSafeCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null\n      });\n    }\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    setCalendarDateRange({\n      dateRange: nextCalendarDate\n    });\n  });\n\n  /**\n   * Toolbar operation callback function\n   */\n  var handleShortcutPageDate = (0, _utils.useEventCallback)(function (range, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n    var value = range.value;\n    setCalendarDateRange({\n      dateRange: value\n    });\n    if (closeOverlay) {\n      setDateRange(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    }\n    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);\n\n    // End unfinished selections.\n    setSelectedIdle(true);\n  });\n  var handleOK = (0, _utils.useEventCallback)(function (event) {\n    setDateRange(event, selectedDates);\n    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    setCalendarDateRange({\n      dateRange: null\n    });\n    setDateRange(event, null);\n    onClean === null || onClean === void 0 ? void 0 : onClean(event);\n    event.stopPropagation();\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  var handleInputChange = (0, _utils.useEventCallback)(function (value, event) {\n    if (!value) {\n      return;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    var selectValue = [startDate, endDate];\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    setCalendarDateRange({\n      dateRange: selectValue\n    });\n    setDateRange(event, selectValue);\n  });\n  var isDateDisabled = function isDateDisabled(date, options) {\n    var selectDate = options.selectDate,\n      selectedDone = options.selectedDone,\n      target = options.target;\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date, selectDate, selectedDone, target);\n    }\n    if (typeof DEPRECATED_disabledDateProp === 'function') {\n      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);\n    }\n    return false;\n  };\n  var disabledByBetween = function disabledByBetween(start, end, type) {\n    // If the date is between the start and the end\n    // the button is disabled\n    while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {\n      if (isDateDisabled(start, {\n        selectDate: selectedDates,\n        selectedDone: isSelectedIdle,\n        target: type\n      })) {\n        return true;\n      }\n      start = (0, _dateUtils.addDays)(start, 1);\n    }\n    return false;\n  };\n  var disabledOkButton = function disabledOkButton() {\n    var start = selectedDates[0],\n      end = selectedDates[1];\n    if (!start || !end || !isSelectedIdle) {\n      return true;\n    }\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);\n  };\n  var disabledShortcutButton = function disabledShortcutButton(value) {\n    if (value === void 0) {\n      value = [];\n    }\n    var _value = value,\n      start = _value[0],\n      end = _value[1];\n    if (!start || !end) {\n      return true;\n    }\n    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  };\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: function enter() {\n        var _trigger$current2;\n        var _ref5 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},\n          open = _ref5.open;\n        if (!open) {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();\n        }\n      }\n    });\n  });\n  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('daterange-menu'));\n    var panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar\n    });\n\n    /**\n     * Set a min-width (528px) when there are two calendars\n     * @see https://github.com/rsuite/rsuite/issues/3522\n     */\n    var panelStyles = {\n      minWidth: showOneCalendar ? 'auto' : 528\n    };\n    var styles = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    var calendarProps = {\n      calendarDate: calendarDate,\n      disabledDate: function disabledDate(date, values, type) {\n        return isDateDisabled(date, {\n          selectDate: values,\n          selectedDone: isSelectedIdle,\n          target: type\n        });\n      },\n      format: formatStr,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      isoWeek: isoWeek,\n      limitEndYear: limitEndYear,\n      limitStartYear: limitStartYear,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      value: selectedDates,\n      showMeridian: showMeridian,\n      onChangeCalendarMonth: handleSingleCalendarMonth,\n      onChangeCalendarTime: handleSingleCalendarTime,\n      onMouseMove: handleMouseMove,\n      onSelect: handleSelectDate,\n      onToggleMeridian: handleToggleMeridian,\n      renderTitle: renderTitle\n    };\n    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';\n    })) || [];\n    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {\n      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? id + \"-label\" : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      target: trigger,\n      style: styles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 779,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      style: panelStyles,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 788,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 789,\n        columnNumber: 11\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disabledShortcut: disabledShortcutButton,\n      onShortcutClick: handleShortcutPageDate,\n      \"data-testid\": \"daterange-predefined-side\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 791,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 804,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 805,\n        columnNumber: 15\n      }\n    }, showHeader && /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-header'),\n      \"data-testid\": \"daterange-header\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 807,\n        columnNumber: 19\n      }\n    }, getDateRangeString(isSelectedIdle ? selectedDates : hoverDateRange)), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(\"daterange-calendar-\" + (showOneCalendar ? 'single' : 'group')),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 811,\n        columnNumber: 17\n      }\n    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {\n      value: {\n        isSelectedIdle: isSelectedIdle\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 814,\n        columnNumber: 19\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 0\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 815,\n        columnNumber: 21\n      }\n    })), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n      index: 1\n    }, calendarProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 816,\n        columnNumber: 42\n      }\n    }))))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disabledOkBtn: disabledOkButton,\n      disabledShortcut: disabledShortcutButton,\n      hideOkBtn: oneTap,\n      onOk: handleOK,\n      onShortcutClick: handleShortcutPageDate,\n      ranges: bottomRanges,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 820,\n        columnNumber: 15\n      }\n    })))));\n  };\n  var hasValue = !(0, _isNil.default)(value) && value.length > 1;\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      name: 'daterange',\n      appearance: appearance,\n      hasValue: hasValue,\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  var caretAs = (0, _react.useMemo)(function () {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);\n  }, [caretAsProp, formatStr]);\n  var isErrorValue = function isErrorValue(value) {\n    if (!value) {\n      return false;\n    }\n    var startDate = value[0],\n      endDate = value[1];\n    if (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {\n      return true;\n    }\n    if ((0, _dateUtils.isBefore)(endDate, startDate)) {\n      return true;\n    }\n    var disabledOptions = {\n      selectDate: value,\n      selectedDone: isSelectedIdle,\n      target: _utils.DATERANGE_DISABLED_TARGET.INPUT\n    };\n    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {\n      return true;\n    }\n    return false;\n  };\n  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {\n      htmlProps: [],\n      includeAria: true\n    }),\n    ariaProps = _partitionHTMLProps[0],\n    rest = _partitionHTMLProps[1];\n  var showCleanButton = cleanable && hasValue && !readOnly;\n  var invalidValue = value && isErrorValue(value);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    ref: trigger,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    placement: placement,\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: (0, _utils.createChainedFunction)(onOpen, onEntered),\n    onExited: (0, _utils.createChainedFunction)(onClose, onExited),\n    speaker: renderCalendarOverlay,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 887,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: root,\n    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),\n    style: style,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 897,\n      columnNumber: 7\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 903,\n      columnNumber: 11\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {\n    inside: true,\n    size: size,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 905,\n      columnNumber: 11\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"label\"]))),\n    id: id + \"-label\",\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 914,\n      columnNumber: 13\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? id + \"-label\" : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: value,\n    character: character,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : rangeFormatStr,\n    disabled: disabled,\n    onChange: handleInputChange,\n    readOnly: readOnly || !editable || loading,\n    plaintext: plaintext,\n    onKeyDown: handleInputKeyDown,\n    htmlSize: getInputHtmlSize(),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 917,\n      columnNumber: 13\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 935,\n      columnNumber: 13\n    }\n  }))));\n});\nDateRangePicker.after = disabledDateUtils.after;\nDateRangePicker.afterToday = disabledDateUtils.afterToday;\nDateRangePicker.allowedDays = disabledDateUtils.allowedDays;\nDateRangePicker.allowedMaxDays = disabledDateUtils.allowedMaxDays;\nDateRangePicker.allowedRange = disabledDateUtils.allowedRange;\nDateRangePicker.before = disabledDateUtils.before;\nDateRangePicker.beforeToday = disabledDateUtils.beforeToday;\nDateRangePicker.combine = disabledDateUtils.combine;\nDateRangePicker.displayName = 'DateRangePicker';\nDateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {\n  ranges: _propTypes.default.array,\n  value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  defaultCalendarValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),\n  hoverRange: _propTypes.default.oneOfType([(0, _propTypes2.oneOf)(['week', 'month']), _propTypes.default.func]),\n  format: _propTypes.default.string,\n  isoWeek: _propTypes.default.bool,\n  oneTap: _propTypes.default.bool,\n  limitEndYear: _propTypes.default.number,\n  limitStartYear: _propTypes.default.number,\n  onChange: _propTypes.default.func,\n  onOk: _propTypes.default.func,\n  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use \"shouldDisableDate\" property instead.'),\n  shouldDisableDate: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  showWeekNumbers: _propTypes.default.bool,\n  showMeridian: _propTypes.default.bool,\n  showOneCalendar: _propTypes.default.bool\n});\nvar _default = DateRangePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
 
 /***/ }),
 
@@ -7902,7 +7902,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _NavItem = _interopRequireDefault(__webpack_require__(/*! ./NavItem */ \"./src/Nav/NavItem.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Navbar = __webpack_require__(/*! ../Navbar/Navbar */ \"./src/Navbar/Navbar.tsx\");\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _Menubar = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/Menubar */ \"./src/internals/Menu/Menubar.tsx\"));\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _NavDropdown = _interopRequireDefault(__webpack_require__(/*! ./NavDropdown */ \"./src/Nav/NavDropdown.tsx\"));\nvar _NavMenu = _interopRequireWildcard(__webpack_require__(/*! ./NavMenu */ \"./src/Nav/NavMenu.tsx\"));\nvar _deprecateComponent = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecateComponent */ \"./src/utils/deprecateComponent.tsx\"));\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\nvar _NavbarDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Navbar/NavbarDropdownItem */ \"./src/Navbar/NavbarDropdownItem.tsx\"));\nvar _SidenavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavDropdownItem */ \"./src/Sidenav/SidenavDropdownItem.tsx\"));\nvar _NavbarItem = _interopRequireDefault(__webpack_require__(/*! ../Navbar/NavbarItem */ \"./src/Navbar/NavbarItem.tsx\"));\nvar _SidenavItem = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavItem */ \"./src/Sidenav/SidenavItem.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Nav/Nav.tsx\",\n  _this = void 0;\n/**\n * The `Nav` component is used to create navigation links.\n * @see https://rsuitejs.com/components/nav\n */\nvar Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'nav' : _props$classPrefix,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    vertical = props.vertical,\n    justified = props.justified,\n    reversed = props.reversed,\n    pullRight = props.pullRight,\n    className = props.className,\n    children = props.children,\n    activeKeyProp = props.activeKey,\n    defaultActiveKey = props.defaultActiveKey,\n    onSelectProp = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"appearance\", \"vertical\", \"justified\", \"reversed\", \"pullRight\", \"className\", \"children\", \"activeKey\", \"defaultActiveKey\", \"onSelect\"]);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  // Whether inside a <Navbar>\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  var menubarRef = (0, _utils.useEnsuredRef)(ref);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    rootPrefix = _useClassNames.rootPrefix,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, rootPrefix({\n    'navbar-nav': navbar,\n    'navbar-right': pullRight,\n    'sidenav-nav': sidenav\n  }), withClassPrefix(appearance, {\n    horizontal: navbar || !vertical && !sidenav,\n    vertical: vertical || sidenav,\n    justified: justified,\n    reversed: reversed\n  }));\n  var _ref = sidenav || {},\n    activeKeyFromSidenav = _ref.activeKey,\n    _ref$onSelect = _ref.onSelect,\n    onSelectFromSidenav = _ref$onSelect === void 0 ? onSelectProp : _ref$onSelect;\n  var _useControlled = (0, _utils.useControlled)(activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav, defaultActiveKey),\n    activeKey = _useControlled[0],\n    setActiveKey = _useControlled[1];\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      activeKey: activeKey,\n      onSelect: function onSelect(eventKey, event) {\n        setActiveKey(eventKey);\n        onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);\n        onSelectFromSidenav === null || onSelectFromSidenav === void 0 ? void 0 : onSelectFromSidenav(eventKey, event);\n      }\n    };\n  }, [activeKey, onSelectFromSidenav, onSelectProp, setActiveKey]);\n  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 124,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n      ref: ref,\n      className: classes\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 125,\n        columnNumber: 9\n      }\n    }), children));\n  }\n  var hasWaterline = appearance !== 'default';\n\n  // If inside a collapsed <Sidenav>, render an ARIA `menubar` (vertical)\n  if (sidenav) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 137,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {\n      vertical: !!sidenav,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 138,\n        columnNumber: 9\n      }\n    }, function (menubar, ref) {\n      return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n        ref: ref\n      }, rest, {\n        className: classes\n      }, menubar, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 140,\n          columnNumber: 13\n        }\n      }), children);\n    }));\n  }\n  return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 149,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: menubarRef,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 150,\n      columnNumber: 7\n    }\n  }), children, hasWaterline && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('bar'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 152,\n      columnNumber: 26\n    }\n  })));\n});\nvar DeprecatedNavDropdown = (0, _deprecateComponent.default)(_NavDropdown.default, '<Nav.Dropdown> is deprecated, use <Nav.Menu> instead.');\nDeprecatedNavDropdown.Menu = (0, _deprecateComponent.default)(_NavDropdownMenu.default, '<Nav.Dropdown.Menu> is deprecated, use <Nav.Menu> instead');\nDeprecatedNavDropdown.Item = (0, _deprecateComponent.default)(_NavDropdownItem.default, '<Nav.Dropdown.Item> is deprecated, use <Nav.Item> instead');\nNav.Dropdown = DeprecatedNavDropdown;\n/**\n * The <Nav.Item> API\n * When used as direct child of <Nav>, render the NavItem\n * When used within a <Nav.Menu>, render the NavDropdownItem\n */\nNav.Item = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var nav = (0, _react.useContext)(_NavContext.default);\n  if (!nav) {\n    throw new Error('<Nav.Item> must be rendered within a <Nav> component.');\n  }\n  var parentNavMenu = (0, _react.useContext)(_NavMenu.NavMenuContext);\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var _ref2 = parentNavMenu !== null && parentNavMenu !== void 0 ? parentNavMenu : [],\n    dispatch = _ref2[1];\n  var _id = (0, _utils.useInternalId)('Nav.Item');\n  (0, _react.useEffect)(function () {\n    if (dispatch) {\n      var _props$active;\n      dispatch({\n        type: _NavMenu.NavMenuActionType.RegisterItem,\n        payload: {\n          _id: _id,\n          eventKey: props.eventKey,\n          active: (_props$active = props.active) !== null && _props$active !== void 0 ? _props$active : false\n        }\n      });\n      return function () {\n        dispatch({\n          type: _NavMenu.NavMenuActionType.UnregisterItem,\n          payload: {\n            _id: _id\n          }\n        });\n      };\n    }\n  }, [dispatch, _id, props.eventKey, props.active]);\n  if (parentNavMenu) {\n    if (navbar) {\n      return /*#__PURE__*/_react.default.createElement(_NavbarDropdownItem.default, (0, _extends2.default)({\n        ref: ref\n      }, props, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 215,\n          columnNumber: 14\n        }\n      }));\n    }\n    if (sidenav) {\n      return /*#__PURE__*/_react.default.createElement(_SidenavDropdownItem.default, (0, _extends2.default)({\n        ref: ref\n      }, props, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 219,\n          columnNumber: 14\n        }\n      }));\n    }\n    return /*#__PURE__*/_react.default.createElement(_NavDropdownItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 222,\n        columnNumber: 12\n      }\n    }));\n  }\n  if (navbar) {\n    return /*#__PURE__*/_react.default.createElement(_NavbarItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 226,\n        columnNumber: 12\n      }\n    }));\n  }\n  if (sidenav) {\n    return /*#__PURE__*/_react.default.createElement(_SidenavItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 230,\n        columnNumber: 12\n      }\n    }));\n  }\n  return /*#__PURE__*/_react.default.createElement(_NavItem.default, (0, _extends2.default)({\n    ref: ref\n  }, props, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 233,\n      columnNumber: 10\n    }\n  }));\n});\nNav.Item.displayName = 'Nav.Item';\nNav.Menu = _NavMenu.default;\nNav.displayName = 'Nav';\nNav.propTypes = {\n  classPrefix: _propTypes.default.string,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle', 'tabs']),\n  // Reverse Direction of tabs/subtle\n  reversed: _propTypes.default.bool,\n  justified: _propTypes.default.bool,\n  vertical: _propTypes.default.bool,\n  pullRight: _propTypes.default.bool,\n  activeKey: _propTypes.default.any,\n  onSelect: _propTypes.default.func\n};\nvar _default = Nav;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/Nav.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _NavItem = _interopRequireDefault(__webpack_require__(/*! ./NavItem */ \"./src/Nav/NavItem.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Navbar = __webpack_require__(/*! ../Navbar/Navbar */ \"./src/Navbar/Navbar.tsx\");\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _Menubar = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/Menubar */ \"./src/internals/Menu/Menubar.tsx\"));\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _NavDropdown = _interopRequireDefault(__webpack_require__(/*! ./NavDropdown */ \"./src/Nav/NavDropdown.tsx\"));\nvar _NavMenu = _interopRequireWildcard(__webpack_require__(/*! ./NavMenu */ \"./src/Nav/NavMenu.tsx\"));\nvar _deprecateComponent = _interopRequireDefault(__webpack_require__(/*! ../utils/deprecateComponent */ \"./src/utils/deprecateComponent.tsx\"));\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\nvar _NavbarDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Navbar/NavbarDropdownItem */ \"./src/Navbar/NavbarDropdownItem.tsx\"));\nvar _SidenavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavDropdownItem */ \"./src/Sidenav/SidenavDropdownItem.tsx\"));\nvar _NavbarItem = _interopRequireDefault(__webpack_require__(/*! ../Navbar/NavbarItem */ \"./src/Navbar/NavbarItem.tsx\"));\nvar _SidenavItem = _interopRequireDefault(__webpack_require__(/*! ../Sidenav/SidenavItem */ \"./src/Sidenav/SidenavItem.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Nav/Nav.tsx\",\n  _this = void 0;\n/**\n * The `Nav` component is used to create navigation links.\n * @see https://rsuitejs.com/components/nav\n */\nvar Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'nav' : _props$classPrefix,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    vertical = props.vertical,\n    justified = props.justified,\n    reversed = props.reversed,\n    pullRight = props.pullRight,\n    className = props.className,\n    children = props.children,\n    activeKeyProp = props.activeKey,\n    defaultActiveKey = props.defaultActiveKey,\n    onSelectProp = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"appearance\", \"vertical\", \"justified\", \"reversed\", \"pullRight\", \"className\", \"children\", \"activeKey\", \"defaultActiveKey\", \"onSelect\"]);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  // Whether inside a <Navbar>\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  var menubarRef = (0, _utils.useEnsuredRef)(ref);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    rootPrefix = _useClassNames.rootPrefix,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, rootPrefix({\n    'navbar-nav': navbar,\n    'navbar-right': pullRight,\n    'sidenav-nav': sidenav\n  }), withClassPrefix(appearance, {\n    horizontal: navbar || !vertical && !sidenav,\n    vertical: vertical || sidenav,\n    justified: justified,\n    reversed: reversed\n  }));\n  var _ref = sidenav || {},\n    activeKeyFromSidenav = _ref.activeKey,\n    onSelectFromSidenav = _ref.onSelect;\n  var _useControlled = (0, _utils.useControlled)(activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav, defaultActiveKey),\n    activeKey = _useControlled[0],\n    setActiveKey = _useControlled[1];\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      activeKey: activeKey,\n      onSelect: function onSelect(eventKey, event) {\n        setActiveKey(eventKey);\n        onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);\n        onSelectFromSidenav === null || onSelectFromSidenav === void 0 ? void 0 : onSelectFromSidenav(eventKey, event);\n      }\n    };\n  }, [activeKey, onSelectFromSidenav, onSelectProp, setActiveKey]);\n  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 123,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n      ref: ref,\n      className: classes\n    }, rest, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 124,\n        columnNumber: 9\n      }\n    }), children));\n  }\n  var hasWaterline = appearance !== 'default';\n\n  // If inside a collapsed <Sidenav>, render an ARIA `menubar` (vertical)\n  if (sidenav) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 136,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {\n      vertical: !!sidenav,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 137,\n        columnNumber: 9\n      }\n    }, function (menubar, ref) {\n      return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n        ref: ref\n      }, rest, {\n        className: classes\n      }, menubar, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 139,\n          columnNumber: 13\n        }\n      }), children);\n    }));\n  }\n  return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 148,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: menubarRef,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 149,\n      columnNumber: 7\n    }\n  }), children, hasWaterline && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('bar'),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 151,\n      columnNumber: 26\n    }\n  })));\n});\nvar DeprecatedNavDropdown = (0, _deprecateComponent.default)(_NavDropdown.default, '<Nav.Dropdown> is deprecated, use <Nav.Menu> instead.');\nDeprecatedNavDropdown.Menu = (0, _deprecateComponent.default)(_NavDropdownMenu.default, '<Nav.Dropdown.Menu> is deprecated, use <Nav.Menu> instead');\nDeprecatedNavDropdown.Item = (0, _deprecateComponent.default)(_NavDropdownItem.default, '<Nav.Dropdown.Item> is deprecated, use <Nav.Item> instead');\nNav.Dropdown = DeprecatedNavDropdown;\n/**\n * The <Nav.Item> API\n * When used as direct child of <Nav>, render the NavItem\n * When used within a <Nav.Menu>, render the NavDropdownItem\n */\nNav.Item = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var nav = (0, _react.useContext)(_NavContext.default);\n  if (!nav) {\n    throw new Error('<Nav.Item> must be rendered within a <Nav> component.');\n  }\n  var parentNavMenu = (0, _react.useContext)(_NavMenu.NavMenuContext);\n  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  var _ref2 = parentNavMenu !== null && parentNavMenu !== void 0 ? parentNavMenu : [],\n    dispatch = _ref2[1];\n  var _id = (0, _utils.useInternalId)('Nav.Item');\n  (0, _react.useEffect)(function () {\n    if (dispatch) {\n      var _props$active;\n      dispatch({\n        type: _NavMenu.NavMenuActionType.RegisterItem,\n        payload: {\n          _id: _id,\n          eventKey: props.eventKey,\n          active: (_props$active = props.active) !== null && _props$active !== void 0 ? _props$active : false\n        }\n      });\n      return function () {\n        dispatch({\n          type: _NavMenu.NavMenuActionType.UnregisterItem,\n          payload: {\n            _id: _id\n          }\n        });\n      };\n    }\n  }, [dispatch, _id, props.eventKey, props.active]);\n  if (parentNavMenu) {\n    if (navbar) {\n      return /*#__PURE__*/_react.default.createElement(_NavbarDropdownItem.default, (0, _extends2.default)({\n        ref: ref\n      }, props, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 214,\n          columnNumber: 14\n        }\n      }));\n    }\n    if (sidenav) {\n      return /*#__PURE__*/_react.default.createElement(_SidenavDropdownItem.default, (0, _extends2.default)({\n        ref: ref\n      }, props, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 218,\n          columnNumber: 14\n        }\n      }));\n    }\n    return /*#__PURE__*/_react.default.createElement(_NavDropdownItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 221,\n        columnNumber: 12\n      }\n    }));\n  }\n  if (navbar) {\n    return /*#__PURE__*/_react.default.createElement(_NavbarItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 225,\n        columnNumber: 12\n      }\n    }));\n  }\n  if (sidenav) {\n    return /*#__PURE__*/_react.default.createElement(_SidenavItem.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 229,\n        columnNumber: 12\n      }\n    }));\n  }\n  return /*#__PURE__*/_react.default.createElement(_NavItem.default, (0, _extends2.default)({\n    ref: ref\n  }, props, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 232,\n      columnNumber: 10\n    }\n  }));\n});\nNav.Item.displayName = 'Nav.Item';\nNav.Menu = _NavMenu.default;\nNav.displayName = 'Nav';\nNav.propTypes = {\n  classPrefix: _propTypes.default.string,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle', 'tabs']),\n  // Reverse Direction of tabs/subtle\n  reversed: _propTypes.default.bool,\n  justified: _propTypes.default.bool,\n  vertical: _propTypes.default.bool,\n  pullRight: _propTypes.default.bool,\n  activeKey: _propTypes.default.any,\n  onSelect: _propTypes.default.func\n};\nvar _default = Nav;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Nav/Nav.tsx?");
 
 /***/ }),
 
@@ -8188,7 +8188,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _Collapse = _interopRequireDefault(__webpack_require__(/*! ../Animation/Collapse */ \"./src/Animation/Collapse.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _PanelGroup = __webpack_require__(/*! ../PanelGroup */ \"./src/PanelGroup/index.tsx\");\nvar _AccordionButton = _interopRequireDefault(__webpack_require__(/*! ./AccordionButton */ \"./src/Panel/AccordionButton.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Panel/Panel.tsx\",\n  _this = void 0;\n/**\n * The `Panel` component is used to display content that can be collapsed.\n * @see https://rsuitejs.com/components/panel\n */\nvar Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    bodyFill = props.bodyFill,\n    bordered = props.bordered,\n    children = props.children,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'panel' : _props$classPrefix,\n    caretAs = props.caretAs,\n    collapsibleProp = props.collapsible,\n    defaultExpanded = props.defaultExpanded,\n    disabled = props.disabled,\n    eventKey = props.eventKey,\n    expandedProp = props.expanded,\n    header = props.header,\n    headerRole = props.headerRole,\n    _props$panelRole = props.panelRole,\n    panelRole = _props$panelRole === void 0 ? 'region' : _props$panelRole,\n    shaded = props.shaded,\n    idProp = props.id,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onEntering = props.onEntering,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onExiting = props.onExiting,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"bodyFill\", \"bordered\", \"children\", \"className\", \"classPrefix\", \"caretAs\", \"collapsible\", \"defaultExpanded\", \"disabled\", \"eventKey\", \"expanded\", \"header\", \"headerRole\", \"panelRole\", \"shaded\", \"id\", \"onEnter\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"onSelect\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var panelId = id + \"-panel\";\n  var btnId = id + \"-btn\";\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var _ref = (0, _react.useContext)(_PanelGroup.PanelGroupContext) || {},\n    accordion = _ref.accordion,\n    activeKey = _ref.activeKey,\n    onGroupSelect = _ref.onGroupSelect;\n  var _useControlled = (0, _utils.useControlled)(expandedProp, defaultExpanded || typeof activeKey !== 'undefined' && activeKey === eventKey),\n    expandedState = _useControlled[0],\n    setExpanded = _useControlled[1];\n  var collapsible = collapsibleProp;\n  var expanded = expandedState;\n  if (accordion) {\n    collapsible = true;\n  }\n  if (collapsible) {\n    if (typeof activeKey !== 'undefined' && activeKey !== eventKey) {\n      expanded = false;\n    }\n  }\n  (0, _react.useEffect)(function () {\n    if (accordion && typeof activeKey !== 'undefined') {\n      setExpanded(activeKey === eventKey);\n    }\n  }, [accordion, activeKey, eventKey, setExpanded]);\n  var handleSelect = (0, _utils.useEventCallback)(function (event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    onGroupSelect === null || onGroupSelect === void 0 ? void 0 : onGroupSelect(eventKey, event);\n    setExpanded(!expanded);\n  });\n  var renderBody = (0, _utils.useEventCallback)(function (bodyProps) {\n    var classes = prefix('body', {\n      'body-fill': bodyFill\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({}, bodyProps, {\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 133,\n        columnNumber: 9\n      }\n    }), children);\n  });\n  var renderCollapsibleBody = function renderCollapsibleBody() {\n    return /*#__PURE__*/_react.default.createElement(_Collapse.default, {\n      in: expanded,\n      onEnter: onEnter,\n      onEntering: onEntering,\n      onEntered: onEntered,\n      onExit: onExit,\n      onExiting: onExiting,\n      onExited: onExited,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 140,\n        columnNumber: 7\n      }\n    }, function (transitionProps, ref) {\n      var className = transitionProps.className,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, [\"className\"]);\n      return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({}, rest, {\n        className: merge(className, prefix('collapse')),\n        ref: ref,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 152,\n          columnNumber: 13\n        }\n      }), renderBody({\n        role: panelRole,\n        id: panelId,\n        'aria-labelledby': btnId\n      }));\n    });\n  };\n  var renderHeading = function renderHeading() {\n    if (!header) {\n      return null;\n    }\n    var headerElement;\n    if (! /*#__PURE__*/_react.default.isValidElement(header) || Array.isArray(header)) {\n      headerElement = /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: prefix('title'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 168,\n          columnNumber: 25\n        }\n      }, header);\n    } else {\n      var _className = merge(prefix('title'), (0, _get.default)(header, 'props.className'));\n      headerElement = /*#__PURE__*/_react.default.cloneElement(header, {\n        className: _className\n      });\n    }\n    return /*#__PURE__*/_react.default.createElement(\"h2\", {\n      className: prefix('header'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 175,\n        columnNumber: 9\n      }\n    }, collapsible ? /*#__PURE__*/_react.default.createElement(_AccordionButton.default, {\n      id: btnId,\n      role: headerRole,\n      caretAs: caretAs,\n      controlId: panelId,\n      disabled: disabled,\n      expanded: expanded,\n      onClick: handleSelect,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 177,\n        columnNumber: 13\n      }\n    }, headerElement) : headerElement);\n  };\n  var classes = merge(className, withClassPrefix({\n    in: expanded,\n    collapsible: collapsible,\n    bordered: bordered,\n    shaded: shaded\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    id: idProp,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 201,\n      columnNumber: 7\n    }\n  }), renderHeading(), collapsible ? renderCollapsibleBody() : renderBody());\n});\nPanel.displayName = 'Panel';\nPanel.propTypes = {\n  collapsible: _propTypes.default.bool,\n  bordered: _propTypes.default.bool,\n  shaded: _propTypes.default.bool,\n  bodyFill: _propTypes.default.bool,\n  header: _propTypes.default.any,\n  defaultExpanded: _propTypes.default.bool,\n  expanded: _propTypes.default.bool,\n  eventKey: _propTypes.default.any,\n  panelRole: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  onSelect: _propTypes.default.func,\n  onEnter: _propTypes.default.func,\n  onEntering: _propTypes.default.func,\n  onEntered: _propTypes.default.func,\n  onExit: _propTypes.default.func,\n  onExiting: _propTypes.default.func,\n  onExited: _propTypes.default.func,\n  className: _propTypes.default.string\n};\nvar _default = Panel;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Panel/Panel.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _Collapse = _interopRequireDefault(__webpack_require__(/*! ../Animation/Collapse */ \"./src/Animation/Collapse.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _PanelGroup = __webpack_require__(/*! ../PanelGroup */ \"./src/PanelGroup/index.tsx\");\nvar _AccordionButton = _interopRequireDefault(__webpack_require__(/*! ./AccordionButton */ \"./src/Panel/AccordionButton.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Panel/Panel.tsx\",\n  _this = void 0;\n/**\n * The `Panel` component is used to display content that can be collapsed.\n * @see https://rsuitejs.com/components/panel\n */\nvar Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    bodyFill = props.bodyFill,\n    bordered = props.bordered,\n    children = props.children,\n    className = props.className,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'panel' : _props$classPrefix,\n    caretAs = props.caretAs,\n    collapsibleProp = props.collapsible,\n    defaultExpanded = props.defaultExpanded,\n    disabled = props.disabled,\n    eventKey = props.eventKey,\n    expandedProp = props.expanded,\n    header = props.header,\n    headerRole = props.headerRole,\n    _props$panelRole = props.panelRole,\n    panelRole = _props$panelRole === void 0 ? 'region' : _props$panelRole,\n    shaded = props.shaded,\n    idProp = props.id,\n    onEnter = props.onEnter,\n    onEntered = props.onEntered,\n    onEntering = props.onEntering,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onExiting = props.onExiting,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"bodyFill\", \"bordered\", \"children\", \"className\", \"classPrefix\", \"caretAs\", \"collapsible\", \"defaultExpanded\", \"disabled\", \"eventKey\", \"expanded\", \"header\", \"headerRole\", \"panelRole\", \"shaded\", \"id\", \"onEnter\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"onSelect\"]);\n  var id = (0, _utils.useUniqueId)('rs-', idProp);\n  var panelId = id + \"-panel\";\n  var btnId = id + \"-btn\";\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var _ref = (0, _react.useContext)(_PanelGroup.PanelGroupContext) || {},\n    accordion = _ref.accordion,\n    activeKey = _ref.activeKey,\n    onGroupSelect = _ref.onGroupSelect;\n  var _useControlled = (0, _utils.useControlled)(expandedProp, defaultExpanded || typeof activeKey !== 'undefined' && activeKey === eventKey),\n    expandedState = _useControlled[0],\n    setExpanded = _useControlled[1];\n  var collapsible = collapsibleProp;\n  var expanded = expandedState;\n  if (accordion) {\n    collapsible = true;\n  }\n  if (collapsible) {\n    if (typeof activeKey !== 'undefined' && activeKey !== eventKey) {\n      expanded = false;\n    }\n  }\n  (0, _react.useEffect)(function () {\n    if (accordion && typeof activeKey !== 'undefined') {\n      setExpanded(activeKey === eventKey);\n    }\n  }, [accordion, activeKey, eventKey, setExpanded]);\n  var handleSelect = (0, _utils.useEventCallback)(function (event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n    onGroupSelect === null || onGroupSelect === void 0 ? void 0 : onGroupSelect(eventKey, event);\n    setExpanded(!expanded);\n  });\n  var renderBody = function renderBody(bodyProps) {\n    var classes = prefix('body', {\n      'body-fill': bodyFill\n    });\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({}, bodyProps, {\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 131,\n        columnNumber: 9\n      }\n    }), children);\n  };\n  var renderCollapsibleBody = function renderCollapsibleBody() {\n    return /*#__PURE__*/_react.default.createElement(_Collapse.default, {\n      in: expanded,\n      onEnter: onEnter,\n      onEntering: onEntering,\n      onEntered: onEntered,\n      onExit: onExit,\n      onExiting: onExiting,\n      onExited: onExited,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 138,\n        columnNumber: 7\n      }\n    }, function (transitionProps, ref) {\n      var className = transitionProps.className,\n        rest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, [\"className\"]);\n      return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({}, rest, {\n        className: merge(className, prefix('collapse')),\n        ref: ref,\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 150,\n          columnNumber: 13\n        }\n      }), renderBody({\n        role: panelRole,\n        id: panelId,\n        'aria-labelledby': btnId\n      }));\n    });\n  };\n  var renderHeading = function renderHeading() {\n    if (!header) {\n      return null;\n    }\n    var headerElement;\n    if (! /*#__PURE__*/_react.default.isValidElement(header) || Array.isArray(header)) {\n      headerElement = /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: prefix('title'),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 166,\n          columnNumber: 25\n        }\n      }, header);\n    } else {\n      var _className = merge(prefix('title'), (0, _get.default)(header, 'props.className'));\n      headerElement = /*#__PURE__*/_react.default.cloneElement(header, {\n        className: _className\n      });\n    }\n    return /*#__PURE__*/_react.default.createElement(\"h2\", {\n      className: prefix('header'),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 173,\n        columnNumber: 9\n      }\n    }, collapsible ? /*#__PURE__*/_react.default.createElement(_AccordionButton.default, {\n      id: btnId,\n      role: headerRole,\n      caretAs: caretAs,\n      controlId: panelId,\n      disabled: disabled,\n      expanded: expanded,\n      onClick: handleSelect,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 175,\n        columnNumber: 13\n      }\n    }, headerElement) : headerElement);\n  };\n  var classes = merge(className, withClassPrefix({\n    in: expanded,\n    collapsible: collapsible,\n    bordered: bordered,\n    shaded: shaded\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    id: idProp,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 199,\n      columnNumber: 7\n    }\n  }), renderHeading(), collapsible ? renderCollapsibleBody() : renderBody());\n});\nPanel.displayName = 'Panel';\nPanel.propTypes = {\n  collapsible: _propTypes.default.bool,\n  bordered: _propTypes.default.bool,\n  shaded: _propTypes.default.bool,\n  bodyFill: _propTypes.default.bool,\n  header: _propTypes.default.any,\n  defaultExpanded: _propTypes.default.bool,\n  expanded: _propTypes.default.bool,\n  eventKey: _propTypes.default.any,\n  panelRole: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  onSelect: _propTypes.default.func,\n  onEnter: _propTypes.default.func,\n  onEntering: _propTypes.default.func,\n  onEntered: _propTypes.default.func,\n  onExit: _propTypes.default.func,\n  onExiting: _propTypes.default.func,\n  onExited: _propTypes.default.func,\n  className: _propTypes.default.string\n};\nvar _default = Panel;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Panel/Panel.tsx?");
 
 /***/ }),
 
@@ -8859,7 +8859,7 @@ eval("\n\nexports.__esModule = true;\nexports.checkValue = checkValue;\nexports.
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _StackItem = _interopRequireDefault(__webpack_require__(/*! ./StackItem */ \"./src/Stack/StackItem.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Stack/Stack.tsx\",\n  _this = void 0;\n/**\n * The `Stack` component is a quick layout component through Flexbox,\n * supporting vertical and horizontal stacking, custom spacing and line wrapping.\n *\n * @see https://rsuitejs.com/components/stack\n */\nvar Stack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _itemStyles;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$alignItems = props.alignItems,\n    alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'stack' : _props$classPrefix,\n    _props$childrenRender = props.childrenRenderMode,\n    childrenRenderMode = _props$childrenRender === void 0 ? 'wrap' : _props$childrenRender,\n    className = props.className,\n    children = props.children,\n    direction = props.direction,\n    justifyContent = props.justifyContent,\n    spacing = props.spacing,\n    divider = props.divider,\n    style = props.style,\n    wrap = props.wrap,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"alignItems\", \"classPrefix\", \"childrenRenderMode\", \"className\", \"children\", \"direction\", \"justifyContent\", \"spacing\", \"divider\", \"style\", \"wrap\"]);\n  var _useCustom = (0, _utils.useCustom)('Stack'),\n    rtl = _useCustom.rtl;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, withClassPrefix());\n  var isSupportGap = (0, _utils.isSupportFlexGap)();\n  var flexGap = Array.isArray(spacing) ? spacing : [spacing, spacing];\n  var itemStyles = (_itemStyles = {}, _itemStyles[rtl ? 'marginLeft' : 'marginRight'] = flexGap[0], _itemStyles.marginBottom = flexGap[1], _itemStyles);\n  var styles = (0, _extends2.default)({\n    alignItems: alignItems,\n    justifyContent: justifyContent,\n    flexDirection: direction,\n    flexWrap: wrap ? 'wrap' : undefined,\n    gap: isSupportGap ? spacing : undefined\n  }, style);\n\n  /*\n   * toArray remove undefined, null and boolean\n   */\n  var filterChildren = _react.default.Children.toArray(children);\n  var count = filterChildren.length;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 96,\n      columnNumber: 5\n    }\n  }), _react.default.Children.map(filterChildren, function (child, index) {\n    var childNode = childrenRenderMode === 'wrap' && child.type !== _StackItem.default ? /*#__PURE__*/_react.default.createElement(_StackItem.default, {\n      key: index,\n      className: prefix('item'),\n      style: !isSupportGap ? itemStyles : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 100,\n        columnNumber: 13\n      }\n    }, child) : /*#__PURE__*/_react.default.cloneElement(child, {\n      className: merge(prefix('item'), child.props.className),\n      style: !isSupportGap ? (0, _extends2.default)({}, itemStyles, child.props.style) : child.props.style\n    });\n    return [childNode, index < count - 1 ? divider : null];\n  }));\n});\nStack.Item = _StackItem.default;\nStack.displayName = 'Stack';\nStack.propTypes = {\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  direction: (0, _propTypes2.oneOf)(['row', 'row-reverse', 'column', 'column-reverse']),\n  alignItems: (0, _propTypes2.oneOf)(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),\n  justifyContent: (0, _propTypes2.oneOf)(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),\n  spacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]),\n  divider: _propTypes.default.node,\n  wrap: _propTypes.default.bool\n};\nvar _default = Stack;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Stack/Stack.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _StackItem = _interopRequireDefault(__webpack_require__(/*! ./StackItem */ \"./src/Stack/StackItem.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Stack/Stack.tsx\",\n  _this = void 0;\n/**\n * The `Stack` component is a quick layout component through Flexbox,\n * supporting vertical and horizontal stacking, custom spacing and line wrapping.\n *\n * @see https://rsuitejs.com/components/stack\n */\nvar Stack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _itemStyles;\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$alignItems = props.alignItems,\n    alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'stack' : _props$classPrefix,\n    _props$childrenRender = props.childrenRenderMode,\n    childrenRenderMode = _props$childrenRender === void 0 ? 'wrap' : _props$childrenRender,\n    className = props.className,\n    children = props.children,\n    direction = props.direction,\n    justifyContent = props.justifyContent,\n    spacing = props.spacing,\n    divider = props.divider,\n    style = props.style,\n    wrap = props.wrap,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"alignItems\", \"classPrefix\", \"childrenRenderMode\", \"className\", \"children\", \"direction\", \"justifyContent\", \"spacing\", \"divider\", \"style\", \"wrap\"]);\n  var _useCustom = (0, _utils.useCustom)('Stack'),\n    rtl = _useCustom.rtl;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix;\n  var classes = merge(className, withClassPrefix());\n  var isSupportGap = (0, _utils.isSupportFlexGap)();\n  var flexGap = Array.isArray(spacing) ? spacing : [spacing, spacing];\n  var itemStyles = (_itemStyles = {}, _itemStyles[rtl ? 'marginLeft' : 'marginRight'] = flexGap[0], _itemStyles.marginBottom = flexGap[1], _itemStyles);\n  var styles = (0, _extends2.default)({\n    alignItems: alignItems,\n    justifyContent: justifyContent,\n    flexDirection: direction,\n    flexWrap: wrap ? 'wrap' : undefined,\n    gap: isSupportGap ? spacing : undefined\n  }, style);\n\n  /*\n   * toArray remove undefined, null and boolean\n   */\n  var filterChildren = _react.default.Children.toArray(children);\n  var count = _utils.ReactChildren.count(filterChildren);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 96,\n      columnNumber: 5\n    }\n  }), _utils.ReactChildren.map(filterChildren, function (child, index) {\n    var childNode = childrenRenderMode === 'wrap' && child.type !== _StackItem.default ? /*#__PURE__*/_react.default.createElement(_StackItem.default, {\n      key: index,\n      className: prefix('item'),\n      style: !isSupportGap ? itemStyles : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 100,\n        columnNumber: 13\n      }\n    }, child) : /*#__PURE__*/_react.default.cloneElement(child, {\n      className: merge(prefix('item'), child.props.className),\n      style: !isSupportGap ? (0, _extends2.default)({}, itemStyles, child.props.style) : child.props.style\n    });\n    return [childNode, index < count - 1 ? divider : null];\n  }));\n});\nStack.Item = _StackItem.default;\nStack.displayName = 'Stack';\nStack.propTypes = {\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  classPrefix: _propTypes.default.string,\n  direction: (0, _propTypes2.oneOf)(['row', 'row-reverse', 'column', 'column-reverse']),\n  alignItems: (0, _propTypes2.oneOf)(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),\n  justifyContent: (0, _propTypes2.oneOf)(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),\n  spacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]),\n  divider: _propTypes.default.node,\n  wrap: _propTypes.default.bool\n};\nvar _default = Stack;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Stack/Stack.tsx?");
 
 /***/ }),
 
@@ -8903,7 +8903,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _StepItem = _interopRequireDefault(__webpack_require__(/*! ./StepItem */ \"./src/Steps/StepItem.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Steps/Steps.tsx\",\n  _this = void 0;\n/**\n * The `Steps` component is used to guide users to complete tasks in accordance with the process.\n *\n * @see https://rsuitejs.com/components/steps\n */\nvar Steps = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'steps' : _props$classPrefix,\n    className = props.className,\n    children = props.children,\n    vertical = props.vertical,\n    small = props.small,\n    _props$current = props.current,\n    current = _props$current === void 0 ? 0 : _props$current,\n    _props$currentStatus = props.currentStatus,\n    currentStatus = _props$currentStatus === void 0 ? 'process' : _props$currentStatus,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"children\", \"vertical\", \"small\", \"current\", \"currentStatus\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var horizontal = !vertical;\n  var classes = merge(className, withClassPrefix({\n    small: small,\n    vertical: vertical,\n    horizontal: !vertical\n  }));\n  var count = _react.default.Children.count(children);\n  var items = _utils.ReactChildren.mapCloneElement(children, function (item, index) {\n    var itemStyles = {\n      flexBasis: index < count - 1 ? 100 / (count - 1) + \"%\" : undefined,\n      maxWidth: index === count - 1 ? 100 / count + \"%\" : undefined\n    };\n    var itemProps = (0, _extends2.default)({\n      stepNumber: index + 1,\n      status: 'wait',\n      style: horizontal ? itemStyles : undefined\n    }, item.props);\n\n    // fix tail color\n    if (currentStatus === 'error' && index === current - 1) {\n      itemProps.className = prefix('next-error');\n    }\n    if (!item.props.status) {\n      if (index === current) {\n        itemProps.status = currentStatus;\n        itemProps.className = merge(itemProps.className, prefix('item-active'));\n      } else if (index < current) {\n        itemProps.status = 'finish';\n      }\n    }\n    return itemProps;\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 82,\n      columnNumber: 5\n    }\n  }), items);\n});\nSteps.Item = _StepItem.default;\nSteps.displayName = 'Steps';\nSteps.propTypes = {\n  classPrefix: _propTypes.default.string,\n  vertical: _propTypes.default.bool,\n  small: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  current: _propTypes.default.number,\n  currentStatus: (0, _propTypes2.oneOf)(['finish', 'wait', 'process', 'error'])\n};\nvar _default = Steps;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Steps/Steps.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _StepItem = _interopRequireDefault(__webpack_require__(/*! ./StepItem */ \"./src/Steps/StepItem.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Steps/Steps.tsx\",\n  _this = void 0;\n/**\n * The `Steps` component is used to guide users to complete tasks in accordance with the process.\n *\n * @see https://rsuitejs.com/components/steps\n */\nvar Steps = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'steps' : _props$classPrefix,\n    className = props.className,\n    children = props.children,\n    vertical = props.vertical,\n    small = props.small,\n    _props$current = props.current,\n    current = _props$current === void 0 ? 0 : _props$current,\n    _props$currentStatus = props.currentStatus,\n    currentStatus = _props$currentStatus === void 0 ? 'process' : _props$currentStatus,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"className\", \"children\", \"vertical\", \"small\", \"current\", \"currentStatus\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    prefix = _useClassNames.prefix,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var horizontal = !vertical;\n  var classes = merge(className, withClassPrefix({\n    small: small,\n    vertical: vertical,\n    horizontal: !vertical\n  }));\n  var count = _utils.ReactChildren.count(children);\n  var items = _utils.ReactChildren.mapCloneElement(children, function (item, index) {\n    var itemStyles = {\n      flexBasis: index < count - 1 ? 100 / (count - 1) + \"%\" : undefined,\n      maxWidth: index === count - 1 ? 100 / count + \"%\" : undefined\n    };\n    var itemProps = (0, _extends2.default)({\n      stepNumber: index + 1,\n      status: 'wait',\n      style: horizontal ? itemStyles : undefined\n    }, item.props);\n\n    // fix tail color\n    if (currentStatus === 'error' && index === current - 1) {\n      itemProps.className = prefix('next-error');\n    }\n    if (!item.props.status) {\n      if (index === current) {\n        itemProps.status = currentStatus;\n        itemProps.className = merge(itemProps.className, prefix('item-active'));\n      } else if (index < current) {\n        itemProps.status = 'finish';\n      }\n    }\n    return itemProps;\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 82,\n      columnNumber: 5\n    }\n  }), items);\n});\nSteps.Item = _StepItem.default;\nSteps.displayName = 'Steps';\nSteps.propTypes = {\n  classPrefix: _propTypes.default.string,\n  vertical: _propTypes.default.bool,\n  small: _propTypes.default.bool,\n  className: _propTypes.default.string,\n  children: _propTypes.default.node,\n  current: _propTypes.default.number,\n  currentStatus: (0, _propTypes2.oneOf)(['finish', 'wait', 'process', 'error'])\n};\nvar _default = Steps;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Steps/Steps.tsx?");
 
 /***/ }),
 
@@ -8969,7 +8969,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ../Nav */ \"./src/Nav/index.tsx\"));\nvar _Tab = _interopRequireDefault(__webpack_require__(/*! ./Tab */ \"./src/Tabs/Tab.tsx\"));\nvar _TabPanel = _interopRequireDefault(__webpack_require__(/*! ./TabPanel */ \"./src/Tabs/TabPanel.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Tabs/Tabs.tsx\",\n  _this = void 0,\n  _templateObject;\nfunction getFocusableTabs(tablist) {\n  var tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role=tab]');\n  return Array.from(tabs).filter(function (tab) {\n    return !(tab.getAttribute('aria-disabled') === 'true');\n  });\n}\nfunction getFocusedTab(tablist) {\n  var tabs = getFocusableTabs(tablist);\n  return tabs.find(function (tab) {\n    return tab.getAttribute('aria-selected');\n  });\n}\nfunction nextItem(tablist) {\n  if (!tablist) {\n    return null;\n  }\n  var item = getFocusedTab(tablist);\n  var items = getFocusableTabs(tablist);\n  if (!item) {\n    return items[0];\n  }\n  var nextItem = items[items.indexOf(item) + 1];\n  if (!nextItem || nextItem.getAttribute('role') !== 'tab') {\n    return items[0];\n  }\n  return nextItem;\n}\nfunction previousItem(tablist) {\n  if (!tablist) {\n    return null;\n  }\n  var item = getFocusedTab(tablist);\n  var items = getFocusableTabs(tablist);\n  if (!item) {\n    return items[items.length - 1];\n  }\n  var previousItem = items[items.indexOf(item) - 1];\n  if (!previousItem || previousItem.getAttribute('role') !== 'tab') {\n    return items[items.length - 1];\n  }\n  return previousItem;\n}\nvar renderPanels = function renderPanels(children, tabProps) {\n  var id = tabProps.id,\n    activeKey = tabProps.activeKey;\n  return _utils.ReactChildren.map(children, function (child) {\n    var _child$props = child.props,\n      eventKey = _child$props.eventKey,\n      children = _child$props.children;\n    var selected = eventKey === activeKey;\n    return /*#__PURE__*/_react.default.createElement(_TabPanel.default, {\n      \"aria-labelledby\": id + \"-\" + eventKey,\n      \"aria-hidden\": !selected,\n      id: id + \"-panel-\" + eventKey,\n      active: selected,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 122,\n        columnNumber: 7\n      }\n    }, children);\n  });\n};\nvar renderTabs = function renderTabs(children, tabPanelProps) {\n  var id = tabPanelProps.id,\n    activeKey = tabPanelProps.activeKey;\n  return _utils.ReactChildren.map(children, function (child) {\n    var _child$props2 = child.props,\n      eventKey = _child$props2.eventKey,\n      title = _child$props2.title,\n      disabled = _child$props2.disabled,\n      icon = _child$props2.icon;\n    var selected = eventKey === activeKey;\n    return /*#__PURE__*/_react.default.createElement(_Nav.default.Item, {\n      role: \"tab\",\n      as: \"button\",\n      type: \"button\",\n      \"aria-selected\": selected,\n      \"aria-controls\": id + \"-panel-\" + eventKey,\n      \"aria-disabled\": disabled,\n      \"data-event-key\": eventKey,\n      disabled: disabled,\n      icon: icon,\n      id: id + \"-\" + eventKey,\n      tabIndex: selected ? undefined : -1,\n      eventKey: eventKey,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 143,\n        columnNumber: 7\n      }\n    }, title);\n  });\n};\n\n/**\n * Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.\n *\n * @version 5.53.0\n * @see https://rsuitejs.com/components/tabs\n */\nvar Tabs = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'tabs' : _props$classPrefix,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'tabs' : _props$appearance,\n    className = props.className,\n    children = props.children,\n    activeKeyProp = props.activeKey,\n    defaultActiveKey = props.defaultActiveKey,\n    idProp = props.id,\n    reversed = props.reversed,\n    vertical = props.vertical,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"appearance\", \"className\", \"children\", \"activeKey\", \"defaultActiveKey\", \"id\", \"reversed\", \"vertical\", \"onSelect\"]);\n  var id = (0, _utils.useUniqueId)('tab-', idProp);\n  var _useCustom = (0, _utils.useCustom)(),\n    rtl = _useCustom.rtl;\n  var _useControlled = (0, _utils.useControlled)(activeKeyProp, defaultActiveKey),\n    activeKey = _useControlled[0],\n    setActiveKey = _useControlled[1];\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var tablistRef = _react.default.useRef(null);\n  var handleSelect = (0, _utils.useEventCallback)(function (eventKey, event) {\n    setActiveKey(eventKey);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n  });\n  var handleKeyDown = (0, _utils.useEventCallback)(function (event) {\n    var _getFocusableTabs;\n    var target = event.target;\n    if (target.getAttribute('role') !== 'tab') {\n      return;\n    }\n    var previousItemKey = vertical ? 'ArrowUp' : 'ArrowLeft';\n    var nextItemKey = vertical ? 'ArrowDown' : 'ArrowRight';\n    if (!vertical && rtl) {\n      previousItemKey = 'ArrowRight';\n      nextItemKey = 'ArrowLeft';\n    }\n    var item = null;\n    switch (event.key) {\n      case previousItemKey:\n        item = previousItem(tablistRef.current);\n        event.preventDefault();\n        break;\n      case nextItemKey:\n        item = nextItem(tablistRef.current);\n        event.preventDefault();\n        break;\n      case 'Home':\n        item = (_getFocusableTabs = getFocusableTabs(tablistRef.current)) === null || _getFocusableTabs === void 0 ? void 0 : _getFocusableTabs[0];\n        event.preventDefault();\n        break;\n      case 'End':\n        var tabs = getFocusableTabs(tablistRef.current);\n        item = tabs[tabs.length - 1];\n        event.preventDefault();\n        break;\n    }\n    if (item) {\n      var _item;\n      var _item$dataset = (_item = item) === null || _item === void 0 ? void 0 : _item.dataset,\n        _eventKey = _item$dataset.eventKey;\n      handleSelect(_eventKey, event);\n      item.focus();\n    }\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    className: merge(className, withClassPrefix({\n      reversed: reversed,\n      vertical: vertical\n    }))\n  }, rest, {\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 241,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Nav.default, {\n    role: \"tablist\",\n    \"aria-orientation\": vertical ? 'vertical' : 'horizontal',\n    reversed: reversed,\n    vertical: vertical,\n    appearance: appearance,\n    activeKey: activeKey,\n    onSelect: handleSelect,\n    onKeyDown: handleKeyDown,\n    ref: tablistRef,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 246,\n      columnNumber: 7\n    }\n  }, renderTabs(children, {\n    id: id,\n    activeKey: activeKey\n  })), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"content\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 259,\n      columnNumber: 7\n    }\n  }, renderPanels(children, {\n    id: id,\n    activeKey: activeKey\n  })));\n});\nTabs.Tab = _Tab.default;\nTabs.displayName = 'Tabs';\nTabs.propTypes = {\n  appearance: _propTypes.default.oneOf(['tabs', 'subtle']),\n  activeKey: _propTypes.default.any,\n  defaultActiveKey: _propTypes.default.any,\n  reversed: _propTypes.default.bool,\n  vertical: _propTypes.default.bool,\n  id: _propTypes.default.string,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  onSelect: _propTypes.default.func\n};\nvar _default = Tabs;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Tabs/Tabs.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ../Nav */ \"./src/Nav/index.tsx\"));\nvar _Tab = _interopRequireDefault(__webpack_require__(/*! ./Tab */ \"./src/Tabs/Tab.tsx\"));\nvar _TabPanel = _interopRequireDefault(__webpack_require__(/*! ./TabPanel */ \"./src/Tabs/TabPanel.tsx\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Tabs/Tabs.tsx\",\n  _this = void 0,\n  _templateObject;\nfunction getFocusableTabs(tablist) {\n  var tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role=tab]');\n  return Array.from(tabs).filter(function (tab) {\n    return !(tab.getAttribute('aria-disabled') === 'true');\n  });\n}\nfunction getFocusedTab(tablist) {\n  var tabs = getFocusableTabs(tablist);\n  return tabs.find(function (tab) {\n    return tab.getAttribute('aria-selected');\n  });\n}\nfunction nextItem(tablist) {\n  if (!tablist) {\n    return null;\n  }\n  var item = getFocusedTab(tablist);\n  var items = getFocusableTabs(tablist);\n  if (!item) {\n    return items[0];\n  }\n  var nextItem = items[items.indexOf(item) + 1];\n  if (!nextItem || nextItem.getAttribute('role') !== 'tab') {\n    return items[0];\n  }\n  return nextItem;\n}\nfunction previousItem(tablist) {\n  if (!tablist) {\n    return null;\n  }\n  var item = getFocusedTab(tablist);\n  var items = getFocusableTabs(tablist);\n  if (!item) {\n    return items[items.length - 1];\n  }\n  var previousItem = items[items.indexOf(item) - 1];\n  if (!previousItem || previousItem.getAttribute('role') !== 'tab') {\n    return items[items.length - 1];\n  }\n  return previousItem;\n}\nvar renderPanels = function renderPanels(children, tabProps) {\n  var id = tabProps.id,\n    activeKey = tabProps.activeKey;\n  return _utils.ReactChildren.map(children, function (child) {\n    var _child$props = child.props,\n      eventKey = _child$props.eventKey,\n      children = _child$props.children;\n    var selected = eventKey === activeKey;\n    return /*#__PURE__*/_react.default.createElement(_TabPanel.default, {\n      \"aria-labelledby\": id + \"-\" + eventKey,\n      \"aria-hidden\": !selected,\n      id: id + \"-panel-\" + eventKey,\n      active: selected,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 122,\n        columnNumber: 7\n      }\n    }, children);\n  });\n};\nvar renderTabs = function renderTabs(children, tabPanelProps) {\n  var id = tabPanelProps.id,\n    activeKey = tabPanelProps.activeKey;\n  return _utils.ReactChildren.map(children, function (child) {\n    var _child$props2 = child.props,\n      eventKey = _child$props2.eventKey,\n      title = _child$props2.title,\n      disabled = _child$props2.disabled,\n      icon = _child$props2.icon;\n    var selected = eventKey === activeKey;\n    return /*#__PURE__*/_react.default.createElement(_Nav.default.Item, {\n      role: \"tab\",\n      as: \"button\",\n      type: \"button\",\n      \"aria-selected\": selected,\n      \"aria-controls\": id + \"-panel-\" + eventKey,\n      \"aria-disabled\": disabled,\n      \"data-event-key\": eventKey,\n      disabled: disabled,\n      icon: icon,\n      id: id + \"-\" + eventKey,\n      tabIndex: selected ? undefined : -1,\n      eventKey: eventKey,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 143,\n        columnNumber: 7\n      }\n    }, title);\n  });\n};\n\n/**\n * Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.\n *\n * @version 5.53.0\n * @see https://rsuitejs.com/components/tabs\n */\nvar Tabs = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'tabs' : _props$classPrefix,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'tabs' : _props$appearance,\n    className = props.className,\n    children = props.children,\n    activeKeyProp = props.activeKey,\n    defaultActiveKey = props.defaultActiveKey,\n    idProp = props.id,\n    reversed = props.reversed,\n    vertical = props.vertical,\n    onSelect = props.onSelect,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"classPrefix\", \"appearance\", \"className\", \"children\", \"activeKey\", \"defaultActiveKey\", \"id\", \"reversed\", \"vertical\", \"onSelect\"]);\n  var id = (0, _utils.useUniqueId)('tab-', idProp);\n  var _useCustom = (0, _utils.useCustom)(),\n    rtl = _useCustom.rtl;\n  var _useControlled = (0, _utils.useControlled)(activeKeyProp, defaultActiveKey),\n    activeKey = _useControlled[0],\n    setActiveKey = _useControlled[1];\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var tablistRef = _react.default.useRef(null);\n  var handleSelect = (0, _utils.useEventCallback)(function (eventKey, event) {\n    setActiveKey(eventKey);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);\n  });\n  var handleKeyDown = (0, _utils.useEventCallback)(function (event) {\n    var _getFocusableTabs;\n    var target = event.target;\n    if (target.getAttribute('role') !== 'tab') {\n      return;\n    }\n    var previousItemKey = vertical ? 'ArrowUp' : 'ArrowLeft';\n    var nextItemKey = vertical ? 'ArrowDown' : 'ArrowRight';\n    if (!vertical && rtl) {\n      previousItemKey = 'ArrowRight';\n      nextItemKey = 'ArrowLeft';\n    }\n    var item = null;\n    switch (event.key) {\n      case previousItemKey:\n        item = previousItem(tablistRef.current);\n        event.preventDefault();\n        break;\n      case nextItemKey:\n        item = nextItem(tablistRef.current);\n        event.preventDefault();\n        break;\n      case 'Home':\n        item = (_getFocusableTabs = getFocusableTabs(tablistRef.current)) === null || _getFocusableTabs === void 0 ? void 0 : _getFocusableTabs[0];\n        event.preventDefault();\n        break;\n      case 'End':\n        var tabs = getFocusableTabs(tablistRef.current);\n        item = tabs[tabs.length - 1];\n        event.preventDefault();\n        break;\n    }\n    if (item) {\n      var _item;\n      var _item$dataset = (_item = item) === null || _item === void 0 ? void 0 : _item.dataset,\n        _eventKey = _item$dataset.eventKey;\n      handleSelect(_eventKey, event);\n      item.focus();\n    }\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    className: merge(className, withClassPrefix({\n      reversed: reversed,\n      vertical: vertical\n    }))\n  }, rest, {\n    ref: ref,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 243,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Nav.default, {\n    role: \"tablist\",\n    \"aria-orientation\": vertical ? 'vertical' : 'horizontal',\n    reversed: reversed,\n    vertical: vertical,\n    appearance: appearance,\n    activeKey: activeKey,\n    onSelect: handleSelect,\n    onKeyDown: handleKeyDown,\n    ref: tablistRef,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 248,\n      columnNumber: 7\n    }\n  }, renderTabs(children, {\n    id: id,\n    activeKey: activeKey\n  })), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"content\"]))),\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 261,\n      columnNumber: 7\n    }\n  }, renderPanels(children, {\n    id: id,\n    activeKey: activeKey\n  })));\n});\nTabs.Tab = _Tab.default;\nTabs.displayName = 'Tabs';\nTabs.propTypes = {\n  appearance: _propTypes.default.oneOf(['tabs', 'subtle']),\n  activeKey: _propTypes.default.any,\n  defaultActiveKey: _propTypes.default.any,\n  reversed: _propTypes.default.bool,\n  vertical: _propTypes.default.bool,\n  id: _propTypes.default.string,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  onSelect: _propTypes.default.func\n};\nvar _default = Tabs;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Tabs/Tabs.tsx?");
 
 /***/ }),
 
@@ -9057,7 +9057,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _some = _interopRequireDefault(__webpack_require__(/*! lodash/some */ \"./node_modules/lodash/some.js\"));\nvar _TimelineItem = _interopRequireDefault(__webpack_require__(/*! ./TimelineItem */ \"./src/Timeline/TimelineItem.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Timeline/Timeline.tsx\",\n  _this = void 0;\n/**\n * The `Timeline` component is used to display a list of items in chronological order.\n *\n * @see https://rsuitejs.com/components/timeline\n */\nvar Timeline = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var children = props.children,\n    _props$as = props.as,\n    Component = _props$as === void 0 ? 'ul' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'timeline' : _props$classPrefix,\n    className = props.className,\n    _props$align = props.align,\n    align = _props$align === void 0 ? 'left' : _props$align,\n    endless = props.endless,\n    _props$isItemActive = props.isItemActive,\n    isItemActive = _props$isItemActive === void 0 ? Timeline.ACTIVE_LAST : _props$isItemActive,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"children\", \"as\", \"classPrefix\", \"className\", \"align\", \"endless\", \"isItemActive\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var count = _react.default.Children.count(children);\n  var withTime = (0, _some.default)(_react.default.Children.toArray(children), function (item) {\n    var _item$props;\n    return item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.time;\n  });\n  var classes = merge(className, withClassPrefix(\"align-\" + align, {\n    endless: endless,\n    'with-time': withTime\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 62,\n      columnNumber: 5\n    }\n  }), _utils.ReactChildren.mapCloneElement(children, function (_child, index) {\n    return {\n      last: index + 1 === count,\n      INTERNAL_active: isItemActive(index, count),\n      align: align\n    };\n  }));\n});\nTimeline.ACTIVE_FIRST = function (index) {\n  return index === 0;\n};\nTimeline.ACTIVE_LAST = function (index, totalItemsCount) {\n  return index === totalItemsCount - 1;\n};\nTimeline.Item = _TimelineItem.default;\nTimeline.displayName = 'Timeline';\nTimeline.propTypes = {\n  as: _propTypes.default.elementType,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  align: (0, _propTypes2.oneOf)(['left', 'right', 'alternate']),\n  endless: _propTypes.default.bool\n};\nvar _default = Timeline;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Timeline/Timeline.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _some = _interopRequireDefault(__webpack_require__(/*! lodash/some */ \"./node_modules/lodash/some.js\"));\nvar _TimelineItem = _interopRequireDefault(__webpack_require__(/*! ./TimelineItem */ \"./src/Timeline/TimelineItem.tsx\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Timeline/Timeline.tsx\",\n  _this = void 0;\n/**\n * The `Timeline` component is used to display a list of items in chronological order.\n *\n * @see https://rsuitejs.com/components/timeline\n */\nvar Timeline = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var children = props.children,\n    _props$as = props.as,\n    Component = _props$as === void 0 ? 'ul' : _props$as,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'timeline' : _props$classPrefix,\n    className = props.className,\n    _props$align = props.align,\n    align = _props$align === void 0 ? 'left' : _props$align,\n    endless = props.endless,\n    _props$isItemActive = props.isItemActive,\n    isItemActive = _props$isItemActive === void 0 ? Timeline.ACTIVE_LAST : _props$isItemActive,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"children\", \"as\", \"classPrefix\", \"className\", \"align\", \"endless\", \"isItemActive\"]);\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    merge = _useClassNames.merge,\n    withClassPrefix = _useClassNames.withClassPrefix;\n  var count = _utils.ReactChildren.count(children);\n  var withTime = (0, _some.default)(_react.default.Children.toArray(children), function (item) {\n    var _item$props;\n    return item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.time;\n  });\n  var classes = merge(className, withClassPrefix(\"align-\" + align, {\n    endless: endless,\n    'with-time': withTime\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 62,\n      columnNumber: 5\n    }\n  }), _utils.ReactChildren.mapCloneElement(children, function (_child, index) {\n    return {\n      last: index + 1 === count,\n      INTERNAL_active: isItemActive(index, count),\n      align: align\n    };\n  }));\n});\nTimeline.ACTIVE_FIRST = function (index) {\n  return index === 0;\n};\nTimeline.ACTIVE_LAST = function (index, totalItemsCount) {\n  return index === totalItemsCount - 1;\n};\nTimeline.Item = _TimelineItem.default;\nTimeline.displayName = 'Timeline';\nTimeline.propTypes = {\n  as: _propTypes.default.elementType,\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  align: (0, _propTypes2.oneOf)(['left', 'right', 'alternate']),\n  endless: _propTypes.default.bool\n};\nvar _default = Timeline;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/Timeline/Timeline.tsx?");
 
 /***/ }),
 
@@ -9178,7 +9178,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Windowing = __webpack_require__(/*! ../internals/Windowing */ \"./src/internals/Windowing/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _TreeNode = _interopRequireDefault(__webpack_require__(/*! ./TreeNode */ \"./src/TreePicker/TreeNode.tsx\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TreePicker/TreePicker.tsx\",\n  _this = void 0;\nvar emptyArray = [];\nvar itemSize = function itemSize() {\n  return 36;\n};\n\n/**\n * The `TreePicker` component is used for selecting single options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/tree-picker/\n */\nvar TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    style = props.style,\n    showIndentLine = props.showIndentLine,\n    controlledValue = props.value,\n    overrideLocale = props.locale,\n    _props$height = props.height,\n    height = _props$height === void 0 ? 360 : _props$height,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuStyle = props.menuStyle,\n    className = props.className,\n    disabled = props.disabled,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$virtualized = props.virtualized,\n    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    defaultValue = props.defaultValue,\n    placeholder = props.placeholder,\n    searchKeyword = props.searchKeyword,\n    menuClassName = props.menuClassName,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    searchBy = props.searchBy,\n    toggleAs = props.toggleAs,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    draggable = props.draggable,\n    _props$defaultExpandA = props.defaultExpandAll,\n    defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    controlledExpandItemValues = props.expandItemValues,\n    _props$defaultExpandI = props.defaultExpandItemValues,\n    defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,\n    id = props.id,\n    listProps = props.listProps,\n    getChildren = props.getChildren,\n    renderTreeIcon = props.renderTreeIcon,\n    renderTreeNode = props.renderTreeNode,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onOpen = props.onOpen,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onSelectItem = props.onSelectItem,\n    onChange = props.onChange,\n    onEntered = props.onEntered,\n    onClose = props.onClose,\n    onDragEnd = props.onDragEnd,\n    onDragStart = props.onDragStart,\n    onDragEnter = props.onDragEnter,\n    onDragLeave = props.onDragLeave,\n    onDragOver = props.onDragOver,\n    onDrop = props.onDrop,\n    onExpand = props.onExpand,\n    renderExtraFooter = props.renderExtraFooter,\n    renderMenu = props.renderMenu,\n    renderValue = props.renderValue,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"appearance\", \"style\", \"showIndentLine\", \"value\", \"locale\", \"height\", \"menuMaxHeight\", \"menuStyle\", \"className\", \"disabled\", \"placement\", \"cleanable\", \"searchable\", \"virtualized\", \"classPrefix\", \"defaultValue\", \"placeholder\", \"searchKeyword\", \"menuClassName\", \"menuAutoWidth\", \"searchBy\", \"toggleAs\", \"labelKey\", \"valueKey\", \"childrenKey\", \"draggable\", \"defaultExpandAll\", \"disabledItemValues\", \"expandItemValues\", \"defaultExpandItemValues\", \"id\", \"listProps\", \"getChildren\", \"renderTreeIcon\", \"renderTreeNode\", \"onExit\", \"onExited\", \"onClean\", \"onOpen\", \"onSearch\", \"onSelect\", \"onSelectItem\", \"onChange\", \"onEntered\", \"onClose\", \"onDragEnd\", \"onDragStart\", \"onDragEnter\", \"onDragLeave\", \"onDragOver\", \"onDrop\", \"onExpand\", \"renderExtraFooter\", \"renderMenu\", \"renderValue\"]);\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    rtl = _useCustom.rtl,\n    locale = _useCustom.locale;\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n    inline = _useContext.inline;\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref, {\n      inline: inline\n    }),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput,\n    treeView = _usePickerRef.treeView;\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useGetTreeNodeChildr = (0, _treeUtils.useGetTreeNodeChildren)(data, valueKey, childrenKey),\n    treeData = _useGetTreeNodeChildr.data,\n    setTreeData = _useGetTreeNodeChildr.setData,\n    loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,\n    loadChildren = _useGetTreeNodeChildr.loadChildren;\n  var _useControlled2 = (0, _utils.useControlled)(controlledExpandItemValues, (0, _treeUtils.getDefaultExpandItemValues)(treeData, {\n      defaultExpandAll: defaultExpandAll,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      defaultExpandItemValues: defaultExpandItemValues\n    })),\n    expandItemValues = _useControlled2[0],\n    setExpandItemValues = _useControlled2[1];\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _useState2 = (0, _react.useState)(null),\n    focusItemValue = _useState2[0],\n    setFocusItemValue = _useState2[1];\n  var _useFlattenTreeData = (0, _treeUtils.useFlattenTreeData)({\n      data: treeData,\n      labelKey: labelKey,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      callback: function callback() {\n        // after flattenData, always trigger re-render\n        forceUpdate();\n      }\n    }),\n    flattenNodes = _useFlattenTreeData.flattenNodes,\n    forceUpdate = _useFlattenTreeData.forceUpdate,\n    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useClassNames2 = (0, _utils.useClassNames)('tree'),\n    treePrefix = _useClassNames2.prefix,\n    withTreeClassPrefix = _useClassNames2.withClassPrefix;\n  var _useTreeSearch = (0, _treeUtils.useTreeSearch)({\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      searchKeyword: searchKeyword,\n      data: treeData,\n      searchBy: searchBy,\n      callback: function callback(searchKeyword, _filterData, event) {\n        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n      }\n    }),\n    filteredData = _useTreeSearch.filteredData,\n    searchKeywordState = _useTreeSearch.searchKeywordState,\n    setSearchKeyword = _useTreeSearch.setSearchKeyword,\n    handleSearch = _useTreeSearch.handleSearch,\n    setFilteredData = _useTreeSearch.setFilteredData;\n  var _useTreeDrag = (0, _treeUtils.useTreeDrag)(),\n    dragNodeKeys = _useTreeDrag.dragNodeKeys,\n    dragOverNodeKey = _useTreeDrag.dragOverNodeKey,\n    dragNode = _useTreeDrag.dragNode,\n    dropNodePosition = _useTreeDrag.dropNodePosition,\n    setDragNodeKeys = _useTreeDrag.setDragNodeKeys,\n    setDragOverNodeKey = _useTreeDrag.setDragOverNodeKey,\n    setDragNode = _useTreeDrag.setDragNode,\n    setDropNodePosition = _useTreeDrag.setDropNodePosition;\n  var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),\n    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,\n    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;\n  var activeNode = (0, _treeUtils.getTreeActiveNode)(flattenNodes, value, valueKey);\n  var getFormattedNodes = function getFormattedNodes(render) {\n    if (virtualized) {\n      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {\n        searchKeyword: searchKeywordState\n      }).filter(function (n) {\n        return n.visible;\n      });\n    }\n    return filteredData.map(function (dataItem, index) {\n      return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);\n    });\n  };\n  var focusActiveNode = function focusActiveNode() {\n    if (list.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: list.current,\n        valueKey: valueKey,\n        selector: \".\" + treePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeView.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  };\n  (0, _react.useEffect)(function () {\n    setFilteredData(data, searchKeywordState);\n    setTreeData(data);\n  }, [data, searchKeywordState, setFilteredData, setTreeData]);\n  (0, _react.useEffect)(function () {\n    setFilteredData(treeData, searchKeywordState);\n  }, [treeData, searchKeywordState, setFilteredData]);\n  (0, _react.useEffect)(function () {\n    if (Array.isArray(controlledExpandItemValues)) {\n      setExpandItemValues(controlledExpandItemValues);\n    }\n  }, [controlledExpandItemValues, setExpandItemValues]);\n  (0, _react.useEffect)(function () {\n    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  }, [searchKeyword, setSearchKeyword]);\n  var getDropData = function getDropData(nodeData) {\n    var options = {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    };\n    return {\n      /** draggingNode */\n      dragNode: dragNode,\n      /** dropNode */\n      dropNode: nodeData,\n      /** dragAndDrop Position type */\n      dropNodePosition: dropNodePosition,\n      createUpdateDataFunction: (0, _treeUtils.createUpdateTreeDataFunction)({\n        dragNode: dragNode,\n        dropNode: nodeData,\n        dropNodePosition: dropNodePosition\n      }, options)\n    };\n  };\n  var getTreeNodeProps = function getTreeNodeProps(node, layer, index) {\n    var draggingNode = dragNode !== null && dragNode !== void 0 ? dragNode : {};\n    return {\n      as: Component,\n      rtl: rtl,\n      value: node[valueKey],\n      label: node[labelKey],\n      index: index,\n      layer: layer,\n      loading: loadingNodeValues.some(function (item) {\n        return (0, _utils.shallowEqual)(item, node[valueKey]);\n      }),\n      expand: node.expand,\n      active: (0, _utils.shallowEqual)(node[valueKey], value),\n      focus: (0, _utils.shallowEqual)(node[valueKey], focusItemValue),\n      visible: node.visible,\n      draggable: draggable,\n      dragging: (0, _utils.shallowEqual)(node[valueKey], draggingNode[valueKey]),\n      children: node[childrenKey],\n      nodeData: node,\n      disabled: disabledItemValues.some(function (disabledItem) {\n        return (0, _utils.shallowEqual)(disabledItem, node[valueKey]);\n      }),\n      dragOver: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER,\n      dragOverTop: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP,\n      dragOverBottom: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM,\n      onSelect: handleSelect,\n      onDragStart: handleDragStart,\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: handleDrop,\n      onExpand: handleExpand,\n      renderTreeNode: renderTreeNode,\n      renderTreeIcon: renderTreeIcon\n    };\n  };\n\n  // TODO-Doma\n  // Replace `getKeyParentMap` with `getParentMap`\n  var itemParentMap = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getKeyParentMap)(data, function (node) {\n      return node[valueKey];\n    }, function (node) {\n      return node[childrenKey];\n    });\n  }, [childrenKey, data, valueKey]);\n  var handleSelect = (0, _utils.useEventCallback)(function (nodeData, event) {\n    var _target$current, _trigger$current, _trigger$current$clos;\n    if (!nodeData) {\n      return;\n    }\n    var nodeValue = nodeData[valueKey];\n    if (!isControlled) {\n      setValue(nodeValue);\n    }\n    setFocusItemValue(nodeData[valueKey]);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nodeValue, event);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, nodeValue, event);\n    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(nodeData, (0, _treeUtils.getPathTowardsItem)(nodeData, function (item) {\n      return itemParentMap.get(item[valueKey]);\n    }));\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleExpand = (0, _utils.useEventCallback)(function (node) {\n    var nextExpandItemValues = (0, _treeUtils.toggleExpand)({\n      node: node,\n      isExpand: !node.expand,\n      expandItemValues: expandItemValues,\n      valueKey: valueKey\n    });\n    setExpandItemValues(nextExpandItemValues);\n    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    }));\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  });\n  var handleDragStart = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (draggable) {\n      var _event$dataTransfer;\n      var dragMoverNode = (0, _treeUtils.createDragPreview)((0, _treeUtils.stringifyTreeNodeLabel)(nodeData[labelKey]), treePrefix('drag-preview'));\n      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);\n      setDragNodeKeys((0, _treeUtils.getDragNodeKeys)(nodeData, childrenKey, valueKey));\n      setDragNode(flattenNodes[nodeData.refKey]);\n      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);\n    }\n  });\n  var handleDragEnter = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      return;\n    }\n    if (dragNode) {\n      setDragOverNodeKey(nodeData[valueKey]);\n      setDropNodePosition((0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]));\n    }\n    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);\n  });\n  var handleDragOver = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      event.dataTransfer.dropEffect = 'none';\n      return;\n    }\n    if (dragNode && (0, _utils.shallowEqual)(nodeData[valueKey], dragOverNodeKey)) {\n      var lastDropNodePosition = (0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]);\n      if (lastDropNodePosition === dropNodePosition) return;\n      setDropNodePosition(lastDropNodePosition);\n    }\n    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);\n  });\n  var handleDragLeave = (0, _utils.useEventCallback)(function (nodeData, event) {\n    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);\n  });\n  var handleDragEnd = (0, _utils.useEventCallback)(function (nodeData, event) {\n    (0, _treeUtils.removeDragPreview)();\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);\n  });\n  var handleDrop = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      console.error('Cannot drag a node to itself and its children');\n    } else {\n      var dropData = getDropData(nodeData);\n      onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);\n    }\n    (0, _treeUtils.removeDragPreview)();\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n  });\n  var handleOpen = (0, _utils.useEventCallback)(function () {\n    var _trigger$current2, _trigger$current2$ope;\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$ope = _trigger$current2.open) === null || _trigger$current2$ope === void 0 ? void 0 : _trigger$current2$ope.call(_trigger$current2);\n    focusActiveNode();\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  });\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current3, _trigger$current3$clo, _target$current2;\n    (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$clo = _trigger$current3.close) === null || _trigger$current3$clo === void 0 ? void 0 : _trigger$current3$clo.call(_trigger$current3);\n    setSearchKeyword('');\n    setActive(false);\n    setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);\n    /**\n     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu\n     */\n    (_target$current2 = target.current) === null || _target$current2 === void 0 ? void 0 : _target$current2.focus();\n  });\n  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {\n    var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      expandItemValues: expandItemValues\n    }, (0, _treeUtils.isSearching)(searchKeywordState));\n    var selector = \".\" + treePrefix('node-label');\n    var focusProps = {\n      focusItemValue: focusItemValue,\n      focusableItems: focusableItems,\n      treeNodesRefs: treeNodesRefs,\n      selector: selector,\n      valueKey: valueKey,\n      callback: function callback(nextFocusItemValue) {\n        setFocusItemValue(nextFocusItemValue);\n      }\n    };\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  });\n  var handleLeftArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.leftArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      onExpand: handleExpand,\n      childrenKey: childrenKey,\n      onFocusItem: function onFocusItem() {\n        var _focusItem$parent, _focusItem$parent2;\n        setFocusItemValue(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey]);\n        (0, _treeUtils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, \".\" + treePrefix('node-label'));\n      }\n    });\n  });\n  var handleRightArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.rightArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      childrenKey: childrenKey,\n      onExpand: handleExpand,\n      onFocusItem: function onFocusItem() {\n        handleFocusItem(_utils.KEY_VALUES.DOWN);\n      }\n    });\n  });\n  var selectActiveItem = (0, _utils.useEventCallback)(function (event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    handleSelect(activeItem, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    var nullValue = null;\n    var target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    if (!isControlled) {\n      setValue(null);\n    }\n    onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);\n  });\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !activeNode || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onClose: handleClose,\n    onMenuKeyDown: function onMenuKeyDown(event) {\n      (0, _Picker.onMenuKeyDown)(event, {\n        down: function down() {\n          return handleFocusItem(_utils.KEY_VALUES.DOWN);\n        },\n        up: function up() {\n          return handleFocusItem(_utils.KEY_VALUES.UP);\n        },\n        left: rtl ? handleRightArrow : handleLeftArrow,\n        right: rtl ? handleLeftArrow : handleRightArrow,\n        enter: selectActiveItem,\n        del: handleClean\n      });\n    }\n  }, rest));\n  var handleTreeKeyDown = (0, _utils.useEventCallback)(function (event) {\n    if (!treeView.current) {\n      return;\n    }\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        return handleFocusItem(_utils.KEY_VALUES.DOWN);\n      },\n      up: function up() {\n        return handleFocusItem(_utils.KEY_VALUES.UP);\n      },\n      left: rtl ? handleRightArrow : handleLeftArrow,\n      right: rtl ? handleLeftArrow : handleRightArrow,\n      enter: selectActiveItem\n    });\n  });\n  var renderNode = function renderNode(node, index, layer) {\n    if (!node.visible) {\n      return null;\n    }\n    var children = node[childrenKey];\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      expand: expand\n    }), layer, index), {\n      hasChildren: visibleChildren\n    });\n    if (nodeProps.hasChildren) {\n      var _merge;\n      layer += 1;\n      var openClass = treePrefix('open');\n      var childrenClass = merge(treePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));\n      var nodes = children || [];\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: childrenClass,\n        key: node[valueKey],\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 640,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({}, nodeProps, {\n        ref: function ref(_ref) {\n          return saveTreeNodeRef(_ref, node.refKey);\n        },\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 641,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: treePrefix('group'),\n        role: \"group\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 642,\n          columnNumber: 11\n        }\n      }, nodes.map(function (child, i) {\n        return renderNode(child, i, layer);\n      }), showIndentLine && /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: treePrefix('indent-line'),\n        style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 645,\n          columnNumber: 15\n        }\n      })));\n    }\n    return /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({\n      ref: function ref(_ref2) {\n        return saveTreeNodeRef(_ref2, node.refKey);\n      },\n      key: node[valueKey]\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 655,\n        columnNumber: 7\n      }\n    }));\n  };\n  var renderVirtualListNode = function renderVirtualListNode(_ref3) {\n    var index = _ref3.index,\n      style = _ref3.style,\n      data = _ref3.data;\n    var node = data[index];\n    var layer = node.layer,\n      visible = node.visible;\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    if (!node.visible) {\n      return null;\n    }\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      expand: expand\n    }), layer), {\n      style: style,\n      hasChildren: node.hasChildren\n    });\n    return visible && /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({\n      ref: function ref(_ref4) {\n        return saveTreeNodeRef(_ref4, node.refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 681,\n        columnNumber: 23\n      }\n    }));\n  };\n  var renderTree = function renderTree() {\n    var _withTreeClassPrefix;\n    var classes = withTreeClassPrefix((_withTreeClassPrefix = {}, _withTreeClassPrefix[className !== null && className !== void 0 ? className : ''] = inline, _withTreeClassPrefix.virtualized = virtualized, _withTreeClassPrefix));\n    var formattedNodes = getFormattedNodes(renderNode);\n    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, {\n      treeRootClassName: treePrefix('root'),\n      ref: inline ? root : treeView,\n      className: classes,\n      style: inline ? (0, _extends2.default)({\n        height: height\n      }, style) : {},\n      onKeyDown: inline ? handleTreeKeyDown : undefined,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 693,\n        columnNumber: 7\n      }\n    }, virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n      defaultHeight: inline ? height : menuMaxHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 701,\n        columnNumber: 11\n      }\n    }, function (_ref5) {\n      var height = _ref5.height;\n      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n        ref: list,\n        height: height,\n        itemSize: itemSize,\n        itemCount: formattedNodes.length,\n        itemData: formattedNodes\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 706,\n          columnNumber: 15\n        }\n      }), renderVirtualListNode);\n    }) : formattedNodes);\n  };\n  var renderTreeView = function renderTreeView(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('tree-menu'));\n    var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: mergedMenuStyle,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 731,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 740,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderTree()) : renderTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\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  var hasValidValue = !(0, _isNil2.default)(activeNode) || !(0, _isNil2.default)(value) && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n  if (hasValidValue) {\n    var node = activeNode !== null && activeNode !== void 0 ? activeNode : {};\n    selectedElement = node[labelKey];\n    if ((0, _isFunction2.default)(renderValue) && value) {\n      selectedElement = renderValue(value, node, selectedElement);\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValidValue,\n      name: 'tree',\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  if (inline) {\n    return renderTree();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: handleOpen,\n    onEntered: onEntered,\n    onExit: (0, _utils.createChainedFunction)(onClose, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleClose, onExited),\n    speaker: renderTreeView,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 785,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 797,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    as: toggleAs,\n    disabled: disabled,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 798,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\nTreePicker.displayName = 'TreePicker';\nTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  height: _propTypes.default.number,\n  draggable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchable: _propTypes.default.bool,\n  menuAutoWidth: _propTypes.default.bool,\n  searchKeyword: _propTypes.default.string,\n  defaultExpandAll: _propTypes.default.bool,\n  expandItemValues: _propTypes.default.array,\n  defaultExpandItemValues: _propTypes.default.array,\n  onSearch: _propTypes.default.func,\n  onExpand: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderTreeNode: _propTypes.default.func,\n  renderTreeIcon: _propTypes.default.func,\n  renderExtraFooter: _propTypes.default.func,\n  renderDragNode: _propTypes.default.func,\n  searchBy: _propTypes.default.func\n});\nvar _default = TreePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TreePicker/TreePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nvar _interopRequireWildcard = __webpack_require__(/*! @babel/runtime/helpers/interopRequireWildcard */ \"./node_modules/@babel/runtime/helpers/interopRequireWildcard.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _isFunction2 = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isUndefined2 = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick2 = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _Windowing = __webpack_require__(/*! ../internals/Windowing */ \"./src/internals/Windowing/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _TreeNode = _interopRequireDefault(__webpack_require__(/*! ./TreeNode */ \"./src/TreePicker/TreeNode.tsx\"));\nvar _treeUtils = __webpack_require__(/*! ../utils/treeUtils */ \"./src/utils/treeUtils.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _TreeContext = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeContext */ \"./src/Tree/TreeContext.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/TreePicker/TreePicker.tsx\",\n  _this = void 0;\nvar emptyArray = [];\nvar itemSize = function itemSize() {\n  return 36;\n};\n\n/**\n * The `TreePicker` component is used for selecting single options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/tree-picker/\n */\nvar TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$data = props.data,\n    data = _props$data === void 0 ? emptyArray : _props$data,\n    _props$appearance = props.appearance,\n    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,\n    style = props.style,\n    showIndentLine = props.showIndentLine,\n    controlledValue = props.value,\n    overrideLocale = props.locale,\n    _props$height = props.height,\n    height = _props$height === void 0 ? 360 : _props$height,\n    _props$menuMaxHeight = props.menuMaxHeight,\n    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,\n    menuStyle = props.menuStyle,\n    className = props.className,\n    disabled = props.disabled,\n    _props$placement = props.placement,\n    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,\n    _props$cleanable = props.cleanable,\n    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,\n    _props$searchable = props.searchable,\n    searchable = _props$searchable === void 0 ? true : _props$searchable,\n    _props$virtualized = props.virtualized,\n    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,\n    defaultValue = props.defaultValue,\n    placeholder = props.placeholder,\n    searchKeyword = props.searchKeyword,\n    menuClassName = props.menuClassName,\n    _props$menuAutoWidth = props.menuAutoWidth,\n    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,\n    searchBy = props.searchBy,\n    toggleAs = props.toggleAs,\n    _props$labelKey = props.labelKey,\n    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,\n    _props$valueKey = props.valueKey,\n    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,\n    _props$childrenKey = props.childrenKey,\n    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,\n    draggable = props.draggable,\n    _props$defaultExpandA = props.defaultExpandAll,\n    defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,\n    _props$disabledItemVa = props.disabledItemValues,\n    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,\n    controlledExpandItemValues = props.expandItemValues,\n    _props$defaultExpandI = props.defaultExpandItemValues,\n    defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,\n    id = props.id,\n    listProps = props.listProps,\n    getChildren = props.getChildren,\n    renderTreeIcon = props.renderTreeIcon,\n    renderTreeNode = props.renderTreeNode,\n    onExit = props.onExit,\n    onExited = props.onExited,\n    onClean = props.onClean,\n    onOpen = props.onOpen,\n    onSearch = props.onSearch,\n    onSelect = props.onSelect,\n    onSelectItem = props.onSelectItem,\n    onChange = props.onChange,\n    onEntered = props.onEntered,\n    onClose = props.onClose,\n    onDragEnd = props.onDragEnd,\n    onDragStart = props.onDragStart,\n    onDragEnter = props.onDragEnter,\n    onDragLeave = props.onDragLeave,\n    onDragOver = props.onDragOver,\n    onDrop = props.onDrop,\n    onExpand = props.onExpand,\n    renderExtraFooter = props.renderExtraFooter,\n    renderMenu = props.renderMenu,\n    renderValue = props.renderValue,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"as\", \"data\", \"appearance\", \"style\", \"showIndentLine\", \"value\", \"locale\", \"height\", \"menuMaxHeight\", \"menuStyle\", \"className\", \"disabled\", \"placement\", \"cleanable\", \"searchable\", \"virtualized\", \"classPrefix\", \"defaultValue\", \"placeholder\", \"searchKeyword\", \"menuClassName\", \"menuAutoWidth\", \"searchBy\", \"toggleAs\", \"labelKey\", \"valueKey\", \"childrenKey\", \"draggable\", \"defaultExpandAll\", \"disabledItemValues\", \"expandItemValues\", \"defaultExpandItemValues\", \"id\", \"listProps\", \"getChildren\", \"renderTreeIcon\", \"renderTreeNode\", \"onExit\", \"onExited\", \"onClean\", \"onOpen\", \"onSearch\", \"onSelect\", \"onSelectItem\", \"onChange\", \"onEntered\", \"onClose\", \"onDragEnd\", \"onDragStart\", \"onDragEnter\", \"onDragLeave\", \"onDragOver\", \"onDrop\", \"onExpand\", \"renderExtraFooter\", \"renderMenu\", \"renderValue\"]);\n  var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),\n    rtl = _useCustom.rtl,\n    locale = _useCustom.locale;\n  var _useContext = (0, _react.useContext)(_TreeContext.default),\n    inline = _useContext.inline;\n  var _usePickerRef = (0, _Picker.usePickerRef)(ref, {\n      inline: inline\n    }),\n    trigger = _usePickerRef.trigger,\n    root = _usePickerRef.root,\n    target = _usePickerRef.target,\n    overlay = _usePickerRef.overlay,\n    list = _usePickerRef.list,\n    searchInput = _usePickerRef.searchInput,\n    treeView = _usePickerRef.treeView;\n  var _useControlled = (0, _utils.useControlled)(controlledValue, defaultValue),\n    value = _useControlled[0],\n    setValue = _useControlled[1],\n    isControlled = _useControlled[2];\n  var _useGetTreeNodeChildr = (0, _treeUtils.useGetTreeNodeChildren)(data, valueKey, childrenKey),\n    treeData = _useGetTreeNodeChildr.data,\n    setTreeData = _useGetTreeNodeChildr.setData,\n    loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,\n    loadChildren = _useGetTreeNodeChildr.loadChildren;\n  var _useControlled2 = (0, _utils.useControlled)(controlledExpandItemValues, (0, _treeUtils.getDefaultExpandItemValues)(treeData, {\n      defaultExpandAll: defaultExpandAll,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      defaultExpandItemValues: defaultExpandItemValues\n    })),\n    expandItemValues = _useControlled2[0],\n    setExpandItemValues = _useControlled2[1];\n  var _useState = (0, _react.useState)(false),\n    active = _useState[0],\n    setActive = _useState[1];\n  var _useState2 = (0, _react.useState)(null),\n    focusItemValue = _useState2[0],\n    setFocusItemValue = _useState2[1];\n  var _useFlattenTreeData = (0, _treeUtils.useFlattenTreeData)({\n      data: treeData,\n      labelKey: labelKey,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      callback: function callback() {\n        // after flattenData, always trigger re-render\n        forceUpdate();\n      }\n    }),\n    flattenNodes = _useFlattenTreeData.flattenNodes,\n    forceUpdate = _useFlattenTreeData.forceUpdate,\n    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    prefix = _useClassNames.prefix,\n    merge = _useClassNames.merge;\n  var _useClassNames2 = (0, _utils.useClassNames)(inline && classPrefix !== 'picker' ? classPrefix : 'tree'),\n    treePrefix = _useClassNames2.prefix,\n    withTreeClassPrefix = _useClassNames2.withClassPrefix;\n  var _useTreeSearch = (0, _treeUtils.useTreeSearch)({\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      searchKeyword: searchKeyword,\n      data: treeData,\n      searchBy: searchBy,\n      callback: function callback(searchKeyword, _filterData, event) {\n        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);\n      }\n    }),\n    filteredData = _useTreeSearch.filteredData,\n    searchKeywordState = _useTreeSearch.searchKeywordState,\n    setSearchKeyword = _useTreeSearch.setSearchKeyword,\n    handleSearch = _useTreeSearch.handleSearch,\n    setFilteredData = _useTreeSearch.setFilteredData;\n  var _useTreeDrag = (0, _treeUtils.useTreeDrag)(),\n    dragNodeKeys = _useTreeDrag.dragNodeKeys,\n    dragOverNodeKey = _useTreeDrag.dragOverNodeKey,\n    dragNode = _useTreeDrag.dragNode,\n    dropNodePosition = _useTreeDrag.dropNodePosition,\n    setDragNodeKeys = _useTreeDrag.setDragNodeKeys,\n    setDragOverNodeKey = _useTreeDrag.setDragOverNodeKey,\n    setDragNode = _useTreeDrag.setDragNode,\n    setDropNodePosition = _useTreeDrag.setDropNodePosition;\n  var _useTreeNodeRefs = (0, _treeUtils.useTreeNodeRefs)(),\n    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,\n    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;\n  var activeNode = (0, _treeUtils.getTreeActiveNode)(flattenNodes, value, valueKey);\n  var getFormattedNodes = function getFormattedNodes(render) {\n    if (virtualized) {\n      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {\n        searchKeyword: searchKeywordState\n      }).filter(function (n) {\n        return n.visible;\n      });\n    }\n    return filteredData.map(function (dataItem, index) {\n      return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);\n    });\n  };\n  var focusActiveNode = function focusActiveNode() {\n    if (list.current) {\n      (0, _treeUtils.focusToActiveTreeNode)({\n        list: list.current,\n        valueKey: valueKey,\n        selector: \".\" + treePrefix('node-active'),\n        activeNode: activeNode,\n        virtualized: virtualized,\n        container: treeView.current,\n        formattedNodes: getFormattedNodes()\n      });\n    }\n  };\n  (0, _react.useEffect)(function () {\n    setFilteredData(data, searchKeywordState);\n    setTreeData(data);\n  }, [data, searchKeywordState, setFilteredData, setTreeData]);\n  (0, _react.useEffect)(function () {\n    setFilteredData(treeData, searchKeywordState);\n  }, [treeData, searchKeywordState, setFilteredData]);\n  (0, _react.useEffect)(function () {\n    if (Array.isArray(controlledExpandItemValues)) {\n      setExpandItemValues(controlledExpandItemValues);\n    }\n  }, [controlledExpandItemValues, setExpandItemValues]);\n  (0, _react.useEffect)(function () {\n    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  }, [searchKeyword, setSearchKeyword]);\n  var getDropData = function getDropData(nodeData) {\n    var options = {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    };\n    return {\n      /** draggingNode */\n      dragNode: dragNode,\n      /** dropNode */\n      dropNode: nodeData,\n      /** dragAndDrop Position type */\n      dropNodePosition: dropNodePosition,\n      createUpdateDataFunction: (0, _treeUtils.createUpdateTreeDataFunction)({\n        dragNode: dragNode,\n        dropNode: nodeData,\n        dropNodePosition: dropNodePosition\n      }, options)\n    };\n  };\n  var getTreeNodeProps = function getTreeNodeProps(node, layer, index) {\n    var draggingNode = dragNode !== null && dragNode !== void 0 ? dragNode : {};\n    return {\n      as: Component,\n      rtl: rtl,\n      value: node[valueKey],\n      label: node[labelKey],\n      index: index,\n      layer: layer,\n      loading: loadingNodeValues.some(function (item) {\n        return (0, _utils.shallowEqual)(item, node[valueKey]);\n      }),\n      expand: node.expand,\n      active: (0, _utils.shallowEqual)(node[valueKey], value),\n      focus: (0, _utils.shallowEqual)(node[valueKey], focusItemValue),\n      visible: node.visible,\n      draggable: draggable,\n      dragging: (0, _utils.shallowEqual)(node[valueKey], draggingNode[valueKey]),\n      children: node[childrenKey],\n      nodeData: node,\n      disabled: disabledItemValues.some(function (disabledItem) {\n        return (0, _utils.shallowEqual)(disabledItem, node[valueKey]);\n      }),\n      dragOver: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER,\n      dragOverTop: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP,\n      dragOverBottom: (0, _utils.shallowEqual)(node[valueKey], dragOverNodeKey) && dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM,\n      onSelect: handleSelect,\n      onDragStart: handleDragStart,\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: handleDrop,\n      onExpand: handleExpand,\n      renderTreeNode: renderTreeNode,\n      renderTreeIcon: renderTreeIcon\n    };\n  };\n\n  // TODO-Doma\n  // Replace `getKeyParentMap` with `getParentMap`\n  var itemParentMap = (0, _react.useMemo)(function () {\n    return (0, _treeUtils.getKeyParentMap)(data, function (node) {\n      return node[valueKey];\n    }, function (node) {\n      return node[childrenKey];\n    });\n  }, [childrenKey, data, valueKey]);\n  var handleSelect = (0, _utils.useEventCallback)(function (nodeData, event) {\n    var _target$current, _trigger$current, _trigger$current$clos;\n    if (!nodeData) {\n      return;\n    }\n    var nodeValue = nodeData[valueKey];\n    if (!isControlled) {\n      setValue(nodeValue);\n    }\n    setFocusItemValue(nodeData[valueKey]);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nodeValue, event);\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, nodeValue, event);\n    onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(nodeData, (0, _treeUtils.getPathTowardsItem)(nodeData, function (item) {\n      return itemParentMap.get(item[valueKey]);\n    }));\n    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);\n  });\n  var handleExpand = (0, _utils.useEventCallback)(function (node) {\n    var nextExpandItemValues = (0, _treeUtils.toggleExpand)({\n      node: node,\n      isExpand: !node.expand,\n      expandItemValues: expandItemValues,\n      valueKey: valueKey\n    });\n    setExpandItemValues(nextExpandItemValues);\n    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {\n      valueKey: valueKey,\n      childrenKey: childrenKey\n    }));\n    if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {\n      loadChildren(node, getChildren);\n    }\n  });\n  var handleDragStart = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (draggable) {\n      var _event$dataTransfer;\n      var dragMoverNode = (0, _treeUtils.createDragPreview)((0, _treeUtils.stringifyTreeNodeLabel)(nodeData[labelKey]), treePrefix('drag-preview'));\n      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);\n      setDragNodeKeys((0, _treeUtils.getDragNodeKeys)(nodeData, childrenKey, valueKey));\n      setDragNode(flattenNodes[nodeData.refKey]);\n      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);\n    }\n  });\n  var handleDragEnter = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      return;\n    }\n    if (dragNode) {\n      setDragOverNodeKey(nodeData[valueKey]);\n      setDropNodePosition((0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]));\n    }\n    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);\n  });\n  var handleDragOver = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      event.dataTransfer.dropEffect = 'none';\n      return;\n    }\n    if (dragNode && (0, _utils.shallowEqual)(nodeData[valueKey], dragOverNodeKey)) {\n      var lastDropNodePosition = (0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]);\n      if (lastDropNodePosition === dropNodePosition) return;\n      setDropNodePosition(lastDropNodePosition);\n    }\n    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);\n  });\n  var handleDragLeave = (0, _utils.useEventCallback)(function (nodeData, event) {\n    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);\n  });\n  var handleDragEnd = (0, _utils.useEventCallback)(function (nodeData, event) {\n    (0, _treeUtils.removeDragPreview)();\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);\n  });\n  var handleDrop = (0, _utils.useEventCallback)(function (nodeData, event) {\n    if (dragNodeKeys.some(function (d) {\n      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);\n    })) {\n      console.error('Cannot drag a node to itself and its children');\n    } else {\n      var dropData = getDropData(nodeData);\n      onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);\n    }\n    (0, _treeUtils.removeDragPreview)();\n    setDragNode(null);\n    setDragNodeKeys([]);\n    setDragOverNodeKey(null);\n  });\n  var handleOpen = (0, _utils.useEventCallback)(function () {\n    var _trigger$current2, _trigger$current2$ope;\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$ope = _trigger$current2.open) === null || _trigger$current2$ope === void 0 ? void 0 : _trigger$current2$ope.call(_trigger$current2);\n    focusActiveNode();\n    onOpen === null || onOpen === void 0 ? void 0 : onOpen();\n    setActive(true);\n  });\n  var handleClose = (0, _utils.useEventCallback)(function () {\n    var _trigger$current3, _trigger$current3$clo, _target$current2;\n    (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$clo = _trigger$current3.close) === null || _trigger$current3$clo === void 0 ? void 0 : _trigger$current3$clo.call(_trigger$current3);\n    setSearchKeyword('');\n    setActive(false);\n    setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);\n    /**\n     * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu\n     */\n    (_target$current2 = target.current) === null || _target$current2 === void 0 ? void 0 : _target$current2.focus();\n  });\n  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {\n    var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      childrenKey: childrenKey,\n      expandItemValues: expandItemValues\n    }, (0, _treeUtils.isSearching)(searchKeywordState));\n    var selector = \".\" + treePrefix('node-label');\n    var focusProps = {\n      focusItemValue: focusItemValue,\n      focusableItems: focusableItems,\n      treeNodesRefs: treeNodesRefs,\n      selector: selector,\n      valueKey: valueKey,\n      callback: function callback(nextFocusItemValue) {\n        setFocusItemValue(nextFocusItemValue);\n      }\n    };\n    if (key === _utils.KEY_VALUES.DOWN) {\n      (0, _treeUtils.focusNextItem)(focusProps);\n      return;\n    }\n    if (key === _utils.KEY_VALUES.UP) {\n      (0, _treeUtils.focusPreviousItem)(focusProps);\n    }\n  });\n  var handleLeftArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.leftArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      onExpand: handleExpand,\n      childrenKey: childrenKey,\n      onFocusItem: function onFocusItem() {\n        var _focusItem$parent, _focusItem$parent2;\n        setFocusItemValue(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey]);\n        (0, _treeUtils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, \".\" + treePrefix('node-label'));\n      }\n    });\n  });\n  var handleRightArrow = (0, _utils.useEventCallback)(function () {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    (0, _treeUtils.rightArrowHandler)({\n      focusItem: focusItem,\n      expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),\n      childrenKey: childrenKey,\n      onExpand: handleExpand,\n      onFocusItem: function onFocusItem() {\n        handleFocusItem(_utils.KEY_VALUES.DOWN);\n      }\n    });\n  });\n  var selectActiveItem = (0, _utils.useEventCallback)(function (event) {\n    if ((0, _isNil2.default)(focusItemValue)) return;\n    var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);\n    handleSelect(activeItem, event);\n  });\n  var handleClean = (0, _utils.useEventCallback)(function (event) {\n    var nullValue = null;\n    var target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    if (!isControlled) {\n      setValue(null);\n    }\n    onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);\n  });\n  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({\n    toggle: !activeNode || !active,\n    trigger: trigger,\n    target: target,\n    overlay: overlay,\n    searchInput: searchInput,\n    active: active,\n    onExit: handleClean,\n    onClose: handleClose,\n    onMenuKeyDown: function onMenuKeyDown(event) {\n      (0, _Picker.onMenuKeyDown)(event, {\n        down: function down() {\n          return handleFocusItem(_utils.KEY_VALUES.DOWN);\n        },\n        up: function up() {\n          return handleFocusItem(_utils.KEY_VALUES.UP);\n        },\n        left: rtl ? handleRightArrow : handleLeftArrow,\n        right: rtl ? handleLeftArrow : handleRightArrow,\n        enter: selectActiveItem,\n        del: handleClean\n      });\n    }\n  }, rest));\n  var handleTreeKeyDown = (0, _utils.useEventCallback)(function (event) {\n    if (!treeView.current) {\n      return;\n    }\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: function down() {\n        return handleFocusItem(_utils.KEY_VALUES.DOWN);\n      },\n      up: function up() {\n        return handleFocusItem(_utils.KEY_VALUES.UP);\n      },\n      left: rtl ? handleRightArrow : handleLeftArrow,\n      right: rtl ? handleLeftArrow : handleRightArrow,\n      enter: selectActiveItem\n    });\n  });\n  var renderNode = function renderNode(node, index, layer) {\n    if (!node.visible) {\n      return null;\n    }\n    var children = node[childrenKey];\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      expand: expand\n    }), layer, index), {\n      hasChildren: visibleChildren\n    });\n    if (nodeProps.hasChildren) {\n      var _merge;\n      layer += 1;\n      var openClass = treePrefix('open');\n      var childrenClass = merge(treePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));\n      var nodes = children || [];\n      return /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: childrenClass,\n        key: node[valueKey],\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 642,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({}, nodeProps, {\n        ref: function ref(_ref) {\n          return saveTreeNodeRef(_ref, node.refKey);\n        },\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 643,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: treePrefix('group'),\n        role: \"group\",\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 644,\n          columnNumber: 11\n        }\n      }, nodes.map(function (child, i) {\n        return renderNode(child, i, layer);\n      }), showIndentLine && /*#__PURE__*/_react.default.createElement(\"span\", {\n        className: treePrefix('indent-line'),\n        style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true),\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 647,\n          columnNumber: 15\n        }\n      })));\n    }\n    return /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({\n      ref: function ref(_ref2) {\n        return saveTreeNodeRef(_ref2, node.refKey);\n      },\n      key: node[valueKey]\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 657,\n        columnNumber: 7\n      }\n    }));\n  };\n  var renderVirtualListNode = function renderVirtualListNode(_ref3) {\n    var index = _ref3.index,\n      style = _ref3.style,\n      data = _ref3.data;\n    var node = data[index];\n    var layer = node.layer,\n      visible = node.visible;\n    var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));\n    if (!node.visible) {\n      return null;\n    }\n    var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {\n      expand: expand\n    }), layer), {\n      style: style,\n      hasChildren: node.hasChildren\n    });\n    return visible && /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({\n      ref: function ref(_ref4) {\n        return saveTreeNodeRef(_ref4, node.refKey);\n      }\n    }, nodeProps, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 683,\n        columnNumber: 23\n      }\n    }));\n  };\n  var renderTree = function renderTree() {\n    var _merge2;\n    var classes = merge(withTreeClassPrefix({\n      virtualized: virtualized\n    }), (_merge2 = {}, _merge2[className !== null && className !== void 0 ? className : ''] = inline, _merge2));\n    var formattedNodes = getFormattedNodes(renderNode);\n    var treeViewProps = {\n      ref: treeView\n    };\n    if (inline) {\n      treeViewProps = (0, _extends2.default)({\n        ref: root,\n        style: (0, _extends2.default)({\n          height: height\n        }, style),\n        onKeyDown: handleTreeKeyDown\n      }, rest);\n    }\n    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, (0, _extends2.default)({}, treeViewProps, {\n      treeRootClassName: treePrefix('root'),\n      className: classes,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 704,\n        columnNumber: 7\n      }\n    }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n      defaultHeight: inline ? height : menuMaxHeight,\n      style: {\n        width: 'auto',\n        height: 'auto'\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 706,\n        columnNumber: 11\n      }\n    }, function (_ref5) {\n      var height = _ref5.height;\n      return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n        ref: list,\n        height: height,\n        itemSize: itemSize,\n        itemCount: formattedNodes.length,\n        itemData: formattedNodes\n      }, listProps, {\n        __self: _this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 711,\n          columnNumber: 15\n        }\n      }), renderVirtualListNode);\n    }) : formattedNodes);\n  };\n  var renderTreeView = function renderTreeView(positionProps, speakerRef) {\n    var left = positionProps.left,\n      top = positionProps.top,\n      className = positionProps.className;\n    var classes = merge(className, menuClassName, prefix('tree-menu'));\n    var mergedMenuStyle = (0, _extends2.default)({}, menuStyle, {\n      left: left,\n      top: top\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      autoWidth: menuAutoWidth,\n      className: classes,\n      style: mergedMenuStyle,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 736,\n        columnNumber: 7\n      }\n    }, searchable ? /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeywordState,\n      inputRef: searchInput,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 745,\n        columnNumber: 11\n      }\n    }) : null, renderMenu ? renderMenu(renderTree()) : renderTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\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  var hasValidValue = !(0, _isNil2.default)(activeNode) || !(0, _isNil2.default)(value) && (0, _isFunction2.default)(renderValue);\n  var selectedElement = placeholder;\n  if (hasValidValue) {\n    var node = activeNode !== null && activeNode !== void 0 ? activeNode : {};\n    selectedElement = node[labelKey];\n    if ((0, _isFunction2.default)(renderValue) && value) {\n      selectedElement = renderValue(value, node, selectedElement);\n      if ((0, _isNil2.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {\n      classPrefix: classPrefix,\n      appearance: appearance,\n      hasValue: hasValidValue,\n      name: 'tree',\n      cleanable: cleanable\n    })),\n    classes = _usePickerClassName[0],\n    usedClassNamePropKeys = _usePickerClassName[1];\n  if (inline) {\n    return renderTree();\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: handleOpen,\n    onEntered: onEntered,\n    onExit: (0, _utils.createChainedFunction)(onClose, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleClose, onExited),\n    speaker: renderTreeView,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 790,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    ref: root,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 802,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    as: toggleAs,\n    disabled: disabled,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 803,\n      columnNumber: 9\n    }\n  }), selectedElement || locale.placeholder)));\n});\nTreePicker.displayName = 'TreePicker';\nTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {\n  locale: _propTypes.default.any,\n  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),\n  height: _propTypes.default.number,\n  draggable: _propTypes.default.bool,\n  virtualized: _propTypes.default.bool,\n  searchable: _propTypes.default.bool,\n  menuAutoWidth: _propTypes.default.bool,\n  searchKeyword: _propTypes.default.string,\n  defaultExpandAll: _propTypes.default.bool,\n  expandItemValues: _propTypes.default.array,\n  defaultExpandItemValues: _propTypes.default.array,\n  onSearch: _propTypes.default.func,\n  onExpand: _propTypes.default.func,\n  onSelect: _propTypes.default.func,\n  renderMenu: _propTypes.default.func,\n  renderTreeNode: _propTypes.default.func,\n  renderTreeIcon: _propTypes.default.func,\n  renderExtraFooter: _propTypes.default.func,\n  renderDragNode: _propTypes.default.func,\n  searchBy: _propTypes.default.func\n});\nvar _default = TreePicker;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/TreePicker/TreePicker.tsx?");
 
 /***/ }),
 
@@ -9519,7 +9519,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ../../Checkbox */ \"./src/Checkbox/index.tsx\"));\nvar _useCombobox2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/internals/Picker/ListCheckItem.tsx\",\n  _this = void 0,\n  _templateObject;\nvar ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$active = props.active,\n    active = _props$active === void 0 ? false : _props$active,\n    _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$checkboxAs = props.checkboxAs,\n    CheckboxItem = _props$checkboxAs === void 0 ? _Checkbox.default : _props$checkboxAs,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'check-item' : _props$classPrefix,\n    _props$checkable = props.checkable,\n    checkable = _props$checkable === void 0 ? true : _props$checkable,\n    disabled = props.disabled,\n    value = props.value,\n    focus = props.focus,\n    children = props.children,\n    className = props.className,\n    indeterminate = props.indeterminate,\n    onKeyDown = props.onKeyDown,\n    onSelect = props.onSelect,\n    onCheck = props.onCheck,\n    onSelectItem = props.onSelectItem,\n    renderMenuItemCheckbox = props.renderMenuItemCheckbox,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"active\", \"as\", \"checkboxAs\", \"classPrefix\", \"checkable\", \"disabled\", \"value\", \"focus\", \"children\", \"className\", \"indeterminate\", \"onKeyDown\", \"onSelect\", \"onCheck\", \"onSelectItem\", \"renderMenuItemCheckbox\"]);\n  var handleChange = (0, _utils.useEventCallback)(function (value, checked, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event, checked);\n  });\n  var handleCheck = (0, _utils.useEventCallback)(function (event) {\n    if (!disabled) {\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(value, event, !active);\n    }\n  });\n  var handleSelectItem = (0, _utils.useEventCallback)(function (event) {\n    if (!disabled) {\n      onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(value, event, !active);\n    }\n  });\n  var _useCombobox = (0, _useCombobox2.default)(),\n    id = _useCombobox.id;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    rootPrefix = _useClassNames.rootPrefix;\n  var checkboxItemClasses = withClassPrefix({\n    focus: focus\n  });\n  var checkboxProps = {\n    value: value,\n    disabled: disabled,\n    indeterminate: indeterminate,\n    checkable: checkable,\n    children: children,\n    checked: active,\n    className: checkboxItemClasses,\n    onKeyDown: disabled ? undefined : onKeyDown,\n    onChange: handleChange,\n    onClick: handleSelectItem,\n    onCheckboxClick: handleCheck\n  };\n  console.log(className, 'className');\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"option\",\n    \"aria-selected\": active,\n    \"aria-disabled\": disabled,\n    id: id ? id + \"-opt-\" + value : undefined,\n    \"data-key\": value\n  }, rest, {\n    ref: ref,\n    className: merge(className, rootPrefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"picker-list-item\"])))),\n    tabIndex: -1,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 87,\n      columnNumber: 7\n    }\n  }), renderMenuItemCheckbox ? renderMenuItemCheckbox(checkboxProps) : /*#__PURE__*/_react.default.createElement(CheckboxItem, (0, _extends2.default)({\n    role: \"checkbox\"\n  }, checkboxProps, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 101,\n      columnNumber: 11\n    }\n  })));\n});\nListCheckItem.displayName = 'ListCheckItem';\nvar _default = ListCheckItem;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/ListCheckItem.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _taggedTemplateLiteralLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/taggedTemplateLiteralLoose */ \"./node_modules/@babel/runtime/helpers/taggedTemplateLiteralLoose.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\nvar _Checkbox = _interopRequireDefault(__webpack_require__(/*! ../../Checkbox */ \"./src/Checkbox/index.tsx\"));\nvar _useCombobox2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/internals/Picker/ListCheckItem.tsx\",\n  _this = void 0,\n  _templateObject;\nvar ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$active = props.active,\n    active = _props$active === void 0 ? false : _props$active,\n    _props$as = props.as,\n    Component = _props$as === void 0 ? 'div' : _props$as,\n    _props$checkboxAs = props.checkboxAs,\n    CheckboxItem = _props$checkboxAs === void 0 ? _Checkbox.default : _props$checkboxAs,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'check-item' : _props$classPrefix,\n    _props$checkable = props.checkable,\n    checkable = _props$checkable === void 0 ? true : _props$checkable,\n    disabled = props.disabled,\n    value = props.value,\n    focus = props.focus,\n    children = props.children,\n    className = props.className,\n    indeterminate = props.indeterminate,\n    onKeyDown = props.onKeyDown,\n    onSelect = props.onSelect,\n    onCheck = props.onCheck,\n    onSelectItem = props.onSelectItem,\n    renderMenuItemCheckbox = props.renderMenuItemCheckbox,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, [\"active\", \"as\", \"checkboxAs\", \"classPrefix\", \"checkable\", \"disabled\", \"value\", \"focus\", \"children\", \"className\", \"indeterminate\", \"onKeyDown\", \"onSelect\", \"onCheck\", \"onSelectItem\", \"renderMenuItemCheckbox\"]);\n  var handleChange = (0, _utils.useEventCallback)(function (value, checked, event) {\n    onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event, checked);\n  });\n  var handleCheck = (0, _utils.useEventCallback)(function (event) {\n    if (!disabled) {\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(value, event, !active);\n    }\n  });\n  var handleSelectItem = (0, _utils.useEventCallback)(function (event) {\n    if (!disabled) {\n      onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(value, event, !active);\n    }\n  });\n  var _useCombobox = (0, _useCombobox2.default)(),\n    id = _useCombobox.id;\n  var _useClassNames = (0, _utils.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge,\n    rootPrefix = _useClassNames.rootPrefix;\n  var checkboxItemClasses = withClassPrefix({\n    focus: focus\n  });\n  var checkboxProps = {\n    value: value,\n    disabled: disabled,\n    indeterminate: indeterminate,\n    checkable: checkable,\n    children: children,\n    checked: active,\n    className: checkboxItemClasses,\n    onKeyDown: disabled ? undefined : onKeyDown,\n    onChange: handleChange,\n    onClick: handleSelectItem,\n    onCheckboxClick: handleCheck\n  };\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"option\",\n    \"aria-selected\": active,\n    \"aria-disabled\": disabled,\n    id: id ? id + \"-opt-\" + value : undefined,\n    \"data-key\": value\n  }, rest, {\n    ref: ref,\n    className: merge(className, rootPrefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)([\"picker-list-item\"])))),\n    tabIndex: -1,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 85,\n      columnNumber: 7\n    }\n  }), renderMenuItemCheckbox ? renderMenuItemCheckbox(checkboxProps) : /*#__PURE__*/_react.default.createElement(CheckboxItem, (0, _extends2.default)({\n    role: \"checkbox\"\n  }, checkboxProps, {\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 99,\n      columnNumber: 11\n    }\n  })));\n});\nListCheckItem.displayName = 'ListCheckItem';\nvar _default = ListCheckItem;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/ListCheckItem.tsx?");
 
 /***/ }),
 
@@ -9992,7 +9992,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.find = find;\nexports.map = map;\nexports.mapCloneElement = mapCloneElement;\nexports.count = count;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nfunction typeOf(object) {\n  if (typeof object === 'object' && object !== null) {\n    return object.type || object.$$typeof;\n  }\n}\nfunction isFragment(children) {\n  return _react.default.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');\n}\nfunction getChildren(children) {\n  var _props;\n  return isFragment(children) ? (_props = children.props) === null || _props === void 0 ? void 0 : _props.children : children;\n}\nfunction find(children, func, context) {\n  var index = 0;\n  var result;\n  _react.default.Children.forEach(getChildren(children), function (child) {\n    if (result) {\n      return;\n    }\n    index += 1;\n    if (func.call(context, child, index)) {\n      result = child;\n    }\n  });\n  return result;\n}\nfunction map(children, func, context) {\n  var index = 0;\n  return _react.default.Children.map(getChildren(children), function (child) {\n    if (! /*#__PURE__*/_react.default.isValidElement(child)) {\n      return child;\n    }\n    var handle = func.call(context, child, index);\n    index += 1;\n    return handle;\n  });\n}\nfunction mapCloneElement(children, func, context) {\n  return map(children, function (child, index) {\n    return /*#__PURE__*/_react.default.cloneElement(child, (0, _extends2.default)({\n      key: index\n    }, func(child, index)));\n  }, context);\n}\nfunction count(children) {\n  return _react.default.Children.count(Array.isArray(children) ? children.filter(function (child) {\n    return child;\n  }) : children);\n}\nfunction some(children, func, context) {\n  var index = 0;\n  var result = false;\n  _react.default.Children.forEach(getChildren(children), function (child) {\n    if (result) {\n      return;\n    }\n    if (! /*#__PURE__*/_react.default.isValidElement(child)) {\n      return;\n    }\n\n    /* eslint-disable */\n    if (func.call(context, child, index += 1)) {\n      result = true;\n    }\n  });\n  return result;\n}\nvar _default = {\n  mapCloneElement: mapCloneElement,\n  count: count,\n  some: some,\n  map: map,\n  find: find\n};\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/utils/ReactChildren.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.find = find;\nexports.map = map;\nexports.mapCloneElement = mapCloneElement;\nexports.count = count;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nfunction typeOf(object) {\n  if (typeof object === 'object' && object !== null) {\n    return object.type || object.$$typeof;\n  }\n}\nfunction isFragment(children) {\n  return _react.default.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');\n}\nfunction flatChildren(children) {\n  return _react.default.Children.toArray(_react.default.Children.map(children, function (child) {\n    if (isFragment(child)) {\n      var _child$props;\n      return _react.default.Children.toArray(((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children) || []);\n    }\n    return child;\n  }));\n}\nfunction find(children, func, context) {\n  var index = 0;\n  var result;\n  _react.default.Children.forEach(flatChildren(children), function (child) {\n    if (result) {\n      return;\n    }\n    index += 1;\n    if (func.call(context, child, index)) {\n      result = child;\n    }\n  });\n  return result;\n}\nfunction map(children, func, context) {\n  var index = 0;\n  return _react.default.Children.map(flatChildren(children), function (child) {\n    if (! /*#__PURE__*/_react.default.isValidElement(child)) {\n      return child;\n    }\n    var handle = func.call(context, child, index);\n    index += 1;\n    return handle;\n  });\n}\nfunction mapCloneElement(children, func, context) {\n  return map(children, function (child, index) {\n    return /*#__PURE__*/_react.default.cloneElement(child, (0, _extends2.default)({\n      key: index\n    }, func(child, index)));\n  }, context);\n}\nfunction count(children) {\n  return _react.default.Children.count(flatChildren(children));\n}\nfunction some(children, func, context) {\n  var index = 0;\n  var result = false;\n  _react.default.Children.forEach(flatChildren(children), function (child) {\n    if (result) {\n      return;\n    }\n    if (! /*#__PURE__*/_react.default.isValidElement(child)) {\n      return;\n    }\n\n    /* eslint-disable */\n    if (func.call(context, child, index += 1)) {\n      result = true;\n    }\n  });\n  return result;\n}\nvar _default = {\n  mapCloneElement: mapCloneElement,\n  count: count,\n  some: some,\n  map: map,\n  find: find\n};\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://rsuite/./src/utils/ReactChildren.tsx?");
 
 /***/ }),