diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 60419f06116e..8858d5ed659c 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -132,7 +132,8 @@ type ShellBarMenuItemClickEventDetail = { }; type ShellBarContentItemVisibilityChangeEventDetail = { - items: Array + items: Array, + revealedItems: Array, }; type ShellBarSearchButtonEventDetail = { @@ -302,7 +303,8 @@ type ShellBarSearchFieldClearEventDetail = { * Fired, when an item from the content slot is hidden or shown. * **Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change. * - * @param {Array} array of all the items that are hidden + * @param {Array} items array of all the items that are currently hidden + * @param {Array} revealedItems array of items that just became visible (were hidden in the previous state) * @public * @since 2.7.0 */ @@ -810,8 +812,11 @@ class ShellBar extends UI5Element { const newHiddenContentIds = filterContentIds(newHiddenItemsIds); if (!arraysAreEqual(oldHiddenContentIds, newHiddenContentIds)) { + const toElement = (id: string) => this.content.find(item => (item as any)._individualSlot as string === id)!; + const revealedContentIds = oldHiddenContentIds.filter(id => !newHiddenContentIds.includes(id)); this.fireDecoratorEvent("content-item-visibility-change", { - items: newHiddenContentIds.map(id => this.content.find(item => (item as any)._individualSlot as string === id)!), + items: newHiddenContentIds.map(toElement), + revealedItems: revealedContentIds.map(toElement), }); } } diff --git a/packages/fiori/test/pages/ShellBar_Features.html b/packages/fiori/test/pages/ShellBar_Features.html index 5538fd982cca..bb8ad0141643 100644 --- a/packages/fiori/test/pages/ShellBar_Features.html +++ b/packages/fiori/test/pages/ShellBar_Features.html @@ -658,7 +658,7 @@

ShellBar Feature Toggle

}); shellbar.addEventListener('ui5-content-item-visibility-change', (e) => { - console.log('Content visibility changed:', e.detail.items.length, 'items hidden'); + console.log('Content visibility changed:', e.detail.items.length, 'items hidden,', e.detail.revealedItems.length, 'items revealed'); }); shellbar.addEventListener('ui5-search-field-toggle', (e) => {