@douyinfe/semi-ui 2.17.0-beta.0 → 2.17.1

package/autoComplete/index.tsx

@@ -361,6 +361,8 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
             ref: this.triggerRef,
             id,
             ...keyboardEventSet,
+            // tooltip give tabindex 0 to children by default, autoComplete just need the input get focus, so outer div's tabindex set to -1
+            tabIndex: -1
         };
 
         const innerProps = {

package/cascader/_story/cascader.stories.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import CustomTrigger from './CustomTrigger';
 import { Button, Typography, Toast, Cascader } from '../../index';
 
@@ -262,6 +262,96 @@ const treedataWithNodeLabel = [
     }
 ];
 
+export const issue703 = () => {
+    const initialData = [
+        {
+            label: 'Node1',
+            value: '0-0',
+        },
+        {
+            label: 'Node2',
+            value: '0-1',
+        },
+        {
+            label: 'Node3',
+            value: '0-2',
+            isLeaf: true
+        },
+    ];
+    const [data, setData] = useState(initialData);
+    
+    const updateTreeData = (list, value, children) => {
+        return list.map(node => {
+            if (node.value === value) {
+                return { ...node, children };
+            }
+            if (node.children) {
+                return { ...node, children: updateTreeData(node.children, value, children) };
+            }
+            return node;
+        });
+    };
+
+    const onLoadData = selectedOpt => {
+        const targetOpt = selectedOpt[selectedOpt.length - 1];
+        const { label, value } = targetOpt;
+        return new Promise(resolve => {
+            if (targetOpt.children) {
+                resolve();
+                return;
+            }
+
+            setTimeout(() => {
+                setData(origin =>
+                    updateTreeData(origin, value, [
+                        {
+                            label: `${label}-1`,
+                            value: `${label}-1`,
+                            isLeaf: selectedOpt.length > 1
+                        },
+                        {
+                            label: `${label}-2`,
+                            value: `${label}-2`,
+                            isLeaf: selectedOpt.length > 1
+                        },
+                    ]),
+                );
+                resolve();
+            }, 1000);
+        });
+    };
+
+    const [v,setV]=useState([['0-0'], ['0-1', 'Node2-2']]);
+    useEffect(()=>{
+      console.log('data change');
+        setTimeout(()=>setV([['0-0'], ['0-1', 'Node2-2', 'Node2-2-2']]),0);
+    },[data]) 
+
+    return (
+      <>
+        <div>treeData和value动态更新，value中的值在treeData中存在则能够正确显示</div>
+        <Cascader
+            multiple
+            onChange={(a)=>console.log(a)}
+            value={v}
+            style={{ width: 300 }}
+            treeData={data}
+            loadData={onLoadData} 
+            placeholder="Please select"
+        />
+        <div>非受控，动态更新treeData</div>
+        <Cascader
+            multiple
+            onChange={(a)=>console.log(a)}
+            style={{ width: 300 }}
+            treeData={data}
+            loadData={onLoadData} 
+            placeholder="Please select"
+        />
+      </>
+    );
+};
+
 export const _Cascader = () => {
   return (
     <div>

package/cascader/index.tsx

@@ -394,6 +394,34 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             const treeDataHasChange = prevProps && prevProps.treeData !== props.treeData;
             return firstInProps || treeDataHasChange;
         };
+        const getRealKeys = (realValue: Value, keyEntities: Entities) => {
+            // normallizedValue is used to save the value in two-dimensional array format
+            let normallizedValue: SimpleValueType[][] = [];
+            if (Array.isArray(realValue)) {
+                normallizedValue = Array.isArray(realValue[0])
+                    ? (realValue as SimpleValueType[][])
+                    : ([realValue] as SimpleValueType[][]);
+            } else {
+                if (realValue !==  undefined) {
+                    normallizedValue = [[realValue]];
+                }
+            }
+            // formatValuePath is used to save value of valuePath
+            const formatValuePath: (string | number)[][] = [];
+            normallizedValue.forEach((valueItem: SimpleValueType[]) => {
+                const formatItem: (string | number)[] = onChangeWithObject ?
+                    (valueItem as CascaderData[]).map(i => i?.value) :
+                    valueItem as (string | number)[];
+                formatValuePath.push(formatItem);
+            });
+            // formatKeys is used to save key of value
+            const formatKeys: any[] = [];
+            formatValuePath.forEach(v => {
+                const formatKeyItem = findKeysForValues(v, keyEntities);
+                !isEmpty(formatKeyItem) && formatKeys.push(formatKeyItem);
+            });
+            return formatKeys;
+        };
         const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
         const needUpdateValue = needUpdate('value') || (isEmpty(prevProps) && defaultValue);
         if (multiple) {
@@ -408,34 +436,15 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 let realKeys: Array<string> | Set<string> = prevState.checkedKeys;
                 // when data was updated
                 if (needUpdateValue) {
-                    // normallizedValue is used to save the value in two-dimensional array format
-                    let normallizedValue: SimpleValueType[][] = [];
                     const realValue = needUpdate('value') ? value : defaultValue;
-                    // eslint-disable-next-line max-depth
-                    if (Array.isArray(realValue)) {
-                        normallizedValue = Array.isArray(realValue[0])
-                            ? (realValue as SimpleValueType[][])
-                            : ([realValue] as SimpleValueType[][]);
-                    } else {
-                        if (realValue !==  undefined) {
-                            normallizedValue = [[realValue]];
-                        }
+                    realKeys = getRealKeys(realValue, keyEntities);
+                } else {
+                    // needUpdateValue is false
+                    // if treeData is updated & Cascader is controlled, realKeys should be recalculated
+                    if (needUpdateTreeData && 'value' in props) {
+                        const realValue = value;
+                        realKeys = getRealKeys(realValue, keyEntities);
                     }
-                    // formatValuePath is used to save value of valuePath
-                    const formatValuePath: (string | number)[][] = [];
-                    normallizedValue.forEach((valueItem: SimpleValueType[]) => {
-                        const formatItem: (string | number)[] = onChangeWithObject ?
-                            (valueItem as CascaderData[]).map(i => i?.value) :
-                            valueItem as (string | number)[];
-                        formatValuePath.push(formatItem);
-                    });
-                    // formatKeys is used to save key of value
-                    const formatKeys: any[] = [];
-                    formatValuePath.forEach(v => {
-                        const formatKeyItem = findKeysForValues(v, keyEntities);
-                        !isEmpty(formatKeyItem) && formatKeys.push(formatKeyItem);
-                    });
-                    realKeys = formatKeys;
                 }
                 if (isSet(realKeys)) {
                     realKeys = [...realKeys];

package/checkbox/checkbox.tsx

@@ -139,7 +139,10 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     }
 
     isInGroup() {
-        return Boolean(this.context && this.context.checkboxGroup);
+        // Why do we need to determine whether there is a value in props?
+        // If there is no value in the props of the checkbox in the context of the checkboxGroup, 
+        // it will be considered not to belong to the checkboxGroup。
+        return Boolean(this.context && this.context.checkboxGroup && ('value' in this.props));
     }
 
     focus() {

package/dist/css/semi.css

@@ -519,7 +519,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-portal-inner {
   position: absolute;
   background-color: transparent;
-  min-width: fit-content;
+  min-width: max-content;
 }
 
 .semi-anchor {