@douyinfe/semi-ui 2.41.3 → 2.42.0

package/lib/cjs/toast/toast.js

@@ -20,6 +20,7 @@ const prefixCls = _constants.cssClasses.PREFIX;
 class Toast extends _baseComponent.default {
   constructor(props) {
     super(props);
+    this.toastEle = /*#__PURE__*/_react.default.createRef();
     this.clearCloseTimer = () => {
       this.foundation.clearCloseTimer_();
     };
@@ -99,11 +100,15 @@ class Toast extends _baseComponent.default {
     textStyle.maxWidth = textMaxWidth;
     const btnTheme = 'borderless';
     const btnSize = 'small';
-    return /*#__PURE__*/_react.default.createElement("div", {
+    const reservedIndex = this.props.positionInList ? this.props.positionInList.length - this.props.positionInList.index - 1 : 0;
+    const toastEle = /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.toastEle,
       role: "alert",
       "aria-label": `${type ? type : 'default'} type`,
       className: toastCls,
-      style: style,
+      style: Object.assign(Object.assign({}, style), {
+        transform: `translate3d(0,0,${reservedIndex * -10}px)`
+      }),
       onMouseEnter: this.clearCloseTimer,
       onMouseLeave: this.startCloseTimer,
       onAnimationStart: this.props.onAnimationStart,
@@ -125,6 +130,17 @@ class Toast extends _baseComponent.default {
       theme: btnTheme,
       size: btnSize
     }))));
+    if (this.props.stack) {
+      const height = this.props.stackExpanded && this.toastEle.current && getComputedStyle(this.toastEle.current).height || 0;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: `${prefixCls}-zero-height-wrapper`,
+        style: {
+          height
+        }
+      }, toastEle);
+    } else {
+      return toastEle;
+    }
   }
 }
 Toast.contextType = _context.default;
@@ -139,6 +155,8 @@ Toast.propTypes = {
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   showClose: _propTypes.default.bool,
+  stack: _propTypes.default.bool,
+  stackExpanded: _propTypes.default.bool,
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   direction: _propTypes.default.oneOf(_constants.strings.directions)
 };
@@ -149,6 +167,8 @@ Toast.defaultProps = {
   duration: _constants.numbers.duration,
   textMaxWidth: 450,
   showClose: true,
+  stack: false,
+  stackExpanded: false,
   theme: 'normal'
 };
 var _default = Toast;

package/lib/cjs/tooltip/index.d.ts

@@ -92,7 +92,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
-        trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom">>;
+        trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom" | "contextMenu">>;
         className: PropTypes.Requireable<string>;
         wrapperClassName: PropTypes.Requireable<string>;
         clickToHide: PropTypes.Requireable<boolean>;

package/lib/cjs/tooltip/index.js

@@ -338,7 +338,8 @@ class Tooltip extends _baseComponent.default {
         click: 'onClick',
         focus: 'onFocus',
         blur: 'onBlur',
-        keydown: 'onKeyDown'
+        keydown: 'onKeyDown',
+        contextMenu: 'onContextMenu'
       }),
       registerTriggerEvent: triggerEventSet => {
         this.setState({

package/lib/cjs/tree/treeNode.js

@@ -217,7 +217,7 @@ class TreeNode extends _react.PureComponent {
       } = this.props;
       if ((0, _isFunction2.default)(renderLabel)) {
         return renderLabel(label, data);
-      } else if ((0, _isString2.default)(label) && filtered && keyword && treeNodeFilterProp === 'label') {
+      } else if ((0, _isString2.default)(label) && filtered && keyword) {
         return (0, _index.getHighLightTextHTML)({
           sourceString: label,
           searchWords: [keyword],
@@ -367,7 +367,6 @@ class TreeNode extends _react.PureComponent {
       [`${prefixcls}-selected`]: selected,
       [`${prefixcls}-active`]: !multiple && active,
       [`${prefixcls}-ellipsis`]: labelEllipsis,
-      [`${prefixcls}-filtered`]: filtered && treeNodeFilterProp !== 'label',
       [`${prefixcls}-drag-over`]: !disabled && dragOver,
       [`${prefixcls}-draggable`]: !disabled && draggable && !renderFullLabel,
       // When draggable + renderFullLabel is enabled, the default style

package/lib/cjs/typography/base.js

@@ -126,9 +126,7 @@ class Base extends _react.Component {
         if (showTooltip.type && showTooltip.type.toLowerCase() === 'popover') {
           return (0, _merge2.default)({
             opts: {
-              style: {
-                width: '240px'
-              },
+              // style: { width: '240px' },
               showArrow: true
             }
           }, showTooltip);

package/lib/cjs/upload/fileCard.d.ts

@@ -1,12 +1,19 @@
-import { PureComponent, ReactNode, MouseEvent, CSSProperties } from 'react';
+import { ReactNode, MouseEvent, CSSProperties } from 'react';
 import PropTypes from 'prop-types';
+import { FileCardAdapter } from '@douyinfe/semi-foundation/lib/cjs/upload/fileCardFoundation';
 import { Locale } from '../locale/interface';
+import BaseComponent from '../_base/baseComponent';
 import { RenderFileItemProps } from './interface';
 export interface FileCardProps extends RenderFileItemProps {
     className?: string;
     style?: CSSProperties;
+    picWidth?: string | number;
+    picHeight?: string | number;
 }
-declare class FileCard extends PureComponent<FileCardProps> {
+export interface FileCardState {
+    fallbackPreview?: boolean;
+}
+declare class FileCard extends BaseComponent<FileCardProps, FileCardState> {
     static propTypes: {
         className: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
@@ -19,6 +26,8 @@ declare class FileCard extends PureComponent<FileCardProps> {
         percent: PropTypes.Requireable<number>;
         preview: PropTypes.Requireable<boolean>;
         previewFile: PropTypes.Requireable<(...args: any[]) => any>;
+        picWidth: PropTypes.Requireable<NonNullable<string | number>>;
+        picHeight: PropTypes.Requireable<NonNullable<string | number>>;
         showReplace: PropTypes.Requireable<boolean>;
         showRetry: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<NonNullable<string | number>>;
@@ -36,6 +45,8 @@ declare class FileCard extends PureComponent<FileCardProps> {
         preview: boolean;
         size: string;
     };
+    constructor(props: FileCardProps);
+    get adapter(): FileCardAdapter<FileCardProps, FileCardState>;
     transSize(size: string | number): string;
     renderValidateMessage(): ReactNode;
     renderPicValidateMsg(): ReactNode;

package/lib/cjs/upload/fileCard.js

@@ -4,21 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/upload/constants");
+var _fileCardFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/upload/fileCardFoundation"));
 var _utils = require("@douyinfe/semi-foundation/lib/cjs/upload/utils");
 var _semiIcons = require("@douyinfe/semi-icons");
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 var _index = _interopRequireDefault(require("../button/index"));
 var _index2 = _interopRequireDefault(require("../progress/index"));
 var _index3 = _interopRequireDefault(require("../tooltip/index"));
 var _index4 = _interopRequireDefault(require("../spin/index"));
 var _reactUtils = require("../_base/reactUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-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; }
 const prefixCls = _constants.cssClasses.PREFIX;
 const ErrorSvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -88,7 +88,21 @@ const DirectorySvg = function () {
     strokeLinejoin: "round"
   }));
 };
-class FileCard extends _react.PureComponent {
+class FileCard extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+    this.state = {
+      fallbackPreview: false
+    };
+    this.foundation = new _fileCardFoundation.default(this.adapter);
+  }
+  get adapter() {
+    return Object.assign(Object.assign({}, super.adapter), {
+      updateFallbackPreview: fallbackPreview => this.setState({
+        fallbackPreview
+      })
+    });
+  }
   transSize(size) {
     if (typeof size === 'number') {
       return (0, _utils.getFileSize)(size);
@@ -149,6 +163,9 @@ class FileCard extends _react.PureComponent {
     }, icon) : null;
   }
   renderPic(locale) {
+    const {
+      fallbackPreview
+    } = this.state;
     const {
       url,
       percent,
@@ -161,7 +178,9 @@ class FileCard extends _react.PureComponent {
       renderPicPreviewIcon,
       renderThumbnail,
       name,
-      index
+      index,
+      picHeight,
+      picWidth
     } = this.props;
     const showProgress = status === _constants.strings.FILE_STATUS_UPLOADING && percent !== 100;
     const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
@@ -169,6 +188,7 @@ class FileCard extends _react.PureComponent {
     const showPreview = status === _constants.strings.FILE_STATUS_SUCCESS && !this.props.showReplace;
     const filePicCardCls = (0, _classnames.default)({
       [`${prefixCls}-picture-file-card`]: true,
+      [`${prefixCls}-picture-file-card-preview-fallback`]: fallbackPreview,
       [`${prefixCls}-picture-file-card-disabled`]: disabled,
       [`${prefixCls}-picture-file-card-show-pointer`]: typeof onPreviewClick !== 'undefined',
       [`${prefixCls}-picture-file-card-error`]: status === _constants.strings.FILE_STATUS_UPLOAD_FAIL,
@@ -210,14 +230,29 @@ class FileCard extends _react.PureComponent {
     const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/_react.default.createElement("div", {
       className: `${prefixCls}-picture-file-card-pic-info`
     }, index + 1);
-    const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : /*#__PURE__*/_react.default.createElement("img", {
+    let imgStyle = {};
+    let itemStyle = style ? Object.assign({}, style) : {};
+    if (picHeight) {
+      itemStyle.height = picHeight;
+      imgStyle.height = picHeight;
+    }
+    if (picWidth) {
+      itemStyle.width = picWidth;
+      imgStyle.width = picWidth;
+    }
+    const defaultThumbTail = !fallbackPreview ? /*#__PURE__*/_react.default.createElement("img", {
       src: url,
-      alt: name
+      alt: name,
+      onError: error => this.foundation.handleImageError(error),
+      style: imgStyle
+    }) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconFile, {
+      size: "large"
     });
+    const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : defaultThumbTail;
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "listitem",
       className: filePicCardCls,
-      style: style,
+      style: itemStyle,
       onClick: onPreviewClick
     }, thumbnail, showProgress ? /*#__PURE__*/_react.default.createElement(_index2.default, {
       percent: percent,
@@ -242,6 +277,9 @@ class FileCard extends _react.PureComponent {
       onPreviewClick,
       renderFileOperation
     } = this.props;
+    const {
+      fallbackPreview
+    } = this.state;
     const fileCardCls = (0, _classnames.default)({
       [`${prefixCls}-file-card`]: true,
       [`${prefixCls}-file-card-fail`]: status === _constants.strings.FILE_STATUS_VALID_FAIL || status === _constants.strings.FILE_STATUS_UPLOAD_FAIL,
@@ -249,7 +287,7 @@ class FileCard extends _react.PureComponent {
     });
     const previewCls = (0, _classnames.default)({
       [`${prefixCls}-file-card-preview`]: true,
-      [`${prefixCls}-file-card-preview-placeholder`]: !preview || previewFile
+      [`${prefixCls}-file-card-preview-placeholder`]: !preview || previewFile || fallbackPreview
     });
     const infoCls = `${prefixCls}-file-card-info`;
     const closeCls = `${prefixCls}-file-card-close`;
@@ -259,9 +297,10 @@ class FileCard extends _react.PureComponent {
     const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && propsShowRetry;
     const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && propsShowReplace;
     const fileSize = this.transSize(size);
-    let previewContent = preview ? /*#__PURE__*/_react.default.createElement("img", {
+    let previewContent = preview && !fallbackPreview ? /*#__PURE__*/_react.default.createElement("img", {
       src: url,
-      alt: name
+      alt: name,
+      onError: error => this.foundation.handleImageError(error)
     }) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconFile, {
       size: "large"
     });
@@ -361,6 +400,8 @@ FileCard.propTypes = {
   percent: _propTypes.default.number,
   preview: _propTypes.default.bool,
   previewFile: _propTypes.default.func,
+  picWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  picHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   showReplace: _propTypes.default.bool,
   showRetry: _propTypes.default.bool,
   size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

package/lib/cjs/upload/index.d.ts

@@ -56,6 +56,8 @@ export interface UploadProps {
     previewFile?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     prompt?: ReactNode;
     promptPosition?: PromptPositionType;
+    picHeight?: string | number;
+    picWidth?: string | number;
     renderFileItem?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderThumbnail?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
@@ -129,6 +131,8 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         previewFile: PropTypes.Requireable<(...args: any[]) => any>;
         prompt: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         promptPosition: PropTypes.Requireable<"left" | "right" | "bottom">;
+        picWidth: PropTypes.Requireable<NonNullable<string | number>>;
+        picHeight: PropTypes.Requireable<NonNullable<string | number>>;
         renderFileItem: PropTypes.Requireable<(...args: any[]) => any>;
         renderPicPreviewIcon: PropTypes.Requireable<(...args: any[]) => any>;
         renderFileOperation: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/upload/index.js

@@ -116,7 +116,9 @@ class Upload extends _baseComponent.default {
         renderFileItem,
         renderThumbnail,
         disabled,
-        onPreviewClick
+        onPreviewClick,
+        picWidth,
+        picHeight
       } = this.props;
       const onRemove = () => this.remove(file);
       const onRetry = () => {
@@ -140,7 +142,9 @@ class Upload extends _baseComponent.default {
         renderFileOperation,
         renderThumbnail,
         onReplace,
-        onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
+        onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined,
+        picWidth,
+        picHeight
       });
       if (status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && !validateMessage) {
         fileCardProps.validateMessage = locale.fail;
@@ -173,7 +177,9 @@ class Upload extends _baseComponent.default {
         disabled,
         children,
         draggable,
-        hotSpotLocation
+        hotSpotLocation,
+        picHeight,
+        picWidth
       } = this.props;
       const {
         fileList: stateFileList,
@@ -197,7 +203,11 @@ class Upload extends _baseComponent.default {
       const addContentProps = {
         role: 'button',
         className: uploadAddCls,
-        onClick: this.onClick
+        onClick: this.onClick,
+        style: {
+          height: picHeight,
+          width: picWidth
+        }
       };
       const containerProps = {
         className: fileListCls
@@ -578,6 +588,8 @@ Upload.propTypes = {
   previewFile: _propTypes.default.func,
   prompt: _propTypes.default.node,
   promptPosition: _propTypes.default.oneOf(_constants.strings.PROMPT_POSITION),
+  picWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  picHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   renderFileItem: _propTypes.default.func,
   renderPicPreviewIcon: _propTypes.default.func,
   renderFileOperation: _propTypes.default.func,

package/lib/es/button/splitButtonGroup.d.ts

@@ -6,10 +6,12 @@ export interface SplitButtonGroupProps extends BaseProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
+    containerRef: React.RefObject<HTMLDivElement>;
     static propTypes: {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
     };
+    componentDidMount(): void;
     render(): JSX.Element;
 }

package/lib/es/button/splitButtonGroup.js

@@ -6,6 +6,19 @@ import '@douyinfe/semi-foundation/lib/es/button/button.css';
 import BaseComponent from '../_base/baseComponent';
 const prefixCls = cssClasses.PREFIX;
 export default class SplitButtonGroup extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    this.containerRef = /*#__PURE__*/React.createRef();
+  }
+  componentDidMount() {
+    if (this.containerRef.current) {
+      const buttons = this.containerRef.current.querySelectorAll('button');
+      const firstButton = buttons[0];
+      const lastButton = buttons[buttons.length - 1];
+      firstButton === null || firstButton === void 0 ? void 0 : firstButton.classList.add(`${prefixCls}-first`);
+      lastButton === null || lastButton === void 0 ? void 0 : lastButton.classList.add(`${prefixCls}-last`);
+    }
+  }
   render() {
     const {
       children,
@@ -14,6 +27,7 @@ export default class SplitButtonGroup extends BaseComponent {
     } = this.props;
     const cls = classNames(`${prefixCls}-split`, className);
     return /*#__PURE__*/React.createElement("div", {
+      ref: this.containerRef,
       className: cls,
       style: style,
       role: "group",

package/lib/es/collapse/item.d.ts

@@ -15,6 +15,7 @@ export interface CollapsePanelProps {
 export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
     static contextType: React.Context<CollapseContextType>;
     headerExpandIconTriggerRef: React.RefObject<HTMLElement>;
+    private ariaID;
     static propTypes: {
         itemKey: PropTypes.Requireable<string>;
         extra: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -28,8 +29,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         showArrow: boolean;
         disabled: boolean;
     };
-    private ariaID;
     context: CollapseContextType;
+    componentDidMount(): void;
     renderHeader(active: boolean, expandIconEnable?: boolean): JSX.Element;
     handleClick: (itemKey: string, e: React.MouseEvent) => void;
     render(): JSX.Element;

package/lib/es/collapse/item.js

@@ -18,7 +18,7 @@ export default class CollapsePanel extends PureComponent {
   constructor() {
     super(...arguments);
     this.headerExpandIconTriggerRef = /*#__PURE__*/React.createRef();
-    this.ariaID = getUuidShort({});
+    this.ariaID = "";
     this.handleClick = (itemKey, e) => {
       var _a;
       // Judge user click Icon or Header
@@ -28,6 +28,9 @@ export default class CollapsePanel extends PureComponent {
       }
     };
   }
+  componentDidMount() {
+    this.ariaID = getUuidShort({});
+  }
   renderHeader(active) {
     let expandIconEnable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const {

package/lib/es/form/baseForm.d.ts

@@ -19,25 +19,27 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onReset: PropTypes.Requireable<(...args: any[]) => any>;
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
-        initValues: PropTypes.Requireable<object>;
-        getFormApi: PropTypes.Requireable<(...args: any[]) => any>;
+        autoScrollToError: PropTypes.Requireable<NonNullable<boolean | object>>;
+        allowEmpty: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
-        render: PropTypes.Requireable<(...args: any[]) => any>;
+        disabled: PropTypes.Requireable<boolean>;
+        extraTextPosition: PropTypes.Requireable<string>;
+        getFormApi: PropTypes.Requireable<(...args: any[]) => any>;
+        initValues: PropTypes.Requireable<object>;
         validateFields: PropTypes.Requireable<(...args: any[]) => any>;
-        style: PropTypes.Requireable<object>;
-        className: PropTypes.Requireable<string>;
         layout: PropTypes.Requireable<string>;
         labelPosition: PropTypes.Requireable<string>;
         labelWidth: PropTypes.Requireable<NonNullable<string | number>>;
         labelAlign: PropTypes.Requireable<string>;
         labelCol: PropTypes.Requireable<object>;
-        wrapperCol: PropTypes.Requireable<object>;
-        allowEmpty: PropTypes.Requireable<boolean>;
-        autoScrollToError: PropTypes.Requireable<NonNullable<boolean | object>>;
-        disabled: PropTypes.Requireable<boolean>;
+        render: PropTypes.Requireable<(...args: any[]) => any>;
+        style: PropTypes.Requireable<object>;
         showValidateIcon: PropTypes.Requireable<boolean>;
-        extraTextPosition: PropTypes.Requireable<string>;
+        stopValidateWithError: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;
+        wrapperCol: PropTypes.Requireable<object>;
+        trigger: PropTypes.Requireable<NonNullable<string | string[]>>;
     };
     static defaultProps: {
         onChange: (...args: any[]) => void;

package/lib/es/form/baseForm.js

@@ -164,10 +164,12 @@ class Form extends BaseComponent {
         allowEmpty,
         autoScrollToError,
         showValidateIcon,
+        stopValidateWithError,
         extraTextPosition,
-        id
+        id,
+        trigger
       } = _a,
-      rest = __rest(_a, ["children", "getFormApi", "onChange", "onSubmit", "onSubmitFail", "onValueChange", "component", "render", "validateFields", "initValues", "layout", "style", "className", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "allowEmpty", "autoScrollToError", "showValidateIcon", "extraTextPosition", "id"]);
+      rest = __rest(_a, ["children", "getFormApi", "onChange", "onSubmit", "onSubmitFail", "onValueChange", "component", "render", "validateFields", "initValues", "layout", "style", "className", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "allowEmpty", "autoScrollToError", "showValidateIcon", "stopValidateWithError", "extraTextPosition", "id", "trigger"]);
     const formCls = classNames(prefix, className, {
       [prefix + '-vertical']: layout === 'vertical',
       [prefix + '-horizontal']: layout === 'horizontal'
@@ -200,25 +202,27 @@ Form.propTypes = {
   onReset: PropTypes.func,
   // Triggered when the value of the form is updated, only when the value of the subfield changes. The entry parameter is formState.values
   onValueChange: PropTypes.func,
-  initValues: PropTypes.object,
-  getFormApi: PropTypes.func,
+  autoScrollToError: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  allowEmpty: PropTypes.bool,
+  className: PropTypes.string,
   component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  render: PropTypes.func,
+  disabled: PropTypes.bool,
+  extraTextPosition: PropTypes.oneOf(strings.EXTRA_POS),
+  getFormApi: PropTypes.func,
+  initValues: PropTypes.object,
   validateFields: PropTypes.func,
-  style: PropTypes.object,
-  className: PropTypes.string,
   layout: PropTypes.oneOf(strings.LAYOUT),
   labelPosition: PropTypes.oneOf(strings.LABEL_POS),
   labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   labelAlign: PropTypes.oneOf(strings.LABEL_ALIGN),
   labelCol: PropTypes.object,
-  wrapperCol: PropTypes.object,
-  allowEmpty: PropTypes.bool,
-  autoScrollToError: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  disabled: PropTypes.bool,
+  render: PropTypes.func,
+  style: PropTypes.object,
   showValidateIcon: PropTypes.bool,
-  extraTextPosition: PropTypes.oneOf(strings.EXTRA_POS),
-  id: PropTypes.string
+  stopValidateWithError: PropTypes.bool,
+  id: PropTypes.string,
+  wrapperCol: PropTypes.object,
+  trigger: PropTypes.oneOfType([PropTypes.oneOf(['blur', 'change', 'custom', 'mount']), PropTypes.arrayOf(PropTypes.oneOf(['blur', 'change', 'custom', 'mount']))])
 };
 Form.defaultProps = {
   onChange: _noop,

package/lib/es/form/hoc/withField.js

@@ -2,7 +2,7 @@
 import React, { useState, useLayoutEffect, useEffect, useMemo, useRef, forwardRef } from 'react';
 import classNames from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/form/constants';
-import { isValid, generateValidatesFromRules, mergeOptions, mergeProps, getDisplayName } from '@douyinfe/semi-foundation/lib/es/form/utils';
+import { isValid, generateValidatesFromRules, mergeOptions, mergeProps, getDisplayName, transformTrigger, transformDefaultBooleanAPI } from '@douyinfe/semi-foundation/lib/es/form/utils';
 import * as ObjectUtil from '@douyinfe/semi-foundation/lib/es/utils/object';
 import isPromise from '@douyinfe/semi-foundation/lib/es/utils/isPromise';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
@@ -78,6 +78,15 @@ function withField(Component, opts) {
       warning(true, '[Semi Form]: Field Component must be use inside the Form, please check your dom declaration');
       return null;
     }
+    let formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'labelCol', 'wrapperCol', 'disabled', 'showValidateIcon', 'extraTextPosition', 'stopValidateWithError', 'trigger']);
+    let mergeLabelPos = labelPosition || formProps.labelPosition;
+    let mergeLabelWidth = labelWidth || formProps.labelWidth;
+    let mergeLabelAlign = labelAlign || formProps.labelAlign;
+    let mergeLabelCol = labelCol || formProps.labelCol;
+    let mergeWrapperCol = wrapperCol || formProps.wrapperCol;
+    let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom';
+    let mergeStopValidateWithError = transformDefaultBooleanAPI(stopValidateWithError, formProps.stopValidateWithError, false);
+    let mergeTrigger = transformTrigger(trigger, formProps.trigger);
     // To prevent user forgetting to pass the field, use undefined as the key, and updater.getValue will get the wrong value.
     let initValueInFormOpts = typeof field !== 'undefined' ? updater.getValue(field) : undefined; // Get the init value of form from formP rops.init Values Get the initial value set in the initValues of Form
     let initVal = typeof initValue !== 'undefined' ? initValue : initValueInFormOpts;
@@ -91,7 +100,7 @@ function withField(Component, opts) {
     } catch (err) {}
     // FIXME typeof initVal
     const [value, setValue, getVal] = useStateWithGetter(typeof initVal !== undefined ? initVal : null);
-    const validateOnMount = trigger.includes('mount');
+    const validateOnMount = mergeTrigger.includes('mount');
     allowEmpty = allowEmpty || updater.getFormProps().allowEmpty;
     // Error information: Array, String, undefined
     const [error, setError, getError] = useStateWithGetter();
@@ -150,7 +159,7 @@ function withField(Component, opts) {
       };
       const rootPromise = new Promise((resolve, reject) => {
         validator.validate(model, {
-          first: stopValidateWithError
+          first: mergeStopValidateWithError
         }, (errors, fields) => {}).then(res => {
           if (validatePromise.current !== rootPromise) {
             return;
@@ -298,7 +307,7 @@ function withField(Component, opts) {
       });
       updateValue(val);
       // only validate when trigger includes change
-      if (trigger.includes('change')) {
+      if (mergeTrigger.includes('change')) {
         fieldValidate(val);
       }
     };
@@ -309,7 +318,7 @@ function withField(Component, opts) {
       if (!touched) {
         updateTouched(true);
       }
-      if (trigger.includes('blur')) {
+      if (mergeTrigger.includes('blur')) {
         let val = getVal();
         fieldValidate(val);
       }
@@ -369,13 +378,6 @@ function withField(Component, opts) {
       };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [field]);
-    let formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'labelCol', 'wrapperCol', 'disabled', 'showValidateIcon', 'extraTextPosition']);
-    let mergeLabelPos = labelPosition || formProps.labelPosition;
-    let mergeLabelWidth = labelWidth || formProps.labelWidth;
-    let mergeLabelAlign = labelAlign || formProps.labelAlign;
-    let mergeLabelCol = labelCol || formProps.labelCol;
-    let mergeWrapperCol = wrapperCol || formProps.wrapperCol;
-    let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom';
     // id attribute to improve a11y
     const a11yId = id ? id : field;
     const labelId = `${a11yId}-label`;