@esri/calcite-components 5.2.0-next.6 → 5.2.0-next.7

package/dist/components/calcite-tab-nav/customElement.js

@@ -33,12 +33,13 @@ class TabNav extends LitElement {
     this.resizeObserver = createObserver("resize", () => {
       this.updateScrollingState();
     });
-    this.makeFirstVisibleTabClosable = false;
     this.messages = useT9n();
     this.hasOverflowingEndTabTitle = false;
     this.hasOverflowingStartTabTitle = false;
+    this.hasVisibleTabTitles = true;
     this.bordered = false;
     this.layout = "inline";
+    this.lastTabClosable = false;
     this.position = "bottom";
     this.scale = "m";
     this.selectedTitle = null;
@@ -49,13 +50,14 @@ class TabNav extends LitElement {
     this.listen("calciteInternalTabsFocusNext", this.focusNextTabHandler);
     this.listen("calciteInternalTabsFocusFirst", this.focusFirstTabHandler);
     this.listen("calciteInternalTabsFocusLast", this.focusLastTabHandler);
+    this.listen("calciteInternalTabTitleCloseChange", this.syncVisibleTabTitlesState);
     this.listen("calciteInternalTabTitleRegister", this.updateTabTitles);
     this.listen("calciteInternalTabsActivate", this.internalActivateTabHandler);
     this.listen("calciteInternalTabsClose", this.internalCloseTabHandler);
     this.listenOn(document.body, "calciteInternalTabChange", this.globalInternalTabChangeHandler);
   }
   static {
-    this.properties = { hasOverflowingEndTabTitle: [16, {}, { state: true }], hasOverflowingStartTabTitle: [16, {}, { state: true }], selectedTabId: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selectedTitle: [0, {}, { attribute: false }], storageId: [3, {}, { reflect: true }], syncId: [3, {}, { reflect: true }] };
+    this.properties = { hasOverflowingEndTabTitle: [16, {}, { state: true }], hasOverflowingStartTabTitle: [16, {}, { state: true }], hasVisibleTabTitles: [16, {}, { state: true }], selectedTabId: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], lastTabClosable: [5, {}, { type: Boolean }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selectedTitle: [0, {}, { attribute: false }], storageId: [3, {}, { reflect: true }], syncId: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -76,7 +78,7 @@ class TabNav extends LitElement {
     }
   }
   willUpdate(changes) {
-    if (changes.has("selectedTitle") && (this.hasUpdated || this.selectedTitle !== null)) {
+    if (changes.has("selectedTitle") && (this.hasUpdated || this.selectedTitle !== null) && this.selectedTabId !== void 0) {
       this.calciteInternalTabChange.emit({
         tab: this.selectedTabId
       });
@@ -84,6 +86,9 @@ class TabNav extends LitElement {
     if (changes.has("selectedTabId")) {
       this.selectedTabIdChanged();
     }
+    if (changes.has("lastTabClosable") && this.hasUpdated) {
+      this.updateLastVisibleTabClosable();
+    }
     const { parentTabsEl } = this;
     if (parentTabsEl) {
       this.layout = parentTabsEl.layout;
@@ -93,7 +98,7 @@ class TabNav extends LitElement {
   }
   loaded() {
     this.scrollTabTitleIntoView(this.selectedTitle, "instant");
-    if (this.tabTitles.length && this.tabTitles.every((title) => !title.selected) && !this.selectedTabId) {
+    if (this.tabTitles.length && this.tabTitles.every((title) => !title.selected) && this.selectedTabId === void 0) {
       this.tabTitles[0].getTabIdentifier().then((tab) => {
         this.calciteInternalTabChange.emit({
           tab
@@ -169,6 +174,7 @@ class TabNav extends LitElement {
       this.selectedTabId = event.detail;
       this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
     }
+    this.syncVisibleTabTitlesState();
   }
   globalInternalTabChangeHandler(event) {
     if (this.syncId && event.target !== this.el && event.target.syncId === this.syncId && this.selectedTabId !== event.detail.tab) {
@@ -178,7 +184,10 @@ class TabNav extends LitElement {
   }
   async selectedTabIdChanged() {
     await this.componentOnReady();
-    if (localStorage && this.storageId && this.selectedTabId !== void 0 && this.selectedTabId !== null) {
+    if (this.selectedTabId === void 0) {
+      return;
+    }
+    if (localStorage && this.storageId) {
       localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
     }
     this.calciteInternalTabChange.emit({
@@ -209,13 +218,33 @@ class TabNav extends LitElement {
     tabTitles.forEach((child) => {
       this.intersectionObserver?.observe(child);
     });
+    this.syncVisibleTabTitlesState();
+  }
+  syncVisibleTabTitlesState() {
+    this.updateLastVisibleTabClosable();
+    this.hasVisibleTabTitles = this.getVisibleTabTitlesIndices(this.tabTitles).length > 0;
+    this.calciteInternalTabNavSlotChange.emit([...this.tabTitles]);
+  }
+  updateLastVisibleTabClosable() {
+    const { tabTitles } = this;
     const visibleTabTitlesIndices = this.getVisibleTabTitlesIndices(tabTitles);
     const totalVisibleTabTitles = visibleTabTitlesIndices.length;
-    if (totalVisibleTabTitles > 1 && this.makeFirstVisibleTabClosable) {
-      tabTitles[visibleTabTitlesIndices[0]].closable = true;
-      this.makeFirstVisibleTabClosable = false;
+    if (totalVisibleTabTitles === 0) {
+      return;
+    }
+    const firstVisibleTabTitle = tabTitles[visibleTabTitlesIndices[0]];
+    const shouldDisableCloseButton = !this.lastTabClosable && totalVisibleTabTitles === 1;
+    if (shouldDisableCloseButton) {
+      if (firstVisibleTabTitle.closable) {
+        this.firstVisibleTabMadeNonClosable = firstVisibleTabTitle;
+        firstVisibleTabTitle.closable = false;
+      }
+      return;
+    }
+    if (this.firstVisibleTabMadeNonClosable && !this.firstVisibleTabMadeNonClosable.closed) {
+      this.firstVisibleTabMadeNonClosable.closable = true;
     }
-    this.calciteInternalTabNavSlotChange.emit(tabTitles);
+    this.firstVisibleTabMadeNonClosable = void 0;
   }
   setTabTitleContainerEl(el) {
     this.tabTitleContainerEl = el;
@@ -334,26 +363,35 @@ class TabNav extends LitElement {
   }
   handleTabTitleClose(closedTabTitleEl) {
     const { tabTitles } = this;
+    const visibleTabTitles = tabTitles.filter((tabTitle) => !tabTitle.closed);
+    const enabledVisibleTabTitles = this.enabledTabTitles;
+    const totalVisibleTabTitles = visibleTabTitles.length;
     const selectionModified = closedTabTitleEl.selected;
-    const visibleTabTitlesIndices = this.getVisibleTabTitlesIndices(tabTitles);
-    const totalVisibleTabTitles = visibleTabTitlesIndices.length;
-    if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) {
-      this.makeFirstVisibleTabClosable = true;
-      tabTitles[visibleTabTitlesIndices[0]].closable = false;
-      this.selectedTabId = visibleTabTitlesIndices[0];
-      if (selectionModified) {
-        tabTitles[visibleTabTitlesIndices[0]].activateTab();
-      }
-    } else if (totalVisibleTabTitles > 1) {
+    this.hasVisibleTabTitles = totalVisibleTabTitles > 0;
+    this.calciteInternalTabNavSlotChange.emit([...tabTitles]);
+    if (totalVisibleTabTitles === 0) {
+      this.selectedTitle = null;
+      this.selectedTabId = void 0;
+      return;
+    }
+    if (selectionModified) {
       const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);
-      const nextTabTitleIndex = visibleTabTitlesIndices.find((value) => value > closedTabTitleIndex);
-      if (this.selectedTabId === closedTabTitleIndex) {
-        this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1;
-        tabTitles[this.selectedTabId].activateTab();
+      const nextVisibleTabTitle = enabledVisibleTabTitles.find((tabTitle) => tabTitles.indexOf(tabTitle) > closedTabTitleIndex) || enabledVisibleTabTitles.at(-1);
+      if (!nextVisibleTabTitle) {
+        this.selectedTitle = null;
+        this.selectedTabId = void 0;
+        this.updateLastVisibleTabClosable();
+        return;
       }
+      nextVisibleTabTitle.activateTab();
     }
+    this.updateLastVisibleTabClosable();
     requestAnimationFrame(() => {
-      focusElement(tabTitles[this.selectedTabId]);
+      const selectedTitle = this.selectedTitle;
+      if (!selectedTitle) {
+        return;
+      }
+      focusElement(selectedTitle);
     });
   }
   render() {
@@ -363,7 +401,7 @@ class TabNav extends LitElement {
       [CSS.scale(this.scale)]: true,
       [CSS.position(this.position)]: true,
       [CSS_UTILITY.rtl]: this.effectiveDir === "rtl"
-    })}><div class=${safeClassMap({
+    })} .hidden=${!this.hasVisibleTabTitles}><div class=${safeClassMap({
       [CSS.tabTitleSlotWrapper]: true
     })} @scroll=${this.onTabTitleScroll} @wheel=${this.onTabTitleWheel} ${ref(this.setTabTitleContainerEl)}><slot @slotchange=${this.onSlotChange}></slot></div><div class=${safeClassMap(CSS.scrollButtonContainer)} .hidden=${!this.hasOverflowingEndTabTitle && !this.hasOverflowingStartTabTitle}>${this.renderScrollButton("start")}${this.renderScrollButton("end")}</div></div>`;
   }

package/dist/components/calcite-tab-title/customElement.js

@@ -54,6 +54,7 @@ class TabTitle extends LitElement {
     this.selected = false;
     this.calciteInternalTabIconChanged = createEvent({ cancelable: false });
     this.calciteInternalTabTitleRegister = createEvent({ cancelable: false });
+    this.calciteInternalTabTitleCloseChange = createEvent({ cancelable: false });
     this.calciteInternalTabsActivate = createEvent({ cancelable: false });
     this.calciteInternalTabsClose = createEvent({ cancelable: false });
     this.calciteInternalTabsFocusFirst = createEvent({ cancelable: false });
@@ -108,6 +109,9 @@ class TabTitle extends LitElement {
     if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) {
       this.selectedHandler();
     }
+    if (changes.has("closed") && this.hasUpdated) {
+      this.calciteInternalTabTitleCloseChange.emit();
+    }
     if (this.parentTabsEl) {
       this.layout = this.parentTabsEl.layout;
       this.bordered = this.parentTabsEl.bordered;

package/dist/components/calcite-tabs/customElement.d.ts

@@ -16,6 +16,12 @@ export abstract class Tabs extends LitElement {
    * @default false
    */
   accessor bordered: boolean;
+  /**
+   * When `true`, allows the last visible closable tab to keep its close button.
+   *
+   * @default false
+   */
+  accessor lastTabClosable: boolean;
   /**
    * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`).
    *

package/dist/components/calcite-tabs/customElement.js

@@ -17,14 +17,16 @@ class Tabs extends LitElement {
     this.slotRef = createRef();
     this.tabs = [];
     this.titles = [];
+    this.hasVisibleTitles = true;
     this.bordered = false;
     this.layout = "inline";
+    this.lastTabClosable = false;
     this.position = "top";
     this.scale = "m";
     this.listen("calciteInternalTabNavSlotChange", this.calciteInternalTabNavSlotChangeHandler);
   }
   static {
-    this.properties = { tabs: [16, {}, { state: true }], titles: [16, {}, { state: true }], bordered: [5, {}, { type: Boolean }], layout: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
+    this.properties = { tabs: [16, {}, { state: true }], titles: [16, {}, { state: true }], hasVisibleTitles: [16, {}, { state: true }], bordered: [5, {}, { type: Boolean }], layout: [3, {}, { reflect: true }], lastTabClosable: [7, {}, { reflect: true, type: Boolean }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -37,19 +39,22 @@ class Tabs extends LitElement {
     this.updateItems();
   }
   willUpdate(changes) {
-    if (changes.has("position") && (this.hasUpdated || this.position !== "top") || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
+    if (changes.has("position") && (this.hasUpdated || this.position !== "top") || changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("lastTabClosable") && (this.hasUpdated || this.lastTabClosable !== false)) {
       this.updateItems();
     }
-    if ((changes.has("titles") || changes.has("tabs")) && this.hasUpdated && this.titles?.length > 0 && this.tabs?.length > 0) {
+    if ((changes.has("titles") || changes.has("tabs")) && this.hasUpdated && (this.lastTabClosable || this.titles?.length > 0) && (this.lastTabClosable || this.tabs?.length > 0)) {
       this.updateAriaSettings();
       this.updateItems();
     }
   }
   calciteInternalTabNavSlotChangeHandler(event) {
     event.stopPropagation();
-    if (event.detail.length !== this.titles.length) {
-      this.titles = event.detail;
+    const nextTitles = [...event.detail];
+    const titlesChanged = nextTitles.some((title, index) => this.titles[index] !== title);
+    if (titlesChanged) {
+      this.titles = nextTitles;
     }
+    this.hasVisibleTitles = nextTitles.some((title) => !title.closed);
   }
   defaultSlotChangeHandler(event) {
     this.tabs = slotChangeGetAssignedElements(event, "calcite-tab");
@@ -82,9 +87,10 @@ class Tabs extends LitElement {
     this.titles.forEach((el) => el._updateAriaInfo(tabIds, titleIds));
   }
   updateItems() {
-    const { position, scale } = this;
+    const { lastTabClosable, position, scale } = this;
     const nav = this.el.querySelector("calcite-tab-nav");
     if (nav) {
+      nav.lastTabClosable = lastTabClosable;
       nav.position = position;
       nav.scale = scale;
     }
@@ -100,7 +106,7 @@ class Tabs extends LitElement {
     });
   }
   render() {
-    return html`<slot name=${SLOTS.titleGroup}></slot><section class=${safeClassMap(CSS.section)}><slot @slotchange=${this.defaultSlotChangeHandler} ${ref(this.slotRef)}></slot></section>`;
+    return html`<slot name=${SLOTS.titleGroup}></slot><section class=${safeClassMap(CSS.section)} .hidden=${!this.hasVisibleTitles}><slot @slotchange=${this.defaultSlotChangeHandler} ${ref(this.slotRef)}></slot></section>`;
   }
 }
 customElement("calcite-tabs", Tabs);