@douyinfe/semi-ui 2.54.0 → 2.55.0-beta.0

package/dist/umd/semi-ui.js

@@ -46281,10 +46281,6 @@ function sortable_esm_isAfter(a, b) {
 
 
 const defaultPrefix = 'semi-sortable';
-const defaultConstraint = {
-  delay: 150,
-  tolerance: 5
-};
 function DefaultContainer(props) {
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", Object.assign({
     style: {
@@ -46292,6 +46288,9 @@ function DefaultContainer(props) {
     }
   }, props));
 }
+const defaultKeyBoardOptions = {
+  coordinateGetter: sortableKeyboardCoordinates
+};
 function Sortable(_ref) {
   let {
     items,
@@ -46299,7 +46298,6 @@ function Sortable(_ref) {
     adjustScale,
     renderItem,
     transition,
-    activationConstraint = defaultConstraint,
     collisionDetection = closestCenter,
     strategy = rectSortingStrategy,
     useDragOverlay = true,
@@ -46308,13 +46306,7 @@ function Sortable(_ref) {
     prefix = defaultPrefix
   } = _ref;
   const [activeId, setActiveId] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(null);
-  const sensors = useSensors(useSensor(MouseSensor, {
-    activationConstraint
-  }), useSensor(TouchSensor, {
-    activationConstraint
-  }), useSensor(KeyboardSensor, {
-    coordinateGetter: sortableKeyboardCoordinates
-  }));
+  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, defaultKeyBoardOptions));
   const getIndex = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(id => items.indexOf(id), [items]);
   const activeIndex = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(() => activeId ? getIndex(activeId) : -1, [getIndex, activeId]);
   const onDragStart = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(_ref2 => {
@@ -46424,13 +46416,15 @@ function SortableItem(_ref4) {
     [`${prefix}-sortable-item-over`]: isOver,
     [`${prefix}-sortable-item-active`]: (active === null || active === void 0 ? void 0 : active.id) === id
   });
-  const wrapperStyle = !isNull_default()(animation) ? {
-    transform: CSS.Transform.toString(Object.assign(Object.assign({}, transform), {
-      scaleX: 1,
-      scaleY: 1
-    })),
-    transition: transition
-  } : undefined;
+  const wrapperStyle = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(() => {
+    return !isNull_default()(animation) ? {
+      transform: CSS.Transform.toString(Object.assign(Object.assign({}, transform), {
+        scaleX: 1,
+        scaleY: 1
+      })),
+      transition: transition
+    } : undefined;
+  }, [animation, transform, transition]);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", Object.assign({
     ref: setNodeRef,
     style: wrapperStyle,
@@ -65945,7 +65939,8 @@ class NavigationFoundation extends foundation {
         items: formattedItems
       };
     } else {
-      this._adapter.updateSelectedKeys(willSelectedKeys);
+      // already include parentSelectKeys, set second parameter to false
+      this._adapter.updateSelectedKeys(willSelectedKeys, false);
       this._adapter.setItemKeysMap(itemKeysMap);
       this._adapter.updateOpenKeys(willOpenKeys);
       this._adapter.updateItems(formattedItems);
@@ -65996,10 +65991,14 @@ class NavigationFoundation extends foundation {
       selectedKeys,
       mode
     } = this.getProps();
+    const {
+      openKeys: stateOpenKeys = []
+    } = this.getStates();
     let willOpenKeys = openKeys || defaultOpenKeys || [];
     if (!(Array.isArray(defaultOpenKeys) || Array.isArray(openKeys)) && mode === navigation_constants_strings.MODE_VERTICAL && (Array.isArray(defaultSelectedKeys) || Array.isArray(selectedKeys))) {
       const currentSelectedKeys = Array.isArray(selectedKeys) ? selectedKeys : defaultSelectedKeys;
-      willOpenKeys = this.getShouldOpenKeys(itemKeysMap, currentSelectedKeys);
+      willOpenKeys = stateOpenKeys.concat(this.getShouldOpenKeys(itemKeysMap, currentSelectedKeys));
+      willOpenKeys = Array.from(new Set(willOpenKeys));
     }
     return [...willOpenKeys];
   }
@@ -66020,13 +66019,10 @@ class NavigationFoundation extends foundation {
     return [...willOpenKeySet];
   }
   destroy() {}
-  selectLevelZeroParentKeys(itemKeysMap) {
+  selectLevelZeroParentKeys(itemKeysMap, itemKeys) {
     const _itemKeysMap = isNullOrUndefined(itemKeysMap) ? this.getState('itemKeysMap') : itemKeysMap;
     // console.log(itemKeysMap);
     const willAddKeys = [];
-    for (var _len2 = arguments.length, itemKeys = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      itemKeys[_key2 - 1] = arguments[_key2];
-    }
     if (itemKeys.length) {
       for (const itemKey of itemKeys) {
         if (Array.isArray(_itemKeysMap[itemKey]) && _itemKeysMap[itemKey].length) {
@@ -67192,24 +67188,19 @@ class Nav extends BaseComponent {
   componentDidMount() {
     // override BaseComponent
   }
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (prevProps.items !== this.props.items || prevProps.children !== this.props.children) {
       this.foundation.init();
     } else {
       this.foundation.handleItemsChange(false);
-      const {
-        selectedKeys
-      } = this.state;
       if (this.props.selectedKeys && !isEqual_default()(prevProps.selectedKeys, this.props.selectedKeys)) {
         this.adapter.updateSelectedKeys(this.props.selectedKeys);
+        const willOpenKeys = this.foundation.getWillOpenKeys(this.state.itemKeysMap);
+        this.adapter.updateOpenKeys(willOpenKeys);
       }
       if (this.props.openKeys && !isEqual_default()(prevProps.openKeys, this.props.openKeys)) {
         this.adapter.updateOpenKeys(this.props.openKeys);
       }
-      if (!isEqual_default()(selectedKeys, prevState.selectedKeys)) {
-        const parentSelectKeys = this.foundation.selectLevelZeroParentKeys(null, ...selectedKeys);
-        this.adapter.addSelectedKeys(...parentSelectKeys);
-      }
     }
   }
   get adapter() {
@@ -67235,9 +67226,20 @@ class Nav extends BaseComponent {
       }),
       addSelectedKeys: createAddKeysFn(this, 'selectedKeys'),
       removeSelectedKeys: createRemoveKeysFn(this, 'selectedKeys'),
-      updateSelectedKeys: selectedKeys => this.setState({
-        selectedKeys: [...selectedKeys]
-      }),
+      /**
+       * when `includeParentKeys` is `true`, select a nested nav item will select parent nav sub
+       */
+      updateSelectedKeys: function (selectedKeys) {
+        let includeParentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        let willUpdateSelectedKeys = selectedKeys;
+        if (includeParentKeys) {
+          const parentSelectKeys = _this.foundation.selectLevelZeroParentKeys(null, selectedKeys);
+          willUpdateSelectedKeys = Array.from(new Set(selectedKeys.concat(parentSelectKeys)));
+        }
+        _this.setState({
+          selectedKeys: willUpdateSelectedKeys
+        });
+      },
       updateOpenKeys: openKeys => this.setState({
         openKeys: [...openKeys]
       }),
@@ -85200,6 +85202,34 @@ class Tabs extends BaseComponent {
         current: ref
       };
     };
+    this.getPanes = () => {
+      const {
+        tabList,
+        children
+      } = this.props;
+      if (Array.isArray(tabList) && tabList.length) {
+        return tabList;
+      }
+      return external_root_React_commonjs2_react_commonjs_react_amd_react_default().Children.map(children, child => {
+        if (child) {
+          const {
+            tab,
+            icon,
+            disabled,
+            itemKey,
+            closable
+          } = child.props;
+          return {
+            tab,
+            icon,
+            disabled,
+            itemKey,
+            closable
+          };
+        }
+        return undefined;
+      });
+    };
     this.onTabClick = (activeKey, event) => {
       this.foundation.handleTabClick(activeKey, event);
     };
@@ -85238,7 +85268,7 @@ class Tabs extends BaseComponent {
     this.foundation = new tabs_foundation(this.adapter);
     this.state = {
       activeKey: this.foundation.getDefaultActiveKey(),
-      panes: [],
+      panes: this.getPanes(),
       prevActiveKey: null,
       forceDisableMotion: false
     };
@@ -85248,41 +85278,12 @@ class Tabs extends BaseComponent {
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       collectPane: () => {
-        const {
-          tabList,
-          children
-        } = this.props;
-        if (Array.isArray(tabList) && tabList.length) {
-          this.setState({
-            panes: tabList
-          });
-          return;
-        }
-        const panes = external_root_React_commonjs2_react_commonjs_react_amd_react_default().Children.map(children, child => {
-          if (child) {
-            const {
-              tab,
-              icon,
-              disabled,
-              itemKey,
-              closable
-            } = child.props;
-            return {
-              tab,
-              icon,
-              disabled,
-              itemKey,
-              closable
-            };
-          }
-          return undefined;
-        });
+        const panes = this.getPanes();
         this.setState({
           panes
         });
       },
       collectActiveKey: () => {
-        let panes = [];
         const {
           tabList,
           children,
@@ -85294,29 +85295,7 @@ class Tabs extends BaseComponent {
         const {
           activeKey
         } = this.state;
-        if (Array.isArray(tabList) && tabList.length) {
-          panes = tabList;
-        } else {
-          panes = external_root_React_commonjs2_react_commonjs_react_amd_react_default().Children.map(children, child => {
-            if (child) {
-              const {
-                tab,
-                icon,
-                disabled,
-                itemKey,
-                closable
-              } = child.props;
-              return {
-                tab,
-                icon,
-                disabled,
-                itemKey,
-                closable
-              };
-            }
-            return undefined;
-          });
-        }
+        const panes = this.getPanes();
         if (panes.findIndex(p => p.itemKey === activeKey) === -1) {
           if (panes.length > 0) {
             this.setState({