@kdcloudjs/kdesign 1.8.22 → 1.8.24

package/es/color-picker/color-picker-panel.js

@@ -19,6 +19,8 @@ import { ChromePicker } from 'react-color';
 import devWarning from '../_utils/devwarning';
 import { useOnClickOutside } from '../_utils/hooks';
 import { isIE } from '../_utils/ieUtil';
+import { removeTransparency } from './utils/removeTransparency';
+import debounce from 'lodash/debounce';
 var ColorPickerPanel = function ColorPickerPanel(props) {
   var _classNames, _context, _context2, _context3, _context4, _context5;
   var setCorrectColorValue = props.setCorrectColorValue,
@@ -59,6 +61,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;
@@ -111,14 +114,15 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   };
   var handleClearClick = function handleClearClick() {
     var formatArr = colorFormat(defaultSystemColor, 0);
-    setPanelState(formatArr, defaultSystemColor, '', 0, '0%');
+    var defaultColor = colorFormat(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 = strFixed(Color(getColorObj(colorValue)).alpha(), 2);
     var formatArr = colorFormat(colorValue, colorLiAlpha);
-    var formatCorrectValue = removeTransparency(colorValue);
+    var formatCorrectValue = removeTransparency(colorValue, currentColorType);
     var formatInputValue = toUpCase(formatArr[valOfCorrespondingType(format)].value);
     setIsFollow(false);
     setAlpha(isFollow ? 1 : colorLiAlpha);
@@ -134,7 +138,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   var historicalColorClick = function historicalColorClick(index, colorValue) {
     var colorLiAlpha = strFixed(Color(getColorObj(colorValue)).alpha(), 2);
     var formatArr = colorFormat(colorValue, colorLiAlpha);
-    var formatCorrectValue = removeTransparency(colorValue);
+    var formatCorrectValue = removeTransparency(colorValue, currentColorType);
     var formatInputValue = toUpCase(formatArr[valOfCorrespondingType(format)].value);
     setIsFollow(false);
     setAlpha(isFollow ? 1 : colorLiAlpha);
@@ -154,15 +158,14 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
       return item.type === selectValue;
     })) === null || _a === void 0 ? void 0 : _a.value;
     setCorrectColorValue(colorFormat(colorStr, 1, selectValue, true));
-    setInputColorValue((_b = _findInstanceProperty(colTypeArr).call(colTypeArr, function (item) {
-      return item.type === format;
-    })) === null || _b === void 0 ? void 0 : _b.value);
-    onChange === null || onChange === void 0 ? void 0 : onChange((_c = _findInstanceProperty(colTypeArr).call(colTypeArr, function (item) {
-      return item.type === format;
-    })) === null || _c === void 0 ? void 0 : _c.value, colTypeArr);
-  };
-  var removeTransparency = function removeTransparency(color) {
-    return colorFormat(color, 1, currentColorType, true);
+    if (inputCorrectColorValue) {
+      setInputColorValue((_b = _findInstanceProperty(colTypeArr).call(colTypeArr, function (item) {
+        return item.type === format;
+      })) === null || _b === void 0 ? void 0 : _b.value);
+      onChange === null || onChange === void 0 ? void 0 : onChange((_c = _findInstanceProperty(colTypeArr).call(colTypeArr, function (item) {
+        return item.type === format;
+      })) === null || _c === void 0 ? void 0 : _c.value, colTypeArr);
+    }
   };
   var handleAlphaChange = function handleAlphaChange(e) {
     var regPercentage = /^(0|[1-9][0-9]?|100)%$/;
@@ -171,7 +174,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     var getColorFormat = function getColorFormat(alpha) {
       var formatArr = colorFormat(correctColorValue, alpha, 'all', true);
       var outValue = formatArr[valOfCorrespondingType(format)].value;
-      var innerInput = removeTransparency(outValue);
+      var innerInput = removeTransparency(outValue, currentColorType);
       return {
         formatArr: formatArr,
         outValue: outValue,
@@ -222,25 +225,25 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
       var formatArr = colorFormat(val, inputCorrectColorValue ? alpha : 1, 'all', true);
       var outValue = formatArr[valOfCorrespondingType(format)].value;
       if (value === undefined) {
-        var innerInput = removeTransparency(val);
+        var innerInput = 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, removeTransparency(correctColor, currentColorType), correctColor);
       }
       onChange === null || onChange === void 0 ? void 0 : onChange(outValue, formatArr);
     } else {
       if (!inputCorrectColorValue) {
         var _formatArr = colorFormat(correctColor, 1, 'all', true);
-        setPanelState(_formatArr, removeTransparency(correctColor), correctColor, 1, '100%');
+        setPanelState(_formatArr, removeTransparency(correctColor, currentColorType), removeTransparency(correctColor, format), 1, '100%');
         onChange === null || onChange === void 0 ? void 0 : onChange((_b = _findInstanceProperty(_formatArr).call(_formatArr, function (item) {
           return item.type === format;
         })) === null || _b === void 0 ? void 0 : _b.value, _formatArr);
       } else {
-        setPanelState(colTypeArr, removeTransparency(correctColor), correctColor);
+        setPanelState(colTypeArr, removeTransparency(correctColor, currentColorType), correctColor);
         onChange === null || onChange === void 0 ? void 0 : onChange((_c = _findInstanceProperty(colTypeArr).call(colTypeArr, function (item) {
           return item.type === format;
         })) === null || _c === void 0 ? void 0 : _c.value, colTypeArr);
@@ -264,7 +267,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
       var correctColor = (_a = _findInstanceProperty(colTypeArr).call(colTypeArr, function (item) {
         return item.type === format;
       })) === null || _a === void 0 ? void 0 : _a.value;
-      setPanelState(colTypeArr, removeTransparency(correctColor), correctColor);
+      setPanelState(colTypeArr, removeTransparency(correctColor, currentColorType), correctColor);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(outValue, formatArr);
   };
@@ -310,7 +313,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
           setIsFollow(switchValue);
           if (switchValue) {
             formatArr = colorFormat(functionalColor, alpha);
-            setPanelState(formatArr, removeTransparency(formatArr[valOfCorrespondingType(currentColorType)].value), functionalColorName, strFixed(Color(getColorObj(functionalColor)).alpha(), 2), strFixed(Color(getColorObj(functionalColor)).alpha(), 2) * 100 + '%');
+            setPanelState(formatArr, removeTransparency(formatArr[valOfCorrespondingType(currentColorType)].value, currentColorType), functionalColorName, strFixed(Color(getColorObj(functionalColor)).alpha(), 2), strFixed(Color(getColorObj(functionalColor)).alpha(), 2) * 100 + '%');
             setClickColorIndex(formatArr[0].value);
           } else {
             formatArr = colorFormat(defaultSystemColor, 1, 'all', true);
@@ -330,10 +333,9 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   var handleChromeChange = function handleChromeChange(color) {
     var formatArr = colorFormat(color.hex, inputCorrectColorValue ? color.rgb.a : 1);
     var colorObj = formatArr[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, 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);
@@ -352,6 +354,22 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     }
     showPanel && onVisibleChange && onVisibleChange(false);
   });
+  useEffect(function () {
+    if (showPanel) {
+      var scrollAlign = debounce(function (e) {
+        var _a;
+        var isPopperScroll = e.target === panelClsRef.current || ((_a = panelClsRef === null || panelClsRef === void 0 ? void 0 : panelClsRef.current) === null || _a === void 0 ? void 0 : _a.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]);
   useEffect(function () {
     if (!panelFormatConfig) return;
     if (!Array.isArray(panelFormatConfig.show) || panelFormatConfig.show.length === 0) {

package/es/color-picker/color-picker.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { IColorPickerProps } from './interface';
-declare const ColorPicker: FC<Partial<IColorPickerProps>>;
+import React from 'react';
+import { IColorPickerProps, IColorPickerInputRef } from './interface';
+declare const ColorPicker: React.ForwardRefExoticComponent<Partial<IColorPickerProps> & React.RefAttributes<IColorPickerInputRef>>;
 export default ColorPicker;

package/es/color-picker/color-picker.js

@@ -11,7 +11,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React, { useContext, useState, useRef, useEffect, useCallback } from 'react';
+import React, { useContext, useState, useRef, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
 import { Input } from '../index';
@@ -24,7 +24,8 @@ import Color from 'color';
 import { getCompProps } from '../_utils';
 import usePopper from '../_utils/usePopper';
 import { systemPresetColor } from './constant/systemPresetColor';
-var ColorPicker = function ColorPicker(props) {
+import { removeTransparency } from './utils/removeTransparency';
+var InternalColorPicker = function InternalColorPicker(props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
@@ -51,13 +52,15 @@ 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,
     onChange = colorPickerProps.onChange,
     onVisibleChange = colorPickerProps.onVisibleChange,
-    otherProps = __rest(colorPickerProps, ["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"]);
+    otherProps = __rest(colorPickerProps, ["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"]);
   var _useState = useState(defaultValue || ''),
     _useState2 = _slicedToArray(_useState, 2),
     inputColorValue = _useState2[0],
@@ -179,6 +182,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);
     }
@@ -203,14 +207,22 @@ var ColorPicker = function ColorPicker(props) {
       }
     }
   }, [value, defaultValue]);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: inputRef.current
+    };
+  });
   var beforeIcon = useCallback(function () {
     var _classNames2;
     var afterIconContainerCls = classNames("".concat(colorPickerPrefixCls, "-icon"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(colorPickerPrefixCls, "-icon-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(colorPickerPrefixCls, "-icon-bordered"), borderType === 'bordered'), _classNames2));
+    var getBgc = function getBgc() {
+      return inputCorrectColorValue ? colTypeArr[2].value : removeTransparency(colTypeArr[2].value, 'RGB');
+    };
     var noneLineCls = "".concat(colorPickerPrefixCls, "-icon-no-color-line");
     return React.createElement("div", {
       className: afterIconContainerCls,
       style: {
-        backgroundColor: "".concat(colTypeArr[2].value || defaultSystemColor)
+        backgroundColor: getBgc() || defaultSystemColor
       }
     }, !validateColor(value) && !inputCorrectColorValue && React.createElement("div", {
       className: noneLineCls
@@ -223,6 +235,7 @@ var ColorPicker = function ColorPicker(props) {
   }, React.createElement(Input, {
     borderType: pure ? 'bordered' : borderType,
     placeholder: placeholder,
+    disabled: disabled,
     value: value !== null && value !== void 0 ? value : inputColorValue,
     className: inputCls,
     onChange: handleChange,
@@ -251,6 +264,7 @@ var ColorPicker = function ColorPicker(props) {
     panelFormatConfig: panelFormatConfig,
     presetColor: presetColor,
     historicalColor: historicalColor,
+    scrollHidden: scrollHidden,
     value: value,
     visible: visible,
     showPanel: showPanel,
@@ -290,5 +304,6 @@ var ColorPicker = function ColorPicker(props) {
   });
   return usePopper(colorInputEle, panel, popperProps);
 };
+var ColorPicker = forwardRef(InternalColorPicker);
 ColorPicker.displayName = 'ColorPicker';
 export default ColorPicker;

package/es/color-picker/interface.d.ts

@@ -6,6 +6,9 @@ export interface IColorTypesObj {
     type: ColorType;
     value: string;
 }
+export interface IColorPickerInputRef {
+    dom: HTMLDivElement | null;
+}
 export declare const BorderTypes: ["underline", "bordered"];
 export declare type BorderType = typeof BorderTypes[number];
 export interface IInnerFormat {
@@ -15,8 +18,10 @@ export interface IInnerFormat {
 export interface IColorPickerProps extends PopperProps {
     borderType: BorderType;
     className: string;
+    children: ReactNode;
     defaultValue: string;
     defaultOpen: boolean;
+    disabled: boolean;
     functionalColorName: string;
     functionalColor: string;
     format: Exclude<typeof ColorTypes[number], 'themeColor'>;
@@ -83,6 +88,7 @@ export interface IColorPickerPanelProps {
     value: string;
     visible: boolean;
     showPanel: boolean;
+    scrollHidden: boolean;
     setCurrentColorType: (currentColorType: IColorTypesObj['type']) => void;
     setColTypeArr: (colTypeArr: Array<IColorTypesObj>) => void;
     setClickedPresetColorIndex: (clickedColorIndex: number) => void;

package/es/color-picker/style/index.css

@@ -136,7 +136,6 @@
   height: 100%;
   width: 100%;
   padding: 0 8px;
-  border-bottom: 1px solid #d9d9d9;
   font-size: var(--kd-c-color-picker-input-font-size, var(--kd-g-font-size-middle, 14px));
 }
 .kd-color-picker-container .kd-color-picker-icon-container {
@@ -171,15 +170,27 @@
   width: var(--kd-c-color-picker-panel-sizing-width, 304px);
 }
 .kd-color-picker-pop.topLeft.hidden,
+.kd-color-picker-pop.topRight.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+}
+.kd-color-picker-pop.topLeft,
+.kd-color-picker-pop.topRight {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+}
 .kd-color-picker-pop.bottomLeft.hidden,
-.kd-color-picker-pop.topRight.hidden,
 .kd-color-picker-pop.bottomRight.hidden {
-  opacity: 0;
-  visibility: hidden;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+}
+.kd-color-picker-pop.bottomLeft,
+.kd-color-picker-pop.bottomRight {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
 }
 .kd-color-picker-pop .kd-color-picker-panel {
+  position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: var(--kd-c-color-picker-panel-sizing-width, 304px);
@@ -371,6 +382,8 @@
 }
 .kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select .kd-select,
 .kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select .kd-select-selection-item {
+  min-height: unset;
+  line-height: unset;
   overflow: visible;
   text-overflow: unset;
 }

package/es/color-picker/style/index.less

@@ -36,7 +36,6 @@
     height: 100%;
     width: 100%;
     padding: 0 8px;
-    border-bottom: 1px solid rgba(217, 217, 217, 1);
     font-size: @color-picker-input-font-size;
   }
 
@@ -70,15 +69,27 @@
   width: @color-picker-panel-sizing-width;
 
   &.topLeft.hidden,
+  &.topRight.hidden {
+    animation-name: kdSlideDownOut;
+  }
+
+  &.topLeft,
+  &.topRight {
+    animation-name: kdSlideDownIn;
+  }
+
   &.bottomLeft.hidden,
-  &.topRight.hidden,
   &.bottomRight.hidden {
-    opacity: 0;
-    visibility: hidden;
-    transition: all calc(@transition-duration - 0.1s) @ease;
+    animation-name: kdSlideUpOut;
+  }
+
+  &.bottomLeft,
+  &.bottomRight {
+    animation-name: kdSlideUpIn;
   }
 
   .@{color-picker-prefix-cls}-panel {
+    position: relative;
     box-sizing: border-box;
     width: @color-picker-panel-sizing-width;
     padding: 4px 12px 16px;
@@ -298,6 +309,8 @@
 
           .@{kd-prefix}-select,
           .@{kd-prefix}-select-selection-item {
+            min-height: unset;
+            line-height: unset;
             overflow: visible;
             text-overflow: unset;
           }

package/es/color-picker/utils/removeTransparency.d.ts

@@ -0,0 +1,3 @@
+import { ColorTypes } from '../interface';
+export declare type ICurrentColorType = Exclude<typeof ColorTypes[number], 'themeColor'>;
+export declare const removeTransparency: (color: string, currentColorType: ICurrentColorType) => string;

package/es/color-picker/utils/removeTransparency.js

@@ -0,0 +1,4 @@
+import { colorFormat } from './colorFormat';
+export var removeTransparency = function removeTransparency(color, currentColorType) {
+  return colorFormat(color, 1, currentColorType, true);
+};

package/es/config-provider/compDefaultProps.d.ts

@@ -73,6 +73,7 @@ declare const compDefaultProps: {
             internationalName: string;
         };
         placeholder: string;
+        scrollHidden: boolean;
         pure: boolean;
         showAlphaInput: boolean;
         showClear: boolean;

package/es/config-provider/compDefaultProps.js

@@ -72,6 +72,7 @@ var compDefaultProps = {
       internationalName: 'followFunctionalColor'
     },
     placeholder: '#',
+    scrollHidden: false,
     pure: false,
     showAlphaInput: true,
     showClear: true,

package/es/icon/icon.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -34,7 +35,8 @@ var InternalIcon = function InternalIcon(props, ref) {
   var innerRef = React.useRef();
   var iconRef = ref || innerRef;
   var iconPrefix = getPrefixCls(prefixCls, 'icon', customPrefixcls);
-  var iconPrefixCls = iconPrefix.replace(/-/g, '');
+  var lastDashIndex = iconPrefix.lastIndexOf('-');
+  var iconPrefixCls = lastDashIndex > -1 ? _sliceInstanceProperty(iconPrefix).call(iconPrefix, 0, lastDashIndex) + _sliceInstanceProperty(iconPrefix).call(iconPrefix, lastDashIndex + 1) : iconPrefix;
   var iconClass = classNames(iconPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(iconPrefixCls, "-")).call(_context, type), type), _defineProperty(_classNames, "icon-spin", spin), _classNames));
   var handleClick = function handleClick(e) {
     onClick && onClick(e);

package/es/input/style/index.css

@@ -236,7 +236,7 @@ textarea {
 .kd-input-disabled {
   background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-input-affix-color-text, #666);
+  color: var(--kd-g-color-text-primary, #212121);
   cursor: not-allowed;
 }
 .kd-input-underline.kd-input-disabled {
@@ -372,7 +372,7 @@ textarea {
       -ms-flex-pack: center;
           justify-content: center;
   word-break: keep-all;
-  color: var(--kd-c-input-affix-color-text, #666);
+  color: var(--kd-c-input-affix-color-text, #999);
 }
 .kd-input-wrapper-size-small {
   height: var(--kd-c-input-sizing-height-small, 20px);
@@ -571,7 +571,7 @@ textarea {
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon {
   position: relative;
-  color: var(--kd-c-input-affix-color-text, #666);
+  color: var(--kd-c-input-affix-color-text, #999);
   padding: 0 9px;
   font-weight: 400;
   font-size: 14px;

package/es/input/style/index.less

@@ -78,7 +78,7 @@ textarea {
   &-disabled {
     background-color: @input-background-color-disabled-inner;
     border-color: @input-border-color-disabled-inner;
-    color: @input-affix-color;
+    color: @color-text-primary;
     cursor: not-allowed;
   }
 

package/es/input/style/token.less

@@ -14,7 +14,7 @@
 @input-border-color-disabled-inner: var(~'@{input-prefix}-color-border-disabled', @color-border-strong);
 @input-underline-border-color-disabled-inner: var(~'@{input-prefix}-underline-color-border-disabled', @color-border-weak);
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
-@input-affix-color: var(~'@{input-prefix}-affix-color-text', #666);
+@input-affix-color: var(~'@{input-prefix}-affix-color-text', #999);
 @input-error-color: var(~'@{input-prefix}-color-error', @color-error);
 
 // font

package/lib/color-picker/color-picker-panel.js

@@ -29,6 +29,8 @@ var _reactColor = require("react-color");
 var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
 var _hooks = require("../_utils/hooks");
 var _ieUtil = require("../_utils/ieUtil");
+var _removeTransparency = require("./utils/removeTransparency");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var ColorPickerPanel = function ColorPickerPanel(props) {
@@ -71,6 +73,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;
@@ -123,14 +126,15 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   };
   var handleClearClick = function handleClearClick() {
     var formatArr = (0, _colorFormat.colorFormat)(_defaultColor.defaultSystemColor, 0);
-    setPanelState(formatArr, _defaultColor.defaultSystemColor, '', 0, '0%');
+    var defaultColor = (0, _colorFormat.colorFormat)(_defaultColor.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 = (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(colorValue)).alpha(), 2);
     var formatArr = (0, _colorFormat.colorFormat)(colorValue, colorLiAlpha);
-    var formatCorrectValue = removeTransparency(colorValue);
+    var formatCorrectValue = (0, _removeTransparency.removeTransparency)(colorValue, currentColorType);
     var formatInputValue = (0, _convertLetters.toUpCase)(formatArr[(0, _colorFormat.valOfCorrespondingType)(format)].value);
     setIsFollow(false);
     setAlpha(isFollow ? 1 : colorLiAlpha);
@@ -146,7 +150,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   var historicalColorClick = function historicalColorClick(index, colorValue) {
     var colorLiAlpha = (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(colorValue)).alpha(), 2);
     var formatArr = (0, _colorFormat.colorFormat)(colorValue, colorLiAlpha);
-    var formatCorrectValue = removeTransparency(colorValue);
+    var formatCorrectValue = (0, _removeTransparency.removeTransparency)(colorValue, currentColorType);
     var formatInputValue = (0, _convertLetters.toUpCase)(formatArr[(0, _colorFormat.valOfCorrespondingType)(format)].value);
     setIsFollow(false);
     setAlpha(isFollow ? 1 : colorLiAlpha);
@@ -166,15 +170,14 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
       return item.type === selectValue;
     })) === null || _a === void 0 ? void 0 : _a.value;
     setCorrectColorValue((0, _colorFormat.colorFormat)(colorStr, 1, selectValue, true));
-    setInputColorValue((_b = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
-      return item.type === format;
-    })) === null || _b === void 0 ? void 0 : _b.value);
-    onChange === null || onChange === void 0 ? void 0 : onChange((_c = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
-      return item.type === format;
-    })) === null || _c === void 0 ? void 0 : _c.value, colTypeArr);
-  };
-  var removeTransparency = function removeTransparency(color) {
-    return (0, _colorFormat.colorFormat)(color, 1, currentColorType, true);
+    if (inputCorrectColorValue) {
+      setInputColorValue((_b = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
+        return item.type === format;
+      })) === null || _b === void 0 ? void 0 : _b.value);
+      onChange === null || onChange === void 0 ? void 0 : onChange((_c = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
+        return item.type === format;
+      })) === null || _c === void 0 ? void 0 : _c.value, colTypeArr);
+    }
   };
   var handleAlphaChange = function handleAlphaChange(e) {
     var regPercentage = /^(0|[1-9][0-9]?|100)%$/;
@@ -183,7 +186,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     var getColorFormat = function getColorFormat(alpha) {
       var formatArr = (0, _colorFormat.colorFormat)(correctColorValue, alpha, 'all', true);
       var outValue = formatArr[(0, _colorFormat.valOfCorrespondingType)(format)].value;
-      var innerInput = removeTransparency(outValue);
+      var innerInput = (0, _removeTransparency.removeTransparency)(outValue, currentColorType);
       return {
         formatArr: formatArr,
         outValue: outValue,
@@ -234,25 +237,25 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
       var formatArr = (0, _colorFormat.colorFormat)(val, inputCorrectColorValue ? alpha : 1, 'all', true);
       var outValue = formatArr[(0, _colorFormat.valOfCorrespondingType)(format)].value;
       if (value === undefined) {
-        var innerInput = removeTransparency(val);
+        var innerInput = (0, _removeTransparency.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, (0, _removeTransparency.removeTransparency)(correctColor, currentColorType), correctColor);
       }
       onChange === null || onChange === void 0 ? void 0 : onChange(outValue, formatArr);
     } else {
       if (!inputCorrectColorValue) {
         var _formatArr = (0, _colorFormat.colorFormat)(correctColor, 1, 'all', true);
-        setPanelState(_formatArr, removeTransparency(correctColor), correctColor, 1, '100%');
+        setPanelState(_formatArr, (0, _removeTransparency.removeTransparency)(correctColor, currentColorType), (0, _removeTransparency.removeTransparency)(correctColor, format), 1, '100%');
         onChange === null || onChange === void 0 ? void 0 : onChange((_b = (0, _find.default)(_formatArr).call(_formatArr, function (item) {
           return item.type === format;
         })) === null || _b === void 0 ? void 0 : _b.value, _formatArr);
       } else {
-        setPanelState(colTypeArr, removeTransparency(correctColor), correctColor);
+        setPanelState(colTypeArr, (0, _removeTransparency.removeTransparency)(correctColor, currentColorType), correctColor);
         onChange === null || onChange === void 0 ? void 0 : onChange((_c = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
           return item.type === format;
         })) === null || _c === void 0 ? void 0 : _c.value, colTypeArr);
@@ -276,7 +279,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
       var correctColor = (_a = (0, _find.default)(colTypeArr).call(colTypeArr, function (item) {
         return item.type === format;
       })) === null || _a === void 0 ? void 0 : _a.value;
-      setPanelState(colTypeArr, removeTransparency(correctColor), correctColor);
+      setPanelState(colTypeArr, (0, _removeTransparency.removeTransparency)(correctColor, currentColorType), correctColor);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(outValue, formatArr);
   };
@@ -322,7 +325,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
           setIsFollow(switchValue);
           if (switchValue) {
             formatArr = (0, _colorFormat.colorFormat)(functionalColor, alpha);
-            setPanelState(formatArr, removeTransparency(formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value), functionalColorName, (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(functionalColor)).alpha(), 2), (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(functionalColor)).alpha(), 2) * 100 + '%');
+            setPanelState(formatArr, (0, _removeTransparency.removeTransparency)(formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value, currentColorType), functionalColorName, (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(functionalColor)).alpha(), 2), (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(functionalColor)).alpha(), 2) * 100 + '%');
             setClickColorIndex(formatArr[0].value);
           } else {
             formatArr = (0, _colorFormat.colorFormat)(_defaultColor.defaultSystemColor, 1, 'all', true);
@@ -342,10 +345,9 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   var handleChromeChange = function handleChromeChange(color) {
     var formatArr = (0, _colorFormat.colorFormat)(color.hex, inputCorrectColorValue ? color.rgb.a : 1);
     var colorObj = formatArr[(0, _colorFormat.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, (0, _removeTransparency.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);
@@ -364,6 +366,22 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     }
     showPanel && onVisibleChange && onVisibleChange(false);
   });
+  (0, _react.useEffect)(function () {
+    if (showPanel) {
+      var scrollAlign = (0, _debounce.default)(function (e) {
+        var _a;
+        var isPopperScroll = e.target === panelClsRef.current || ((_a = panelClsRef === null || panelClsRef === void 0 ? void 0 : panelClsRef.current) === null || _a === void 0 ? void 0 : _a.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]);
   (0, _react.useEffect)(function () {
     if (!panelFormatConfig) return;
     if (!Array.isArray(panelFormatConfig.show) || panelFormatConfig.show.length === 0) {