rsuite 5.0.1 → 5.2.0

package/cjs/Ripple/Ripple.js

@@ -15,15 +15,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Transition = _interopRequireDefault(require("../Animation/Transition"));
+var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
+
+var _on = _interopRequireDefault(require("dom-lib/on"));
 
-var _DOMHelper = _interopRequireDefault(require("../DOMHelper"));
+var _Transition = _interopRequireDefault(require("../Animation/Transition"));
 
 var _utils = require("../utils");
 
 var getPosition = function getPosition(target, event) {
-  var offset = _DOMHelper.default.getOffset(target);
-
+  var offset = (0, _getOffset.default)(target);
   var offsetX = (event.pageX || 0) - offset.left;
   var offsetY = (event.pageY || 0) - offset.top;
   var radiusX = Math.max(offset.width - offsetX, offsetX);
@@ -74,9 +75,7 @@ var Ripple = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [onMouseDown]);
   (0, _react.useEffect)(function () {
     var parentNode = triggerRef.current.parentNode;
-
-    var mousedownListener = _DOMHelper.default.on(parentNode, 'mousedown', handleMouseDown);
-
+    var mousedownListener = (0, _on.default)(parentNode, 'mousedown', handleMouseDown);
     return function () {
       mousedownListener === null || mousedownListener === void 0 ? void 0 : mousedownListener.off();
     };

package/cjs/SelectPicker/SelectPicker.js

@@ -301,7 +301,8 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     classPrefix: classPrefix,
     appearance: appearance,
     hasValue: hasValue,
-    name: 'select'
+    name: 'select',
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];

package/cjs/Sidenav/SidenavDropdownItem.d.ts

@@ -23,7 +23,7 @@ export interface SidenavDropdownItemProps<T = any> extends WithAsProps, Omit<Rea
     /** Whether the submenu is expanded, used in Sidenav. */
     expanded?: boolean;
     /** Select the callback function for the current option  */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent<HTMLElement>) => void;
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
 }
 /**
  * Tree View Node

package/cjs/Sidenav/SidenavDropdownMenu.d.ts

@@ -15,7 +15,7 @@ export interface SidenavDropdownMenuProps<T = any> extends WithAsProps, Omit<Rea
     /** Whether the submenu is expanded, used in Sidenav. */
     expanded?: boolean;
     /** Select the callback function for the current option  */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent<HTMLElement>) => void;
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
     title?: React.ReactNode;
 }
 /**

package/cjs/Slider/Graduated.js

@@ -77,7 +77,7 @@ var Graduated = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(Component, {
     ref: ref,
     className: classes
-  }, /*#__PURE__*/_react.default.createElement("ul", null, graduatedItems));
+  }, /*#__PURE__*/_react.default.createElement("ol", null, graduatedItems));
 });
 
 Graduated.displayName = 'Graduated';

package/cjs/Slider/Handle.js

@@ -15,7 +15,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _domLib = require("dom-lib");
+var _DOMMouseMoveTracker = _interopRequireDefault(require("dom-lib/DOMMouseMoveTracker"));
+
+var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
+
+var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
 
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 
@@ -56,7 +60,7 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var rootRef = (0, _react.useRef)();
   var horizontalKey = rtl ? 'right' : 'left';
-  var direction = vertical ? 'top' : horizontalKey;
+  var direction = vertical ? 'bottom' : horizontalKey;
   var styles = (0, _extends3.default)({}, style, (_extends2 = {}, _extends2[direction] = position + "%", _extends2));
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
@@ -78,8 +82,8 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var tooltipElement = tooltipRef.current;
 
     if (tooltip && tooltipElement) {
-      var width = (0, _domLib.getWidth)(tooltipElement);
-      (0, _domLib.addStyle)(tooltipElement, 'left', "-" + width / 2 + "px");
+      var width = (0, _getWidth.default)(tooltipElement);
+      (0, _addStyle.default)(tooltipElement, 'left', "-" + width / 2 + "px");
     }
   }, [tooltip]);
   var handleDragMove = (0, _react.useCallback)(function (_deltaX, _deltaY, event) {
@@ -96,7 +100,7 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, rootRef.current.dataset);
   }, [onDragEnd, releaseMouseMoves]);
   var getMouseMoveTracker = (0, _react.useCallback)(function () {
-    return mouseMoveTracker.current || new _domLib.DOMMouseMoveTracker(handleDragMove, handleDragEnd, document.body);
+    return mouseMoveTracker.current || new _DOMMouseMoveTracker.default(handleDragMove, handleDragEnd, document.body);
   }, [handleDragEnd, handleDragMove]);
   var handleMouseDown = (0, _react.useCallback)(function (event) {
     var _mouseMoveTracker$cur3, _rootRef$current;
@@ -135,6 +139,7 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ref: tooltipRef,
     className: merge(prefix('tooltip'), 'placement-top')
   }, renderTooltip ? renderTooltip(value) : value), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends3.default)({
+    tabIndex: -1,
     value: value
   }, rest)), children);
 });

package/cjs/Slider/ProgressBar.js

@@ -35,7 +35,7 @@ var ProgressBar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var sizeKey = vertical ? 'height' : 'width';
   var dirKey = rtl ? 'right' : 'left';
-  var startKey = vertical ? 'top' : dirKey;
+  var startKey = vertical ? 'bottom' : dirKey;
   var styles = (0, _extends3.default)({}, style, (_extends2 = {}, _extends2[startKey] = start + "%", _extends2[sizeKey] = end - start + "%", _extends2));
   var classes = merge(className, withClassPrefix());
   return /*#__PURE__*/_react.default.createElement(Component, {

package/cjs/Slider/Slider.js

@@ -15,7 +15,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _domLib = require("dom-lib");
+var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
+
+var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
+
+var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
 
 var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
 
@@ -129,11 +133,11 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [max, min, step]); // Get the height of the progress bar
 
   var getBarHeight = (0, _react.useCallback)(function () {
-    return barRef.current ? (0, _domLib.getHeight)(barRef.current) : 0;
+    return barRef.current ? (0, _getHeight.default)(barRef.current) : 0;
   }, []); // Get the width of the progress bar
 
   var getBarWidth = (0, _react.useCallback)(function () {
-    return barRef.current ? (0, _domLib.getWidth)(barRef.current) : 0;
+    return barRef.current ? (0, _getWidth.default)(barRef.current) : 0;
   }, []);
   var getValueByOffset = (0, _react.useCallback)(function (offset) {
     var value = 0;
@@ -157,8 +161,8 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    */
 
   var getValueByPosition = (0, _react.useCallback)(function (event) {
-    var barOffset = (0, _domLib.getOffset)(barRef.current);
-    var offset = vertical ? event.pageY - barOffset.top : event.pageX - barOffset.left;
+    var barOffset = (0, _getOffset.default)(barRef.current);
+    var offset = vertical ? barOffset.top + barOffset.height - event.pageY : event.pageX - barOffset.left;
     var offsetValue = rtl && !vertical ? barOffset.width - offset : offset;
     return getValueByOffset(offsetValue) + min;
   }, [getValueByOffset, min, rtl, vertical]);

package/cjs/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TableProps, ColumnProps, ColumnGroupProps } from 'rsuite-table';
-import { StandardProps } from '../@types/common';
+import { Column, Cell, HeaderCell, ColumnGroup, TableProps } from 'rsuite-table';
+import { StandardProps, RsRefForwardingComponent } from '../@types/common';
 export interface TableInstance extends React.Component<TableProps> {
     scrollTop: (top: number) => void;
     scrollLeft: (left: number) => void;
@@ -13,13 +13,13 @@ export interface CellProps extends StandardProps {
     /** Row Data */
     rowData?: any;
 }
-interface TableComponent extends React.ForwardRefExoticComponent<TableProps & {
+interface TableComponent extends RsRefForwardingComponent<'div', TableProps & {
     ref?: React.Ref<TableInstance>;
 }> {
-    Column: React.ComponentType<ColumnProps>;
-    ColumnGroup: React.ComponentType<ColumnGroupProps>;
-    Cell: React.ComponentType<CellProps>;
-    HeaderCell: React.ComponentType<StandardProps>;
+    Column: typeof Column;
+    Cell: typeof Cell;
+    HeaderCell: typeof HeaderCell;
+    ColumnGroup: typeof ColumnGroup;
 }
 declare const Table: TableComponent;
 export default Table;

package/cjs/TagPicker/index.d.ts

@@ -7,7 +7,7 @@ export interface TagPickerProps extends InputPickerProps {
     /**
      * Set the trigger for creating tags. only valid when creatable
      */
-    trigger: TriggerType | TriggerType[];
+    trigger?: TriggerType | TriggerType[];
 }
 declare const TagPicker: PickerComponent<TagPickerProps>;
 export default TagPicker;

package/cjs/Toggle/Toggle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithAsProps, TypeAttributes } from '../@types/common';
+import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types/common';
 import { ToggleLocale } from '../locales';
 export interface ToggleProps extends WithAsProps {
     /** Wheather to disabled toggle */
@@ -8,6 +8,8 @@ export interface ToggleProps extends WithAsProps {
     plaintext?: boolean;
     /** Make the control readonly */
     readOnly?: boolean;
+    /** Whether the checked state is being updated */
+    loading?: boolean;
     /** Checked（Controlled) */
     checked?: boolean;
     /** Default checked */
@@ -21,10 +23,7 @@ export interface ToggleProps extends WithAsProps {
     /** Custom locale */
     locale?: ToggleLocale;
     /** Callback function when state changes */
-    onChange?: (checked: boolean, event: React.SyntheticEvent) => void;
+    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-/**
- * fixme: Should contain an input[type=checkbox]
- */
-declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<unknown>>;
+declare const Toggle: RsRefForwardingComponent<'label', ToggleProps>;
 export default Toggle;

package/cjs/Toggle/Toggle.js

@@ -19,26 +19,28 @@ var _utils = require("../utils");
 
 var _Plaintext = _interopRequireDefault(require("../Plaintext"));
 
-/**
- * fixme: Should contain an input[type=checkbox]
- */
+var _Loader = _interopRequireDefault(require("../Loader"));
+
 var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'span' : _props$as,
       disabled = props.disabled,
       readOnly = props.readOnly,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
       plaintext = props.plaintext,
       className = props.className,
       checkedChildren = props.checkedChildren,
       unCheckedChildren = props.unCheckedChildren,
       _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'btn-toggle' : _props$classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'toggle' : _props$classPrefix,
       checkedProp = props.checked,
       defaultChecked = props.defaultChecked,
       size = props.size,
       localeProp = props.locale,
       onChange = props.onChange,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "readOnly", "plaintext", "className", "checkedChildren", "unCheckedChildren", "classPrefix", "checked", "defaultChecked", "size", "locale", "onChange"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "readOnly", "loading", "plaintext", "className", "checkedChildren", "unCheckedChildren", "classPrefix", "checked", "defaultChecked", "size", "locale", "onChange"]);
+  var inputRef = (0, _react.useRef)();
 
   var _useControlled = (0, _utils.useControlled)(checkedProp, defaultChecked),
       checked = _useControlled[0],
@@ -54,48 +56,69 @@ var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var classes = merge(className, withClassPrefix(size, {
     checked: checked,
-    disabled: disabled
+    disabled: disabled,
+    loading: loading
   }));
   var inner = checked ? checkedChildren : unCheckedChildren;
   var label = checked ? locale.on : locale.off;
-  var handleChange = (0, _react.useCallback)(function (event) {
+  var handleInputChange = (0, _react.useCallback)(function (e) {
     if (disabled || readOnly) {
       return;
     }
 
-    setChecked(!checked);
-    onChange === null || onChange === void 0 ? void 0 : onChange(!checked, event);
-  }, [checked, disabled, onChange, readOnly, setChecked]);
+    var checked = e.target.checked;
+    setChecked(checked);
+    onChange === null || onChange === void 0 ? void 0 : onChange(checked, e);
+  }, [disabled, readOnly, setChecked, onChange]);
 
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, null, inner || label);
   }
 
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement("label", (0, _extends2.default)({
+    ref: ref,
+    className: classes
+  }, rest), /*#__PURE__*/_react.default.createElement("input", {
+    ref: inputRef,
+    type: "checkbox",
+    checked: checked,
+    disabled: disabled,
+    readOnly: readOnly,
+    onChange: handleInputChange,
+    className: prefix('input'),
     role: "switch",
     "aria-checked": checked,
     "aria-disabled": disabled,
     "aria-label": typeof inner === 'string' ? inner : label,
-    tabIndex: -1
-  }, rest, {
-    ref: ref,
-    className: classes,
-    onClick: handleChange
-  }), /*#__PURE__*/_react.default.createElement("span", {
+    "aria-busy": loading || undefined
+  }), /*#__PURE__*/_react.default.createElement(Component, {
+    className: prefix('presentation')
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('inner')
-  }, inner));
+  }, inner), loading && /*#__PURE__*/_react.default.createElement(_Loader.default, {
+    className: prefix('loader')
+  })));
 });
 
 Toggle.displayName = 'Toggle';
 Toggle.propTypes = {
   disabled: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
+  plaintext: _propTypes.default.bool,
   checked: _propTypes.default.bool,
   defaultChecked: _propTypes.default.bool,
   checkedChildren: _propTypes.default.node,
   unCheckedChildren: _propTypes.default.node,
+  loading: _propTypes.default.bool,
   classPrefix: _propTypes.default.string,
   className: _propTypes.default.string,
-  onChange: _propTypes.default.func
+  onChange: _propTypes.default.func,
+  as: _propTypes.default.elementType,
+  size: _propTypes.default.oneOf(['sm', 'md', 'lg']),
+  locale: _propTypes.default.shape({
+    on: _propTypes.default.string,
+    off: _propTypes.default.string
+  })
 };
 var _default = Toggle;
 exports.default = _default;

package/cjs/Tree/Tree.d.ts

@@ -23,7 +23,7 @@ export interface TreeDragProps<ItemDataType = Record<string, any>> {
     /** Whether the node can  be dragged */
     draggable?: boolean;
     /** Called when scrolling */
-    onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onScroll?: (event: React.SyntheticEvent) => void;
     /** Called when node drag start */
     onDragStart?: (nodeData: ItemDataType, e: React.DragEvent) => void;
     /** Called when node drag enter */
@@ -61,7 +61,7 @@ export interface TreeBaseProps<ValueType = string | number, ItemDataType = Recor
     /** Callback function for data change */
     onExpand?: (expandItemValues: ItemDataType[], activeNode: ItemDataType, concat: (data: ItemDataType[], children: React.ReactNode) => ItemDataType[]) => void;
     /** Callback function after selecting tree node */
-    onSelect?: (activeNode: ItemDataType, value: ValueType, event: React.SyntheticEvent<any>) => void;
+    onSelect?: (activeNode: ItemDataType, value: ValueType, event: React.SyntheticEvent) => void;
     /** Custom Render tree Node */
     renderTreeNode?: (nodeData: ItemDataType) => React.ReactNode;
     /** Custom Render icon */
@@ -69,7 +69,7 @@ export interface TreeBaseProps<ValueType = string | number, ItemDataType = Recor
     /** callback fired when search */
     onSearch?: (searchKeyword: string, event: React.KeyboardEvent<HTMLInputElement>) => void;
     /** Called when clean */
-    onClean?: (event: React.SyntheticEvent<any>) => void;
+    onClean?: (event: React.SyntheticEvent) => void;
     /** Custom search rules. */
     searchBy?: (keyword: string, label: React.ReactNode, item: any) => boolean;
     /** Customizing the Rendering Menu list */

package/cjs/TreePicker/TreeNode.d.ts

@@ -22,7 +22,7 @@ export interface TreeNodeProps extends WithAsProps {
     classPrefix?: string;
     style?: React.CSSProperties;
     onExpand?: (nodeData: any) => void;
-    onSelect?: (nodeData: any, event: React.SyntheticEvent<any>) => void;
+    onSelect?: (nodeData: any, event: React.SyntheticEvent) => void;
     onRenderTreeIcon?: (nodeData: any) => React.ReactNode;
     onRenderTreeNode?: (nodeData: any) => React.ReactNode;
     onDragStart?: (data: any, event: React.DragEvent<any>) => void;

package/cjs/TreePicker/TreeNode.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _domLib = require("dom-lib");
+var _hasClass = _interopRequireDefault(require("dom-lib/hasClass"));
 
 var _ArrowDown = _interopRequireDefault(require("@rsuite/icons/legacy/ArrowDown"));
 
@@ -94,7 +94,7 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
 
     if (event.target instanceof HTMLElement) {
-      if ((0, _domLib.hasClass)(event.target.parentNode, prefix('expand-icon-wrapper'))) {
+      if ((0, _hasClass.default)(event.target.parentNode, prefix('expand-icon-wrapper'))) {
         return;
       }
     }

package/cjs/TreePicker/TreePicker.d.ts

@@ -22,7 +22,7 @@ export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, I
     /** Custom render selected items */
     renderValue?: (value: T, selectedItems: ItemDataType, selectedElement: React.ReactNode) => React.ReactNode;
     /** Called when scrolling */
-    onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onScroll?: (event: React.SyntheticEvent) => void;
 }
 declare const TreePicker: PickerComponent<TreePickerProps>;
 export default TreePicker;

package/cjs/TreePicker/TreePicker.js

@@ -729,7 +729,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     classPrefix: classPrefix,
     appearance: appearance,
     hasValue: hasValidValue,
-    name: 'tree'
+    name: 'tree',
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];

package/cjs/Uploader/UploadFileItem.d.ts

@@ -13,6 +13,7 @@ export interface UploadFileItemProps extends WithAsProps {
     allowReupload?: boolean;
     locale?: UploaderLocale;
     renderFileInfo?: (file: FileType, fileElement: React.ReactNode) => React.ReactNode;
+    renderThumbnail?: (file: FileType, thumbnail: React.ReactNode) => React.ReactNode;
     onCancel?: (fileKey: number | string, event: React.MouseEvent) => void;
     onPreview?: (file: FileType, event: React.MouseEvent) => void;
     onReupload?: (file: FileType, event: React.MouseEvent) => void;

package/cjs/Uploader/UploadFileItem.js

@@ -71,10 +71,11 @@ var UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       maxPreviewFileSize = _props$maxPreviewFile === void 0 ? 1024 * 1024 * 5 : _props$maxPreviewFile,
       locale = props.locale,
       renderFileInfo = props.renderFileInfo,
+      renderThumbnail = props.renderThumbnail,
       onPreview = props.onPreview,
       onCancel = props.onCancel,
       onReupload = props.onReupload,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "allowReupload", "file", "classPrefix", "listType", "className", "removable", "maxPreviewFileSize", "locale", "renderFileInfo", "onPreview", "onCancel", "onReupload"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "allowReupload", "file", "classPrefix", "listType", "className", "removable", "maxPreviewFileSize", "locale", "renderFileInfo", "renderThumbnail", "onPreview", "onCancel", "onReupload"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -99,7 +100,8 @@ var UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
 
     if (!~['picture-text', 'picture'].indexOf(listType)) {
       return;
-    }
+    } // The thumbnail file size cannot be larger than the preset value.
+
 
     if (!file.blobFile || (file === null || file === void 0 ? void 0 : (_file$blobFile = file.blobFile) === null || _file$blobFile === void 0 ? void 0 : _file$blobFile.size) > maxPreviewFileSize) {
       return;
@@ -161,18 +163,17 @@ var UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   };
 
   var renderPreview = function renderPreview() {
-    if (previewImage) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: prefix('preview')
-      }, /*#__PURE__*/_react.default.createElement("img", {
-        role: "presentation",
-        src: previewImage,
-        alt: file.name,
-        onClick: handlePreview
-      }));
-    }
-
-    return null;
+    var thumbnail = previewImage ? /*#__PURE__*/_react.default.createElement("img", {
+      role: "presentation",
+      src: previewImage,
+      alt: file.name,
+      onClick: handlePreview
+    }) : /*#__PURE__*/_react.default.createElement(_Attachment.default, {
+      className: prefix('icon')
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefix('preview')
+    }, renderThumbnail ? renderThumbnail(file, thumbnail) : thumbnail);
   };
   /**
    * Render the loading state.
@@ -184,11 +185,22 @@ var UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     var classes = prefix('icon-wrapper', {
       'icon-loading': uploading
     });
+
+    if (uploading) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: prefix('icon')
+      }));
+    }
+
+    if (listType === 'picture' || listType === 'picture-text') {
+      return null;
+    }
+
     return /*#__PURE__*/_react.default.createElement("div", {
       className: classes
-    }, uploading ? /*#__PURE__*/_react.default.createElement("i", {
-      className: prefix('icon')
-    }) : /*#__PURE__*/_react.default.createElement(_Attachment.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Attachment.default, {
       className: prefix('icon')
     }));
   };
@@ -293,6 +305,7 @@ UploadFileItem.propTypes = {
   removable: _propTypes.default.bool,
   allowReupload: _propTypes.default.bool,
   renderFileInfo: _propTypes.default.func,
+  renderThumbnail: _propTypes.default.func,
   onCancel: _propTypes.default.func,
   onPreview: _propTypes.default.func,
   onReupload: _propTypes.default.func

package/cjs/Uploader/Uploader.d.ts

@@ -82,17 +82,19 @@ export interface UploaderProps extends WithAsProps {
     /** In the file list, for uploading failed files, click the callback function to upload */
     onReupload?: (file: FileType) => void;
     /** In the file list, click the callback function for the uploaded file */
-    onPreview?: (file: FileType, event: React.SyntheticEvent<any>) => void;
+    onPreview?: (file: FileType, event: React.SyntheticEvent) => void;
     /** Upload callback function with erro */
-    onError?: (status: any, file: FileType, event: React.SyntheticEvent<any>, xhr: XMLHttpRequest) => void;
+    onError?: (status: any, file: FileType, event: React.SyntheticEvent, xhr: XMLHttpRequest) => void;
     /** callback function after successful upload */
-    onSuccess?: (response: any, file: FileType, event: React.SyntheticEvent<any>, xhr: XMLHttpRequest) => void;
+    onSuccess?: (response: any, file: FileType, event: React.SyntheticEvent, xhr: XMLHttpRequest) => void;
     /** Callback functions that upload progress change */
-    onProgress?: (percent: number, file: FileType, event: React.SyntheticEvent<any>, xhr: XMLHttpRequest) => void;
+    onProgress?: (percent: number, file: FileType, event: React.SyntheticEvent, xhr: XMLHttpRequest) => void;
     /** In the file list, click the callback function to delete a file */
     onRemove?: (file: FileType) => void;
     /** Custom render file information */
     renderFileInfo?: (file: FileType, fileElement: React.ReactNode) => React.ReactNode;
+    /** Custom render thumbnail */
+    renderThumbnail?: (file: FileType, thumbnail: React.ReactNode) => React.ReactNode;
 }
 export declare type FileStatusType = 'inited' | 'uploading' | 'error' | 'finished';
 export interface FileProgressType {

package/cjs/Uploader/Uploader.js

@@ -153,13 +153,14 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       shouldUpload = props.shouldUpload,
       shouldQueueUpdate = props.shouldQueueUpdate,
       renderFileInfo = props.renderFileInfo,
+      renderThumbnail = props.renderThumbnail,
       onPreview = props.onPreview,
       onChange = props.onChange,
       onSuccess = props.onSuccess,
       onError = props.onError,
       onProgress = props.onProgress,
       onReupload = props.onReupload,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "listType", "defaultFileList", "fileList", "fileListVisible", "locale", "style", "draggable", "name", "multiple", "disabled", "readOnly", "plaintext", "accept", "children", "toggleAs", "removable", "disabledFileItem", "maxPreviewFileSize", "autoUpload", "action", "headers", "withCredentials", "disableMultipart", "timeout", "data", "onRemove", "onUpload", "shouldUpload", "shouldQueueUpdate", "renderFileInfo", "onPreview", "onChange", "onSuccess", "onError", "onProgress", "onReupload"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "listType", "defaultFileList", "fileList", "fileListVisible", "locale", "style", "draggable", "name", "multiple", "disabled", "readOnly", "plaintext", "accept", "children", "toggleAs", "removable", "disabledFileItem", "maxPreviewFileSize", "autoUpload", "action", "headers", "withCredentials", "disableMultipart", "timeout", "data", "onRemove", "onUpload", "shouldUpload", "shouldQueueUpdate", "renderFileInfo", "renderThumbnail", "onPreview", "onChange", "onSuccess", "onError", "onProgress", "onReupload"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -415,6 +416,7 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         onReupload: handleReupload,
         onCancel: handleRemoveFile,
         renderFileInfo: renderFileInfo,
+        renderThumbnail: renderThumbnail,
         removable: removable && !readOnly && !plaintext,
         allowReupload: !readOnly && !plaintext
       });
@@ -473,6 +475,7 @@ Uploader.propTypes = {
   style: _propTypes.default.object,
   toggleAs: _propTypes.default.elementType,
   renderFileInfo: _propTypes.default.func,
+  renderThumbnail: _propTypes.default.func,
   removable: _propTypes.default.bool,
   fileListVisible: _propTypes.default.bool,
   draggable: _propTypes.default.bool,

package/cjs/index.d.ts

@@ -54,6 +54,8 @@ export { default as Form } from './Form';
 export type { FormProps, FormGroupProps, FormErrorMessageProps, FormControlLabelProps, FormHelpTextProps, FormControlProps } from './Form';
 export { default as Input } from './Input';
 export type { InputProps } from './Input';
+export { default as MaskedInput } from './MaskedInput';
+export type { MaskedInputProps } from './MaskedInput';
 export { default as InputNumber } from './InputNumber';
 export type { InputNumberProps } from './InputNumber';
 export { default as InputGroup } from './InputGroup';

package/cjs/index.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DatePicker = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.Avatar = exports.Badge = exports.Placeholder = exports.Divider = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
+exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DatePicker = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.Avatar = exports.Badge = exports.Placeholder = exports.Divider = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
 
 var _Button = _interopRequireDefault(require("./Button"));
 
@@ -117,6 +117,10 @@ var _Input = _interopRequireDefault(require("./Input"));
 
 exports.Input = _Input.default;
 
+var _MaskedInput = _interopRequireDefault(require("./MaskedInput"));
+
+exports.MaskedInput = _MaskedInput.default;
+
 var _InputNumber = _interopRequireDefault(require("./InputNumber"));
 
 exports.InputNumber = _InputNumber.default;