@api-client/ui 0.5.53 → 0.5.55

package/package.json

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

package/src/core/ActivityManager.ts

@@ -373,7 +373,9 @@ export class ActivityManager {
           await target.activity.onPause()
           target.activity.lifecycle = ActivityLifecycle.Paused
         }
-        const intentCopy = structuredClone(intent)
+        // Let's create a shallow copy of the intent. We can disregard the ByReference flag here,
+        // as we override the data with the result data.
+        const intentCopy = { ...intent }
         intentCopy.data = activity.getResult()
         await target.activity.onActivityResult(requestCode, activity.resultCode, intentCopy)
       }

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/select/internals/Select.ts

@@ -36,6 +36,21 @@ export default class UiSelect extends UiElement {
    */
   #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.
@@ -282,6 +297,15 @@ export default class UiSelect extends UiElement {
     }
   }
 
+  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.
@@ -382,6 +406,13 @@ export default class UiSelect extends UiElement {
 
   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': {
@@ -487,10 +518,12 @@ export default class UiSelect extends UiElement {
       // 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 {
         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 }))
@@ -632,6 +665,89 @@ export default class UiSelect extends UiElement {
     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