@github/tab-container-element - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

dist/index.esm.js

@@ -1,139 +0,62 @@
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _CustomElement() {
-  return Reflect.construct(HTMLElement, [], this.__proto__.constructor);
-}
-
-;
-Object.setPrototypeOf(_CustomElement.prototype, HTMLElement.prototype);
-Object.setPrototypeOf(_CustomElement, HTMLElement);
-
-/*  strict */
-
-var TabContainerElement = function (_CustomElement2) {
-  _inherits(TabContainerElement, _CustomElement2);
-
-  function TabContainerElement() {
-    _classCallCheck(this, TabContainerElement);
-
-    var _this = _possibleConstructorReturn(this, (TabContainerElement.__proto__ || Object.getPrototypeOf(TabContainerElement)).call(this));
-
-    _this.addEventListener('keydown', function (event) {
-      var target = event.target;
+class TabContainerElement extends HTMLElement {
+  constructor() {
+    super();
+    this.addEventListener('keydown', event => {
+      const target = event.target;
       if (!(target instanceof HTMLElement)) return;
       if (target.getAttribute('role') !== 'tab' && !target.closest('[role="tablist"]')) return;
-      var tabs = Array.from(_this.querySelectorAll('[role="tablist"] [role="tab"]'));
-      var currentIndex = tabs.indexOf(tabs.find(function (tab) {
-        return tab.matches('[aria-selected="true"]');
-      }));
+      const tabs = Array.from(this.querySelectorAll('[role="tablist"] [role="tab"]'));
+      const currentIndex = tabs.indexOf(tabs.find(tab => tab.matches('[aria-selected="true"]')));
 
       if (event.code === 'ArrowRight') {
-        var index = currentIndex + 1;
+        let index = currentIndex + 1;
         if (index >= tabs.length) index = 0;
-        _this.selectTab(index);
+        this.selectTab(index);
       } else if (event.code === 'ArrowLeft') {
-        var _index = currentIndex - 1;
-        if (_index < 0) _index = tabs.length - 1;
-        _this.selectTab(_index);
+        let index = currentIndex - 1;
+        if (index < 0) index = tabs.length - 1;
+        this.selectTab(index);
       } else if (event.code === 'Home') {
-        _this.selectTab(0);
+        this.selectTab(0);
         event.preventDefault();
       } else if (event.code === 'End') {
-        _this.selectTab(tabs.length - 1);
+        this.selectTab(tabs.length - 1);
         event.preventDefault();
       }
     });
-
-    _this.addEventListener('click', function (event) {
-      var tabs = Array.from(_this.querySelectorAll('[role="tablist"] [role="tab"]'));
-
+    this.addEventListener('click', event => {
+      const tabs = Array.from(this.querySelectorAll('[role="tablist"] [role="tab"]'));
       if (!(event.target instanceof Element)) return;
-      var tab = event.target.closest('[role="tab"]');
+      const tab = event.target.closest('[role="tab"]');
       if (!tab || !tab.closest('[role="tablist"]')) return;
-
-      var index = tabs.indexOf(tab);
-      _this.selectTab(index);
+      const index = tabs.indexOf(tab);
+      this.selectTab(index);
     });
-    return _this;
   }
 
-  _createClass(TabContainerElement, [{
-    key: 'selectTab',
-    value: function selectTab(index) {
-      var tabs = this.querySelectorAll('[role="tablist"] [role="tab"]');
-      var panels = this.querySelectorAll('[role="tabpanel"]');
+  selectTab(index) {
+    const tabs = this.querySelectorAll('[role="tablist"] [role="tab"]');
+    const panels = this.querySelectorAll('[role="tabpanel"]');
 
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = undefined;
+    for (const tab of tabs) {
+      tab.setAttribute('aria-selected', 'false');
+      tab.setAttribute('tabindex', '-1');
+    }
 
-      try {
-        for (var _iterator = tabs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var _tab = _step.value;
+    for (const panel of panels) {
+      panel.hidden = true;
+      panel.setAttribute('tabindex', '0');
+    }
 
-          _tab.setAttribute('aria-selected', 'false');
-          _tab.setAttribute('tabindex', '-1');
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
-      }
+    const tab = tabs[index];
+    const panel = panels[index];
+    tab.setAttribute('aria-selected', 'true');
+    tab.removeAttribute('tabindex');
+    tab.focus();
+    panel.hidden = false;
+    panel.dispatchEvent(new CustomEvent('tabcontainer:tabchange'));
+  }
 
-      var _iteratorNormalCompletion2 = true;
-      var _didIteratorError2 = false;
-      var _iteratorError2 = undefined;
+}
 
-      try {
-        for (var _iterator2 = panels[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-          var _panel = _step2.value;
-
-          _panel.hidden = true;
-          _panel.setAttribute('tabindex', '0');
-        }
-      } catch (err) {
-        _didIteratorError2 = true;
-        _iteratorError2 = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion2 && _iterator2.return) {
-            _iterator2.return();
-          }
-        } finally {
-          if (_didIteratorError2) {
-            throw _iteratorError2;
-          }
-        }
-      }
-
-      var tab = tabs[index];
-      var panel = panels[index];
-
-      tab.setAttribute('aria-selected', 'true');
-      tab.removeAttribute('tabindex');
-      tab.focus();
-      panel.hidden = false;
-
-      panel.dispatchEvent(new CustomEvent('tabcontainer:tabchange'));
-    }
-  }]);
-
-  return TabContainerElement;
-}(_CustomElement);
-
 if (!window.customElements.get('tab-container')) {
@@ -140,0 +63,0 @@ window.TabContainerElement = TabContainerElement;

dist/index.umd.js

@@ -14,180 +14,65 @@ (function (global, factory) {
 })(this, function () {
-  'use strict';
+  "use strict";
 
-  function _classCallCheck(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
-    }
-  }
-
-  var _createClass = function () {
-    function defineProperties(target, props) {
-      for (var i = 0; i < props.length; i++) {
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-      }
-    }
-
-    return function (Constructor, protoProps, staticProps) {
-      if (protoProps) defineProperties(Constructor.prototype, protoProps);
-      if (staticProps) defineProperties(Constructor, staticProps);
-      return Constructor;
-    };
-  }();
-
-  function _possibleConstructorReturn(self, call) {
-    if (!self) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-
-    return call && (typeof call === "object" || typeof call === "function") ? call : self;
-  }
-
-  function _inherits(subClass, superClass) {
-    if (typeof superClass !== "function" && superClass !== null) {
-      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-    }
-
-    subClass.prototype = Object.create(superClass && superClass.prototype, {
-      constructor: {
-        value: subClass,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    });
-    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-  }
-
-  function _CustomElement() {
-    return Reflect.construct(HTMLElement, [], this.__proto__.constructor);
-  }
-
-  ;
-  Object.setPrototypeOf(_CustomElement.prototype, HTMLElement.prototype);
-  Object.setPrototypeOf(_CustomElement, HTMLElement);
-
-  var TabContainerElement = function (_CustomElement2) {
-    _inherits(TabContainerElement, _CustomElement2);
-
-    function TabContainerElement() {
-      _classCallCheck(this, TabContainerElement);
-
-      var _this = _possibleConstructorReturn(this, (TabContainerElement.__proto__ || Object.getPrototypeOf(TabContainerElement)).call(this));
-
-      _this.addEventListener('keydown', function (event) {
-        var target = event.target;
+  class TabContainerElement extends HTMLElement {
+    constructor() {
+      super();
+      this.addEventListener('keydown', event => {
+        const target = event.target;
         if (!(target instanceof HTMLElement)) return;
         if (target.getAttribute('role') !== 'tab' && !target.closest('[role="tablist"]')) return;
-        var tabs = Array.from(_this.querySelectorAll('[role="tablist"] [role="tab"]'));
-        var currentIndex = tabs.indexOf(tabs.find(function (tab) {
-          return tab.matches('[aria-selected="true"]');
-        }));
+        const tabs = Array.from(this.querySelectorAll('[role="tablist"] [role="tab"]'));
+        const currentIndex = tabs.indexOf(tabs.find(tab => tab.matches('[aria-selected="true"]')));
 
         if (event.code === 'ArrowRight') {
-          var index = currentIndex + 1;
+          let index = currentIndex + 1;
           if (index >= tabs.length) index = 0;
-          _this.selectTab(index);
+          this.selectTab(index);
         } else if (event.code === 'ArrowLeft') {
-          var _index = currentIndex - 1;
-          if (_index < 0) _index = tabs.length - 1;
-          _this.selectTab(_index);
+          let index = currentIndex - 1;
+          if (index < 0) index = tabs.length - 1;
+          this.selectTab(index);
         } else if (event.code === 'Home') {
-          _this.selectTab(0);
+          this.selectTab(0);
           event.preventDefault();
         } else if (event.code === 'End') {
-          _this.selectTab(tabs.length - 1);
+          this.selectTab(tabs.length - 1);
           event.preventDefault();
         }
       });
-
-      _this.addEventListener('click', function (event) {
-        var tabs = Array.from(_this.querySelectorAll('[role="tablist"] [role="tab"]'));
-
+      this.addEventListener('click', event => {
+        const tabs = Array.from(this.querySelectorAll('[role="tablist"] [role="tab"]'));
         if (!(event.target instanceof Element)) return;
-        var tab = event.target.closest('[role="tab"]');
+        const tab = event.target.closest('[role="tab"]');
         if (!tab || !tab.closest('[role="tablist"]')) return;
-
-        var index = tabs.indexOf(tab);
-        _this.selectTab(index);
+        const index = tabs.indexOf(tab);
+        this.selectTab(index);
       });
-      return _this;
     }
 
-    _createClass(TabContainerElement, [{
-      key: 'selectTab',
-      value: function selectTab(index) {
-        var tabs = this.querySelectorAll('[role="tablist"] [role="tab"]');
-        var panels = this.querySelectorAll('[role="tabpanel"]');
+    selectTab(index) {
+      const tabs = this.querySelectorAll('[role="tablist"] [role="tab"]');
+      const panels = this.querySelectorAll('[role="tabpanel"]');
 
-        var _iteratorNormalCompletion = true;
-        var _didIteratorError = false;
-        var _iteratorError = undefined;
+      for (const tab of tabs) {
+        tab.setAttribute('aria-selected', 'false');
+        tab.setAttribute('tabindex', '-1');
+      }
 
-        try {
-          for (var _iterator = tabs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var _tab = _step.value;
+      for (const panel of panels) {
+        panel.hidden = true;
+        panel.setAttribute('tabindex', '0');
+      }
 
-            _tab.setAttribute('aria-selected', 'false');
-            _tab.setAttribute('tabindex', '-1');
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator.return) {
-              _iterator.return();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
-        }
+      const tab = tabs[index];
+      const panel = panels[index];
+      tab.setAttribute('aria-selected', 'true');
+      tab.removeAttribute('tabindex');
+      tab.focus();
+      panel.hidden = false;
+      panel.dispatchEvent(new CustomEvent('tabcontainer:tabchange'));
+    }
 
-        var _iteratorNormalCompletion2 = true;
-        var _didIteratorError2 = false;
-        var _iteratorError2 = undefined;
+  }
 
-        try {
-          for (var _iterator2 = panels[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-            var _panel = _step2.value;
-
-            _panel.hidden = true;
-            _panel.setAttribute('tabindex', '0');
-          }
-        } catch (err) {
-          _didIteratorError2 = true;
-          _iteratorError2 = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion2 && _iterator2.return) {
-              _iterator2.return();
-            }
-          } finally {
-            if (_didIteratorError2) {
-              throw _iteratorError2;
-            }
-          }
-        }
-
-        var tab = tabs[index];
-        var panel = panels[index];
-
-        tab.setAttribute('aria-selected', 'true');
-        tab.removeAttribute('tabindex');
-        tab.focus();
-        panel.hidden = false;
-
-        panel.dispatchEvent(new CustomEvent('tabcontainer:tabchange'));
-      }
-    }]);
-
-    return TabContainerElement;
-  }(_CustomElement);
-
   if (!window.customElements.get('tab-container')) {
@@ -194,0 +79,0 @@ window.TabContainerElement = TabContainerElement;

package.json

 {
   "name": "@github/tab-container-element",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Tab container element",
@@ -24,11 +24,11 @@ "main": "dist/index.umd.js",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-plugin-transform-custom-element-classes": "^0.1.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-flow": "^6.23.0",
-    "chai": "^4.1.2",
-    "eslint": "^5.0.1",
-    "eslint-plugin-github": "1.0.0",
-    "flow-bin": "^0.75.0",
-    "karma": "^3.0.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.3.3",
+    "@babel/plugin-transform-modules-umd": "^7.2.0",
+    "babel-preset-github": "^2.1.1",
+    "chai": "^4.2.0",
+    "eslint": "^5.14.1",
+    "eslint-plugin-github": "^1.9.0",
+    "flow-bin": "^0.93.0",
+    "karma": "^4.0.0",
     "karma-chai": "^0.1.0",
@@ -38,4 +38,5 @@ "karma-chrome-launcher": "^2.2.0",
     "karma-mocha-reporter": "^2.2.5",
-    "mocha": "^5.0.5"
-  }
+    "mocha": "^6.0.0"
+  },
+  "dependencies": {}
 }

README.md

 # <tab-container> element
 
-A accessible tab container element with keyboard support.
+A accessible tab container element with keyboard support. Follows the [ARIA best practices guide on tabs](https://www.w3.org/TR/wai-aria-practices/#tabpanel).
 
-Tries to follow the [ARIA best practices guide on tabs](https://www.w3.org/TR/wai-aria-practices/#tabpanel).
-
 ## Installation
@@ -21,17 +19,17 @@
 <tab-container>
-    <div role="tablist">
-      <button type="button" role="tab" aria-selected="true">Tab one</button>
-      <button type="button" role="tab">Tab two</button>
-      <button type="button" role="tab">Tab three</button>
-    </div>
-    <div role="tabpanel">
-      Panel 1
-    </div>
-    <div role="tabpanel" hidden>
-      Panel 2
-    </div>
-    <div role="tabpanel" hidden>
-      Panel 3
-    </div>
-  </tab-container>
+  <div role="tablist">
+    <button type="button" role="tab" aria-selected="true">Tab one</button>
+    <button type="button" role="tab">Tab two</button>
+    <button type="button" role="tab">Tab three</button>
+  </div>
+  <div role="tabpanel">
+    Panel 1
+  </div>
+  <div role="tabpanel" hidden>
+    Panel 2
+  </div>
+  <div role="tabpanel" hidden>
+    Panel 3
+  </div>
+</tab-container>
 ```
@@ -46,3 +44,2 @@
 - Safari
-- Internet Explorer 11
 - Microsoft Edge
@@ -49,0 +46,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

8381

decreased by-46.79%

Lines of code

131

decreased by-54.04%

Number of lines in readme file

58

decreased by-4.92%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes