@douyinfe/semi-ui 2.47.0 → 2.48.0-alpha.0

package/lib/cjs/dropdown/dropdownItem.js

@@ -46,8 +46,9 @@ class DropdownItem extends _baseComponent.default {
       ['onClick', 'onMouseEnter', 'onMouseLeave', 'onContextMenu'].forEach(eventName => {
         if (eventName === "onClick") {
           events["onMouseDown"] = e => {
+            var _a, _b;
             if (e.button === 0) {
-              this.props[eventName](e);
+              (_b = (_a = this.props)[eventName]) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             }
           };
         } else {

package/lib/cjs/form/baseForm.js

@@ -181,7 +181,7 @@ class Form extends _baseComponent.default {
       [prefix + '-vertical']: layout === 'vertical',
       [prefix + '-horizontal']: layout === 'horizontal'
     });
-    const showldAppendRow = wrapperCol && labelCol;
+    const shouldAppendRow = wrapperCol && labelCol;
     const formContent = /*#__PURE__*/_react.default.createElement("form", Object.assign({
       style: style
     }, rest, {
@@ -197,7 +197,7 @@ class Form extends _baseComponent.default {
       value: this.formApi
     }, /*#__PURE__*/_react.default.createElement(_context.FormStateContext.Provider, {
       value: formState
-    }, showldAppendRow ? withRowForm : formContent)));
+    }, shouldAppendRow ? withRowForm : formContent)));
   }
 }
 Form.propTypes = {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { OptionProps } from './option';
 import { OptionGroupProps } from './optionGroup';
-declare const generateOption: (child: React.ReactElement, parent: any, index: number) => OptionProps;
+declare const generateOption: (child: React.ReactElement, parent: any, index: number, newKey?: string | number) => OptionProps;
 declare const getOptionsFromGroup: (selectChildren: React.ReactNode) => {
     optionGroups: OptionGroupProps[];
     options: OptionProps[];

package/lib/cjs/select/utils.js

@@ -15,7 +15,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
-const generateOption = (child, parent, index) => {
+const generateOption = (child, parent, index, newKey) => {
   const childProps = child.props;
   if (!child || !childProps) {
     return null;
@@ -33,7 +33,7 @@ const generateOption = (child, parent, index) => {
   // Props are collected from ReactNode, after React.Children.toArray
   // no need to determine whether the key exists in child
   // Even if the user does not explicitly declare it, React will always generate a key.
-  option._keyInJsx = child.key;
+  option._keyInJsx = newKey || child.key;
   return option;
 };
 exports.generateOption = generateOption;
@@ -65,10 +65,22 @@ const getOptionsFromGroup = selectChildren => {
           children
         } = _a,
         restGroupProps = __rest(_a, ["children"]);
+      let originKeys = [];
+      if (Array.isArray(children)) {
+        // if group has children > 1
+        originKeys = children.map(item => item.key);
+      } else {
+        originKeys.push(children.key);
+      }
       children = _react.default.Children.toArray(children);
-      const childrenOption = children.map(option => {
+      const childrenOption = children.map((option, index) => {
+        let newKey = option.key;
+        if (originKeys[index] === null) {
+          newKey = child.key + '' + option.key; // if option in group and didn't set key, concat parent key to avoid conflict (default generate key just like .0, .1)
+        }
+
         optionIndex++;
-        return generateOption(option, restGroupProps, optionIndex);
+        return generateOption(option, restGroupProps, optionIndex, newKey);
       });
       const group = Object.assign(Object.assign({}, child.props), {
         children: childrenOption,

package/lib/cjs/table/HeadTable.js

@@ -37,9 +37,6 @@ class HeadTable extends _react.default.PureComponent {
       bodyHasScrollBar,
       sticky
     } = this.props;
-    if (!showHeader) {
-      return null;
-    }
     const Table = (0, _get2.default)(components, 'header.outer', 'table');
     const x = (0, _get2.default)(scroll, 'x');
     const headStyle = {};
@@ -60,7 +57,8 @@ class HeadTable extends _react.default.PureComponent {
       onDidUpdate: onDidUpdate
     }));
     const headTableCls = (0, _classnames.default)(`${prefixCls}-header`, {
-      [`${prefixCls}-header-sticky`]: sticky
+      [`${prefixCls}-header-sticky`]: sticky,
+      [`${prefixCls}-header-hidden`]: !showHeader
     });
     const stickyTop = (0, _get2.default)(sticky, 'top', 0);
     if (typeof stickyTop === 'number') {

package/lib/cjs/treeSelect/index.d.ts

@@ -190,7 +190,6 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     triggerRef: React.RefObject<HTMLDivElement>;
     optionsRef: React.RefObject<any>;
     clickOutsideHandler: any;
-    _flattenNodes: TreeState['flattenNodes'];
     onNodeClick: any;
     onNodeDoubleClick: any;
     onMotionEnd: any;
@@ -247,6 +246,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     };
     getTreeNodeKey: (treeNode: TreeNodeData) => string;
     handlePopoverClose: (isVisible: any) => void;
+    afterClose: () => void;
     renderTreeNode: (treeNode: FlattenNode, ind: number, style: React.CSSProperties) => JSX.Element;
     itemKey: (index: number, data: Record<string, any>) => any;
     renderNodeList: () => JSX.Element;

package/lib/cjs/treeSelect/index.js

@@ -689,13 +689,27 @@ class TreeSelect extends _baseComponent.default {
         searchAutoFocus,
         searchPosition
       } = this.props;
-      if (isVisible === false && Boolean(filterTreeNode)) {
-        this.foundation.clearInput();
+      // 将 inputValue 清空，如果有选中值的话，选中项能够快速回显
+      // Clear the inputValue. If there is a selected value, the selected item can be quickly echoed.
+      if (isVisible === false && filterTreeNode) {
+        this.foundation.clearInputValue();
       }
       if (filterTreeNode && searchPosition === _constants.strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
         this.foundation.focusInput(true);
       }
     };
+    this.afterClose = () => {
+      // flattenNode 的变化将导致弹出层面板中的选项数目变化
+      // 在弹层完全收起之后，再通过 clearInput 重新计算 state 中的 expandedKey， flattenNode
+      // 防止在弹出层未收起时弹层面板中选项数目变化导致视觉上出现弹层闪动问题
+      // Changes to flattenNode will cause the number of options in the popup panel to change
+      // After the pop-up layer is completely closed, recalculate the expandedKey and flattenNode in the state through clearInput.
+      // Prevent the pop-up layer from flickering visually due to changes in the number of options in the pop-up panel when the pop-up layer is not collapsed.
+      const {
+        filterTreeNode
+      } = this.props;
+      filterTreeNode && this.foundation.clearInput();
+    };
     this.renderTreeNode = (treeNode, ind, style) => {
       const {
         data,
@@ -728,6 +742,7 @@ class TreeSelect extends _baseComponent.default {
     this.renderNodeList = () => {
       const {
         flattenNodes,
+        cachedFlattenNodes,
         motionKeys,
         motionType,
         filteredKeys
@@ -743,7 +758,7 @@ class TreeSelect extends _baseComponent.default {
       if (!virtualize || (0, _isEmpty2.default)(virtualize)) {
         return /*#__PURE__*/_react.default.createElement(_nodeList.default, {
           flattenNodes: flattenNodes,
-          flattenList: this._flattenNodes,
+          flattenList: cachedFlattenNodes,
           motionKeys: motionExpand ? motionKeys : new Set([]),
           motionType: motionType,
           // When motionKeys is empty, but filteredKeys is not empty (that is, the search hits), this situation should be distinguished from ordinary motionKeys
@@ -862,6 +877,7 @@ class TreeSelect extends _baseComponent.default {
       keyEntities: {},
       treeData: [],
       flattenNodes: [],
+      cachedFlattenNodes: undefined,
       selectedKeys: [],
       checkedKeys: new Set(),
       halfCheckedKeys: new Set(),
@@ -891,6 +907,7 @@ class TreeSelect extends _baseComponent.default {
     };
   }
   static getDerivedStateFromProps(props, prevState) {
+    var _a;
     const {
       prevProps,
       rePosKey
@@ -908,6 +925,8 @@ class TreeSelect extends _baseComponent.default {
     };
     const needUpdateTreeData = needUpdate('treeData');
     const needUpdateExpandedKeys = needUpdate('expandedKeys');
+    const isExpandControlled = ('expandedKeys' in props);
+    const isSearching = Boolean(props.filterTreeNode && prevState.inputValue && prevState.inputValue.length);
     // TreeNode
     if (needUpdateTreeData) {
       treeData = props.treeData;
@@ -926,31 +945,97 @@ class TreeSelect extends _baseComponent.default {
       }
     }
     const expandAllWhenDataChange = needUpdateTreeData && props.expandAll;
-    // expandedKeys
-    if (needUpdateExpandedKeys || prevProps && needUpdate('autoExpandParent')) {
-      newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
-      // only show animation when treeData does not change
-      if (prevProps && props.motion && !treeData) {
-        const {
-          motionKeys,
-          motionType
-        } = (0, _treeUtil.calcMotionKeys)(prevState.expandedKeys, newState.expandedKeys, keyEntities);
-        newState.motionKeys = new Set(motionKeys);
-        newState.motionType = motionType;
+    if (!isSearching) {
+      // expandedKeys
+      if (needUpdateExpandedKeys || prevProps && needUpdate('autoExpandParent')) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
+        // only show animation when treeData does not change
+        if (prevProps && props.motion && !treeData) {
+          const {
+            motionKeys,
+            motionType
+          } = (0, _treeUtil.calcMotionKeys)(prevState.expandedKeys, newState.expandedKeys, keyEntities);
+          newState.motionKeys = new Set(motionKeys);
+          newState.motionType = motionType;
+          if (motionType === 'hide') {
+            // cache flatten nodes: expandedKeys changed may not be triggered by interaction
+            newState.cachedFlattenNodes = (0, _treeUtil2.cloneDeep)(prevState.flattenNodes);
+          }
+        }
+      } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
+        newState.expandedKeys = new Set(Object.keys(keyEntities));
+      } else if (!prevProps && props.defaultExpandedKeys) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.defaultExpandedKeys, keyEntities);
+      } else if (!prevProps && props.defaultValue) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
+      } else if (!prevProps && props.value) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
+      } else if (!isExpandControlled && needUpdateTreeData && props.value) {
+        // 当 treeData 已经设置具体的值，并且设置了 props.loadData ，则认为 treeData 的更新是因为 loadData 导致的
+        // 如果是因为 loadData 导致 treeData改变， 此时在这里重新计算 key 会导致为未选中的展开项目被收起
+        // 所以此时不需要重新计算 expandedKeys，因为在点击展开按钮时候已经把被展开的项添加到 expandedKeys 中
+        // When treeData has a specific value and props.loadData is set, it is considered that the update of treeData is caused by loadData
+        // If the treeData is changed because of loadData, recalculating the key here will cause the unselected expanded items to be collapsed
+        // So there is no need to recalculate expandedKeys at this time, because the expanded item has been added to expandedKeys when the expand button is clicked
+        if (!(prevState.treeData && ((_a = prevState.treeData) === null || _a === void 0 ? void 0 : _a.length) > 0 && props.loadData)) {
+          newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.value, keyEntities, props.multiple, valueEntities);
+        }
+      }
+      if (!newState.expandedKeys) {
+        delete newState.expandedKeys;
+      }
+      if (treeData || newState.expandedKeys) {
+        const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, keyMaps);
+        newState.flattenNodes = flattenNodes;
+      }
+    } else {
+      let filteredState;
+      // treeData changed while searching
+      if (treeData) {
+        // Get filter data
+        filteredState = (0, _treeUtil.filterTreeData)({
+          treeData,
+          inputValue: prevState.inputValue,
+          filterTreeNode: props.filterTreeNode,
+          filterProps: props.treeNodeFilterProp,
+          showFilteredOnly: props.showFilteredOnly,
+          keyEntities: newState.keyEntities,
+          prevExpandedKeys: [...prevState.filteredExpandedKeys],
+          keyMaps: keyMaps
+        });
+        newState.flattenNodes = filteredState.flattenNodes;
+        newState.motionKeys = new Set([]);
+        newState.filteredKeys = filteredState.filteredKeys;
+        newState.filteredShownKeys = filteredState.filteredShownKeys;
+        newState.filteredExpandedKeys = filteredState.filteredExpandedKeys;
+      }
+      // expandedKeys changed while searching
+      if (props.expandedKeys) {
+        newState.filteredExpandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
+        if (prevProps && props.motion) {
+          const prevKeys = prevState ? prevState.filteredExpandedKeys : new Set([]);
+          // only show animation when treeData does not change
+          if (!treeData) {
+            const motionResult = (0, _treeUtil.calcMotionKeys)(prevKeys, newState.filteredExpandedKeys, keyEntities);
+            let {
+              motionKeys
+            } = motionResult;
+            const {
+              motionType
+            } = motionResult;
+            if (props.showFilteredOnly) {
+              motionKeys = motionKeys.filter(key => prevState.filteredShownKeys.has(key));
+            }
+            if (motionType === 'hide') {
+              // cache flatten nodes: expandedKeys changed may not be triggered by interaction
+              newState.cachedFlattenNodes = (0, _treeUtil2.cloneDeep)(prevState.flattenNodes);
+            }
+            newState.motionKeys = new Set(motionKeys);
+            newState.motionType = motionType;
+          }
+        }
+        newState.flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.filteredExpandedKeys || prevState.filteredExpandedKeys, keyMaps, props.showFilteredOnly && prevState.filteredShownKeys);
       }
-    } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
-      newState.expandedKeys = new Set(Object.keys(keyEntities));
-    } else if (!prevProps && props.defaultExpandedKeys) {
-      newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.defaultExpandedKeys, keyEntities);
-    } else if (!prevProps && props.defaultValue) {
-      newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
-    } else if (!prevProps && props.value) {
-      newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
-    }
-    // flattenNodes
-    if (treeData || needUpdateExpandedKeys) {
-      const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, keyMaps);
-      newState.flattenNodes = flattenNodes;
     }
     // selectedKeys: single mode controlled
     const isMultiple = props.multiple;
@@ -1057,7 +1142,9 @@ class TreeSelect extends _baseComponent.default {
         this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
-        this._flattenNodes = bool ? (0, _treeUtil2.cloneDeep)(this.state.flattenNodes) : null;
+        this.setState({
+          cachedFlattenNodes: bool ? (0, _treeUtil2.cloneDeep)(this.state.flattenNodes) : undefined
+        });
       },
       notifyLoad: (newLoadedKeys, data) => {
         const {
@@ -1202,7 +1289,8 @@ class TreeSelect extends _baseComponent.default {
       autoAdjustOverflow: autoAdjustOverflow,
       mouseLeaveDelay: mouseLeaveDelay,
       mouseEnterDelay: mouseEnterDelay,
-      onVisibleChange: this.handlePopoverClose
+      onVisibleChange: this.handlePopoverClose,
+      afterClose: this.afterClose
     }, selection);
   }
 }

package/lib/es/dropdown/dropdownItem.js

@@ -39,8 +39,9 @@ class DropdownItem extends BaseComponent {
       ['onClick', 'onMouseEnter', 'onMouseLeave', 'onContextMenu'].forEach(eventName => {
         if (eventName === "onClick") {
           events["onMouseDown"] = e => {
+            var _a, _b;
             if (e.button === 0) {
-              this.props[eventName](e);
+              (_b = (_a = this.props)[eventName]) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             }
           };
         } else {

package/lib/es/form/baseForm.js

@@ -174,7 +174,7 @@ class Form extends BaseComponent {
       [prefix + '-vertical']: layout === 'vertical',
       [prefix + '-horizontal']: layout === 'horizontal'
     });
-    const showldAppendRow = wrapperCol && labelCol;
+    const shouldAppendRow = wrapperCol && labelCol;
     const formContent = /*#__PURE__*/React.createElement("form", Object.assign({
       style: style
     }, rest, {
@@ -190,7 +190,7 @@ class Form extends BaseComponent {
       value: this.formApi
     }, /*#__PURE__*/React.createElement(FormStateContext.Provider, {
       value: formState
-    }, showldAppendRow ? withRowForm : formContent)));
+    }, shouldAppendRow ? withRowForm : formContent)));
   }
 }
 Form.propTypes = {

package/lib/es/select/utils.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { OptionProps } from './option';
 import { OptionGroupProps } from './optionGroup';
-declare const generateOption: (child: React.ReactElement, parent: any, index: number) => OptionProps;
+declare const generateOption: (child: React.ReactElement, parent: any, index: number, newKey?: string | number) => OptionProps;
 declare const getOptionsFromGroup: (selectChildren: React.ReactNode) => {
     optionGroups: OptionGroupProps[];
     options: OptionProps[];

package/lib/es/select/utils.js

@@ -8,7 +8,7 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import React from 'react';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
-const generateOption = (child, parent, index) => {
+const generateOption = (child, parent, index, newKey) => {
   const childProps = child.props;
   if (!child || !childProps) {
     return null;
@@ -26,7 +26,7 @@ const generateOption = (child, parent, index) => {
   // Props are collected from ReactNode, after React.Children.toArray
   // no need to determine whether the key exists in child
   // Even if the user does not explicitly declare it, React will always generate a key.
-  option._keyInJsx = child.key;
+  option._keyInJsx = newKey || child.key;
   return option;
 };
 const getOptionsFromGroup = selectChildren => {
@@ -57,10 +57,22 @@ const getOptionsFromGroup = selectChildren => {
           children
         } = _a,
         restGroupProps = __rest(_a, ["children"]);
+      let originKeys = [];
+      if (Array.isArray(children)) {
+        // if group has children > 1
+        originKeys = children.map(item => item.key);
+      } else {
+        originKeys.push(children.key);
+      }
       children = React.Children.toArray(children);
-      const childrenOption = children.map(option => {
+      const childrenOption = children.map((option, index) => {
+        let newKey = option.key;
+        if (originKeys[index] === null) {
+          newKey = child.key + '' + option.key; // if option in group and didn't set key, concat parent key to avoid conflict (default generate key just like .0, .1)
+        }
+
         optionIndex++;
-        return generateOption(option, restGroupProps, optionIndex);
+        return generateOption(option, restGroupProps, optionIndex, newKey);
       });
       const group = Object.assign(Object.assign({}, child.props), {
         children: childrenOption,

package/lib/es/table/HeadTable.js

@@ -30,9 +30,6 @@ class HeadTable extends React.PureComponent {
       bodyHasScrollBar,
       sticky
     } = this.props;
-    if (!showHeader) {
-      return null;
-    }
     const Table = _get(components, 'header.outer', 'table');
     const x = _get(scroll, 'x');
     const headStyle = {};
@@ -53,7 +50,8 @@ class HeadTable extends React.PureComponent {
       onDidUpdate: onDidUpdate
     }));
     const headTableCls = classnames(`${prefixCls}-header`, {
-      [`${prefixCls}-header-sticky`]: sticky
+      [`${prefixCls}-header-sticky`]: sticky,
+      [`${prefixCls}-header-hidden`]: !showHeader
     });
     const stickyTop = _get(sticky, 'top', 0);
     if (typeof stickyTop === 'number') {

package/lib/es/treeSelect/index.d.ts

@@ -190,7 +190,6 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     triggerRef: React.RefObject<HTMLDivElement>;
     optionsRef: React.RefObject<any>;
     clickOutsideHandler: any;
-    _flattenNodes: TreeState['flattenNodes'];
     onNodeClick: any;
     onNodeDoubleClick: any;
     onMotionEnd: any;
@@ -247,6 +246,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     };
     getTreeNodeKey: (treeNode: TreeNodeData) => string;
     handlePopoverClose: (isVisible: any) => void;
+    afterClose: () => void;
     renderTreeNode: (treeNode: FlattenNode, ind: number, style: React.CSSProperties) => JSX.Element;
     itemKey: (index: number, data: Record<string, any>) => any;
     renderNodeList: () => JSX.Element;