@douyinfe/semi-foundation 2.41.2 → 2.42.0-beta.0

package/button/splitButtonGroup.scss

@@ -10,19 +10,20 @@ $icon: #{$module}-with-icon;
     .#{$module} {
         border-radius: 0;
         margin-right: 1px;
-    }
 
-    :first-child {
-        border-top-left-radius: var(--semi-border-radius-small);
-        border-bottom-left-radius: var(--semi-border-radius-small);
-    }
+        &-first {
+            border-top-left-radius: var(--semi-border-radius-small);
+            border-bottom-left-radius: var(--semi-border-radius-small);
+        }
 
-    :last-child {
-        border-top-right-radius: var(--semi-border-radius-small);
-        border-bottom-right-radius: var(--semi-border-radius-small);
-        margin-right: unset;
+        &-last {
+            border-top-right-radius: var(--semi-border-radius-small);
+            border-bottom-right-radius: var(--semi-border-radius-small);
+            margin-right: unset;
+        }
     }
 
+
     &:hover {
         // 因为上面那条规则，导致原来的active被覆盖
         .#{$module}-borderless:active {

package/form/constants.ts

@@ -8,7 +8,8 @@ const strings = {
     LAYOUT: ['horizontal', 'vertical'],
     LABEL_POS: ['left', 'top', 'inset'],
     LABEL_ALIGN: ['left', 'right'],
-    EXTRA_POS: ['middle', 'bottom']
+    EXTRA_POS: ['middle', 'bottom'],
+    DEFAULT_TRIGGER: 'change',
 };
 
 const numbers = {};

package/form/utils.ts

@@ -1,6 +1,7 @@
 import AsyncValidator from 'async-validator';
-import { cloneDeep, toPath } from 'lodash';
+import { cloneDeep, toPath, isUndefined } from 'lodash';
 import { FieldValidateTriggerType, BasicTriggerType, ComponentProps, WithFieldOption } from './interface';
+import { strings } from './constants';
 
 /**
  * 
@@ -50,17 +51,43 @@ export function isValid(errors: any): boolean {
     return valid;
 }
 
-// Compatible with String and Array
-function transformTrigger(trigger: FieldValidateTriggerType): Array<BasicTriggerType> {
-    let result: BasicTriggerType[] = [];
-    if (Array.isArray(trigger)) {
-        result = trigger;
+/**
+ * trigger transform rule
+    1. If the user has set fieldProps, follow the user's fieldProps
+    2. If the user does not set fieldProps, follow formProps
+    3. If there is no formProps, follow the change
+    4. If it is an array, follow the array, if it is not an array (pure string), convert it to a string array
+ */
+
+export function transformTrigger(fieldTrigger: FieldValidateTriggerType, formTrigger: FieldValidateTriggerType): Array<BasicTriggerType> {
+    let result: BasicTriggerType[] | FieldValidateTriggerType = [];
+    let finalResult = [];
+    if (!isUndefined(fieldTrigger)) {
+        result = fieldTrigger;
+    } else if (!isUndefined(formTrigger)) {
+        result = formTrigger;
+    } else {
+        result = strings.DEFAULT_TRIGGER as BasicTriggerType;
+    }
+
+    if (Array.isArray(result)) {
+        finalResult = result;
     }
 
-    if (typeof trigger === 'string') {
-        result[0] = trigger;
+    if (typeof result === 'string') {
+        finalResult[0] = result;
+    }
+    return finalResult;
+}
+
+export function transformDefaultBooleanAPI(fieldProp: boolean, formProp: boolean, defaultVal = false) {
+    if (!isUndefined(fieldProp)) {
+        return fieldProp;
+    } else if (!isUndefined(formProp)) {
+        return formProp;
+    } else {
+        return defaultVal;
     }
-    return result;
 }
 
 export function mergeOptions(opts: WithFieldOption, props: ComponentProps) {
@@ -85,7 +112,6 @@ export function mergeOptions(opts: WithFieldOption, props: ComponentProps) {
 
 export function mergeProps(props: any) {
     const defaultProps = {
-        trigger: 'change',
         // validateStatus: 'default',
         allowEmptyString: false,
         allowEmpty: false,
@@ -93,7 +119,6 @@ export function mergeProps(props: any) {
         noLabel: false,
         noErrorMessage: false,
         isInInputGroup: false,
-        stopValidateWithError: false,
     };
     let {
         field,
@@ -151,7 +176,7 @@ export function mergeProps(props: any) {
     }
 
     const required = isRequired(rules);
-    trigger = transformTrigger(trigger);
+
     emptyValue = typeof emptyValue !== 'undefined' ? emptyValue : '';
     return {
         field,

package/lib/cjs/button/button.css

@@ -8,11 +8,11 @@
   border-radius: 0;
   margin-right: 1px;
 }
-.semi-button-split :first-child {
+.semi-button-split .semi-button-first {
   border-top-left-radius: var(--semi-border-radius-small);
   border-bottom-left-radius: var(--semi-border-radius-small);
 }
-.semi-button-split :last-child {
+.semi-button-split .semi-button-last {
   border-top-right-radius: var(--semi-border-radius-small);
   border-bottom-right-radius: var(--semi-border-radius-small);
   margin-right: unset;

package/lib/cjs/button/splitButtonGroup.scss

@@ -10,19 +10,20 @@ $icon: #{$module}-with-icon;
     .#{$module} {
         border-radius: 0;
         margin-right: 1px;
-    }
 
-    :first-child {
-        border-top-left-radius: var(--semi-border-radius-small);
-        border-bottom-left-radius: var(--semi-border-radius-small);
-    }
+        &-first {
+            border-top-left-radius: var(--semi-border-radius-small);
+            border-bottom-left-radius: var(--semi-border-radius-small);
+        }
 
-    :last-child {
-        border-top-right-radius: var(--semi-border-radius-small);
-        border-bottom-right-radius: var(--semi-border-radius-small);
-        margin-right: unset;
+        &-last {
+            border-top-right-radius: var(--semi-border-radius-small);
+            border-bottom-right-radius: var(--semi-border-radius-small);
+            margin-right: unset;
+        }
     }
 
+
     &:hover {
         // 因为上面那条规则，导致原来的active被覆盖
         .#{$module}-borderless:active {

package/lib/cjs/form/constants.d.ts

@@ -6,6 +6,7 @@ declare const strings: {
     LABEL_POS: string[];
     LABEL_ALIGN: string[];
     EXTRA_POS: string[];
+    DEFAULT_TRIGGER: string;
 };
 declare const numbers: {};
 export { cssClasses, strings, numbers };

package/lib/cjs/form/constants.js

@@ -13,7 +13,8 @@ const strings = {
   LAYOUT: ['horizontal', 'vertical'],
   LABEL_POS: ['left', 'top', 'inset'],
   LABEL_ALIGN: ['left', 'right'],
-  EXTRA_POS: ['middle', 'bottom']
+  EXTRA_POS: ['middle', 'bottom'],
+  DEFAULT_TRIGGER: 'change'
 };
 exports.strings = strings;
 const numbers = {};

package/lib/cjs/form/utils.d.ts

@@ -1,5 +1,5 @@
 import AsyncValidator from 'async-validator';
-import { ComponentProps, WithFieldOption } from './interface';
+import { FieldValidateTriggerType, BasicTriggerType, ComponentProps, WithFieldOption } from './interface';
 /**
  *
  * @param WrappedComponent React.ComponentType | any
@@ -8,6 +8,15 @@ export declare function getDisplayName(WrappedComponent: any): string;
 export declare function generateValidatesFromRules(field: string, rules?: any[]): AsyncValidator;
 export declare function isRequired(rules?: any[] | Record<string, any>): boolean;
 export declare function isValid(errors: any): boolean;
+/**
+ * trigger transform rule
+    1. If the user has set fieldProps, follow the user's fieldProps
+    2. If the user does not set fieldProps, follow formProps
+    3. If there is no formProps, follow the change
+    4. If it is an array, follow the array, if it is not an array (pure string), convert it to a string array
+ */
+export declare function transformTrigger(fieldTrigger: FieldValidateTriggerType, formTrigger: FieldValidateTriggerType): Array<BasicTriggerType>;
+export declare function transformDefaultBooleanAPI(fieldProp: boolean, formProp: boolean, defaultVal?: boolean): boolean;
 export declare function mergeOptions(opts: WithFieldOption, props: ComponentProps): {
     options: {
         valueKey: string;

package/lib/cjs/form/utils.js

@@ -9,8 +9,12 @@ exports.isRequired = isRequired;
 exports.isValid = isValid;
 exports.mergeOptions = mergeOptions;
 exports.mergeProps = mergeProps;
+exports.transformDefaultBooleanAPI = transformDefaultBooleanAPI;
+exports.transformTrigger = transformTrigger;
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
 var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
 var _asyncValidator = _interopRequireDefault(require("async-validator"));
+var _constants = require("./constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -62,16 +66,40 @@ function isValid(errors) {
   }
   return valid;
 }
-// Compatible with String and Array
-function transformTrigger(trigger) {
+/**
+ * trigger transform rule
+    1. If the user has set fieldProps, follow the user's fieldProps
+    2. If the user does not set fieldProps, follow formProps
+    3. If there is no formProps, follow the change
+    4. If it is an array, follow the array, if it is not an array (pure string), convert it to a string array
+ */
+function transformTrigger(fieldTrigger, formTrigger) {
   let result = [];
-  if (Array.isArray(trigger)) {
-    result = trigger;
+  let finalResult = [];
+  if (!(0, _isUndefined2.default)(fieldTrigger)) {
+    result = fieldTrigger;
+  } else if (!(0, _isUndefined2.default)(formTrigger)) {
+    result = formTrigger;
+  } else {
+    result = _constants.strings.DEFAULT_TRIGGER;
+  }
+  if (Array.isArray(result)) {
+    finalResult = result;
   }
-  if (typeof trigger === 'string') {
-    result[0] = trigger;
+  if (typeof result === 'string') {
+    finalResult[0] = result;
+  }
+  return finalResult;
+}
+function transformDefaultBooleanAPI(fieldProp, formProp) {
+  let defaultVal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (!(0, _isUndefined2.default)(fieldProp)) {
+    return fieldProp;
+  } else if (!(0, _isUndefined2.default)(formProp)) {
+    return formProp;
+  } else {
+    return defaultVal;
   }
-  return result;
 }
 function mergeOptions(opts, props) {
   // Opts: different types of component identification value, value change callback function may be inconsistent, used to adapt 1, input, select 2, radio, checkbox 3, switch
@@ -95,15 +123,13 @@ function mergeOptions(opts, props) {
 }
 function mergeProps(props) {
   const defaultProps = {
-    trigger: 'change',
     // validateStatus: 'default',
     allowEmptyString: false,
     allowEmpty: false,
     emptyValue: '',
     noLabel: false,
     noErrorMessage: false,
-    isInInputGroup: false,
-    stopValidateWithError: false
+    isInInputGroup: false
   };
   let _a = Object.assign(Object.assign({}, defaultProps), props),
     {
@@ -158,7 +184,6 @@ function mergeProps(props) {
     initValue = (0, _cloneDeep2.default)(initValue);
   }
   const required = isRequired(rules);
-  trigger = transformTrigger(trigger);
   emptyValue = typeof emptyValue !== 'undefined' ? emptyValue : '';
   return {
     field,

package/lib/cjs/select/select.css

@@ -436,6 +436,7 @@
   padding-bottom: 8px;
   cursor: not-allowed;
   height: 20px;
+  box-sizing: content-box;
 }
 
 .semi-select-borderless:not(:focus-within):not(:hover) {

package/lib/cjs/select/select.scss

@@ -470,6 +470,7 @@ $overflowList: #{$prefix}-overflow-list;
     cursor: not-allowed;
     // make sure that spin align vertical, no need to make 20px as a spacing token here
     height: 20px;
+    box-sizing: content-box;
 }
 
 

package/lib/cjs/toast/animation.scss

@@ -9,3 +9,6 @@ $animation_opacity-toast-show: 0;
 $animation_opacity-toast-hide: 0;
 $animation_transform_translateY-toast-show: -100%;
 $animation_transform_translateY-toast-hide: -100%;
+
+$animation_duration-toast-stack: 300ms;
+$animation_function-toast-stack: cubic-bezier(.22,.57,.02,1.2)

package/lib/cjs/toast/toast.css

@@ -5,13 +5,29 @@
   pointer-events: none;
 }
 .semi-toast-wrapper {
-  pointer-events: none;
   position: fixed;
+  height: 0;
   top: 0;
   width: 100%;
-  text-align: center;
+  display: flex;
+  justify-content: center;
   z-index: 1010;
 }
+.semi-toast-wrapper .semi-toast-innerWrapper {
+  width: fit-content;
+  height: fit-content;
+}
+.semi-toast-wrapper .semi-toast-innerWrapper-hover .semi-toast-zero-height-wrapper {
+  perspective: unset;
+  perspective-origin: center center;
+}
+.semi-toast-zero-height-wrapper {
+  transition: all 300ms cubic-bezier(0.22, 0.57, 0.02, 1.2);
+  perspective-origin: center 280px;
+  perspective: 280px;
+  height: 0;
+  overflow: visible;
+}
 .semi-toast-content {
   pointer-events: all;
   box-shadow: var(--semi-shadow-elevated);

package/lib/cjs/toast/toast.scss

@@ -8,14 +8,37 @@ $icon: #{$prefix}-toast-icon;
     pointer-events: none;
 
     &-wrapper {
-        pointer-events: none;
         position: fixed;
+        height: 0;
         top: $spacing-toast_wrapper-top;
         width: $width-toast_wrapper;
-        text-align: center;
+        display: flex;
+        justify-content: center;
         z-index: $z-toast;
+        .#{$module}-innerWrapper{
+            width: fit-content;
+            height: fit-content;
+            &-hover{
+                .#{$module}-zero-height-wrapper{
+                    perspective: unset;
+                    perspective-origin: center center;
+                }
+            }
+        }
+
+
     }
 
+
+    &-zero-height-wrapper{
+        transition: all $animation_duration-toast-stack $animation_function-toast-stack;
+        perspective-origin: center $spacing-toast-perspective-originY; ;
+        perspective: $spacing-toast-perspective;
+        height: 0;
+        overflow: visible;
+    }
+
+
     &-content {
         pointer-events: all;
         @include shadow-elevated;

package/lib/cjs/toast/toastFoundation.d.ts

@@ -23,6 +23,7 @@ export interface ToastProps extends ConfigProps {
     theme?: ToastTheme;
     direction?: Directions;
     close?: (id: string) => void;
+    stack?: boolean;
 }
 export interface ToastInstance extends ToastProps {
     id?: string;

package/lib/cjs/toast/toastListFoundation.d.ts

@@ -6,13 +6,18 @@ export interface ToastListState {
     list: ToastInstance[];
     removedItems: ToastInstance[];
     updatedItems: ToastInstance[];
+    mouseInSide: boolean;
 }
 export interface ToastListAdapter extends DefaultAdapter<ToastListProps, ToastListState> {
     updateToast: (list: ToastListState['list'], removedItems: ToastListState['removedItems'], updatedItems: ToastListState['updatedItems']) => void;
+    handleMouseInSideChange: (mouseInSideChange: boolean) => void;
+    getInputWrapperRect: () => DOMRect | null;
 }
 export default class ToastListFoundation extends BaseFoundation<ToastListAdapter> {
     constructor(adapter: ToastListAdapter);
     hasToast(id: string): boolean;
+    handleMouseInSideChange: (mouseInSideChange: boolean) => void;
+    getInputWrapperRect: () => DOMRect;
     addToast(toastOpts: ToastProps): void;
     updateToast(id: string, toastOpts: ToastProps): void;
     removeToast(id: string): void;

package/lib/cjs/toast/toastListFoundation.js

@@ -9,6 +9,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 class ToastListFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, ToastListFoundation.defaultAdapter), adapter));
+    this.handleMouseInSideChange = mouseInSideChange => {
+      this._adapter.handleMouseInSideChange(mouseInSideChange);
+    };
+    this.getInputWrapperRect = () => {
+      return this._adapter.getInputWrapperRect();
+    };
   }
   hasToast(id) {
     const toastList = this._adapter.getState('list');

package/lib/cjs/toast/variables.scss

@@ -34,6 +34,8 @@ $spacing-toast_content-margin: $spacing-base-tight; // 通知内容外边距
 $spacing-toast_content_close_btn-marginTop: -2px; // 通知关闭按钮顶部外边距
 $spacing-toast_content_text-marginLeft: $spacing-base-tight; // 通知文本左侧外边距
 $spacing-toast_content_text-marginRight: $spacing-base-tight; // 通知文本右侧外边距
+$spacing-toast-perspective-originY: 280px; // 通知透视原点 Y 轴位置
+$spacing-toast-perspective: 280px; // 通知透视距离
 
 // Width/Height
 $width-toast_wrapper: 100%; // 通知容器整体宽度

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

@@ -3,7 +3,7 @@ declare const cssClasses: {
 };
 declare const strings: {
     readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver", "leftBottomOver", "rightBottomOver"];
-    readonly TRIGGER_SET: readonly ["hover", "focus", "click", "custom"];
+    readonly TRIGGER_SET: readonly ["hover", "focus", "click", "custom", "contextMenu"];
     readonly STATUS_DISABLED: "disabled";
     readonly STATUS_LOADING: "loading";
 };

package/lib/cjs/tooltip/constants.js

@@ -11,7 +11,7 @@ const cssClasses = {
 exports.cssClasses = cssClasses;
 const strings = {
   POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver', 'leftBottomOver', 'rightBottomOver'],
-  TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
+  TRIGGER_SET: ['hover', 'focus', 'click', 'custom', 'contextMenu'],
   STATUS_DISABLED: 'disabled',
   STATUS_LOADING: 'loading'
 };

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

@@ -26,6 +26,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
         focus: string;
         blur: string;
         keydown: string;
+        contextMenu: string;
     };
     registerTriggerEvent(...args: any[]): void;
     getTriggerBounding(...args: any[]): DOMRect;

package/lib/cjs/tooltip/foundation.js

@@ -93,7 +93,7 @@ class Tooltip extends _foundation.default {
        * Because the handler needs to be bound to the document. If you bind during the constructor phase
        * When there are multiple container instances in a page, one click triggers the handler of multiple containers
        */
-      if (trigger === 'click' || clickTriggerToHide) {
+      if (trigger === 'click' || clickTriggerToHide || trigger === 'contextMenu') {
         this._adapter.registerClickOutsideHandler(this.hide);
       }
       this._bindScrollEvent();
@@ -365,6 +365,13 @@ class Tooltip extends _foundation.default {
         // when trigger type is 'custom', no need to bind eventHandler
         // show/hide completely depend on props.visible which change by user
         break;
+      case 'contextMenu':
+        triggerEventSet[eventNames.contextMenu] = e => {
+          e.preventDefault();
+          this.show();
+        };
+        // Click outside needs special treatment, can not be directly tied to the trigger Element, need to be bound to the document
+        break;
       default:
         break;
     }

package/lib/cjs/tree/tree.css

@@ -103,9 +103,7 @@
 .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon {
   transform: rotate(270deg);
 }
-.semi-tree-option-list .semi-tree-option-highlight,
-.semi-tree-option-list .semi-tree-option-highlight .semi-checkbox-addon, .semi-tree-option-list .semi-tree-option-filtered,
-.semi-tree-option-list .semi-tree-option-filtered .semi-checkbox-addon {
+.semi-tree-option-list .semi-tree-option-highlight {
   font-weight: 600;
   color: var(--semi-color-primary);
 }

package/lib/cjs/tree/tree.scss

@@ -134,13 +134,9 @@ $module: #{$prefix}-tree;
             }
         }
 
-        &-highlight,
-        &-filtered {
-            &,
-            .#{$prefix}-checkbox-addon {
-                font-weight: $font-tree_option_hightlight-fontWeight;
-                color: $color-tree_option_hightlight-text;
-            }
+        &-highlight {
+            font-weight: $font-tree_option_hightlight-fontWeight;
+            color: $color-tree_option_hightlight-text;
         }
 
         &-hidden {

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

@@ -0,0 +1,9 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface FileCardAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    updateFallbackPreview: (fallback: boolean) => void;
+}
+declare class FileCardFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<FileCardAdapter<P, S>, P, S> {
+    constructor(adapter: FileCardAdapter<P, S>);
+    handleImageError(error: any): void;
+}
+export default FileCardFoundation;

package/lib/cjs/upload/fileCardFoundation.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+class FileCardFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+  handleImageError(error) {
+    this._adapter.updateFallbackPreview(true);
+  }
+}
+var _default = FileCardFoundation;
+exports.default = _default;

package/lib/cjs/upload/upload.css

@@ -354,6 +354,12 @@
   left: 50%;
   transform: translate3D(-50%, -50%, 0);
 }
+.semi-upload-picture-file-card-preview-fallback {
+  background-color: var(--semi-color-fill-0);
+  border: 2px var(--semi-color-border);
+  color: var(--semi-color-tertiary);
+  border-radius: var(--semi-border-radius-small);
+}
 .semi-upload-picture-file-card-pic-info {
   display: inline-flex;
   box-sizing: border-box;

package/lib/cjs/upload/upload.scss

@@ -425,6 +425,13 @@ $module: #{$prefix}-upload;
                 transform: translate3D(-50%, -50%, 0);
             }
 
+            &-preview-fallback {
+                background-color: $color-upload_pic_add-bg;
+                border: $width-upload_picture_add-border $color-upload-border;
+                color: $color-upload-icon;
+                border-radius: $radius-upload_picture_add;
+            }
+
             &-pic-info {
                 display: inline-flex;
                 box-sizing: border-box;

package/lib/es/button/button.css

@@ -8,11 +8,11 @@
   border-radius: 0;
   margin-right: 1px;
 }
-.semi-button-split :first-child {
+.semi-button-split .semi-button-first {
   border-top-left-radius: var(--semi-border-radius-small);
   border-bottom-left-radius: var(--semi-border-radius-small);
 }
-.semi-button-split :last-child {
+.semi-button-split .semi-button-last {
   border-top-right-radius: var(--semi-border-radius-small);
   border-bottom-right-radius: var(--semi-border-radius-small);
   margin-right: unset;

package/lib/es/button/splitButtonGroup.scss

@@ -10,19 +10,20 @@ $icon: #{$module}-with-icon;
     .#{$module} {
         border-radius: 0;
         margin-right: 1px;
-    }
 
-    :first-child {
-        border-top-left-radius: var(--semi-border-radius-small);
-        border-bottom-left-radius: var(--semi-border-radius-small);
-    }
+        &-first {
+            border-top-left-radius: var(--semi-border-radius-small);
+            border-bottom-left-radius: var(--semi-border-radius-small);
+        }
 
-    :last-child {
-        border-top-right-radius: var(--semi-border-radius-small);
-        border-bottom-right-radius: var(--semi-border-radius-small);
-        margin-right: unset;
+        &-last {
+            border-top-right-radius: var(--semi-border-radius-small);
+            border-bottom-right-radius: var(--semi-border-radius-small);
+            margin-right: unset;
+        }
     }
 
+
     &:hover {
         // 因为上面那条规则，导致原来的active被覆盖
         .#{$module}-borderless:active {

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

@@ -6,6 +6,7 @@ declare const strings: {
     LABEL_POS: string[];
     LABEL_ALIGN: string[];
     EXTRA_POS: string[];
+    DEFAULT_TRIGGER: string;
 };
 declare const numbers: {};
 export { cssClasses, strings, numbers };