@douyinfe/semi-foundation 2.66.0 → 2.67.0-beta.0

package/lib/cjs/pincode/foundation.js

@@ -45,13 +45,12 @@ class PinCodeFoundation extends _foundation.default {
     };
     this.completeSingleInput = (i, singleInputValue) => __awaiter(this, void 0, void 0, function* () {
       var _a;
-      const isControlledComponent = Boolean(this.getProp("value"));
+      const isControlledComponent = this._isInProps("value");
       yield this._adapter.onCurrentActiveIndexChange(i + 1);
       const valueList = [...this.getState("valueList")];
       valueList[i] = singleInputValue;
-      if (isControlledComponent) {
-        this._adapter.notifyValueChange(valueList);
-      } else {
+      this._adapter.notifyValueChange(valueList);
+      if (!isControlledComponent) {
         yield this.updateValueList(valueList);
       }
       const count = this.getProp('count');
@@ -100,11 +99,13 @@ class PinCodeFoundation extends _foundation.default {
       if (e.key === "Backspace") {
         valueList[index] = "";
         this.updateValueList(valueList);
+        this._adapter.notifyValueChange(valueList);
         this._adapter.changeSpecificInputFocusState(Math.max(0, index - 1), "focus");
         e.preventDefault();
       } else if (e.key === "Delete") {
         valueList[index] = "";
         this.updateValueList(valueList);
+        this._adapter.notifyValueChange(valueList);
         this._adapter.changeSpecificInputFocusState(Math.min(valueList.length - 1, index + 1), "focus");
         e.preventDefault();
       } else if (e.key === "ArrowLeft") {

package/lib/cjs/treeSelect/treeSelect.css

@@ -293,6 +293,9 @@
   flex: 1;
   min-width: 230px;
 }
+.semi-tree-select-popover .semi-tree-wrapper .semi-tree-option-list-hidden {
+  padding: 0;
+}
 .semi-tree-select-popover .semi-tree-wrapper .semi-tree-search-wrapper {
   border-bottom: 1px var(--semi-color-fill-0) solid;
 }

package/lib/cjs/treeSelect/treeSelect.scss

@@ -373,6 +373,10 @@ $module: #{$prefix}-tree-select;
         .#{$prefix}-tree-option-list {
             flex: 1;
             min-width: $width-treeSelect_option;
+
+            &-hidden {
+                padding: 0;
+            }
         }
 
         .#{$prefix}-tree-search-wrapper {

package/lib/cjs/upload/foundation.js

@@ -53,6 +53,8 @@ class UploadFoundation extends _foundation.default {
     this.destroyState = false;
   }
   init() {
+    // make sure state reset, otherwise may cause upload abort in React StrictMode, like https://github.com/DouyinFE/semi-design/pull/843
+    this.destroyState = false;
     const {
       disabled,
       addOnPasting

package/lib/es/autoComplete/autoComplete.css

@@ -1,7 +1,7 @@
 /* shadow */
 /* sizing */
 /* spacing */
-.semi-autoComplete-option {
+.semi-autocomplete-option {
   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;
@@ -20,7 +20,7 @@
   box-sizing: border-box;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
-.semi-autoComplete-option-icon {
+.semi-autocomplete-option-icon {
   width: 12px;
   color: transparent;
   visibility: hidden;
@@ -29,51 +29,51 @@
   justify-content: center;
   align-content: center;
 }
-.semi-autoComplete-option-text {
+.semi-autocomplete-option-text {
   display: flex;
   flex-wrap: wrap;
   white-space: pre;
 }
-.semi-autoComplete-option-keyword {
+.semi-autocomplete-option-keyword {
   color: var(--semi-color-primary);
   background-color: inherit;
   font-weight: 600;
 }
-.semi-autoComplete-option:active {
+.semi-autocomplete-option:active {
   background-color: var(--semi-color-fill-1);
 }
-.semi-autoComplete-option-empty {
+.semi-autocomplete-option-empty {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   justify-content: center;
 }
-.semi-autoComplete-option-empty:hover {
+.semi-autocomplete-option-empty:hover {
   background-color: inherit;
 }
-.semi-autoComplete-option-empty:active {
+.semi-autocomplete-option-empty:active {
   background-color: inherit;
 }
-.semi-autoComplete-option-disabled {
+.semi-autocomplete-option-disabled {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
 }
-.semi-autoComplete-option-disabled:hover {
+.semi-autocomplete-option-disabled:hover {
   background-color: var(--semi-color-fill-0);
 }
-.semi-autoComplete-option-selected {
+.semi-autocomplete-option-selected {
   font-weight: 600;
 }
-.semi-autoComplete-option-selected .semi-autoComplete-option-icon {
+.semi-autocomplete-option-selected .semi-autocomplete-option-icon {
   visibility: visible;
   color: var(--semi-color-text-2);
 }
-.semi-autoComplete-option-focused {
+.semi-autocomplete-option-focused {
   background-color: var(--semi-color-fill-0);
 }
-.semi-autoComplete-option:first-of-type {
+.semi-autocomplete-option:first-of-type {
   margin-top: 4px;
 }
-.semi-autoComplete-option:last-of-type {
+.semi-autocomplete-option:last-of-type {
   margin-bottom: 4px;
 }
 

package/lib/es/autoComplete/constants.js

@@ -2,8 +2,8 @@ import { strings as tooltipStrings } from '../tooltip/constants';
 import { BASE_CLASS_PREFIX, VALIDATE_STATUS } from '../base/constants';
 const cssClasses = {
   PREFIX: `${BASE_CLASS_PREFIX}-autocomplete`,
-  PREFIX_OPTION: `${BASE_CLASS_PREFIX}-autoComplete-option`,
-  PREFIX_GROUP: `${BASE_CLASS_PREFIX}-autoComplete-group`
+  PREFIX_OPTION: `${BASE_CLASS_PREFIX}-autocomplete-option`,
+  PREFIX_GROUP: `${BASE_CLASS_PREFIX}-autocomplete-group`
 };
 const strings = {
   SIZE: ['small', 'large', 'default'],

package/lib/es/autoComplete/foundation.d.ts

@@ -21,6 +21,7 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
     updateInputValue: (inputValue: string | number) => void;
     toggleListVisible: (isShow: boolean) => void;
     updateOptionList: (optionList: Array<StateOptionItem>) => void;
+    updateScrollTop: (index: number) => void;
     updateSelection: (selection: Map<any, any>) => void;
     notifySearch: (inputValue: string) => void;
     notifyChange: (value: string | number) => void;

package/lib/es/autoComplete/foundation.js

@@ -349,6 +349,7 @@ class AutoCompleteFoundation extends BaseFoundation {
       index = nearestActiveOption;
     }
     this._adapter.updateFocusIndex(index);
+    this._adapter.updateScrollTop(index);
   }
   _handleArrowKeyDown(offset) {
     const {

package/lib/es/autoComplete/option.scss

@@ -1,4 +1,4 @@
-$module: #{$prefix}-autoComplete;
+$module: #{$prefix}-autocomplete;
 $filterable: #{$module}-filterable;
 
 .#{$module}-option {

package/lib/es/cascader/cascader.css

@@ -182,9 +182,8 @@
   align-items: center;
   height: 100%;
   justify-content: center;
-  width: 16px;
+  width: 32px;
   color: var(--semi-color-text-2);
-  margin-right: 12px;
 }
 .semi-cascader-clearbtn:hover {
   color: var(--semi-color-primary-hover);
@@ -360,7 +359,7 @@
 .semi-cascader-option-lists .semi-cascader-option-icon {
   display: inline-flex;
   flex-shrink: 0;
-  width: 16px;
+  width: 32px;
   color: var(--semi-color-text-2);
 }
 .semi-cascader-option-lists .semi-cascader-option-icon-active, .semi-cascader-option-lists .semi-cascader-option-icon-empty {
@@ -370,13 +369,13 @@
   margin-left: 8px;
 }
 .semi-cascader-option-lists .semi-cascader-option-spin-icon {
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
   line-height: 0;
 }
 .semi-cascader-option-lists .semi-cascader-option-spin-icon svg {
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
 }
 .semi-cascader-option-lists .semi-cascader-option-label {
   display: flex;
@@ -442,12 +441,6 @@
 .semi-portal-rtl .semi-cascader {
   direction: rtl;
 }
-.semi-rtl .semi-cascader-arrow, .semi-rtl .semi-cascader-clearbtn,
-.semi-portal-rtl .semi-cascader-arrow,
-.semi-portal-rtl .semi-cascader-clearbtn {
-  margin-right: 0;
-  margin-left: 12px;
-}
 .semi-rtl .semi-cascader-inset-label,
 .semi-portal-rtl .semi-cascader-inset-label {
   margin-right: 12px;
@@ -500,25 +493,27 @@
 .semi-cascader-option-lists-rtl {
   direction: rtl;
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl ul > li {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl ul > li {
   padding-right: 12px;
   padding-left: auto;
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-list {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-list {
   border-left: 0;
   border-right: 1px solid var(--semi-color-fill-0);
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-list:first-child {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-list:first-child {
   border-right: none;
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-icon-active, .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-icon-empty {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-icon-active, .semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-icon-empty {
   margin-right: 0;
   margin-left: 8px;
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-flatten {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-flatten {
   padding-right: 0;
   padding-left: 64px;
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option .semi-icon-chevron_right {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option .semi-icon-chevron_right {
+  margin-left: 0;
+  margin-right: 8px;
   transform: scaleX(-1);
 }

package/lib/es/cascader/cascader.scss

@@ -227,7 +227,6 @@ $module: #{$prefix}-cascader;
         justify-content: center;
         width: $width-cascader-icon;
         color: $color-cascader-icon-default;
-        margin-right: $spacing-cascader_clearBtn-marginRight;
     }
 
     &-clearbtn {

package/lib/es/cascader/rtl.scss

@@ -5,12 +5,6 @@ $module: #{$prefix}-cascader;
     .#{$module} {
         direction: rtl;
 
-        &-arrow,
-        &-clearbtn {
-            margin-right: 0;
-            margin-left: $spacing-cascader_clearBtn-marginRight;
-        }
-
         &-inset-label {
             margin-right:  $spacing-cascader_label-marginRight;
             margin-left:  $spacing-cascader_label-marginRight;
@@ -79,12 +73,12 @@ $module: #{$prefix}-cascader;
         direction: rtl;
     }
 
-    .#{$module}-option-lists-rtl ul > li {
+    &.#{$module}-option-lists-rtl ul > li {
         padding-right: $spacing-cascader_option-paddingLeft;
         padding-left: auto;
     }
 
-    .#{$module}-option-lists-rtl .#{$module}-option-list {
+    &.#{$module}-option-lists-rtl .#{$module}-option-list {
         border-left: 0;
         border-right: $width-cascader_option_list-border solid $color-cascader_option_list-border-default;
 
@@ -93,7 +87,7 @@ $module: #{$prefix}-cascader;
         }
     }
 
-    .#{$module}-option-lists-rtl .#{$module}-option {
+    &.#{$module}-option-lists-rtl .#{$module}-option {
         &-icon {
             &-active,
             &-empty {
@@ -108,6 +102,8 @@ $module: #{$prefix}-cascader;
         }
 
         .#{$prefix}-icon-chevron_right {
+            margin-left: 0;
+            margin-right: $spacing-cascader_option_icon-marginLeft;
             transform: scaleX(-1);
         }
     }

package/lib/es/cascader/variables.scss

@@ -53,7 +53,6 @@ $spacing-cascader_selection_tag-marginY: 1px; // 级联选择触发器多选时
 $spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级联选择触发器多选搜索时 TagInput 的左外边距
 $spacing-cascader_selection_input-marginLeft: $spacing-extra-tight; // 级联选择触发器多选搜索时输入框的左外边距
 $spacing-cascader_selection_n-marginRight: $spacing-extra-tight; // 超出 maxTagCount 后，+n 的右外边距
-$spacing-cascader_clearBtn-marginRight: 12px; // 级联选择触发器清空按钮右侧外边距
 $spacing-cascader_option-icon-marginLeft: 8px; // 级联选择菜单项图标左侧外边距
 
 $color-cascader_selection_n-text-default: var(--semi-color-text-0); // 超出 maxTagCount 后，+n 的文字默认颜色
@@ -93,7 +92,7 @@ $height-cascader_large: $height-control-large; // 级联选择触发器高度 -
 $width-cascader_hover-border: $width-cascader-border; // 级联选择触发器描边宽度 - 悬浮
 $width-cascader_focus-border: $border-thickness-control-focus; // 级联选择触发器描边宽度 - 选中态
 $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
-$width-cascader-icon: 16px; // 级联选择图标尺寸
+$width-cascader-icon: 32px; // 级联选择图标尺寸
 $width-cascader_option:  150px; // 级联选择各级菜单宽度
 $height-cascader_option_list: 180px; // 级联选择菜单高度
 $height-cascader_selection_tagInput_wrapper_small: 22px;  //级联选择多选搜索时搜索框最小高度 - 小尺寸

package/lib/es/chat/chat.css

@@ -373,6 +373,9 @@
   border-radius: var(--semi-border-radius-medium);
   vertical-align: top;
 }
+.semi-chat-attachment-img img {
+  object-fit: cover;
+}
 .semi-chat-attachment a {
   text-decoration: none;
   color: inherit;

package/lib/es/chat/chat.scss

@@ -474,6 +474,10 @@ $module: #{$prefix}-chat;
         &-img {
             border-radius: $radius-chat_attachment_img;
             vertical-align: top;
+
+            img {
+                object-fit: cover;
+            }
         }
 
         a {

package/lib/es/chat/variables.scss

@@ -11,7 +11,7 @@ $radius-chat_dropArea: 16px; // 拖拽上传区域圆角
 //color
 $color-chat_action_content-bg: var(--semi-color-bg-0); // 返回按钮/停止生成内容按钮背景颜色
 $color-chat_action_content-border: var(--semi-color-border); // 返回按钮/停止生成按钮描边颜色
-$color-chat_divider: var(--semi-color-text-2); // 分割线颜色
+$color-chat_divider: var(--semi-color-text-2); // 分割线文字颜色
 $color-chat_chatBox_title: var(--semi-color-text-0); //聊天框标题颜色
 $color-chat_chatBox_action_icon: var(--semi-color-text-2); // 聊天框操作区域按钮图标颜色
 $color-chat_chatBox_action_icon-hover: var(--semi-color-text-0); // 聊天框操作区域按钮图标hover颜色

package/lib/es/checkbox/checkbox.css

@@ -105,7 +105,7 @@
   border-color: var(--semi-color-primary-hover);
   color: var(--semi-color-white);
 }
-.semi-checkbox:hover.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_unDisabled .semi-checkbox-inner-display {
+.semi-checkbox:hover.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_enable .semi-checkbox-inner-display {
   background: var(--semi-color-white);
 }
 .semi-checkbox:active .semi-checkbox-inner-display {
@@ -122,7 +122,7 @@
   border-color: var(--semi-color-primary-active);
   color: var(--semi-color-white);
 }
-.semi-checkbox:active.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_unDisabled .semi-checkbox-inner-display {
+.semi-checkbox:active.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_enable .semi-checkbox-inner-display {
   background: var(--semi-color-white);
 }
 .semi-checkbox-cardType {

package/lib/es/checkbox/checkbox.scss

@@ -148,7 +148,7 @@ $module: #{$prefix}-checkbox;
             }
         }
 
-        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_unDisabled {
+        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_enable {
             .#{$module}-inner-display {
                 background: $color-checkbox_cardType_inner-bg-hover;
             }
@@ -175,7 +175,7 @@ $module: #{$prefix}-checkbox;
             }
         }
 
-        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_unDisabled {
+        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_enable {
             .#{$module}-inner-display {
                 background: $color-checkbox_cardType_inner-bg-active;
             }

package/lib/es/form/foundation.js

@@ -452,10 +452,12 @@ export default class FormFoundation extends BaseFoundation {
     const notUpdate = opts && opts.notUpdate;
     ObjectUtil.set(this.data.errors, field, error);
     // The setError caused by centralized validation does not need to trigger notify, otherwise it will be called too frequently, as many times as there are fields
-    // 集中validate时，引起的setError不需要触发notify，否则会过于频繁调用，有多少个field就调用了多少次
     if (!notNotify) {
       this._adapter.notifyChange(this.data);
     }
+    this._adapter.notifyErrorChange(this.data.errors, {
+      [field]: error
+    });
     if (!notUpdate) {
       this._adapter.forceUpdate(callback);
     }

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

@@ -11,6 +11,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     forceUpdate: (callback?: () => void) => void;
     notifyChange: (formState: FormState) => void;
     notifyValueChange: (values: any, changedValues: any) => void;
+    notifyErrorChange: (errors: any, changedError: any) => void;
     notifyReset: () => void;
     getInitValues: () => Partial<Values>;
     getFormProps: (keys: undefined | string | Array<string>) => any;

package/lib/es/input/input.css

@@ -491,15 +491,13 @@
 .semi-input-group .semi-select {
   overflow-y: visible;
 }
-.semi-input-group .semi-input-number,
-.semi-input-group .semi-datepicker,
-.semi-input-group .semi-timepicker,
-.semi-input-group .semi-autocomplete {
-  border-radius: 0;
-}
+.semi-input-group .semi-input-number .semi-input-wrapper,
 .semi-input-group .semi-input-number .semi-datepicker-range-input,
+.semi-input-group .semi-datepicker .semi-input-wrapper,
 .semi-input-group .semi-datepicker .semi-datepicker-range-input,
+.semi-input-group .semi-timepicker .semi-input-wrapper,
 .semi-input-group .semi-timepicker .semi-datepicker-range-input,
+.semi-input-group .semi-autocomplete .semi-input-wrapper,
 .semi-input-group .semi-autocomplete .semi-datepicker-range-input {
   border-radius: 0;
 }

package/lib/es/input/input.scss

@@ -593,7 +593,6 @@ $module: #{$prefix}-input;
         align-content: center;
         flex-wrap: wrap;
 
-        // select与autocomplete的border-radius都是基于select
         .#{$prefix}-select,
         .#{$prefix}-tagInput,
         .#{$prefix}-cascader,
@@ -633,8 +632,8 @@ $module: #{$prefix}-input;
         .#{$prefix}-datepicker,
         .#{$prefix}-timepicker,
         .#{$prefix}-autocomplete {
-            border-radius: 0;
-
+            
+            .#{$module}-wrapper, 
             .#{$prefix}-datepicker-range-input {
                 border-radius: 0;
             }

package/lib/es/pincode/foundation.js

@@ -38,13 +38,12 @@ class PinCodeFoundation extends BaseFoundation {
     };
     this.completeSingleInput = (i, singleInputValue) => __awaiter(this, void 0, void 0, function* () {
       var _a;
-      const isControlledComponent = Boolean(this.getProp("value"));
+      const isControlledComponent = this._isInProps("value");
       yield this._adapter.onCurrentActiveIndexChange(i + 1);
       const valueList = [...this.getState("valueList")];
       valueList[i] = singleInputValue;
-      if (isControlledComponent) {
-        this._adapter.notifyValueChange(valueList);
-      } else {
+      this._adapter.notifyValueChange(valueList);
+      if (!isControlledComponent) {
         yield this.updateValueList(valueList);
       }
       const count = this.getProp('count');
@@ -93,11 +92,13 @@ class PinCodeFoundation extends BaseFoundation {
       if (e.key === "Backspace") {
         valueList[index] = "";
         this.updateValueList(valueList);
+        this._adapter.notifyValueChange(valueList);
         this._adapter.changeSpecificInputFocusState(Math.max(0, index - 1), "focus");
         e.preventDefault();
       } else if (e.key === "Delete") {
         valueList[index] = "";
         this.updateValueList(valueList);
+        this._adapter.notifyValueChange(valueList);
         this._adapter.changeSpecificInputFocusState(Math.min(valueList.length - 1, index + 1), "focus");
         e.preventDefault();
       } else if (e.key === "ArrowLeft") {

package/lib/es/treeSelect/treeSelect.css

@@ -293,6 +293,9 @@
   flex: 1;
   min-width: 230px;
 }
+.semi-tree-select-popover .semi-tree-wrapper .semi-tree-option-list-hidden {
+  padding: 0;
+}
 .semi-tree-select-popover .semi-tree-wrapper .semi-tree-search-wrapper {
   border-bottom: 1px var(--semi-color-fill-0) solid;
 }

package/lib/es/treeSelect/treeSelect.scss

@@ -373,6 +373,10 @@ $module: #{$prefix}-tree-select;
         .#{$prefix}-tree-option-list {
             flex: 1;
             min-width: $width-treeSelect_option;
+
+            &-hidden {
+                padding: 0;
+            }
         }
 
         .#{$prefix}-tree-search-wrapper {

package/lib/es/upload/foundation.js

@@ -46,6 +46,8 @@ class UploadFoundation extends BaseFoundation {
     this.destroyState = false;
   }
   init() {
+    // make sure state reset, otherwise may cause upload abort in React StrictMode, like https://github.com/DouyinFE/semi-design/pull/843
+    this.destroyState = false;
     const {
       disabled,
       addOnPasting

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.66.0",
+    "version": "2.67.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.66.0",
+        "@douyinfe/semi-animation": "2.67.0-beta.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -28,7 +28,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "8c97448e5e993fd00ada557b1419f6141fb52736",
+    "gitHead": "5dbca29ee2a2f9b49e6f91093df201b68b02b16a",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/pincode/foundation.ts

@@ -42,13 +42,12 @@ class PinCodeFoundation<P = Record<string, any>, S = Record<string, any>> extend
     }
 
     completeSingleInput = async (i: number, singleInputValue: string) => {
-        const isControlledComponent = Boolean(this.getProp("value"));
+        const isControlledComponent = this._isInProps("value");
         await this._adapter.onCurrentActiveIndexChange(i + 1);
         const valueList = [...this.getState("valueList")];
         valueList[i] = singleInputValue;
-        if (isControlledComponent) {
-            this._adapter.notifyValueChange(valueList);
-        } else {
+        this._adapter.notifyValueChange(valueList);
+        if (!isControlledComponent) {
             await this.updateValueList(valueList);
         }
 
@@ -102,11 +101,13 @@ class PinCodeFoundation<P = Record<string, any>, S = Record<string, any>> extend
         if (e.key === "Backspace") {
             valueList[index] = "";
             this.updateValueList(valueList);
+            this._adapter.notifyValueChange(valueList);
             this._adapter.changeSpecificInputFocusState(Math.max(0, index - 1), "focus");
             e.preventDefault();
         } else if (e.key === "Delete") {
             valueList[index] = "";
             this.updateValueList(valueList);
+            this._adapter.notifyValueChange(valueList);
             this._adapter.changeSpecificInputFocusState(Math.min(valueList.length - 1, index + 1), "focus");
             e.preventDefault();
         } else if (e.key === "ArrowLeft") {

package/treeSelect/treeSelect.scss

@@ -373,6 +373,10 @@ $module: #{$prefix}-tree-select;
         .#{$prefix}-tree-option-list {
             flex: 1;
             min-width: $width-treeSelect_option;
+
+            &-hidden {
+                padding: 0;
+            }
         }
 
         .#{$prefix}-tree-search-wrapper {

package/upload/foundation.ts

@@ -100,6 +100,8 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     }
 
     init(): void {
+        // make sure state reset, otherwise may cause upload abort in React StrictMode, like https://github.com/DouyinFE/semi-design/pull/843
+        this.destroyState = false;
         const { disabled, addOnPasting } = this.getProps();
         if (addOnPasting && !disabled) {
             this.bindPastingHandler();