@douyinfe/semi-ui 2.55.0 → 2.55.1

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/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
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.55.0",
+    "version": "2.55.1",
     "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.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",
+        "@douyinfe/semi-animation": "2.55.1",
+        "@douyinfe/semi-animation-react": "2.55.1",
+        "@douyinfe/semi-foundation": "2.55.1",
+        "@douyinfe/semi-icons": "2.55.1",
+        "@douyinfe/semi-illustrations": "2.55.1",
+        "@douyinfe/semi-theme-default": "2.55.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "21f02cad422b2d15d9f5d9b7b1ca96b0d21bb545",
+    "gitHead": "d74bd5368afc88bc49abc4ba432be9dd74fa707b",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",