@douyinfe/semi-foundation 2.41.3 → 2.42.0

package/lib/es/datePicker/datePicker.css

@@ -718,6 +718,7 @@
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   white-space: nowrap;
   color: var(--semi-color-text-2);
 }

package/lib/es/datePicker/datePicker.scss

@@ -1072,6 +1072,7 @@ $module-list: #{$prefix}-scrolllist;
                 font-weight: $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight;
                 font-size: $font-datepicker_range_input_prefix_suffix_clearbtn-fontSize;
                 line-height: $font-datepicker_range_input_prefix_suffix_clearbtn-lineHeight;
+                font-family: $font-family-regular;
                 white-space: nowrap;
                 color: $color-datepicker_range_input-text-default;
             }

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 };

package/lib/es/form/constants.js

@@ -6,7 +6,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 = {};
 export { cssClasses, strings, numbers };

package/lib/es/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/es/form/utils.js

@@ -1,3 +1,4 @@
+import _isUndefined from "lodash/isUndefined";
 import _cloneDeep from "lodash/cloneDeep";
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -8,6 +9,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import AsyncValidator from 'async-validator';
+import { strings } from './constants';
 /**
  *
  * @param WrappedComponent React.ComponentType | any
@@ -50,16 +52,40 @@ export 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
+ */
+export function transformTrigger(fieldTrigger, formTrigger) {
   let result = [];
-  if (Array.isArray(trigger)) {
-    result = trigger;
+  let finalResult = [];
+  if (!_isUndefined(fieldTrigger)) {
+    result = fieldTrigger;
+  } else if (!_isUndefined(formTrigger)) {
+    result = formTrigger;
+  } else {
+    result = 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;
+}
+export function transformDefaultBooleanAPI(fieldProp, formProp) {
+  let defaultVal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (!_isUndefined(fieldProp)) {
+    return fieldProp;
+  } else if (!_isUndefined(formProp)) {
+    return formProp;
+  } else {
+    return defaultVal;
   }
-  return result;
 }
 export 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
@@ -83,15 +109,13 @@ export function mergeOptions(opts, props) {
 }
 export 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),
     {
@@ -146,7 +170,6 @@ export function mergeProps(props) {
     initValue = _cloneDeep(initValue);
   }
   const required = isRequired(rules);
-  trigger = transformTrigger(trigger);
   emptyValue = typeof emptyValue !== 'undefined' ? emptyValue : '';
   return {
     field,

package/lib/es/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/es/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/es/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/es/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/es/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/es/toast/toastListFoundation.js

@@ -2,6 +2,12 @@ import BaseFoundation from '../base/foundation';
 export default class ToastListFoundation extends BaseFoundation {
   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/es/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/es/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/es/tooltip/constants.js

@@ -4,7 +4,7 @@ const 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/es/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/es/tooltip/foundation.js

@@ -86,7 +86,7 @@ export default class Tooltip extends BaseFoundation {
        * 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();
@@ -358,6 +358,13 @@ export default class Tooltip extends BaseFoundation {
         // 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/es/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/es/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/es/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/es/upload/fileCardFoundation.js

@@ -0,0 +1,10 @@
+import BaseFoundation from '../base/foundation';
+class FileCardFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+  handleImageError(error) {
+    this._adapter.updateFallbackPreview(true);
+  }
+}
+export default FileCardFoundation;

package/lib/es/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/es/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/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.41.3",
+    "version": "2.42.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.41.3",
+        "@douyinfe/semi-animation": "2.42.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "6f625c7c2e4f68a9c4e5c60270f7618bedcdeaa1",
+    "gitHead": "164a3ae969dc46f390c293f18f073cf737b6dd7e",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/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/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/toast/toastFoundation.ts

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

package/toast/toastListFoundation.ts

@@ -8,11 +8,14 @@ export interface ToastListProps{
 export interface ToastListState{
     list: ToastInstance[];
     removedItems: ToastInstance[];
-    updatedItems: ToastInstance[]
+    updatedItems: ToastInstance[];
+    mouseInSide: boolean
 }
 
 export interface ToastListAdapter extends DefaultAdapter<ToastListProps, ToastListState>{
-    updateToast: (list: ToastListState['list'], removedItems: ToastListState['removedItems'], updatedItems: ToastListState['updatedItems']) => void
+    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> {
@@ -27,6 +30,14 @@ export default class ToastListFoundation extends BaseFoundation<ToastListAdapter
         return toastList.map(({ id }) =>id).includes(id);
     }
 
+    handleMouseInSideChange = (mouseInSideChange: boolean)=>{
+        this._adapter.handleMouseInSideChange(mouseInSideChange);
+    }
+
+    getInputWrapperRect = () => {
+        return this._adapter.getInputWrapperRect();
+    }
+
     addToast(toastOpts: ToastProps) {
         const toastList = this._adapter.getState('list') as ToastListState['list'];
         // const id = getUuid('toast');

package/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/tooltip/constants.ts

@@ -23,7 +23,7 @@ const strings = {
         'leftBottomOver',
         'rightBottomOver',
     ],
-    TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
+    TRIGGER_SET: ['hover', 'focus', 'click', 'custom', 'contextMenu'],
     STATUS_DISABLED: 'disabled',
     STATUS_LOADING: 'loading',
 } as const;

package/tooltip/foundation.ts

@@ -44,7 +44,8 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
         click: string;
         focus: string;
         blur: string;
-        keydown: string
+        keydown: string;
+        contextMenu: string
     };
     registerTriggerEvent(...args: any[]): void;
     getTriggerBounding(...args: any[]): DOMRect;
@@ -256,6 +257,13 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 // 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;
         }
@@ -334,7 +342,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
          * 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);
         }
 

package/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/upload/fileCardFoundation.ts

@@ -0,0 +1,17 @@
+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
+}
+
+class FileCardFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<FileCardAdapter<P, S>, P, S> {
+    constructor(adapter: FileCardAdapter<P, S>) {
+        super({ ...adapter });
+    }
+
+    handleImageError(error: any) {
+        this._adapter.updateFallbackPreview(true);
+    }
+}
+
+export default FileCardFoundation;

package/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;