@kdcloudjs/kdesign 1.2.3 → 1.3.2

package/es/select/select.js

@@ -221,8 +221,19 @@ var InternalSelect = function InternalSelect(props, ref) {
       onDropdownVisibleChange && onDropdownVisibleChange(!optionShow);
     } // handleClear()
 
-  }; // 点击下拉列表中某项回调
+  };
+
+  useEffect(function () {
+    selectionRef.current.addEventListener('mouseup', function (e) {
+      var _a;
+
+      var isCloseBtn = ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.className.indexOf('kd-tag-close-icon')) > -1;
 
+      if (isCloseBtn) {
+        e.stopPropagation();
+      }
+    });
+  }, []); // 点击下拉列表中某项回调
 
   var handleOption = function handleOption(key, label, isSelected) {
     var _a, _b, _c;

package/es/style/icon/kdicon.css

@@ -1,9 +1,10 @@
 @font-face {
   font-family: "kdicon";
-  src: url("kdicon.woff?t=1649311510226") format("woff");
+  src: url("kdicon.woff?t=1654677347390") format("woff");
 }
 .kdicon {
   font-family: 'kdicon' !important;
+  font-size:16px;
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -62,6 +63,7 @@
 .kdicon-copy:before { content: "\e678"; }
 .kdicon-counterclockwise:before { content: "\e6e5"; }
 .kdicon-customize:before { content: "\e707"; }
+.kdicon-dashboard:before { content: "\e71c"; }
 .kdicon-date-selection:before { content: "\e70f"; }
 .kdicon-date:before { content: "\e6eb"; }
 .kdicon-delete-indentation:before { content: "\e697"; }

package/lib/badge/style/index.css

@@ -172,7 +172,6 @@
   background-color: var(--kd-c-badge-color-success, var(--kd-g-color-success, #1ba854));
 }
 .kd-badge-status-processing {
-  position: relative;
   background-color: var(--kd-c-badge-color-ongoing, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-badge-status-processing::after {
@@ -188,13 +187,13 @@
   content: '';
 }
 .kd-badge-status-error {
-  background-color: var(--kd-c-badge-color-warning, var(--kd-g-color-warning, #ff991c));
+  background-color: var(--kd-c-badge-color-error, var(--kd-g-color-error, #fb2323));
 }
 .kd-badge-status-default {
-  background-color: var(--kd-c-badge-color-success, var(--kd-g-color-success, #1ba854));
+  background-color: var(--kd-c-badge-color-default, #d9d9d9);
 }
 .kd-badge-status-warning {
-  background-color: var(--kd-c-badge-color-error, var(--kd-g-color-error, #fb2323));
+  background-color: var(--kd-c-badge-color-warning, var(--kd-g-color-warning, #ff991c));
 }
 .kd-badge-not-a-wrapper:not(.kd-badge-status) {
   vertical-align: middle;

package/lib/badge/style/index.less

@@ -74,7 +74,6 @@
       background-color: @badge-color-success;
     }
     &-processing {
-      position: relative;
       background-color: @badge-color-ongoing;
       &::after {
         position: absolute;
@@ -89,13 +88,13 @@
       }
     }
     &-error {
-      background-color: @badge-color-warning;
+      background-color: @badge-color-error;
     }
     &-default {
-      background-color: @badge-color-success;
+      background-color: @badge-color-default;
     }
     &-warning {
-      background-color: @badge-color-error;
+      background-color: @badge-color-warning;
     }
   }
 

package/lib/badge/style/token.less

@@ -21,3 +21,4 @@
 @badge-color-ongoing: var(~'@{badge-prefix}-color-ongoing', @color-ongoing);
 @badge-color-warning: var(~'@{badge-prefix}-color-warning', @color-warning);
 @badge-color-error: var(~'@{badge-prefix}-color-error', @color-error);
+@badge-color-default: var(~'@{badge-prefix}-color-default', #d9d9d9);

package/lib/carousel/style/index.css

@@ -107,87 +107,6 @@
       -ms-flex: 1;
           flex: 1;
 }
-.kd-carousel-slidelist {
-  list-style: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  width: 100%;
-}
-.kd-carousel-slidelist-item {
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  border-radius: var(--kd-c-carousel-border-radius, 0px);
-}
-.kd-carousel-fadelist {
-  list-style: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  position: relative;
-}
-.kd-carousel-fadelist-item {
-  opacity: 1;
-  position: relative;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  height: 100%;
-  width: 100%;
-}
-.kd-carousel-fadelist-item-animation {
-  -webkit-transition: opacity 0.3s ease;
-  transition: opacity 0.3s ease;
-}
-.kd-carousel-fadelist-item-none-animation {
-  -webkit-transition: none;
-  transition: none;
-}
-.kd-carousel-fadelist-item-not-hidden {
-  opacity: 1;
-}
-.kd-carousel-fadelist-item-hidden {
-  opacity: 0;
-}
-.kd-carousel-displaylist {
-  list-style: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  width: 100%;
-  position: relative;
-}
-.kd-carousel-displaylist-item {
-  display: block;
-  position: relative;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  height: 100%;
-  width: 100%;
-}
-.kd-carousel-displaylist-item-not-hidden {
-  display: block;
-}
-.kd-carousel-displaylist-item-hidden {
-  display: none;
-}
 .kd-carousel-list {
   list-style: none;
   display: -webkit-box;
@@ -197,9 +116,6 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
   position: relative;
 }
 .kd-carousel-list-item {
@@ -209,6 +125,9 @@
   height: 100%;
   width: 100%;
 }
+.kd-carousel-list-slide {
+  width: 100%;
+}
 .kd-carousel-list-slide .kd-carousel-list-item {
   opacity: 1;
   border-radius: var(--kd-c-carousel-border-radius, 0px);
@@ -227,6 +146,11 @@
 .kd-carousel-list-slide .kd-carousel-list-item-hidden {
   opacity: 0;
 }
+.kd-carousel-list-fade {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
 .kd-carousel-list-fade .kd-carousel-list-item {
   opacity: 1;
 }
@@ -244,6 +168,9 @@
 .kd-carousel-list-fade .kd-carousel-list-item-hidden {
   opacity: 0;
 }
+.kd-carousel-list-display {
+  width: 100%;
+}
 .kd-carousel-list-display .kd-carousel-list-item {
   display: block;
 }

package/lib/carousel/style/index.less

@@ -10,71 +10,11 @@
     overflow: hidden;
     flex: 1;
   }
-  &-slidelist {
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    &-item {
-      flex-shrink: 0;
-      height: 100%;
-      width: 100%;
-      overflow: hidden;
-      border-radius: @carousel-boder-radius;
-    }
-  }
-  &-fadelist {
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-    position: relative;
-    &-item {
-      opacity: 1;
-      position: relative;
-      flex-shrink: 0;
-      height: 100%;
-      width: 100%;
-      &-animation {
-        transition: opacity 0.3s ease;
-      }
-      &-none-animation {
-        transition: none;
-      }
-      &-not-hidden {
-        opacity: 1;
-      }
-      &-hidden {
-        opacity: 0;
-      }
-    }
-  }
-  &-displaylist {
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    position: relative;
-    &-item {
-      display: block;
-      position: relative;
-      flex-shrink: 0;
-      height: 100%;
-      width: 100%;
-      &-not-hidden {
-        display: block;
-      }
-      &-hidden {
-        display: none;
-      }
-    }
-  }
 
   &-list {
     list-style: none;
     display: flex;
     flex-direction: row;
-    flex: 1;
     position: relative;
 
     &-item {
@@ -85,6 +25,7 @@
     }
 
     &-slide {
+      width: 100%;
       .@{carousel-prefix-cls}-list-item {
         opacity: 1;
         border-radius: @carousel-boder-radius;
@@ -104,6 +45,7 @@
     }
 
     &-fade {
+      flex: 1;
       .@{carousel-prefix-cls}-list-item {
         opacity: 1;
         &-animation {
@@ -122,6 +64,7 @@
     }
 
     &-display {
+      width: 100%;
       .@{carousel-prefix-cls}-list-item {
         display: block;
         &-not-hidden {

package/lib/cascader/cascader.d.ts

@@ -14,8 +14,8 @@ declare type FieldNames = {
     value: string;
     children: string;
 };
-export declare const PopupPlacement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
-export declare type PopupPlacementType = typeof PopupPlacement[number];
+export declare const CascaderPlacement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
+export declare type CascaderPlacementType = typeof CascaderPlacement[number];
 export declare type CascaderValueType = Array<string | number>;
 export declare type CascaderExpandTrigger = 'click' | 'hover';
 export interface CascaderProps extends PopperProps {
@@ -29,8 +29,10 @@ export interface CascaderProps extends PopperProps {
     allowClear?: boolean;
     placeholder?: string;
     popupVisible?: boolean;
+    popperVisible?: boolean;
     fieldNames?: FieldNames;
     popupClassName?: string;
+    popperClassName?: string;
     changeOnSelect?: boolean;
     notFoundContent?: string;
     value?: CascaderValueType;
@@ -40,10 +42,12 @@ export interface CascaderProps extends PopperProps {
     expandIcon?: React.ReactNode;
     defaultPopupVisible?: boolean;
     defaultValue?: CascaderValueType;
-    popupPlacement?: PopupPlacementType;
+    popupPlacement?: CascaderPlacementType;
+    popperPlacement?: CascaderPlacementType;
     options?: Array<CascaderOptionType>;
     expandTrigger?: CascaderExpandTrigger;
     onPopupVisibleChange?: (visible: boolean) => void;
+    onPopperVisibleChange?: (visible: boolean) => void;
     loadData?: (selectedOptions: CascaderOptionType[]) => void;
     dropdownRender?: (menus: React.ReactNode) => React.ReactNode;
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;

package/lib/cascader/cascader.js

@@ -11,7 +11,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.PopupPlacement = void 0;
+exports.default = exports.CascaderPlacement = void 0;
 
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 
@@ -49,8 +49,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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 PopupPlacement = (0, _type.tuple)('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
-exports.PopupPlacement = PopupPlacement;
+var CascaderPlacement = (0, _type.tuple)('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
+exports.CascaderPlacement = CascaderPlacement;
 var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(_configProvider.ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls,
@@ -75,6 +75,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       getPopupContainer = allProps.getPopupContainer,
       defaultPopupVisible = allProps.defaultPopupVisible,
       onPopupVisibleChange = allProps.onPopupVisibleChange,
+      onPopperVisibleChange = allProps.onPopperVisibleChange,
       customPrefixcls = allProps.prefixCls; // className前缀
 
   var prefixCls = getPrefixCls(pkgPrefixCls, 'cascader', customPrefixcls);
@@ -82,14 +83,14 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var triggerRef = React.useRef();
   var mergeRef = ref || pickerRef;
 
-  var _React$useState = React.useState(!!props.popupVisible || defaultPopupVisible),
+  var _React$useState = React.useState(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       visible = _React$useState2[0],
       setVisible = _React$useState2[1];
 
   React.useEffect(function () {
-    setVisible(!!props.popupVisible);
-  }, [props.popupVisible]);
+    setVisible(!!props.popperVisible || !!props.popupVisible);
+  }, [props.popperVisible, props.popupVisible]);
 
   var _React$useState3 = React.useState([options]),
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
@@ -231,6 +232,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var onVisibleChange = function onVisibleChange(visible) {
     setVisible(visible);
     onPopupVisibleChange && onPopupVisibleChange(visible);
+    onPopperVisibleChange && onPopperVisibleChange(visible);
     visible && setSelectedOptions((0, _slice.default)(currentOptions).call(currentOptions, 0));
   };
 
@@ -282,8 +284,8 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     trigger: 'click',
     getPopupContainer: getPopupContainer,
     prefixCls: "".concat(prefixCls, "-menus"),
-    placement: allProps.popupPlacement,
-    popperClassName: allProps.popupClassName,
+    placement: allProps.popperPlacement || allProps.popupPlacement,
+    popperClassName: allProps.popperClassName || allProps.popupClassName,
     getTriggerElement: function getTriggerElement() {
       return triggerRef.current;
     }

package/lib/checkbox/checkbox.js

@@ -64,7 +64,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
       children = CheckboxProps.children,
       style = CheckboxProps.style,
       value = CheckboxProps.value,
-      indeterminate = CheckboxProps.indeterminate;
+      indeterminate = CheckboxProps.indeterminate,
+      name = CheckboxProps.name;
 
   var getChecked = function getChecked() {
     return (0, _isBoolean.default)(checked) ? checked : defaultChecked;
@@ -134,7 +135,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
         ref: ref,
         value: value,
         checked: selected,
-        disabled: disabled
+        disabled: disabled,
+        name: name
       })), children && /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(checkboxPrefixCls, "-children")
       }, children), !isDefaultType() && /*#__PURE__*/_react.default.createElement("span", {

package/lib/checkbox/style/index.css

@@ -151,6 +151,10 @@
       -ms-flex-align: center;
           align-items: center;
   z-index: 999;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .kd-checkbox-children .kd-input-underline {
   background-color: transparent;
@@ -383,3 +387,6 @@
 .kd-checkbox-default.checked .kd-checkbox-children {
   color: var(--kd-c-checkbox-color-text-primary, #212121);
 }
+.kd-checkbox-default-indeterminate .kd-checkbox-children {
+  color: var(--kd-c-checkbox-color-text-primary, #212121);
+}

package/lib/checkbox/style/index.less

@@ -38,6 +38,8 @@
     justify-content: center;
     align-items: center;
     z-index: 999;
+    user-select: none;
+
     .kd-input-underline {
       background-color: transparent;
       border-bottom: none;
@@ -249,4 +251,9 @@
       color: @checkbox-font-color;
     }
   }
+  &-indeterminate {
+    .@{checkbox-prefix-cls}-children {
+      color: @checkbox-font-color;
+    }
+  }
 }

package/lib/form/Field.d.ts

@@ -3,7 +3,7 @@ import { NamePath, LabelAlign, Rule } from './interface';
 export interface FormItemProps {
     children?: React.ReactNode;
     className?: string;
-    defaultValue?: string;
+    defaultValue?: any;
     disabled?: boolean;
     hidden?: boolean;
     label?: string | number;
@@ -15,6 +15,7 @@ export interface FormItemProps {
     rules?: Rule[];
     validateTrigger?: string | string[];
     wrapperWidth?: string | number;
+    valuePropName?: string;
 }
 declare const Field: React.FC<FormItemProps>;
 export default Field;

package/lib/form/Field.js

@@ -13,7 +13,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _extends5 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
@@ -23,10 +23,14 @@ 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 _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -67,6 +71,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 
 var DEFAULT_TRIGGER = 'onChange';
+var FormEventValuePropNames = ['value', 'checked'];
 
 var generateEventHandler = function generateEventHandler(handler, validateTrigger) {
   var eventHandler = {};
@@ -86,8 +91,30 @@ var generateEventHandler = function generateEventHandler(handler, validateTrigge
   return eventHandler;
 };
 
+var INNER_VALUE_PROPS_LIST = [{
+  name: 'Radio',
+  propName: 'checked'
+}, {
+  name: 'Checkbox',
+  propName: 'checked'
+}, {
+  name: 'Switch',
+  propName: 'checked'
+}, {
+  name: 'Upload',
+  propName: 'fileList'
+}, {
+  name: 'Transfer',
+  propName: 'targetKey'
+}, {
+  name: 'RangePicker',
+  propName: 'ranges'
+}];
+
 var Field = function Field(props) {
-  var _classnames, _context2;
+  var _classnames;
+
+  var _a;
 
   (0, _devwarning.default)(! /*#__PURE__*/_react.default.isValidElement(props.children), 'Form.Item', 'Children of Form.Item is not a valid element');
   (0, _devwarning.default)(!props.name, 'Form.Item', 'Form.Item must have a name');
@@ -131,7 +158,30 @@ var Field = function Field(props) {
       rules = _props$rules === void 0 ? [] : _props$rules,
       wrapperWidth = props.wrapperWidth,
       validateTrigger = props.validateTrigger,
-      defaultValue = props.defaultValue;
+      defaultValue = props.defaultValue,
+      valuePropName = props.valuePropName;
+  var childrenNode = null;
+  var innerValuePropName = 'value';
+  var childrenArray = (0, _reactChildren.toArray)(children);
+
+  if (childrenArray.length) {
+    (0, _devwarning.default)(childrenArray.length > 1, 'Form.Item', 'Form.Item must have only child');
+    childrenNode = childrenArray[0];
+  }
+
+  var innerDisplayName = (_a = childrenNode === null || childrenNode === void 0 ? void 0 : childrenNode.type) === null || _a === void 0 ? void 0 : _a.displayName;
+
+  if (valuePropName !== undefined) {
+    innerValuePropName = valuePropName;
+  } else if (innerDisplayName) {
+    var filter = (0, _filter.default)(INNER_VALUE_PROPS_LIST).call(INNER_VALUE_PROPS_LIST, function (item) {
+      return innerDisplayName === item.name;
+    });
+
+    if (filter.length) {
+      innerValuePropName = filter[0].propName;
+    }
+  }
 
   var onStoreChange = function onStoreChange(stores, _namePathList, source) {
     var prev = stores.prev,
@@ -206,10 +256,22 @@ var Field = function Field(props) {
   var value = getFieldValue(name);
   var validateMessage = getFieldError(name);
 
-  var handleValueChange = _react.default.useCallback(function (evt) {
+  var getInputValueFormProp = function getInputValueFormProp(evt) {
     var _a;
 
-    var inputValue = typeof evt === 'string' ? evt : (_a = evt.target) === null || _a === void 0 ? void 0 : _a.value;
+    var inputValue;
+
+    if (Object.prototype.hasOwnProperty.call(evt, 'target') && (0, _includes.default)(FormEventValuePropNames).call(FormEventValuePropNames, innerValuePropName)) {
+      inputValue = (_a = evt.target) === null || _a === void 0 ? void 0 : _a[innerValuePropName];
+    } else {
+      inputValue = evt;
+    }
+
+    return inputValue;
+  };
+
+  var handleValueChange = _react.default.useCallback(function (evt) {
+    var inputValue = getInputValueFormProp(evt);
     dispatch({
       type: 'updateValue',
       namePath: name,
@@ -224,9 +286,11 @@ var Field = function Field(props) {
     });
   }, [name]);
 
-  var trigger = (0, _extends3.default)((0, _defineProperty2.default)({}, DEFAULT_TRIGGER, handleValueChange), generateEventHandler(handleValueValidate, validateTrigger));
+  var trigger = (0, _extends5.default)((0, _defineProperty2.default)({}, DEFAULT_TRIGGER, handleValueChange), generateEventHandler(handleValueValidate, validateTrigger));
 
   var mergeProps = function mergeProps(fa, ch) {
+    var _extends3;
+
     if (!ch) {
       return {};
     }
@@ -237,17 +301,13 @@ var Field = function Field(props) {
 
     var _ch$props = ch.props,
         chChange = _ch$props.onChange,
-        chValue = _ch$props.value,
+        chValue = _ch$props[innerValuePropName],
         chDisabled = _ch$props.disabled,
         chDefaultValue = _ch$props.defaultValue;
 
     var onChange = function onChange(evt) {
       if (chValue === undefined) {
-        if (typeof evt === 'string') {
-          setFieldValue(evt);
-        } else {
-          setFieldValue(evt.target.value);
-        }
+        setFieldValue(getInputValueFormProp(evt));
       }
 
       if (typeof faChange === 'function') {
@@ -270,12 +330,10 @@ var Field = function Field(props) {
       forceUpdate();
     }
 
-    return (0, _extends3.default)((0, _extends3.default)({}, rest), {
+    return (0, _extends5.default)((0, _extends5.default)({}, rest), (_extends3 = {
       onChange: onChange,
-      defaultValue: defaultValue,
-      value: fieldValue,
-      disabled: chDisabled || faDisabled
-    });
+      defaultValue: defaultValue
+    }, (0, _defineProperty2.default)(_extends3, innerValuePropName, fieldValue), (0, _defineProperty2.default)(_extends3, "disabled", chDisabled || faDisabled), _extends3));
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -288,11 +346,10 @@ var Field = function Field(props) {
   }), /*#__PURE__*/_react.default.createElement(_FieldWrapper.default, {
     width: wrapperWidth,
     validateMessage: validateMessage
-  }, (0, _map.default)(_context2 = (0, _reactChildren.toArray)(children)).call(_context2, function (child, index) {
-    var keys = mergeProps((0, _extends3.default)((0, _extends3.default)({
-      disabled: disabled,
-      value: value
-    }, trigger), {
+  }, (0, _map.default)(childrenArray).call(childrenArray, function (child, index) {
+    var keys = mergeProps((0, _extends5.default)((0, _extends5.default)((0, _defineProperty2.default)({
+      disabled: disabled
+    }, innerValuePropName, value), trigger), {
       key: index
     }), child);
     return child ? /*#__PURE__*/_react.default.cloneElement(child, keys) : child;