@kdcloudjs/kdesign 1.6.6 → 1.6.8

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/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/lib/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/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", {