feat(wcc-sidebar): auto-expand sidebar folder when selecting an element with multiple demos

ts_web/elements/wcc-sidebar.ts

@@ -308,6 +308,27 @@ export class WccSidebar extends DeesElement {
     this.expandedElements = newSet;
   }
 
+  protected updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+
+    // Auto-expand folder when a multi-demo element is selected
+    if (changedProperties.has('selectedItem') && this.selectedItem) {
+      const elementName = Object.keys(this.dashboardRef.elements).find(
+        name => this.dashboardRef.elements[name] === this.selectedItem
+      );
+      if (elementName) {
+        const item = this.dashboardRef.elements[elementName] as any;
+        if (item.demo && hasMultipleDemos(item.demo)) {
+          if (!this.expandedElements.has(elementName)) {
+            const newSet = new Set(this.expandedElements);
+            newSet.add(elementName);
+            this.expandedElements = newSet;
+          }
+        }
+      }
+    }
+  }
+
   public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: TTemplateFactory | DeesElement, demoIndex: number = 0) {
     console.log('selected item');
     console.log(itemNameArg);