@kdcloudjs/kdesign 1.6.5 → 1.6.7

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

@@ -4,8 +4,6 @@
 
 
 @datePicker-prefix-cls: ~'@{kd-prefix}-date-picker';
-// @rangePicker-prefix-cls: ~'@{kd-prefix}-rangePicker';
-// @datePicker-prefix-cls-input: ~'@{datePicker-prefix-cls}-input';
 @datePicker-prefix-cls-panel: ~'@{datePicker-prefix-cls}-panel';
 
 @datePicker-calendar-text: 24px;
@@ -21,14 +19,6 @@
     input {
       font-size: @date-small-font-size;
     }
-
-    .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-small-font-size + 1px);
-    }
-
-    &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-small-font-size + 12px);
-    }
   }
 
   &-large {
@@ -37,14 +27,6 @@
     input {
       font-size: @date-large-font-size;
     }
-
-    .@{datePicker-prefix-cls}-clear {
-      right:calc(@date-large-font-size + 1px);
-    }
-
-    &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-large-font-size + 9px);
-    }
   }
 
   &-middle {
@@ -53,14 +35,6 @@
     input {
       font-size: @date-middle-font-size;
     }
-
-    .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-middle-font-size + 1px);
-    }
-
-    &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-middle-font-size + 11px);
-    }
   }
 
   &-input {
@@ -102,6 +76,7 @@
 
   &-range {
     display: inline-flex;
+    align-items: center;
     position: relative;
 
     &-separator {
@@ -146,15 +121,12 @@
     .@{datePicker-prefix-cls}-clear {
       opacity: 1;
     }
-
-    .@{datePicker-prefix-cls}-suffix {
-      color: @date-color-background-checked;
-    }
   }
 
   &-clear {
     position: absolute;
     top: 50%;
+    right: 0;
     color: @date-icon-color;
     line-height: 1;
     background: @date-clear-background-color;
@@ -167,7 +139,19 @@
     }
 
     &:hover {
-      color: @date-clear-background-color-hover;
+      color: @date-icon-color-hover;
+    }
+  }
+
+  .@{datePicker-prefix-cls}-range-clear {
+    align-self: center;
+    margin-left: @date-suffix-spacing-margin-left;
+    color: @date-icon-color;
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover {
+      color: @date-icon-color-hover;
     }
   }
 
@@ -809,8 +793,6 @@
       }
     }
   }
-
-
 }
 
 .@{datePicker-prefix-cls}-container {
@@ -834,6 +816,7 @@
       line-height: @date-panel-header-height;
       font-size: @date-container-font-size;
       border-bottom: .5px solid @date-container-color-border;
+      cursor: pointer;
     }
   }
 }

package/lib/date-picker/style/mixin.less

@@ -1,5 +1,8 @@
+@import '../../style/themes/index';
 @import './token.less';
 
+@datePicker-prefix-cls: ~'@{kd-prefix}-date-picker';
+
 .input-wrapper() {
   display: inline-flex;
   border: 1px solid @date-input-color-border;
@@ -71,6 +74,10 @@
   line-height: calc(@height - (@padding-vertical * 2) - 2);
   font-size: @fonSize;
   padding: @padding-vertical @padding-horizontal;
+
+  &.@{datePicker-prefix-cls}-underline {
+    padding: @padding-vertical 0;
+  }
 }
 
 .today-after(@background) {

package/lib/date-picker/style/token.less

@@ -13,7 +13,8 @@
 @date-input-color-background: var(~'@{date-picker-custom-prefix}-input-color-background', @color-white);
 @date-input-color-background-disabled: var(~'@{date-picker-custom-prefix}-input-color-background-disabled', @color-background-contain-disabled);
 @date-input-color-focus: var(~'@{date-picker-custom-prefix}-input-color-focused', @color-text-primary);
-@date-icon-color: var(~'@{date-picker-custom-prefix}-icon-color', @color-disabled);
+@date-icon-color: var(~'@{date-picker-custom-prefix}-icon-color', #d9d9d9);
+@date-icon-color-hover: var(~'@{date-picker-custom-prefix}-icon-color-hover', #999);
 @date-clear-background-color: var(~'@{date-picker-custom-prefix}-clear-color-background', @color-background);
 @date-clear-background-color-hover: var(~'@{date-picker-custom-prefix}-clear-color-background-hover', @color-theme-5);
 @date-clear-background-color-focused: var(~'@{date-picker-custom-prefix}-clear-color-background-focused', @color-theme);

package/lib/form/Field.d.ts

@@ -10,6 +10,7 @@ export interface FormItemProps {
     labelWidth?: string | number;
     labelAlign?: LabelAlign;
     name: NamePath;
+    htmlFor?: string;
     prefixCls?: string;
     required?: boolean;
     rules?: Rule[];

package/lib/form/Field.js

@@ -23,10 +23,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 
 var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
 
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
@@ -112,7 +112,7 @@ var INNER_VALUE_PROPS_LIST = [{
 }];
 
 var Field = function Field(props) {
-  var _classnames;
+  var _context, _classnames;
 
   var _a;
 
@@ -146,6 +146,7 @@ var Field = function Field(props) {
       setDefaultValues = _getInternalHooks.setDefaultValues;
 
   var name = props.name,
+      customizeHtmlFor = props.htmlFor,
       children = props.children,
       className = props.className,
       disabled = props.disabled,
@@ -161,6 +162,7 @@ var Field = function Field(props) {
       validateTrigger = props.validateTrigger,
       defaultValue = props.defaultValue,
       valuePropName = props.valuePropName;
+  var htmlFor = customizeHtmlFor || (name ? (0, _concat.default)(_context = "form_".concat(name, "_")).call(_context, (Math.random() * 100).toFixed(0)) : undefined);
   var childrenNode = null;
   var innerValuePropName = 'value';
   var childrenArray = (0, _reactChildren.toArray)(children);
@@ -216,11 +218,11 @@ var Field = function Field(props) {
   if (Array.isArray(rules) && !rules.some(function (rule) {
     return Object.prototype.hasOwnProperty.call(rule, 'required');
   }) && required) {
-    var _context;
+    var _context2;
 
     rules.push({
       required: true,
-      message: (0, _concat.default)(_context = "".concat(local && local.requiredMessage)).call(_context, label)
+      message: (0, _concat.default)(_context2 = "".concat(local && local.requiredMessage)).call(_context2, label)
     });
   }
 
@@ -340,6 +342,7 @@ var Field = function Field(props) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: formItemClassName
   }, /*#__PURE__*/_react.default.createElement(_FieldLabel.default, {
+    htmlFor: htmlFor,
     value: label,
     width: labelWidth,
     textAlign: labelAlign,
@@ -351,7 +354,8 @@ var Field = function Field(props) {
     var keys = mergeProps((0, _extends5.default)((0, _extends5.default)((0, _defineProperty2.default)({
       disabled: disabled
     }, innerValuePropName, value), trigger), {
-      key: index
+      key: index,
+      id: customizeHtmlFor ? undefined : htmlFor
     }), child);
     return child ? /*#__PURE__*/_react.default.cloneElement(child, keys) : child;
   })));

package/lib/form/FieldLabel.d.ts

@@ -5,6 +5,7 @@ export interface FieldLabelProps {
     width?: string | number;
     textAlign?: LabelAlign;
     prefixCls?: string;
+    htmlFor?: string;
     requiredMark?: boolean;
 }
 declare const FieldLabel: React.FC<FieldLabelProps>;

package/lib/form/FieldLabel.js

@@ -46,7 +46,8 @@ var FieldLabel = function FieldLabel(props) {
       width = _getCompProps.width,
       textAlign = _getCompProps.textAlign,
       customizePrefixCls = _getCompProps.prefixCls,
-      requiredMark = _getCompProps.requiredMark;
+      requiredMark = _getCompProps.requiredMark,
+      htmlFor = _getCompProps.htmlFor;
 
   if (value === undefined) return null;
   var fieldLabelPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form-field-label', customizePrefixCls);
@@ -62,7 +63,8 @@ var FieldLabel = function FieldLabel(props) {
     style: style
   }, /*#__PURE__*/_react.default.createElement("label", {
     className: labelClassName,
-    title: value
+    title: value,
+    htmlFor: htmlFor
   }, value));
 };
 

package/lib/input/ClearableLabeledInput.js

@@ -1,5 +1,11 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -12,7 +18,9 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _index = require("../index");
 
@@ -20,6 +28,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _type = require("../_utils/type");
 
+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 ClearableInputType = (0, _type.tuple)('input', 'text');
 
 function hasPrefixSuffix(props) {
@@ -45,6 +57,19 @@ var ClearableInput = function ClearableInput(props) {
       focused = props.focused,
       numberMark = props.numberMark;
 
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMouseEnter = _useState2[0],
+      setIsMouseEnter = _useState2[1];
+
+  var mouseEnterHandle = function mouseEnterHandle() {
+    setIsMouseEnter(true);
+  };
+
+  var mouseLeaveHandle = function mouseLeaveHandle() {
+    setIsMouseEnter(false);
+  };
+
   var renderClearIcon = function renderClearIcon() {
     var _classNames;
 
@@ -52,13 +77,13 @@ var ClearableInput = function ClearableInput(props) {
       return null;
     }
 
-    var needClear = !disabled && value;
+    var needClear = !disabled && value && isMouseEnter;
     var clearIconclasses = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-textarea-clear-icon"), inputType === ClearableInputType[1]), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-clear-icon"), inputType === ClearableInputType[0]), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-clear-icon-hidden"), !needClear), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-clear-icon-rightSpace"), suffix), _classNames));
     return /*#__PURE__*/_react.default.createElement("span", {
       onClick: handleReset,
       className: clearIconclasses
     }, typeof allowClear === 'boolean' ? /*#__PURE__*/_react.default.createElement(_index.Icon, {
-      type: "close"
+      type: "close-solid"
     }) : allowClear);
   };
 
@@ -86,7 +111,9 @@ var ClearableInput = function ClearableInput(props) {
     var inputWrapperClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _classNames2), (0, _defineProperty2.default)({}, className, className && !addonBefore && !addonAfter));
     return /*#__PURE__*/_react.default.createElement("span", {
       className: inputWrapperClasses,
-      style: style
+      style: style,
+      onMouseEnter: mouseEnterHandle,
+      onMouseLeave: mouseLeaveHandle
     }, prefixNode, /*#__PURE__*/_react.default.cloneElement(originElement, {
       style: null
     }), suffixNode);
@@ -148,7 +175,9 @@ var ClearableInput = function ClearableInput(props) {
     var textAreaWrapperClasses = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-wrapper-textarea"), true));
     return /*#__PURE__*/_react.default.createElement("span", {
       className: textAreaWrapperClasses,
-      style: wrapperStyle
+      style: wrapperStyle,
+      onMouseEnter: mouseEnterHandle,
+      onMouseLeave: mouseLeaveHandle
     }, originElement, renderClearIcon(), numberMark && numberMark);
   };
 

package/lib/input/TextArea.d.ts

@@ -5,6 +5,7 @@ export interface textAreaProps extends React.TextareaHTMLAttributes<HTMLInputEle
     borderType?: BorderType;
     defaultValue?: string;
     count?: boolean;
+    countPosition?: string;
     value?: any;
     canResize?: boolean;
     disabled?: boolean;

package/lib/input/TextArea.js

@@ -13,10 +13,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 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"));
@@ -81,6 +81,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       borderType = textAreaProps.borderType,
       defaultValue = textAreaProps.defaultValue,
       count = textAreaProps.count,
+      countPosition = textAreaProps.countPosition,
       autoSize = textAreaProps.autoSize,
       className = textAreaProps.className,
       customPrefixcls = textAreaProps.prefixCls,
@@ -93,7 +94,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       placeholder = textAreaProps.placeholder,
       style = textAreaProps.style,
       size = textAreaProps.size,
-      others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size"]);
+      others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size"]);
 
   var textAreaPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // TextArea样式前缀
 
@@ -148,7 +149,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
   };
 
   var handleBlur = function handleBlur(e) {
-    showNumberMark && setShowNumberMark(false);
+    // showNumberMark && setShowNumberMark(false)
     onBlur && onBlur(e);
   };
 
@@ -177,8 +178,9 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     }
 
     if (count && showNumberMark && !disabled && maxLength !== '' && maxLength >= 0) {
+      var countClass = (0, _classnames.default)("".concat(textAreaPrefixCls, "-textarea-mark"), (0, _defineProperty2.default)({}, "".concat(textAreaPrefixCls, "-textarea-mark-inner"), countPosition === 'inner'));
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(textAreaPrefixCls, "-textarea-mark")
+        className: countClass
       }, enteredLength, "/", maxLength);
     }
 
@@ -195,7 +197,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
   }, [propsValue, setValue]);
 
   var renderTextArea = function renderTextArea(prefixCls) {
-    var _context, _classNames, _context2;
+    var _context, _classNames2, _context2;
 
     var hadCount = count && !disabled && !allowClear;
 
@@ -227,7 +229,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       ref: textareaRef,
       disabled: disabled,
       style: (0, _extends2.default)({}, textareaStyles, hadCount || !!allowClear ? otherStyles : style),
-      className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _classNames), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
+      className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _classNames2), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
       onChange: handleChange,
       onFocus: !disabled ? handleFocus : undefined,
       onBlur: !disabled ? handleBlur : undefined,

package/lib/input/style/index.css

@@ -205,6 +205,13 @@ textarea {
   z-index: 1;
   color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
   font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
+  line-height: 18px;
+  background-color: #fff;
+}
+.kd-input-textarea-mark-inner {
+  top: auto;
+  bottom: 5px;
+  right: 8px;
 }
 .kd-input-no-resize {
   resize: none;
@@ -356,10 +363,6 @@ textarea {
 .kd-input-wrapper-focused {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input-wrapper-focused .kd-input-clear-icon,
-.kd-input-wrapper-focused .kd-input-textarea-clear-icon {
-  color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
-}
 .kd-input-wrapper-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));
@@ -411,22 +414,23 @@ textarea {
 }
 .kd-input-wrapper-textarea .kd-input-textarea-clear-icon {
   position: absolute;
+  z-index: 2;
   right: 8px;
-  top: -2px;
+  top: 3px;
 }
 .kd-input-clear-icon,
 .kd-input-textarea-clear-icon {
   cursor: pointer;
-  color: var(--kd-c-input-color-border, #999);
+  color: var(--kd-c-input-clear-color, #d9d9d9);
 }
 .kd-input-clear-icon:hover,
 .kd-input-textarea-clear-icon:hover {
-  color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-input-clear-color-hover, #999);
 }
 .kd-input-clear-icon i,
 .kd-input-textarea-clear-icon i {
   vertical-align: middle;
-  font-size: 12px !important;
+  font-size: 16px;
 }
 .kd-input-clear-icon-hidden {
   visibility: hidden;

package/lib/input/style/index.less

@@ -37,7 +37,14 @@ textarea {
 			z-index: 1;
 			color: @input-placeholder-color-inner;
 			font-size: @input-small-font-size-inner;
+      line-height: 18px;
+      background-color: #fff;
 		}
+    &-mark-inner {
+      top: auto;
+      bottom: 5px;
+      right: 8px;
+    }
 	}
 	&-no-resize {
 		resize: none;
@@ -121,10 +128,6 @@ textarea {
 
 		&-focused {
 			border-color: @input-border-color-focused;
-
-      .@{input-prefix-cls}-clear-icon, .@{input-prefix-cls}-textarea-clear-icon {
-        color: @input-border-color-focused;
-      }
 		}
 
     &-disabled {
@@ -146,8 +149,9 @@ textarea {
 		.@{input-prefix-cls} {
 			&-textarea-clear-icon {
 				position: absolute;
+        z-index: 2;
 				right: 8px;
-				top: -2px;
+				top: 3px;
 			}
 		}
 	}

package/lib/input/style/mixin.less

@@ -47,15 +47,15 @@
 
 .input-clear-icon() {
   cursor: pointer;
-  color: @input-color-border;
+  color: @input-clear-color;
 
   &:hover {
-    color: @input-border-color-focused;
+    color: @input-clear-color-hover;
   }
 
   i {
     vertical-align: middle;
-    font-size: 12px !important;
+    font-size: 16px;
   }
 }
 

package/lib/input/style/token.less

@@ -7,6 +7,8 @@
 @input-font-color-inner: var(~'@{input-prefix}-color-text', @color-text-primary);
 @input-placeholder-color-inner: var(~'@{input-prefix}-placeholder-color-text', @color-text-placeholder);
 @input-color-border: var(~'@{input-prefix}-color-border', #999);
+@input-clear-color: var(~'@{input-prefix}-clear-color', #d9d9d9);
+@input-clear-color-hover: var(~'@{input-prefix}-clear-color-hover', #999);
 @input-background-color-inner: var(~'@{input-prefix}-color-background', @color-white);
 @input-background-color-disabled-inner: var(~'@{input-prefix}-color-background-disabled', @color-background-contain-disabled);
 @input-border-color-focused: var(~'@{input-prefix}-color-border-focused', @color-theme);

package/lib/search/style/index.css

@@ -205,6 +205,7 @@
 }
 .kd-search-border {
   border: var(--kd-c-search-sizing-border-width, 1px) solid var(--kd-c-search-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
+  border-radius: var(--kd-c-search-radius-border, var(--kd-g-radius-border, 2px));
 }
 .kd-search-prefix,
 .kd-search-suffix {
@@ -238,6 +239,7 @@
 }
 .kd-quick-search-border {
   border: var(--kd-c-search-sizing-border-width, 1px) solid var(--kd-c-search-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
+  border-radius: var(--kd-c-search-radius-border, var(--kd-g-radius-border, 2px));
 }
 .kd-quick-search:hover:not(.kd-quick-search-disabled) {
   border-color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -414,7 +416,7 @@
   font-size: var(--kd-c-search-dropdown-font-size, 12px);
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-  border-radius: var(--kd-c-search-radius-border, var(--kd-g-radius-border, 2px));
+  border-radius: var(--kd-c-search-dropdown-radius-border, var(--kd-g-radius-border, 2px));
   background: var(--kd-c-search-color-background, var(--kd-g-color-background, #fff));
   overflow: auto;
 }

package/lib/search/style/index.less

@@ -27,6 +27,7 @@
 
   &-border {
     border: @search-sizing-border-width solid @quick-search-border-bottom-color;
+    border-radius: @search-border-radius;
   }
 
   &-prefix,
@@ -61,6 +62,7 @@
   }
   &-border {
     border: @search-sizing-border-width solid @quick-search-border-bottom-color;
+    border-radius: @search-border-radius;
   }
   &:hover:not(&-disabled) {
     border-color: @search-color-theme;
@@ -206,7 +208,7 @@
     z-index: @zIndex-popper;
     font-size: @quick-search-dropdown-font-size;
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-    border-radius: @search-radius-size;
+    border-radius: @search-dropdown-border-radius;
     background: @search-color-background;
     overflow: auto;
     &-scroll {

package/lib/search/style/token.less

@@ -57,4 +57,5 @@
 @search-transition-duration: var(~'@{search-prefix}-motion-duration', @duration-promptly);
 
 // radius
-@search-radius-size: var(~'@{search-prefix}-radius-border', @radius-border);
+@search-dropdown-border-radius: var(~'@{search-prefix}-dropdown-radius-border', @radius-border);
+@search-border-radius: var(~'@{search-prefix}-radius-border', @radius-border);

package/lib/select/interface.d.ts

@@ -34,6 +34,8 @@ export interface AbstractSelectProps extends PopperProps {
     listHeight?: number;
     labelInValue?: boolean;
     maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabeledValue[]) => React.ReactNode);
+    filterOption?: boolean | ((inputValue: string, option?: OptionsType) => boolean);
+    optionFilterProp?: string;
 }
 export interface LabeledValue {
     key?: string;

package/lib/select/option.js

@@ -83,7 +83,7 @@ var InternalOption = function InternalOption(props, ref) {
 
   var titleText = (0, _typeof2.default)(children) !== 'object' ? children : null;
   var checkStyle = {
-    height: '22px',
+    minHeight: '22px',
     background: 'none'
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {