@api-client/ui 0.5.37 → 0.5.39

package/src/md/list/internals/ListItem.ts

@@ -13,6 +13,7 @@ export enum ListItemLines {
   one = 'one',
   two = 'two',
   three = 'three',
+  auto = 'auto',
 }
 
 export enum ListItemImage {
@@ -24,28 +25,42 @@ export enum ListItemImage {
 }
 
 /**
- * @slot
- * @slot overline
- * @slot start
- * @slot end
- * @slot end-text
- * @slot supporting-text
+ * @slot - The main content of the list item, typically a label or title.
+ * @slot overline - The text displayed above the main content.
+ * @slot start - The content displayed at the start of the list item.
+ * @slot end - The content displayed at the end of the list item.
+ * @slot end-text - The text displayed at the end of the list item.
+ * @slot supporting-text - The supporting text displayed below the main content.
  */
 export default class UiListItem extends UiElement {
   @query('ui-ripple') accessor ripple!: UiRipple
 
+  #lines: ListItemLines = ListItemLines.one
+
+  get lines(): ListItemLines {
+    if (this.#lines === ListItemLines.auto) {
+      return this.hasOverline || this.hasSupportingText ? ListItemLines.two : ListItemLines.one
+    }
+    return this.#lines
+  }
+
   /**
-   * Whether the chip is disabled. The user can't interact with the chip when `true`.
+   * The number of lines to render the list template for.
+   * @default ListItemLines.one
    * @attribute
    */
-  @property({ type: Boolean, reflect: true }) accessor disabled = false
+  @property({ type: String, reflect: true })
+  set lines(value: ListItemLines) {
+    const oldValue = this.#lines
+    this.#lines = value
+    this.requestUpdate('lines', oldValue)
+  }
 
   /**
-   * The number of lines to render the list template for.
-   * @default ListItemLines.one
+   * Whether the chip is disabled. The user can't interact with the chip when `true`.
    * @attribute
    */
-  @property({ type: String, reflect: true }) accessor lines: ListItemLines
+  @property({ type: Boolean, reflect: true }) accessor disabled = false
 
   /**
    * The type of the list image.
@@ -67,12 +82,14 @@ export default class UiListItem extends UiElement {
   @state() accessor hasStartItem = false
   @state() accessor hasEndItem = false
   @state() accessor hasEndTextItem = false
+  @state() accessor hasOverline = false
+  @state() accessor hasSupportingText = false
 
   constructor() {
     super()
 
-    this.lines = ListItemLines.one
     this.image = ListItemImage.icon
+    this.lines = ListItemLines.one
 
     this.addEventListener('click', this.handleClick.bind(this))
     this.addEventListener('pointerdown', this.handlePointerDown.bind(this))
@@ -195,49 +212,57 @@ export default class UiListItem extends UiElement {
     this.removeAttribute('tabindex')
   }
 
-  protected handleStartSlotChange(): void {
-    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="start"]')
-    if (slot) {
-      this.hasStartItem = slot.assignedNodes({ flatten: true }).length > 0
-    } else {
-      this.hasStartItem = false
-    }
+  private _handleSlotChange(event: Event): boolean {
+    const slot = event.target as HTMLSlotElement
+    return slot.assignedNodes({ flatten: true }).length > 0
+  }
+
+  protected handleOverlineSlotChange(event: Event): void {
+    this.hasOverline = this._handleSlotChange(event)
     this.requestUpdate()
   }
 
-  protected handleEndSlotChange(): void {
-    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="end"]')
-    if (slot) {
-      this.hasEndItem = slot.assignedNodes({ flatten: true }).length > 0
-    } else {
-      this.hasEndItem = false
-    }
+  protected handleSupportingTextSlotChange(event: Event): void {
+    this.hasSupportingText = this._handleSlotChange(event)
     this.requestUpdate()
   }
 
-  protected handleEndTextSlotChange(): void {
-    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="end-text"]')
-    if (slot) {
-      this.hasEndTextItem = slot.assignedNodes({ flatten: true }).length > 0
-    } else {
-      this.hasEndTextItem = false
-    }
+  protected handleStartSlotChange(event: Event): void {
+    this.hasStartItem = this._handleSlotChange(event)
+    this.requestUpdate()
+  }
+
+  protected handleEndSlotChange(event: Event): void {
+    this.hasEndItem = this._handleSlotChange(event)
     this.requestUpdate()
   }
 
+  protected handleEndTextSlotChange(event: Event): void {
+    this.hasEndTextItem = this._handleSlotChange(event)
+    this.requestUpdate()
+  }
+
+  getSurfaceClasses(): ClassInfo {
+    const result: ClassInfo = {
+      'surface': true,
+      'one-line': this.lines === ListItemLines.one,
+      'two-lines': this.lines === ListItemLines.two,
+      'three-lines': this.lines === ListItemLines.three,
+    }
+    return result
+  }
+
   protected override render(): TemplateResult {
-    const surfaceClasses = classMap({
-      surface: true,
-    })
     return html`
       ${this.renderFocusRing()} ${this.renderRipple()}
-      <div class="${surfaceClasses}">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>
+      <div class="${classMap(this.getSurfaceClasses())}">
+        ${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}
+      </div>
     `
   }
 
   protected renderRipple = (): TemplateResult => {
-    const { disabled, static: isStatic } = this
-    return html`<ui-ripple class="ripple" ?disabled="${disabled || isStatic}"></ui-ripple>`
+    return html`<ui-ripple class="ripple" ?disabled="${this.disabled || this.static}"></ui-ripple>`
   }
 
   protected renderFocusRing(): TemplateResult {
@@ -278,13 +303,13 @@ export default class UiListItem extends UiElement {
   }
 
   protected renderBody(): TemplateResult {
-    const { lines = ListItemLines.one } = this
-    const hasSupportingText = lines !== ListItemLines.one
     return html`
       <div class="body">
-        <slot name="overline"></slot>
+        <slot name="overline" @slotchange=${this.handleOverlineSlotChange}></slot>
         <span class="headline"><slot></slot></span>
-        ${hasSupportingText ? html`<span class="supporting-text"><slot name="supporting-text"></slot></span>` : ''}
+        <span class="supporting-text"
+          ><slot name="supporting-text" @slotchange=${this.handleSupportingTextSlotChange}></slot
+        ></span>
       </div>
     `
   }

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

@@ -1,7 +1,7 @@
 import { html, PropertyValues, TemplateResult } from 'lit'
 import { property } from 'lit/decorators.js'
-import { classMap } from 'lit/directives/class-map.js'
-import UiListItem from '../../list/internals/ListItem.js'
+import { ClassInfo, classMap } from 'lit/directives/class-map.js'
+import UiListItem, { ListItemLines } from '../../list/internals/ListItem.js'
 import { nanoid } from 'nanoid'
 
 /**
@@ -89,11 +89,14 @@ export default class UiOption extends UiListItem {
     return content.join(' ').trim() || this.value || ''
   }
 
+  constructor() {
+    super()
+    this.lines = ListItemLines.auto
+  }
+
   /**
    * Initializes the option when it's connected to the DOM. Sets up ARIA attributes
    * and generates a unique ID if one isn't provided.
-   *
-   * @protected
    */
   override connectedCallback(): void {
     super.connectedCallback()
@@ -106,9 +109,6 @@ export default class UiOption extends UiListItem {
   /**
    * Handles property updates and triggers appropriate side effects.
    * Currently monitors the `selected` property to update selection state.
-   *
-   * @param {PropertyValues<this>} changedProperties - Map of changed properties
-   * @protected
    */
   protected override updated(changedProperties: PropertyValues<this>): void {
     super.updated(changedProperties)
@@ -143,7 +143,7 @@ export default class UiOption extends UiListItem {
    * Handles click events on the option. Prevents default behavior and dispatches
    * a custom 'select' event that the parent select component can listen to.
    *
-   * @param {MouseEvent} e - The click event
+   * @param e - The click event
    * @protected
    * @fires select - Custom event with option details in event.detail
    * @example
@@ -175,23 +175,11 @@ export default class UiOption extends UiListItem {
     )
   }
 
-  /**
-   * Renders the option's template. Creates the main structure with focus ring,
-   * ripple effect, and content areas.
-   *
-   * @returns {TemplateResult} The rendered template
-   * @protected
-   */
-  protected override render(): TemplateResult {
-    const surfaceClasses = classMap({
-      surface: true,
+  override getSurfaceClasses(): ClassInfo {
+    return {
+      ...super.getSurfaceClasses(),
       selected: this.selected,
-    })
-
-    return html`
-      ${this.renderFocusRing()} ${this.renderRipple()}
-      <div class="${surfaceClasses}">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>
-    `
+    }
   }
 
   /**
@@ -200,10 +188,10 @@ export default class UiOption extends UiListItem {
    */
   protected override renderEnd(): TemplateResult {
     return html`
-      <div class="end">
+      <div class="${classMap(this.getEndClasses())}">
         ${this.selected ? html`<ui-icon icon="check" class="selection-icon"></ui-icon>` : ''}
         <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
-        <slot name="end-text" class="trailing-supporting-text"></slot>
+        <slot name="end-text" class="trailing-supporting-text" @slotchange=${this.handleEndTextSlotChange}></slot>
       </div>
     `
   }

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

@@ -354,12 +354,17 @@ export default class UiSelect extends LitElement {
 
   protected override firstUpdated(cp: PropertyValues): void {
     super.firstUpdated(cp)
-    this.setCurrentOption()
-    this.#internals.setFormValue(this.value ?? null)
+    this.updateComplete.then(() => {
+      this.setCurrentOption()
+      this.#internals.setFormValue(this.value ?? null)
+      // We need to update here as event with `value` and `selectedOption`
+      // already set, the `renderValue` might have incorrect value
+      // due to the DOM update.
+      this.requestUpdate()
+    })
   }
 
-  protected async setCurrentOption(): Promise<void> {
-    await this.updateComplete
+  protected setCurrentOption(): void {
     const options = this.querySelectorAll<UiOption>('ui-option')
     if (this.value) {
       this.selectedOption = Array.from(options).find((option) => option.value === this.value) || null
@@ -459,6 +464,11 @@ export default class UiSelect extends LitElement {
     if (this.disabled || e.defaultPrevented) return
     e.preventDefault()
     e.stopPropagation()
+    if (this.open && e.target === this) {
+      // If the select is already open and clicked again, close it
+      this.open = false
+      return
+    }
     this.open = true
   }
 
@@ -490,6 +500,7 @@ export default class UiSelect extends LitElement {
     const item = e.detail.item
     this.selectedOption = item
     this.#value = item.value
+    this.#internals.setFormValue(this.value ?? null)
     this.open = false
 
     // Dispatch change event
@@ -559,7 +570,7 @@ export default class UiSelect extends LitElement {
     // When options change, re-evaluate the current selection
     // only if we don't have an explicit value set
     if (!this.value) {
-      await this.setCurrentOption()
+      this.setCurrentOption()
       this.requestUpdate()
     }
   }

package/test/md/select/Select.test.ts

@@ -274,6 +274,35 @@ describe('md', () => {
         assert.equal(formData.get('fruit'), 'apple')
       })
 
+      it('should update form value on selection change', async () => {
+        const form = await formFixture()
+        const select = form.querySelector('ui-select')!
+
+        // Simulate selection of 'banana'
+        const bananaOption = select.querySelector('ui-option[value="banana"]') as UiOption
+        select.handleSelect(new CustomEvent('select', { detail: { item: bananaOption } }))
+        await select.updateComplete
+
+        const formData = new FormData(form)
+        assert.equal(formData.get('fruit'), 'banana', 'Form data should be "banana" after selection')
+      })
+
+      it('should clear form value when value is set to undefined', async () => {
+        const form = await formFixture()
+        const select = form.querySelector('ui-select')!
+        select.value = 'apple'
+        await select.updateComplete
+
+        let formData = new FormData(form)
+        assert.equal(formData.get('fruit'), 'apple', 'Form data should be "apple" initially')
+
+        select.value = undefined
+        await select.updateComplete
+
+        formData = new FormData(form)
+        assert.isNull(formData.get('fruit'), 'Form data should be null after clearing value')
+      })
+
       it('should not submit when no value selected', async () => {
         const form = await formFixture()
         const formData = new FormData(form)