@api-client/ui 0.5.51 → 0.5.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.51",
+  "version": "0.5.53",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

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

@@ -5,7 +5,7 @@ export default css`
     display: none;
     position-area: bottom span-right;
     position-try: --menu-fallback-bottom-left, --menu-fallback-top-right, --menu-fallback-top-left, flip-block;
-    position: absolute;
+    position: fixed;
     margin: 0;
     padding: 0;
     border: none;

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

@@ -3,6 +3,27 @@ import { css } from 'lit'
 export default css`
   :host {
     position-area: span-bottom right;
-    position-try-fallbacks: flip-block flip-inline;
+    position-try:
+      --submenu-fallback-left,
+      --submenu-fallback-top-right,
+      --submenu-fallback-top-left,
+      --submenu-fallback-bottom-left,
+      flip-block flip-inline;
+  }
+
+  @position-try --submenu-fallback-left {
+    position-area: span-bottom left;
+  }
+
+  @position-try --submenu-fallback-top-right {
+    position-area: span-top right;
+  }
+
+  @position-try --submenu-fallback-top-left {
+    position-area: span-top left;
+  }
+
+  @position-try --submenu-fallback-bottom-left {
+    position-area: span-bottom left;
   }
 `

package/src/md/select/internals/Select.ts

@@ -1,8 +1,9 @@
-import { html, LitElement, PropertyValues, TemplateResult } from 'lit'
+import { html, PropertyValues, TemplateResult } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { styleMap } from 'lit/directives/style-map.js'
 import { setDisabled } from '../../../lib/disabled.js'
+import { UiElement } from '../../UiElement.js'
 import type UiOption from './Option.js'
 import type { UiMenuElement } from '../../menu/ui-menu.js'
 import { nanoid } from 'nanoid'
@@ -25,7 +26,7 @@ export interface UiSelectChangeEvent {
  * @fires open - Dispatched when the dropdown opens
  * @fires close - Dispatched when the dropdown closes
  */
-export default class UiSelect extends LitElement {
+export default class UiSelect extends UiElement {
   static readonly formAssociated = true
   #internals = this.attachInternals()
 
@@ -167,7 +168,7 @@ export default class UiSelect extends LitElement {
   @property({ type: Boolean, reflect: true }) accessor open = false
 
   @state() accessor selectedOption: UiOption | null = null
-  @state() accessor ariaActiveDescendant: string | undefined
+
   @query('.menu') accessor menu!: UiMenuElement
 
   /**
@@ -400,27 +401,29 @@ export default class UiSelect extends LitElement {
         }
         case 'ArrowDown':
           e.preventDefault()
-          this.menu.highlightNext()
+          this.focusNextMenuItem()
           return
         case 'ArrowUp':
           e.preventDefault()
-          this.menu.highlightPrevious()
+          this.focusPreviousMenuItem()
           return
         case 'Home':
           e.preventDefault()
-          this.menu.highlightFirst()
+          this.focusFirstMenuItem()
           return
         case 'End':
           e.preventDefault()
-          this.menu.highlightLast()
+          this.focusLastMenuItem()
           return
         case 'Enter':
-        case ' ':
-          if (this.menu.highlightListItem) {
+        case ' ': {
+          const currentItem = this.querySelector<UiOption>(':focus')
+          if (currentItem && this.isOptionSelectable(currentItem)) {
             e.preventDefault()
-            this.menu.notifySelect(this.menu.highlightListItem as UiOption)
+            this.menu.notifySelect(currentItem)
           }
           return
+        }
       }
     } else {
       switch (e.key) {
@@ -460,7 +463,7 @@ export default class UiSelect extends LitElement {
     this.open = false
   }
 
-  protected handleClick(e: Event): void {
+  override handleClick(e: Event): void {
     if (this.disabled || e.defaultPrevented) return
     e.preventDefault()
     e.stopPropagation()
@@ -481,23 +484,161 @@ export default class UiSelect extends LitElement {
     this.setAttribute('aria-expanded', String(this.open))
     if (this.open) {
       menu.showPopover()
-      // menu.focus()
-      if (this.selectedOption) {
-        this.menu.highlightItem(this.selectedOption)
+      // Focus on the selected option or first selectable option when menu opens
+      if (this.selectedOption && this.isOptionSelectable(this.selectedOption)) {
+        this.selectedOption.focus()
       } else {
-        this.menu.highlightFirst()
+        const firstSelectableOption = this.getFirstSelectableOption()
+        if (firstSelectableOption) {
+          firstSelectableOption.focus()
+        }
       }
       this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))
-      this.focus()
     } else {
       menu.hidePopover()
       this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))
+      // Return focus to the select element when menu closes
+      this.focus()
     }
   }
 
+  /**
+   * Focus the next menu item in the dropdown, skipping disabled options
+   */
+  focusNextMenuItem(): void {
+    const currentItem = this.querySelector<UiOption>(':focus')
+    const nextItem = currentItem ? this.getNextSelectableOption(currentItem) : this.getFirstSelectableOption()
+    if (nextItem) {
+      nextItem.focus()
+    }
+  }
+
+  /**
+   * Focus the previous menu item in the dropdown, skipping disabled options
+   */
+  focusPreviousMenuItem(): void {
+    const currentItem = this.querySelector<UiOption>(':focus')
+    const previousItem = currentItem ? this.getPreviousSelectableOption(currentItem) : this.getLastSelectableOption()
+    if (previousItem) {
+      previousItem.focus()
+    }
+  }
+
+  /**
+   * Focus the first menu item in the dropdown, skipping disabled options
+   */
+  focusFirstMenuItem(): void {
+    const firstItem = this.getFirstSelectableOption()
+    if (firstItem) {
+      firstItem.focus()
+    }
+  }
+
+  /**
+   * Focus the last menu item in the dropdown, skipping disabled options
+   */
+  focusLastMenuItem(): void {
+    const lastItem = this.getLastSelectableOption()
+    if (lastItem) {
+      lastItem.focus()
+    }
+  }
+
+  /**
+   * Gets the first selectable (non-disabled) option
+   */
+  getFirstSelectableOption(): UiOption | null {
+    const options = this.querySelectorAll<UiOption>('ui-option')
+    for (const option of options) {
+      if (this.isOptionSelectable(option)) {
+        return option
+      }
+    }
+    return null
+  }
+
+  /**
+   * Gets the last selectable (non-disabled) option
+   */
+  getLastSelectableOption(): UiOption | null {
+    const options = Array.from(this.querySelectorAll<UiOption>('ui-option')).reverse()
+    for (const option of options) {
+      if (this.isOptionSelectable(option)) {
+        return option
+      }
+    }
+    return null
+  }
+
+  /**
+   * Gets the next selectable option after the current one, wrapping around if needed
+   */
+  protected getNextSelectableOption(currentOption: UiOption): UiOption | null {
+    const options = Array.from(this.querySelectorAll<UiOption>('ui-option'))
+    const currentIndex = options.indexOf(currentOption)
+
+    if (currentIndex === -1) {
+      return this.getFirstSelectableOption()
+    }
+
+    // Start from the next option and wrap around
+    for (let i = 1; i < options.length; i++) {
+      const nextIndex = (currentIndex + i) % options.length
+      const option = options[nextIndex]
+      if (this.isOptionSelectable(option)) {
+        return option
+      }
+    }
+
+    return currentOption // Return current if no other selectable option found
+  }
+
+  /**
+   * Gets the previous selectable option before the current one, wrapping around if needed
+   */
+  protected getPreviousSelectableOption(currentOption: UiOption): UiOption | null {
+    const options = Array.from(this.querySelectorAll<UiOption>('ui-option'))
+    const currentIndex = options.indexOf(currentOption)
+
+    if (currentIndex === -1) {
+      return this.getLastSelectableOption()
+    }
+
+    // Start from the previous option and wrap around
+    for (let i = 1; i < options.length; i++) {
+      const prevIndex = (currentIndex - i + options.length) % options.length
+      const option = options[prevIndex]
+      if (this.isOptionSelectable(option)) {
+        return option
+      }
+    }
+
+    return currentOption // Return current if no other selectable option found
+  }
+
+  /**
+   * Checks if an option is selectable (not disabled and not hidden)
+   */
+  protected isOptionSelectable(option: UiOption): boolean {
+    if (option.disabled) {
+      return false
+    }
+    if (option.hasAttribute('disabled')) {
+      return false
+    }
+    if (option.hidden && option.hasAttribute('hidden')) {
+      return false
+    }
+    return true
+  }
+
   handleSelect(e: CustomEvent<{ item: UiOption }>): void {
     e.stopPropagation()
     const item = e.detail.item
+    if (this.selectedOption && this.selectedOption !== item) {
+      this.selectedOption.selected = false
+    }
+    item.selected = true
     this.selectedOption = item
     this.#value = item.value
     this.#internals.setFormValue(this.value ?? null)
@@ -510,16 +651,18 @@ export default class UiSelect extends LitElement {
       composed: true,
     })
     this.dispatchEvent(changeEvent)
-    this.focus()
-  }
-
-  handleHighlightChange(e: CustomEvent<{ item: UiOption | null }>): void {
-    this.ariaActiveDescendant = e.detail.item?.id
+    // Focus will be returned to select element by handleOpenChange when open=false
   }
 
   handleMenuClose(): void {
     this.open = false
-    this.focus()
+    // Focus will be returned to select element by handleOpenChange when open=false
+  }
+
+  handleMenuToggle(e: ToggleEvent): void {
+    if (e.newState === 'closed') {
+      this.open = false
+    }
   }
 
   protected renderInput(): TemplateResult {
@@ -560,7 +703,7 @@ export default class UiSelect extends LitElement {
       selector="ui-option"
       @select="${this.handleSelect}"
       @close="${this.handleMenuClose}"
-      @highlightchange="${this.handleHighlightChange}"
+      @toggle="${this.handleMenuToggle}"
     >
       <slot @slotchange="${this.handleSlotChange}"></slot>
     </ui-menu>`
@@ -586,8 +729,6 @@ export default class UiSelect extends LitElement {
       'disabled': this.disabled,
     })
     return html`${this.renderFocusRing()}
-      <div class="${classes}" aria-activedescendant=${this.ariaActiveDescendant || ''}>
-        ${this.renderInput()} ${this.renderMenu()}
-      </div> `
+      <div class="${classes}">${this.renderInput()} ${this.renderMenu()}</div> `
   }
 }