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

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

@@ -36,6 +36,6 @@ interface SortableItemProps {
     prefix?: string;
     transition?: SortableTransition | null;
 }
-export declare function Sortable({ items, onSortEnd, adjustScale, renderItem, transition, activationConstraint, collisionDetection, strategy, useDragOverlay, dragOverlayCls, container: Container, prefix, }: SortableProps): JSX.Element;
+export declare function Sortable({ items, onSortEnd, adjustScale, renderItem, transition, collisionDetection, strategy, useDragOverlay, dragOverlayCls, container: Container, prefix, }: SortableProps): JSX.Element;
 export declare function SortableItem({ animateLayoutChanges, id, renderItem, prefix, transition: animation, }: SortableItemProps): JSX.Element;
 export {};

package/lib/cjs/_sortable/index.js

@@ -16,10 +16,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const defaultPrefix = 'semi-sortable';
-const defaultConstraint = {
-  delay: 150,
-  tolerance: 5
-};
 function DefaultContainer(props) {
   return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     style: {
@@ -27,6 +23,9 @@ function DefaultContainer(props) {
     }
   }, props));
 }
+const defaultKeyBoardOptions = {
+  coordinateGetter: _sortable.sortableKeyboardCoordinates
+};
 function Sortable(_ref) {
   let {
     items,
@@ -34,7 +33,6 @@ function Sortable(_ref) {
     adjustScale,
     renderItem,
     transition,
-    activationConstraint = defaultConstraint,
     collisionDetection = _core.closestCenter,
     strategy = _sortable.rectSortingStrategy,
     useDragOverlay = true,
@@ -43,13 +41,7 @@ function Sortable(_ref) {
     prefix = defaultPrefix
   } = _ref;
   const [activeId, setActiveId] = (0, _react.useState)(null);
-  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {
-    activationConstraint
-  }), (0, _core.useSensor)(_core.TouchSensor, {
-    activationConstraint
-  }), (0, _core.useSensor)(_core.KeyboardSensor, {
-    coordinateGetter: _sortable.sortableKeyboardCoordinates
-  }));
+  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor), (0, _core.useSensor)(_core.TouchSensor), (0, _core.useSensor)(_core.KeyboardSensor, defaultKeyBoardOptions));
   const getIndex = (0, _react.useCallback)(id => items.indexOf(id), [items]);
   const activeIndex = (0, _react.useMemo)(() => activeId ? getIndex(activeId) : -1, [getIndex, activeId]);
   const onDragStart = (0, _react.useCallback)(_ref2 => {
@@ -159,13 +151,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 = !(0, _isNull2.default)(animation) ? {
-    transform: _utilities.CSS.Transform.toString(Object.assign(Object.assign({}, transform), {
-      scaleX: 1,
-      scaleY: 1
-    })),
-    transition: transition
-  } : undefined;
+  const wrapperStyle = (0, _react.useMemo)(() => {
+    return !(0, _isNull2.default)(animation) ? {
+      transform: _utilities.CSS.Transform.toString(Object.assign(Object.assign({}, transform), {
+        scaleX: 1,
+        scaleY: 1
+      })),
+      transition: transition
+    } : undefined;
+  }, [animation, transform, transition]);
   return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     ref: setNodeRef,
     style: wrapperStyle,

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

@@ -1,7 +1,7 @@
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React, { ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { NavigationAdapter } from '@douyinfe/semi-foundation/lib/cjs/navigation/foundation';
+import NavigationFoundation, { NavigationAdapter } from '@douyinfe/semi-foundation/lib/cjs/navigation/foundation';
 import SubNav, { SubNavProps } from './SubNav';
 import Item, { NavItemProps } from './Item';
 import Footer, { NavFooterProps } from './Footer';
@@ -122,10 +122,11 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
     static __SemiComponentName__: string;
     static defaultProps: any;
     itemsChanged: boolean;
+    foundation: NavigationFoundation;
     constructor(props: NavProps);
     static getDerivedStateFromProps(props: NavProps, state: NavState): Partial<NavState>;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: NavProps, prevState: NavState): void;
+    componentDidUpdate(prevProps: NavProps): void;
     get adapter(): NavigationAdapter<NavProps, NavState>;
     /**
      * Render navigation items recursively

package/lib/cjs/navigation/index.js

@@ -97,24 +97,19 @@ class Nav extends _baseComponent.default {
   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 && !(0, _isEqual2.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 && !(0, _isEqual2.default)(prevProps.openKeys, this.props.openKeys)) {
         this.adapter.updateOpenKeys(this.props.openKeys);
       }
-      if (!(0, _isEqual2.default)(selectedKeys, prevState.selectedKeys)) {
-        const parentSelectKeys = this.foundation.selectLevelZeroParentKeys(null, ...selectedKeys);
-        this.adapter.addSelectedKeys(...parentSelectKeys);
-      }
     }
   }
   get adapter() {
@@ -140,9 +135,20 @@ class Nav extends _baseComponent.default {
       }),
       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]
       }),

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

@@ -48,6 +48,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
     static getDerivedStateFromProps(props: TabsProps, state: TabsState): Partial<TabsState>;
     componentDidUpdate(prevProps: TabsProps, prevState: TabsState): void;
     setContentRef: RefCallback<HTMLDivElement>;
+    getPanes: () => PlainTab[];
     onTabClick: (activeKey: string, event: MouseEvent<HTMLDivElement>) => void;
     rePosChildren: (children: ReactElement[], activeKey: string) => ReactElement[];
     getActiveItem: () => ReactNode | ReactNode[];

package/lib/cjs/tabs/index.js

@@ -52,6 +52,34 @@ class Tabs extends _baseComponent.default {
         current: ref
       };
     };
+    this.getPanes = () => {
+      const {
+        tabList,
+        children
+      } = this.props;
+      if (Array.isArray(tabList) && tabList.length) {
+        return tabList;
+      }
+      return _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);
     };
@@ -90,7 +118,7 @@ class Tabs extends _baseComponent.default {
     this.foundation = new _foundation.default(this.adapter);
     this.state = {
       activeKey: this.foundation.getDefaultActiveKey(),
-      panes: [],
+      panes: this.getPanes(),
       prevActiveKey: null,
       forceDisableMotion: false
     };
@@ -100,41 +128,12 @@ class Tabs extends _baseComponent.default {
   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 = _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,
@@ -146,29 +145,7 @@ class Tabs extends _baseComponent.default {
         const {
           activeKey
         } = this.state;
-        if (Array.isArray(tabList) && tabList.length) {
-          panes = tabList;
-        } else {
-          panes = _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({

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

@@ -36,6 +36,6 @@ interface SortableItemProps {
     prefix?: string;
     transition?: SortableTransition | null;
 }
-export declare function Sortable({ items, onSortEnd, adjustScale, renderItem, transition, activationConstraint, collisionDetection, strategy, useDragOverlay, dragOverlayCls, container: Container, prefix, }: SortableProps): JSX.Element;
+export declare function Sortable({ items, onSortEnd, adjustScale, renderItem, transition, collisionDetection, strategy, useDragOverlay, dragOverlayCls, container: Container, prefix, }: SortableProps): JSX.Element;
 export declare function SortableItem({ animateLayoutChanges, id, renderItem, prefix, transition: animation, }: SortableItemProps): JSX.Element;
 export {};

package/lib/es/_sortable/index.js

@@ -6,10 +6,6 @@ import cls from 'classnames';
 import { closestCenter, DragOverlay, DndContext, MouseSensor, TouchSensor, useSensor, useSensors, KeyboardSensor, TraversalOrder } from '@dnd-kit/core';
 import { useSortable, SortableContext, rectSortingStrategy, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 const defaultPrefix = 'semi-sortable';
-const defaultConstraint = {
-  delay: 150,
-  tolerance: 5
-};
 function DefaultContainer(props) {
   return /*#__PURE__*/React.createElement("div", Object.assign({
     style: {
@@ -17,6 +13,9 @@ function DefaultContainer(props) {
     }
   }, props));
 }
+const defaultKeyBoardOptions = {
+  coordinateGetter: sortableKeyboardCoordinates
+};
 export function Sortable(_ref) {
   let {
     items,
@@ -24,7 +23,6 @@ export function Sortable(_ref) {
     adjustScale,
     renderItem,
     transition,
-    activationConstraint = defaultConstraint,
     collisionDetection = closestCenter,
     strategy = rectSortingStrategy,
     useDragOverlay = true,
@@ -33,13 +31,7 @@ export function Sortable(_ref) {
     prefix = defaultPrefix
   } = _ref;
   const [activeId, setActiveId] = 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 = useCallback(id => items.indexOf(id), [items]);
   const activeIndex = useMemo(() => activeId ? getIndex(activeId) : -1, [getIndex, activeId]);
   const onDragStart = useCallback(_ref2 => {
@@ -149,13 +141,15 @@ export 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(animation) ? {
-    transform: cssDndKit.Transform.toString(Object.assign(Object.assign({}, transform), {
-      scaleX: 1,
-      scaleY: 1
-    })),
-    transition: transition
-  } : undefined;
+  const wrapperStyle = useMemo(() => {
+    return !_isNull(animation) ? {
+      transform: cssDndKit.Transform.toString(Object.assign(Object.assign({}, transform), {
+        scaleX: 1,
+        scaleY: 1
+      })),
+      transition: transition
+    } : undefined;
+  }, [animation, transform, transition]);
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: setNodeRef,
     style: wrapperStyle,

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

@@ -1,7 +1,7 @@
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React, { ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { NavigationAdapter } from '@douyinfe/semi-foundation/lib/es/navigation/foundation';
+import NavigationFoundation, { NavigationAdapter } from '@douyinfe/semi-foundation/lib/es/navigation/foundation';
 import SubNav, { SubNavProps } from './SubNav';
 import Item, { NavItemProps } from './Item';
 import Footer, { NavFooterProps } from './Footer';
@@ -122,10 +122,11 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
     static __SemiComponentName__: string;
     static defaultProps: any;
     itemsChanged: boolean;
+    foundation: NavigationFoundation;
     constructor(props: NavProps);
     static getDerivedStateFromProps(props: NavProps, state: NavState): Partial<NavState>;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: NavProps, prevState: NavState): void;
+    componentDidUpdate(prevProps: NavProps): void;
     get adapter(): NavigationAdapter<NavProps, NavState>;
     /**
      * Render navigation items recursively

package/lib/es/navigation/index.js

@@ -88,24 +88,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(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(prevProps.openKeys, this.props.openKeys)) {
         this.adapter.updateOpenKeys(this.props.openKeys);
       }
-      if (!_isEqual(selectedKeys, prevState.selectedKeys)) {
-        const parentSelectKeys = this.foundation.selectLevelZeroParentKeys(null, ...selectedKeys);
-        this.adapter.addSelectedKeys(...parentSelectKeys);
-      }
     }
   }
   get adapter() {
@@ -131,9 +126,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]
       }),

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

@@ -48,6 +48,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
     static getDerivedStateFromProps(props: TabsProps, state: TabsState): Partial<TabsState>;
     componentDidUpdate(prevProps: TabsProps, prevState: TabsState): void;
     setContentRef: RefCallback<HTMLDivElement>;
+    getPanes: () => PlainTab[];
     onTabClick: (activeKey: string, event: MouseEvent<HTMLDivElement>) => void;
     rePosChildren: (children: ReactElement[], activeKey: string) => ReactElement[];
     getActiveItem: () => ReactNode | ReactNode[];

package/lib/es/tabs/index.js

@@ -31,6 +31,34 @@ class Tabs extends BaseComponent {
         current: ref
       };
     };
+    this.getPanes = () => {
+      const {
+        tabList,
+        children
+      } = this.props;
+      if (Array.isArray(tabList) && tabList.length) {
+        return tabList;
+      }
+      return React.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);
     };
@@ -69,7 +97,7 @@ class Tabs extends BaseComponent {
     this.foundation = new TabsFoundation(this.adapter);
     this.state = {
       activeKey: this.foundation.getDefaultActiveKey(),
-      panes: [],
+      panes: this.getPanes(),
       prevActiveKey: null,
       forceDisableMotion: false
     };
@@ -79,41 +107,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 = React.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,
@@ -125,29 +124,7 @@ class Tabs extends BaseComponent {
         const {
           activeKey
         } = this.state;
-        if (Array.isArray(tabList) && tabList.length) {
-          panes = tabList;
-        } else {
-          panes = React.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({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.54.0",
+    "version": "2.55.0-beta.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.54.0",
-        "@douyinfe/semi-animation-react": "2.54.0",
-        "@douyinfe/semi-foundation": "2.54.0",
-        "@douyinfe/semi-icons": "2.54.0",
-        "@douyinfe/semi-illustrations": "2.54.0",
-        "@douyinfe/semi-theme-default": "2.54.0",
+        "@douyinfe/semi-animation": "2.55.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.55.0-beta.0",
+        "@douyinfe/semi-foundation": "2.55.0-beta.0",
+        "@douyinfe/semi-icons": "2.55.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.55.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.55.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "30c24d26549ecb166625ef4f0a731235b71968fc",
+    "gitHead": "1b20ba60f41785e247a71987235b5f3bbd577ff0",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",