@apdesign/web-react 1.0.0

package/lib/Image/utils/getFixTranslate.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function getFixTranslate(wrapperRect, imgRect, translateX, translateY, scale) {
+    var fixTranslateX = translateX;
+    var fixTranslateY = translateY;
+    if (translateX) {
+        // No translateX if width of img is smaller than width of wrapper
+        if (wrapperRect.width > imgRect.width) {
+            fixTranslateX = 0;
+        }
+        else {
+            // Width of image is greater than width of wrapper
+            if (imgRect.left > wrapperRect.left) {
+                // Reduce translateX to make image move to left if left side of image is within wrapper
+                fixTranslateX -= Math.abs(wrapperRect.left - imgRect.left) / scale;
+            }
+            if (imgRect.right < wrapperRect.right) {
+                // Enlarge translateX to make image move to right if right side of image is within wrapper
+                fixTranslateX += Math.abs(wrapperRect.right - imgRect.right) / scale;
+            }
+        }
+    }
+    if (translateY) {
+        // No translateY if height of img is smaller than height of wrapper
+        if (wrapperRect.height > imgRect.height) {
+            fixTranslateY = 0;
+        }
+        else {
+            // Height of image is greater than height of wrapper
+            if (imgRect.top > wrapperRect.top) {
+                // Reduce translateY to make image move to top if top side of image is within wrapper
+                fixTranslateY -= Math.abs(wrapperRect.top - imgRect.top) / scale;
+            }
+            if (imgRect.bottom < wrapperRect.bottom) {
+                // Enlarge translateY to make image move to bottom if bottom side of image is within wrapper
+                fixTranslateY += Math.abs(wrapperRect.bottom - imgRect.bottom) / scale;
+            }
+        }
+    }
+    return [fixTranslateX, fixTranslateY];
+}
+exports.default = getFixTranslate;

package/lib/Image/utils/getScale.d.ts

@@ -0,0 +1,13 @@
+export declare const defaultScales: number[];
+declare type ZoomType = 'zoomIn' | 'zoomOut';
+declare class PreviewScales {
+    private scaleAttr;
+    constructor(scales: number[]);
+    get scales(): any;
+    get minScale(): any;
+    get maxScale(): any;
+    updateScale(scales: number[]): void;
+    private findClosestIndex;
+    getNextScale(cur: number, type?: ZoomType): number;
+}
+export default PreviewScales;

package/lib/Image/utils/getScale.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultScales = void 0;
+var is_1 = require("../../_util/is");
+exports.defaultScales = [
+    25, 33, 50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200, 250, 300, 400, 500,
+];
+var PreviewScales = /** @class */ (function () {
+    function PreviewScales(scales) {
+        this.updateScale(scales);
+    }
+    Object.defineProperty(PreviewScales.prototype, "scales", {
+        get: function () {
+            return this.scaleAttr;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PreviewScales.prototype, "minScale", {
+        get: function () {
+            return this.scaleAttr[0];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PreviewScales.prototype, "maxScale", {
+        get: function () {
+            return this.scaleAttr[this.scaleAttr.length - 1];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PreviewScales.prototype.updateScale = function (scales) {
+        var validScales = exports.defaultScales;
+        if ((0, is_1.isArray)(scales) && scales.filter(function (num) { return num > 0; }).length) {
+            validScales = scales.filter(function (num) { return num > 0; });
+        }
+        validScales = validScales.map(function (num) { return +(num / 100).toFixed(2); });
+        // 如果缩放比例中不含1， 则需要手动添加在最合适的位置
+        if (!validScales.includes(1)) {
+            var closestIndex = this.findClosestIndex(1, validScales);
+            var closeSale = validScales[closestIndex];
+            var addIndex = closeSale < 1 ? closestIndex + 1 : closestIndex;
+            validScales.splice(addIndex, 0, 1);
+        }
+        this.scaleAttr = validScales;
+    };
+    PreviewScales.prototype.findClosestIndex = function (scale, scales) {
+        if (scales === void 0) { scales = this.scaleAttr; }
+        if (!scales.length)
+            return;
+        if (scales.length === 1)
+            return 0;
+        var closestIndex = scales.length - 1;
+        for (var i = 0; i < scales.length; i++) {
+            var current = scales[i];
+            if (scale === current) {
+                closestIndex = i;
+                break;
+            }
+            if (scale < current) {
+                var pre = scales[i - 1];
+                closestIndex =
+                    pre === undefined || Math.abs(pre - scale) <= Math.abs(current - scale) ? i - 1 : i;
+                break;
+            }
+        }
+        return closestIndex;
+    };
+    PreviewScales.prototype.getNextScale = function (cur, type) {
+        if (type === void 0) { type = 'zoomIn'; }
+        var index = this.scaleAttr.indexOf(cur);
+        if (index === -1) {
+            index = this.findClosestIndex(cur);
+        }
+        if (type === 'zoomIn') {
+            return index === this.scaleAttr.length - 1 ? cur : this.scaleAttr[index + 1];
+        }
+        return index === 0 ? cur : this.scaleAttr[index - 1];
+    };
+    return PreviewScales;
+}());
+exports.default = PreviewScales;

package/lib/Image/utils/hooks/useImageStatus.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare type ImageStatusType = 'beforeLoad' | 'loading' | 'error' | 'loaded' | 'lazyload';
+export default function useImageStatus(defaultValue: ImageStatusType): {
+    status: ImageStatusType;
+    isBeforeLoad: boolean;
+    isLoading: boolean;
+    isError: boolean;
+    isLoaded: boolean;
+    isLazyLoad: boolean;
+    setStatus: import("react").Dispatch<import("react").SetStateAction<ImageStatusType>>;
+};
+export {};

package/lib/Image/utils/hooks/useImageStatus.js

@@ -0,0 +1,37 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+function useImageStatus(defaultValue) {
+    var _a = __read((0, react_1.useState)(defaultValue), 2), status = _a[0], setStatus = _a[1];
+    var isBeforeLoad = status === 'beforeLoad';
+    var isLoading = status === 'loading';
+    var isError = status === 'error';
+    var isLoaded = status === 'loaded';
+    var isLazyLoad = status === 'lazyload';
+    return {
+        status: status,
+        isBeforeLoad: isBeforeLoad,
+        isLoading: isLoading,
+        isError: isError,
+        isLoaded: isLoaded,
+        isLazyLoad: isLazyLoad,
+        setStatus: setStatus,
+    };
+}
+exports.default = useImageStatus;

package/lib/Image/utils/hooks/useShowFooter.d.ts

@@ -0,0 +1,8 @@
+import { ImageProps } from '../../interface';
+interface ShowFooterProps {
+    title: ImageProps['title'];
+    description: ImageProps['description'];
+    actions: ImageProps['actions'];
+}
+export default function useShowFooter(props: ShowFooterProps): (string | number)[];
+export {};

package/lib/Image/utils/hooks/useShowFooter.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function useShowFooter(props) {
+    var title = props.title, description = props.description, actions = props.actions;
+    var showCaption = title || description;
+    var showActions = actions && actions.length;
+    var showFooter = showCaption || showActions;
+    return [showFooter, showCaption, showActions];
+}
+exports.default = useShowFooter;

package/lib/Input/autoSizeTextAreaHeight.d.ts

@@ -0,0 +1,5 @@
+declare function autoSizeTextAreaHeight(autoSize?: boolean | {
+    minRows?: number;
+    maxRows?: number;
+}, node?: HTMLTextAreaElement): any;
+export default autoSizeTextAreaHeight;

package/lib/Input/autoSizeTextAreaHeight.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// auto set textarea height
+var is_1 = require("../_util/is");
+var mirrorTextAreaStyle = "\n  position: absolute;\n  min-height: 0 !important;\n  max-height: none;\n  height:0;\n  visibility: hidden;\n  z-index: -100;\n  top: 0;\n  right: 0;\n";
+var mirrorTextAreaSizing = [
+    'border-width',
+    'box-sizing',
+    'font-family',
+    'font-weight',
+    'font-size',
+    'font-variant',
+    'letter-spacing',
+    'line-height',
+    'padding-top',
+    'padding-bottom',
+    'padding-left',
+    'padding-right',
+    'text-indent',
+    'text-rendering',
+    'text-transform',
+    'width',
+];
+var mirrorTextArea;
+function setMirrorTextArea(originTextArea) {
+    if (!mirrorTextArea) {
+        mirrorTextArea = document.createElement('textarea');
+        document.body.appendChild(mirrorTextArea);
+    }
+    var originStyle = window.getComputedStyle(originTextArea);
+    var originSizingStyle = "\n    " + mirrorTextAreaSizing.map(function (attr) { return attr + ":" + originStyle.getPropertyValue(attr); }).join(';') + "\n  ";
+    mirrorTextArea.setAttribute('style', "" + mirrorTextAreaStyle + originSizingStyle);
+    var paddingSize = parseFloat(originStyle.getPropertyValue('padding-top')) +
+        parseFloat(originStyle.getPropertyValue('padding-bottom'));
+    var boxSizing = originStyle.getPropertyValue('box-sizing');
+    var borderSize = parseFloat(originStyle.getPropertyValue('border-top-width')) +
+        parseFloat(originStyle.getPropertyValue('border-bottom-width'));
+    return {
+        paddingSize: paddingSize,
+        boxSizing: boxSizing,
+        borderSize: borderSize,
+    };
+}
+function autoSizeTextAreaHeight(autoSize, node) {
+    var getRows = function () {
+        var minRows;
+        var maxRows;
+        if ((0, is_1.isObject)(autoSize)) {
+            minRows = autoSize.minRows;
+            maxRows = autoSize.maxRows;
+        }
+        return {
+            minRows: minRows,
+            maxRows: maxRows,
+        };
+    };
+    if (autoSize) {
+        var _a = getRows(), minRows = _a.minRows, maxRows = _a.maxRows;
+        var originTextNode = node;
+        var _b = setMirrorTextArea(originTextNode), paddingSize = _b.paddingSize, boxSizing = _b.boxSizing, borderSize = _b.borderSize;
+        mirrorTextArea.value = originTextNode.value || originTextNode.placeholder || '';
+        var mirrorTextAreaHeight = mirrorTextArea.scrollHeight + borderSize;
+        var minHeight = void 0;
+        var maxHeight = void 0;
+        var overflowY = void 0;
+        if (minRows || maxRows) {
+            mirrorTextArea.value = '';
+            var singleRowHeight = mirrorTextArea.scrollHeight - paddingSize;
+            if ((0, is_1.isNumber)(minRows)) {
+                minHeight = singleRowHeight * minRows;
+                if (boxSizing === 'border-box') {
+                    minHeight += paddingSize;
+                    minHeight += borderSize;
+                }
+                mirrorTextAreaHeight = Math.max(mirrorTextAreaHeight, minHeight);
+            }
+            if ((0, is_1.isNumber)(maxRows)) {
+                maxHeight = singleRowHeight * maxRows;
+                if (boxSizing === 'border-box') {
+                    maxHeight += paddingSize;
+                    maxHeight += borderSize;
+                }
+                overflowY = mirrorTextAreaHeight > maxHeight ? 'auto' : '';
+                maxHeight = Math.min(mirrorTextAreaHeight, maxHeight);
+            }
+        }
+        var textAreaStyle = {};
+        textAreaStyle.height = mirrorTextAreaHeight;
+        if (minHeight) {
+            textAreaStyle.minHeight = minHeight;
+        }
+        if (maxHeight) {
+            textAreaStyle.maxHeight = maxHeight;
+        }
+        if (overflowY) {
+            textAreaStyle.overflowY = overflowY;
+        }
+        return textAreaStyle;
+    }
+}
+exports.default = autoSizeTextAreaHeight;

package/lib/Input/group.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InputGroupProps } from './interface';
+declare const Group: React.ForwardRefExoticComponent<InputGroupProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Group;
+export { InputGroupProps };

package/lib/Input/group.js

@@ -0,0 +1,61 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classNames_1 = __importDefault(require("../_util/classNames"));
+var ConfigProvider_1 = require("../ConfigProvider");
+var Group = react_1.default.forwardRef(function (props, ref) {
+    var _a;
+    var getPrefixCls = (0, react_1.useContext)(ConfigProvider_1.ConfigContext).getPrefixCls;
+    var className = props.className, style = props.style, children = props.children, compact = props.compact, rest = __rest(props, ["className", "style", "children", "compact"]);
+    var prefixCls = getPrefixCls('input-group');
+    var classNames = (0, classNames_1.default)(prefixCls, (_a = {},
+        _a[prefixCls + "-compact"] = compact,
+        _a), className);
+    return (react_1.default.createElement("div", __assign({ ref: ref, className: classNames, style: style }, rest), children));
+});
+Group.displayName = 'InputGroup';
+exports.default = Group;

package/lib/Input/index.d.ts

@@ -0,0 +1,7 @@
+import Input from './input';
+import { InputProps, TextAreaProps, RefInputType } from './interface';
+import { InputPasswordProps } from './password';
+import { InputSearchProps } from './search';
+import { RefTextAreaType } from './textarea';
+export { InputProps, TextAreaProps, InputPasswordProps, InputSearchProps, RefInputType, RefTextAreaType, };
+export default Input;

package/lib/Input/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var input_1 = __importDefault(require("./input"));
+exports.default = input_1.default;

package/lib/Input/input-element.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputComponentProps, RefInputType } from './interface';
+declare const InputComponent: React.ForwardRefExoticComponent<InputComponentProps & React.RefAttributes<RefInputType>>;
+export default InputComponent;

package/lib/Input/input-element.js

@@ -0,0 +1,251 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classNames_1 = __importDefault(require("../_util/classNames"));
+var omit_1 = __importDefault(require("../_util/omit"));
+var resizeObserver_1 = __importDefault(require("../_util/resizeObserver"));
+var IconClose_1 = __importDefault(require("../../icon/react-icon-cjs/IconClose"));
+var icon_hover_1 = __importDefault(require("../_class/icon-hover"));
+var is_1 = require("../_util/is");
+var useComposition_1 = __importDefault(require("./useComposition"));
+var useKeyboardEvent_1 = __importDefault(require("../_util/hooks/useKeyboardEvent"));
+var fillNBSP_1 = __importDefault(require("../_util/fillNBSP"));
+// 设置 input 元素缓冲宽度，避免 autoWidth.minWidth < padding + border 时，content 区域宽度为0，光标会看不到
+// 后续可考虑是否作为 autoWidth 的一个配置项暴露
+var inputContentWidth = 2;
+// 从 input 标签获取影响到宽度计算的"文本样式属性"和“布局”属性 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text
+// 为什么不是直接把 input 标签的类名设置给 mirror 元素？避免用户对 input 类名自定义样式会影响到 mirror
+// 仅在 mounted 的时候执行一次
+var getStyleFromInput = function (input) {
+    if (!input) {
+        return {};
+    }
+    var computeStyle = window.getComputedStyle(input);
+    var cssKeys = [
+        'font',
+        'letterSpacing',
+        'overflow',
+        'tabSize',
+        'textIndent',
+        'textTransform',
+        'whiteSpace',
+        'wordBreak',
+        'wordSpacing',
+        'paddingLeft',
+        'paddingRight',
+        'borderLeft',
+        'borderRight',
+        'boxSizing',
+    ];
+    return cssKeys.reduce(function (t, n) {
+        t[n] = computeStyle[n];
+        return t;
+    }, {});
+};
+var InputComponent = react_1.default.forwardRef(function (props, ref) {
+    var _a;
+    var allowClear = props.allowClear, disabled = props.disabled, placeholder = props.placeholder, className = props.className, style = props.style, height = props.height, prefixCls = props.prefixCls, hasParent = props.hasParent, size = props.size, value = props.value, autoFitWidth = props.autoFitWidth, onClear = props.onClear, readOnly = props.readOnly, onChange = props.onChange, onKeyDown = props.onKeyDown, onPressEnter = props.onPressEnter, propMaxLength = props.maxLength, clearIcon = props.clearIcon, rest = __rest(props, ["allowClear", "disabled", "placeholder", "className", "style", "height", "prefixCls", "hasParent", "size", "value", "autoFitWidth", "onClear", "readOnly", "onChange", "onKeyDown", "onPressEnter", "maxLength", "clearIcon"]);
+    var otherProps = (0, omit_1.default)(rest, [
+        'error',
+        'status',
+        'showWordLimit',
+        'className',
+        'defaultValue',
+        'addBefore',
+        'addAfter',
+        'afterStyle',
+        'beforeStyle',
+        'prefix',
+        'suffix',
+        'normalize',
+        'normalizeTrigger',
+        'autoWidth',
+    ]);
+    var _b = __read((0, react_1.useState)(), 2), inputComputeStyle = _b[0], setInputComputeStyle = _b[1];
+    var getKeyboardEvents = (0, useKeyboardEvent_1.default)();
+    var refInput = (0, react_1.useRef)();
+    var refInputMirror = (0, react_1.useRef)();
+    var refPrevInputWidth = (0, react_1.useRef)(null);
+    var maxLength = (0, is_1.isObject)(propMaxLength)
+        ? propMaxLength.errorOnly
+            ? undefined
+            : propMaxLength.length
+        : propMaxLength;
+    var normalizeHandler = function (type) {
+        var handler;
+        var normalizeTrigger = props.normalizeTrigger || ['onBlur'];
+        if (Array.isArray(normalizeTrigger) &&
+            normalizeTrigger.indexOf(type) > -1 &&
+            (0, is_1.isFunction)(props.normalize)) {
+            handler = props.normalize;
+        }
+        return handler;
+    };
+    var _c = (0, useComposition_1.default)({
+        value: value,
+        maxLength: maxLength,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        onPressEnter: onPressEnter,
+        normalizeHandler: normalizeHandler,
+    }), compositionValue = _c.compositionValue, valueChangeHandler = _c.valueChangeHandler, compositionHandler = _c.compositionHandler, keyDownHandler = _c.keyDownHandler, triggerValueChangeCallback = _c.triggerValueChangeCallback;
+    var inputClassNames = (0, classNames_1.default)(prefixCls, prefixCls && (_a = {},
+        _a[prefixCls + "-size-" + size] = size,
+        _a[prefixCls + "-" + props.status] = props.status,
+        _a[prefixCls + "-disabled"] = disabled,
+        _a[prefixCls + "-autowidth"] = autoFitWidth,
+        _a), hasParent ? undefined : className);
+    var inputProps = __assign(__assign({ 'aria-invalid': props.status === 'error' || undefined }, otherProps), { readOnly: readOnly, maxLength: maxLength, disabled: disabled, placeholder: placeholder, value: compositionValue || value || '', className: inputClassNames, onKeyDown: keyDownHandler, onChange: valueChangeHandler, onCompositionStart: function (e) {
+            var _a;
+            (_a = rest.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+            compositionHandler(e);
+        }, onCompositionUpdate: function (e) {
+            var _a;
+            (_a = rest.onCompositionUpdate) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+            compositionHandler(e);
+        }, onCompositionEnd: function (e) {
+            var _a;
+            (_a = rest.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+            compositionHandler(e);
+        }, onBlur: function (e) {
+            var _a;
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            var normalize = normalizeHandler('onBlur');
+            normalize && triggerValueChangeCallback(normalize(e.target.value), e);
+        } });
+    (0, react_1.useImperativeHandle)(ref, function () {
+        return {
+            dom: refInput.current,
+            getRootDOMNode: function () { return refInput.current; },
+            focus: function () {
+                refInput.current && refInput.current.focus && refInput.current.focus();
+            },
+            blur: function () {
+                refInput.current && refInput.current.blur && refInput.current.blur();
+            },
+        };
+    }, []);
+    var updateInputWidth = function () {
+        if (refInputMirror.current && refInput.current) {
+            var width = refInputMirror.current.offsetWidth;
+            refInput.current.style.width = width + inputContentWidth + "px";
+        }
+    };
+    // Set the initial width of <input>, and subsequent updates are triggered by ResizeObserver
+    (0, react_1.useEffect)(function () {
+        if (autoFitWidth) {
+            if (!(0, is_1.isObject)(autoFitWidth) || !autoFitWidth.pure) {
+                setInputComputeStyle(getStyleFromInput(refInput === null || refInput === void 0 ? void 0 : refInput.current));
+            }
+            updateInputWidth();
+        }
+    }, [autoFitWidth]);
+    // Here also need placeholder to trigger updateInputWidth after user-input is cleared
+    var mirrorValue = inputProps.value || placeholder;
+    var handleClear = function (e) {
+        if (refInput.current && refInput.current.focus) {
+            refInput.current.focus();
+        }
+        triggerValueChangeCallback('', e);
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        allowClear ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("input", __assign({ ref: refInput }, inputProps)),
+            !readOnly && !disabled && allowClear && value ? (clearIcon !== undefined ? (react_1.default.createElement("span", __assign({ tabIndex: 0, className: prefixCls + "-clear-icon" }, getKeyboardEvents({ onPressEnter: handleClear }), { onClick: function (e) {
+                    e.stopPropagation();
+                    handleClear(e);
+                }, onMouseDown: function (e) {
+                    e.preventDefault();
+                } }), clearIcon)) : (react_1.default.createElement(icon_hover_1.default, __assign({ tabIndex: 0, className: prefixCls + "-clear-icon" }, getKeyboardEvents({ onPressEnter: handleClear }), { onClick: function (e) {
+                    e.stopPropagation();
+                    handleClear(e);
+                } }),
+                react_1.default.createElement(IconClose_1.default
+                // keep focus status
+                , { 
+                    // keep focus status
+                    onMouseDown: function (e) {
+                        e.preventDefault();
+                    } })))) : null)) : (react_1.default.createElement("input", __assign({ ref: refInput }, inputProps, { style: hasParent
+                ? {}
+                : __assign(__assign({ minWidth: (0, is_1.isObject)(autoFitWidth) ? autoFitWidth.minWidth : undefined, maxWidth: (0, is_1.isObject)(autoFitWidth) ? autoFitWidth.maxWidth : undefined }, style), ('height' in props ? { height: height } : {})) }))),
+        autoFitWidth && (react_1.default.createElement(resizeObserver_1.default, { getTargetDOMNode: function () { return refInputMirror.current; }, onResize: function () {
+                var inputWidth = refInputMirror.current.offsetWidth;
+                if (typeof autoFitWidth === 'object') {
+                    var delay = typeof autoFitWidth.delay === 'function'
+                        ? autoFitWidth.delay(inputWidth, refPrevInputWidth.current)
+                        : autoFitWidth.delay;
+                    delay ? setTimeout(updateInputWidth, delay) : updateInputWidth();
+                }
+                else {
+                    updateInputWidth();
+                }
+                refPrevInputWidth.current = inputWidth;
+            } },
+            react_1.default.createElement("span", { className: (0, classNames_1.default)(prefixCls + "-mirror"), style: hasParent
+                    ? inputComputeStyle
+                    : __assign(__assign(__assign({}, inputComputeStyle), style), ('height' in props ? { height: height } : {})), ref: refInputMirror }, (0, fillNBSP_1.default)(mirrorValue))))));
+});
+InputComponent.displayName = 'InputComponent';
+exports.default = InputComponent;