@limetech/lime-elements 37.61.1 → 37.61.2

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [37.61.2](https://github.com/Lundalogik/lime-elements/compare/v37.61.1...v37.61.2) (2024-09-19)
+
+
+### Performance Improvements
+
+
+* **form:** render collapsed children when they become visible ([6a2ffa0](https://github.com/Lundalogik/lime-elements/commit/6a2ffa050c3186043186d7d8f16cd5cd246b0698))
+
 ## [37.61.1](https://github.com/Lundalogik/lime-elements/compare/v37.61.0...v37.61.1) (2024-09-19)
 
 

package/dist/cjs/limel-form.cjs.entry.js

@@ -23714,13 +23714,24 @@ class CollapsibleItemTemplate extends react.Component {
   constructor(props) {
     super(props);
     this.props = props;
+    this.state = {
+      isOpen: false,
+    };
+    this.handleOpen = () => {
+      this.setState({
+        isOpen: true,
+      });
+    };
     this.handleAction = this.handleAction.bind(this);
     this.isDeepEmpty = this.isDeepEmpty.bind(this);
-    this.isOpen = this.isDeepEmpty(props.data);
+    this.setState({
+      isOpen: this.isDeepEmpty(props.data),
+    });
   }
   componentDidMount() {
     const section = this.refs.section;
     section.addEventListener('action', this.handleAction);
+    section.addEventListener('open', this.handleOpen);
     this.setActions(section);
   }
   componentDidUpdate() {
@@ -23730,15 +23741,20 @@ class CollapsibleItemTemplate extends react.Component {
   componentWillUnmount() {
     const section = this.refs.section;
     section.removeEventListener('action', this.handleAction);
+    section.removeEventListener('open', this.handleOpen);
   }
   render() {
     const { data, schema, formSchema } = this.props;
+    let children;
+    if (this.state.isOpen) {
+      children = this.props.item.children;
+    }
     return react.createElement('limel-collapsible-section', {
       header: findTitle(data, schema, formSchema) || 'New item',
       class: 'limel-form-array-item--object',
       ref: 'section',
-      'is-open': this.isOpen,
-    }, this.props.item.children);
+      'is-open': this.state.isOpen,
+    }, children);
   }
   setActions(element) {
     const { item, index } = this.props;