@kdcloudjs/kdesign 1.8.15 → 1.8.16

package/dist/kdesign.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.8.15
+ *   @kdcloudjs/kdesign v1.8.16
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -5402,8 +5402,8 @@ var Breadcrumb = function Breadcrumb(props) {
   };
   Object(react__WEBPACK_IMPORTED_MODULE_16__["useEffect"])(function () {
     var isMore = itemsConfig === null || itemsConfig === void 0 ? void 0 : itemsConfig.some(function (item) {
-      var _item$title, _item$title$props;
-      return (item === null || item === void 0 ? void 0 : (_item$title = item.title) === null || _item$title === void 0 ? void 0 : (_item$title$props = _item$title.props) === null || _item$title$props === void 0 ? void 0 : _item$title$props.children.type.displayName) === 'Tooltip';
+      var _item$title, _item$title$props, _item$title$props$chi, _item$title$props$chi2;
+      return (item === null || item === void 0 ? void 0 : (_item$title = item.title) === null || _item$title === void 0 ? void 0 : (_item$title$props = _item$title.props) === null || _item$title$props === void 0 ? void 0 : (_item$title$props$chi = _item$title$props.children) === null || _item$title$props$chi === void 0 ? void 0 : (_item$title$props$chi2 = _item$title$props$chi.type) === null || _item$title$props$chi2 === void 0 ? void 0 : _item$title$props$chi2.displayName) === 'Tooltip';
     });
     setOpenEllipsis(isMore && itemsConfig.length === MIN_ITEM);
   }, [itemsConfig]);
@@ -5750,42 +5750,45 @@ Button.displayName = 'Button';
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ButtonGroupTypes", function() { return ButtonGroupTypes; });
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.array.concat.js */ "./node_modules/core-js/modules/es.array.concat.js");
-/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.array.map.js */ "./node_modules/core-js/modules/es.array.map.js");
-/* harmony import */ var core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.object.keys.js */ "./node_modules/core-js/modules/es.object.keys.js");
-/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.symbol.js */ "./node_modules/core-js/modules/es.symbol.js");
-/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.array.filter.js */ "./node_modules/core-js/modules/es.array.filter.js");
-/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
-/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptor.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptor.js");
-/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "./node_modules/core-js/modules/web.dom-collections.for-each.js");
-/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptors.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptors.js");
-/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_10__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_11__);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_12__);
-/* harmony import */ var _config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../config-provider/ConfigContext */ "./components/config-provider/ConfigContext.tsx");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../_utils */ "./components/_utils/index.ts");
-/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../index */ "./components/index.tsx");
-/* harmony import */ var _utils_usePopper__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../_utils/usePopper */ "./components/_utils/usePopper.tsx");
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js");
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.array.concat.js */ "./node_modules/core-js/modules/es.array.concat.js");
+/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.array.map.js */ "./node_modules/core-js/modules/es.array.map.js");
+/* harmony import */ var core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.object.keys.js */ "./node_modules/core-js/modules/es.object.keys.js");
+/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.symbol.js */ "./node_modules/core-js/modules/es.symbol.js");
+/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/es.array.filter.js */ "./node_modules/core-js/modules/es.array.filter.js");
+/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptor.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptor.js");
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "./node_modules/core-js/modules/web.dom-collections.for-each.js");
+/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_10__);
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptors.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptors.js");
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_11__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_12__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_13__);
+/* harmony import */ var _config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../config-provider/ConfigContext */ "./components/config-provider/ConfigContext.tsx");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../_utils */ "./components/_utils/index.ts");
+/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../index */ "./components/index.tsx");
 /* harmony import */ var _utils_react_children__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../_utils/react-children */ "./components/_utils/react-children.ts");
 /* harmony import */ var _utils_type__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../_utils/type */ "./components/_utils/type.ts");
+/* harmony import */ var _popper__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../popper */ "./components/popper/index.tsx");
+
 
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 
 
@@ -5805,11 +5808,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var ButtonGroupTypes = Object(_utils_type__WEBPACK_IMPORTED_MODULE_18__["tuple"])('basic', 'similar');
 var InternalButtonGroup = function InternalButtonGroup(props, ref) {
-  var _useContext = Object(react__WEBPACK_IMPORTED_MODULE_11__["useContext"])(_config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_13__["default"]),
+  var _useContext = Object(react__WEBPACK_IMPORTED_MODULE_12__["useContext"])(_config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_14__["default"]),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
     userDefaultProps = _useContext.compDefaultProps;
-  var buttonGoupProps = Object(_utils__WEBPACK_IMPORTED_MODULE_14__["getCompProps"])('ButtonGroup', userDefaultProps, props);
+  var buttonGoupProps = Object(_utils__WEBPACK_IMPORTED_MODULE_15__["getCompProps"])('ButtonGroup', userDefaultProps, props);
   var style = buttonGoupProps.style,
     className = buttonGoupProps.className,
     children = buttonGoupProps.children,
@@ -5824,68 +5827,68 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
     disabled = buttonGoupProps.disabled,
     onVisibleChange = buttonGoupProps.onVisibleChange,
     loading = buttonGoupProps.loading;
-  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(false),
-    _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState, 2),
+  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_12__["useState"])(false),
+    _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2___default()(_useState, 2),
     optionShow = _useState2[0],
     setOptionShow = _useState2[1]; // 下拉列表是否展示
 
-  var refBtnGroup = react__WEBPACK_IMPORTED_MODULE_11___default.a.useRef(null) || ref;
-  var triggerRef = react__WEBPACK_IMPORTED_MODULE_11___default.a.useRef(null);
+  var refBtnGroup = ref || /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createRef();
+  var triggerRef = react__WEBPACK_IMPORTED_MODULE_12___default.a.useRef(null);
   var isBsicType = type === 'basic';
   var btnGroupPrefixCls = getPrefixCls(prefixCls, 'btn-group', customPrefixcls);
-  var btnGroupClasses = classnames__WEBPACK_IMPORTED_MODULE_12___default()("".concat(btnGroupPrefixCls), className, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, "".concat(btnGroupPrefixCls, "-").concat(type), type));
-  var renderTriggerButton = Object(react__WEBPACK_IMPORTED_MODULE_11__["useCallback"])(function () {
+  var btnGroupClasses = classnames__WEBPACK_IMPORTED_MODULE_13___default()("".concat(btnGroupPrefixCls), className, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()({}, "".concat(btnGroupPrefixCls, "-").concat(type), type));
+  var renderTriggerButton = Object(react__WEBPACK_IMPORTED_MODULE_12__["useCallback"])(function () {
     var _toArray = Object(_utils_react_children__WEBPACK_IMPORTED_MODULE_17__["toArray"])(icon),
-      _toArray2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_toArray, 2),
+      _toArray2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2___default()(_toArray, 2),
       _toArray2$ = _toArray2[0],
-      iconUp = _toArray2$ === void 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_15__["Icon"], {
+      iconUp = _toArray2$ === void 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_16__["Icon"], {
         type: "arrow-up"
       }) : _toArray2$,
       _toArray2$2 = _toArray2[1],
-      iconDown = _toArray2$2 === void 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_15__["Icon"], {
+      iconDown = _toArray2$2 === void 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_16__["Icon"], {
         type: "arrow-down"
       }) : _toArray2$2;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("div", {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div", {
       style: style,
       className: btnGroupClasses,
       ref: refBtnGroup
-    }, isBsicType && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_15__["Button"], {
+    }, isBsicType && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_16__["Button"], {
       type: buttonType,
       size: size,
       disabled: disabled,
       loading: loading
-    }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("span", {
+    }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("span", {
       className: "".concat(btnGroupPrefixCls, "-basic-icon")
-    }, optionShow ? iconUp : iconDown)), !isBsicType && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_15__["Button"], {
+    }, optionShow ? iconUp : iconDown)), !isBsicType && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_16__["Button"], {
       type: buttonType,
       size: size,
       disabled: disabled,
       onClick: onClick,
       loading: loading
-    }, children), !isBsicType && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("span", {
+    }, children), !isBsicType && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("span", {
       className: "".concat(btnGroupPrefixCls, "-trigger"),
       ref: triggerRef
-    }, optionShow ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_15__["Button"], {
+    }, optionShow ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_16__["Button"], {
       icon: iconUp,
       type: buttonType,
       size: size,
       disabled: disabled
-    }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_15__["Button"], {
+    }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_16__["Button"], {
       icon: iconDown,
       type: buttonType,
       size: size,
       disabled: disabled
     })));
   }, [icon, btnGroupPrefixCls, style, btnGroupClasses, refBtnGroup, isBsicType, buttonType, disabled, children, optionShow, onClick, size]);
-  var handleItemClick = Object(react__WEBPACK_IMPORTED_MODULE_11__["useCallback"])(function (data) {
+  var handleItemClick = Object(react__WEBPACK_IMPORTED_MODULE_12__["useCallback"])(function (data) {
     onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(data);
     setOptionShow(false);
   }, [onItemClick]);
-  var renderContent = Object(react__WEBPACK_IMPORTED_MODULE_11__["useCallback"])(function () {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("div", {
+  var renderContent = Object(react__WEBPACK_IMPORTED_MODULE_12__["useCallback"])(function () {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div", {
       className: "".concat(btnGroupPrefixCls, "-dropdown")
     }, (overlay || []).map(function (item) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("div", {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div", {
         key: item.value,
         className: "".concat(btnGroupPrefixCls, "-dropdown-item"),
         onClick: function onClick() {
@@ -5911,9 +5914,11 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
       return isBsicType ? locatorNode : triggerRef.current;
     }
   });
-  return Object(_utils_usePopper__WEBPACK_IMPORTED_MODULE_16__["default"])(renderTriggerButton(), renderContent(), popperProps);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_popper__WEBPACK_IMPORTED_MODULE_19__["default"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
+    tip: renderContent()
+  }, popperProps), renderTriggerButton());
 };
-var ButtonGroup = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.forwardRef(InternalButtonGroup);
+var ButtonGroup = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.forwardRef(InternalButtonGroup);
 ButtonGroup.displayName = 'ButtonGroup';
 /* harmony default export */ __webpack_exports__["default"] = (ButtonGroup);
 
@@ -8700,6 +8705,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     defaultVisible: optionShow,
     visible: optionShow,
     onVisibleChange: handleVisibleChange,
+    clickToClose: !searchValue,
     onTransitionEnd: function onTransitionEnd() {
       if (optionShow === false) {
         handleClear();
@@ -9705,37 +9711,72 @@ __webpack_require__.r(__webpack_exports__);
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.regexp.exec.js */ "./node_modules/core-js/modules/es.regexp.exec.js");
-/* harmony import */ var core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var core_js_modules_es_string_replace_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.string.replace.js */ "./node_modules/core-js/modules/es.string.replace.js");
-/* harmony import */ var core_js_modules_es_string_replace_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_replace_js__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var core_js_modules_es_number_to_fixed_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.number.to-fixed.js */ "./node_modules/core-js/modules/es.number.to-fixed.js");
-/* harmony import */ var core_js_modules_es_number_to_fixed_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_number_to_fixed_js__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
-/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var core_js_modules_es_function_name_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.function.name.js */ "./node_modules/core-js/modules/es.function.name.js");
-/* harmony import */ var core_js_modules_es_function_name_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_function_name_js__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.array.map.js */ "./node_modules/core-js/modules/es.array.map.js");
-/* harmony import */ var core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../index */ "./components/index.tsx");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var _config_provider__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../config-provider */ "./components/config-provider/index.tsx");
-/* harmony import */ var _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./constant/systemPresetColor */ "./components/color-picker/constant/systemPresetColor.ts");
-/* harmony import */ var _utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./utils/colorFormat */ "./components/color-picker/utils/colorFormat.ts");
-/* harmony import */ var _constant_defaultColor__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./constant/defaultColor */ "./components/color-picker/constant/defaultColor.ts");
-/* harmony import */ var _utils_validateColor__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./utils/validateColor */ "./components/color-picker/utils/validateColor.ts");
-/* harmony import */ var _utils_convertLetters__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./utils/convertLetters */ "./components/color-picker/utils/convertLetters.ts");
-/* harmony import */ var color__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! color */ "./node_modules/color/index.js");
-/* harmony import */ var color__WEBPACK_IMPORTED_MODULE_16___default = /*#__PURE__*/__webpack_require__.n(color__WEBPACK_IMPORTED_MODULE_16__);
-/* harmony import */ var react_color__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! react-color */ "./node_modules/react-color/es/index.js");
-/* harmony import */ var _utils_devwarning__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../_utils/devwarning */ "./components/_utils/devwarning.ts");
-/* harmony import */ var _utils_hooks__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../_utils/hooks */ "./components/_utils/hooks.tsx");
-/* harmony import */ var _utils_ieUtil__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../_utils/ieUtil */ "./components/_utils/ieUtil.ts");
+/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.object.keys.js */ "./node_modules/core-js/modules/es.object.keys.js");
+/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.symbol.js */ "./node_modules/core-js/modules/es.symbol.js");
+/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptor.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptor.js");
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "./node_modules/core-js/modules/web.dom-collections.for-each.js");
+/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptors.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptors.js");
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var core_js_modules_es_array_find_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/es.array.find.js */ "./node_modules/core-js/modules/es.array.find.js");
+/* harmony import */ var core_js_modules_es_array_find_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_find_js__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! core-js/modules/es.regexp.exec.js */ "./node_modules/core-js/modules/es.regexp.exec.js");
+/* harmony import */ var core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var core_js_modules_es_string_replace_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! core-js/modules/es.string.replace.js */ "./node_modules/core-js/modules/es.string.replace.js");
+/* harmony import */ var core_js_modules_es_string_replace_js__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_replace_js__WEBPACK_IMPORTED_MODULE_10__);
+/* harmony import */ var core_js_modules_es_array_join_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! core-js/modules/es.array.join.js */ "./node_modules/core-js/modules/es.array.join.js");
+/* harmony import */ var core_js_modules_es_array_join_js__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_join_js__WEBPACK_IMPORTED_MODULE_11__);
+/* harmony import */ var core_js_modules_es_regexp_to_string_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! core-js/modules/es.regexp.to-string.js */ "./node_modules/core-js/modules/es.regexp.to-string.js");
+/* harmony import */ var core_js_modules_es_regexp_to_string_js__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_to_string_js__WEBPACK_IMPORTED_MODULE_12__);
+/* harmony import */ var core_js_modules_es_number_to_fixed_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! core-js/modules/es.number.to-fixed.js */ "./node_modules/core-js/modules/es.number.to-fixed.js");
+/* harmony import */ var core_js_modules_es_number_to_fixed_js__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_number_to_fixed_js__WEBPACK_IMPORTED_MODULE_13__);
+/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! core-js/modules/es.array.filter.js */ "./node_modules/core-js/modules/es.array.filter.js");
+/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_14__);
+/* harmony import */ var core_js_modules_es_function_name_js__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! core-js/modules/es.function.name.js */ "./node_modules/core-js/modules/es.function.name.js");
+/* harmony import */ var core_js_modules_es_function_name_js__WEBPACK_IMPORTED_MODULE_15___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_function_name_js__WEBPACK_IMPORTED_MODULE_15__);
+/* harmony import */ var core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! core-js/modules/es.array.map.js */ "./node_modules/core-js/modules/es.array.map.js");
+/* harmony import */ var core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_16___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_16__);
+/* harmony import */ var core_js_modules_es_array_fill_js__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! core-js/modules/es.array.fill.js */ "./node_modules/core-js/modules/es.array.fill.js");
+/* harmony import */ var core_js_modules_es_array_fill_js__WEBPACK_IMPORTED_MODULE_17___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_fill_js__WEBPACK_IMPORTED_MODULE_17__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_18___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_18__);
+/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../index */ "./components/index.tsx");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_20___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_20__);
+/* harmony import */ var _config_provider__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../config-provider */ "./components/config-provider/index.tsx");
+/* harmony import */ var _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./constant/systemPresetColor */ "./components/color-picker/constant/systemPresetColor.ts");
+/* harmony import */ var _utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./utils/colorFormat */ "./components/color-picker/utils/colorFormat.ts");
+/* harmony import */ var _constant_defaultColor__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./constant/defaultColor */ "./components/color-picker/constant/defaultColor.ts");
+/* harmony import */ var _utils_validateColor__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./utils/validateColor */ "./components/color-picker/utils/validateColor.ts");
+/* harmony import */ var _utils_convertLetters__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./utils/convertLetters */ "./components/color-picker/utils/convertLetters.ts");
+/* harmony import */ var color__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! color */ "./node_modules/color/index.js");
+/* harmony import */ var color__WEBPACK_IMPORTED_MODULE_27___default = /*#__PURE__*/__webpack_require__.n(color__WEBPACK_IMPORTED_MODULE_27__);
+/* harmony import */ var react_color__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! react-color */ "./node_modules/react-color/es/index.js");
+/* harmony import */ var _utils_devwarning__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../_utils/devwarning */ "./components/_utils/devwarning.ts");
+/* harmony import */ var _utils_hooks__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../_utils/hooks */ "./components/_utils/hooks.tsx");
+/* harmony import */ var _utils_ieUtil__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../_utils/ieUtil */ "./components/_utils/ieUtil.ts");
+
+
+
+
+
+
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+
+
+
 
 
 
@@ -9759,13 +9800,16 @@ __webpack_require__.r(__webpack_exports__);
 
 
 var ColorPickerPanel = function ColorPickerPanel(props) {
-  var _classNames, _classNames2;
+  var _classNames;
   var setCorrectColorValue = props.setCorrectColorValue,
+    setInputCorrectColorValue = props.setInputCorrectColorValue,
     setInputColorValue = props.setInputColorValue,
     setAlpha = props.setAlpha,
     setAlphaNoVerifyVal = props.setAlphaNoVerifyVal,
     setIsFollow = props.setIsFollow,
-    setClickedColorIndex = props.setClickedColorIndex,
+    setClickedPresetColorIndex = props.setClickedPresetColorIndex,
+    setClickedHistoricalColorIndex = props.setClickedHistoricalColorIndex,
+    setClickColorIndex = props.setClickColorIndex,
     setShowPanel = props.setShowPanel,
     setColTypeArr = props.setColTypeArr,
     setCurrentColorType = props.setCurrentColorType,
@@ -9773,94 +9817,165 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     onVisibleChange = props.onVisibleChange,
     alpha = props.alpha,
     alphaNoVerifyVal = props.alphaNoVerifyVal,
-    clickedColorIndex = props.clickedColorIndex,
+    clickedPresetColorIndex = props.clickedPresetColorIndex,
+    clickedHistoricalColorIndex = props.clickedHistoricalColorIndex,
     colTypeArr = props.colTypeArr,
     correctColorValue = props.correctColorValue,
+    inputCorrectColorValue = props.inputCorrectColorValue,
     currentColorType = props.currentColorType,
     functionalColor = props.functionalColor,
     functionalColorName = props.functionalColorName,
     switchName = props.switchName,
     inputRef = props.inputRef,
     isFollow = props.isFollow,
+    panelFormatConfig = props.panelFormatConfig,
+    format = props.format,
     presetColor = props.presetColor,
+    historicalColor = props.historicalColor,
+    showClear = props.showClear,
     showSwitch = props.showSwitch,
     showColorTransfer = props.showColorTransfer,
     showPresetColor = props.showPresetColor,
     showColorPickerBox = props.showColorPickerBox,
     showColorPickerPanel = props.showColorPickerPanel,
+    showAlphaInput = props.showAlphaInput,
     value = props.value,
     visible = props.visible,
     showPanel = props.showPanel;
-  var panelInputRef = Object(react__WEBPACK_IMPORTED_MODULE_7__["useRef"])(null);
-  var panelClsRef = Object(react__WEBPACK_IMPORTED_MODULE_7__["useRef"])(null);
-  var Option = _index__WEBPACK_IMPORTED_MODULE_8__["Select"].Option;
-  var _useContext = Object(react__WEBPACK_IMPORTED_MODULE_7__["useContext"])(_config_provider__WEBPACK_IMPORTED_MODULE_10__["ConfigContext"]),
+  var panelSelectRef = Object(react__WEBPACK_IMPORTED_MODULE_18__["useRef"])(null);
+  var panelClsRef = Object(react__WEBPACK_IMPORTED_MODULE_18__["useRef"])(null);
+  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_18__["useState"])(panelFormatConfig),
+    _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState, 2),
+    innerFormatConfig = _useState2[0],
+    setInnerFormatConfig = _useState2[1];
+  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_18__["useState"])(),
+    _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState3, 2),
+    activeGroupInptItem = _useState4[0],
+    setActiveGroupInptItem = _useState4[1];
+  var baseFormat = ['HEX', 'HSB', 'RGB', 'HSL'];
+  var Option = _index__WEBPACK_IMPORTED_MODULE_19__["Select"].Option;
+  var _useContext = Object(react__WEBPACK_IMPORTED_MODULE_18__["useContext"])(_config_provider__WEBPACK_IMPORTED_MODULE_21__["ConfigContext"]),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
     locale = _useContext.locale;
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
-  var panelCls = classnames__WEBPACK_IMPORTED_MODULE_9___default()("".concat(colorPickerPrefixCls, "-panel"));
-  var panelChromePickerCls = classnames__WEBPACK_IMPORTED_MODULE_9___default()("".concat(colorPickerPrefixCls, "-panel-chrome"), (_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-box"), !(showColorPickerBox !== null && showColorPickerBox !== void 0 && showColorPickerBox.showBox)), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-hue"), !(showColorPickerBox !== null && showColorPickerBox !== void 0 && showColorPickerBox.showHue)), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-opacity"), !(showColorPickerBox !== null && showColorPickerBox !== void 0 && showColorPickerBox.showOpacity)), _classNames));
-  var panelFollowThemeCls = classnames__WEBPACK_IMPORTED_MODULE_9___default()("".concat(colorPickerPrefixCls, "-panel-switch"));
-  var panelContainerCls = classnames__WEBPACK_IMPORTED_MODULE_9___default()("".concat(colorPickerPrefixCls, "-panel-container"));
-  var panelInputCls = classnames__WEBPACK_IMPORTED_MODULE_9___default()("".concat(colorPickerPrefixCls, "-panel-container-input"));
-  var transparentCls = classnames__WEBPACK_IMPORTED_MODULE_9___default()("".concat(colorPickerPrefixCls, "-panel-container-transparent"));
-  var colorDivContainerCls = classnames__WEBPACK_IMPORTED_MODULE_9___default()("".concat(colorPickerPrefixCls, "-panel-colorDivContainer"), (_classNames2 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames2, "".concat(colorPickerPrefixCls, "-panel-colorDivContainer-unset-color"), (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) === 0), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames2, "".concat(colorPickerPrefixCls, "-panel-colorDivContainer-ie11"), _utils_ieUtil__WEBPACK_IMPORTED_MODULE_20__["isIE"]), _classNames2));
-  var colorLiClick = function colorLiClick(index, colorValue) {
-    var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["colorFormat"])(colorValue, alpha);
-    var formatValue = Object(_utils_convertLetters__WEBPACK_IMPORTED_MODULE_15__["toLowerCase"])(formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["valOfCorrespondingType"])(currentColorType)].value);
-    setIsFollow(false);
-    if (isFollow) {
-      setAlpha(1);
-      setAlphaNoVerifyVal(100 + '%');
-    }
-    if (value === undefined) {
-      setInputColorValue(formatValue);
-      setCorrectColorValue(formatValue);
-      setColTypeArr(formatArr);
-    }
-    setClickedColorIndex(index);
-    onChange && onChange(formatValue, formatArr);
-  };
-  var handleTypeChange = function handleTypeChange(selectValue, option) {
-    setCurrentColorType(option.label);
-    if (value === undefined) {
-      setCorrectColorValue(selectValue);
-      setInputColorValue(selectValue);
-    }
-    onChange && onChange(selectValue, colTypeArr);
+  var panelCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel"));
+  var panelChromePickerCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-chrome"), (_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-box"), !(showColorPickerBox !== null && showColorPickerBox !== void 0 && showColorPickerBox.showBox)), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-hue"), !(showColorPickerBox !== null && showColorPickerBox !== void 0 && showColorPickerBox.showHue)), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-opacity"), !(showColorPickerBox !== null && showColorPickerBox !== void 0 && showColorPickerBox.showOpacity)), _classNames));
+  var panelClearColor = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-clear"));
+  var panelClearColorBox = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-clear-box"));
+  var panelClearColorText = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-clear-text"));
+  var panelFollowThemeCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-switch"));
+  var panelContainerCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-container"));
+  var panelselectCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-container-select"));
+  var panelInputCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-container-input"));
+  var panelInputGroupCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-container-input-group"));
+  var gePanelInputGroupItemCls = function gePanelInputGroupItemCls(order) {
+    return classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-container-input-group-item"), {
+      active: activeGroupInptItem === order && order === 1
+    });
   };
+  var transparentCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-container-transparent"));
+  var colorBoxCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-color-box"), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()({}, "".concat(colorPickerPrefixCls, "-panel-color-box-container-ie11"), _utils_ieUtil__WEBPACK_IMPORTED_MODULE_31__["isIE"]));
+  var colorBoxTitleCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-color-box-title"));
+  var colorBoxContainerCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-color-box-container"));
+  var historicalColorBoxCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-historical-color-box"), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()({}, "".concat(colorPickerPrefixCls, "-panel-historical-color-box-container-ie11"), _utils_ieUtil__WEBPACK_IMPORTED_MODULE_31__["isIE"]));
+  var historicalColorBoxTitleCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-historical-color-box-title"));
+  var historicalColorBoxContainerCls = classnames__WEBPACK_IMPORTED_MODULE_20___default()("".concat(colorPickerPrefixCls, "-panel-historical-color-box-container"));
   var setPanelState = function setPanelState(formatArr, correctColorValue, inputColorValue, alpha, alphaStr) {
     setColTypeArr(formatArr);
     setCorrectColorValue(correctColorValue);
+    setInputCorrectColorValue(inputColorValue);
     setInputColorValue(inputColorValue);
     alpha && setAlpha(alpha);
     alphaStr && setAlphaNoVerifyVal(alphaStr);
   };
+  var handleClearClick = function handleClearClick() {
+    var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(_constant_defaultColor__WEBPACK_IMPORTED_MODULE_24__["defaultSystemColor"], 0);
+    setPanelState(formatArr, _constant_defaultColor__WEBPACK_IMPORTED_MODULE_24__["defaultSystemColor"], '', 0, '0%');
+    setClickColorIndex(-1);
+    onChange === null || onChange === void 0 ? void 0 : onChange('', formatArr);
+  };
+  var presetColorClick = function presetColorClick(index, colorValue) {
+    var colorLiAlpha = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["strFixed"])(color__WEBPACK_IMPORTED_MODULE_27___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["getColorObj"])(colorValue)).alpha(), 2);
+    var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(colorValue, colorLiAlpha);
+    var formatCorrectValue = removeTransparency(colorValue);
+    var formatInputValue = Object(_utils_convertLetters__WEBPACK_IMPORTED_MODULE_26__["toUpCase"])(formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["valOfCorrespondingType"])(format)].value);
+    setIsFollow(false);
+    setAlpha(isFollow ? 1 : colorLiAlpha);
+    setAlphaNoVerifyVal(isFollow ? 100 + '%' : colorLiAlpha * 100 + '%');
+    if (value === undefined) {
+      setInputColorValue(formatInputValue);
+      setCorrectColorValue(formatCorrectValue);
+      setColTypeArr(formatArr);
+    }
+    setClickedPresetColorIndex(index);
+    onChange === null || onChange === void 0 ? void 0 : onChange(formatInputValue, formatArr);
+  };
+  var historicalColorClick = function historicalColorClick(index, colorValue) {
+    var colorLiAlpha = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["strFixed"])(color__WEBPACK_IMPORTED_MODULE_27___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["getColorObj"])(colorValue)).alpha(), 2);
+    var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(colorValue, colorLiAlpha);
+    var formatCorrectValue = removeTransparency(colorValue);
+    var formatInputValue = Object(_utils_convertLetters__WEBPACK_IMPORTED_MODULE_26__["toUpCase"])(formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["valOfCorrespondingType"])(format)].value);
+    setIsFollow(false);
+    setAlpha(isFollow ? 1 : colorLiAlpha);
+    setAlphaNoVerifyVal(isFollow ? 100 + '%' : colorLiAlpha * 100 + '%');
+    if (value === undefined) {
+      setInputColorValue(formatInputValue);
+      setCorrectColorValue(formatCorrectValue);
+      setColTypeArr(formatArr);
+    }
+    setClickedHistoricalColorIndex(index);
+    onChange === null || onChange === void 0 ? void 0 : onChange(formatInputValue, formatArr);
+  };
+  var handleTypeChange = function handleTypeChange(selectValue) {
+    var _colTypeArr$find, _colTypeArr$find2, _colTypeArr$find3;
+    setCurrentColorType(selectValue);
+    var colorStr = (_colTypeArr$find = colTypeArr.find(function (item) {
+      return item.type === selectValue;
+    })) === null || _colTypeArr$find === void 0 ? void 0 : _colTypeArr$find.value;
+    setCorrectColorValue(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(colorStr, 1, selectValue, true));
+    setInputColorValue((_colTypeArr$find2 = colTypeArr.find(function (item) {
+      return item.type === format;
+    })) === null || _colTypeArr$find2 === void 0 ? void 0 : _colTypeArr$find2.value);
+    onChange === null || onChange === void 0 ? void 0 : onChange((_colTypeArr$find3 = colTypeArr.find(function (item) {
+      return item.type === format;
+    })) === null || _colTypeArr$find3 === void 0 ? void 0 : _colTypeArr$find3.value, colTypeArr);
+  };
+  var removeTransparency = function removeTransparency(color) {
+    return Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(color, 1, currentColorType, true);
+  };
   var handleAlphaChange = function handleAlphaChange(e) {
     var regPercentage = /^(0|[1-9][0-9]?|100)%$/;
     var regDot = /^(0(\.\d+)?|1(\.0+)?)$/;
     var val = e.target.value;
-    var formatArr, outValue;
+    var getColorFormat = function getColorFormat(alpha) {
+      var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(correctColorValue, alpha, 'all', true);
+      var outValue = formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["valOfCorrespondingType"])(format)].value;
+      var innerInput = removeTransparency(outValue);
+      return {
+        formatArr: formatArr,
+        outValue: outValue,
+        innerInput: innerInput
+      };
+    };
+    var alphaValue;
+    if (regPercentage.test(val)) {
+      alphaValue = +val.replace('%', '') / 100;
+    } else if (regDot.test(val)) {
+      alphaValue = +val;
+    } else {
+      alphaValue = 1;
+    }
+    var _getColorFormat = getColorFormat(alphaValue),
+      formatArr = _getColorFormat.formatArr,
+      outValue = _getColorFormat.outValue,
+      innerInput = _getColorFormat.innerInput;
     if (value === undefined) {
-      setAlphaNoVerifyVal(e.target.value);
-      if (regPercentage.test(val)) {
-        formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["colorFormat"])(correctColorValue, +val.replace('%', '') / 100, 'all', true);
-        outValue = formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["valOfCorrespondingType"])(currentColorType)].value;
-        setPanelState(formatArr, outValue, outValue, +val.replace('%', '') / 100);
-        setClickedColorIndex(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["highlightPresetColorIndex"])(formatArr[0].value, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["presetColorToHEX"])(presetColor || _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_11__["systemPresetColor"])));
-      } else if (regDot.test(val)) {
-        formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["colorFormat"])(correctColorValue, +val, 'all', true);
-        outValue = formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["valOfCorrespondingType"])(currentColorType)].value;
-        setPanelState(formatArr, outValue, outValue, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["strFixed"])(val, 2));
-        setClickedColorIndex(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["highlightPresetColorIndex"])(formatArr[0].value, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["presetColorToHEX"])(presetColor || _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_11__["systemPresetColor"])));
-      } else {
-        formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["colorFormat"])(correctColorValue, 1, 'all', true);
-        outValue = formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["valOfCorrespondingType"])(currentColorType)].value;
-        setPanelState(formatArr, outValue, outValue, 1);
-      }
-      onChange && onChange(outValue, formatArr);
+      setAlphaNoVerifyVal(val);
+      setPanelState(formatArr, innerInput, outValue, alphaValue);
+      setClickColorIndex(formatArr[0].value);
     }
+    onChange === null || onChange === void 0 ? void 0 : onChange(outValue, formatArr);
   };
   var handleAlphaBlur = function handleAlphaBlur(e) {
     var regPercentage = /^(0|[1-9][0-9]?|100)%$/;
@@ -9869,121 +9984,302 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     if (regPercentage.test(val)) {
       setAlphaNoVerifyVal(val);
     } else if (regDot.test(val)) {
-      setAlphaNoVerifyVal(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["strFixed"])(+val * 100) + '%');
+      setAlphaNoVerifyVal(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["strFixed"])(+val * 100) + '%');
     } else {
       setAlphaNoVerifyVal('100%');
     }
   };
+  var handleHEXInputChange = function handleHEXInputChange(e) {
+    setCorrectColorValue(e.target.value);
+  };
+  var handleHEXInputBlur = function handleHEXInputBlur(e) {
+    var _colTypeArr$find4;
+    var val = e.target.value;
+    var correctColor = (_colTypeArr$find4 = colTypeArr.find(function (item) {
+      return item.type === format;
+    })) === null || _colTypeArr$find4 === void 0 ? void 0 : _colTypeArr$find4.value;
+    if (Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_25__["validateColor"])(val)) {
+      var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(val, inputCorrectColorValue ? alpha : 1, 'all', true);
+      var outValue = formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["valOfCorrespondingType"])(format)].value;
+      if (value === undefined) {
+        var innerInput = removeTransparency(val);
+        if (!inputCorrectColorValue) {
+          setPanelState(formatArr, innerInput, outValue, 1, '100%');
+        } else {
+          setPanelState(formatArr, innerInput, outValue);
+        }
+      } else if (onChange === undefined) {
+        setPanelState(colTypeArr, removeTransparency(correctColor), correctColor);
+      }
+      onChange === null || onChange === void 0 ? void 0 : onChange(outValue, formatArr);
+    } else {
+      if (!inputCorrectColorValue) {
+        var _formatArr$find;
+        var _formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(correctColor, 1, 'all', true);
+        setPanelState(_formatArr, removeTransparency(correctColor), correctColor, 1, '100%');
+        onChange === null || onChange === void 0 ? void 0 : onChange((_formatArr$find = _formatArr.find(function (item) {
+          return item.type === format;
+        })) === null || _formatArr$find === void 0 ? void 0 : _formatArr$find.value, _formatArr);
+      } else {
+        var _colTypeArr$find5;
+        setPanelState(colTypeArr, removeTransparency(correctColor), correctColor);
+        onChange === null || onChange === void 0 ? void 0 : onChange((_colTypeArr$find5 = colTypeArr.find(function (item) {
+          return item.type === format;
+        })) === null || _colTypeArr$find5 === void 0 ? void 0 : _colTypeArr$find5.value, colTypeArr);
+      }
+    }
+  };
+  var handleInputGroupItemFocus = function handleInputGroupItemFocus(order) {
+    setActiveGroupInptItem(order);
+  };
+  var handleInputGroupItemBlur = function handleInputGroupItemBlur() {
+    var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(correctColorValue, inputCorrectColorValue ? alpha : 1, 'all', true);
+    var outValue = formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["valOfCorrespondingType"])(format)].value;
+    if (value === undefined) {
+      if (inputCorrectColorValue) {
+        setPanelState(formatArr, correctColorValue, outValue);
+      } else {
+        setPanelState(formatArr, correctColorValue, outValue, 1, '100%');
+      }
+    } else if (onChange === undefined) {
+      var _colTypeArr$find6;
+      var correctColor = (_colTypeArr$find6 = colTypeArr.find(function (item) {
+        return item.type === format;
+      })) === null || _colTypeArr$find6 === void 0 ? void 0 : _colTypeArr$find6.value;
+      setPanelState(colTypeArr, removeTransparency(correctColor), correctColor);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(outValue, formatArr);
+  };
+  var handleInputGroupItemChange = function handleInputGroupItemChange(e, color, i) {
+    var number = e.target.value;
+    if (!/^\d*$/.test(number)) return;
+    var colorArr = color__WEBPACK_IMPORTED_MODULE_27___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["getColorObj"])(color)).color;
+    var colorComponents = {
+      HSB: ['h', 's', 'v'],
+      HSL: ['h', 's', 'l'],
+      RGB: ['r', 'g', 'b']
+    };
+    var methodName = colorComponents[currentColorType].join('');
+    var getColorAttr = function getColorAttr() {
+      var selectedComponents = colorComponents[currentColorType];
+      if (!selectedComponents) {
+        return;
+      }
+      return selectedComponents.reduce(function (acc, component, index) {
+        acc[component] = i === index ? number : colorArr[index];
+        return acc;
+      }, {});
+    };
+    var getColorValue = function getColorValue() {
+      var colorObj = color__WEBPACK_IMPORTED_MODULE_27___default()(getColorAttr())[methodName]();
+      if (currentColorType === 'RGB') {
+        return colorObj.toString();
+      }
+      return Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorToStr"])(colorObj);
+    };
+    setCorrectColorValue(getColorValue());
+  };
+  var getColorNumberVal = function getColorNumberVal(color, i) {
+    var colorArr = color__WEBPACK_IMPORTED_MODULE_27___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["getColorObj"])(color)).color;
+    return colorArr[i];
+  };
   var handleSwitchChange = function handleSwitchChange(switchValue) {
     var formatArr;
     if (functionalColor) {
-      var inputValType = Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_14__["validateColor"])(functionalColor);
+      var inputValType = Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_25__["validateColor"])(functionalColor);
       if (inputValType) {
         if (value === undefined) {
           setIsFollow(switchValue);
           if (switchValue) {
-            formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["colorFormat"])(functionalColor, alpha);
-            setPanelState(formatArr, formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["valOfCorrespondingType"])(currentColorType)].value, functionalColorName, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["strFixed"])(color__WEBPACK_IMPORTED_MODULE_16___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["getColorObj"])(functionalColor)).alpha(), 2), Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["strFixed"])(color__WEBPACK_IMPORTED_MODULE_16___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["getColorObj"])(functionalColor)).alpha(), 2) * 100 + '%');
-            setClickedColorIndex(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["highlightPresetColorIndex"])(formatArr[0].value, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["presetColorToHEX"])(presetColor || _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_11__["systemPresetColor"])));
+            formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(functionalColor, alpha);
+            setPanelState(formatArr, removeTransparency(formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["valOfCorrespondingType"])(currentColorType)].value), functionalColorName, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["strFixed"])(color__WEBPACK_IMPORTED_MODULE_27___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["getColorObj"])(functionalColor)).alpha(), 2), Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["strFixed"])(color__WEBPACK_IMPORTED_MODULE_27___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["getColorObj"])(functionalColor)).alpha(), 2) * 100 + '%');
+            setClickColorIndex(formatArr[0].value);
           } else {
-            formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["colorFormat"])(_constant_defaultColor__WEBPACK_IMPORTED_MODULE_13__["defaultSystemColor"], 1, 'all', true);
-            setPanelState(formatArr, _constant_defaultColor__WEBPACK_IMPORTED_MODULE_13__["defaultSystemColor"], '', 1, 100 + '%');
-            setClickedColorIndex(-1);
+            // formatArr = colorFormat(correctColorValue, alpha, 'all', true) as IColorTypesObj[]
+            // setPanelState(
+            //   formatArr,
+            //   correctColorValue,
+            //   formatArr[valOfCorrespondingType(format) as number].value,
+            //   alpha,
+            //   alpha * 100 + '%',
+            // )
+            formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(_constant_defaultColor__WEBPACK_IMPORTED_MODULE_24__["defaultSystemColor"], 1, 'all', true);
+            setPanelState(formatArr, _constant_defaultColor__WEBPACK_IMPORTED_MODULE_24__["defaultSystemColor"], '', 1, 100 + '%');
+            setClickColorIndex(formatArr[0].value);
           }
         }
       }
-      Object(_utils_devwarning__WEBPACK_IMPORTED_MODULE_18__["default"])(!inputValType, 'color-picker', "'themeColor' must be hexadecimal, RGB, HSB, HSL or English color name");
+      Object(_utils_devwarning__WEBPACK_IMPORTED_MODULE_29__["default"])(!inputValType, 'color-picker', "'themeColor' must be hexadecimal, RGB, HSB, HSL or English color name");
     }
     if (switchValue) {
-      onChange && onChange(functionalColorName, formatArr);
+      onChange === null || onChange === void 0 ? void 0 : onChange(functionalColorName, formatArr);
     } else {
-      onChange && onChange(_constant_defaultColor__WEBPACK_IMPORTED_MODULE_13__["defaultSystemColor"], formatArr);
+      onChange === null || onChange === void 0 ? void 0 : onChange(_constant_defaultColor__WEBPACK_IMPORTED_MODULE_24__["defaultSystemColor"], formatArr);
     }
   };
   var handleChromeChange = function handleChromeChange(color) {
-    var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["colorFormat"])(color.hex, color.rgb.a);
-    var colorObj = formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["valOfCorrespondingType"])(currentColorType)];
+    var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(color.hex, inputCorrectColorValue ? color.rgb.a : 1);
+    var colorObj = formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["valOfCorrespondingType"])(currentColorType)];
+    console.log('colorObj', formatArr, colorObj);
     if (value === undefined) {
       setIsFollow(false);
-      setPanelState(formatArr, colorObj.value, colorObj.value, color.rgb.a, (color.rgb.a * 100).toFixed() + '%');
-      setClickedColorIndex(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["highlightPresetColorIndex"])(formatArr[0].value, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["presetColorToHEX"])(presetColor || _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_11__["systemPresetColor"])));
+      setPanelState(formatArr, removeTransparency(colorObj.value), colorObj.value, inputCorrectColorValue ? color.rgb.a : 1, inputCorrectColorValue ? (color.rgb.a * 100).toFixed() + '%' : '100%');
+      setClickColorIndex(formatArr[0].value);
     }
-    onChange && onChange(colorObj.value, formatArr);
+    onChange === null || onChange === void 0 ? void 0 : onChange(colorObj.value, formatArr);
   };
   var checkUserPresetColor = function checkUserPresetColor(colorArr) {
     if (!colorArr) return false;
     var isTrueFormat = colorArr.every(function (hexColor) {
-      return ['HEX', 'HSB', 'RGB', 'HSL', 'colorName'].indexOf(Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_14__["validateColor"])(hexColor)) !== -1;
+      return ['HEX', 'HEXA', 'HSB', 'HSBA', 'RGB', 'RGBA', 'HSL', 'HSLA', 'colorName'].indexOf(Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_25__["validateColor"])(hexColor)) !== -1;
     });
-    Object(_utils_devwarning__WEBPACK_IMPORTED_MODULE_18__["default"])(!isTrueFormat, 'color-picker', "'presetColor' must be an array of hexadecimal, RGB, HSB, HSL or English color name string type");
+    Object(_utils_devwarning__WEBPACK_IMPORTED_MODULE_29__["default"])(!isTrueFormat, 'color-picker', "'presetColor' must be an array of hexadecimal, HEXA, RGB, RGBA, HSB, HSBA, HSL, HSLA or English color name string type");
     return isTrueFormat;
   };
-  Object(_utils_hooks__WEBPACK_IMPORTED_MODULE_19__["useOnClickOutside"])([panelClsRef, inputRef], function () {
+  Object(_utils_hooks__WEBPACK_IMPORTED_MODULE_30__["useOnClickOutside"])([panelClsRef, inputRef], function () {
     if (typeof visible === 'undefined') {
       setShowPanel(false);
     }
     showPanel && onVisibleChange && onVisibleChange(false);
   });
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_7___default.a.Fragment, null, showColorPickerPanel && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement("div", {
+  Object(react__WEBPACK_IMPORTED_MODULE_18__["useEffect"])(function () {
+    if (!panelFormatConfig) return;
+    if (!Array.isArray(panelFormatConfig.show) || panelFormatConfig.show.length === 0) {
+      Object(_utils_devwarning__WEBPACK_IMPORTED_MODULE_29__["default"])(true, 'color-picker', "'show' property of 'panelFormatConfig' must be one or more of HEX, RGB, HSB, or HSL");
+    }
+    if (baseFormat.indexOf(panelFormatConfig === null || panelFormatConfig === void 0 ? void 0 : panelFormatConfig.default) === -1) {
+      setInnerFormatConfig(_objectSpread(_objectSpread({}, panelFormatConfig), {}, {
+        default: 'HEX'
+      }));
+      Object(_utils_devwarning__WEBPACK_IMPORTED_MODULE_29__["default"])(true, 'color-picker', "'default' property of 'panelFormatConfig' must be one of HEX, RGB, HSB, or HSL");
+    }
+    if (panelFormatConfig.show.every(function (item) {
+      return baseFormat.indexOf(item) !== -1;
+    })) {
+      var newShow = baseFormat.filter(function (ele) {
+        return panelFormatConfig.show.indexOf(ele) !== -1;
+      });
+      if (newShow.indexOf(panelFormatConfig.default) === -1) {
+        Object(_utils_devwarning__WEBPACK_IMPORTED_MODULE_29__["default"])(true, 'color-picker', "'default' property of 'panelFormatConfig' must be one of 'show'");
+      }
+    } else {
+      Object(_utils_devwarning__WEBPACK_IMPORTED_MODULE_29__["default"])(true, 'color-picker', "'show' property of 'panelFormatConfig' must be one or more of HEX, RGB, HSB, or HSL");
+    }
+  }, [panelFormatConfig]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_18___default.a.Fragment, null, showColorPickerPanel && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
     className: panelCls,
     ref: panelClsRef
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(react_color__WEBPACK_IMPORTED_MODULE_17__["ChromePicker"], {
-    className: panelChromePickerCls,
-    color: colTypeArr[2].value,
-    onChange: handleChromeChange
-  }), functionalColor && showSwitch && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement("div", {
+  }, showClear && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
+    className: panelClearColor
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("span", {
+    className: panelClearColorBox,
+    onClick: handleClearClick
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("span", {
+    className: panelClearColorText
+  }, "\u65E0\u989C\u8272\u586B\u5145")), functionalColor && showSwitch && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
     className: panelFollowThemeCls
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement("span", null, (switchName === null || switchName === void 0 ? void 0 : switchName.internationalName) && locale.getLangMsg('ColorPicker', switchName.internationalName) || switchName.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_8__["Switch"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("span", null, (switchName === null || switchName === void 0 ? void 0 : switchName.internationalName) && locale.getLangMsg('ColorPicker', switchName.internationalName) || switchName.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_19__["Switch"], {
     checked: isFollow,
     onChange: handleSwitchChange
-  })), showColorTransfer && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement("div", {
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement(react_color__WEBPACK_IMPORTED_MODULE_28__["ChromePicker"], {
+    className: panelChromePickerCls,
+    color: colTypeArr[2].value,
+    onChange: handleChromeChange
+  }), showColorTransfer && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
     className: panelContainerCls
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement("div", {
-    className: panelInputCls,
-    ref: panelInputRef
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_8__["Select"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
+    className: panelselectCls,
+    ref: panelSelectRef
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_19__["Select"], {
     disabled: isFollow,
     borderType: "bordered",
-    value: correctColorValue,
-    placeholder: "#",
+    value: currentColorType,
     onChange: handleTypeChange,
     optionLabelProp: "value",
     getPopupContainer: function getPopupContainer() {
-      return panelInputRef.current;
-    }
-  }, colTypeArr.map(function (obj, i) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(Option, {
-      title: obj.value,
-      value: obj.value,
-      className: classnames__WEBPACK_IMPORTED_MODULE_9___default()({
-        'active-option': obj.type === currentColorType && obj.value === correctColorValue
+      return panelSelectRef.current;
+    }
+  }, innerFormatConfig.show.map(function (name, i) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement(Option, {
+      title: name,
+      value: name,
+      className: classnames__WEBPACK_IMPORTED_MODULE_20___default()({
+        'active-option': name === currentColorType
       }),
       key: i
-    }, obj.type);
-  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_8__["Input"], {
+    }, name);
+  }))), currentColorType === 'HEX' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_19__["Input"], {
+    className: panelInputCls,
+    value: correctColorValue,
+    onChange: handleHEXInputChange,
+    onBlur: handleHEXInputBlur,
+    borderType: "bordered",
+    disabled: isFollow
+  }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
+    className: panelInputGroupCls
+  }, new Array(3).fill(undefined).map(function (_, i) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_19__["Input"], {
+      key: i,
+      className: gePanelInputGroupItemCls(i),
+      onFocus: function onFocus() {
+        handleInputGroupItemFocus(i);
+      },
+      onBlur: handleInputGroupItemBlur,
+      value: getColorNumberVal(correctColorValue, i),
+      onChange: function onChange(e) {
+        handleInputGroupItemChange(e, correctColorValue, i);
+      },
+      borderType: "bordered",
+      disabled: isFollow
+    });
+  })), showAlphaInput && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_19__["Input"], {
     className: transparentCls,
     onChange: handleAlphaChange,
     onBlur: handleAlphaBlur,
     borderType: "bordered",
     value: alphaNoVerifyVal,
     disabled: isFollow
-  })), showPresetColor && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement("div", {
-    className: colorDivContainerCls
-  }, (checkUserPresetColor(presetColor) && Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_12__["presetColorToHEX"])(presetColor) || _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_11__["systemPresetColor"]).map(function (colorValue, i) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement("li", {
+  })), historicalColor && (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
+    className: historicalColorBoxCls
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
+    className: historicalColorBoxTitleCls
+  }, "\u6700\u8FD1\u4F7F\u7528\u989C\u8272"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
+    className: historicalColorBoxContainerCls
+  }, checkUserPresetColor(historicalColor) && Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["presetColorToHEX"])(historicalColor).map(function (colorValue, i) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("li", {
       key: i,
       style: {
         backgroundColor: "".concat(colorValue)
       },
       onClick: function onClick() {
-        colorLiClick(i, colorValue);
+        historicalColorClick(i, colorValue);
       }
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7___default.a.createElement("div", {
-      className: classnames__WEBPACK_IMPORTED_MODULE_9___default()('square', {
-        'square-click': clickedColorIndex === i
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
+      className: classnames__WEBPACK_IMPORTED_MODULE_20___default()('square', {
+        'square-click': clickedHistoricalColorIndex === i
       })
     }));
-  }))));
+  }))), showPresetColor && (presetColor && (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) > 0 || !presetColor && _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_22__["systemPresetColor"].length > 0) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
+    className: colorBoxCls
+  }, historicalColor && (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
+    className: colorBoxTitleCls
+  }, "\u63A8\u8350\u8272"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
+    className: colorBoxContainerCls
+  }, (checkUserPresetColor(presetColor) && Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["presetColorToHEX"])(presetColor) || _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_22__["systemPresetColor"]).map(function (colorValue, i) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("li", {
+      key: i,
+      style: {
+        backgroundColor: "".concat(colorValue)
+      },
+      onClick: function onClick() {
+        presetColorClick(i, colorValue);
+      }
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
+      className: classnames__WEBPACK_IMPORTED_MODULE_20___default()('square', {
+        'square-click': clickedPresetColorIndex === i
+      })
+    }));
+  })))));
 };
 ColorPickerPanel.displayName = 'ColorPickerPanel';
 /* harmony default export */ __webpack_exports__["default"] = (ColorPickerPanel);
@@ -10005,31 +10301,32 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var core_js_modules_es_number_to_fixed_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.number.to-fixed.js */ "./node_modules/core-js/modules/es.number.to-fixed.js");
 /* harmony import */ var core_js_modules_es_number_to_fixed_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_number_to_fixed_js__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.object.keys.js */ "./node_modules/core-js/modules/es.object.keys.js");
-/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.symbol.js */ "./node_modules/core-js/modules/es.symbol.js");
-/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.array.filter.js */ "./node_modules/core-js/modules/es.array.filter.js");
-/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
-/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptor.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptor.js");
-/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "./node_modules/core-js/modules/web.dom-collections.for-each.js");
-/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptors.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptors.js");
-/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_10__);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_11__);
-/* harmony import */ var _config_provider__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../config-provider */ "./components/config-provider/index.tsx");
-/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../index */ "./components/index.tsx");
-/* harmony import */ var _utils_validateColor__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./utils/validateColor */ "./components/color-picker/utils/validateColor.ts");
-/* harmony import */ var _constant_colorTypes__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./constant/colorTypes */ "./components/color-picker/constant/colorTypes.ts");
-/* harmony import */ var _color_picker_panel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./color-picker-panel */ "./components/color-picker/color-picker-panel.tsx");
-/* harmony import */ var _utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./utils/colorFormat */ "./components/color-picker/utils/colorFormat.ts");
-/* harmony import */ var _utils_convertLetters__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./utils/convertLetters */ "./components/color-picker/utils/convertLetters.ts");
+/* harmony import */ var core_js_modules_es_array_find_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.array.find.js */ "./node_modules/core-js/modules/es.array.find.js");
+/* harmony import */ var core_js_modules_es_array_find_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_find_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.object.keys.js */ "./node_modules/core-js/modules/es.object.keys.js");
+/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.symbol.js */ "./node_modules/core-js/modules/es.symbol.js");
+/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/es.array.filter.js */ "./node_modules/core-js/modules/es.array.filter.js");
+/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptor.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptor.js");
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "./node_modules/core-js/modules/web.dom-collections.for-each.js");
+/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptors.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptors.js");
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_10__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_11__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_12__);
+/* harmony import */ var _config_provider__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../config-provider */ "./components/config-provider/index.tsx");
+/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../index */ "./components/index.tsx");
+/* harmony import */ var _utils_validateColor__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./utils/validateColor */ "./components/color-picker/utils/validateColor.ts");
+/* harmony import */ var _constant_colorTypes__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./constant/colorTypes */ "./components/color-picker/constant/colorTypes.ts");
+/* harmony import */ var _color_picker_panel__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./color-picker-panel */ "./components/color-picker/color-picker-panel.tsx");
+/* harmony import */ var _utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./utils/colorFormat */ "./components/color-picker/utils/colorFormat.ts");
 /* harmony import */ var _constant_defaultColor__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./constant/defaultColor */ "./components/color-picker/constant/defaultColor.ts");
 /* harmony import */ var color__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! color */ "./node_modules/color/index.js");
 /* harmony import */ var color__WEBPACK_IMPORTED_MODULE_20___default = /*#__PURE__*/__webpack_require__.n(color__WEBPACK_IMPORTED_MODULE_20__);
@@ -10063,7 +10360,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 
 var ColorPicker = function ColorPicker(props) {
-  var _useContext = Object(react__WEBPACK_IMPORTED_MODULE_10__["useContext"])(_config_provider__WEBPACK_IMPORTED_MODULE_12__["ConfigContext"]),
+  var _useContext = Object(react__WEBPACK_IMPORTED_MODULE_11__["useContext"])(_config_provider__WEBPACK_IMPORTED_MODULE_13__["ConfigContext"]),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
     userDefaultProps = _useContext.compDefaultProps;
@@ -10071,114 +10368,167 @@ var ColorPicker = function ColorPicker(props) {
   var value = colorPickerProps.value,
     className = colorPickerProps.className,
     style = colorPickerProps.style,
+    pure = colorPickerProps.pure,
     functionalColor = colorPickerProps.functionalColor,
     functionalColorName = colorPickerProps.functionalColorName,
     switchName = colorPickerProps.switchName,
+    showAlphaInput = colorPickerProps.showAlphaInput,
+    showClear = colorPickerProps.showClear,
     showSwitch = colorPickerProps.showSwitch,
     showColorTransfer = colorPickerProps.showColorTransfer,
     showPresetColor = colorPickerProps.showPresetColor,
     showColorPickerBox = colorPickerProps.showColorPickerBox,
+    format = colorPickerProps.format,
+    panelFormatConfig = colorPickerProps.panelFormatConfig,
     borderType = colorPickerProps.borderType,
     presetColor = colorPickerProps.presetColor,
+    historicalColor = colorPickerProps.historicalColor,
     placeholder = colorPickerProps.placeholder,
     defaultValue = colorPickerProps.defaultValue,
     defaultOpen = colorPickerProps.defaultOpen,
     visible = colorPickerProps.visible,
     suffixIcon = colorPickerProps.suffixIcon,
+    prefixIcon = colorPickerProps.prefixIcon,
     onChange = colorPickerProps.onChange,
     onVisibleChange = colorPickerProps.onVisibleChange;
-  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_10__["useState"])(defaultValue || ''),
+  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(defaultValue || ''),
     _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState, 2),
     inputColorValue = _useState2[0],
     setInputColorValue = _useState2[1];
-  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_10__["useState"])(defaultValue || _constant_defaultColor__WEBPACK_IMPORTED_MODULE_19__["defaultSystemColor"]),
+  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(''),
     _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState3, 2),
-    correctColorValue = _useState4[0],
-    setCorrectColorValue = _useState4[1];
-  var _useState5 = Object(react__WEBPACK_IMPORTED_MODULE_10__["useState"])('HEX'),
+    inputCorrectColorValue = _useState4[0],
+    setInputCorrectColorValue = _useState4[1];
+  var _useState5 = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(defaultValue || _constant_defaultColor__WEBPACK_IMPORTED_MODULE_19__["defaultSystemColor"]),
     _useState6 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState5, 2),
-    currentColorType = _useState6[0],
-    setCurrentColorType = _useState6[1];
-  var _useState7 = Object(react__WEBPACK_IMPORTED_MODULE_10__["useState"])(_constant_colorTypes__WEBPACK_IMPORTED_MODULE_15__["colorTypes"]),
+    correctColorValue = _useState6[0],
+    setCorrectColorValue = _useState6[1];
+  var _useState7 = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(panelFormatConfig.default),
     _useState8 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState7, 2),
-    colTypeArr = _useState8[0],
-    setColTypeArr = _useState8[1];
-  var _useState9 = Object(react__WEBPACK_IMPORTED_MODULE_10__["useState"])(typeof visible === 'undefined' ? !!defaultOpen : !!visible),
+    currentColorType = _useState8[0],
+    setCurrentColorType = _useState8[1];
+  var _useState9 = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(_constant_colorTypes__WEBPACK_IMPORTED_MODULE_16__["colorTypes"]),
     _useState10 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState9, 2),
-    showPanel = _useState10[0],
-    setShowPanel = _useState10[1];
-  var _useState11 = Object(react__WEBPACK_IMPORTED_MODULE_10__["useState"])(1),
+    colTypeArr = _useState10[0],
+    setColTypeArr = _useState10[1];
+  var _useState11 = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(typeof visible === 'undefined' ? !!defaultOpen : !!visible),
     _useState12 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState11, 2),
-    alpha = _useState12[0],
-    setAlpha = _useState12[1];
-  var _useState13 = Object(react__WEBPACK_IMPORTED_MODULE_10__["useState"])(alpha * 100 + '%'),
+    showPanel = _useState12[0],
+    setShowPanel = _useState12[1];
+  var _useState13 = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(0),
     _useState14 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState13, 2),
-    alphaNoVerifyVal = _useState14[0],
-    setAlphaNoVerifyVal = _useState14[1];
-  var _useState15 = Object(react__WEBPACK_IMPORTED_MODULE_10__["useState"])(false),
+    alpha = _useState14[0],
+    setAlpha = _useState14[1];
+  var _useState15 = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(alpha * 100 + '%'),
     _useState16 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState15, 2),
-    isFollow = _useState16[0],
-    setIsFollow = _useState16[1];
-  var _useState17 = Object(react__WEBPACK_IMPORTED_MODULE_10__["useState"])(),
+    alphaNoVerifyVal = _useState16[0],
+    setAlphaNoVerifyVal = _useState16[1];
+  var _useState17 = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(false),
     _useState18 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState17, 2),
-    clickedColorIndex = _useState18[0],
-    setClickedColorIndex = _useState18[1];
+    isFollow = _useState18[0],
+    setIsFollow = _useState18[1];
+  var _useState19 = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(),
+    _useState20 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState19, 2),
+    clickedPresetColorIndex = _useState20[0],
+    setClickedPresetColorIndex = _useState20[1];
+  var _useState21 = Object(react__WEBPACK_IMPORTED_MODULE_11__["useState"])(),
+    _useState22 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState21, 2),
+    clickedHistoricalColorIndex = _useState22[0],
+    setClickedHistoricalColorIndex = _useState22[1];
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
   var popUpLayer = getPrefixCls(prefixCls, 'color-picker-pop');
-  var containerCls = classnames__WEBPACK_IMPORTED_MODULE_11___default()("".concat(colorPickerPrefixCls, "-container"));
-  var inputCls = classnames__WEBPACK_IMPORTED_MODULE_11___default()("".concat(colorPickerPrefixCls, "-input"), className);
-  var inputRef = Object(react__WEBPACK_IMPORTED_MODULE_10__["useRef"])(null);
-  var showColorPickerPanel = showColorTransfer || typeof showPresetColor === 'boolean' && showPresetColor && (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) || typeof showPresetColor === 'undefined' || (functionalColor === null || functionalColor === void 0 ? void 0 : functionalColor.length) && showSwitch || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity);
+  var containerCls = classnames__WEBPACK_IMPORTED_MODULE_12___default()("".concat(colorPickerPrefixCls, "-container"), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, "".concat(colorPickerPrefixCls, "-container-pure"), pure));
+  var inputCls = classnames__WEBPACK_IMPORTED_MODULE_12___default()("".concat(colorPickerPrefixCls, "-input"), className);
+  var inputRef = Object(react__WEBPACK_IMPORTED_MODULE_11__["useRef"])(null);
+  var showColorPickerPanel = showColorTransfer || typeof showPresetColor === 'boolean' && showPresetColor && ((presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) || _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_23__["systemPresetColor"].length) || typeof showPresetColor === 'undefined' || showClear || (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) || (functionalColor === null || functionalColor === void 0 ? void 0 : functionalColor.length) && showSwitch || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity);
+  var setClickColorIndex = function setClickColorIndex(value) {
+    if (typeof value === 'number') {
+      setClickedPresetColorIndex(value);
+      setClickedHistoricalColorIndex(value);
+    } else {
+      setClickedPresetColorIndex(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["highlightPresetColorIndex"])(value, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["presetColorToHEX"])(presetColor || _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_23__["systemPresetColor"])));
+      setClickedHistoricalColorIndex(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["highlightPresetColorIndex"])(value, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["presetColorToHEX"])(historicalColor)));
+    }
+  };
   var setIconColor = function setIconColor(value) {
     value === functionalColorName ? setIsFollow(true) : setIsFollow(false);
     var inpValue = value === functionalColorName ? functionalColor : value;
-    var inputValType = Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_14__["validateColor"])(inpValue);
+    var inputValType = Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_15__["validateColor"])(inpValue);
     var setState = function setState(formatArr, correctColorValue, alpha, alphaStr) {
       setColTypeArr(formatArr);
       setCorrectColorValue(correctColorValue);
       setAlpha(alpha);
       setAlphaNoVerifyVal(alphaStr);
     };
+    var getAlphaStr = function getAlphaStr(color) {
+      return (Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["strFixed"])(color__WEBPACK_IMPORTED_MODULE_20___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["getColorObj"])(color)).alpha(), 2) * 100).toFixed() + '%';
+    };
     if (inputValType) {
-      var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__["colorFormat"])(inpValue, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__["strFixed"])(color__WEBPACK_IMPORTED_MODULE_20___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__["getColorObj"])(inpValue)).alpha(), 2));
-      setState(formatArr, formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__["valOfCorrespondingType"])(currentColorType)].value, color__WEBPACK_IMPORTED_MODULE_20___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__["getColorObj"])(inpValue)).alpha(), (Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__["strFixed"])(color__WEBPACK_IMPORTED_MODULE_20___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__["getColorObj"])(inpValue)).alpha(), 2) * 100).toFixed() + '%');
-      setClickedColorIndex(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__["highlightPresetColorIndex"])(formatArr[0].value, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__["presetColorToHEX"])(presetColor || _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_23__["systemPresetColor"])));
+      var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["colorFormat"])(inpValue, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["strFixed"])(color__WEBPACK_IMPORTED_MODULE_20___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["getColorObj"])(inpValue)).alpha(), 2));
+      setState(formatArr, Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["colorFormat"])(inpValue, 1, currentColorType, true), color__WEBPACK_IMPORTED_MODULE_20___default()(Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["getColorObj"])(inpValue)).alpha(), getAlphaStr(inpValue));
+      setClickColorIndex(formatArr[0].value);
+    } else if (inpValue) {
+      var _formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["colorFormat"])(correctColorValue, alpha);
+      setState(_formatArr, correctColorValue, alpha, alphaNoVerifyVal);
     } else {
-      var _formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__["colorFormat"])(_constant_defaultColor__WEBPACK_IMPORTED_MODULE_19__["defaultSystemColor"]);
-      setState(_formatArr, _constant_defaultColor__WEBPACK_IMPORTED_MODULE_19__["defaultSystemColor"], 1, '100%');
+      var _formatArr2 = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["colorFormat"])(_constant_defaultColor__WEBPACK_IMPORTED_MODULE_19__["defaultSystemColor"], 0);
+      setState(_formatArr2, _constant_defaultColor__WEBPACK_IMPORTED_MODULE_19__["defaultSystemColor"], 0, '0%');
     }
   };
   var handleChange = function handleChange(e) {
-    setClickedColorIndex(-1);
-    var inpValue = Object(_utils_convertLetters__WEBPACK_IMPORTED_MODULE_18__["toLowerCase"])(e.target.value);
+    setClickColorIndex(-1);
+    var inpValue = e.target.value;
+    if (!inpValue) setInputCorrectColorValue('');
     if (value === undefined) {
       setIconColor(inpValue);
-      setInputColorValue(inpValue);
     }
+    setInputColorValue(inpValue);
     var callback = function callback(val, alpha) {
-      var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_17__["colorFormat"])(val, alpha);
-      onChange && onChange(inpValue, formatArr);
+      var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["colorFormat"])(val, alpha);
+      onChange === null || onChange === void 0 ? void 0 : onChange(inpValue, formatArr);
     };
-    if (Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_14__["validateColor"])(inpValue)) {
+    if (Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_15__["validateColor"])(inpValue)) {
       callback(inpValue, alpha);
     } else {
       callback(_constant_defaultColor__WEBPACK_IMPORTED_MODULE_19__["defaultSystemColor"], alpha);
     }
     functionalColor && showSwitch && setIsFollow(false);
   };
+  var handleBlur = function handleBlur(e) {
+    var inpValue = e.target.value;
+    var formatArr = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_18__["colorFormat"])(correctColorValue, alpha);
+    var getCurrentOutputColor = function getCurrentOutputColor() {
+      if (inputCorrectColorValue) {
+        return formatArr.find(function (item) {
+          return item.type === format;
+        }).value;
+      }
+      return '';
+    };
+    if (value === undefined) {
+      setIconColor(inpValue);
+      setInputColorValue(getCurrentOutputColor());
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(getCurrentOutputColor(), formatArr);
+  };
   var handleClick = function handleClick() {
     if (typeof visible === 'undefined') {
       setShowPanel(!showPanel);
     }
     onVisibleChange && onVisibleChange(!showPanel);
   };
-  Object(react__WEBPACK_IMPORTED_MODULE_10__["useEffect"])(function () {
+  Object(react__WEBPACK_IMPORTED_MODULE_11__["useEffect"])(function () {
+    if (Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_15__["validateColor"])(value !== null && value !== void 0 ? value : inputColorValue)) {
+      setInputCorrectColorValue(value !== null && value !== void 0 ? value : inputColorValue);
+    }
+  }, [inputColorValue, value]);
+  Object(react__WEBPACK_IMPORTED_MODULE_11__["useEffect"])(function () {
     if (typeof visible !== 'undefined') {
       setShowPanel(visible);
     }
   }, [visible]);
-  Object(react__WEBPACK_IMPORTED_MODULE_10__["useEffect"])(function () {
-    if (value) {
+  Object(react__WEBPACK_IMPORTED_MODULE_11__["useEffect"])(function () {
+    if (value !== undefined) {
       setIconColor(value);
     } else {
       if (defaultValue) {
@@ -10186,36 +10536,45 @@ var ColorPicker = function ColorPicker(props) {
       }
     }
   }, [value, defaultValue]);
-  var afterIcon = function afterIcon() {
-    var _classNames;
-    var afterIconContainerCls = classnames__WEBPACK_IMPORTED_MODULE_11___default()("".concat(colorPickerPrefixCls, "-icon"), (_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(colorPickerPrefixCls, "-icon-underline"), borderType === 'underline'), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(colorPickerPrefixCls, "-icon-bordered"), borderType === 'bordered'), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(colorPickerPrefixCls, "-icon-up"), showPanel), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames, "".concat(colorPickerPrefixCls, "-icon-down"), !showPanel), _classNames));
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement("div", {
+  var beforeIcon = Object(react__WEBPACK_IMPORTED_MODULE_11__["useCallback"])(function () {
+    var _classNames2;
+    var afterIconContainerCls = classnames__WEBPACK_IMPORTED_MODULE_12___default()("".concat(colorPickerPrefixCls, "-icon"), (_classNames2 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames2, "".concat(colorPickerPrefixCls, "-icon-underline"), borderType === 'underline'), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_classNames2, "".concat(colorPickerPrefixCls, "-icon-bordered"), borderType === 'bordered'), _classNames2));
+    var noneLineCls = "".concat(colorPickerPrefixCls, "-icon-no-color-line");
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("div", {
       className: afterIconContainerCls,
       style: {
         backgroundColor: "".concat(colTypeArr[2].value || _constant_defaultColor__WEBPACK_IMPORTED_MODULE_19__["defaultSystemColor"])
       }
-    }, showColorPickerPanel && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_13__["Icon"], {
-      type: "arrow-down"
+    }, !Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_15__["validateColor"])(value) && !inputCorrectColorValue && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("div", {
+      className: noneLineCls
     }));
-  };
-  var colorInputEle = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement("div", {
+  }, [borderType, colTypeArr, colorPickerPrefixCls, inputCorrectColorValue, value]);
+  var colorInputEle = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("div", {
     className: containerCls,
     ref: inputRef
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_13__["Input"], {
-    borderType: borderType,
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_14__["Input"], {
+    borderType: pure ? 'bordered' : borderType,
     placeholder: placeholder,
     value: value !== null && value !== void 0 ? value : inputColorValue,
     className: inputCls,
     onChange: handleChange,
+    onBlur: handleBlur,
     style: style,
-    onClick: handleClick
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement("div", {
     onClick: handleClick,
-    className: "".concat(colorPickerPrefixCls, "-icon-container")
-  }, suffixIcon && suffixIcon(colTypeArr[2].value) || afterIcon()));
-  var panel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_color_picker_panel__WEBPACK_IMPORTED_MODULE_16__["default"]
+    prefix: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("div", {
+      onClick: handleClick,
+      className: "".concat(colorPickerPrefixCls, "-icon-container")
+    }, prefixIcon ? prefixIcon(colTypeArr[2].value, beforeIcon()) : beforeIcon()),
+    suffix: suffixIcon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("div", {
+      onClick: handleClick,
+      className: "".concat(colorPickerPrefixCls, "-icon-container")
+    }, suffixIcon(colTypeArr[2].value, beforeIcon()))
+  }));
+  var panel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_color_picker_panel__WEBPACK_IMPORTED_MODULE_17__["default"]
   // API
   , {
+    showAlphaInput: showAlphaInput,
+    showClear: showClear,
     showSwitch: showSwitch,
     showColorTransfer: showColorTransfer,
     showPresetColor: showPresetColor,
@@ -10223,31 +10582,39 @@ var ColorPicker = function ColorPicker(props) {
     functionalColor: functionalColor,
     functionalColorName: functionalColorName,
     switchName: switchName,
+    format: format,
+    panelFormatConfig: panelFormatConfig,
     presetColor: presetColor,
+    historicalColor: historicalColor,
     value: value,
     visible: visible,
     showPanel: showPanel,
     onVisibleChange: onVisibleChange
     // private
     ,
+    setInputCorrectColorValue: setInputCorrectColorValue,
     setInputColorValue: setInputColorValue,
     setCorrectColorValue: setCorrectColorValue,
+    setClickedPresetColorIndex: setClickedPresetColorIndex,
+    setClickedHistoricalColorIndex: setClickedHistoricalColorIndex,
+    setClickColorIndex: setClickColorIndex,
+    setAlpha: setAlpha,
+    setAlphaNoVerifyVal: setAlphaNoVerifyVal,
+    setIsFollow: setIsFollow,
+    setShowPanel: setShowPanel,
+    setColTypeArr: setColTypeArr,
+    setCurrentColorType: setCurrentColorType,
     correctColorValue: correctColorValue,
-    clickedColorIndex: clickedColorIndex,
-    setClickedColorIndex: setClickedColorIndex,
+    inputCorrectColorValue: inputCorrectColorValue,
+    clickedPresetColorIndex: clickedPresetColorIndex,
+    clickedHistoricalColorIndex: clickedHistoricalColorIndex,
     onChange: onChange,
     alpha: alpha,
-    setAlpha: setAlpha,
     alphaNoVerifyVal: alphaNoVerifyVal,
-    setAlphaNoVerifyVal: setAlphaNoVerifyVal,
     isFollow: isFollow,
-    setIsFollow: setIsFollow,
-    setShowPanel: setShowPanel,
     inputRef: inputRef,
     colTypeArr: colTypeArr,
-    setColTypeArr: setColTypeArr,
     currentColorType: currentColorType,
-    setCurrentColorType: setCurrentColorType,
     showColorPickerPanel: showColorPickerPanel
   });
   var popperProps = _objectSpread(_objectSpread({}, colorPickerProps), {}, {
@@ -10277,16 +10644,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "colorTypes", function() { return colorTypes; });
 var colorTypes = [{
   type: 'HEX',
-  value: '#b2b2b2'
+  value: '#FFFFFF00'
 }, {
   type: 'HSB',
-  value: 'hsb(0, 0%, 70%)'
+  value: 'HSBA(0, 0%, 100%, 0)'
 }, {
   type: 'RGB',
-  value: 'rgb(178, 178, 178)'
+  value: 'RGBA(255, 255, 255, 0)'
 }, {
   type: 'HSL',
-  value: 'hsl(0, 0%, 70%)'
+  value: 'HSLA(0, 0%, 100%, 0)'
 }];
 
 /***/ }),
@@ -10301,7 +10668,7 @@ var colorTypes = [{
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "defaultSystemColor", function() { return defaultSystemColor; });
-var defaultSystemColor = '#b2b2b2';
+var defaultSystemColor = '#FFFFFF';
 
 /***/ }),
 
@@ -10368,13 +10735,14 @@ __webpack_require__.r(__webpack_exports__);
 /*!******************************************************!*\
   !*** ./components/color-picker/utils/colorFormat.ts ***!
   \******************************************************/
-/*! exports provided: colorFormat, getColorObj, strFixed, valOfCorrespondingType, highlightPresetColorIndex, presetColorToHEX */
+/*! exports provided: colorFormat, getColorObj, colorToStr, strFixed, valOfCorrespondingType, highlightPresetColorIndex, presetColorToHEX */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "colorFormat", function() { return colorFormat; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getColorObj", function() { return getColorObj; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "colorToStr", function() { return colorToStr; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "strFixed", function() { return strFixed; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "valOfCorrespondingType", function() { return valOfCorrespondingType; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "highlightPresetColorIndex", function() { return highlightPresetColorIndex; });
@@ -10412,18 +10780,18 @@ var colorFormat = function colorFormat(colorStr) {
   var toHex = function toHex() {
     if (/^#([0-9a-fA-F]{8})$/.test(colorStr)) {
       if (formatHex) {
-        return Object(_convertLetters__WEBPACK_IMPORTED_MODULE_8__["toLowerCase"])(alpha === 1 ? ColorTools.hex() : ColorTools.hexa());
+        return Object(_convertLetters__WEBPACK_IMPORTED_MODULE_8__["toUpCase"])(alpha === 1 ? ColorTools.hex() : ColorTools.hexa());
       } else {
         return colorStr;
       }
     } else {
-      return Object(_convertLetters__WEBPACK_IMPORTED_MODULE_8__["toLowerCase"])(alpha === 1 ? ColorTools.hex() : ColorTools.hexa());
+      return Object(_convertLetters__WEBPACK_IMPORTED_MODULE_8__["toUpCase"])(alpha === 1 ? ColorTools.hex() : ColorTools.hexa());
     }
   };
-  var HEX = toHex();
-  var HSB = colorToStr(ColorTools.hsv());
-  var RGB = ColorTools.rgb().string();
-  var HSL = colorToStr(ColorTools.hsl());
+  var HEX = Object(_convertLetters__WEBPACK_IMPORTED_MODULE_8__["toUpCase"])(toHex());
+  var HSB = Object(_convertLetters__WEBPACK_IMPORTED_MODULE_8__["toUpCase"])(colorToStr(ColorTools.hsv()));
+  var RGB = Object(_convertLetters__WEBPACK_IMPORTED_MODULE_8__["toUpCase"])(ColorTools.rgb().string());
+  var HSL = Object(_convertLetters__WEBPACK_IMPORTED_MODULE_8__["toUpCase"])(colorToStr(ColorTools.hsl()));
   if (outType === 'HEX') return HEX;
   if (outType === 'HSB') return HSB;
   if (outType === 'HSL') return HSL;
@@ -10445,7 +10813,7 @@ var colorFormat = function colorFormat(colorStr) {
   }
 };
 var getColorObj = function getColorObj(colorStr) {
-  var colorArray = colorStr.split(',');
+  var colorArray = Object(_convertLetters__WEBPACK_IMPORTED_MODULE_8__["toLowerCase"])(colorStr).split(',');
   var type = Object(_validateColor__WEBPACK_IMPORTED_MODULE_7__["validateColor"])(colorStr);
   if (type === 'HSB' || type === 'HSBA') {
     var s = removePercentage(colorArray[1]);
@@ -10541,7 +10909,7 @@ var highlightPresetColorIndex = function highlightPresetColorIndex(color, colorA
 var presetColorToHEX = function presetColorToHEX(colorArr) {
   if (!colorArr) return [];
   var hexColorArr = colorArr.map(function (color) {
-    return colorFormat(color, 1, 'HEX');
+    return colorFormat(color, color__WEBPACK_IMPORTED_MODULE_6___default()(getColorObj(color)).alpha(), 'HEX');
   });
   return hexColorArr;
 };
@@ -10552,12 +10920,25 @@ var presetColorToHEX = function presetColorToHEX(colorArr) {
 /*!*********************************************************!*\
   !*** ./components/color-picker/utils/convertLetters.ts ***!
   \*********************************************************/
-/*! exports provided: toLowerCase */
+/*! exports provided: toUpCase, toLowerCase */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "toUpCase", function() { return toUpCase; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "toLowerCase", function() { return toLowerCase; });
+function toUpCase(str) {
+  var result = '';
+  for (var i = 0; i < str.length; i++) {
+    var charCode = str.charCodeAt(i);
+    if (charCode >= 97 && charCode <= 122) {
+      result += String.fromCharCode(charCode - 32);
+    } else {
+      result += str[i];
+    }
+  }
+  return result;
+}
 function toLowerCase(str) {
   var result = '';
   for (var i = 0; i < str.length; i++) {
@@ -10585,9 +10966,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "validateColor", function() { return validateColor; });
 /* harmony import */ var core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.regexp.exec.js */ "./node_modules/core-js/modules/es.regexp.exec.js");
 /* harmony import */ var core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _convertLetters__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./convertLetters */ "./components/color-picker/utils/convertLetters.ts");
+
+
 
 // 输入框颜色类型校验
 function validateColor(color) {
+  if (!color) return '';
+  var lowerColor = Object(_convertLetters__WEBPACK_IMPORTED_MODULE_1__["toLowerCase"])(color);
   var hexReg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
   var hexaReg = /^#([0-9a-fA-F]{8})$/;
   var hsbReg = /^hsb\(\s*(-?\d+|-?\d*\.\d+)(?:,\s*(-?\d+|-?\d*\.\d+|-?\d+%|-?\d*\.\d+%)){2}\s*\)$/;
@@ -10599,15 +10985,15 @@ function validateColor(color) {
   var hslaReg = /^hsla\(\s*(-?\d+|-?\d*\.\d+)(?:,\s*(-?\d+|-?\d*\.\d+|-?\d+%|-?\d*\.\d+%)){2}\s*,\s*(-?\d+|-?\d*\.\d+)\)$/;
   // const hslaReg = /^hsla\(\s*(-?\d+|-?\d*\.\d+)(?:,\s*(-?\d+|-?\d*\.\d+)){2}\s*,\s*(-?\d+|-?\d*\.\d+)|(^\d+%)\s*\)$/
   var colorNameReg = /^(?:aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|rebeccapurple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen)$/;
-  if (hexReg.test(color)) return 'HEX';
-  if (hexaReg.test(color)) return 'HEXA';
-  if (hsbReg.test(color)) return 'HSB';
-  if (hsbaReg.test(color)) return 'HSBA';
-  if (rgbaReg.test(color)) return 'RGBA';
-  if (rgbReg.test(color)) return 'RGB';
-  if (hslReg.test(color)) return 'HSL';
-  if (hslaReg.test(color)) return 'HSLA';
-  if (colorNameReg.test(color)) return 'colorName';
+  if (hexReg.test(lowerColor)) return 'HEX';
+  if (hexaReg.test(lowerColor)) return 'HEXA';
+  if (hsbReg.test(lowerColor)) return 'HSB';
+  if (hsbaReg.test(lowerColor)) return 'HSBA';
+  if (rgbaReg.test(lowerColor)) return 'RGBA';
+  if (rgbReg.test(lowerColor)) return 'RGB';
+  if (hslReg.test(lowerColor)) return 'HSL';
+  if (hslaReg.test(lowerColor)) return 'HSLA';
+  if (colorNameReg.test(lowerColor)) return 'colorName';
   return '';
 }
 
@@ -10731,12 +11117,20 @@ var compDefaultProps = {
       internationalName: 'followFunctionalColor'
     },
     placeholder: '#',
+    pure: false,
+    showAlphaInput: true,
+    showClear: true,
     showColorTransfer: true,
     showPresetColor: true,
     showColorPickerBox: {
       showBox: false,
       showHue: false,
       showOpacity: false
+    },
+    format: 'HEX',
+    panelFormatConfig: {
+      show: ['HEX', 'HSB', 'RGB', 'HSL'],
+      default: 'HEX'
     }
   },
   Checkbox: {
@@ -28093,9 +28487,12 @@ var Popper = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_15__["forwardRef
         var domReference = getRealDom(referenceRef, referenceElement);
         var isReference = domReference ? domReference === e.target || (domReference === null || domReference === void 0 ? void 0 : (_domReference$contain = domReference.contains) === null || _domReference$contain === void 0 ? void 0 : _domReference$contain.call(domReference, e.target)) : false;
         var isTarget = trigger === 'contextMenu' ? isPopper : isPopper || isReference;
-        if (clickToClose && !isTarget && !isSubPopper(e)) {
+        if (!isTarget && !isSubPopper(e)) {
           triggerOpen(false, 'clickOutside', 0);
         }
+        if (clickToClose && isPopper) {
+          triggerOpen(false, 'clickToClose', 0);
+        }
       }
     }, 10, {
       leading: true
@@ -32432,25 +32829,49 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
 /* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _utils_signature_pad__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/signature_pad */ "./components/signature/utils/signature_pad.js");
-/* harmony import */ var _modal__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../modal */ "./components/modal/index.tsx");
-/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../icon */ "./components/icon/index.tsx");
-/* harmony import */ var _image__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../image */ "./components/image/index.tsx");
-/* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../button */ "./components/button/index.tsx");
-/* harmony import */ var _drawingBoard__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./drawingBoard */ "./components/signature/drawingBoard.tsx");
-/* harmony import */ var _config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../config-provider/ConfigContext */ "./components/config-provider/ConfigContext.tsx");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../_utils */ "./components/_utils/index.ts");
-/* harmony import */ var _utils_hooks__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../_utils/hooks */ "./components/_utils/hooks.tsx");
-/* harmony import */ var _utils_type__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../_utils/type */ "./components/_utils/type.ts");
+/* harmony import */ var core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.array.map.js */ "./node_modules/core-js/modules/es.array.map.js");
+/* harmony import */ var core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_map_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.object.keys.js */ "./node_modules/core-js/modules/es.object.keys.js");
+/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.symbol.js */ "./node_modules/core-js/modules/es.symbol.js");
+/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/es.array.filter.js */ "./node_modules/core-js/modules/es.array.filter.js");
+/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! core-js/modules/es.object.to-string.js */ "./node_modules/core-js/modules/es.object.to-string.js");
+/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptor.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptor.js");
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "./node_modules/core-js/modules/web.dom-collections.for-each.js");
+/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_10__);
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptors.js */ "./node_modules/core-js/modules/es.object.get-own-property-descriptors.js");
+/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_11__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_12__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_13__);
+/* harmony import */ var _utils_signature_pad__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./utils/signature_pad */ "./components/signature/utils/signature_pad.js");
+/* harmony import */ var _modal__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../modal */ "./components/modal/index.tsx");
+/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../icon */ "./components/icon/index.tsx");
+/* harmony import */ var _image__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../image */ "./components/image/index.tsx");
+/* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../button */ "./components/button/index.tsx");
+/* harmony import */ var _drawingBoard__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./drawingBoard */ "./components/signature/drawingBoard.tsx");
+/* harmony import */ var _config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../config-provider/ConfigContext */ "./components/config-provider/ConfigContext.tsx");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../_utils */ "./components/_utils/index.ts");
+/* harmony import */ var _utils_hooks__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../_utils/hooks */ "./components/_utils/hooks.tsx");
+/* harmony import */ var _utils_type__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../_utils/type */ "./components/_utils/type.ts");
+
+
+
+
+var _excluded = ["className", "style", "prefixCls", "containerWidth", "containerHeight", "getSignatureData", "onStart", "onEnd", "onClear", "undo", "redo", "penColor", "backgroundColor", "dataUrlType", "title", "resizable", "onClose", "disabled", "preview", "canFullScreen"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+
 
 
 
 
-var _excluded = ["className", "style", "prefixCls", "containerWidth", "containerHeight", "getSignatureData", "onStart", "onEnd", "onClear", "undo", "redo", "penColor", "backgroundColor", "dataUrlType", "title", "onClose", "disabled", "preview", "canFullScreen"];
 
 
 
@@ -32463,7 +32884,9 @@ var _excluded = ["className", "style", "prefixCls", "containerWidth", "container
 
 
 
-var DataUrlTypes = Object(_utils_type__WEBPACK_IMPORTED_MODULE_15__["tuple"])('png', 'jpeg', 'svg');
+
+
+var DataUrlTypes = Object(_utils_type__WEBPACK_IMPORTED_MODULE_23__["tuple"])('png', 'jpeg', 'svg');
 var typeMapping = {
   png: 'image/png',
   jpeg: 'image/jpeg',
@@ -32471,12 +32894,12 @@ var typeMapping = {
 };
 var Signature = function Signature(props) {
   var _classNames2;
-  var _useContext = Object(react__WEBPACK_IMPORTED_MODULE_4__["useContext"])(_config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_12__["default"]),
+  var _useContext = Object(react__WEBPACK_IMPORTED_MODULE_12__["useContext"])(_config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_20__["default"]),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
     userDefaultProps = _useContext.compDefaultProps,
     locale = _useContext.locale;
-  var signatureProps = Object(_utils__WEBPACK_IMPORTED_MODULE_13__["getCompProps"])('Signature', userDefaultProps, props);
+  var signatureProps = Object(_utils__WEBPACK_IMPORTED_MODULE_21__["getCompProps"])('Signature', userDefaultProps, props);
   var signatureLangMsg = locale.getCompLangMsg({
     componentName: 'Signature'
   });
@@ -32496,33 +32919,35 @@ var Signature = function Signature(props) {
     _signatureProps$dataU = signatureProps.dataUrlType,
     dataUrlType = _signatureProps$dataU === void 0 ? 'png' : _signatureProps$dataU,
     title = signatureProps.title,
+    resizable = signatureProps.resizable,
     onClose = signatureProps.onClose,
     disabled = signatureProps.disabled,
     preview = signatureProps.preview,
     canFullScreen = signatureProps.canFullScreen,
     restProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_3___default()(signatureProps, _excluded);
   var signaturePrefixCls = getPrefixCls(prefixCls, 'signature', customPrefixcls);
-  var signatureClass = classnames__WEBPACK_IMPORTED_MODULE_5___default()(signaturePrefixCls, className, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()({}, "".concat(signaturePrefixCls, "-disabled"), disabled));
-  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(false),
+  var signatureClass = classnames__WEBPACK_IMPORTED_MODULE_13___default()(signaturePrefixCls, className, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()({}, "".concat(signaturePrefixCls, "-disabled"), disabled));
+  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_12__["useState"])(false),
     _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState, 2),
     modalVisible = _useState2[0],
     setModalVisible = _useState2[1];
-  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(''),
+  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_12__["useState"])(''),
     _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState3, 2),
     dataUrl = _useState4[0],
     setDataUrl = _useState4[1];
-  var _useState5 = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(true),
+  var _useState5 = Object(react__WEBPACK_IMPORTED_MODULE_12__["useState"])(true),
     _useState6 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState5, 2),
     isEmpty = _useState6[0],
     setIsEmpty = _useState6[1];
-  var _useState7 = Object(react__WEBPACK_IMPORTED_MODULE_4__["useState"])(false),
+  var _useState7 = Object(react__WEBPACK_IMPORTED_MODULE_12__["useState"])(false),
     _useState8 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState7, 2),
     isFullScreen = _useState8[0],
     setIsFullScreen = _useState8[1];
-  var modalRef = Object(react__WEBPACK_IMPORTED_MODULE_4__["useRef"])();
-  var modalBodyRef = Object(react__WEBPACK_IMPORTED_MODULE_4__["useRef"])();
-  var triggerRef = Object(react__WEBPACK_IMPORTED_MODULE_4__["useRef"])();
-  var signaturePadRef = Object(react__WEBPACK_IMPORTED_MODULE_4__["useRef"])();
+  var isFirstSignatureRef = Object(react__WEBPACK_IMPORTED_MODULE_12__["useRef"])(true);
+  var modalRef = Object(react__WEBPACK_IMPORTED_MODULE_12__["useRef"])();
+  var modalBodyRef = Object(react__WEBPACK_IMPORTED_MODULE_12__["useRef"])();
+  var triggerRef = Object(react__WEBPACK_IMPORTED_MODULE_12__["useRef"])();
+  var signaturePadRef = Object(react__WEBPACK_IMPORTED_MODULE_12__["useRef"])();
   var handleOnClick = function handleOnClick() {
     if (disabled) return;
     setModalVisible(true);
@@ -32556,17 +32981,45 @@ var Signature = function Signature(props) {
     setIsFullScreen(true);
     type === 'open' ? setIsFullScreen(true) : setIsFullScreen(false);
   };
-  Object(_utils_hooks__WEBPACK_IMPORTED_MODULE_14__["useResizeObserver"])(modalRef.current, function (rect) {
+  var handleResize = function handleResize(rect) {
+    var _signaturePadRef$curr3;
     var width = rect.width,
       height = rect.height;
     var canvas = modalBodyRef.current.getCanvasRef();
-    canvas.width = width - 40;
-    canvas.height = height - 142;
-  });
-  Object(react__WEBPACK_IMPORTED_MODULE_4__["useEffect"])(function () {
+    var originalWidth = canvas.width;
+    var originalHeight = canvas.height;
+    var newWidth = width - 40;
+    var newHeight = height - 142;
+    canvas.width = newWidth;
+    canvas.height = newHeight;
+    if (isFirstSignatureRef.current) return;
+    var tempData = (_signaturePadRef$curr3 = signaturePadRef.current) === null || _signaturePadRef$curr3 === void 0 ? void 0 : _signaturePadRef$curr3.toData();
+    var scaleX = newWidth / originalWidth;
+    var scaleY = newHeight / originalHeight;
+    if (tempData && tempData.length > 0) {
+      var _signaturePadRef$curr4;
+      var scaledData = tempData.map(function (group) {
+        return _objectSpread(_objectSpread({}, group), {}, {
+          points: group.points.map(function (point) {
+            return _objectSpread(_objectSpread({}, point), {}, {
+              x: point.x * scaleX,
+              y: point.y * scaleY
+            });
+          })
+        });
+      });
+      (_signaturePadRef$curr4 = signaturePadRef.current) === null || _signaturePadRef$curr4 === void 0 ? void 0 : _signaturePadRef$curr4.fromData(scaledData);
+    }
+  };
+  Object(_utils_hooks__WEBPACK_IMPORTED_MODULE_22__["useResizeObserver"])(modalRef.current, handleResize);
+  var handleClear = function handleClear() {
+    onClear === null || onClear === void 0 ? void 0 : onClear();
+    isFirstSignatureRef.current = true;
+  };
+  Object(react__WEBPACK_IMPORTED_MODULE_12__["useEffect"])(function () {
     if (modalBodyRef.current) {
       var canvas = modalBodyRef.current.getCanvasRef();
-      signaturePadRef.current = new _utils_signature_pad__WEBPACK_IMPORTED_MODULE_6__["default"](canvas, {
+      signaturePadRef.current = new _utils_signature_pad__WEBPACK_IMPORTED_MODULE_14__["default"](canvas, {
         penColor: penColor
       });
       signaturePadRef.current.addEventListener('beginStroke', function () {
@@ -32574,6 +33027,7 @@ var Signature = function Signature(props) {
         onStart && onStart();
       });
       signaturePadRef.current.addEventListener('endStroke', function () {
+        isFirstSignatureRef.current = false;
         modalBodyRef.current.saveSignatureToHistory();
         onEnd && onEnd();
       });
@@ -32584,19 +33038,21 @@ var Signature = function Signature(props) {
       }
     };
   }, []);
-  Object(react__WEBPACK_IMPORTED_MODULE_4__["useEffect"])(function () {
+  Object(react__WEBPACK_IMPORTED_MODULE_12__["useEffect"])(function () {
     if (modalVisible) {
-      var _signaturePadRef$curr3;
-      (_signaturePadRef$curr3 = signaturePadRef.current) === null || _signaturePadRef$curr3 === void 0 ? void 0 : _signaturePadRef$curr3.on();
+      var _signaturePadRef$curr5;
+      (_signaturePadRef$curr5 = signaturePadRef.current) === null || _signaturePadRef$curr5 === void 0 ? void 0 : _signaturePadRef$curr5.on();
       modalBodyRef.current.saveSignatureToHistory();
     } else {
-      var _signaturePadRef$curr4;
-      (_signaturePadRef$curr4 = signaturePadRef.current) === null || _signaturePadRef$curr4 === void 0 ? void 0 : _signaturePadRef$curr4.off();
+      var _signaturePadRef$curr6, _signaturePadRef$curr7;
+      (_signaturePadRef$curr6 = signaturePadRef.current) === null || _signaturePadRef$curr6 === void 0 ? void 0 : _signaturePadRef$curr6.off();
+      (_signaturePadRef$curr7 = signaturePadRef.current) === null || _signaturePadRef$curr7 === void 0 ? void 0 : _signaturePadRef$curr7.clear();
       modalBodyRef.current.setSignatureHistory([]);
       modalBodyRef.current.setCurrentHistoryIndex(-1);
+      isFirstSignatureRef.current = true;
     }
   }, [modalVisible]);
-  Object(react__WEBPACK_IMPORTED_MODULE_4__["useEffect"])(function () {
+  Object(react__WEBPACK_IMPORTED_MODULE_12__["useEffect"])(function () {
     signaturePadRef.current && (signaturePadRef.current.penColor = penColor);
   }, [penColor]);
   var DrawingBoardProps = {
@@ -32605,94 +33061,94 @@ var Signature = function Signature(props) {
     undo: undo,
     redo: redo,
     isEmpty: isEmpty,
-    onClear: onClear,
+    onClear: handleClear,
     setDataUrl: setDataUrl,
     setIsEmpty: setIsEmpty,
     signaturePad: function signaturePad() {
       return signaturePadRef.current;
     }
   };
-  var modalClasses = classnames__WEBPACK_IMPORTED_MODULE_5___default()((_classNames2 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames2, "".concat(signaturePrefixCls, "-modal"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames2, "".concat(signaturePrefixCls, "-modal-fullscreen"), isFullScreen), _classNames2));
-  var footer = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", {
+  var modalClasses = classnames__WEBPACK_IMPORTED_MODULE_13___default()((_classNames2 = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames2, "".concat(signaturePrefixCls, "-modal"), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2___default()(_classNames2, "".concat(signaturePrefixCls, "-modal-fullscreen"), isFullScreen), _classNames2));
+  var footer = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div", {
     className: "".concat(signaturePrefixCls, "-modal-footer")
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_button__WEBPACK_IMPORTED_MODULE_10__["default"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_button__WEBPACK_IMPORTED_MODULE_18__["default"], {
     onClick: handleModalCancel
-  }, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.cancelText), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_button__WEBPACK_IMPORTED_MODULE_10__["default"], {
+  }, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.cancelText), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_button__WEBPACK_IMPORTED_MODULE_18__["default"], {
     type: "primary",
     onClick: handleModalOk,
     disabled: isEmpty
   }, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.okText));
-  var titleIcon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment, null, !isFullScreen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
+  var titleIcon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_12___default.a.Fragment, null, !isFullScreen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("span", {
     className: "kd-modal-expand-icon",
     onClick: function onClick() {
       return handleFullScreen('open');
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("svg", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("svg", {
     width: "1em",
     height: "1em",
     viewBox: "0 0 32 32"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("g", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("g", {
     id: "977.\u5168\u5C4F",
     stroke: "none",
     "stroke-width": "1",
     fill: "none",
     "fill-rule": "evenodd"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("g", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("g", {
     id: "\u7F16\u7EC4",
     transform: "translate(2.000000, 2.000000)",
     fill: "#000000",
     "fill-rule": "nonzero"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("path", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("path", {
     d: "M1.07692308,17.4339622 C1.67169125,17.4339622 2.15384615,17.9161171 2.15384615,18.5108853 L2.15169231,24.8518084 L8.50424095,18.2911144 C8.91128276,17.8706218 9.58213195,17.8597178 10.0026246,18.2667596 L10.0077312,18.2717362 C10.4291221,18.6851765 10.4378354,19.3612143 10.0272402,19.7853779 L4.12030769,25.8856545 L10.2510885,25.8867924 C10.8346347,25.8867924 11.3076923,26.35985 11.3076923,26.9433963 C11.3076923,27.5269424 10.8346347,28 10.2510885,28 L1.0566038,28 C0.473057639,28 0,27.5269424 0,26.9433963 L0,18.5108853 C0,17.9161171 0.4821549,17.4339622 1.07692308,17.4339622 Z M26.9230769,16.9056604 C27.5178452,16.9056604 28,17.3878153 28,17.9825835 L28,17.9825835 L28,26.4150942 C28,26.9986405 27.5269424,27.4716981 26.9433963,27.4716981 L26.9433963,27.4716981 L17.7489115,27.4716981 C17.1653653,27.4716981 16.6923077,26.9986405 16.6923077,26.4150942 C16.6923077,25.8315482 17.1653653,25.3584905 17.7489115,25.3584905 L17.7489115,25.3584905 L25.8461538,25.3573527 L25.8461538,17.9825835 C25.8461538,17.3878153 26.3283087,16.9056604 26.9230769,16.9056604 Z M26.9433963,0 C27.5269424,0 28,0.473057639 28,1.0566038 L28,9.48911467 C28,10.0838829 27.5178452,10.5660378 26.9230769,10.5660378 C26.3283087,10.5660378 25.8461538,10.0838829 25.8461538,9.48911467 L25.8483077,3.1481916 L19.495759,9.70888562 C19.0887172,10.1293782 18.417868,10.1402822 17.9973754,9.73324042 L17.9922688,9.72826376 C17.5708779,9.31482358 17.5621646,8.63878569 17.9727599,8.21462222 L23.8796923,2.11434544 L17.7489115,2.11320756 C17.1653653,2.11320756 16.6923077,1.64014992 16.6923077,1.0566038 C16.6923077,0.473057639 17.1653653,0 17.7489115,0 L26.9433963,0 Z M10.2510885,0 C10.8346347,0 11.3076923,0.473057639 11.3076923,1.0566038 C11.3076923,1.64014992 10.8346347,2.11320756 10.2510885,2.11320756 L10.2510885,2.11320756 L2.15384615,2.11434544 L2.15384615,9.48911467 C2.15384615,10.0838829 1.67169125,10.5660378 1.07692308,10.5660378 C0.4821549,10.5660378 0,10.0838829 0,9.48911467 L0,9.48911467 L0,1.0566038 C0,0.473057639 0.473057639,0 1.0566038,0 L1.0566038,0 L10.2510885,0 Z",
     id: "\u5F62\u72B6",
     fill: "#666666"
-  }))))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
+  }))))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("span", {
     className: "kd-modal-expand-icon",
     onClick: function onClick() {
       return handleFullScreen('close');
     }
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("svg", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("svg", {
     width: "16px",
     height: "16px",
     viewBox: "0 0 32 32"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("g", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("g", {
     id: "1226-\u5173\u95ED\u5168\u5C4F",
     stroke: "none",
     "stroke-width": "1",
     fill: "none",
     "fill-rule": "evenodd"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("g", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("g", {
     id: "\u7F16\u7EC4",
     transform: "translate(4.000000, 4.000000)",
     fill: "#000000",
     "fill-rule": "nonzero"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("path", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("path", {
     d: "M15.9569224,17.3691573 L15.9569224,22.6490507 C15.9569224,23.385811 16.0714999,23.9626957 15.336072,23.9626957 C14.6019762,23.9626957 14.6566004,23.385811 14.6566004,22.6490507 L14.6566004,15.9875652 C14.6566004,15.5932053 14.8191407,15.2747863 15.076274,15.0549573 C15.3252286,14.7994658 15.66681,14.6553386 16.0235372,14.6552681 L22.6370601,14.6552681 C23.3711558,14.6552681 23.9520373,14.6073054 23.9520373,15.3427334 C23.9520373,16.0794937 23.3711558,15.9022982 22.6370601,15.9022982 L17.2545798,15.9022982 L15.9569224,17.367825 L15.9569224,17.3691573 Z M8.00977019,17.4064616 L6.7107805,15.9382702 L1.32963251,15.9382702 C0.595536804,15.9382702 0.0146552671,16.116798 0.0146552671,15.3800378 C0.0146552671,14.6446098 0.595536804,14.6939048 1.32963251,14.6939048 L7.94315534,14.6939048 C8.31486623,14.6939048 8.6492728,14.8471189 8.88908626,15.0935939 C9.16260631,15.3252747 9.31724071,15.6678192 9.31009215,16.0262018 L9.31009215,22.6876874 C9.31009215,23.4231154 9.36471634,24 8.63062063,24 C7.89519263,24 8.00977017,23.4231153 8.00977019,22.6863551 L8.00977019,17.4064616 L8.00977019,17.4064616 Z M15.9569224,6.59487065 L17.2559121,8.06172976 L22.6370601,8.06172976 C23.3711558,8.06172976 23.9520373,7.88453425 23.9520373,8.62129455 C23.9520373,9.35539026 23.3711558,9.30742755 22.6370601,9.30742755 L16.0235372,9.30742755 C15.66681,9.30735708 15.3252286,9.16322991 15.076274,8.90773844 C14.8032501,8.675801 14.649122,8.33329396 14.6566004,7.97513047 L14.6566004,1.31364494 C14.6552817,0.578216941 14.6019762,0 15.3347396,0 C16.0701676,0 15.9555901,0.578216941 15.9555901,1.31364494 L15.9555901,6.59487065 L15.9569224,6.59487065 Z M7.9951149,6.59487065 L7.9951149,1.31364494 C7.99378262,0.578216941 7.88053736,0 8.61596536,0 C9.34872876,0 9.29543688,0.578216941 9.29543688,1.31364494 L9.29543688,7.97513047 C9.30291535,8.33329396 9.14878718,8.675801 8.87576331,8.90773844 C8.62648612,9.16356115 8.2843572,9.30771659 7.92716776,9.30742755 L1.31497725,9.30742755 C0.579549251,9.30742755 0,9.35539026 0,8.61996227 C0,7.88453427 0.579549251,8.06172978 1.31497725,8.06172976 L6.69612523,8.06172976 L7.99378262,6.59487065 L7.9951149,6.59487065 Z",
     id: "\u5F62\u72B6",
     fill: "#666666"
   }))))));
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_12___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div", {
     className: signatureClass,
     ref: triggerRef,
     style: style
-  }, dataUrl ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_image__WEBPACK_IMPORTED_MODULE_9__["default"], {
+  }, dataUrl ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_image__WEBPACK_IMPORTED_MODULE_17__["default"], {
     className: "".concat(signaturePrefixCls, "-image"),
     preview: preview,
     src: dataUrl,
     title: "\u5220\u9664",
-    operations: !disabled ? [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_icon__WEBPACK_IMPORTED_MODULE_8__["default"], {
+    operations: !disabled ? [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_icon__WEBPACK_IMPORTED_MODULE_16__["default"], {
       type: "delete",
       key: "delete",
       onClick: function onClick() {
         return handleDelete();
       }
     })] : undefined
-  }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", {
+  }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div", {
     className: "".concat(signaturePrefixCls, "-empty"),
     onClick: handleOnClick
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_icon__WEBPACK_IMPORTED_MODULE_8__["default"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_icon__WEBPACK_IMPORTED_MODULE_16__["default"], {
     type: "edit"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", null, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.clickToSign))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_modal__WEBPACK_IMPORTED_MODULE_7__["default"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("span", null, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.clickToSign))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_modal__WEBPACK_IMPORTED_MODULE_15__["default"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
     width: containerWidth,
     height: containerHeight,
     ref: modalRef,
@@ -32700,10 +33156,10 @@ var Signature = function Signature(props) {
     visible: modalVisible,
     onOk: handleModalOk,
     onCancel: handleModalCancel,
-    resizable: true,
+    resizable: resizable,
     title: title || (signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.handwrittenSignature),
     titleIcon: canFullScreen && titleIcon,
-    body: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_drawingBoard__WEBPACK_IMPORTED_MODULE_11__["default"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, DrawingBoardProps, {
+    body: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_drawingBoard__WEBPACK_IMPORTED_MODULE_19__["default"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, DrawingBoardProps, {
       ref: modalBodyRef
     })),
     footer: footer
@@ -39922,7 +40378,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-var _excluded = ["prefixCls", "treeData", "virtual", "showIcon", "switcherIcon", "icon", "checkable", "checkStrictly", "disabled", "draggable", "scrollToKey", "expandedKeys", "checkedKeys", "defaultExpandRoot", "defaultExpandAll", "defaultExpandParent", "defaultExpandedKeys", "defaultCheckedKeys", "defaultSelectedKeys", "height", "onCheck", "onExpand", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect", "selectedKeys", "setTreeNodeStyle", "setTreeNodeClassName", "estimatedItemSize", "style", "className", "filterTreeNode", "filterValue", "expandOnClickNode", "onlyExpandOnClickIcon", "loadData", "notFoundContent", "showLine", "expandOnFilterNode"];
+var _excluded = ["prefixCls", "treeData", "virtual", "showIcon", "switcherIcon", "icon", "checkable", "checkStrictly", "disabled", "draggable", "scrollToKey", "expandedKeys", "checkedKeys", "defaultExpandRoot", "defaultExpandAll", "defaultExpandParent", "defaultExpandedKeys", "defaultCheckedKeys", "defaultSelectedKeys", "height", "onCheck", "onExpand", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect", "selectedKeys", "setTreeNodeStyle", "setTreeNodeClassName", "estimatedItemSize", "style", "className", "filterTreeNode", "filterValue", "expandOnClickNode", "onlyExpandOnClickIcon", "loadData", "notFoundContent", "showLine", "expandOnFilterNode", "renderExtra"];
 
 
 
@@ -40001,6 +40457,7 @@ var InternalTree = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_16___default.a.fo
     notFoundContent = TreeProps.notFoundContent,
     showLine = TreeProps.showLine,
     expandOnFilterNode = TreeProps.expandOnFilterNode,
+    renderExtra = TreeProps.renderExtra,
     others = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_4___default()(TreeProps, _excluded);
   var treePrefixCls = getPrefixCls(prefixCls, 'tree', customPrefixcls); // 树样式前缀
   var treeNodeClassName = classnames__WEBPACK_IMPORTED_MODULE_17___default()(className, (_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_3___default()(_classNames, "".concat(treePrefixCls), true), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_3___default()(_classNames, "".concat(treePrefixCls, "-show-line"), showLine), _classNames));
@@ -40349,6 +40806,7 @@ var InternalTree = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_16___default.a.fo
     item.isActiveLine = showLine && isSelectedNodeChildrenKey(item.pathParentKeys);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_16___default.a.createElement(_treeNode__WEBPACK_IMPORTED_MODULE_21__["default"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, item, {
       key: item.key,
+      renderExtra: renderExtra,
       ref: treeNodeRef,
       activeLevel: seletedKeyLevel
     }));
@@ -40590,7 +41048,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-var _excluded = ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "isActiveLine", "activeLevel", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "onlyExpandOnClickIcon", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"];
+var _excluded = ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "isActiveLine", "activeLevel", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "onlyExpandOnClickIcon", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect", "renderExtra"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_8___default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -40645,6 +41103,7 @@ var TreeNode = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.forwar
     onDragEnd = TreeNodeProps.onDragEnd,
     onDrop = TreeNodeProps.onDrop,
     onSelect = TreeNodeProps.onSelect,
+    renderExtra = TreeNodeProps.renderExtra,
     others = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_9___default()(TreeNodeProps, _excluded);
   var nodeData = react__WEBPACK_IMPORTED_MODULE_11___default.a.useMemo(function () {
     return _objectSpread({
@@ -40803,7 +41262,7 @@ var TreeNode = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.forwar
       className: classnames__WEBPACK_IMPORTED_MODULE_12___default()("".concat(treeNodePrefixCls, "-title"), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_8___default()({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
     }, title)) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("span", {
       className: classnames__WEBPACK_IMPORTED_MODULE_12___default()("".concat(treeNodePrefixCls, "-title"), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_8___default()({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
-    }, title), showDragLine && dropPosition === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("span", {
+    }, title), renderExtra === null || renderExtra === void 0 ? void 0 : renderExtra(nodeData), showDragLine && dropPosition === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("span", {
       className: classnames__WEBPACK_IMPORTED_MODULE_12___default()("".concat(treeNodePrefixCls, "-drag-line-bottom"))
     }))));
   };