feat(tab): Get tabs by their ID

packages/mdc-tab-bar/README.md

@@ -133,7 +133,7 @@ Method Signature | Description
 `getTabListLength() => number` | Returns the number of child Tab components.
 `getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.
 `getFocusedTabIndex() => number` | Returns the index of the focused Tab.
-`getIndexOfTab(tab: MDCTab) => number` | Returns the index of the given Tab instance.
+`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.
 `notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.
 
 ### `MDCTabBarFoundation`

packages/mdc-tab-bar/adapter.js

@@ -25,7 +25,6 @@
 
 /* eslint-disable no-unused-vars */
 import {MDCTabDimensions} from '@material/tab/adapter';
-import {MDCTab} from '@material/tab/index';
 /* eslint-enable no-unused-vars */
 
 /**
@@ -134,10 +133,10 @@ class MDCTabBarAdapter {
 
   /**
    * Returns the index of the given tab
-   * @param {!MDCTab} tab The tab whose index to determin
+   * @param {string} id The ID of the tab whose index to determine
    * @return {number}
    */
-  getIndexOfTab(tab) {}
+  getIndexOfTabById(id) {}
 
   /**
    * Emits the MDCTabBar:activated event

packages/mdc-tab-bar/foundation.js

@@ -89,7 +89,7 @@ class MDCTabBarFoundation extends MDCFoundation {
       getTabDimensionsAtIndex: () => {},
       getPreviousActiveTabIndex: () => {},
       getFocusedTabIndex: () => {},
-      getIndexOfTab: () => {},
+      getIndexOfTabById: () => {},
       getTabListLength: () => {},
       notifyTabActivated: () => {},
     });
@@ -174,7 +174,7 @@ class MDCTabBarFoundation extends MDCFoundation {
    * @param {!Event} evt
    */
   handleTabInteraction(evt) {
-    this.adapter_.setActiveTab(this.adapter_.getIndexOfTab(evt.detail.tab));
+    this.adapter_.setActiveTab(this.adapter_.getIndexOfTabById(evt.detail.tabId));
   }
 
   /**

packages/mdc-tab-bar/index.js

@@ -29,6 +29,8 @@ import {MDCTabScroller} from '@material/tab-scroller/index';
 import MDCTabBarAdapter from './adapter';
 import MDCTabBarFoundation from './foundation';
 
+let tabIdCounter = 0;
+
 /**
  * @extends {MDCComponent<!MDCTabBarFoundation>}
  * @final
@@ -43,15 +45,9 @@ class MDCTabBar extends MDCComponent {
     /** @private {!Array<!MDCTab>} */
     this.tabList_;
 
-    /** @type {(function(!Element): !MDCTab)} */
-    this.tabFactory_;
-
     /** @private {?MDCTabScroller} */
     this.tabScroller_;
 
-    /** @type {(function(!Element): !MDCTabScroller)} */
-    this.tabScrollerFactory_;
-
     /** @private {?function(?Event): undefined} */
     this.handleTabInteraction_;
 
@@ -82,15 +78,8 @@ class MDCTabBar extends MDCComponent {
   initialize(
     tabFactory = (el) => new MDCTab(el),
     tabScrollerFactory = (el) => new MDCTabScroller(el)) {
-    this.tabFactory_ = tabFactory;
-    this.tabScrollerFactory_ = tabScrollerFactory;
-
-    this.tabList_ = this.getTabElements_().map((el) => this.tabFactory_(el));
-
-    const tabScrollerElement = this.root_.querySelector(MDCTabBarFoundation.strings.TAB_SCROLLER_SELECTOR);
-    if (tabScrollerElement) {
-      this.tabScroller_ = this.tabScrollerFactory_(tabScrollerElement);
-    }
+    this.tabList_ = this.instantiateTabs_(tabFactory);
+    this.tabScroller_ = this.instantiateTabScroller_(tabScrollerFactory);
   }
 
   initialSyncWithDOM() {
@@ -147,7 +136,14 @@ class MDCTabBar extends MDCComponent {
           const activeElement = document.activeElement;
           return tabElements.indexOf(activeElement);
         },
-        getIndexOfTab: (tabToFind) => this.tabList_.indexOf(tabToFind),
+        getIndexOfTabById: (id) => {
+          for (let i = 0; i < this.tabList_.length; i++) {
+            if (this.tabList_[i].id === id) {
+              return i;
+            }
+          }
+          return -1;
+        },
         getTabListLength: () => this.tabList_.length,
         notifyTabActivated: (index) => this.emit(MDCTabBarFoundation.strings.TAB_ACTIVATED_EVENT, {index}, true),
       })
@@ -170,9 +166,41 @@ class MDCTabBar extends MDCComponent {
     this.foundation_.scrollIntoView(index);
   }
 
+  /**
+   * Returns all the tab elements in a nice clean array
+   * @return {!Array<!Element>}
+   * @private
+   */
   getTabElements_() {
     return [].slice.call(this.root_.querySelectorAll(MDCTabBarFoundation.strings.TAB_SELECTOR));
   }
+
+  /**
+   * Instantiates tab components on all child tab elements
+   * @param {(function(!Element): !MDCTab)} tabFactory
+   * @return {!Array<!MDCTab>}
+   * @private
+   */
+  instantiateTabs_(tabFactory) {
+    return this.getTabElements_().map((el) => {
+      el.id = el.id || `mdc-tab-${++tabIdCounter}`;
+      return tabFactory(el);
+    });
+  }
+
+  /**
+   * Instantiates tab scroller component on the child tab scroller element
+   * @param {(function(!Element): !MDCTabScroller)} tabScrollerFactory
+   * @return {?MDCTabScroller}
+   * @private
+   */
+  instantiateTabScroller_(tabScrollerFactory) {
+    const tabScrollerElement = this.root_.querySelector(MDCTabBarFoundation.strings.TAB_SCROLLER_SELECTOR);
+    if (tabScrollerElement) {
+      return tabScrollerFactory(tabScrollerElement);
+    }
+    return null;
+  }
 }
 
 export {MDCTabBar, MDCTabBarFoundation};

packages/mdc-tab/README.md

@@ -154,7 +154,7 @@ Method Signature | Description
 
 Event Name | Event Data Structure | Description
 --- | --- | ---
-`MDCTab:interacted` | `{"detail": {"tab": MDCTab}}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.
+`MDCTab:interacted` | `{"detail": {"tabId": string}}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.
 
 ## Usage within Web Frameworks
 

packages/mdc-tab/adapter.js

@@ -31,6 +31,16 @@
  */
 let MDCTabDimensions;
 
+/**
+ * @typedef {{
+ *   detail: {
+ *     tabId: string,
+ *   },
+ *   bubbles: boolean,
+ * }}
+ */
+let MDCTabInteractionEventType;
+
 /**
  * Adapter for MDC Tab.
  *
@@ -112,4 +122,4 @@ class MDCTabAdapter {
   focus() {}
 }
 
-export {MDCTabDimensions, MDCTabAdapter};
+export {MDCTabDimensions, MDCTabInteractionEventType, MDCTabAdapter};

packages/mdc-tab/index.js

@@ -26,7 +26,7 @@ import MDCComponent from '@material/base/component';
 /* eslint-disable no-unused-vars */
 import {MDCRipple, MDCRippleFoundation, RippleCapableSurface} from '@material/ripple/index';
 import {MDCTabIndicator, MDCTabIndicatorFoundation} from '@material/tab-indicator/index';
-import {MDCTabAdapter, MDCTabDimensions} from './adapter';
+import {MDCTabAdapter, MDCTabDimensions, MDCTabInteractionEventType} from './adapter';
 /* eslint-enable no-unused-vars */
 
 import MDCTabFoundation from './foundation';
@@ -41,6 +41,9 @@ class MDCTab extends MDCComponent {
    */
   constructor(...args) {
     super(...args);
+
+    /** @type {string} */
+    this.id;
     /** @private {?MDCRipple} */
     this.ripple_;
     /** @private {?MDCTabIndicator} */
@@ -63,6 +66,7 @@ class MDCTab extends MDCComponent {
   initialize(
     rippleFactory = (el, foundation) => new MDCRipple(el, foundation),
     tabIndicatorFactory = (el) => new MDCTabIndicator(el)) {
+    this.id = this.root_.id;
     const rippleSurface = this.root_.querySelector(MDCTabFoundation.strings.RIPPLE_SELECTOR);
     const rippleAdapter = Object.assign(MDCRipple.createAdapter(/** @type {!RippleCapableSurface} */ (this)), {
       addClass: (className) => rippleSurface.classList.add(className),
@@ -101,7 +105,8 @@ class MDCTab extends MDCComponent {
         hasClass: (className) => this.root_.classList.contains(className),
         activateIndicator: (previousIndicatorClientRect) => this.tabIndicator_.activate(previousIndicatorClientRect),
         deactivateIndicator: () => this.tabIndicator_.deactivate(),
-        notifyInteracted: () => this.emit(MDCTabFoundation.strings.INTERACTED_EVENT, {tab: this}, true /* bubble */),
+        notifyInteracted: () => this.emit(
+          MDCTabFoundation.strings.INTERACTED_EVENT, {tabId: this.id}, true /* bubble */),
         getOffsetLeft: () => this.root_.offsetLeft,
         getOffsetWidth: () => this.root_.offsetWidth,
         getContentOffsetLeft: () => this.content_.offsetLeft,

test/unit/mdc-tab-bar/foundation.test.js

@@ -48,7 +48,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'getOffsetWidth', 'isRTL', 'setActiveTab',
     'activateTabAtIndex', 'deactivateTabAtIndex', 'focusTabAtIndex',
     'getTabIndicatorClientRectAtIndex', 'getTabDimensionsAtIndex',
-    'getPreviousActiveTabIndex', 'getFocusedTabIndex', 'getIndexOfTab', 'getTabListLength',
+    'getPreviousActiveTabIndex', 'getFocusedTabIndex', 'getIndexOfTabById', 'getTabListLength',
     'notifyTabActivated',
   ]);
 });

test/unit/mdc-tab-bar/mdc-tab-bar.test.js

@@ -58,8 +58,10 @@ test('attachTo returns an MDCTabBar instance', () => {
   assert.isOk(MDCTabBar.attachTo(getFixture()) instanceof MDCTabBar);
 });
 
+let fakeTabIdCounter = 0;
 class FakeTab {
   constructor() {
+    this.id = `mdc-tab-${++fakeTabIdCounter}`;
     this.destroy = td.function();
     this.activate = td.function();
     this.deactivate = td.function();
@@ -206,10 +208,10 @@ test('#adapter.getPreviousActiveTabIndex returns the index of the active tab', (
   assert.strictEqual(component.getDefaultFoundation().adapter_.getPreviousActiveTabIndex(), 1);
 });
 
-test('#adapter.getIndexOfTab returns the index of the given tab', () => {
+test('#adapter.getIndexOfTabById returns the index of the given tab', () => {
   const {component} = setupTest();
   const tab = component.tabList_[2];
-  assert.strictEqual(component.getDefaultFoundation().adapter_.getIndexOfTab(tab), 2);
+  assert.strictEqual(component.getDefaultFoundation().adapter_.getIndexOfTabById(tab.id), 2);
 });
 
 test('#adapter.getTabListLength returns the length of the tab list', () => {