chore: merge main

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.10.1"
+    "version": "2.10.2-alpha.1"
 }

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.10.1",
+  "version": "2.10.2-alpha.0",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",

packages/semi-animation-react/src/Animation.tsx

@@ -86,6 +86,12 @@ export default class Animation extends PureComponent<AnimationProps> {
 
         const { forwardInstance } = this.props;
 
+        if (this.animation === null) {
+            // didmount/willUnmount may be called twice when React.StrictMode is true in React 18, we need to ensure that this.animation is correct
+            this.initAnimation();
+            this.bindEvents();
+        }
+
         if (typeof forwardInstance === 'function') {
             forwardInstance(this.animation);
         }

packages/semi-foundation/upload/foundation.ts

@@ -773,6 +773,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         if (!disabled) {
             if (directory) {
                 this.handleDirectoryDrop(e);
+                return;
             }
             const files: File[] = Array.from(e.dataTransfer.files);
             this.handleChange(files);

packages/semi-ui/checkbox/checkbox.tsx

@@ -181,6 +181,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             const { isCardType, isPureCardType } = this.context.checkboxGroup;
             props.isCardType = isCardType;
             props.isPureCardType = isPureCardType;
+            props['name'] = this.context.checkboxGroup.name;
         }
 
         const prefix = prefixCls || css.PREFIX;
@@ -202,8 +203,6 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children,
         });
 
-        const name = inGroup && this.context.checkboxGroup.name;
-
         const renderContent = () => (
             <>
                 {children ? <span id={addonId} className={`${prefix}-addon`}>{children}</span> : null}
@@ -228,9 +227,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                 <CheckboxInner
                     {...this.props}
                     {...props}
-                    addonId={children && addonId}
-                    extraId={extra && extraId}
-                    name={name}
+                    addonId={children && this.addonId}
+                    extraId={extra && this.extraId}
                     isPureCardType={props.isPureCardType}
                     ref={ref => {
                         this.checkboxEntity = ref;

packages/semi-ui/checkbox/checkboxInner.tsx

@@ -81,26 +81,31 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
             <IconCheckboxIndeterminate />
         ) : null;
 
+        const inputProps: React.InputHTMLAttributes<HTMLInputElement>  = {
+            type: "checkbox",
+            'aria-label': this.props['aria-label'],
+            'aria-disabled': disabled,
+            'aria-checked': checked,
+            'aria-labelledby': addonId,
+            'aria-describedby':extraId || this.props['aria-describedby'],
+            'aria-invalid': this.props['aria-invalid'],
+            'aria-errormessage': this.props['aria-errormessage'],
+            'aria-required': this.props['aria-required'],
+            className: css.INPUT,
+            onChange: noop,
+            checked: checked,
+            disabled: disabled,
+        };
+        
+        name && (inputProps['name'] = name);
+
         return (
             <span className={wrapper}>
                 <input
-                    type="checkbox"
-                    aria-label={this.props['aria-label']}
-                    aria-disabled={disabled}
-                    aria-checked={checked}
-                    aria-labelledby={addonId}
-                    aria-describedby={extraId || this.props['aria-describedby']}
-                    aria-invalid={this.props['aria-invalid']}
-                    aria-errormessage={this.props['aria-errormessage']}
-                    aria-required={this.props['aria-required']}
+                    {...inputProps}
                     ref={ref => {
                         this.inputEntity = ref;
                     }}
-                    className={css.INPUT}
-                    onChange={noop}
-                    checked={checked}
-                    disabled={disabled}
-                    name={name}
                 />
                 <span className={inner}>{icon}</span>
             </span>

packages/semi-ui/form/baseForm.tsx

@@ -151,7 +151,6 @@ class Form extends BaseComponent<BaseFormProps, BaseFormState> {
 
     componentWillUnmount() {
         this.foundation.destroy();
-        this.foundation = null;
         this.formApi = null;
     }
 

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.10.1",
+    "version": "2.10.2-alpha.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,7 +15,7 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.10.1",
-        "@douyinfe/semi-animation-react": "2.10.1",
+        "@douyinfe/semi-animation-react": "2.10.2-alpha.0",
         "@douyinfe/semi-foundation": "2.10.1",
         "@douyinfe/semi-icons": "2.10.1",
         "@douyinfe/semi-illustrations": "2.10.1",

packages/semi-ui/scrollList/_story/ScrollList/index.js

@@ -11,7 +11,7 @@ class ScrollListDemo extends React.Component {
         };
 
         this.list = new Array(20).fill(0).map((itm, index) => {
-            return { value: index, disabled: Math.random() + 0.2 > 1 };
+            return { value: index };
         });
     }
 

packages/semi-ui/table/Body/BaseRow.tsx

@@ -153,6 +153,21 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         this.foundation = new TableRowFoundation(this.adapter);
     }
 
+    componentDidMount() {
+        // fix #745
+        // didmount/willUnmount may be called twice when React.StrictMode is true in React 18, we need to ensure that this.cache.customRowProps is correct
+        const {
+            onRow,
+            index,
+            record,
+        } = this.props;
+        const customRowProps = this.adapter.getCache('customRowProps');
+        if (typeof customRowProps === 'undefined') {
+            const { className: customClassName, style: customStyle, ...rowProps } = onRow(record, index) || {};
+            this.adapter.setCache('customRowProps', { ...rowProps });
+        }
+    }
+
     shouldComponentUpdate(nextProps: BaseRowProps) {
         /**
           * Shallow comparison of incoming props to simulate PureComponent

packages/semi-ui/upload/_story/upload.stories.js

@@ -581,6 +581,7 @@ export const Draggable = () => (
     <Upload
       {...commonProps}
       style={{ marginTop: 10, height: 300 }}
+      // directory 
       draggable={true}
       dragMainText={'点击上传文件或拖拽文件到这里'}
     ></Upload>