@api-client/ui 0.5.21 → 0.5.22

package/src/md/list/ui-list.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-list': Element
   }
 }
+
+export type { UiListItemsChange, UiListSelection } from './internals/List.js'

package/src/md/menu/internal/Menu.ts

@@ -15,6 +15,7 @@ import { bound } from '../../../decorators/bound.js'
  *
  * @fires select - Dispatched when a menu item is selected
  * @fires close - Dispatched when the menu is closed
+ * @fires open - Dispatched when the menu is opened
  */
 export default class Menu extends UiList {
   /**
@@ -213,10 +214,42 @@ export default class Menu extends UiList {
   }
 
   override notifySelect(item: UiListItem, index?: number): boolean {
+    // Handle single selection
+    if (item instanceof UiMenuItem) {
+      this.clearSelection()
+      item.selected = true
+    }
+
     this.hide()
     return super.notifySelect(item, index)
   }
 
+  /**
+   * Clears selection from all menu items
+   */
+  protected clearSelection(): void {
+    this.assignedMenuItems.forEach((menuItem) => {
+      menuItem.selected = false
+    })
+  }
+
+  /**
+   * Gets the currently selected menu item
+   */
+  get selectedItem(): UiMenuItem | null {
+    return this.assignedMenuItems.find((item) => item.selected) || null
+  }
+
+  /**
+   * Sets the selected menu item
+   */
+  setSelectedItem(item: UiMenuItem | null): void {
+    this.clearSelection()
+    if (item) {
+      item.selected = true
+    }
+  }
+
   /**
    * Handles sub-menu opening
    */

package/src/md/menu/internal/MenuItem.styles.ts

@@ -54,6 +54,7 @@ export default css`
   md-focus-ring {
     --md-focus-ring-color: var(--md-sys-color-primary);
     --md-focus-ring-width: 2px;
+    z-index: 2;
   }
 
   /* Ripple Effect */
@@ -61,4 +62,26 @@ export default css`
     --md-ripple-color: var(--md-sys-color-primary);
     --md-ripple-opacity: 0.12;
   }
+
+  /* Selected state */
+  :host(.select) .menu-item,
+  :host([selected]) .menu-item {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host(.select) .menu-item:hover,
+  :host([selected]) .menu-item:hover {
+    background-color: var(--md-sys-color-secondary-container);
+    opacity: 0.92;
+  }
+
+  /* Selection check icon */
+  .selection-check {
+    color: var(--md-sys-color-on-surface-variant);
+    fill: var(--md-sys-color-on-surface-variant);
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+  }
 `

package/src/md/menu/internal/MenuItem.ts

@@ -8,6 +8,7 @@ import { nanoid } from 'nanoid'
 
 import '@material/web/focus/md-focus-ring.js'
 import '../../ripple/ui-ripple.js'
+import '../../icons/ui-icon.js'
 
 /**
  * Material Design 3 Menu Item component.
@@ -23,6 +24,25 @@ export default class UiMenuItem extends UiListItem {
    */
   @property({ type: String }) accessor submenu: string | undefined
 
+  /**
+   * Whether this menu item is selected
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor selected = false
+
+  /**
+   * The value associated with this menu item. Use it to identify value associated with the menu item,
+   * when selected.
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) accessor value: string | undefined
+
+  /**
+   * Whether to automatically show a check icon when selected
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor showSelectionIcon = false
+
   /**
    * Whether the menu item has a sub-menu
    */
@@ -58,6 +78,9 @@ export default class UiMenuItem extends UiListItem {
     if (!this.id) {
       this.id = nanoid(6)
     }
+
+    // Initialize selection state
+    this.updateSelectionState()
   }
 
   protected override updated(changedProperties: PropertyValues<this>): void {
@@ -67,6 +90,10 @@ export default class UiMenuItem extends UiListItem {
       this.updateAccessibility()
       this.setupSubmenuConnection()
     }
+
+    if (changedProperties.has('selected')) {
+      this.updateSelectionState()
+    }
   }
 
   /**
@@ -97,6 +124,19 @@ export default class UiMenuItem extends UiListItem {
     }
   }
 
+  /**
+   * Updates the selection state styling
+   */
+  protected updateSelectionState(): void {
+    if (this.selected) {
+      this.classList.add('select')
+      this.setAttribute('aria-selected', 'true')
+    } else {
+      this.classList.remove('select')
+      this.setAttribute('aria-selected', 'false')
+    }
+  }
+
   /**
    * Handles mouse enter events
    */
@@ -214,4 +254,13 @@ export default class UiMenuItem extends UiListItem {
       ${this.hasSubMenu ? html`<ui-icon class="menu-item-arrow">arrow_right</ui-icon>` : ''}
     </div>`
   }
+
+  protected override renderStart(): TemplateResult {
+    const showCheckIcon = this.showSelectionIcon && this.selected
+
+    return html`<div class="start">
+      ${showCheckIcon ? html`<ui-icon class="selection-check">check</ui-icon>` : ''}
+      <slot name="start" @slotchange=${this.handleSlotChange}></slot>
+    </div>`
+  }
 }

package/src/md/menu/ui-menu-item.ts

@@ -8,10 +8,6 @@ import listStyles from '../list/internals/ListItem.styles.js'
  * Material Design 3 Menu Item component.
  *
  * @element ui-menu-item
- * @attribute {Object} data - The menu item data object
- * @attribute {boolean} disabled - Whether the menu item is disabled
- * @fires select - Dispatched when the menu item is selected
- * @fires submenu-open - Dispatched when a sub-menu is opened
  */
 @customElement('ui-menu-item')
 export class UiMenuItemElement extends Element {
@@ -23,3 +19,5 @@ declare global {
     'ui-menu-item': UiMenuItemElement
   }
 }
+
+export { ListItemImage, ListItemLines } from '../list/internals/ListItem.js'

package/src/md/menu/ui-menu.ts

@@ -24,3 +24,5 @@ declare global {
     'ui-menu': UiMenuElement
   }
 }
+
+export type { UiListItemsChange, UiListSelection } from '../list/internals/List.js'

package/src/md/tabs/ui-tabs.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-tabs': UiTabsElement
   }
 }
+
+export { TabsPriority, type TabSelectionDetail } from './internals/Tabs.js'

package/test/md/menu/Menu.test.ts

@@ -505,5 +505,351 @@ describe('md', () => {
         assert.isFalse(hideSpy.called)
       })
     })
+
+    describe('Menu item selection', () => {
+      async function selectionFixture(): Promise<Menu> {
+        return fixture(html`
+          <ui-menu id="selection-menu">
+            <ui-menu-item id="item1">Item 1</ui-menu-item>
+            <ui-menu-item id="item2" selected>Item 2</ui-menu-item>
+            <ui-menu-item id="item3">Item 3</ui-menu-item>
+            <ui-menu-item id="item4" disabled>Item 4 (Disabled)</ui-menu-item>
+          </ui-menu>
+        `)
+      }
+
+      describe('selectedItem getter', () => {
+        it('should return null when no item is selected', async () => {
+          const element = await basicFixture()
+          await nextFrame()
+
+          assert.isNull(element.selectedItem)
+        })
+
+        it('should return the selected menu item', async () => {
+          const element = await selectionFixture()
+          await nextFrame()
+
+          const selectedItem = element.selectedItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+
+          assert.isNotNull(selectedItem)
+          assert.equal(selectedItem, item2)
+          assert.isTrue(selectedItem!.selected)
+        })
+
+        it('should return the first selected item when multiple items are selected', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item3 = element.querySelector('#item3') as UiMenuItem
+          await nextFrame()
+
+          // Manually set multiple items as selected
+          item1.selected = true
+          item3.selected = true
+          await nextFrame()
+
+          const selectedItem = element.selectedItem
+          assert.equal(selectedItem, item1)
+        })
+      })
+
+      describe('setSelectedItem method', () => {
+        it('should select a menu item and clear previous selection', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          await nextFrame()
+
+          // Initially item2 is selected
+          assert.isTrue(item2.selected)
+          assert.isFalse(item1.selected)
+
+          // Select item1
+          element.setSelectedItem(item1)
+          await nextFrame()
+
+          assert.isTrue(item1.selected)
+          assert.isFalse(item2.selected)
+          assert.equal(element.selectedItem, item1)
+        })
+
+        it('should clear all selections when passed null', async () => {
+          const element = await selectionFixture()
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          await nextFrame()
+
+          // Initially item2 is selected
+          assert.isTrue(item2.selected)
+
+          // Clear selection
+          element.setSelectedItem(null)
+          await nextFrame()
+
+          assert.isFalse(item2.selected)
+          assert.isNull(element.selectedItem)
+        })
+
+        it('should handle selecting disabled items', async () => {
+          const element = await selectionFixture()
+          const item4 = element.querySelector('#item4') as UiMenuItem
+          await nextFrame()
+
+          // Should be able to select disabled items programmatically
+          element.setSelectedItem(item4)
+          await nextFrame()
+
+          assert.isTrue(item4.selected)
+          assert.equal(element.selectedItem, item4)
+        })
+
+        it('should not throw when selecting an item not in the menu', async () => {
+          const element = await selectionFixture()
+          const externalItem: UiMenuItem = await fixture(html`<ui-menu-item>External Item</ui-menu-item>`)
+          await nextFrame()
+
+          // Should not throw
+          element.setSelectedItem(externalItem)
+
+          // External item should be selected but not affect the menu's selectedItem
+          assert.isTrue(externalItem.selected)
+          // The menu should return null since the external item is not in assignedMenuItems
+          assert.isNull(element.selectedItem)
+        })
+      })
+
+      describe('Selection clearing functionality', () => {
+        it('should clear selection from all menu items when setting null', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          const item3 = element.querySelector('#item3') as UiMenuItem
+          await nextFrame()
+
+          // Set multiple items as selected
+          item1.selected = true
+          item3.selected = true
+          await nextFrame()
+
+          // Initially item2 is selected from fixture, now item1 and item3 are also selected
+          assert.isTrue(item1.selected)
+          assert.isTrue(item2.selected)
+          assert.isTrue(item3.selected)
+
+          // Clear all selections using the public method
+          element.setSelectedItem(null)
+          await nextFrame()
+
+          assert.isFalse(item1.selected)
+          assert.isFalse(item2.selected)
+          assert.isFalse(item3.selected)
+          assert.isNull(element.selectedItem)
+        })
+
+        it('should clear previous selection when selecting new item', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          const item3 = element.querySelector('#item3') as UiMenuItem
+          await nextFrame()
+
+          // Set multiple items as selected manually
+          item1.selected = true
+          item3.selected = true
+          await nextFrame()
+
+          // Select item2 - this should clear all other selections
+          element.setSelectedItem(item2)
+          await nextFrame()
+
+          assert.isFalse(item1.selected)
+          assert.isTrue(item2.selected)
+          assert.isFalse(item3.selected)
+          assert.equal(element.selectedItem, item2)
+        })
+
+        it('should clear selection when notifySelect is called with MenuItem', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          const item3 = element.querySelector('#item3') as UiMenuItem
+          await nextFrame()
+
+          element.show()
+          await nextFrame()
+
+          // Set multiple items as selected manually
+          item1.selected = true
+          item3.selected = true
+          await nextFrame()
+
+          // Initially item2 is selected from fixture, now all items are selected
+          assert.isTrue(item1.selected)
+          assert.isTrue(item2.selected)
+          assert.isTrue(item3.selected)
+
+          // Call notifySelect on item1 - should clear all other selections
+          element.notifySelect(item1, 0)
+
+          assert.isTrue(item1.selected) // This one should remain selected
+          assert.isFalse(item2.selected) // These should be cleared
+          assert.isFalse(item3.selected)
+        })
+
+        it('should handle empty menu items', async () => {
+          const element: Menu = await fixture(html`<ui-menu></ui-menu>`)
+          await nextFrame()
+
+          // Should not throw - test by setting and clearing selection
+          element.setSelectedItem(null)
+          assert.isNull(element.selectedItem)
+        })
+      })
+
+      describe('notifySelect method', () => {
+        it('should select menu item and hide menu', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          await nextFrame()
+
+          const hideSpy = sinon.spy(element, 'hide')
+          element.show()
+          await nextFrame()
+
+          // Initially item2 is selected
+          assert.isTrue(item2.selected)
+          assert.isFalse(item1.selected)
+
+          // Notify selection of item1
+          const result = element.notifySelect(item1, 0)
+
+          assert.isFalse(result) // Should return false (event not canceled)
+          assert.isTrue(item1.selected)
+          assert.isFalse(item2.selected) // Previous selection should be cleared
+          assert.isTrue(hideSpy.calledOnce)
+        })
+
+        it('should handle non-MenuItem selection', async () => {
+          const element = await selectionFixture()
+          const nonMenuItem = document.createElement('div') as unknown as UiMenuItem
+          await nextFrame()
+
+          const hideSpy = sinon.spy(element, 'hide')
+          element.show()
+          await nextFrame()
+
+          // Should not throw and should still hide menu
+          // When item is not found in items array, notifySelect returns false
+          const result = element.notifySelect(nonMenuItem, 0)
+
+          assert.isFalse(result) // Returns false when item not found in items
+          assert.isTrue(hideSpy.calledOnce)
+        })
+
+        it('should dispatch select event through parent class', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          await nextFrame()
+
+          element.show()
+          await nextFrame()
+
+          setTimeout(() => element.notifySelect(item1, 0))
+          const event = await oneEvent(element, 'select')
+
+          assert.instanceOf(event, CustomEvent)
+          assert.equal((event as CustomEvent).detail.item, item1)
+          assert.equal((event as CustomEvent).detail.index, 0)
+        })
+
+        it('should return true when select event is canceled', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          await nextFrame()
+
+          element.show()
+          await nextFrame()
+
+          // Add event listener that cancels the event
+          element.addEventListener('select', (e) => {
+            e.preventDefault()
+          })
+
+          const result = element.notifySelect(item1, 0)
+
+          assert.isTrue(result) // Should return true when event is canceled
+          assert.isTrue(item1.selected) // Item should still be selected in Menu
+        })
+
+        it('should clear selection from all items before selecting new one', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          const item3 = element.querySelector('#item3') as UiMenuItem
+          await nextFrame()
+
+          // Manually set multiple items as selected
+          item1.selected = true
+          item3.selected = true
+          await nextFrame()
+
+          element.show()
+          await nextFrame()
+
+          // Notify selection of item2
+          element.notifySelect(item2, 1)
+
+          // Only item2 should be selected
+          assert.isFalse(item1.selected)
+          assert.isTrue(item2.selected)
+          assert.isFalse(item3.selected)
+        })
+      })
+
+      describe('Selection integration with keyboard navigation', () => {
+        it('should maintain selection state when navigating with arrow keys', async () => {
+          const element = await selectionFixture()
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          await nextFrame()
+
+          element.show()
+          await nextFrame()
+
+          // Initially item2 is selected
+          assert.isTrue(item2.selected)
+
+          // Navigate with arrow keys (should not affect selection)
+          const downEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' })
+          element.dispatchEvent(downEvent)
+          await nextFrame()
+
+          // Selection should remain unchanged
+          assert.isTrue(item2.selected)
+        })
+      })
+
+      describe('Selection state preservation', () => {
+        it('should preserve selection when menu is hidden and shown again', async () => {
+          const element = await selectionFixture()
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          await nextFrame()
+
+          // Initially item2 is selected
+          assert.isTrue(item2.selected)
+          assert.equal(element.selectedItem, item2)
+
+          // Show and hide menu
+          element.show()
+          await nextFrame()
+          element.hide()
+          await nextFrame()
+
+          // Selection should be preserved
+          assert.isTrue(item2.selected)
+          assert.equal(element.selectedItem, item2)
+        })
+      })
+    })
   })
 })