@kdcloudjs/kdesign 1.8.19 → 1.8.21

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

@@ -1,7 +1,16 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import React, { useContext, useState, useRef, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
@@ -43,10 +52,12 @@ var ColorPicker = function ColorPicker(props) {
     defaultValue = colorPickerProps.defaultValue,
     defaultOpen = colorPickerProps.defaultOpen,
     visible = colorPickerProps.visible,
+    popperClassName = colorPickerProps.popperClassName,
     suffixIcon = colorPickerProps.suffixIcon,
     prefixIcon = colorPickerProps.prefixIcon,
     onChange = colorPickerProps.onChange,
-    onVisibleChange = colorPickerProps.onVisibleChange;
+    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"]);
   var _useState = useState(defaultValue || ''),
     _useState2 = _slicedToArray(_useState, 2),
     inputColorValue = _useState2[0],
@@ -92,9 +103,9 @@ var ColorPicker = function ColorPicker(props) {
     clickedHistoricalColorIndex = _useState22[0],
     setClickedHistoricalColorIndex = _useState22[1];
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
-  var popUpLayer = getPrefixCls(prefixCls, 'color-picker-pop');
-  var containerCls = classNames("".concat(colorPickerPrefixCls, "-container"), _defineProperty({}, "".concat(colorPickerPrefixCls, "-container-pure"), pure));
-  var inputCls = classNames("".concat(colorPickerPrefixCls, "-input"), className);
+  var popUpLayer = classNames(getPrefixCls(prefixCls, 'color-picker-pop'), popperClassName);
+  var containerCls = classNames("".concat(colorPickerPrefixCls, "-container"), className, _defineProperty({}, "".concat(colorPickerPrefixCls, "-container-pure"), pure));
+  var inputCls = classNames("".concat(colorPickerPrefixCls, "-input"));
   var inputRef = useRef(null);
   var showColorPickerPanel = showColorTransfer || typeof showPresetColor === 'boolean' && showPresetColor && ((presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) || 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) {
@@ -207,7 +218,8 @@ var ColorPicker = function ColorPicker(props) {
   }, [borderType, colTypeArr, colorPickerPrefixCls, inputCorrectColorValue, value]);
   var colorInputEle = React.createElement("div", {
     className: containerCls,
-    ref: inputRef
+    ref: inputRef,
+    style: style
   }, React.createElement(Input, {
     borderType: pure ? 'bordered' : borderType,
     placeholder: placeholder,
@@ -215,7 +227,6 @@ var ColorPicker = function ColorPicker(props) {
     className: inputCls,
     onChange: handleChange,
     onBlur: handleBlur,
-    style: style,
     onClick: handleClick,
     prefix: React.createElement("div", {
       onClick: handleClick,
@@ -269,7 +280,7 @@ var ColorPicker = function ColorPicker(props) {
     currentColorType: currentColorType,
     showColorPickerPanel: showColorPickerPanel
   });
-  var popperProps = _extends(_extends({}, colorPickerProps), {
+  var popperProps = _extends(_extends({}, otherProps), {
     popperClassName: popUpLayer,
     placement: 'bottomLeft',
     defaultVisible: showPanel,

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

@@ -106,6 +106,7 @@
 .kd-color-picker-container {
   position: relative;
   width: var(--kd-c-color-picker-input-sizing-width, 230px);
+  height: var(--kd-c-color-picker-input-sizing-height, 28px);
 }
 .kd-color-picker-container-pure {
   width: 28px;
@@ -132,8 +133,8 @@
   display: none;
 }
 .kd-color-picker-container .kd-color-picker-input {
-  width: var(--kd-c-color-picker-input-sizing-width, 230px);
-  height: var(--kd-c-color-picker-input-sizing-height, 28px);
+  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));
@@ -163,7 +164,8 @@
   width: var(--kd-c-color-picker-input-prefix-line-sizing-width, 1px);
   height: var(--kd-c-color-picker-input-prefix-line-sizing-height, 22.6px);
   background-color: #ff2e3d;
-  rotate: 45deg;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
 }
 .kd-color-picker-pop {
   width: var(--kd-c-color-picker-panel-sizing-width, 304px);
@@ -223,7 +225,8 @@
   width: 1px;
   height: 22.6px;
   background-color: #ff2e3d;
-  rotate: 45deg;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
 }
 .kd-color-picker-pop .kd-color-picker-panel-clear-box .active {
   content: '';

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

@@ -7,6 +7,7 @@
 .@{color-picker-prefix-cls}-container {
   position: relative;
   width: @color-picker-input-sizing-width;
+  height: @color-picker-input-sizing-height;
 
   &-pure {
     width: 28px;
@@ -32,8 +33,8 @@
   }
 
   .@{color-picker-prefix-cls}-input {
-    width: @color-picker-input-sizing-width;
-    height: @color-picker-input-sizing-height;
+    height: 100%;
+    width: 100%;
     padding: 0 8px;
     border-bottom: 1px solid rgba(217, 217, 217, 1);
     font-size: @color-picker-input-font-size;
@@ -58,7 +59,7 @@
         width: @color-picker-input-prefix-line-sizing-width;
         height: @color-picker-input-prefix-line-sizing-height;
         background-color: #ff2e3d;
-        rotate: 45deg;
+        transform: rotate(45deg);
       }
     }
   }
@@ -117,7 +118,7 @@
           width: 1px;
           height: 22.6px;
           background-color: #ff2e3d;
-          rotate: 45deg;
+          transform: rotate(45deg);
         }
 
         .active {

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

@@ -130,27 +130,31 @@ function Panel(props) {
   };
   var renderMonthHeader = function renderMonthHeader() {
     var year = getYear(viewDate);
-    var headerCls = classnames("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-month"), "".concat(prefixCls, "-header-text-inner-hover"), _defineProperty({}, "".concat(prefixCls, "-header-text-inner-active"), isInnerYear));
+    var headerCls = classnames("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-month"), "".concat(prefixCls, "-header-text-inner-hover"));
+    var yearOnly = renderYearHeader();
     return {
-      children: React.createElement("span", {
+      children: isInnerYear ? yearOnly.children : React.createElement("span", {
         onClick: onHeaderYearClick
       }, year + locale.year),
-      className: headerCls
+      className: isInnerYear ? yearOnly.className : headerCls
     };
   };
   var renderDateHeader = function renderDateHeader() {
     var year = getYear(viewDate);
     var month = getMonth(viewDate);
     var headerCls = classnames("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-date"));
+    var yearOnly = renderYearHeader();
+    var yearText = isInnerYear ? yearOnly.children : React.createElement("span", {
+      className: classnames("".concat(prefixCls, "-header-text-inner"), "".concat(prefixCls, "-header-text-inner-hover")),
+      onClick: onHeaderYearClick
+    }, year + locale.year);
+    var monthText = isInnerMonth || isInnerYear ? null : React.createElement("span", {
+      className: classnames("".concat(prefixCls, "-header-text-inner"), "".concat(prefixCls, "-header-text-inner-hover"), _defineProperty({}, "".concat(prefixCls, "-header-text-inner-active"), isInnerMonth)),
+      onClick: onHeaderMonthClick
+    }, locale.monthTitle[month]);
     return {
-      children: React.createElement(React.Fragment, null, React.createElement("span", {
-        className: classnames("".concat(prefixCls, "-header-text-inner"), "".concat(prefixCls, "-header-text-inner-hover"), _defineProperty({}, "".concat(prefixCls, "-header-text-inner-active"), isInnerYear)),
-        onClick: onHeaderYearClick
-      }, year + locale.year), React.createElement("span", {
-        className: classnames("".concat(prefixCls, "-header-text-inner"), "".concat(prefixCls, "-header-text-inner-hover"), _defineProperty({}, "".concat(prefixCls, "-header-text-inner-active"), isInnerMonth)),
-        onClick: onHeaderMonthClick
-      }, locale.monthTitle[month])),
-      className: headerCls
+      children: (locale === null || locale === void 0 ? void 0 : locale.monthBeforeYear) ? [monthText, yearText] : [yearText, monthText],
+      className: isInnerYear ? yearOnly.className : headerCls
     };
   };
   var onSuperPrev = function onSuperPrev() {
@@ -229,10 +233,10 @@ function Panel(props) {
       {
         headerObj = renderDateHeader();
         headerProps = {
-          onPrev: isPositionLeft && !isInnerPicker || isInnerMonth || isPositionUnset ? onPrev : undefined,
-          onNext: isPositionRight && !isInnerPicker || isInnerMonth || isPositionUnset ? onNext : undefined,
-          onSuperPrev: isPositionLeft && !isInnerPicker || isInnerYear || isPositionUnset ? onSuperPrev : undefined,
-          onSuperNext: isPositionRight && !isInnerPicker || isInnerYear || isPositionUnset ? onSuperNext : undefined
+          onPrev: !isInnerPicker && (isPositionLeft || isPositionUnset) ? onPrev : undefined,
+          onNext: !isInnerPicker && (isPositionRight || isPositionUnset) ? onNext : undefined,
+          onSuperPrev: isPositionLeft && !isInnerPicker || isInnerYear || isInnerMonth || isPositionUnset ? onSuperPrev : undefined,
+          onSuperNext: isPositionRight && !isInnerPicker || isInnerYear || isInnerMonth || isPositionUnset ? onSuperNext : undefined
         };
         panel = renderDatePanel();
         break;
@@ -242,10 +246,10 @@ function Panel(props) {
         panel = renderDatePanel();
         headerObj = renderDateHeader();
         headerProps = {
-          onPrev: isPositionLeft && !isInnerPicker || isInnerMonth || isPositionUnset ? onPrev : undefined,
-          onNext: isPositionRight && !isInnerPicker || isInnerMonth || isPositionUnset ? onNext : undefined,
-          onSuperPrev: isPositionLeft && !isInnerPicker || isInnerYear || isPositionUnset ? onSuperPrev : undefined,
-          onSuperNext: isPositionRight && !isInnerPicker || isInnerYear || isPositionUnset ? onSuperNext : undefined
+          onPrev: !isInnerPicker && (isPositionLeft || isPositionUnset) ? onPrev : undefined,
+          onNext: !isInnerPicker && (isPositionRight || isPositionUnset) ? onNext : undefined,
+          onSuperPrev: isPositionLeft && !isInnerPicker || isInnerYear || isInnerMonth || isPositionUnset ? onSuperPrev : undefined,
+          onSuperNext: isPositionRight && !isInnerPicker || isInnerYear || isInnerMonth || isPositionUnset ? onSuperNext : undefined
         };
         break;
       }

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

@@ -23,6 +23,7 @@ export interface Locale {
     'DatePicker.rangeWeekPlaceholder': [string, string];
     'DatePicker.rangeQuarterPlaceholder': [string, string];
     'DatePicker.rangeTimePlaceholder': [string, string];
+    'DatePicker.monthBeforeYear': boolean;
 }
 export interface InnerLocale {
     locale: string;
@@ -45,6 +46,7 @@ export interface InnerLocale {
     rangeWeekPlaceholder: [string, string];
     rangeQuarterPlaceholder: [string, string];
     rangeTimePlaceholder: [string, string];
+    monthBeforeYear: boolean;
 }
 export declare type InnerLocaleKey = keyof InnerLocale;
 export declare type PanelMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'decade';

package/es/date-picker/locale/zh_CN.js

@@ -17,6 +17,7 @@ var locale = {
   'DatePicker.rangeMonthPlaceholder': ['开始月份', '结束月份'],
   'DatePicker.rangeWeekPlaceholder': ['开始周', '结束周'],
   'DatePicker.rangeQuarterPlaceholder': ['开始季度', '结束季度'],
-  'DatePicker.rangeTimePlaceholder': ['开始时间', '结束时间']
+  'DatePicker.rangeTimePlaceholder': ['开始时间', '结束时间'],
+  'DatePicker.monthBeforeYear': false
 };
 export default locale;

package/es/locale/en-US.d.ts

@@ -19,6 +19,7 @@ declare const locale: {
     'DatePicker.rangeWeekPlaceholder': string[];
     'DatePicker.rangeQuarterPlaceholder': string[];
     'DatePicker.rangeTimePlaceholder': string[];
+    'DatePicker.monthBeforeYear': boolean;
     'global.selectholder': string;
     'global.placeholder': string;
     'global.cancel': string;

package/es/locale/en-US.js

@@ -19,6 +19,7 @@ var locale = {
   'DatePicker.rangeWeekPlaceholder': ['Start week', 'End week'],
   'DatePicker.rangeQuarterPlaceholder': ['Start quarter', 'End quarter'],
   'DatePicker.rangeTimePlaceholder': ['Start time', 'End time'],
+  'DatePicker.monthBeforeYear': true,
   'global.selectholder': 'Please select',
   'global.placeholder': 'Please enter search content',
   'global.cancel': 'Cancel',

package/es/locale/locale.d.ts

@@ -146,6 +146,7 @@ declare class LocaleCache {
         'DatePicker.rangeWeekPlaceholder': [string, string];
         'DatePicker.rangeQuarterPlaceholder': [string, string];
         'DatePicker.rangeTimePlaceholder': [string, string];
+        'DatePicker.monthBeforeYear': boolean;
         locale: string;
     } | undefined;
     /**

package/es/locale/zh-CN.d.ts

@@ -118,6 +118,7 @@ declare const locale: {
     'DatePicker.rangeWeekPlaceholder': [string, string];
     'DatePicker.rangeQuarterPlaceholder': [string, string];
     'DatePicker.rangeTimePlaceholder': [string, string];
+    'DatePicker.monthBeforeYear': boolean;
     locale: string;
 };
 export default locale;

package/es/popper/index.js

@@ -187,6 +187,7 @@ export var Popper = forwardRef(function (props, ref) {
   var popperRef = ref || popperRefInner;
   var popperInstance = useRef(null);
   var referenceRefInner = useRef(null);
+  var onVisibleChangeRef = useRef(onVisibleChange);
   var referenceRef = (referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.ref) || referenceRefInner;
   var container = getPopupContainer(getRealDom(referenceRef, referenceElement) || document.body) || document.body;
   var _useMergedState = useMergedState(false, {
@@ -213,6 +214,7 @@ export var Popper = forwardRef(function (props, ref) {
   };
   var changeVisible = function changeVisible(nextOpen) {
     var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
+    var _a;
     if (visibleInner !== nextOpen) {
       if (nextOpen && _includesInstanceProperty(triggerTypeArray).call(triggerTypeArray, triggerType)) {
         onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger(triggerType);
@@ -220,7 +222,7 @@ export var Popper = forwardRef(function (props, ref) {
       if (typeof visible === 'undefined') {
         setVisibleInner(nextOpen);
       }
-      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextOpen, triggerType);
+      (_a = onVisibleChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onVisibleChangeRef, nextOpen, triggerType);
     }
     if (!nextOpen && _Object$keys(subPopupRefs.current || {}).length) {
       _Object$values(subPopupRefs.current).forEach(function (d) {
@@ -326,6 +328,9 @@ export var Popper = forwardRef(function (props, ref) {
       triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode[type]('mouseleave', onMouseLeave);
     }
   };
+  useEffect(function () {
+    onVisibleChangeRef.current = onVisibleChange;
+  }, [onVisibleChange]);
   useEffect(function () {
     setPlacementInner(getRealPlacement(placement));
   }, [placement]);

package/es/select/option.js

@@ -42,11 +42,13 @@ var InternalOption = function InternalOption(props, ref) {
   var contentCls = classNames(_defineProperty({}, "".concat(selectOptionPrefixCls, "-option-content"), true));
   var handleClick = function handleClick(e) {
     e.preventDefault();
+    var newVal = isSelected;
     if (optionProps.disabled || value === undefined) return;
     if (isMultiple) {
-      setSelected(!isSelected);
+      newVal = !isSelected;
+      setSelected(newVal);
     }
-    onChangeSelect && onChangeSelect(value, children, isSelected);
+    onChangeSelect && onChangeSelect(value, children, newVal);
   };
   var handleOnMouseEnter = function handleOnMouseEnter() {
     onChangeActiveIndex && onChangeActiveIndex(index);

package/es/select/select.js

@@ -831,7 +831,13 @@ var InternalSelect = function InternalSelect(props, ref) {
         if (!item) return;
         var key = ((_a = item.props) === null || _a === void 0 ? void 0 : _a.value) || item.value;
         var label = ((_b = item.props) === null || _b === void 0 ? void 0 : _b.children) || item.label;
-        handleOption(key, label, true);
+        var flag = true;
+        if (isMultiple) {
+          flag = !(mulOptions === null || mulOptions === void 0 ? void 0 : mulOptions.some(function (item) {
+            return item.value === key;
+          }));
+        }
+        handleOption(key, label, flag);
         if (searchValue) {
           setActiveIndex(_findIndexInstanceProperty(realChildren).call(realChildren, function (child) {
             var _a;

package/es/tree/tree.js

@@ -63,14 +63,8 @@ var InternalTree = React.forwardRef(function (props, ref) {
     onDrop = TreeProps.onDrop,
     onSelect = TreeProps.onSelect,
     selectedKeysProps = TreeProps.selectedKeys,
-    _TreeProps$setTreeNod = TreeProps.setTreeNodeStyle,
-    setTreeNodeStyle = _TreeProps$setTreeNod === void 0 ? function () {
-      return {};
-    } : _TreeProps$setTreeNod,
-    _TreeProps$setTreeNod2 = TreeProps.setTreeNodeClassName,
-    setTreeNodeClassName = _TreeProps$setTreeNod2 === void 0 ? function () {
-      return '';
-    } : _TreeProps$setTreeNod2,
+    setTreeNodeStyle = TreeProps.setTreeNodeStyle,
+    setTreeNodeClassName = TreeProps.setTreeNodeClassName,
     innerEstimatedItemSize = TreeProps.estimatedItemSize,
     style = TreeProps.style,
     className = TreeProps.className,
@@ -421,8 +415,8 @@ var InternalTree = React.forwardRef(function (props, ref) {
     item.switcherIcon = item.switcherIcon || switcherIcon;
     item.estimatedItemSize = estimatedItemSize;
     item.draggable = draggable;
-    item.className = setTreeNodeClassName(_extends({}, item));
-    item.style = setTreeNodeStyle(_extends({}, item));
+    item.className = (setTreeNodeClassName === null || setTreeNodeClassName === void 0 ? void 0 : setTreeNodeClassName(_extends({}, item))) || (item === null || item === void 0 ? void 0 : item.className);
+    item.style = (setTreeNodeStyle === null || setTreeNodeStyle === void 0 ? void 0 : setTreeNodeStyle(_extends({}, item))) || (item === null || item === void 0 ? void 0 : item.style);
     item.getDragNode = getDragNode;
     item.setDragNode = setDragNode;
     item.dragOver = dragOverNodeKey === item.key && dropPosition === 0;

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

@@ -8,10 +8,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _configProvider = require("../config-provider");
@@ -27,6 +28,14 @@ var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
 var _systemPresetColor = require("./constant/systemPresetColor");
 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 __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 var ColorPicker = function ColorPicker(props) {
   var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
@@ -55,10 +64,12 @@ var ColorPicker = function ColorPicker(props) {
     defaultValue = colorPickerProps.defaultValue,
     defaultOpen = colorPickerProps.defaultOpen,
     visible = colorPickerProps.visible,
+    popperClassName = colorPickerProps.popperClassName,
     suffixIcon = colorPickerProps.suffixIcon,
     prefixIcon = colorPickerProps.prefixIcon,
     onChange = colorPickerProps.onChange,
-    onVisibleChange = colorPickerProps.onVisibleChange;
+    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"]);
   var _useState = (0, _react.useState)(defaultValue || ''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     inputColorValue = _useState2[0],
@@ -104,9 +115,9 @@ var ColorPicker = function ColorPicker(props) {
     clickedHistoricalColorIndex = _useState22[0],
     setClickedHistoricalColorIndex = _useState22[1];
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
-  var popUpLayer = getPrefixCls(prefixCls, 'color-picker-pop');
-  var containerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-container"), (0, _defineProperty2.default)({}, "".concat(colorPickerPrefixCls, "-container-pure"), pure));
-  var inputCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-input"), className);
+  var popUpLayer = (0, _classnames.default)(getPrefixCls(prefixCls, 'color-picker-pop'), popperClassName);
+  var containerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-container"), className, (0, _defineProperty2.default)({}, "".concat(colorPickerPrefixCls, "-container-pure"), pure));
+  var inputCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-input"));
   var inputRef = (0, _react.useRef)(null);
   var showColorPickerPanel = showColorTransfer || typeof showPresetColor === 'boolean' && showPresetColor && ((presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) || _systemPresetColor.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) {
@@ -219,7 +230,8 @@ var ColorPicker = function ColorPicker(props) {
   }, [borderType, colTypeArr, colorPickerPrefixCls, inputCorrectColorValue, value]);
   var colorInputEle = _react.default.createElement("div", {
     className: containerCls,
-    ref: inputRef
+    ref: inputRef,
+    style: style
   }, _react.default.createElement(_index.Input, {
     borderType: pure ? 'bordered' : borderType,
     placeholder: placeholder,
@@ -227,7 +239,6 @@ var ColorPicker = function ColorPicker(props) {
     className: inputCls,
     onChange: handleChange,
     onBlur: handleBlur,
-    style: style,
     onClick: handleClick,
     prefix: _react.default.createElement("div", {
       onClick: handleClick,
@@ -281,7 +292,7 @@ var ColorPicker = function ColorPicker(props) {
     currentColorType: currentColorType,
     showColorPickerPanel: showColorPickerPanel
   });
-  var popperProps = (0, _extends2.default)((0, _extends2.default)({}, colorPickerProps), {
+  var popperProps = (0, _extends2.default)((0, _extends2.default)({}, otherProps), {
     popperClassName: popUpLayer,
     placement: 'bottomLeft',
     defaultVisible: showPanel,

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

@@ -106,6 +106,7 @@
 .kd-color-picker-container {
   position: relative;
   width: var(--kd-c-color-picker-input-sizing-width, 230px);
+  height: var(--kd-c-color-picker-input-sizing-height, 28px);
 }
 .kd-color-picker-container-pure {
   width: 28px;
@@ -132,8 +133,8 @@
   display: none;
 }
 .kd-color-picker-container .kd-color-picker-input {
-  width: var(--kd-c-color-picker-input-sizing-width, 230px);
-  height: var(--kd-c-color-picker-input-sizing-height, 28px);
+  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));
@@ -163,7 +164,8 @@
   width: var(--kd-c-color-picker-input-prefix-line-sizing-width, 1px);
   height: var(--kd-c-color-picker-input-prefix-line-sizing-height, 22.6px);
   background-color: #ff2e3d;
-  rotate: 45deg;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
 }
 .kd-color-picker-pop {
   width: var(--kd-c-color-picker-panel-sizing-width, 304px);
@@ -223,7 +225,8 @@
   width: 1px;
   height: 22.6px;
   background-color: #ff2e3d;
-  rotate: 45deg;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
 }
 .kd-color-picker-pop .kd-color-picker-panel-clear-box .active {
   content: '';

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

@@ -7,6 +7,7 @@
 .@{color-picker-prefix-cls}-container {
   position: relative;
   width: @color-picker-input-sizing-width;
+  height: @color-picker-input-sizing-height;
 
   &-pure {
     width: 28px;
@@ -32,8 +33,8 @@
   }
 
   .@{color-picker-prefix-cls}-input {
-    width: @color-picker-input-sizing-width;
-    height: @color-picker-input-sizing-height;
+    height: 100%;
+    width: 100%;
     padding: 0 8px;
     border-bottom: 1px solid rgba(217, 217, 217, 1);
     font-size: @color-picker-input-font-size;
@@ -58,7 +59,7 @@
         width: @color-picker-input-prefix-line-sizing-width;
         height: @color-picker-input-prefix-line-sizing-height;
         background-color: #ff2e3d;
-        rotate: 45deg;
+        transform: rotate(45deg);
       }
     }
   }
@@ -117,7 +118,7 @@
           width: 1px;
           height: 22.6px;
           background-color: #ff2e3d;
-          rotate: 45deg;
+          transform: rotate(45deg);
         }
 
         .active {