@api-client/ui 0.3.1 → 0.3.3

package/src/md/tabs/internals/Tabs.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'
+import { html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { property, query, queryAssignedElements, state } from 'lit/decorators.js'
 import { ClassInfo, classMap } from 'lit/directives/class-map.js'
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js'
@@ -11,9 +11,19 @@ import '../../icons/ui-icon.js'
 export type TabsPriority = 'primary' | 'secondary'
 
 export interface TabSelectionDetail {
+  /**
+   * The selected tab.
+   */
   item: UiTab
+  /**
+   * The index of the selected tab.
+   */
   index: number
-  select: string | null
+}
+
+export interface SizingInfo {
+  left: number
+  width: number
 }
 
 /**
@@ -29,61 +39,91 @@ export function calcPercent(w: number, w0: number): number {
 /**
  * A container for tabs.
  *
- * @fires select - A non bubbling event when selection change through user interaction.
- *                The `event.detail` object contains the `item` and `index` properties.
- *                It also has the `select` property with the value of the `selectedAttribute` on the tab.
+ * @fires change - A non bubbling event when selection change through user interaction.
  */
 export default class UiTabs extends LitElement {
-  items: UiTab[] = []
-
   activeItem: UiTab | null = null
 
   previousItem: UiTab | null = null
 
-  @queryAssignedElements({ flatten: true })
-  protected accessor assignedElements!: HTMLElement[]
-
-  @query('.pointer') protected accessor pointer!: HTMLElement
-
-  @query('.content') protected accessor content!: HTMLElement
-
   /**
-   * The priority of the tabs.
-   *
-   * @default primary
-   * @attribute
+   * The currently selected tab, `null` only when there are no tab children.
    */
-  @property({ type: String, reflect: true }) accessor priority: TabsPriority = 'primary'
+  get activeTab(): UiTab | null {
+    return this.tabs.find((tab) => tab.selected) ?? null
+  }
+
+  set activeTab(tab: UiTab | null) {
+    // Ignore setting activeTab to null. As long as there are children, one tab
+    // must be selected.
+    if (tab) {
+      this.activateTab(tab)
+    }
+  }
 
   /**
-   * If true, tabs are scrollable and the tab width is based on the label width.
-   * @attribute
+   * The index of the currently selected tab.
    */
-  @property({ type: Boolean }) accessor scrollable: boolean | undefined
+  get activeTabIndex() {
+    return this.tabs.findIndex((tab) => tab.selected)
+  }
 
   /**
-   * The value of the selected tab.
-   * This is matched with the `aria-controls` of the tab.
-   * @attribute
+   * Sets the active tab by index.
    */
-  @property({ type: String }) accessor selected: string | undefined
+  set activeTabIndex(index) {
+    const activateTabAtIndex = () => {
+      const tab = this.tabs[index]
+      // Ignore out-of-bound indices.
+      if (tab) {
+        this.activateTab(tab)
+      }
+    }
+    if (!this.slotElement) {
+      // This is needed to support setting the activeTabIndex via a lit property
+      // binding.
+      //
+      // ```ts
+      // html`
+      //   <md-tabs .activeTabIndex=${1}>
+      //     <md-tab>First</md-tab>
+      //     <md-tab>Second</md-tab>
+      //   </md-tabs>
+      // `;
+      // ```
+      //
+      // It's needed since lit's rendering lifecycle is asynchronous, and the
+      // `<slot>` element hasn't rendered, so `tabs` is empty.
+      this.updateComplete.then(activateTabAtIndex)
+      return
+    }
+    activateTabAtIndex()
+  }
+
+  get focusedTab() {
+    return this.tabs.find((tab) => tab.matches(':focus-within'))
+  }
+
+  @queryAssignedElements({ flatten: true, selector: 'ui-tab' }) private accessor tabs!: UiTab[]
+
+  @query('.tabs') private accessor tabsScrollerElement!: HTMLElement
+  @query('slot') private accessor slotElement!: HTMLSlotElement
+
+  @query('.pointer') private accessor pointer!: HTMLElement
 
   /**
-   * The attribute on the `ui-tab` that indicates which value for `selected`
-   * corresponds to which tab.
+   * The priority of the tabs.
    *
-   * @default aria-controls
+   * @default primary
    * @attribute
    */
-  @property({ type: String }) accessor selectedAttribute = `aria-controls`
-
-  @state() protected accessor pointerStyles: StyleInfo | undefined
+  @property({ type: String, reflect: true }) accessor priority: TabsPriority = 'primary'
 
-  protected contentScroll?: number
+  @state() private accessor pointerStyles: StyleInfo | undefined
 
-  @state() protected accessor indicated = false
+  @state() private accessor indicated = false
 
-  protected observer: IntersectionObserver
+  private observer: IntersectionObserver
 
   /**
    * This is set by the intersection observer. Once the tabs are in the view it turns to `true`.
@@ -91,13 +131,23 @@ export default class UiTabs extends LitElement {
    */
   @state() accessor isVisible: boolean | undefined
 
+  /**
+   * Whether or not to automatically select a tab when it is focused.
+   */
+  @property({ type: Boolean }) accessor autoActivate = false
+
+  private readonly internals = (this as HTMLElement).attachInternals()
+
   constructor() {
     super()
-
+    this.internals.role = 'tablist'
     this.observer = new IntersectionObserver(this.intersectionCallback.bind(this), {
       threshold: 1.0,
       rootMargin: '0px',
     })
+    this.addEventListener('keydown', this.handleKeydown.bind(this))
+    this.addEventListener('keyup', this.handleKeyup.bind(this))
+    this.addEventListener('focusout', this.handleFocusout.bind(this))
   }
 
   protected override willUpdate(cp: PropertyValues<this>): void {
@@ -109,10 +159,10 @@ export default class UiTabs extends LitElement {
 
   override connectedCallback(): void {
     super.connectedCallback()
+    this.observer.observe(this)
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'tablist')
     }
-    this.observer.observe(this)
   }
 
   override disconnectedCallback(): void {
@@ -125,106 +175,29 @@ export default class UiTabs extends LitElement {
     this.isVisible = entry.isIntersecting
   }
 
-  protected async updateItems(): Promise<void> {
-    const elements = this.assignedElements || []
-    const items = elements.filter(this.isTabItem, this)
-    this.items = items
-    if (this.activeItem && !items.includes(this.activeItem)) {
-      this.activeItem = null
-    }
-    await this.updateComplete
-    this.ensureSelection()
-  }
-
   /**
-   * @return Whether the given element is a list item element.
+   * Scrolls the toolbar, if overflowing, to the active tab, or the provided
+   * tab.
+   *
+   * @param tabToScrollTo The tab that should be scrolled to. Defaults to the
+   *     active tab.
+   * @return A Promise that resolves after the tab has been scrolled to.
    */
-  protected isTabItem(element: Element): element is UiTab {
-    if (element.nodeType !== Node.ELEMENT_NODE) {
-      return false
-    }
-    return element.localName === 'ui-tab'
-  }
-
-  protected isSelectable(element: UiTab): boolean {
-    if (element.disabled) {
-      return false
-    }
-    if (element.hidden && element.hasAttribute('hidden')) {
-      return false
-    }
-    return true
-  }
-
-  protected ensureSelection(): void {
-    const { selected, selectedAttribute, activeItem, items } = this
-    if (!selectedAttribute) {
-      return
-    }
-    const item = items.find((i) => i.getAttribute(selectedAttribute) === selected)
-    if (item && item === activeItem) {
-      return
-    }
-    this.makeSelection(item)
-  }
-
-  protected makeSelection(tab?: UiTab, focus = false): void {
-    const { activeItem } = this
-    if (activeItem === tab) {
-      tab.highlight()
-      return
-    }
-    this.previousItem = activeItem
-    if (activeItem) {
-      this.deselectItem(activeItem)
-    }
-    if (tab) {
-      this.selectItem(tab, focus)
-      this.positionPointer(tab, activeItem)
-      if (this.activeItem) {
-        // we set this here so we won't notify selection when initializing.
-        this.notifySelect(tab)
-      }
-    }
-  }
-
-  notifySelect(item: UiTab): void {
-    const index = this.items.indexOf(item)
-    if (index === -1) {
+  async scrollToTab(tabToScrollTo?: UiTab | null) {
+    await this.updateComplete
+    const { tabs } = this
+    tabToScrollTo ??= this.activeTab
+    if (!tabToScrollTo || !tabs.includes(tabToScrollTo) || !this.tabsScrollerElement) {
       return
     }
-    const attrValue = item.getAttribute(this.selectedAttribute)
-    this.dispatchEvent(
-      new CustomEvent<TabSelectionDetail>('select', {
-        detail: {
-          item,
-          index,
-          select: attrValue,
-        },
-      })
-    )
-  }
-
-  protected selectItem(tab: UiTab, focus = false): void {
-    this.activeItem = tab
-    if (this.hasAttribute('tabindex')) {
-      this.removeAttribute('tabindex')
-    }
-    tab.setAttribute('aria-selected', 'true')
-    tab.setAttribute('tabindex', '0')
-    tab.selected = true
-    tab.priority = this.priority
-    tab.scrollIntoView({ inline: 'nearest', behavior: 'auto', block: 'nearest' })
-    if (focus) {
-      tab.focus()
-    }
-  }
 
-  protected deselectItem(tab: UiTab): void {
-    tab.setAttribute('aria-selected', 'false')
-    tab.setAttribute('tabindex', '-1')
-    tab.selected = false
-    tab.indicated = false
+    // wait for tabs to render.
+    await Promise.all(tabs.map((tab) => tab.updateComplete))
+    tabToScrollTo.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+      behavior: !this.focusedTab ? 'instant' : 'auto',
+    })
   }
 
   protected handleVisibility(): void {
@@ -236,11 +209,12 @@ export default class UiTabs extends LitElement {
   }
 
   protected async positionPointer(tab: UiTab, old?: UiTab | null): Promise<void> {
-    const { items, pointer, isVisible } = this
+    const { pointer, isVisible } = this
     if (!isVisible) {
+      tab.indicated = true
       return
     }
-    const index = items.indexOf(tab)
+    const index = this.tabs.indexOf(tab)
     if (index < 0 || !pointer) {
       this.pointerStyles = undefined
       return
@@ -252,29 +226,31 @@ export default class UiTabs extends LitElement {
       return
     }
     const isPrimary = this.priority === 'primary'
-    const final = isPrimary ? this.getPrimaryLeft(tab) : this.getSecondaryLeft(tab)
-    if (this.pointerStyles && this.pointerStyles.left === `${final}px`) {
+    const final = this.getTabSizing(tab)
+    if (this.pointerStyles && this.pointerStyles.left === `${final.left}px`) {
+      tab.indicated = true
       return
     }
 
     // first position this indicator in the place of the old one.
     // update the view and then run the animation.
     this.indicated = true
-    const left = isPrimary ? this.getPrimaryLeft(old) : this.getSecondaryLeft(old)
-    this.pointerStyles = { left }
+    const starting = this.getTabSizing(old)
+    this.pointerStyles = { left: `${starting.left}px`, width: `${starting.width}px` }
     await this.updateComplete
-    const frames = isPrimary ? this.getPrimaryKeyframes(left, final) : this.getSecondaryKeyframes(left, final)
+    const frames = isPrimary ? this.getPrimaryKeyframes(starting, final) : this.getSecondaryKeyframes(starting, final)
 
     if (this.moveAnimation) {
       this.moveAnimation.cancel()
     }
     const moveAnimation = pointer.animate(frames, {
-      duration: 360,
+      duration: 200,
       iterations: 1,
-      easing: Easing.DECELERATION,
+      easing: Easing.EMPHASIZED_DECELERATE,
     })
     const finalStyles: StyleInfo = {
-      left: `${final}px`,
+      left: `${final.left}px`,
+      width: `${final.width}px`,
     }
     moveAnimation.addEventListener('finish', () => {
       this.pointerStyles = finalStyles
@@ -290,198 +266,194 @@ export default class UiTabs extends LitElement {
 
   protected moveAnimation?: Animation
 
-  protected getPrimaryLeft(tab: UiTab): string {
-    const contentBox = this.content.getBoundingClientRect()
-    const tabRect = tab.getBoundingClientRect()
-    const leftFromParent = tabRect.x - contentBox.x
-    const offset = this.scrollable ? 48 : 0 // left button
-    const left = leftFromParent + tabRect.width / 2 - 20 + offset
-    return `${left}px`
-  }
-
-  protected getSecondaryLeft(tab: UiTab): string {
-    const contentBox = this.content.getBoundingClientRect()
-    const tabRect = tab.getBoundingClientRect()
-    const offset = this.scrollable ? 48 : 0 // left button
-    const leftFromParent = tabRect.x - contentBox.x + offset
-    return `${leftFromParent}px`
+  protected getTabSizing(tab: UiTab): SizingInfo {
+    const contentBox = this.tabsScrollerElement.getBoundingClientRect()
+    const sizing = tab.getIndicatorSizing()
+    sizing.left = sizing.left - contentBox.x
+    return sizing
   }
 
-  protected getPrimaryKeyframes(start: string, final: string): Keyframe[] {
+  protected getPrimaryKeyframes(start: SizingInfo, final: SizingInfo): Keyframe[] {
     return [
       {
-        left: start,
-        width: `40px`,
+        left: `${start.left}px`,
+        width: `${start.width}px`,
       },
       {
-        width: `80px`,
-      },
-      {
-        left: final,
-        width: `40px`,
+        left: `${final.left}px`,
+        width: `${final.width}px`,
       },
     ]
   }
 
-  protected getSecondaryKeyframes(start: string, final: string): Keyframe[] {
+  protected getSecondaryKeyframes(start: SizingInfo, final: SizingInfo): Keyframe[] {
     return [
       {
-        left: start,
+        left: `${start.left}px`,
+        width: `${start.width}px`,
       },
       {
-        left: final,
+        left: `${final.left}px`,
+        width: `${final.width}px`,
       },
     ]
   }
 
-  protected contentClickHandler(e: PointerEvent): void {
-    this.activateFromEvent(e)
-  }
-
-  protected contentKeyDownHandler(e: KeyboardEvent): void {
-    if (['Enter', 'Space'].includes(e.code)) {
-      this.activateFromEvent(e)
+  protected async handleTabClick(e: PointerEvent): Promise<void> {
+    const tab = e.composedPath().find((el) => isTab(el)) as UiTab | undefined
+    // Allow event to bubble
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    if (e.defaultPrevented || !tab || tab.selected) {
+      return
     }
+    this.activateTab(tab)
   }
 
-  protected activateFromEvent(e: Event): void {
-    const { items } = this
-    const path = e.composedPath()
-    let item: UiTab | undefined
-    while (!item) {
-      const next = path.shift() as UiTab
-      if (!next) {
-        break
+  private activateTab(activeTab: UiTab): void {
+    const { tabs } = this
+    const previousTab = this.activeTab
+    if (!tabs.includes(activeTab) || previousTab === activeTab) {
+      // Ignore setting activeTab to a tab element that is not a child.
+      return
+    }
+    for (const tab of tabs) {
+      tab.selected = tab === activeTab
+    }
+    if (previousTab) {
+      // Don't dispatch a change event if activating a tab when no previous tabs
+      // were selected, such as when md-tabs auto-selects the first tab.
+      const detail: TabSelectionDetail = {
+        item: activeTab,
+        index: this.tabs.indexOf(activeTab),
       }
-      if (items.includes(next)) {
-        item = next
+      const defaultPrevented = !this.dispatchEvent(
+        new CustomEvent('change', { detail, bubbles: false, cancelable: true })
+      )
+      if (defaultPrevented) {
+        for (const tab of tabs) {
+          tab.selected = tab === previousTab
+        }
+        return
       }
+      previousTab.indicated = false
     }
-    if (!item) {
-      return
+    activeTab.indicated = false
+    this.positionPointer(activeTab, previousTab)
+    this.updateFocusableTab(activeTab)
+    this.scrollToTab(activeTab)
+  }
+
+  private updateFocusableTab(focusableTab: UiTab) {
+    for (const tab of this.tabs) {
+      tab.tabIndex = tab === focusableTab ? 0 : -1
     }
-    this.makeSelection(item, true)
   }
 
-  protected handleScrollLeft(): void {
-    const { contentScroll = 0, content } = this
-    if (contentScroll === 0) {
+  private async handleKeydown(event: KeyboardEvent) {
+    // Allow event to bubble.
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    const isLeft = event.key === 'ArrowLeft'
+    const isRight = event.key === 'ArrowRight'
+    const isHome = event.key === 'Home'
+    const isEnd = event.key === 'End'
+    // Ignore non-navigation keys
+    if (event.defaultPrevented || (!isLeft && !isRight && !isHome && !isEnd)) {
       return
     }
-    let left = contentScroll - 80
-    if (left < 0) {
-      left = 0
+
+    const { tabs } = this
+    // Don't try to select another tab if there aren't any.
+    if (tabs.length < 2) {
+      return
     }
-    this.contentScroll = left
-    content.scrollTo({
-      behavior: 'smooth',
-      left,
-    })
-  }
 
-  protected handleScrollRight(): void {
-    const { contentScroll = 0, content } = this
-    let left = contentScroll + 80
-    if (left + content.clientWidth > content.scrollWidth) {
-      left = content.scrollWidth - content.clientWidth
+    // Prevent default interactions, such as scrolling.
+    event.preventDefault()
+
+    let indexToFocus: number
+    if (isHome || isEnd) {
+      indexToFocus = isHome ? 0 : tabs.length - 1
+    } else {
+      // Check if moving forwards or backwards
+      const isRtl = getComputedStyle(this).direction === 'rtl'
+      const forwards = isRtl ? isLeft : isRight
+      const { focusedTab } = this
+      if (!focusedTab) {
+        // If there is not already a tab focused, select the first or last tab
+        // based on the direction we're traveling.
+        indexToFocus = forwards ? 0 : tabs.length - 1
+      } else {
+        const focusedIndex = this.tabs.indexOf(focusedTab)
+        indexToFocus = forwards ? focusedIndex + 1 : focusedIndex - 1
+        if (indexToFocus >= tabs.length) {
+          // Return to start if moving past the last item.
+          indexToFocus = 0
+        } else if (indexToFocus < 0) {
+          // Go to end if moving before the first item.
+          indexToFocus = tabs.length - 1
+        }
+      }
+    }
+
+    const tabToFocus = tabs[indexToFocus]
+    tabToFocus.focus()
+    if (this.autoActivate) {
+      this.activateTab(tabToFocus)
+    } else {
+      this.updateFocusableTab(tabToFocus)
     }
-    this.contentScroll = left
-    content.scrollTo({
-      behavior: 'smooth',
-      left,
-    })
   }
 
-  protected handleScroll(e: Event): void {
-    const div = e.target as HTMLElement
-    this.contentScroll = div.scrollLeft
+  // scroll to item on keyup.
+  private handleKeyup() {
+    this.scrollToTab(this.focusedTab ?? this.activeTab)
   }
 
-  protected handleKeyDown(e: KeyboardEvent): void {
-    if (e.code === 'ArrowRight') {
-      e.preventDefault()
-      const tab = this.activeItem ? this.getNextItem(this.activeItem) : this.items[0]
-      this.makeSelection(tab, true)
-    } else if (e.code === 'ArrowLeft') {
-      e.preventDefault()
-      const tab = this.activeItem ? this.getPreviousItem(this.activeItem) : this.items[0]
-      this.makeSelection(tab, true)
+  private handleFocusout() {
+    // restore focus to selected item when blurring the tab bar.
+    if (this.matches(':focus-within')) {
+      return
     }
-  }
 
-  getPreviousItem(item: UiTab): UiTab {
-    const { items } = this
-    const curIndex = items.indexOf(item)
-    if (curIndex < 0) {
-      return item
+    const { activeTab } = this
+    if (activeTab) {
+      this.updateFocusableTab(activeTab)
     }
-    let i = curIndex
-    let result: HTMLElement | undefined
-    do {
-      i--
-      if (i === curIndex) {
-        // looped back from the end, no active element to find.
-        return item
-      }
-      const tmp = items[i]
-      if (!tmp) {
-        i = items.length
-        continue
-      }
-      if (this.isSelectable(tmp)) {
-        result = tmp
-      }
-    } while (!result)
-    return (result as UiTab) || item
   }
 
-  getNextItem(item: UiTab): UiTab {
-    const { items } = this
-    const curIndex = items.indexOf(item)
-    if (curIndex < 0) {
-      return item
-    }
-    let i = curIndex
-    let next: HTMLElement | undefined
-    do {
-      i++
-      if (i === curIndex) {
-        // looped back from the start, no active element to find.
-        return item
-      }
-      const tmp = items[i]
-      if (!tmp) {
-        i = -1
-        continue
+  private handleSlotChange() {
+    for (const tab of this.tabs) {
+      tab.priority = this.priority
+      if (tab.selected) {
+        tab.indicated = true
       }
-      if (this.isSelectable(tmp)) {
-        next = tmp
-      }
-    } while (!next)
-    return (next as UiTab) || item
+    }
+    const firstTab = this.tabs[0]
+    if (!this.activeTab && firstTab) {
+      // If the active tab was removed, auto-select the first one. There should
+      // always be a selected tab while the bar has children.
+      this.activateTab(firstTab)
+    }
+
+    // When children shift, ensure the active tab is visible. For example, if
+    // many children are added before the active tab, it'd be pushed off screen.
+    // This ensures it stays visible.
+    this.scrollToTab(this.activeTab)
+    if (this.activeTab) {
+      this.updateFocusableTab(this.activeTab)
+    }
   }
 
   override render(): TemplateResult {
-    const classes: ClassInfo = {
-      surface: true,
-      scrollable: !!this.scrollable,
-    }
     return html`
-      <div class="${classMap(classes)}">
-        ${this.renderLeftScrollControl()}
-        <div class="content" @scroll="${this.handleScroll}" @keydown="${this.handleKeyDown}">${this.renderSlot()}</div>
-        ${this.rightScrollControl()} ${this.renderIndicator()}
-        <div class="divider"></div>
-      </div>
+      <div class="tabs">${this.renderSlot()}</div>
+      ${this.renderIndicator()}
+      <ui-divider class="divider"></ui-divider>
     `
   }
 
   protected renderSlot(): TemplateResult {
-    return html`<slot
-      @slotchange="${this.updateItems}"
-      @click="${this.contentClickHandler}"
-      @keydown="${this.contentKeyDownHandler}"
-    ></slot>`
+    return html`<slot @slotchange="${this.handleSlotChange}" @click="${this.handleTabClick}"></slot>`
   }
 
   protected renderIndicator(): TemplateResult {
@@ -497,26 +469,8 @@ export default class UiTabs extends LitElement {
       </div>
     `
   }
+}
 
-  protected renderLeftScrollControl(): TemplateResult | typeof nothing {
-    if (!this.scrollable) {
-      return nothing
-    }
-    return html` <div class="scroll-control left">
-      <ui-icon-button aria-label="Scroll tabs left" title="Scroll tabs left" @click="${this.handleScrollLeft}">
-        <ui-icon icon="chevronLeft"></ui-icon>
-      </ui-icon-button>
-    </div>`
-  }
-
-  protected rightScrollControl(): TemplateResult | typeof nothing {
-    if (!this.scrollable) {
-      return nothing
-    }
-    return html`<div class="scroll-control right">
-      <ui-icon-button aria-label="Scroll tabs right" title="Scroll tabs right" @click="${this.handleScrollRight}">
-        <ui-icon icon="chevronRight"></ui-icon>
-      </ui-icon-button>
-    </div>`
-  }
+function isTab(element: unknown): element is UiTab {
+  return element instanceof UiTab
 }