@kdcloudjs/kdesign 1.6.6 → 1.6.8

package/es/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/es/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/es/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/es/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/es/form/Field.js

@@ -3,8 +3,8 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 
@@ -74,7 +74,7 @@ var INNER_VALUE_PROPS_LIST = [{
 }];
 
 var Field = function Field(props) {
-  var _classnames;
+  var _context, _classnames;
 
   var _a;
 
@@ -107,6 +107,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,
@@ -122,6 +123,7 @@ var Field = function Field(props) {
       validateTrigger = props.validateTrigger,
       defaultValue = props.defaultValue,
       valuePropName = props.valuePropName;
+  var htmlFor = customizeHtmlFor || (name ? _concatInstanceProperty(_context = "form_".concat(name, "_")).call(_context, (Math.random() * 100).toFixed(0)) : undefined);
   var childrenNode = null;
   var innerValuePropName = 'value';
   var childrenArray = toArray(children);
@@ -177,11 +179,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: _concatInstanceProperty(_context = "".concat(local && local.requiredMessage)).call(_context, label)
+      message: _concatInstanceProperty(_context2 = "".concat(local && local.requiredMessage)).call(_context2, label)
     });
   }
 
@@ -299,6 +301,7 @@ var Field = function Field(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: formItemClassName
   }, /*#__PURE__*/React.createElement(FieldLabel, {
+    htmlFor: htmlFor,
     value: label,
     width: labelWidth,
     textAlign: labelAlign,
@@ -310,7 +313,8 @@ var Field = function Field(props) {
     var keys = mergeProps(_extends(_extends(_defineProperty({
       disabled: disabled
     }, innerValuePropName, value), trigger), {
-      key: index
+      key: index,
+      id: customizeHtmlFor ? undefined : htmlFor
     }), child);
     return child ? /*#__PURE__*/React.cloneElement(child, keys) : child;
   })));

package/es/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/es/form/FieldLabel.js

@@ -22,7 +22,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);
@@ -38,7 +39,8 @@ var FieldLabel = function FieldLabel(props) {
     style: style
   }, /*#__PURE__*/React.createElement("label", {
     className: labelClassName,
-    title: value
+    title: value,
+    htmlFor: htmlFor
   }, value));
 };
 

package/es/input/ClearableLabeledInput.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React from 'react';
+import React, { useState } from 'react';
 import { Icon } from '../index';
 import classNames from 'classnames';
 import { tuple } from '../_utils/type';
@@ -28,6 +29,19 @@ var ClearableInput = function ClearableInput(props) {
       focused = props.focused,
       numberMark = props.numberMark;
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_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;
 
@@ -35,13 +49,13 @@ var ClearableInput = function ClearableInput(props) {
       return null;
     }
 
-    var needClear = !disabled && value;
+    var needClear = !disabled && value && isMouseEnter;
     var clearIconclasses = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-textarea-clear-icon"), inputType === ClearableInputType[1]), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon"), inputType === ClearableInputType[0]), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon-hidden"), !needClear), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon-rightSpace"), suffix), _classNames));
     return /*#__PURE__*/React.createElement("span", {
       onClick: handleReset,
       className: clearIconclasses
     }, typeof allowClear === 'boolean' ? /*#__PURE__*/React.createElement(Icon, {
-      type: "close"
+      type: "close-solid"
     }) : allowClear);
   };
 
@@ -69,7 +83,9 @@ var ClearableInput = function ClearableInput(props) {
     var inputWrapperClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _classNames2), _defineProperty({}, className, className && !addonBefore && !addonAfter));
     return /*#__PURE__*/React.createElement("span", {
       className: inputWrapperClasses,
-      style: style
+      style: style,
+      onMouseEnter: mouseEnterHandle,
+      onMouseLeave: mouseLeaveHandle
     }, prefixNode, /*#__PURE__*/React.cloneElement(originElement, {
       style: null
     }), suffixNode);
@@ -131,7 +147,9 @@ var ClearableInput = function ClearableInput(props) {
     var textAreaWrapperClasses = classNames(className, _defineProperty({}, "".concat(prefixCls, "-wrapper-textarea"), true));
     return /*#__PURE__*/React.createElement("span", {
       className: textAreaWrapperClasses,
-      style: wrapperStyle
+      style: wrapperStyle,
+      onMouseEnter: mouseEnterHandle,
+      onMouseLeave: mouseLeaveHandle
     }, originElement, renderClearIcon(), numberMark && numberMark);
   };
 

package/es/input/style/index.css

@@ -363,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));
@@ -418,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/es/input/style/index.less

@@ -128,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 {
@@ -153,8 +149,9 @@ textarea {
 		.@{input-prefix-cls} {
 			&-textarea-clear-icon {
 				position: absolute;
+        z-index: 2;
 				right: 8px;
-				top: -2px;
+				top: 3px;
 			}
 		}
 	}

package/es/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/es/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/es/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/es/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/es/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/es/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/es/select/option.js

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