feat(tab-nav): adds optional closable functionality to individual `ta…

…b-titles` (#6740)

**Related Issue:** #2620

## Summary
`handleTabTitleClose` sequence is as follows:
> if `closed` item is `selected`, fall back on the next
> unless it's the last item, which falls back on previous
> closing non-selected items doesn't affect the `selected` tab
> last remaining item becomes `disabled`, if `closable`

- Added `closed` property
- Added `closable` property
- Added `calciteInternalTabsClose` event
- Added `calciteTabsClose` event
- Added t9n messages for `Close` text.
- Updated styling per new Figma specs
- Added tests

`handleTabTitleClose` keeps track of `visibleTabTitlesIndices` instead
of having Dom queries filter out `hidden`. This helps to sync `tabs`
with `tab-titles` using their corresponding `id`s set on the original
render. `visibleTabIndeces` is an array of `id`s of the non-hidden
`tab-titles`. When `tab-title` is `closed` this `id` is used to navigate
to the next visible item. This makes figuring out what the next item
should be when closing out of order is now more straightforward.

Tests coverage for 

- simple closing behavior 
- closing sequence behavior:
> - when closing `tab-titles` in sequence 1 (first selected) through 4,
`tab-title` and corresponding `tab` become hidden, and selection
fallback is the next tab
> - reverse fallback: when closing `tab-titles` in sequence 4 (last
selected) through 1, `tab-title` and corresponding `tab` become hidden,
and selection fallback is the previous tab
> - closing an unselected `tab-title` does not deselect the current
selection
> - 2 additional cases: works with a randomized closing sequence with
mixed selected and not

---------

Co-authored-by: Matt Driscoll <[email protected]>
Co-authored-by: JC Franco <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Anveshreddy mekala <[email protected]>
Co-authored-by: jona7150 <[email protected]>
Co-authored-by: Kitty Hurley <[email protected]>

src/components/tab-nav/tab-nav.tsx

@@ -19,7 +19,7 @@ import {
 } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
 import { Scale } from "../interfaces";
-import { TabChangeEventDetail } from "../tab/interfaces";
+import { TabChangeEventDetail, TabCloseEventDetail } from "../tab/interfaces";
 import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
 
 /**
@@ -110,7 +110,8 @@ export class TabNav {
     this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
   }
 
-  @Watch("selectedTitle") selectedTitleChanged(): void {
+  @Watch("selectedTitle")
+  selectedTitleChanged(): void {
     this.updateOffsetPosition();
     this.updateActiveWidth();
     // reset the animation time on tab selection
@@ -181,6 +182,7 @@ export class TabNav {
           // eslint-disable-next-line react/jsx-sort-props
           ref={(el: HTMLDivElement) => (this.tabNavEl = el)}
         >
+          <slot />
           <div
             class="tab-nav-active-indicator-container"
             // eslint-disable-next-line react/jsx-sort-props
@@ -193,7 +195,6 @@ export class TabNav {
               ref={(el) => (this.activeIndicatorEl = el as HTMLElement)}
             />
           </div>
-          <slot />
         </div>
       </Host>
     );
@@ -231,14 +232,19 @@ export class TabNav {
       ? event.detail.tab
       : this.getIndexOfTabTitle(event.target as HTMLCalciteTabTitleElement);
     event.stopPropagation();
-    event.preventDefault();
   }
 
-  @Listen("calciteTabsActivate") activateTabHandler(event: CustomEvent<void>): void {
+  @Listen("calciteTabsActivate")
+  activateTabHandler(event: CustomEvent<void>): void {
     this.calciteTabChange.emit();
+    event.stopPropagation();
+  }
 
+  @Listen("calciteInternalTabsClose")
+  internalCloseTabHandler(event: CustomEvent<TabCloseEventDetail>): void {
+    const closedTabTitleEl = event.target as HTMLCalciteTabTitleElement;
+    this.handleTabTitleClose(closedTabTitleEl);
     event.stopPropagation();
-    event.preventDefault();
   }
 
   /**
@@ -330,7 +336,6 @@ export class TabNav {
     focusElementInGroup(this.enabledTabTitles, el, destination);
 
     event.stopPropagation();
-    event.preventDefault();
   };
 
   handleContainerScroll = (): void => {
@@ -373,6 +378,37 @@ export class TabNav {
     return filterDirectChildren<HTMLCalciteTabTitleElement>(
       this.el,
       "calcite-tab-title:not([disabled])"
+    ).filter((tabTitle) => !tabTitle.closed);
+  }
+
+  private handleTabTitleClose(closedTabTitleEl: HTMLCalciteTabTitleElement): void {
+    const { tabTitles } = this;
+
+    const visibleTabTitlesIndices = tabTitles.reduce(
+      (tabTitleIndices, tabTitle, index) =>
+        !tabTitle.closed ? [...tabTitleIndices, index] : tabTitleIndices,
+      []
     );
+    const totalVisibleTabTitles = visibleTabTitlesIndices.length;
+
+    if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) {
+      tabTitles[visibleTabTitlesIndices[0]].closable = false;
+      this.selectedTabId = visibleTabTitlesIndices[0];
+    } else if (totalVisibleTabTitles > 1) {
+      const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);
+      const nextTabTitleIndex = visibleTabTitlesIndices.find(
+        (value) => value > closedTabTitleIndex
+      );
+
+      if (this.selectedTabId === closedTabTitleIndex) {
+        this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1;
+      }
+    }
+
+    requestAnimationFrame(() => {
+      this.updateOffsetPosition();
+      this.updateActiveWidth();
+      tabTitles[this.selectedTabId].focus();
+    });
   }
 }

src/components/tab-title/assets/tab-title/t9n/messages.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ar.json

@@ -0,0 +1,3 @@
+{
+  "close": "إغلاق"
+}

src/components/tab-title/assets/tab-title/t9n/messages_bg.json

@@ -0,0 +1,3 @@
+{
+  "close": "Затваряне"
+}

src/components/tab-title/assets/tab-title/t9n/messages_bs.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvori"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ca.json

@@ -0,0 +1,3 @@
+{
+  "close": "Tanca"
+}

src/components/tab-title/assets/tab-title/t9n/messages_cs.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zavřít"
+}

src/components/tab-title/assets/tab-title/t9n/messages_da.json

@@ -0,0 +1,3 @@
+{
+  "close": "Luk"
+}

src/components/tab-title/assets/tab-title/t9n/messages_de.json

@@ -0,0 +1,3 @@
+{
+  "close": "Schließen"
+}

src/components/tab-title/assets/tab-title/t9n/messages_el.json

@@ -0,0 +1,3 @@
+{
+  "close": "Κλείσιμο"
+}

src/components/tab-title/assets/tab-title/t9n/messages_en.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

src/components/tab-title/assets/tab-title/t9n/messages_es.json

@@ -0,0 +1,3 @@
+{
+  "close": "Cerrar"
+}

src/components/tab-title/assets/tab-title/t9n/messages_et.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sule"
+}

src/components/tab-title/assets/tab-title/t9n/messages_fi.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sulje"
+}

src/components/tab-title/assets/tab-title/t9n/messages_fr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fermer"
+}

src/components/tab-title/assets/tab-title/t9n/messages_he.json

@@ -0,0 +1,3 @@
+{
+  "close": "סגירה"
+}

src/components/tab-title/assets/tab-title/t9n/messages_hr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvori"
+}

src/components/tab-title/assets/tab-title/t9n/messages_hu.json

@@ -0,0 +1,3 @@
+{
+  "close": "Bezárás"
+}

src/components/tab-title/assets/tab-title/t9n/messages_id.json

@@ -0,0 +1,3 @@
+{
+  "close": "Tutup"
+}

src/components/tab-title/assets/tab-title/t9n/messages_it.json

@@ -0,0 +1,3 @@
+{
+  "close": "Chiudi"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ja.json

@@ -0,0 +1,3 @@
+{
+  "close": "閉じる"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ko.json

@@ -0,0 +1,3 @@
+{
+  "close": "닫기"
+}

src/components/tab-title/assets/tab-title/t9n/messages_lt.json

@@ -0,0 +1,3 @@
+{
+  "close": "Uždaryti"
+}

src/components/tab-title/assets/tab-title/t9n/messages_lv.json

@@ -0,0 +1,3 @@
+{
+  "close": "Aizvērt"
+}

src/components/tab-title/assets/tab-title/t9n/messages_nl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sluiten"
+}

src/components/tab-title/assets/tab-title/t9n/messages_no.json

@@ -0,0 +1,3 @@
+{
+  "close": "Lukk"
+}

src/components/tab-title/assets/tab-title/t9n/messages_pl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zamknij"
+}

src/components/tab-title/assets/tab-title/t9n/messages_pt-BR.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fechar"
+}

src/components/tab-title/assets/tab-title/t9n/messages_pt-PT.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fechar"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ro.json

@@ -0,0 +1,3 @@
+{
+  "close": "Închidere"
+}

src/components/tab-title/assets/tab-title/t9n/messages_ru.json

@@ -0,0 +1,3 @@
+{
+  "close": "Закрыть"
+}

src/components/tab-title/assets/tab-title/t9n/messages_sk.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvoriť"
+}

src/components/tab-title/assets/tab-title/t9n/messages_sl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zapri"
+}

src/components/tab-title/assets/tab-title/t9n/messages_sr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvori"
+}

src/components/tab-title/assets/tab-title/t9n/messages_sv.json

@@ -0,0 +1,3 @@
+{
+  "close": "Stäng"
+}

src/components/tab-title/assets/tab-title/t9n/messages_th.json

@@ -0,0 +1,3 @@
+{
+  "close": "ปิด"
+}

src/components/tab-title/assets/tab-title/t9n/messages_tr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Kapat"
+}

src/components/tab-title/assets/tab-title/t9n/messages_uk.json

@@ -0,0 +1,3 @@
+{
+  "close": "Закрити"
+}

src/components/tab-title/assets/tab-title/t9n/messages_vi.json

@@ -0,0 +1,3 @@
+{
+  "close": "Đóng"
+}

src/components/tab-title/assets/tab-title/t9n/messages_zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "close": "关闭"
+}

src/components/tab-title/assets/tab-title/t9n/messages_zh-HK.json

@@ -0,0 +1,3 @@
+{
+  "close": "關閉"
+}

src/components/tab-title/assets/tab-title/t9n/messages_zh-TW.json

@@ -0,0 +1,3 @@
+{
+  "close": "關閉"
+}

src/components/tab-title/resources.ts

@@ -1,8 +1,14 @@
 export const CSS = {
+  closeButton: "close-button",
   container: "container",
-  containerHasText: "container--has-text",
+  content: "content",
+  contentHasText: "content--has-text",
   iconEnd: "icon-end",
   iconStart: "icon-start",
   iconPresent: "icon-present",
   titleIcon: "calcite-tab-title--icon"
 };
+
+export const ICONS = {
+  close: "x"
+};