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

package/lib/cjs/_base/base.css

@@ -458,26 +458,26 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
   --semi-color-highlight: rgba(var(--semi-black), 1);
-  --semi-color-data-0:rgba(22, 100, 255, 1);
-  --semi-color-data-1:rgba(178, 207, 255, 1);
-  --semi-color-data-2:rgba(26, 198, 255, 1);
-  --semi-color-data-3:rgba(148, 239, 255, 1);
-  --semi-color-data-4:rgba(255, 138, 0, 1);
-  --semi-color-data-5:rgba(255, 206, 122, 1);
-  --semi-color-data-6:rgba(60, 199, 128, 1);
-  --semi-color-data-7:rgba(185, 237, 205, 1);
-  --semi-color-data-8:rgba(116, 66, 212, 1);
-  --semi-color-data-9:rgba(221, 197, 250, 1);
-  --semi-color-data-10:rgba(255, 196, 0, 1);
-  --semi-color-data-11:rgba(250, 232, 120, 1);
-  --semi-color-data-12:rgba(48, 77, 119, 1);
-  --semi-color-data-13:rgba(139, 149, 158, 1);
-  --semi-color-data-14:rgba(180, 141, 235, 1);
-  --semi-color-data-15:rgba(239, 227, 255, 1);
-  --semi-color-data-16:rgba(0, 148, 136, 1);
-  --semi-color-data-17:rgba(89, 186, 168, 1);
-  --semi-color-data-18:rgba(255, 125, 218, 1);
-  --semi-color-data-19:rgba(255, 207, 238, 1);
+  --semi-color-data-0: rgba(87, 105, 255, 1);
+  --semi-color-data-1: rgba(142, 212, 231, 1);
+  --semi-color-data-2: rgba(245, 135, 0, 1);
+  --semi-color-data-3: rgba(220, 183, 252, 1);
+  --semi-color-data-4: rgba(74, 156, 247, 1);
+  --semi-color-data-5: rgba(243, 204, 53, 1);
+  --semi-color-data-6: rgba(254, 128, 144, 1);
+  --semi-color-data-7: rgba(139, 215, 210, 1);
+  --semi-color-data-8: rgba(131, 176, 35, 1);
+  --semi-color-data-9: rgba(233, 165, 229, 1);
+  --semi-color-data-10: rgba(48, 167, 206, 1);
+  --semi-color-data-11: rgba(249, 192, 100, 1);
+  --semi-color-data-12: rgba(177, 113, 249, 1);
+  --semi-color-data-13: rgba(119, 182, 249, 1);
+  --semi-color-data-14: rgba(200, 143, 2, 1);
+  --semi-color-data-15: rgba(255, 170, 178, 1);
+  --semi-color-data-16: rgba(51, 176, 171, 1);
+  --semi-color-data-17: rgba(182, 215, 129, 1);
+  --semi-color-data-18: rgba(212, 88, 212, 1);
+  --semi-color-data-19: rgba(188, 198, 255, 1);
 }
 
 body[theme-mode=dark], body .semi-always-dark {
@@ -568,26 +568,26 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
   --semi-color-highlight: rgba(var(--semi-white), 1);
-  --semi-color-data-0:rgba(22, 100, 255, 1);
-  --semi-color-data-1:rgba(178, 207, 255, 1);
-  --semi-color-data-2:rgba(26, 198, 255, 1);
-  --semi-color-data-3:rgba(148, 239, 255, 1);
-  --semi-color-data-4:rgba(255, 138, 0, 1);
-  --semi-color-data-5:rgba(255, 206, 122, 1);
-  --semi-color-data-6:rgba(60, 199, 128, 1);
-  --semi-color-data-7:rgba(185, 237, 205, 1);
-  --semi-color-data-8:rgba(116, 66, 212, 1);
-  --semi-color-data-9:rgba(221, 197, 250, 1);
-  --semi-color-data-10:rgba(255, 196, 0, 1);
-  --semi-color-data-11:rgba(250, 232, 120, 1);
-  --semi-color-data-12:rgba(48, 77, 119, 1);
-  --semi-color-data-13:rgba(139, 149, 158, 1);
-  --semi-color-data-14:rgba(180, 141, 235, 1);
-  --semi-color-data-15:rgba(239, 227, 255, 1);
-  --semi-color-data-16:rgba(0, 148, 136, 1);
-  --semi-color-data-17:rgba(89, 186, 168, 1);
-  --semi-color-data-18:rgba(255, 125, 218, 1);
-  --semi-color-data-19:rgba(255, 207, 238, 1);
+  --semi-color-data-0: rgba(94, 109, 194, 1);
+  --semi-color-data-1: rgba(8, 104, 120, 1);
+  --semi-color-data-2: rgba(250, 173, 63, 1);
+  --semi-color-data-3: rgba(76, 43, 156, 1);
+  --semi-color-data-4: rgba(16, 125, 248, 1);
+  --semi-color-data-5: rgba(248, 202, 16, 1);
+  --semi-color-data-6: rgba(195, 30, 87, 1);
+  --semi-color-data-7: rgba(5, 119, 115, 1);
+  --semi-color-data-8: rgba(154, 207, 13, 1);
+  --semi-color-data-9: rgba(117, 29, 138, 1);
+  --semi-color-data-10: rgba(16, 162, 180, 1);
+  --semi-color-data-11: rgba(208, 110, 11, 1);
+  --semi-color-data-12: rgba(113, 66, 197, 1);
+  --semi-color-data-13: rgba(7, 100, 212, 1);
+  --semi-color-data-14: rgba(251, 232, 110, 1);
+  --semi-color-data-15: rgba(160, 19, 73, 1);
+  --semi-color-data-16: rgba(11, 179, 167, 1);
+  --semi-color-data-17: rgba(98, 138, 6, 1);
+  --semi-color-data-18: rgba(162, 48, 179, 1);
+  --semi-color-data-19: rgba(40, 51, 138, 1);
 }
 
 .semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {

package/lib/cjs/button/splitButtonGroup.d.ts

@@ -7,11 +7,13 @@ export interface SplitButtonGroupProps extends BaseProps {
 }
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
     containerRef: React.RefObject<HTMLDivElement>;
+    mutationObserver: MutationObserver | null;
     static propTypes: {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
     };
     componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): JSX.Element;
 }

package/lib/cjs/button/splitButtonGroup.js

@@ -16,16 +16,42 @@ class SplitButtonGroup extends _baseComponent.default {
   constructor() {
     super(...arguments);
     this.containerRef = /*#__PURE__*/_react.default.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/cjs/collapse/collapse-context.d.ts

@@ -8,6 +8,7 @@ export interface CollapseContextType {
     expandIconPosition: 'left' | 'right';
     onClick: (activeKey: string, e: React.MouseEvent) => void;
     motion: boolean;
+    lazyRender: boolean;
 }
 declare const CollapseContext: React.Context<CollapseContextType>;
 export default CollapseContext;

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

@@ -11,6 +11,7 @@ export interface CollapseReactProps extends CollapseProps {
     children?: React.ReactNode;
     style?: CSSProperties;
     onChange?: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => void;
+    lazyRender?: boolean;
 }
 export type { CollapseState };
 declare class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
@@ -28,6 +29,7 @@ declare class Collapse extends BaseComponent<CollapseReactProps, CollapseState>
         keepDOM: PropTypes.Requireable<boolean>;
         motion: PropTypes.Requireable<NonNullable<boolean | object>>;
         expandIconPosition: PropTypes.Requireable<string>;
+        lazyRender: PropTypes.Requireable<boolean>;
     };
     static __SemiComponentName__: string;
     static defaultProps: any;

package/lib/cjs/collapse/index.js

@@ -66,6 +66,7 @@ class Collapse extends _baseComponent.default {
     const _a = this.props,
       {
         defaultActiveKey,
+        lazyRender,
         accordion,
         style,
         motion,
@@ -77,7 +78,7 @@ class Collapse extends _baseComponent.default {
         children,
         clickHeaderToExpand
       } = _a,
-      rest = __rest(_a, ["defaultActiveKey", "accordion", "style", "motion", "className", "keepDOM", "expandIconPosition", "expandIcon", "collapseIcon", "children", "clickHeaderToExpand"]);
+      rest = __rest(_a, ["defaultActiveKey", "lazyRender", "accordion", "style", "motion", "className", "keepDOM", "expandIconPosition", "expandIcon", "collapseIcon", "children", "clickHeaderToExpand"]);
     const clsPrefix = (0, _classnames.default)(_constants.cssClasses.PREFIX, className);
     const {
       activeSet
@@ -94,7 +95,8 @@ class Collapse extends _baseComponent.default {
         keepDOM,
         expandIconPosition,
         onClick: this.onChange,
-        motion
+        motion,
+        lazyRender
       }
     }, children));
   }
@@ -112,14 +114,16 @@ Collapse.propTypes = {
   className: _propTypes.default.string,
   keepDOM: _propTypes.default.bool,
   motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
-  expandIconPosition: _propTypes.default.oneOf(_constants.strings.iconPosition)
+  expandIconPosition: _propTypes.default.oneOf(_constants.strings.iconPosition),
+  lazyRender: _propTypes.default.bool
 };
-Collapse.__SemiComponentName__ = "Collapse";
+Collapse.__SemiComponentName__ = 'Collapse';
 Collapse.defaultProps = (0, _utils.getDefaultPropsFromGlobalConfig)(Collapse.__SemiComponentName__, {
   defaultActiveKey: '',
   clickHeaderToExpand: true,
   onChange: _function.noop,
-  expandIconPosition: 'right'
+  expandIconPosition: 'right',
+  lazyRender: false
 });
 var _default = Collapse;
 exports.default = _default;

package/lib/cjs/collapse/item.js

@@ -92,7 +92,8 @@ class CollapsePanel extends _react.PureComponent {
       keepDOM,
       expandIconPosition,
       activeSet,
-      motion
+      motion,
+      lazyRender
     } = this.context;
     const active = activeSet.has(itemKey);
     const itemCls = (0, _classnames.default)(className, {
@@ -117,6 +118,7 @@ class CollapsePanel extends _react.PureComponent {
       "aria-owns": this.ariaID,
       onClick: e => !disabled && this.handleClick(itemKey, e)
     }, this.renderHeader(active, children !== undefined && !disabled)), children && /*#__PURE__*/_react.default.createElement(_collapsible.default, {
+      lazyRender: lazyRender,
       isOpen: active,
       keepDOM: keepDOM,
       motion: motion,

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

@@ -29,6 +29,7 @@ declare class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleSta
     foundation: CollapsibleFoundation;
     private domRef;
     private resizeObserver;
+    private hasBeenRendered;
     constructor(props: CollapsibleProps);
     get adapter(): CollapsibleAdapter<CollapsibleProps, CollapsibleState>;
     static getEntryInfo: (entry: ResizeObserverEntry) => {

package/lib/cjs/collapsible/index.js

@@ -18,6 +18,7 @@ class Collapsible extends _baseComponent.default {
   constructor(props) {
     super(props);
     this.domRef = /*#__PURE__*/_react.default.createRef();
+    this.hasBeenRendered = false;
     this.handleResize = entryList => {
       const entry = entryList[0];
       if (entry) {
@@ -114,7 +115,10 @@ class Collapsible extends _baseComponent.default {
     const wrapperCls = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-wrapper`, {
       [`${_constants.cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
     }, this.props.className);
-    const shouldRender = this.props.keepDOM && !this.props.lazyRender || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen;
+    const shouldRender = this.props.keepDOM && (this.props.lazyRender ? this.hasBeenRendered : true) || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen;
+    if (shouldRender && !this.hasBeenRendered) {
+      this.hasBeenRendered = true;
+    }
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({
       className: wrapperCls,
       style: wrapperStyle,
@@ -142,7 +146,7 @@ Collapsible.defaultProps = (0, _utils.getDefaultPropsFromGlobalConfig)(Collapsib
   duration: 250,
   motion: true,
   keepDOM: false,
-  lazyRender: true,
+  lazyRender: false,
   collapseHeight: 0,
   fade: false
 });

package/lib/cjs/descriptions/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _isPlainObject2 = _interopRequireDefault(require("lodash/isPlainObject"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/descriptions/constants");
@@ -15,6 +15,8 @@ var _descriptionsContext = _interopRequireDefault(require("./descriptions-contex
 var _item = _interopRequireDefault(require("./item"));
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/descriptions/foundation"));
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 }; }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -57,7 +59,22 @@ class Descriptions extends _baseComponent.default {
     this.foundation = new _foundation.default(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.default.Children.toArray(this.props.children)) === null || _b === void 0 ? void 0 : _b.map(item => {
+            return /*#__PURE__*/(0, _react.isValidElement)(item) ? Object.assign({
+              value: item.props.children
+            }, item.props) : [];
+          });
+        }
+        return [];
+      }
+    });
   }
   render() {
     const _a = this.props,

package/lib/cjs/descriptions/item.js

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

package/lib/es/_base/base.css

@@ -458,26 +458,26 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
   --semi-color-highlight: rgba(var(--semi-black), 1);
-  --semi-color-data-0:rgba(22, 100, 255, 1);
-  --semi-color-data-1:rgba(178, 207, 255, 1);
-  --semi-color-data-2:rgba(26, 198, 255, 1);
-  --semi-color-data-3:rgba(148, 239, 255, 1);
-  --semi-color-data-4:rgba(255, 138, 0, 1);
-  --semi-color-data-5:rgba(255, 206, 122, 1);
-  --semi-color-data-6:rgba(60, 199, 128, 1);
-  --semi-color-data-7:rgba(185, 237, 205, 1);
-  --semi-color-data-8:rgba(116, 66, 212, 1);
-  --semi-color-data-9:rgba(221, 197, 250, 1);
-  --semi-color-data-10:rgba(255, 196, 0, 1);
-  --semi-color-data-11:rgba(250, 232, 120, 1);
-  --semi-color-data-12:rgba(48, 77, 119, 1);
-  --semi-color-data-13:rgba(139, 149, 158, 1);
-  --semi-color-data-14:rgba(180, 141, 235, 1);
-  --semi-color-data-15:rgba(239, 227, 255, 1);
-  --semi-color-data-16:rgba(0, 148, 136, 1);
-  --semi-color-data-17:rgba(89, 186, 168, 1);
-  --semi-color-data-18:rgba(255, 125, 218, 1);
-  --semi-color-data-19:rgba(255, 207, 238, 1);
+  --semi-color-data-0: rgba(87, 105, 255, 1);
+  --semi-color-data-1: rgba(142, 212, 231, 1);
+  --semi-color-data-2: rgba(245, 135, 0, 1);
+  --semi-color-data-3: rgba(220, 183, 252, 1);
+  --semi-color-data-4: rgba(74, 156, 247, 1);
+  --semi-color-data-5: rgba(243, 204, 53, 1);
+  --semi-color-data-6: rgba(254, 128, 144, 1);
+  --semi-color-data-7: rgba(139, 215, 210, 1);
+  --semi-color-data-8: rgba(131, 176, 35, 1);
+  --semi-color-data-9: rgba(233, 165, 229, 1);
+  --semi-color-data-10: rgba(48, 167, 206, 1);
+  --semi-color-data-11: rgba(249, 192, 100, 1);
+  --semi-color-data-12: rgba(177, 113, 249, 1);
+  --semi-color-data-13: rgba(119, 182, 249, 1);
+  --semi-color-data-14: rgba(200, 143, 2, 1);
+  --semi-color-data-15: rgba(255, 170, 178, 1);
+  --semi-color-data-16: rgba(51, 176, 171, 1);
+  --semi-color-data-17: rgba(182, 215, 129, 1);
+  --semi-color-data-18: rgba(212, 88, 212, 1);
+  --semi-color-data-19: rgba(188, 198, 255, 1);
 }
 
 body[theme-mode=dark], body .semi-always-dark {
@@ -568,26 +568,26 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
   --semi-color-highlight: rgba(var(--semi-white), 1);
-  --semi-color-data-0:rgba(22, 100, 255, 1);
-  --semi-color-data-1:rgba(178, 207, 255, 1);
-  --semi-color-data-2:rgba(26, 198, 255, 1);
-  --semi-color-data-3:rgba(148, 239, 255, 1);
-  --semi-color-data-4:rgba(255, 138, 0, 1);
-  --semi-color-data-5:rgba(255, 206, 122, 1);
-  --semi-color-data-6:rgba(60, 199, 128, 1);
-  --semi-color-data-7:rgba(185, 237, 205, 1);
-  --semi-color-data-8:rgba(116, 66, 212, 1);
-  --semi-color-data-9:rgba(221, 197, 250, 1);
-  --semi-color-data-10:rgba(255, 196, 0, 1);
-  --semi-color-data-11:rgba(250, 232, 120, 1);
-  --semi-color-data-12:rgba(48, 77, 119, 1);
-  --semi-color-data-13:rgba(139, 149, 158, 1);
-  --semi-color-data-14:rgba(180, 141, 235, 1);
-  --semi-color-data-15:rgba(239, 227, 255, 1);
-  --semi-color-data-16:rgba(0, 148, 136, 1);
-  --semi-color-data-17:rgba(89, 186, 168, 1);
-  --semi-color-data-18:rgba(255, 125, 218, 1);
-  --semi-color-data-19:rgba(255, 207, 238, 1);
+  --semi-color-data-0: rgba(94, 109, 194, 1);
+  --semi-color-data-1: rgba(8, 104, 120, 1);
+  --semi-color-data-2: rgba(250, 173, 63, 1);
+  --semi-color-data-3: rgba(76, 43, 156, 1);
+  --semi-color-data-4: rgba(16, 125, 248, 1);
+  --semi-color-data-5: rgba(248, 202, 16, 1);
+  --semi-color-data-6: rgba(195, 30, 87, 1);
+  --semi-color-data-7: rgba(5, 119, 115, 1);
+  --semi-color-data-8: rgba(154, 207, 13, 1);
+  --semi-color-data-9: rgba(117, 29, 138, 1);
+  --semi-color-data-10: rgba(16, 162, 180, 1);
+  --semi-color-data-11: rgba(208, 110, 11, 1);
+  --semi-color-data-12: rgba(113, 66, 197, 1);
+  --semi-color-data-13: rgba(7, 100, 212, 1);
+  --semi-color-data-14: rgba(251, 232, 110, 1);
+  --semi-color-data-15: rgba(160, 19, 73, 1);
+  --semi-color-data-16: rgba(11, 179, 167, 1);
+  --semi-color-data-17: rgba(98, 138, 6, 1);
+  --semi-color-data-18: rgba(162, 48, 179, 1);
+  --semi-color-data-19: rgba(40, 51, 138, 1);
 }
 
 .semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {

package/lib/es/button/splitButtonGroup.d.ts

@@ -7,11 +7,13 @@ export interface SplitButtonGroupProps extends BaseProps {
 }
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
     containerRef: React.RefObject<HTMLDivElement>;
+    mutationObserver: MutationObserver | null;
     static propTypes: {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
     };
     componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): JSX.Element;
 }

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/collapse/collapse-context.d.ts

@@ -8,6 +8,7 @@ export interface CollapseContextType {
     expandIconPosition: 'left' | 'right';
     onClick: (activeKey: string, e: React.MouseEvent) => void;
     motion: boolean;
+    lazyRender: boolean;
 }
 declare const CollapseContext: React.Context<CollapseContextType>;
 export default CollapseContext;

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

@@ -11,6 +11,7 @@ export interface CollapseReactProps extends CollapseProps {
     children?: React.ReactNode;
     style?: CSSProperties;
     onChange?: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => void;
+    lazyRender?: boolean;
 }
 export type { CollapseState };
 declare class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
@@ -28,6 +29,7 @@ declare class Collapse extends BaseComponent<CollapseReactProps, CollapseState>
         keepDOM: PropTypes.Requireable<boolean>;
         motion: PropTypes.Requireable<NonNullable<boolean | object>>;
         expandIconPosition: PropTypes.Requireable<string>;
+        lazyRender: PropTypes.Requireable<boolean>;
     };
     static __SemiComponentName__: string;
     static defaultProps: any;

package/lib/es/collapse/index.js

@@ -17,7 +17,7 @@ import CollapsePanel from './item';
 import '@douyinfe/semi-foundation/lib/es/collapse/collapse.css';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 import CollapseContext from './collapse-context';
-import { getDefaultPropsFromGlobalConfig } from "../_utils";
+import { getDefaultPropsFromGlobalConfig } from '../_utils';
 class Collapse extends BaseComponent {
   constructor(props) {
     super(props);
@@ -59,6 +59,7 @@ class Collapse extends BaseComponent {
     const _a = this.props,
       {
         defaultActiveKey,
+        lazyRender,
         accordion,
         style,
         motion,
@@ -70,7 +71,7 @@ class Collapse extends BaseComponent {
         children,
         clickHeaderToExpand
       } = _a,
-      rest = __rest(_a, ["defaultActiveKey", "accordion", "style", "motion", "className", "keepDOM", "expandIconPosition", "expandIcon", "collapseIcon", "children", "clickHeaderToExpand"]);
+      rest = __rest(_a, ["defaultActiveKey", "lazyRender", "accordion", "style", "motion", "className", "keepDOM", "expandIconPosition", "expandIcon", "collapseIcon", "children", "clickHeaderToExpand"]);
     const clsPrefix = cls(cssClasses.PREFIX, className);
     const {
       activeSet
@@ -87,7 +88,8 @@ class Collapse extends BaseComponent {
         keepDOM,
         expandIconPosition,
         onClick: this.onChange,
-        motion
+        motion,
+        lazyRender
       }
     }, children));
   }
@@ -105,13 +107,15 @@ Collapse.propTypes = {
   className: PropTypes.string,
   keepDOM: PropTypes.bool,
   motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
-  expandIconPosition: PropTypes.oneOf(strings.iconPosition)
+  expandIconPosition: PropTypes.oneOf(strings.iconPosition),
+  lazyRender: PropTypes.bool
 };
-Collapse.__SemiComponentName__ = "Collapse";
+Collapse.__SemiComponentName__ = 'Collapse';
 Collapse.defaultProps = getDefaultPropsFromGlobalConfig(Collapse.__SemiComponentName__, {
   defaultActiveKey: '',
   clickHeaderToExpand: true,
   onChange: noop,
-  expandIconPosition: 'right'
+  expandIconPosition: 'right',
+  lazyRender: false
 });
 export default Collapse;

package/lib/es/collapse/item.js

@@ -83,7 +83,8 @@ export default class CollapsePanel extends PureComponent {
       keepDOM,
       expandIconPosition,
       activeSet,
-      motion
+      motion,
+      lazyRender
     } = this.context;
     const active = activeSet.has(itemKey);
     const itemCls = cls(className, {
@@ -108,6 +109,7 @@ export default class CollapsePanel extends PureComponent {
       "aria-owns": this.ariaID,
       onClick: e => !disabled && this.handleClick(itemKey, e)
     }, this.renderHeader(active, children !== undefined && !disabled)), children && /*#__PURE__*/React.createElement(Collapsible, {
+      lazyRender: lazyRender,
       isOpen: active,
       keepDOM: keepDOM,
       motion: motion,

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

@@ -29,6 +29,7 @@ declare class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleSta
     foundation: CollapsibleFoundation;
     private domRef;
     private resizeObserver;
+    private hasBeenRendered;
     constructor(props: CollapsibleProps);
     get adapter(): CollapsibleAdapter<CollapsibleProps, CollapsibleState>;
     static getEntryInfo: (entry: ResizeObserverEntry) => {

package/lib/es/collapsible/index.js

@@ -11,6 +11,7 @@ class Collapsible extends BaseComponent {
   constructor(props) {
     super(props);
     this.domRef = /*#__PURE__*/React.createRef();
+    this.hasBeenRendered = false;
     this.handleResize = entryList => {
       const entry = entryList[0];
       if (entry) {
@@ -107,7 +108,10 @@ class Collapsible extends BaseComponent {
     const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, {
       [`${cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
     }, this.props.className);
-    const shouldRender = this.props.keepDOM && !this.props.lazyRender || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen;
+    const shouldRender = this.props.keepDOM && (this.props.lazyRender ? this.hasBeenRendered : true) || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen;
+    if (shouldRender && !this.hasBeenRendered) {
+      this.hasBeenRendered = true;
+    }
     return /*#__PURE__*/React.createElement("div", Object.assign({
       className: wrapperCls,
       style: wrapperStyle,
@@ -135,7 +139,7 @@ Collapsible.defaultProps = getDefaultPropsFromGlobalConfig(Collapsible.__SemiCom
   duration: 250,
   motion: true,
   keepDOM: false,
-  lazyRender: true,
+  lazyRender: false,
   collapseHeight: 0,
   fade: false
 });