diff --git a/changelog.md b/changelog.md index fbd87f5..b1c0e16 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,13 @@ # Changelog +## 2025-12-22 - 3.2.0 - feat(wcc-sidebar) +auto-expand sidebar folder when selecting an element with multiple demos + +- Add updated() lifecycle to auto-expand folder when selectedItem changes +- Find element name by matching selectedItem against dashboardRef.elements +- Only auto-expand when the element has multiple demos (checks item.demo and hasMultipleDemos) +- Immutably update expandedElements set to trigger re-render and avoid duplicate additions + ## 2025-12-21 - 3.1.2 - fix(wcc-properties) Use LitElement.updated to recreate properties only when selectedItem changes and handle errors; remove custom scheduleUpdate implementation diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index a72aa1c..8661bc4 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-wcctools', - version: '3.1.2', + version: '3.2.0', description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.' } diff --git a/ts_web/elements/wcc-sidebar.ts b/ts_web/elements/wcc-sidebar.ts index 1a2d8ab..533e72b 100644 --- a/ts_web/elements/wcc-sidebar.ts +++ b/ts_web/elements/wcc-sidebar.ts @@ -308,6 +308,27 @@ export class WccSidebar extends DeesElement { this.expandedElements = newSet; } + protected updated(changedProperties: Map) { + 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);