@douyinfe/semi-ui 2.54.1 → 2.55.0

package/lib/es/button/splitButtonGroup.js

@@ -9,16 +9,42 @@ export default class SplitButtonGroup extends BaseComponent {
   constructor() {
     super(...arguments);
     this.containerRef = /*#__PURE__*/React.createRef();
+    this.mutationObserver = null;
   }
   componentDidMount() {
-    if (this.containerRef.current) {
+    const addClassName = () => {
       const buttons = this.containerRef.current.querySelectorAll('button');
       const firstButton = buttons[0];
       const lastButton = buttons[buttons.length - 1];
-      firstButton === null || firstButton === void 0 ? void 0 : firstButton.classList.add(`${prefixCls}-first`);
-      lastButton === null || lastButton === void 0 ? void 0 : lastButton.classList.add(`${prefixCls}-last`);
+      if (!(firstButton === null || firstButton === void 0 ? void 0 : firstButton.classList.contains(`${prefixCls}-first`))) {
+        firstButton === null || firstButton === void 0 ? void 0 : firstButton.classList.add(`${prefixCls}-first`);
+      }
+      if (!(lastButton === null || lastButton === void 0 ? void 0 : lastButton.classList.contains(`${prefixCls}-last`))) {
+        lastButton === null || lastButton === void 0 ? void 0 : lastButton.classList.add(`${prefixCls}-last`);
+      }
+    };
+    if (this.containerRef.current) {
+      addClassName();
+      const mutationObserver = new MutationObserver((mutations, observer) => {
+        for (const mutation of mutations) {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'class' || mutation.type === 'childList' && Array.from(mutation.addedNodes).some(node => node.nodeName === 'BUTTON')) {
+            addClassName();
+          }
+        }
+      });
+      mutationObserver.observe(this.containerRef.current, {
+        attributes: true,
+        childList: true,
+        subtree: true
+      });
+      this.mutationObserver = mutationObserver;
     }
   }
+  componentWillUnmount() {
+    var _a;
+    super.componentWillUnmount();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   render() {
     const {
       children,

package/lib/es/descriptions/index.js

@@ -7,7 +7,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React from 'react';
+import React, { isValidElement } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/descriptions/constants';
@@ -50,7 +50,22 @@ class Descriptions extends BaseComponent {
     this.foundation = new DescriptionsFoundation(this.adapter);
   }
   get adapter() {
-    return Object.assign({}, super.adapter);
+    return Object.assign(Object.assign({}, super.adapter), {
+      getColumns: () => {
+        var _a, _b;
+        if ((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.length) {
+          return this.props.data;
+        }
+        if (this.props.children) {
+          return (_b = React.Children.toArray(this.props.children)) === null || _b === void 0 ? void 0 : _b.map(item => {
+            return /*#__PURE__*/isValidElement(item) ? Object.assign({
+              value: item.props.children
+            }, item.props) : [];
+          });
+        }
+        return [];
+      }
+    });
   }
   render() {
     const _a = this.props,

package/lib/es/descriptions/item.js

@@ -48,7 +48,7 @@ export default class Item extends PureComponent {
       className: keyCls
     }, itemKey)), /*#__PURE__*/React.createElement("td", {
       className: `${prefixCls}-item ${prefixCls}-item-td`,
-      colSpan: span || 1
+      colSpan: span ? span * 2 - 1 : 1
     }, /*#__PURE__*/React.createElement("span", {
       className: valCls
     }, typeof children === 'function' ? children() : children)));

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,6 +122,7 @@ 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;

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.1",
+    "version": "2.55.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.1",
-        "@douyinfe/semi-animation-react": "2.54.1",
-        "@douyinfe/semi-foundation": "2.54.1",
-        "@douyinfe/semi-icons": "2.54.1",
-        "@douyinfe/semi-illustrations": "2.54.1",
-        "@douyinfe/semi-theme-default": "2.54.1",
+        "@douyinfe/semi-animation": "2.55.0",
+        "@douyinfe/semi-animation-react": "2.55.0",
+        "@douyinfe/semi-foundation": "2.55.0",
+        "@douyinfe/semi-icons": "2.55.0",
+        "@douyinfe/semi-illustrations": "2.55.0",
+        "@douyinfe/semi-theme-default": "2.55.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": "29a9d7e115640dd1e9d8559609d9e4ee44dcfd12",
+    "gitHead": "21f02cad422b2d15d9f5d9b7b1ca96b0d21bb545",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",