@kdcloudjs/kdesign 1.8.22 → 1.8.24

package/dist/kdesign.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.8.22
+ *   @kdcloudjs/kdesign v1.8.24
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -9766,6 +9766,9 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
+/* harmony import */ var _utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./utils/removeTransparency */ "./components/color-picker/utils/removeTransparency.ts");
+/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! lodash/debounce */ "./node_modules/lodash/debounce.js");
+/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_33___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_33__);
 
 
 
@@ -9801,6 +9804,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 
 
+
+
 var ColorPickerPanel = function ColorPickerPanel(props) {
   var _classNames;
   var setCorrectColorValue = props.setCorrectColorValue,
@@ -9841,6 +9846,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     showColorPickerBox = props.showColorPickerBox,
     showColorPickerPanel = props.showColorPickerPanel,
     showAlphaInput = props.showAlphaInput,
+    scrollHidden = props.scrollHidden,
     value = props.value,
     visible = props.visible,
     showPanel = props.showPanel;
@@ -9893,14 +9899,15 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   };
   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%');
+    var defaultColor = Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["colorFormat"])(_constant_defaultColor__WEBPACK_IMPORTED_MODULE_24__["defaultSystemColor"], 1, currentColorType, true);
+    setPanelState(formatArr, defaultColor, '', 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 formatCorrectValue = Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__["removeTransparency"])(colorValue, currentColorType);
     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);
@@ -9916,7 +9923,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   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 formatCorrectValue = Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__["removeTransparency"])(colorValue, currentColorType);
     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);
@@ -9930,21 +9937,21 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     onChange === null || onChange === void 0 ? void 0 : onChange(formatInputValue, formatArr);
   };
   var handleTypeChange = function handleTypeChange(selectValue) {
-    var _colTypeArr$find, _colTypeArr$find2, _colTypeArr$find3;
+    var _colTypeArr$find;
     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);
+    if (inputCorrectColorValue) {
+      var _colTypeArr$find2, _colTypeArr$find3;
+      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 handleAlphaChange = function handleAlphaChange(e) {
     var regPercentage = /^(0|[1-9][0-9]?|100)%$/;
@@ -9953,7 +9960,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     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);
+      var innerInput = Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__["removeTransparency"])(outValue, currentColorType);
       return {
         formatArr: formatArr,
         outValue: outValue,
@@ -10004,27 +10011,27 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
       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);
+        var innerInput = Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__["removeTransparency"])(val, currentColorType);
         if (!inputCorrectColorValue) {
           setPanelState(formatArr, innerInput, outValue, 1, '100%');
         } else {
           setPanelState(formatArr, innerInput, outValue);
         }
       } else if (onChange === undefined) {
-        setPanelState(colTypeArr, removeTransparency(correctColor), correctColor);
+        setPanelState(colTypeArr, Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__["removeTransparency"])(correctColor, currentColorType), 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%');
+        setPanelState(_formatArr, Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__["removeTransparency"])(correctColor, currentColorType), Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__["removeTransparency"])(correctColor, format), 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);
+        setPanelState(colTypeArr, Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__["removeTransparency"])(correctColor, currentColorType), 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);
@@ -10048,7 +10055,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
       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);
+      setPanelState(colTypeArr, Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__["removeTransparency"])(correctColor, currentColorType), correctColor);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(outValue, formatArr);
   };
@@ -10094,7 +10101,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
           setIsFollow(switchValue);
           if (switchValue) {
             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 + '%');
+            setPanelState(formatArr, Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__["removeTransparency"])(formatArr[Object(_utils_colorFormat__WEBPACK_IMPORTED_MODULE_23__["valOfCorrespondingType"])(currentColorType)].value, currentColorType), 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 = colorFormat(correctColorValue, alpha, 'all', true) as IColorTypesObj[]
@@ -10122,10 +10129,9 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   var handleChromeChange = function handleChromeChange(color) {
     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, removeTransparency(colorObj.value), colorObj.value, inputCorrectColorValue ? color.rgb.a : 1, inputCorrectColorValue ? (color.rgb.a * 100).toFixed() + '%' : '100%');
+      setPanelState(formatArr, Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_32__["removeTransparency"])(colorObj.value, currentColorType), colorObj.value, inputCorrectColorValue ? color.rgb.a : 1, inputCorrectColorValue ? (color.rgb.a * 100).toFixed() + '%' : '100%');
       setClickColorIndex(formatArr[0].value);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(colorObj.value, formatArr);
@@ -10144,6 +10150,22 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     }
     showPanel && onVisibleChange && onVisibleChange(false);
   });
+  Object(react__WEBPACK_IMPORTED_MODULE_18__["useEffect"])(function () {
+    if (showPanel) {
+      var scrollAlign = lodash_debounce__WEBPACK_IMPORTED_MODULE_33___default()(function (e) {
+        var _panelClsRef$current;
+        var isPopperScroll = e.target === panelClsRef.current || (panelClsRef === null || panelClsRef === void 0 ? void 0 : (_panelClsRef$current = panelClsRef.current) === null || _panelClsRef$current === void 0 ? void 0 : _panelClsRef$current.contains(e.target));
+        if (scrollHidden && !isPopperScroll) {
+          visible === undefined && setShowPanel(!showPanel);
+          onVisibleChange && onVisibleChange(false);
+        }
+      }, 10);
+      document.addEventListener('scroll', scrollAlign, true);
+      return function () {
+        document.removeEventListener('scroll', scrollAlign, true);
+      };
+    }
+  }, [showPanel]);
   Object(react__WEBPACK_IMPORTED_MODULE_18__["useEffect"])(function () {
     if (!panelFormatConfig) return;
     if (!Array.isArray(panelFormatConfig.show) || panelFormatConfig.show.length === 0) {
@@ -10337,10 +10359,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../_utils */ "./components/_utils/index.ts");
 /* harmony import */ var _utils_usePopper__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../_utils/usePopper */ "./components/_utils/usePopper.tsx");
 /* harmony import */ var _constant_systemPresetColor__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./constant/systemPresetColor */ "./components/color-picker/constant/systemPresetColor.ts");
+/* harmony import */ var _utils_removeTransparency__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./utils/removeTransparency */ "./components/color-picker/utils/removeTransparency.ts");
 
 
 
-var _excluded = ["value", "className", "style", "pure", "functionalColor", "functionalColorName", "switchName", "showAlphaInput", "showClear", "showSwitch", "showColorTransfer", "showPresetColor", "showColorPickerBox", "format", "panelFormatConfig", "borderType", "presetColor", "historicalColor", "placeholder", "defaultValue", "defaultOpen", "visible", "popperClassName", "suffixIcon", "prefixIcon", "onChange", "onVisibleChange"];
+var _excluded = ["value", "className", "style", "pure", "functionalColor", "functionalColorName", "switchName", "showAlphaInput", "showClear", "showSwitch", "showColorTransfer", "showPresetColor", "showColorPickerBox", "format", "panelFormatConfig", "borderType", "presetColor", "historicalColor", "placeholder", "defaultValue", "defaultOpen", "disabled", "visible", "scrollHidden", "popperClassName", "suffixIcon", "prefixIcon", "onChange", "onVisibleChange"];
 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; }
 
@@ -10365,7 +10388,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 
 
-var ColorPicker = function ColorPicker(props) {
+
+var InternalColorPicker = function InternalColorPicker(props, ref) {
   var _useContext = Object(react__WEBPACK_IMPORTED_MODULE_12__["useContext"])(_config_provider__WEBPACK_IMPORTED_MODULE_14__["ConfigContext"]),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
@@ -10392,7 +10416,9 @@ var ColorPicker = function ColorPicker(props) {
     placeholder = colorPickerProps.placeholder,
     defaultValue = colorPickerProps.defaultValue,
     defaultOpen = colorPickerProps.defaultOpen,
+    disabled = colorPickerProps.disabled,
     visible = colorPickerProps.visible,
+    scrollHidden = colorPickerProps.scrollHidden,
     popperClassName = colorPickerProps.popperClassName,
     suffixIcon = colorPickerProps.suffixIcon,
     prefixIcon = colorPickerProps.prefixIcon,
@@ -10520,6 +10546,7 @@ var ColorPicker = function ColorPicker(props) {
     onChange === null || onChange === void 0 ? void 0 : onChange(getCurrentOutputColor(), formatArr);
   };
   var handleClick = function handleClick() {
+    if (disabled) return;
     if (typeof visible === 'undefined') {
       setShowPanel(!showPanel);
     }
@@ -10544,14 +10571,22 @@ var ColorPicker = function ColorPicker(props) {
       }
     }
   }, [value, defaultValue]);
+  Object(react__WEBPACK_IMPORTED_MODULE_12__["useImperativeHandle"])(ref, function () {
+    return {
+      dom: inputRef.current
+    };
+  });
   var beforeIcon = Object(react__WEBPACK_IMPORTED_MODULE_12__["useCallback"])(function () {
     var _classNames2;
     var afterIconContainerCls = classnames__WEBPACK_IMPORTED_MODULE_13___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 getBgc = function getBgc() {
+      return inputCorrectColorValue ? colTypeArr[2].value : Object(_utils_removeTransparency__WEBPACK_IMPORTED_MODULE_25__["removeTransparency"])(colTypeArr[2].value, 'RGB');
+    };
     var noneLineCls = "".concat(colorPickerPrefixCls, "-icon-no-color-line");
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div", {
       className: afterIconContainerCls,
       style: {
-        backgroundColor: "".concat(colTypeArr[2].value || _constant_defaultColor__WEBPACK_IMPORTED_MODULE_20__["defaultSystemColor"])
+        backgroundColor: getBgc() || _constant_defaultColor__WEBPACK_IMPORTED_MODULE_20__["defaultSystemColor"]
       }
     }, !Object(_utils_validateColor__WEBPACK_IMPORTED_MODULE_16__["validateColor"])(value) && !inputCorrectColorValue && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div", {
       className: noneLineCls
@@ -10564,6 +10599,7 @@ var ColorPicker = function ColorPicker(props) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement(_index__WEBPACK_IMPORTED_MODULE_15__["Input"], {
     borderType: pure ? 'bordered' : borderType,
     placeholder: placeholder,
+    disabled: disabled,
     value: value !== null && value !== void 0 ? value : inputColorValue,
     className: inputCls,
     onChange: handleChange,
@@ -10594,6 +10630,7 @@ var ColorPicker = function ColorPicker(props) {
     panelFormatConfig: panelFormatConfig,
     presetColor: presetColor,
     historicalColor: historicalColor,
+    scrollHidden: scrollHidden,
     value: value,
     visible: visible,
     showPanel: showPanel,
@@ -10635,6 +10672,7 @@ var ColorPicker = function ColorPicker(props) {
   });
   return Object(_utils_usePopper__WEBPACK_IMPORTED_MODULE_23__["default"])(colorInputEle, panel, popperProps);
 };
+var ColorPicker = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_12__["forwardRef"])(InternalColorPicker);
 ColorPicker.displayName = 'ColorPicker';
 /* harmony default export */ __webpack_exports__["default"] = (ColorPicker);
 
@@ -10962,6 +11000,24 @@ function toLowerCase(str) {
 
 /***/ }),
 
+/***/ "./components/color-picker/utils/removeTransparency.ts":
+/*!*************************************************************!*\
+  !*** ./components/color-picker/utils/removeTransparency.ts ***!
+  \*************************************************************/
+/*! exports provided: removeTransparency */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeTransparency", function() { return removeTransparency; });
+/* harmony import */ var _colorFormat__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./colorFormat */ "./components/color-picker/utils/colorFormat.ts");
+
+var removeTransparency = function removeTransparency(color, currentColorType) {
+  return Object(_colorFormat__WEBPACK_IMPORTED_MODULE_0__["colorFormat"])(color, 1, currentColorType, true);
+};
+
+/***/ }),
+
 /***/ "./components/color-picker/utils/validateColor.ts":
 /*!********************************************************!*\
   !*** ./components/color-picker/utils/validateColor.ts ***!
@@ -11125,6 +11181,7 @@ var compDefaultProps = {
       internationalName: 'followFunctionalColor'
     },
     placeholder: '#',
+    scrollHidden: false,
     pure: false,
     showAlphaInput: true,
     showClear: true,
@@ -20839,32 +20896,30 @@ __webpack_require__.r(__webpack_exports__);
 /* 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_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
 /* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_3__ = __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_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_regexp_exec_js__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var core_js_modules_es_string_replace_js__WEBPACK_IMPORTED_MODULE_4__ = __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_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_replace_js__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_5__ = __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_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_6__ = __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_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_7__ = __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_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_8__ = __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_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_9__ = __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_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_10__ = __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_10___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_10__);
-/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_11__ = __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_11___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_11__);
-/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_12__ = __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_12___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_12__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_13__);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_14__);
-/* harmony import */ var _config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../config-provider/ConfigContext */ "./components/config-provider/ConfigContext.tsx");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../_utils */ "./components/_utils/index.ts");
+/* harmony import */ var core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.array.slice.js */ "./node_modules/core-js/modules/es.array.slice.js");
+/* harmony import */ var core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_slice_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_4__ = __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_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat_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");
 
 
 
@@ -20884,14 +20939,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 
 
-
 var InternalIcon = function InternalIcon(props, ref) {
   var _classNames;
-  var _useContext = Object(react__WEBPACK_IMPORTED_MODULE_13__["useContext"])(_config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_15__["default"]),
+  var _useContext = Object(react__WEBPACK_IMPORTED_MODULE_12__["useContext"])(_config_provider_ConfigContext__WEBPACK_IMPORTED_MODULE_14__["default"]),
     getPrefixCls = _useContext.getPrefixCls,
     userDefaultProps = _useContext.compDefaultProps,
     prefixCls = _useContext.prefixCls;
-  var iconProps = Object(_utils__WEBPACK_IMPORTED_MODULE_16__["getCompProps"])('Icon', userDefaultProps, props);
+  var iconProps = Object(_utils__WEBPACK_IMPORTED_MODULE_15__["getCompProps"])('Icon', userDefaultProps, props);
   var type = iconProps.type,
     spin = iconProps.spin,
     style = iconProps.style,
@@ -20902,12 +20956,13 @@ var InternalIcon = function InternalIcon(props, ref) {
     onMouseEnter = iconProps.onMouseEnter,
     onMouseLeave = iconProps.onMouseLeave,
     others = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(iconProps, _excluded);
-  var innerRef = react__WEBPACK_IMPORTED_MODULE_13___default.a.useRef();
+  var innerRef = react__WEBPACK_IMPORTED_MODULE_12___default.a.useRef();
   var iconRef = ref || innerRef;
   var iconPrefix = getPrefixCls(prefixCls, 'icon', customPrefixcls);
-  var iconPrefixCls = iconPrefix.replace(/-/g, '');
+  var lastDashIndex = iconPrefix.lastIndexOf('-');
+  var iconPrefixCls = lastDashIndex > -1 ? iconPrefix.slice(0, lastDashIndex) + iconPrefix.slice(lastDashIndex + 1) : iconPrefix;
   // 兼容之前的类名写法 将kd-icon改为kdicon
-  var iconClass = classnames__WEBPACK_IMPORTED_MODULE_14___default()(iconPrefixCls, className, (_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames, "".concat(iconPrefixCls, "-").concat(type), type), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames, "icon-spin", spin), _classNames));
+  var iconClass = classnames__WEBPACK_IMPORTED_MODULE_13___default()(iconPrefixCls, className, (_classNames = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames, "".concat(iconPrefixCls, "-").concat(type), type), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(_classNames, "icon-spin", spin), _classNames));
   var handleClick = function handleClick(e) {
     onClick && onClick(e);
   };
@@ -20921,7 +20976,7 @@ var InternalIcon = function InternalIcon(props, ref) {
   if (rotate !== undefined) {
     iconStyle.transform = "rotate(".concat(rotate, "deg)");
   }
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_13___default.a.createElement("i", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("i", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
     className: iconClass,
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
@@ -20931,7 +20986,7 @@ var InternalIcon = function InternalIcon(props, ref) {
     ref: iconRef
   }));
 };
-var Icon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_13___default.a.forwardRef(InternalIcon);
+var Icon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_12___default.a.forwardRef(InternalIcon);
 Icon.displayName = 'Icon';
 /* harmony default export */ __webpack_exports__["default"] = (Icon);