@api-client/ui 0.5.52 → 0.5.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.52",
+  "version": "0.5.54",
   "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

@@ -9,7 +9,6 @@ export default css`
     margin: 0;
     padding: 0;
     border: none;
-    overflow: hidden;
     /* in most cases the max-height won't matter as this assumes the whole screen to be available, which is rarely the truth. */
     max-height: 90vh;
     overflow: auto;
@@ -27,6 +26,11 @@ export default css`
     position-area: top span-left;
   }
 
+  /* Special class set on the element to render the menu to take measurements */
+  :host(.measurements) {
+    display: block;
+  }
+
   :host(:popover-open) {
     display: block;
     background-color: var(--md-sys-color-surface-container);

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

@@ -74,12 +74,14 @@ export default class Menu extends UiList {
   }
 
   override togglePopover(force?: boolean): boolean {
+    if (!this.open && !this.disabled) {
+      this.positionMenu()
+    }
     this.open = !this.open
     this.ariaExpanded = String(this.open)
     this.tabIndex = this.open ? 0 : -1
     const result = super.togglePopover(force)
     if (this.open) {
-      this.positionMenu()
       this.focus()
     }
     return result
@@ -106,9 +108,9 @@ export default class Menu extends UiList {
   override showPopover(): void {
     this.tabIndex = 0 // Make menu focusable
     this.ariaExpanded = 'true'
+    this.positionMenu()
     super.showPopover()
     this.open = true
-    this.positionMenu()
     this.focus()
     this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))
   }
@@ -126,15 +128,20 @@ export default class Menu extends UiList {
   }
 
   positionMenu(): void {
-    // Let CSS anchor positioning handle the positioning automatically
-    // Only intervene if we need to set max-height for overflow cases
-    const box = this.getBoundingClientRect()
+    // for the frame, make the element visible (without animations)
+    // to take measurements correctly.
+    this.classList.add('measurements')
 
     // Reset any previous manual positioning to let CSS anchor positioning work
     this.style.removeProperty('position-area')
     this.style.removeProperty('max-height')
     this.style.removeProperty('max-width')
 
+    // Let CSS anchor positioning handle the positioning automatically
+    // Only intervene if we need to set max-height for overflow cases
+    const box = this.getBoundingClientRect()
+    this.classList.remove('measurements')
+
     // Check if the menu content is being clipped
     const isVerticallyClipped = this.scrollHeight > this.clientHeight
     const isHorizontallyClipped = this.scrollWidth > this.clientWidth
@@ -148,6 +155,11 @@ export default class Menu extends UiList {
     const viewportMiddle = innerHeight / 2
     const isMenuInUpperHalf = box.top < viewportMiddle
 
+    // console.log(`Menu positioned at: top=${box.top}, left=${box.left}, bottom=${menuBottom}, right=${menuRight}`)
+    // console.log(
+    // eslint-disable-next-line max-len
+    //   `Menu is in upper half: ${isMenuInUpperHalf}, Vertically clipped: ${isVerticallyClipped}, Horizontally clipped: ${isHorizontallyClipped}`
+    // )
     // Add CSS class to control animation direction
     if (isMenuInUpperHalf) {
       this.classList.add('menu-positioned-above')
@@ -156,7 +168,6 @@ export default class Menu extends UiList {
       this.classList.add('menu-positioned-below')
       this.classList.remove('menu-positioned-above')
     }
-
     // Only set max-height if the menu would overflow the viewport OR is already clipped
     if (menuBottom > innerHeight || isVerticallyClipped) {
       let availableHeight: number

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()
 
@@ -35,6 +36,21 @@ export default class UiSelect extends LitElement {
    */
   #value: string | undefined
 
+  /**
+   * Type-ahead search string accumulated from user typing
+   */
+  #typeAheadString = ''
+
+  /**
+   * Timer for resetting the type-ahead search string
+   */
+  #typeAheadTimer: number | null = null
+
+  /**
+   * Timeout duration for type-ahead reset (in milliseconds)
+   */
+  static readonly TYPE_AHEAD_TIMEOUT = 1000
+
   /**
    * The currently selected value. Corresponds to the `value` attribute of the selected `ui-option`.
    * When set programmatically, it will update the selected option if a matching option exists.
@@ -167,7 +183,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
 
   /**
@@ -281,6 +297,15 @@ export default class UiSelect extends LitElement {
     }
   }
 
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
+    // Clean up the type-ahead timer
+    if (this.#typeAheadTimer) {
+      clearTimeout(this.#typeAheadTimer)
+      this.#typeAheadTimer = null
+    }
+  }
+
   /**
    * Resets the select to its initial state. Called automatically when the parent
    * form is reset. Part of the form-associated custom element API.
@@ -381,6 +406,13 @@ export default class UiSelect extends LitElement {
 
   protected handleKeydown(e: KeyboardEvent): void {
     if (this.disabled || e.defaultPrevented) return
+
+    // Handle type-ahead for printable characters
+    if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+      this.handleTypeAhead(e.key.toLowerCase())
+      return
+    }
+
     if (this.open) {
       switch (e.key) {
         case 'Tab': {
@@ -400,27 +432,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 +494,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 +515,246 @@ 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()
+        this.selectedOption.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' })
       } else {
-        this.menu.highlightFirst()
+        const firstSelectableOption = this.getFirstSelectableOption()
+        if (firstSelectableOption) {
+          firstSelectableOption.focus()
+          firstSelectableOption.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' })
+        }
       }
       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
+  }
+
+  /**
+   * Handles type-ahead functionality for keyboard navigation
+   */
+  protected handleTypeAhead(char: string): void {
+    // Clear the existing timer
+    if (this.#typeAheadTimer) {
+      clearTimeout(this.#typeAheadTimer)
+    }
+
+    // Add the character to the search string
+    this.#typeAheadString += char
+
+    // Find the matching option
+    const matchingOption = this.findOptionByTypeAhead(this.#typeAheadString)
+    if (matchingOption) {
+      if (this.open) {
+        // If menu is open, focus the matching option
+        matchingOption.focus()
+      } else {
+        // If menu is closed, select the matching option
+        this.selectOption(matchingOption)
+      }
+    }
+
+    // Set a timer to reset the search string
+    this.#typeAheadTimer = window.setTimeout(() => {
+      this.#typeAheadString = ''
+      this.#typeAheadTimer = null
+    }, UiSelect.TYPE_AHEAD_TIMEOUT)
+  }
+
+  /**
+   * Finds an option that matches the type-ahead search string
+   */
+  protected findOptionByTypeAhead(searchString: string): UiOption | null {
+    const options = this.querySelectorAll<UiOption>('ui-option')
+
+    for (const option of options) {
+      if (!this.isOptionSelectable(option)) {
+        continue
+      }
+
+      // Get the option's text content for comparison
+      const optionText = this.getOptionDisplayText(option).toLowerCase()
+
+      if (optionText.startsWith(searchString)) {
+        return option
+      }
+    }
+
+    return null
+  }
+
+  /**
+   * Gets the display text for an option (either textContent or renderValue)
+   */
+  protected getOptionDisplayText(option: UiOption): string {
+    // Use renderValue if available, otherwise fall back to textContent
+    return option.renderValue || option.textContent?.trim() || ''
+  }
+
+  /**
+   * Selects an option and updates the component state
+   */
+  protected selectOption(option: UiOption): void {
+    if (this.selectedOption && this.selectedOption !== option) {
+      this.selectedOption.selected = false
+    }
+
+    option.selected = true
+    this.selectedOption = option
+    this.#value = option.value
+    this.#internals.setFormValue(this.value ?? null)
+
+    // Dispatch change event
+    const changeEvent = new CustomEvent<UiSelectChangeEvent>('change', {
+      detail: { value: this.value, item: option },
+      bubbles: false,
+      composed: true,
+    })
+    this.dispatchEvent(changeEvent)
   }
 
   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 +767,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 +819,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 +845,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> `
   }
 }