Merge pull request #7 from github/add-flow-definition-file

add flow definition file for the element API

Author: koddsson

index.js

@@ -14,16 +14,16 @@ class TabContainerElement extends HTMLElement {
       if (event.code === 'ArrowRight') {
         let index = currentIndex + 1
         if (index >= tabs.length) index = 0
-        this.selectTab(index)
+        selectTab(this, index)
       } else if (event.code === 'ArrowLeft') {
         let index = currentIndex - 1
         if (index < 0) index = tabs.length - 1
-        this.selectTab(index)
+        selectTab(this, index)
       } else if (event.code === 'Home') {
-        this.selectTab(0)
+        selectTab(this, 0)
         event.preventDefault()
       } else if (event.code === 'End') {
-        this.selectTab(tabs.length - 1)
+        selectTab(this, tabs.length - 1)
         event.preventDefault()
       }
     })
@@ -36,38 +36,38 @@ class TabContainerElement extends HTMLElement {
       if (!tab || !tab.closest('[role="tablist"]')) return
 
       const index = tabs.indexOf(tab)
-      this.selectTab(index)
+      selectTab(this, index)
     })
   }
+}
 
-  selectTab(index: number) {
-    const tabs = this.querySelectorAll('[role="tablist"] [role="tab"]')
-    const panels = this.querySelectorAll('[role="tabpanel"]')
+function selectTab(tabContainer: TabContainerElement, index: number) {
+  const tabs = tabContainer.querySelectorAll('[role="tablist"] [role="tab"]')
+  const panels = tabContainer.querySelectorAll('[role="tabpanel"]')
 
-    for (const tab of tabs) {
-      tab.setAttribute('aria-selected', 'false')
-      tab.setAttribute('tabindex', '-1')
-    }
-    for (const panel of panels) {
-      panel.hidden = true
-      panel.setAttribute('tabindex', '0')
-    }
+  for (const tab of tabs) {
+    tab.setAttribute('aria-selected', 'false')
+    tab.setAttribute('tabindex', '-1')
+  }
+  for (const panel of panels) {
+    panel.hidden = true
+    panel.setAttribute('tabindex', '0')
+  }
 
-    const tab = tabs[index]
-    const panel = panels[index]
+  const tab = tabs[index]
+  const panel = panels[index]
 
-    tab.setAttribute('aria-selected', 'true')
-    tab.removeAttribute('tabindex')
-    tab.focus()
-    panel.hidden = false
+  tab.setAttribute('aria-selected', 'true')
+  tab.removeAttribute('tabindex')
+  tab.focus()
+  panel.hidden = false
 
-    this.dispatchEvent(
-      new CustomEvent('tab-container-change', {
-        bubbles: true,
-        detail: {relatedTarget: panel}
-      })
-    )
-  }
+  tabContainer.dispatchEvent(
+    new CustomEvent('tab-container-change', {
+      bubbles: true,
+      detail: {relatedTarget: panel}
+    })
+  )
 }
 
 if (!window.customElements.get('tab-container')) {

index.js.flow

@@ -0,0 +1,5 @@
+/* @flow strict */
+
+declare module '@github/tab-container-element' {
+  declare export default class TabContainerElement extends HTMLElement { }
+}

package.json

@@ -15,7 +15,7 @@
     "prebuild": "npm run clean && npm run lint && mkdir dist",
     "build-umd": "BABEL_ENV=umd babel index.js -o dist/index.umd.js",
     "build-esm": "BABEL_ENV=esm babel index.js -o dist/index.esm.js",
-    "build": "npm run build-umd && npm run build-esm",
+    "build": "npm run build-umd && npm run build-esm && cp index.js.flow dist/index.esm.js.flow && cp index.js.flow dist/index.umd.js.flow",
     "pretest": "npm run build",
     "test": "karma start test/karma.config.js",
     "prepublishOnly": "npm run build"

test/test.js

@@ -72,14 +72,5 @@ describe('tab-container', function() {
       assert.equal(document.activeElement, tabs[0])
       assert.equal(counter, 2)
     })
-
-    it('selectTab(index) works', function() {
-      const tabContainer = document.querySelector('tab-container')
-      const panels = document.querySelectorAll('[role="tabpanel"]')
-
-      tabContainer.selectTab(2)
-      assert(panels[0].hidden)
-      assert(!panels[2].hidden)
-    })
   })
 })