@kdcloudjs/kdesign 1.6.27 → 1.6.29

package/es/_utils/numberUtil.js

@@ -147,9 +147,7 @@ export function getMaxNumberByPrecision(integerPrecision, decimalPrecision) {
  */
 
 export function isExp(number) {
-  number = Number(number);
-  if (isNaN(number) || !isFinite(number)) return false;
-  return /^(?!-0(\.0+)?(e|$))-?(0|[1-9]\d*)(\.\d+)?(e-?(0|[1-9]\d*))?$/i.test(number.toString());
+  return /\d+\.?\d*e[+-]*\d+/i.test(number.toString());
 }
 /**
  * 将科学计数法显示的数字格式化为正常浮点数

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

@@ -155,6 +155,7 @@ declare const compDefaultProps: {
         mask: string;
         mustInScope: boolean;
         mustInPrecisionScope: boolean;
+        numberMode: boolean;
     };
     Layout: {};
     Modal: {

package/es/config-provider/compDefaultProps.js

@@ -160,7 +160,8 @@ var compDefaultProps = {
     showDecimalTailZero: false,
     mask: '',
     mustInScope: false,
-    mustInPrecisionScope: true
+    mustInPrecisionScope: true,
+    numberMode: false
   },
   Layout: {},
   Modal: {

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

@@ -294,7 +294,7 @@ function Panel(props) {
       }
   }
 
-  var showHeader = !(picker === 'date' && showTime || picker === 'time');
+  var showHeader = !(picker === 'date' && showTime || picker === 'time') || innerPicker !== undefined;
   var containerCls = classnames("".concat(prefixCls, "-warpper"));
   return /*#__PURE__*/React.createElement("div", {
     className: containerCls

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

@@ -148,17 +148,18 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
   var _format = getDefaultFormat(format, picker, showTime && !disabledTimePanel, use12Hours); // 面板展示日期
 
 
-  var _useMergedState3 = useMergedState(null, {
-    // value: pickerValue,
-    defaultValue: defaultPickerValue || dateValue,
-    postState: function postState(date) {
-      return date || newDate();
-    }
-  }),
-      _useMergedState4 = _slicedToArray(_useMergedState3, 2),
-      viewDate = _useMergedState4[0],
-      setViewDate = _useMergedState4[1]; // text
+  var _useState = useState(defaultPickerValue || dateValue || new Date()),
+      _useState2 = _slicedToArray(_useState, 2),
+      viewDate = _useState2[0],
+      setInnerViewDate = _useState2[1];
 
+  var setViewDate = function setViewDate(date) {
+    setInnerViewDate(date || new Date());
+  };
+
+  useEffect(function () {
+    setViewDate(dateValue);
+  }, [dateValue]); // text
 
   var valueText = useValueTexts(selectedValue, {
     format: _format
@@ -198,7 +199,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
       onEnter = _useHoverValue2[1],
       onLeave = _useHoverValue2[2];
 
-  var _useMergedState5 = useMergedState(false, {
+  var _useMergedState3 = useMergedState(false, {
     value: open,
     defaultValue: defaultOpen,
     postState: function postState(postOpen) {
@@ -213,12 +214,12 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
 
     }
   }),
-      _useMergedState6 = _slicedToArray(_useMergedState5, 2),
-      openValue = _useMergedState6[0],
-      triggerInnerOpen = _useMergedState6[1]; // Save panel is changed from which panel
+      _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+      openValue = _useMergedState4[0],
+      triggerInnerOpen = _useMergedState4[1]; // Save panel is changed from which panel
 
 
-  var _useMergedState7 = useMergedState(function () {
+  var _useMergedState5 = useMergedState(function () {
     if (picker === 'time') {
       return 'time';
     }
@@ -227,14 +228,14 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
   }, {
     value: mode
   }),
-      _useMergedState8 = _slicedToArray(_useMergedState7, 2),
-      mergedMode = _useMergedState8[0],
-      setInnerMode = _useMergedState8[1];
+      _useMergedState6 = _slicedToArray(_useMergedState5, 2),
+      mergedMode = _useMergedState6[0],
+      setInnerMode = _useMergedState6[1];
 
-  var _useState = useState(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      innerPicker = _useState2[0],
-      setInnerPicker = _useState2[1];
+  var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      innerPicker = _useState4[0],
+      setInnerPicker = _useState4[1];
 
   useEffect(function () {
     setInnerMode(picker);
@@ -248,6 +249,8 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
       } else if (valueText !== text) {
         resetText();
       }
+    } else {
+      setInnerPicker(undefined);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [openValue, valueText]);
@@ -266,9 +269,6 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
   });
 
   var triggerChange = function triggerChange(newValue) {
-    setSelectedValue(newValue);
-    setDateValue(newValue);
-
     if (onSelect) {
       onSelect(newValue);
     }
@@ -276,6 +276,9 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     if (onChange && !isEqual(dateValue, newValue)) {
       onChange(newValue, newValue ? formatDate(newValue, _format) : '');
     }
+
+    setSelectedValue(newValue);
+    setDateValue(newValue);
   };
 
   var triggerOpen = function triggerOpen(newOpen) {
@@ -289,8 +292,6 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
   var onContextSelect = function onContextSelect(date, type) {
     if (type === 'inner') {
       setViewDate(date);
-      setSelectedValue(date);
-      setDateValue(date);
     } else {
       if (type === 'submit' || type !== 'key' && !needConfirmButton) {
         setViewDate(date);

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

@@ -110,12 +110,10 @@ function InputDate(props, ref) {
 
   if (allowClear && (getValue(dateValue, 0) && !mergedDisabled[0] || getValue(dateValue, 1) && !mergedDisabled[1])) {
     clearNode = /*#__PURE__*/React.createElement("span", {
-      onMouseDown: function onMouseDown(e) {
-        e.preventDefault();
+      onMouseUp: function onMouseUp(e) {
         e.stopPropagation();
       },
-      onMouseUp: function onMouseUp(e) {
-        e.preventDefault();
+      onClick: function onClick(e) {
         e.stopPropagation();
         var values = dateValue;
 

package/es/date-picker/range-picker.d.ts

@@ -18,6 +18,7 @@ export interface RangePickerSharedProps {
     separator?: React.ReactNode;
     allowEmpty?: [boolean, boolean];
     suffixIcon?: React.ReactNode;
+    clearIcon?: React.ReactNode;
     mode?: [PanelMode, PanelMode];
     onChange?: (values: RangeValue, formatString: [string | null, string | null]) => void;
     onCalendarChange?: (values: RangeValue, formatString: [string | null, string | null], info: RangeInfo) => void;

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

@@ -105,6 +105,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       _datePickerProps$seco = datePickerProps.secondStep,
       secondStep = _datePickerProps$seco === void 0 ? 1 : _datePickerProps$seco,
       suffixIcon = datePickerProps.suffixIcon,
+      clearIcon = datePickerProps.clearIcon,
       panelRender = datePickerProps.panelRender,
       renderExtraFooter = datePickerProps.renderExtraFooter,
       disabledHours = datePickerProps.disabledHours,
@@ -696,6 +697,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     endOpen: endOpen,
     needConfirmButton: needConfirmButton,
     suffixIcon: suffixIcon,
+    clearIcon: clearIcon,
     format: _format,
     open: mergedOpen,
     readOnly: inputReadOnly,

package/es/date-picker/single/input-date.js

@@ -91,12 +91,10 @@ function InputDate(props, ref) {
 
   if (allowClear && dateValue && !disabled) {
     clearNode = /*#__PURE__*/React.createElement("span", {
-      onMouseDown: function onMouseDown(e) {
-        e.preventDefault();
+      onMouseUp: function onMouseUp(e) {
         e.stopPropagation();
       },
-      onMouseUp: function onMouseUp(e) {
-        e.preventDefault();
+      onClick: function onClick(e) {
         e.stopPropagation();
         triggerChange(null);
         triggerOpen(false);

package/es/dropdown/dropdown.js

@@ -19,7 +19,7 @@ var findItem = function findItem(element) {
 };
 
 var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
 
   var _React$useContext = React.useContext(ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls,
@@ -83,11 +83,16 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
 
-  var menuElement = isMenu ? /*#__PURE__*/React.cloneElement(menu, {
+  var cloneObj = /*#__PURE__*/React.cloneElement(menu, {
     selectedKey: selectedKey,
     onClick: handleItemClick,
     selectable: menuSelectable
-  }) : /*#__PURE__*/React.createElement("ul", {
+  });
+  var menuElement = isMenu ? Array.isArray((_d = menu.props) === null || _d === void 0 ? void 0 : _d.children) ? cloneObj : /*#__PURE__*/React.createElement("ul", {
+    className: "".concat(prefixCls, "-menu"),
+    onClick: handleItemClick,
+    role: "menu"
+  }, menu.props.children) : /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-menu"),
     onClick: handleItemClick,
     role: "menu"

package/es/form/Field.js

@@ -231,11 +231,15 @@ var Field = function Field(props) {
   var validateMessage = getFieldError(name);
 
   var getInputValueFormProp = function getInputValueFormProp(evt) {
+    var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+
     var _a;
 
     var inputValue;
 
-    if (Object.prototype.hasOwnProperty.call(evt, 'target') && _includesInstanceProperty(FormEventValuePropNames).call(FormEventValuePropNames, innerValuePropName)) {
+    if (innerDisplayName === 'RadioGroup' && payload) {
+      inputValue = payload[1];
+    } else if (Object.prototype.hasOwnProperty.call(evt, 'target') && _includesInstanceProperty(FormEventValuePropNames).call(FormEventValuePropNames, innerValuePropName)) {
       inputValue = (_a = evt.target) === null || _a === void 0 ? void 0 : _a[innerValuePropName];
     } else {
       inputValue = evt;
@@ -244,14 +248,6 @@ var Field = function Field(props) {
     return inputValue;
   };
 
-  var handleValueChange = React.useCallback(function (evt) {
-    var inputValue = getInputValueFormProp(evt);
-    dispatch({
-      type: 'updateValue',
-      namePath: name,
-      value: inputValue
-    });
-  }, [name]);
   var handleValueValidate = React.useCallback(function () {
     dispatch({
       type: 'validateField',
@@ -259,18 +255,14 @@ var Field = function Field(props) {
     });
   }, [name]);
 
-  var trigger = _extends(_defineProperty({}, DEFAULT_TRIGGER, handleValueChange), generateEventHandler(handleValueValidate, validateTrigger));
-
   var mergeProps = function mergeProps(fa, ch) {
-    var _extends3;
+    var _extends2;
 
     if (!ch) {
       return {};
     }
 
-    var faChange = fa.onChange,
-        faDisabled = fa.disabled,
-        faRest = __rest(fa, ["onChange", "disabled"]);
+    var faRest = __rest(fa, []);
 
     var _ch$props = ch.props,
         chChange = _ch$props.onChange,
@@ -279,16 +271,24 @@ var Field = function Field(props) {
         chDefaultValue = _ch$props.defaultValue;
 
     var onChange = function onChange() {
-      if (chValue === undefined) {
-        setFieldValue(getInputValueFormProp(arguments.length <= 0 ? undefined : arguments[0]));
+      for (var _len = arguments.length, evt = new Array(_len), _key = 0; _key < _len; _key++) {
+        evt[_key] = arguments[_key];
       }
 
-      if (typeof faChange === 'function') {
-        faChange.apply(void 0, arguments);
+      var iv = getInputValueFormProp(evt[0], evt);
+
+      if (chValue === undefined) {
+        setFieldValue(iv);
       }
 
+      dispatch({
+        type: 'updateValue',
+        namePath: name,
+        value: iv
+      });
+
       if (typeof chChange === 'function') {
-        chChange.apply(void 0, arguments);
+        chChange.apply(void 0, evt);
       }
     };
 
@@ -303,10 +303,10 @@ var Field = function Field(props) {
       forceUpdate();
     }
 
-    var mergeResult = _extends(_extends({}, faRest), (_extends3 = {
+    var mergeResult = _extends(_extends({}, faRest), (_extends2 = {
       onChange: onChange,
       defaultValue: defaultValue
-    }, _defineProperty(_extends3, innerValuePropName, fieldValue), _defineProperty(_extends3, "disabled", chDisabled !== undefined ? chDisabled : faDisabled !== undefined ? faDisabled : formDisabled), _extends3));
+    }, _defineProperty(_extends2, innerValuePropName, fieldValue), _defineProperty(_extends2, "disabled", chDisabled !== undefined ? chDisabled : disabled !== undefined ? disabled : formDisabled), _extends2));
 
     var mergeEventArray = [];
 
@@ -348,9 +348,7 @@ var Field = function Field(props) {
     width: wrapperWidth,
     validateMessage: validateMessage
   }, _mapInstanceProperty(childrenArray).call(childrenArray, function (child, index) {
-    var keys = mergeProps(_extends(_extends(_defineProperty({
-      disabled: disabled
-    }, innerValuePropName, value), trigger), {
+    var keys = mergeProps(_extends(_extends({}, generateEventHandler(handleValueValidate, validateTrigger)), {
       key: index,
       id: customizeHtmlFor ? undefined : htmlFor
     }), child);

package/es/image/preview-group.js

@@ -15,18 +15,18 @@ var PreviewGroup = function PreviewGroup(_ref) {
   var images = React.useMemo(function () {
     var _context;
 
-    return React.Children.count(children) > 1 ? _mapInstanceProperty(_context = _filterInstanceProperty(children).call(children, function (image) {
+    return Array.isArray(children) ? _mapInstanceProperty(_context = _filterInstanceProperty(children).call(children, function (image) {
       return image.props.src;
     })).call(_context, function (image) {
       return image.props;
-    }) : [children ? children.props : {}];
+    }) : [children !== undefined ? children.props : {}];
   }, [children]); // eslint-disable-next-line react-hooks/rules-of-hooks
 
   var refs = _mapInstanceProperty(images).call(images, function () {
     return React.useRef();
   });
 
-  var _React$useState = React.useState(images[0]),
+  var _React$useState = React.useState(images[0] || {}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       image = _React$useState2[0],
       setImage = _React$useState2[1];
@@ -45,7 +45,9 @@ var PreviewGroup = function PreviewGroup(_ref) {
     exit && setVisible(true);
   }, [exit]);
   React.useEffect(function () {
-    setImage(images[current]);
+    if (images[current]) {
+      setImage(images[current]);
+    }
   }, [current, images]);
 
   var _React$useState7 = React.useState(false),

package/es/image/preview.js

@@ -9,6 +9,7 @@ import { getCompProps } from '../_utils';
 import { ConfigContext } from '../config-provider';
 import Icon from '../icon';
 import throttle from 'lodash/throttle';
+import findLast from 'lodash/findLast';
 import Draggable from 'react-draggable';
 
 var Preview = function Preview(props) {
@@ -90,7 +91,7 @@ var Preview = function Preview(props) {
   }, [show, scale]);
 
   var handleZoomOut = function handleZoomOut() {
-    var nextScale = scales.findLast(function (s) {
+    var nextScale = findLast(scales, function (s) {
       return s / 100 < scale;
     });
     if (nextScale !== undefined) setScale(nextScale / 100);

package/es/input/ClearableLabeledInput.d.ts

@@ -20,6 +20,7 @@ interface ClearableInputProps {
     addonBefore?: React.ReactNode;
     addonAfter?: React.ReactNode;
     numberMark?: React.ReactNode;
+    inputCount?: React.ReactNode;
 }
 declare const ClearableInput: React.FC<ClearableInputProps>;
 export default ClearableInput;

package/es/input/ClearableLabeledInput.js

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { tuple } from '../_utils/type';
 var ClearableInputType = tuple('input', 'text');
 export function hasPrefixSuffix(props) {
-  return !!(props.prefix || props.suffix || props.allowClear);
+  return !!(props.prefix || props.suffix || props.allowClear || !!props.inputCount);
 }
 
 var ClearableInput = function ClearableInput(props) {
@@ -27,7 +27,8 @@ var ClearableInput = function ClearableInput(props) {
       addonBefore = props.addonBefore,
       addonAfter = props.addonAfter,
       focused = props.focused,
-      numberMark = props.numberMark;
+      numberMark = props.numberMark,
+      inputCount = props.inputCount;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -60,10 +61,14 @@ var ClearableInput = function ClearableInput(props) {
   };
 
   var renderSuffix = function renderSuffix() {
-    if (suffix || !disabled && !!allowClear) {
+    if (suffix || !disabled && !!allowClear || inputCount) {
       return /*#__PURE__*/React.createElement("span", {
         className: "".concat(prefixCls, "-suffix")
-      }, renderClearIcon(), suffix);
+      }, renderClearIcon(), inputCount && /*#__PURE__*/React.createElement("span", {
+        style: {
+          marginRight: suffix ? 9 : 0
+        }
+      }, inputCount), /*#__PURE__*/React.createElement("span", null, suffix));
     }
 
     return null;

package/es/input/TextArea.js

@@ -78,8 +78,13 @@ var InternalTextarea = function InternalTextarea(props, ref) {
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      showNumberMark = _useState4[0],
-      setShowNumberMark = _useState4[1];
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showNumberMark = _useState6[0],
+      setShowNumberMark = _useState6[1];
 
   var resizeTextarea = useCallback(function () {
     if (!autoSize || !textareaRef.current) {
@@ -112,12 +117,12 @@ var InternalTextarea = function InternalTextarea(props, ref) {
   };
 
   var handleFocus = function handleFocus(e) {
-    !showNumberMark && setShowNumberMark(true);
+    setFocused(true);
     onFocus && onFocus(e);
   };
 
   var handleBlur = function handleBlur(e) {
-    // showNumberMark && setShowNumberMark(false)
+    setFocused(false);
     onBlur && onBlur(e);
   };
 
@@ -163,6 +168,15 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       setValue(propsValue);
     }
   }, [propsValue, setValue]);
+  useEffect(function () {
+    if (focused && !showNumberMark) {
+      setShowNumberMark(true);
+    }
+
+    if (!focused && showNumberMark) {
+      setShowNumberMark(false);
+    }
+  }, [focused]);
 
   var renderTextArea = function renderTextArea(prefixCls) {
     var _context, _classNames2, _context2;

package/es/input/input.d.ts

@@ -21,6 +21,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     onPressEnter?: (_: string, event: React.KeyboardEvent) => void;
     value?: any;
     readonly?: 'readonly';
+    count?: boolean;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
 export default Input;

package/es/input/input.js

@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React, { useContext, useCallback, useState, useRef } from 'react';
+import React, { useContext, useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
@@ -58,7 +58,9 @@ var InternalInput = function InternalInput(props, ref) {
       defaultValue = inputProps.defaultValue,
       propsValue = inputProps.value,
       className = inputProps.className,
-      others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "className"]);
+      maxLength = inputProps.maxLength,
+      count = inputProps.count,
+      others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "className", "maxLength", "count"]);
 
   devWarning(InputSiteTypes.indexOf(size) === -1, 'input', "cannot found input size '".concat(size, "'"));
   devWarning(BorderTypes.indexOf(borderType) === -1, 'input', "cannot found input borderType '".concat(borderType, "'"));
@@ -76,6 +78,11 @@ var InternalInput = function InternalInput(props, ref) {
       focused = _useState2[0],
       setFocused = _useState2[1];
 
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showNumberMark = _useState4[0],
+      setShowNumberMark = _useState4[1];
+
   var thisInputRef = useRef();
   var inputRef = ref || thisInputRef;
   var inputPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // 按钮样式前缀
@@ -83,18 +90,21 @@ var InternalInput = function InternalInput(props, ref) {
   var addonBefore = others.addonBefore,
       addonAfter = others.addonAfter;
   var inputClasses = classNames(inputPrefixCls, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), _defineProperty({}, className, className && !hasPrefixSuffix(inputProps) && !addonBefore && !addonAfter));
-  var handleFocus = useCallback(function (event) {
+
+  var handleFocus = function handleFocus(event) {
     setFocused(true);
     onFocus && onFocus(event);
-  }, [onFocus]);
-  var handleBlur = useCallback(function (event) {
+  };
+
+  var handleBlur = function handleBlur(event) {
     setFocused(false);
     onBlur && onBlur(event);
-  }, [onBlur]);
-  var handleChange = useCallback(function (event) {
+  };
+
+  var handleChange = function handleChange(event) {
     propsValue === undefined && setValue(event.target.value);
     onChange && onChange(event);
-  }, [onChange]);
+  };
 
   var handleReset = function handleReset() {
     setValue('');
@@ -130,13 +140,30 @@ var InternalInput = function InternalInput(props, ref) {
   delete inputDomProps.addonBefore;
   delete inputDomProps.className;
 
+  var renderCount = function renderCount() {
+    var enteredLength = value ? value.length : 0;
+
+    if (maxLength !== undefined && enteredLength >= maxLength) {
+      enteredLength = maxLength;
+    }
+
+    if (count && showNumberMark && !disabled) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames("".concat(inputPrefixCls, "-input-mark-inner"))
+      }, enteredLength, maxLength !== undefined ? "/".concat(maxLength) : null);
+    }
+
+    return null;
+  };
+
   var renderInput = function renderInput() {
     return /*#__PURE__*/React.createElement("input", _extends({
       ref: inputRef,
       type: type,
       disabled: disabled,
       className: inputClasses,
-      value: fixControlledValue(value)
+      value: fixControlledValue(value),
+      maxLength: maxLength
     }, inputDomProps, {
       onFocus: handleFocus,
       onBlur: handleBlur,
@@ -145,13 +172,23 @@ var InternalInput = function InternalInput(props, ref) {
     }));
   };
 
+  useEffect(function () {
+    if (focused && !showNumberMark) {
+      setShowNumberMark(true);
+    }
+
+    if (!focused && showNumberMark) {
+      setShowNumberMark(false);
+    }
+  }, [focused]);
   return /*#__PURE__*/React.createElement(ClearableInput, _extends({}, inputProps, {
     handleReset: handleReset,
     value: value,
     inputType: "input",
     prefixCls: inputPrefixCls,
     element: renderInput(),
-    focused: focused
+    focused: focused,
+    inputCount: renderCount()
   }));
 };
 

package/es/input/style/index.css

@@ -532,3 +532,6 @@ textarea {
 .kd-input-allowClear-spacing {
   padding-right: 20px;
 }
+.kd-input-input-mark-inner {
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
+}