@hig/tabs - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

build/index.es.js

@@ -0,1 +1,2 @@
+import memoize from 'lodash.memoize';
 import React, { Component, Children } from 'react';
@@ -7,2 +8,59 @@ import cx from 'classnames';
 
+function _toConsumableArray(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
+      arr2[i] = arr[i];
+    }return arr2;
+  } else {
+    return Array.from(arr);
+  }
+}
+
+/**
+ * @typedef {Object} ButtonEventHandlers
+ * @property {function(MouseEvent, ...any): void} handleClick
+ * @property {function(KeyboardEvent, ...any): void} handleKeyDown
+ */
+
+/**
+ * @typedef {Object} Options
+ * @property {boolean} [preventDefault]
+ */
+
+var KEYBOARD_INTERACTIONS = [" ", "Enter"];
+
+/**
+ * Create event handlers for native button behavior for non-button elements
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
+ *
+ * @param {function(MouseEvent|KeyboardEvent, ...any): void} [handler] the event handler function
+ * @param {Options} [options]
+ * @returns {ButtonEventHandlers}
+ */
+function createButtonEventHandlers(handler) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (!handler) return {};
+
+  var _options$preventDefau = options.preventDefault,
+      preventDefault = _options$preventDefau === undefined ? true : _options$preventDefau;
+
+  return {
+    handleClick: handler,
+    handleKeyDown: function handleKeyDown(event) {
+      var key = event.key;
+
+      if (!KEYBOARD_INTERACTIONS.includes(key)) return;
+      // Prevent space key default scrolling behavior
+      if (preventDefault) event.preventDefault();
+
+      for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      handler.apply(undefined, [event].concat(_toConsumableArray(args)));
+    }
+  };
+}
+
 var alignments = Object.freeze({
@@ -75,2 +133,3 @@ LEFT: "left",
  * @property {Function} [onClick]
+ * @property {Function} [onKeyDown]
  */
@@ -85,3 +144,4 @@
       label = _ref.label,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown;
 
@@ -99,5 +159,6 @@ var classes = cx("hig__tabs__tab", {
         className: "hig__tabs__tab-label",
+        onClick: onClick,
+        onKeyDown: onKeyDown,
         role: "button",
-        tabIndex: "0",
-        onClick: onClick
+        tabIndex: "0"
       },
@@ -112,3 +173,4 @@ label
   label: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  onKeyDown: PropTypes.func
 };
@@ -139,2 +201,9 @@ TabPresenter.__docgenInfo = {
       "description": ""
+    },
+    "onKeyDown": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -154,17 +223,6 @@ }
  * @property {Function} [handleClick]
+ * @property {Function} [handleKeyDown]
  */
 
 /**
- * @param {RenderTabPayload} props
- * @returns {JSX.Element}
- */
-// eslint-disable-next-line react/prop-types
-function renderTab(_ref) {
-  var handleClick = _ref.handleClick,
-      otherProps = _objectWithoutProperties(_ref, ["handleClick"]);
-
-  return React.createElement(TabPresenter, _extends({ onClick: handleClick }, otherProps));
-}
-
-/**
  * @typedef {Object} TabProps
@@ -190,3 +248,16 @@ * @property {boolean} [active]
 Tab.defaultProps = {
-  render: renderTab
+  /**
+   * @param {RenderTabPayload} props
+   * @returns {JSX.Element}
+   */
+  render: function render(_ref) {
+    var handleClick = _ref.handleClick,
+        handleKeyDown = _ref.handleKeyDown,
+        otherProps = _objectWithoutProperties(_ref, ["handleClick", "handleKeyDown"]);
+
+    return React.createElement(TabPresenter, _extends({
+      onClick: handleClick,
+      onKeyDown: handleKeyDown
+    }, otherProps));
+  }
 };
@@ -202,2 +273,4 @@
 
+var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 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; }; }();
@@ -270,3 +343,7 @@
       activeTabIndex: FIRST_TAB_INDEX
-    }, _this.renderTab = function (_ref2, index) {
+    }, _this.createTabEventHandlers = memoize(function (index) {
+      return createButtonEventHandlers(function () {
+        return _this.setActiveTab(index);
+      });
+    }), _this.renderTab = function (_ref2, index) {
       var key = _ref2.key,
@@ -279,8 +356,7 @@ props = _ref2.props;
 
-      var payload = {
+      var payload = _extends$1({
         key: key,
         label: label,
-        active: activeTabIndex === index,
-        handleClick: _this.createTabClickHandler(index)
-      };
+        active: activeTabIndex === index
+      }, _this.createTabEventHandlers(index));
 
@@ -291,2 +367,5 @@ return render(payload);
 
+  /** @type {TabsState} */
+
+
   _createClass(Tabs, [{
@@ -330,17 +409,2 @@ key: "getTabs",
     /**
-     * @param {number} index
-     * @returns {Function}
-     */
-
-  }, {
-    key: "createTabClickHandler",
-    value: function createTabClickHandler(index) {
-      var _this2 = this;
-
-      return function () {
-        _this2.setActiveTab(index);
-      };
-    }
-
-    /**
      * @param {TabMeta} tab
@@ -417,5 +481,2 @@ * @param {number} index
     }
-
-    /** @type {TabsState} */
-
   }]);
@@ -422,0 +483,0 @@

build/index.js

@@ -7,2 +7,3 @@ 'use strict';
 
+var memoize = _interopDefault(require('lodash.memoize'));
 var React = require('react');
@@ -15,2 +16,59 @@ var React__default = _interopDefault(React);
 
+function _toConsumableArray(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
+      arr2[i] = arr[i];
+    }return arr2;
+  } else {
+    return Array.from(arr);
+  }
+}
+
+/**
+ * @typedef {Object} ButtonEventHandlers
+ * @property {function(MouseEvent, ...any): void} handleClick
+ * @property {function(KeyboardEvent, ...any): void} handleKeyDown
+ */
+
+/**
+ * @typedef {Object} Options
+ * @property {boolean} [preventDefault]
+ */
+
+var KEYBOARD_INTERACTIONS = [" ", "Enter"];
+
+/**
+ * Create event handlers for native button behavior for non-button elements
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
+ *
+ * @param {function(MouseEvent|KeyboardEvent, ...any): void} [handler] the event handler function
+ * @param {Options} [options]
+ * @returns {ButtonEventHandlers}
+ */
+function createButtonEventHandlers(handler) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (!handler) return {};
+
+  var _options$preventDefau = options.preventDefault,
+      preventDefault = _options$preventDefau === undefined ? true : _options$preventDefau;
+
+  return {
+    handleClick: handler,
+    handleKeyDown: function handleKeyDown(event) {
+      var key = event.key;
+
+      if (!KEYBOARD_INTERACTIONS.includes(key)) return;
+      // Prevent space key default scrolling behavior
+      if (preventDefault) event.preventDefault();
+
+      for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      handler.apply(undefined, [event].concat(_toConsumableArray(args)));
+    }
+  };
+}
+
 var alignments = Object.freeze({
@@ -83,2 +141,3 @@ LEFT: "left",
  * @property {Function} [onClick]
+ * @property {Function} [onKeyDown]
  */
@@ -93,3 +152,4 @@
       label = _ref.label,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown;
 
@@ -107,5 +167,6 @@ var classes = cx("hig__tabs__tab", {
         className: "hig__tabs__tab-label",
+        onClick: onClick,
+        onKeyDown: onKeyDown,
         role: "button",
-        tabIndex: "0",
-        onClick: onClick
+        tabIndex: "0"
       },
@@ -120,3 +181,4 @@ label
   label: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  onKeyDown: PropTypes.func
 };
@@ -147,2 +209,9 @@ TabPresenter.__docgenInfo = {
       "description": ""
+    },
+    "onKeyDown": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -162,17 +231,6 @@ }
  * @property {Function} [handleClick]
+ * @property {Function} [handleKeyDown]
  */
 
 /**
- * @param {RenderTabPayload} props
- * @returns {JSX.Element}
- */
-// eslint-disable-next-line react/prop-types
-function renderTab(_ref) {
-  var handleClick = _ref.handleClick,
-      otherProps = _objectWithoutProperties(_ref, ["handleClick"]);
-
-  return React__default.createElement(TabPresenter, _extends({ onClick: handleClick }, otherProps));
-}
-
-/**
  * @typedef {Object} TabProps
@@ -198,3 +256,16 @@ * @property {boolean} [active]
 Tab.defaultProps = {
-  render: renderTab
+  /**
+   * @param {RenderTabPayload} props
+   * @returns {JSX.Element}
+   */
+  render: function render(_ref) {
+    var handleClick = _ref.handleClick,
+        handleKeyDown = _ref.handleKeyDown,
+        otherProps = _objectWithoutProperties(_ref, ["handleClick", "handleKeyDown"]);
+
+    return React__default.createElement(TabPresenter, _extends({
+      onClick: handleClick,
+      onKeyDown: handleKeyDown
+    }, otherProps));
+  }
 };
@@ -210,2 +281,4 @@
 
+var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 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; }; }();
@@ -278,3 +351,7 @@
       activeTabIndex: FIRST_TAB_INDEX
-    }, _this.renderTab = function (_ref2, index) {
+    }, _this.createTabEventHandlers = memoize(function (index) {
+      return createButtonEventHandlers(function () {
+        return _this.setActiveTab(index);
+      });
+    }), _this.renderTab = function (_ref2, index) {
       var key = _ref2.key,
@@ -287,8 +364,7 @@ props = _ref2.props;
 
-      var payload = {
+      var payload = _extends$1({
         key: key,
         label: label,
-        active: activeTabIndex === index,
-        handleClick: _this.createTabClickHandler(index)
-      };
+        active: activeTabIndex === index
+      }, _this.createTabEventHandlers(index));
 
@@ -299,2 +375,5 @@ return render(payload);
 
+  /** @type {TabsState} */
+
+
   _createClass(Tabs, [{
@@ -338,17 +417,2 @@ key: "getTabs",
     /**
-     * @param {number} index
-     * @returns {Function}
-     */
-
-  }, {
-    key: "createTabClickHandler",
-    value: function createTabClickHandler(index) {
-      var _this2 = this;
-
-      return function () {
-        _this2.setActiveTab(index);
-      };
-    }
-
-    /**
      * @param {TabMeta} tab
@@ -425,5 +489,2 @@ * @param {number} index
     }
-
-    /** @type {TabsState} */
-
   }]);
@@ -430,0 +491,0 @@

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/tabs-v0.1.2](https://github.com/Autodesk/hig/compare/@hig/tabs@0.1.1...@hig/tabs@0.1.2) (2018-10-08)
+
+
+### Bug Fixes
+
+* **behavior:** add missing keyboard interactions ([cfe892c](https://github.com/Autodesk/hig/commit/cfe892c))
+
 <a name="@hig/tabs-v0.1.1"></a>
@@ -2,0 +9,0 @@ # [@hig/tabs-v0.1.1](https://github.com/Autodesk/hig/compare/@hig/tabs@0.1.0...@hig/tabs@0.1.1) (2018-07-19)

package.json

 {
   "name": "@hig/tabs",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "HIG Tabs",
@@ -23,4 +23,5 @@ "author": "Autodesk Inc.",
     "classnames": "^2.2.5",
+    "lodash.memoize": "^4.1.2",
     "prop-types": "^15.6.1",
-    "react-lifecycles-compat": "^3.0.2",
+    "react-lifecycles-compat": "^3.0.4",
     "render-fragment": "^0.1.1"
@@ -33,3 +34,2 @@ },
     "@hig/babel-preset": "^0.1.0",
-    "@hig/button": "^0.1.3",
     "@hig/eslint-config": "^0.1.0",
@@ -39,3 +39,3 @@ "@hig/jest-preset": "^0.1.0",
     "@hig/semantic-release-config": "^0.1.0",
-    "@hig/styles": "^0.1.1"
+    "@hig/styles": "^0.3.0"
   },
@@ -42,0 +42,0 @@ "scripts": {

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

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

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

Improved metrics

Total package byte prevSize

53950

increased by9.63%

Dev dependency count

6

decreased by-14.29%

Lines of code

1434

increased by7.98%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedlodash.memoize@^4.1.2

• + Addedlodash.memoize@4.1.2(transitive)

• Updatedreact-lifecycles-compat@^3.0.4