@kdcloudjs/kdesign 1.6.12 → 1.6.14

package/es/button/group.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { ButtonType } from './button';
+import { ButtonType, ButtonSize } from './button';
 export declare const ButtonGroupTypes: ["basic", "similar"];
 export declare type ButtonGroupType = typeof ButtonGroupTypes[number];
 export interface OverlayType {
@@ -7,15 +7,17 @@ export interface OverlayType {
     label?: React.ReactNode;
 }
 export interface ButtonGroupProps {
-    style?: CSSProperties;
-    className?: string;
+    buttonType?: ButtonType;
     children?: ReactNode;
-    onClick?: () => void;
-    overlay?: Array<OverlayType>;
+    className?: string;
+    disabled?: boolean;
     icon?: [ReactNode, ReactNode];
+    overlay?: Array<OverlayType>;
+    size?: ButtonSize;
+    style?: CSSProperties;
     type?: ButtonGroupType;
-    buttonType?: ButtonType;
-    disabled?: boolean;
+    onClick?: () => void;
+    onItemClick?: (data: OverlayType) => void;
 }
 declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/es/button/group.js

@@ -31,6 +31,7 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
       overlay = buttonGoupProps.overlay,
       icon = buttonGoupProps.icon,
       type = buttonGoupProps.type,
+      size = buttonGoupProps.size,
       buttonType = buttonGoupProps.buttonType,
       disabled = buttonGoupProps.disabled,
       onVisibleChange = buttonGoupProps.onVisibleChange;
@@ -64,11 +65,13 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
       ref: refBtnGroup
     }, isBsicType && /*#__PURE__*/React.createElement(Button, {
       type: buttonType,
+      size: size,
       disabled: disabled
     }, children, /*#__PURE__*/React.createElement("span", {
       className: "".concat(btnGroupPrefixCls, "-basic-icon")
     }, optionShow ? iconUp : iconDown)), !isBsicType && /*#__PURE__*/React.createElement(Button, {
       type: buttonType,
+      size: size,
       disabled: disabled,
       onClick: onClick
     }, children), !isBsicType && /*#__PURE__*/React.createElement("span", {
@@ -77,13 +80,15 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
     }, optionShow ? /*#__PURE__*/React.createElement(Button, {
       icon: iconUp,
       type: buttonType,
+      size: size,
       disabled: disabled
     }) : /*#__PURE__*/React.createElement(Button, {
       icon: iconDown,
       type: buttonType,
+      size: size,
       disabled: disabled
     })));
-  }, [icon, btnGroupPrefixCls, style, btnGroupClasses, refBtnGroup, isBsicType, buttonType, disabled, children, optionShow, onClick]);
+  }, [icon, btnGroupPrefixCls, style, btnGroupClasses, refBtnGroup, isBsicType, buttonType, disabled, children, optionShow, onClick, size]);
   var handleItemClick = useCallback(function (data) {
     onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(data);
     setOptionShow(false);

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

@@ -23,6 +23,7 @@ declare const compDefaultProps: {
     ButtonGroup: {
         buttonType: string;
         type: string;
+        size: string;
     };
     Card: {
         hoverable: boolean;
@@ -317,6 +318,7 @@ declare const compDefaultProps: {
     ToolTip: {
         placement: string;
         trigger: string;
+        arrow: boolean;
     };
     Tabs: {
         type: string;

package/es/config-provider/compDefaultProps.js

@@ -24,7 +24,8 @@ var compDefaultProps = {
   },
   ButtonGroup: {
     buttonType: 'primary',
-    type: 'basic'
+    type: 'basic',
+    size: 'middle'
   },
   Card: {
     hoverable: false,
@@ -331,7 +332,8 @@ var compDefaultProps = {
   TreeNode: {},
   ToolTip: {
     placement: 'top',
-    trigger: 'hover'
+    trigger: 'hover',
+    arrow: true
   },
   Tabs: {
     type: 'line',

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

@@ -407,33 +407,27 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
   var triggerChange = function triggerChange(newValue, sourceIndex) {
     var values = newValue;
     var startValue = getValue(values, 0);
-    var endValue = getValue(values, 1); // >>>>> Format start & end values
+    var endValue = getValue(values, 1);
 
     if (startValue && endValue && isAfter(startValue, endValue)) {
-      if ( // WeekPicker only compare week
-      picker === 'week' && !isSameWeek(startValue, endValue) || // QuotaPicker only compare week
-      picker === 'quarter' && !isSameQuarter(startValue, endValue) || // Other non-TimePicker compare date
-      picker !== 'week' && picker !== 'quarter' && picker !== 'time' && !isSameDay(startValue, endValue)) {
-        // Clean up end date when start date is after end date
+      if (picker === 'week' && !isSameWeek(startValue, endValue) || picker === 'quarter' && !isSameQuarter(startValue, endValue) || picker !== 'week' && picker !== 'quarter' && picker !== 'time' && !isSameDay(startValue, endValue)) {
         if (sourceIndex === 0) {
           values = [startValue, null];
           endValue = null;
         } else {
           startValue = null;
           values = [null, endValue];
-        } // Clean up cache since invalidate
-
+        }
 
         openRecordsRef.current = _defineProperty({}, sourceIndex, true);
       } else if (picker === 'time' && order === true) {
-        // Reorder when in same date
         values = reorderValues(values);
       }
     }
 
     setSelectedValue(values);
     var startStr = values && values[0] ? formatDate(values[0], _format) : '';
-    var endStr = values && values[1] ? formatDate(values[1], _format) : ''; // 外部回调
+    var endStr = values && values[1] ? formatDate(values[1], _format) : '';
 
     if (onCalendarChange) {
       var info = {
@@ -447,15 +441,12 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     var canTrigger = values === null || canStartValueTrigger && canEndValueTrigger;
 
     if (canTrigger) {
-      // Trigger onChange only when value is validate
       setInnerValue(values);
 
-      if (onChange && (!isEqual(getValue(selectedValue, 0), startValue) || !isEqual(getValue(selectedValue, 1), endValue))) {
+      if (onChange && (!isEqual(getValue(dateValue, 0), startValue) || !isEqual(getValue(dateValue, 1), endValue))) {
         onChange(values, [startStr, endStr]);
       }
-    } // >>>>> Open picker when
-    // Always open another picker if possible
-
+    }
 
     var nextOpenIndex = null;
 
@@ -466,7 +457,6 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     }
 
     if (nextOpenIndex !== null && nextOpenIndex !== mergedActivePickerIndex && (!openRecordsRef.current[nextOpenIndex] || !getValue(values, nextOpenIndex)) && getValue(values, sourceIndex)) {
-      // Delay to focus to avoid input blur trigger expired selectedValues
       triggerOpenAndFocus(nextOpenIndex);
     } else {
       triggerOpen(false, sourceIndex);
@@ -766,7 +756,6 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     trigger: 'click',
     prefixCls: "".concat(datePickerPrefixCls, "-panel"),
     arrow: false,
-    popperClassName: className,
     popperStyle: style,
     visible: mergedOpen,
     placement: 'bottomLeft',

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

@@ -218,13 +218,13 @@
   white-space: nowrap;
 }
 .kd-date-picker-input input::-webkit-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input::-moz-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input::-ms-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input:focus {
   -webkit-box-shadow: none;
@@ -236,22 +236,22 @@
   background: transparent;
 }
 .kd-date-picker-input input::-webkit-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input::-moz-placeholder {
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input:-ms-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input::-ms-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input::placeholder {
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input-placeholder > input {
-  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-range {
   display: -webkit-inline-box;

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

@@ -63,7 +63,7 @@
       }
 
       &::placeholder {
-        color: @date-input-color-disabled;
+        color: @date-input-color-placeholder;
       }
     }
 

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

@@ -6,7 +6,7 @@
 @date-color-background-checked: var(~'@{date-picker-custom-prefix}-color-background-checked', @color-theme);
 @date-wrapper-color-background: var(~'@{date-picker-custom-prefix}-wrapper-color-background', @color-background);
 @date-input-color: var(~'@{date-picker-custom-prefix}-input-color', @color-text-primary);
-@date-input-color-placeholder: var(~'@{date-picker-custom-prefix}-input-color-placeholder', @color-text-secondary);
+@date-input-color-placeholder: var(~'@{date-picker-custom-prefix}-input-color-placeholder', #f2f2f2);
 @date-input-underline-color: var(~'@{date-picker-custom-prefix}-input-underline-color', #999);
 @date-input-color-border: var(~'@{date-picker-custom-prefix}-input-color-border', @color-border-strong);
 @date-input-color-disabled: var(~'@{date-picker-custom-prefix}-input-color-disabled', @color-disabled);

package/es/form/Field.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 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";
@@ -99,7 +100,6 @@ var Field = function Field(props) {
       vertical = fieldContext.vertical,
       getDefaultValue = fieldContext.getDefaultValue,
       local = fieldContext.local,
-      setRules = fieldContext.setRules,
       formDisabled = fieldContext.disabled;
 
   var _getInternalHooks = getInternalHooks(INTERNAL_HOOK_KEY),
@@ -118,8 +118,7 @@ var Field = function Field(props) {
       labelWidth = props.labelWidth,
       labelAlign = props.labelAlign,
       required = props.required,
-      _props$rules = props.rules,
-      rules = _props$rules === void 0 ? [] : _props$rules,
+      rules = props.rules,
       wrapperWidth = props.wrapperWidth,
       validateTrigger = props.validateTrigger,
       defaultValue = props.defaultValue,
@@ -163,7 +162,7 @@ var Field = function Field(props) {
     }
   };
 
-  var rulesRequired = rules.some(function (rule) {
+  var mergedRequired = required || (rules === null || rules === void 0 ? void 0 : rules.some(function (rule) {
     if (rule && _typeof(rule) === 'object' && rule.required) {
       return true;
     }
@@ -174,50 +173,52 @@ var Field = function Field(props) {
     }
 
     return false;
-  });
-  var mergedRequired = required || rulesRequired;
+  }));
 
-  if (Array.isArray(rules) && !rules.some(function (rule) {
-    return Object.prototype.hasOwnProperty.call(rule, 'required');
-  }) && required) {
-    var _context2;
+  var mergeRule = function mergeRule() {
+    var mergeRules = Array.isArray(rules) ? _toConsumableArray(rules) : [];
 
-    rules.push({
-      required: true,
-      message: _concatInstanceProperty(_context2 = "".concat(local && local.requiredMessage)).call(_context2, label)
-    });
-  }
+    if (!mergeRules.some(function (rule) {
+      return Object.prototype.hasOwnProperty.call(rule, 'required');
+    }) && required) {
+      var _context2;
 
-  var mergeRules = rules;
+      mergeRules.push({
+        required: true,
+        message: _concatInstanceProperty(_context2 = "".concat(local && local.requiredMessage)).call(_context2, label)
+      });
+    }
 
-  if (mergeRules.length) {
-    mergeRules = _mapInstanceProperty(rules).call(rules, function (r) {
-      if (typeof r === 'function') {
-        return r(fieldContext);
-      }
+    if (mergeRules.length) {
+      mergeRules = _mapInstanceProperty(mergeRules).call(mergeRules, function (r) {
+        if (typeof r === 'function') {
+          return r(fieldContext);
+        }
 
-      return r;
-    });
-  }
+        return r;
+      });
+    }
+
+    return mergeRules;
+  };
 
-  var itemRef = React.useRef({
+  var item = {
     onStoreChange: onStoreChange,
     meta: {
-      rules: mergeRules,
+      rules: mergeRule(),
       name: name,
       trigger: validateTrigger
     }
-  });
+  };
+  var itemRef = React.useRef(item);
+  itemRef.current = item;
   useEffect(function () {
-    registerField(name, itemRef.current);
+    registerField(name, itemRef);
 
     if (defaultValue !== undefined) {
       setDefaultValues(_defineProperty({}, name, defaultValue));
     }
   }, [name, registerField]);
-  useEffect(function () {
-    setRules(name, mergeRules);
-  }, [mergedRequired, name, mergeRules]);
   var formPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form', customizePrefixcls);
   var formItemClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field"), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _classnames), className);
   var value = getFieldValue(name);
@@ -263,7 +264,7 @@ var Field = function Field(props) {
 
     var faChange = fa.onChange,
         faDisabled = fa.disabled,
-        rest = __rest(fa, ["onChange", "disabled"]);
+        faRest = __rest(fa, ["onChange", "disabled"]);
 
     var _ch$props = ch.props,
         chChange = _ch$props.onChange,
@@ -296,10 +297,37 @@ var Field = function Field(props) {
       forceUpdate();
     }
 
-    return _extends(_extends({}, rest), (_extends3 = {
+    var mergeResult = _extends(_extends({}, faRest), (_extends3 = {
       onChange: onChange,
       defaultValue: defaultValue
     }, _defineProperty(_extends3, innerValuePropName, fieldValue), _defineProperty(_extends3, "disabled", chDisabled !== undefined ? chDisabled : faDisabled !== undefined ? faDisabled : formDisabled), _extends3));
+
+    var mergeEventArray = [];
+
+    if (validateTrigger) {
+      if (Array.isArray(validateTrigger)) {
+        mergeEventArray.push.apply(mergeEventArray, _toConsumableArray(_filterInstanceProperty(validateTrigger).call(validateTrigger, function (v) {
+          return v !== DEFAULT_TRIGGER;
+        })));
+      } else if (validateTrigger !== DEFAULT_TRIGGER) {
+        mergeEventArray.push(validateTrigger);
+      }
+    }
+
+    mergeEventArray.forEach(function (eventName) {
+      mergeResult[eventName] = function () {
+        var _a;
+
+        if ((fa === null || fa === void 0 ? void 0 : fa[eventName]) && typeof fa[eventName] === 'function') {
+          fa[eventName]();
+        }
+
+        if (((_a = ch.props) === null || _a === void 0 ? void 0 : _a[eventName]) && typeof ch.props[eventName] === 'function') {
+          ch.props[eventName]();
+        }
+      };
+    });
+    return mergeResult;
   };
 
   return /*#__PURE__*/React.createElement("div", {

package/es/form/FieldContext.js

@@ -14,7 +14,6 @@ var context = /*#__PURE__*/React.createContext({
   resetFields: warningFunc,
   setFieldsValue: warningFunc,
   setFieldValue: warningFunc,
-  setRules: warningFunc,
   submit: warningFunc,
   validateFields: warningFunc,
   getInternalHooks: function getInternalHooks() {

package/es/form/hooks/useForm.js

@@ -26,7 +26,6 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
   this.defaultValues = {};
   this.store = {};
   this.fields = {};
-  this.rules = {};
   this.errorMessages = {};
   this.callbacks = {}; // constructor (forceRootUpdate: () => void) {
   //   this.forceRootUpdate = forceRootUpdate
@@ -42,7 +41,6 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
       resetFields: _this.resetFields,
       setFieldValue: _this.setFieldValue,
       setFieldsValue: _this.setFieldsValue,
-      setRules: _this.setRules,
       validateFields: _this.validateFields,
       submit: _this.submit,
       getInternalHooks: _this.getInternalHooks
@@ -169,25 +167,25 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
   this.getRules = function (namePathList) {
     _this.warningUnhooked();
 
-    if (!namePathList) {
-      return _this.rules;
+    var list = cloneDeep(namePathList);
+
+    if (!list) {
+      list = _Object$keys(_this.fields);
     }
 
     var rules = {};
-    namePathList.forEach(function (name) {
-      if (_this.rules[name]) {
-        rules[name] = cloneDeep(_this.rules[name]);
+    list.forEach(function (name) {
+      var _a, _b;
+
+      var current = _this.fields[name].current;
+
+      if ((_a = current === null || current === void 0 ? void 0 : current.meta) === null || _a === void 0 ? void 0 : _a.rules) {
+        rules[name] = cloneDeep((_b = current === null || current === void 0 ? void 0 : current.meta) === null || _b === void 0 ? void 0 : _b.rules);
       }
     });
     return _Object$keys(rules).length === 0 ? null : rules;
   };
 
-  this.setRules = function (name, rules) {
-    _this.warningUnhooked();
-
-    set(_this.rules, name, rules);
-  };
-
   this.setCallbacks = function (callbacks) {
     _this.warningUnhooked();
 
@@ -243,15 +241,6 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
     _this.warningUnhooked();
 
     _this.fields[name] = field;
-    var meta = field.meta;
-
-    if (meta.rules !== undefined) {
-      _this.setRules(name, meta.rules); // TODO: 初始化的时候是否需要校验？？
-      // this.validateFields([name]).catch(({ errorInfos }) => {
-      //   this.validateFieldFaild(errorInfos, 'internal')
-      // })
-
-    }
   };
 
   this.validateFields = function (namePathList) {
@@ -296,7 +285,11 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
       _this.notifyObservers(_this.store, namePathList || [], 'validateFinish');
     }).catch(function (_ref2) {
       var errorInfos = _ref2.errorInfos;
-      _this.errorMessages = {};
+
+      if (!namePathList) {
+        _this.errorMessages = {};
+      }
+
       var _errorInfos$fields = errorInfos.fields,
           fields = _errorInfos$fields === void 0 ? {} : _errorInfos$fields;
 
@@ -336,7 +329,7 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
     _this.warningUnhooked();
 
     _Object$values(_this.fields).forEach(function (_ref4) {
-      var onStoreChange = _ref4.onStoreChange;
+      var onStoreChange = _ref4.current.onStoreChange;
       var stores = {
         prev: prevStore,
         curr: _this.store

package/es/form/interface.d.ts

@@ -10,7 +10,9 @@ export interface FieldError {
     [name: string]: string;
 }
 export interface Fields {
-    [name: string]: FieldInstance;
+    [name: string]: {
+        current: FieldInstance;
+    };
 }
 export interface FormInstance<Values = any> {
     getFieldError: (name: NamePath) => string | undefined;
@@ -21,7 +23,6 @@ export interface FormInstance<Values = any> {
     resetFields: (fields?: NamePath[]) => void;
     setFieldsValue: (value: Values) => void;
     setFieldValue: (name: NamePath, value: Values) => void;
-    setRules: (name: NamePath, rules: any) => void;
     validateFields: (namePathList?: NamePath[]) => Promise<Values>;
     submit: () => void;
     getInternalHooks: (secret: string) => InternalHooks | null;
@@ -71,7 +72,9 @@ export interface InternalHooks {
     dispatch: (action: ReducerAction) => void;
     setDefaultValues: (values: Store) => void;
     setCallbacks: (callbacks: Callbacks) => void;
-    registerField: (name: NamePath, field: FieldInstance) => void;
+    registerField: (name: NamePath, field: {
+        current: FieldInstance;
+    }) => void;
 }
 export declare type NotifySource = 'externalUpdateValue' | 'updateValue' | 'reset' | 'validateField' | 'validateFinish';
 export interface ValidateErrorEntity<Values = any> {

package/es/icon/icon.js

@@ -1,6 +1,21 @@
 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 _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+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 } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
@@ -13,6 +28,7 @@ var InternalIcon = function InternalIcon(props, ref) {
       userDefaultProps = _useContext.compDefaultProps;
 
   var iconProps = getCompProps('Icon', userDefaultProps, props);
+
   var type = iconProps.type,
       spin = iconProps.spin,
       style = iconProps.style,
@@ -21,7 +37,9 @@ var InternalIcon = function InternalIcon(props, ref) {
       rotate = iconProps.rotate,
       onClick = iconProps.onClick,
       onMouseEnter = iconProps.onMouseEnter,
-      onMouseLeave = iconProps.onMouseLeave;
+      onMouseLeave = iconProps.onMouseLeave,
+      others = __rest(iconProps, ["type", "spin", "style", "prefix", "className", "rotate", "onClick", "onMouseEnter", "onMouseLeave"]);
+
   var innerRef = React.useRef();
   var iconRef = ref || innerRef;
   var iconPrefix = prefix || iconProps.iconPrefix;
@@ -45,14 +63,15 @@ var InternalIcon = function InternalIcon(props, ref) {
     iconStyle.transform = "rotate(".concat(rotate, "deg)");
   }
 
-  return /*#__PURE__*/React.createElement("i", {
+  return /*#__PURE__*/React.createElement("i", _extends({
     className: iconClass,
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    style: iconStyle,
+    style: iconStyle
+  }, others, {
     ref: iconRef
-  });
+  }));
 };
 
 var Icon = /*#__PURE__*/React.forwardRef(InternalIcon);

package/es/select/style/index.css

@@ -311,8 +311,8 @@
 }
 .kd-select-bordered {
   border: 1px solid var(--kd-c-select-border-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-  padding-left: 8px !important;
-  border-radius: 2px;
+  padding-left: var(--kd-c-select-bordered-spacing-padding-left, 8px) !important;
+  border-radius: var(--kd-c-select-bordered-radius-border, 2px);
 }
 .kd-select-bordered:hover:not(.kd-select-multiple-disabled):not(.kd-select-single-disabled) {
   border: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
@@ -320,10 +320,13 @@
 .kd-select-bordered .kd-select-suffix {
   padding-right: 8px;
 }
+.kd-select-bordered.kd-select-single .kd-select-selection-search {
+  left: var(--kd-c-select-bordered-spacing-padding-left, 8px);
+}
 .kd-select-wrapper {
   -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  padding: 1px 28px 1px 0;
+  padding: var(--kd-c-select-wrapper-spacing-padding, 1px 28px 1px 0);
   max-width: 100%;
   color: #212121;
   display: -webkit-box;

package/es/select/style/index.less

@@ -83,8 +83,8 @@
 
   &-bordered {
     border: 1px solid @select-border-g-color-border;
-    padding-left: 8px !important;
-    border-radius: 2px;
+    padding-left: @select-bordered !important;
+    border-radius: @select-border-radius-border;
     &:hover:not(.@{select-prefix-cls}-multiple-disabled):not(.@{select-prefix-cls}-single-disabled) {
       border: 1px solid @select-g-color-border-hover;
     }
@@ -92,11 +92,17 @@
     .@{select-prefix-cls}-suffix {
       padding-right: 8px;
     }
+
+    &.@{select-prefix-cls}-single {
+      .@{select-prefix-cls}-selection-search {
+        left: @select-bordered;
+      }
+    }
   }
 
   &-wrapper {
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-    padding: 1px 28px 1px 0;
+    padding: @select-wrapper-padding;
     max-width: 100%;
     color: #212121;
     display: flex;