@tenon-io/tenon-ui - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

es/index.js

 import _Form from './modules/forms/tenonForm/Form';
 export { _Form as Form };
+
+export { TextInputController, TextareaController, SelectController, RadioGroupController } from './modules/forms/tenonForm/FormControllers';
 import _Heading from './modules/layout/Heading';
 export { _Heading as Heading };
-
 export { LevelBoundary, H } from './modules/layout/Heading';
-import _InputController from './modules/forms/tenonForm/InputController';
-export { _InputController as InputController };
 import _Input from './modules/forms/tenonForm/Input';
@@ -13,2 +12,6 @@ export { _Input as Input };
 export { _TextArea as TextArea };
+import _Select from './modules/forms/tenonForm/Select';
+export { _Select as Select };
+import _RadioGroup from './modules/forms/tenonForm/RadioGroup';
+export { _RadioGroup as RadioGroup };
 import _Notification from './modules/notifications/Notification';
@@ -24,4 +27,7 @@ export { _Notification as Notification };
 export { Tab } from './modules/tabs/Tabs';
+import _FocusCatcher from './modules/utils/components/FocusCatcher';
+export { _FocusCatcher as FocusCatcher };
 
+
 export * from './modules/utils/data/validation';
 export * from './modules/utils/helpers/validationHelpers';

es/modules/forms/tenonForm/Form.js

@@ -15,2 +15,3 @@ var _extends = 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; };
 import memoize from 'memoize-one';
+import { RadioGroupController, SelectController, TextareaController, TextInputController } from './FormControllers';
 
@@ -47,6 +48,7 @@ /**
  * invalid form submit phases.
- * @example
- * {
- *     [controlName]:[value]
- * }
+ * @prop {boolean} alwaysShowErrors - An optional boolean indicating
+ * whether the form should always display errors, and not only once submit has
+ * been clicked.
+ * @prop {string} className - An optional class string to transfer to the
+ * className prop of the form element.
  *
@@ -72,2 +74,4 @@ * This component exposes functionality through React Context that is
  * by the consumers to decide when to show errors.
+ *
+ * This component is compound and also exposes the form controllers.
  * */
@@ -202,3 +206,3 @@ var Form = (_temp2 = _class = function (_Component) {
      * @param {string} name - The unique name.
-     * @param {string} controlId - The unique DOM id.
+     * @param {string} controlId - The unique DOM id for the focusable element.
      * @param {string} value - The string value.
@@ -293,3 +297,5 @@ * @param {boolean} validity - The validation validity.
     Form.prototype.render = function render() {
-        var alwaysShowErrors = this.props.alwaysShowErrors;
+        var _props = this.props,
+            alwaysShowErrors = _props.alwaysShowErrors,
+            className = _props.className;
         var _state = this.state,
@@ -306,3 +312,7 @@ formControls = _state.formControls,
                 'form',
-                { noValidate: true, onSubmit: this.onSubmitHandler },
+                {
+                    noValidate: true,
+                    onSubmit: this.onSubmitHandler,
+                    className: className || null
+                },
                 this.props.children({
@@ -318,3 +328,3 @@ formControls: formControls,
     return Form;
-}(Component), _class.displayName = 'Form', _temp2);
+}(Component), _class.TextInputController = TextInputController, _class.TextareaController = TextareaController, _class.SelectController = SelectController, _class.RadioGroupController = RadioGroupController, _class.displayName = 'Form', _temp2);
 Form.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -324,3 +334,4 @@ children: PropTypes.func.isRequired,
     onRawSubmit: PropTypes.func,
-    alwaysShowErrors: PropTypes.bool
+    alwaysShowErrors: PropTypes.bool,
+    className: PropTypes.string
 } : {};
@@ -327,0 +338,0 @@

es/modules/forms/tenonForm/Input.js

@@ -0,4 +1,8 @@
+var _extends = 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; };
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
@@ -8,17 +12,17 @@ /**
  * A default view component to use with the tenon-ui
- * smart input.
+ * smart textinput controller.
  *
  * @prop {string} contentHintText - Text to show as content
- *                hint of the smart input.
- * @prop {string} errorText - Text to show are error message
- *                of the smart input.
+ *                hint of the input.
+ * @prop {string} errorText - Text to show as error message
+ *                of the input.
  * @prop required {function} getLabelProps - Prop getter function
- *              from the smart input controller for the <label>.
+ *              from the smart textinput controller for the <label>.
  * @prop required {function} getInputProps - Prop getter function
- *              from the smart input controller for the <input>.
+ *              from the smart textinput controller for the <input>.
  * @prop {function} getErrorProps - Prop getter function
- *              from the smart input controller for the
+ *              from the smart textinput controller for the
  *              error message container.
  * @prop {function} getContentHintProps - Prop getter
- *              function from the smart input controller
+ *              function from the smart textinput controller
  *              for the content hint container.
@@ -30,2 +34,4 @@ * @prop required {string} labelText
  *              error container should be displayed.
+ * @prop {string} className - An optional class string to transfer to the
+ * className prop of the input element.
  *
@@ -49,22 +55,25 @@ * NOTE: All props given to this input that does not
         showError = _ref.showError,
-        rest = _objectWithoutProperties(_ref, ["contentHintText", "errorText", "getLabelProps", "getInputProps", "getErrorProps", "getContentHintProps", "labelText", "labelProps", "showError"]);
+        className = _ref.className,
+        rest = _objectWithoutProperties(_ref, ['contentHintText', 'errorText', 'getLabelProps', 'getInputProps', 'getErrorProps', 'getContentHintProps', 'labelText', 'labelProps', 'showError', 'className']);
 
     return React.createElement(
-        "div",
-        { className: "group" },
+        'div',
+        { className: 'form-group' },
         React.createElement(
-            "div",
-            { className: "fieldWrapper" },
+            'div',
+            { className: 'field-wrapper' },
             React.createElement(
-                "label",
+                'label',
                 getLabelProps(labelProps),
                 labelText
             ),
-            React.createElement("input", getInputProps(rest))
+            React.createElement('input', _extends({
+                className: classNames(className, { 'has-error': showError }) || null
+            }, getInputProps(rest)))
         ),
         contentHintText && getContentHintProps ? React.createElement(
-            "div",
-            { className: "infoWrapper" },
+            'div',
+            { className: 'info-wrapper' },
             React.createElement(
-                "span",
+                'span',
                 getContentHintProps(),
@@ -75,6 +84,6 @@ contentHintText
         showError && getErrorProps ? React.createElement(
-            "div",
-            { className: "errorWrapper" },
+            'div',
+            { className: 'error-wrapper' },
             React.createElement(
-                "span",
+                'span',
                 getErrorProps(),
@@ -89,2 +98,15 @@ errorText
 
+Input.propTypes = process.env.NODE_ENV !== "production" ? {
+    contentHintText: PropTypes.string,
+    errorText: PropTypes.string,
+    getLabelProps: PropTypes.func.isRequired,
+    getInputProps: PropTypes.func.isRequired,
+    getErrorProps: PropTypes.func,
+    getContentHintProps: PropTypes.func,
+    labelText: PropTypes.string.isRequired,
+    labelProps: PropTypes.object,
+    showError: PropTypes.bool,
+    className: PropTypes.string
+} : {};
+
 export default Input;

es/modules/forms/tenonForm/TextArea.js

@@ -0,4 +1,8 @@
+var _extends = 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; };
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
@@ -8,17 +12,17 @@ /**
  * A default view component to use with the tenon-ui
- * smart textarea.
+ * textarea controller.
  *
  * @prop {string} contentHintText - Text to show as content
- *                hint of the smart input.
- * @prop {string} errorText - Text to show are error message
- *                of the smart input.
+ *                hint of the textarea.
+ * @prop {string} errorText - Text to show as error message
+ *                of the textarea.
  * @prop required {function} getLabelProps - Prop getter function
- *              from the smart input controller for the <label>.
+ *              from the smart textarea controller for the <label>.
  * @prop required {function} getInputProps - Prop getter function
- *              from the smart input controller for the <input>.
+ *              from the smart textarea controller for the <textarea>.
  * @prop {function} getErrorProps - Prop getter function
- *              from the smart input controller for the
+ *              from the smart textarea controller for the
  *              error message container.
  * @prop {function} getContentHintProps - Prop getter
- *              function from the smart input controller
+ *              function from the smart textarea controller
  *              for the content hint container.
@@ -30,2 +34,4 @@ * @prop required {string} labelText
  *              error container should be displayed.
+ * @prop {string} className - An optional class string to transfer to the
+ *              className prop of the textarea element.
  *
@@ -43,3 +49,3 @@ * NOTE: All props given to this textarea that does not
         getLabelProps = _ref.getLabelProps,
-        getInputProps = _ref.getInputProps,
+        getTextareaProps = _ref.getTextareaProps,
         getErrorProps = _ref.getErrorProps,
@@ -50,22 +56,25 @@ getContentHintProps = _ref.getContentHintProps,
         showError = _ref.showError,
-        rest = _objectWithoutProperties(_ref, ["contentHintText", "errorText", "getLabelProps", "getInputProps", "getErrorProps", "getContentHintProps", "labelText", "labelProps", "showError"]);
+        className = _ref.className,
+        rest = _objectWithoutProperties(_ref, ['contentHintText', 'errorText', 'getLabelProps', 'getTextareaProps', 'getErrorProps', 'getContentHintProps', 'labelText', 'labelProps', 'showError', 'className']);
 
     return React.createElement(
-        "div",
-        { className: "group" },
+        'div',
+        { className: 'form-group' },
         React.createElement(
-            "div",
-            { className: "fieldwrapper" },
+            'div',
+            { className: 'field-wrapper' },
             React.createElement(
-                "label",
+                'label',
                 getLabelProps(labelProps),
                 labelText
             ),
-            React.createElement("textarea", getInputProps(rest))
+            React.createElement('textarea', _extends({
+                className: classNames(className, { 'has-error': showError }) || null
+            }, getTextareaProps(rest)))
         ),
         contentHintText && getContentHintProps ? React.createElement(
-            "div",
-            { className: "infoWrapper" },
+            'div',
+            { className: 'info-wrapper' },
             React.createElement(
-                "span",
+                'span',
                 getContentHintProps(),
@@ -76,6 +85,6 @@ contentHintText
         showError && getErrorProps ? React.createElement(
-            "div",
-            { className: "errorWrapper" },
+            'div',
+            { className: 'error-wrapper' },
             React.createElement(
-                "span",
+                'span',
                 getErrorProps(),
@@ -88,2 +97,17 @@ errorText
 
+TextArea.displayName = 'TextArea';
+
+TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
+    contentHintText: PropTypes.string,
+    errorText: PropTypes.string,
+    getLabelProps: PropTypes.func.isRequired,
+    getTextareaProps: PropTypes.func.isRequired,
+    getErrorProps: PropTypes.func,
+    getContentHintProps: PropTypes.func,
+    labelText: PropTypes.string.isRequired,
+    labelProps: PropTypes.object,
+    showError: PropTypes.bool,
+    className: PropTypes.string
+} : {};
+
 export default TextArea;

es/modules/tabs/Tabs.js

@@ -11,3 +11,3 @@ var _extends = 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; };
 
-import React, { Component, Fragment, forwardRef } from 'react';
+import React, { Component, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -20,2 +20,3 @@ import uuidv4 from 'uuid/v4';
 import { getKey } from '../utils/helpers/eventHelpers';
+import FocusCatcher from '../utils/components/FocusCatcher';
 
@@ -71,10 +72,4 @@ /**
             React.createElement(
-                'div',
-                {
-                    tabIndex: '-1',
-                    onFocus: function onFocus(e) {
-                        e.stopPropagation();
-                    },
-                    style: { outline: 'none' }
-                },
+                FocusCatcher,
+                null,
                 noHeading ? null : React.createElement(
@@ -337,4 +332,4 @@ Heading.H,
         return React.createElement(
-            Fragment,
-            null,
+            'div',
+            { className: 'tabs-container' },
             React.createElement(
@@ -341,0 +336,0 @@ 'ul',

lib/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.Tab = exports.Tabs = exports.SpinnerButton = exports.Spinner = exports.Notification = exports.TextArea = exports.Input = exports.InputController = exports.H = exports.LevelBoundary = exports.Heading = exports.Form = undefined;
+exports.FocusCatcher = exports.Tab = exports.Tabs = exports.SpinnerButton = exports.Spinner = exports.Notification = exports.RadioGroup = exports.Select = exports.TextArea = exports.Input = exports.H = exports.LevelBoundary = exports.Heading = exports.RadioGroupController = exports.SelectController = exports.TextareaController = exports.TextInputController = exports.Form = undefined;
 
+var _FormControllers = require('./modules/forms/tenonForm/FormControllers');
+
+Object.defineProperty(exports, 'TextInputController', {
+    enumerable: true,
+    get: function get() {
+        return _FormControllers.TextInputController;
+    }
+});
+Object.defineProperty(exports, 'TextareaController', {
+    enumerable: true,
+    get: function get() {
+        return _FormControllers.TextareaController;
+    }
+});
+Object.defineProperty(exports, 'SelectController', {
+    enumerable: true,
+    get: function get() {
+        return _FormControllers.SelectController;
+    }
+});
+Object.defineProperty(exports, 'RadioGroupController', {
+    enumerable: true,
+    get: function get() {
+        return _FormControllers.RadioGroupController;
+    }
+});
+
 var _Heading2 = require('./modules/layout/Heading');
 
 Object.defineProperty(exports, 'LevelBoundary', {
-  enumerable: true,
-  get: function get() {
-    return _Heading2.LevelBoundary;
-  }
+    enumerable: true,
+    get: function get() {
+        return _Heading2.LevelBoundary;
+    }
 });
 Object.defineProperty(exports, 'H', {
-  enumerable: true,
-  get: function get() {
-    return _Heading2.H;
-  }
+    enumerable: true,
+    get: function get() {
+        return _Heading2.H;
+    }
 });
@@ -24,6 +51,6 @@
 Object.defineProperty(exports, 'Tab', {
-  enumerable: true,
-  get: function get() {
-    return _Tabs2.Tab;
-  }
+    enumerable: true,
+    get: function get() {
+        return _Tabs2.Tab;
+    }
 });
@@ -34,9 +61,9 @@
 Object.keys(_validation).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _validation[key];
-    }
-  });
+    if (key === "default" || key === "__esModule") return;
+    Object.defineProperty(exports, key, {
+        enumerable: true,
+        get: function get() {
+            return _validation[key];
+        }
+    });
 });
@@ -47,9 +74,9 @@
 Object.keys(_validationHelpers).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _validationHelpers[key];
-    }
-  });
+    if (key === "default" || key === "__esModule") return;
+    Object.defineProperty(exports, key, {
+        enumerable: true,
+        get: function get() {
+            return _validationHelpers[key];
+        }
+    });
 });
@@ -63,6 +90,2 @@
 
-var _InputController2 = require('./modules/forms/tenonForm/InputController');
-
-var _InputController3 = _interopRequireDefault(_InputController2);
-
 var _Input2 = require('./modules/forms/tenonForm/Input');
@@ -76,2 +99,10 @@
 
+var _Select2 = require('./modules/forms/tenonForm/Select');
+
+var _Select3 = _interopRequireDefault(_Select2);
+
+var _RadioGroup2 = require('./modules/forms/tenonForm/RadioGroup');
+
+var _RadioGroup3 = _interopRequireDefault(_RadioGroup2);
+
 var _Notification2 = require('./modules/notifications/Notification');
@@ -91,2 +122,6 @@
 
+var _FocusCatcher2 = require('./modules/utils/components/FocusCatcher');
+
+var _FocusCatcher3 = _interopRequireDefault(_FocusCatcher2);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -96,8 +131,10 @@
 exports.Heading = _Heading3.default;
-exports.InputController = _InputController3.default;
 exports.Input = _Input3.default;
 exports.TextArea = _TextArea3.default;
+exports.Select = _Select3.default;
+exports.RadioGroup = _RadioGroup3.default;
 exports.Notification = _Notification3.default;
 exports.Spinner = _Spinner3.default;
 exports.SpinnerButton = _SpinnerButton3.default;
-exports.Tabs = _Tabs3.default;
+exports.Tabs = _Tabs3.default;
+exports.FocusCatcher = _FocusCatcher3.default;

lib/modules/forms/tenonForm/Form.js

@@ -25,2 +25,4 @@ 'use strict';
 
+var _FormControllers = require('./FormControllers');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -64,6 +66,7 @@
  * invalid form submit phases.
- * @example
- * {
- *     [controlName]:[value]
- * }
+ * @prop {boolean} alwaysShowErrors - An optional boolean indicating
+ * whether the form should always display errors, and not only once submit has
+ * been clicked.
+ * @prop {string} className - An optional class string to transfer to the
+ * className prop of the form element.
  *
@@ -89,2 +92,4 @@ * This component exposes functionality through React Context that is
  * by the consumers to decide when to show errors.
+ *
+ * This component is compound and also exposes the form controllers.
  * */
@@ -219,3 +224,3 @@ var Form = (_temp2 = _class = function (_Component) {
      * @param {string} name - The unique name.
-     * @param {string} controlId - The unique DOM id.
+     * @param {string} controlId - The unique DOM id for the focusable element.
      * @param {string} value - The string value.
@@ -310,3 +315,5 @@ * @param {boolean} validity - The validation validity.
     Form.prototype.render = function render() {
-        var alwaysShowErrors = this.props.alwaysShowErrors;
+        var _props = this.props,
+            alwaysShowErrors = _props.alwaysShowErrors,
+            className = _props.className;
         var _state = this.state,
@@ -323,3 +330,7 @@ formControls = _state.formControls,
                 'form',
-                { noValidate: true, onSubmit: this.onSubmitHandler },
+                {
+                    noValidate: true,
+                    onSubmit: this.onSubmitHandler,
+                    className: className || null
+                },
                 this.props.children({
@@ -335,3 +346,3 @@ formControls: formControls,
     return Form;
-}(_react.Component), _class.displayName = 'Form', _temp2);
+}(_react.Component), _class.TextInputController = _FormControllers.TextInputController, _class.TextareaController = _FormControllers.TextareaController, _class.SelectController = _FormControllers.SelectController, _class.RadioGroupController = _FormControllers.RadioGroupController, _class.displayName = 'Form', _temp2);
 Form.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -341,5 +352,6 @@ children: _propTypes2.default.func.isRequired,
     onRawSubmit: _propTypes2.default.func,
-    alwaysShowErrors: _propTypes2.default.bool
+    alwaysShowErrors: _propTypes2.default.bool,
+    className: _propTypes2.default.string
 } : {};
 exports.default = Form;
 module.exports = exports['default'];

lib/modules/forms/tenonForm/Input.js

@@ -1,9 +0,19 @@
-"use strict";
+'use strict';
 
 exports.__esModule = true;
 
-var _react = require("react");
+var _extends = 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 _react = require('react');
+
 var _react2 = _interopRequireDefault(_react);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -16,17 +26,17 @@
  * A default view component to use with the tenon-ui
- * smart input.
+ * smart textinput controller.
  *
  * @prop {string} contentHintText - Text to show as content
- *                hint of the smart input.
- * @prop {string} errorText - Text to show are error message
- *                of the smart input.
+ *                hint of the input.
+ * @prop {string} errorText - Text to show as error message
+ *                of the input.
  * @prop required {function} getLabelProps - Prop getter function
- *              from the smart input controller for the <label>.
+ *              from the smart textinput controller for the <label>.
  * @prop required {function} getInputProps - Prop getter function
- *              from the smart input controller for the <input>.
+ *              from the smart textinput controller for the <input>.
  * @prop {function} getErrorProps - Prop getter function
- *              from the smart input controller for the
+ *              from the smart textinput controller for the
  *              error message container.
  * @prop {function} getContentHintProps - Prop getter
- *              function from the smart input controller
+ *              function from the smart textinput controller
  *              for the content hint container.
@@ -38,2 +48,4 @@ * @prop required {string} labelText
  *              error container should be displayed.
+ * @prop {string} className - An optional class string to transfer to the
+ * className prop of the input element.
  *
@@ -57,22 +69,25 @@ * NOTE: All props given to this input that does not
         showError = _ref.showError,
-        rest = _objectWithoutProperties(_ref, ["contentHintText", "errorText", "getLabelProps", "getInputProps", "getErrorProps", "getContentHintProps", "labelText", "labelProps", "showError"]);
+        className = _ref.className,
+        rest = _objectWithoutProperties(_ref, ['contentHintText', 'errorText', 'getLabelProps', 'getInputProps', 'getErrorProps', 'getContentHintProps', 'labelText', 'labelProps', 'showError', 'className']);
 
     return _react2.default.createElement(
-        "div",
-        { className: "group" },
+        'div',
+        { className: 'form-group' },
         _react2.default.createElement(
-            "div",
-            { className: "fieldWrapper" },
+            'div',
+            { className: 'field-wrapper' },
             _react2.default.createElement(
-                "label",
+                'label',
                 getLabelProps(labelProps),
                 labelText
             ),
-            _react2.default.createElement("input", getInputProps(rest))
+            _react2.default.createElement('input', _extends({
+                className: (0, _classnames2.default)(className, { 'has-error': showError }) || null
+            }, getInputProps(rest)))
         ),
         contentHintText && getContentHintProps ? _react2.default.createElement(
-            "div",
-            { className: "infoWrapper" },
+            'div',
+            { className: 'info-wrapper' },
             _react2.default.createElement(
-                "span",
+                'span',
                 getContentHintProps(),
@@ -83,6 +98,6 @@ contentHintText
         showError && getErrorProps ? _react2.default.createElement(
-            "div",
-            { className: "errorWrapper" },
+            'div',
+            { className: 'error-wrapper' },
             _react2.default.createElement(
-                "span",
+                'span',
                 getErrorProps(),
@@ -97,3 +112,16 @@ errorText
 
+Input.propTypes = process.env.NODE_ENV !== "production" ? {
+    contentHintText: _propTypes2.default.string,
+    errorText: _propTypes2.default.string,
+    getLabelProps: _propTypes2.default.func.isRequired,
+    getInputProps: _propTypes2.default.func.isRequired,
+    getErrorProps: _propTypes2.default.func,
+    getContentHintProps: _propTypes2.default.func,
+    labelText: _propTypes2.default.string.isRequired,
+    labelProps: _propTypes2.default.object,
+    showError: _propTypes2.default.bool,
+    className: _propTypes2.default.string
+} : {};
+
 exports.default = Input;
-module.exports = exports["default"];
+module.exports = exports['default'];

lib/modules/forms/tenonForm/TextArea.js

@@ -1,9 +0,19 @@
-"use strict";
+'use strict';
 
 exports.__esModule = true;
 
-var _react = require("react");
+var _extends = 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 _react = require('react');
+
 var _react2 = _interopRequireDefault(_react);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -16,17 +26,17 @@
  * A default view component to use with the tenon-ui
- * smart textarea.
+ * textarea controller.
  *
  * @prop {string} contentHintText - Text to show as content
- *                hint of the smart input.
- * @prop {string} errorText - Text to show are error message
- *                of the smart input.
+ *                hint of the textarea.
+ * @prop {string} errorText - Text to show as error message
+ *                of the textarea.
  * @prop required {function} getLabelProps - Prop getter function
- *              from the smart input controller for the <label>.
+ *              from the smart textarea controller for the <label>.
  * @prop required {function} getInputProps - Prop getter function
- *              from the smart input controller for the <input>.
+ *              from the smart textarea controller for the <textarea>.
  * @prop {function} getErrorProps - Prop getter function
- *              from the smart input controller for the
+ *              from the smart textarea controller for the
  *              error message container.
  * @prop {function} getContentHintProps - Prop getter
- *              function from the smart input controller
+ *              function from the smart textarea controller
  *              for the content hint container.
@@ -38,2 +48,4 @@ * @prop required {string} labelText
  *              error container should be displayed.
+ * @prop {string} className - An optional class string to transfer to the
+ *              className prop of the textarea element.
  *
@@ -51,3 +63,3 @@ * NOTE: All props given to this textarea that does not
         getLabelProps = _ref.getLabelProps,
-        getInputProps = _ref.getInputProps,
+        getTextareaProps = _ref.getTextareaProps,
         getErrorProps = _ref.getErrorProps,
@@ -58,22 +70,25 @@ getContentHintProps = _ref.getContentHintProps,
         showError = _ref.showError,
-        rest = _objectWithoutProperties(_ref, ["contentHintText", "errorText", "getLabelProps", "getInputProps", "getErrorProps", "getContentHintProps", "labelText", "labelProps", "showError"]);
+        className = _ref.className,
+        rest = _objectWithoutProperties(_ref, ['contentHintText', 'errorText', 'getLabelProps', 'getTextareaProps', 'getErrorProps', 'getContentHintProps', 'labelText', 'labelProps', 'showError', 'className']);
 
     return _react2.default.createElement(
-        "div",
-        { className: "group" },
+        'div',
+        { className: 'form-group' },
         _react2.default.createElement(
-            "div",
-            { className: "fieldwrapper" },
+            'div',
+            { className: 'field-wrapper' },
             _react2.default.createElement(
-                "label",
+                'label',
                 getLabelProps(labelProps),
                 labelText
             ),
-            _react2.default.createElement("textarea", getInputProps(rest))
+            _react2.default.createElement('textarea', _extends({
+                className: (0, _classnames2.default)(className, { 'has-error': showError }) || null
+            }, getTextareaProps(rest)))
         ),
         contentHintText && getContentHintProps ? _react2.default.createElement(
-            "div",
-            { className: "infoWrapper" },
+            'div',
+            { className: 'info-wrapper' },
             _react2.default.createElement(
-                "span",
+                'span',
                 getContentHintProps(),
@@ -84,6 +99,6 @@ contentHintText
         showError && getErrorProps ? _react2.default.createElement(
-            "div",
-            { className: "errorWrapper" },
+            'div',
+            { className: 'error-wrapper' },
             _react2.default.createElement(
-                "span",
+                'span',
                 getErrorProps(),
@@ -96,3 +111,18 @@ errorText
 
+TextArea.displayName = 'TextArea';
+
+TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
+    contentHintText: _propTypes2.default.string,
+    errorText: _propTypes2.default.string,
+    getLabelProps: _propTypes2.default.func.isRequired,
+    getTextareaProps: _propTypes2.default.func.isRequired,
+    getErrorProps: _propTypes2.default.func,
+    getContentHintProps: _propTypes2.default.func,
+    labelText: _propTypes2.default.string.isRequired,
+    labelProps: _propTypes2.default.object,
+    showError: _propTypes2.default.bool,
+    className: _propTypes2.default.string
+} : {};
+
 exports.default = TextArea;
-module.exports = exports["default"];
+module.exports = exports['default'];

lib/modules/tabs/Tabs.js

@@ -38,2 +38,6 @@ 'use strict';
 
+var _FocusCatcher = require('../utils/components/FocusCatcher');
+
+var _FocusCatcher2 = _interopRequireDefault(_FocusCatcher);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -96,10 +100,4 @@
             _react2.default.createElement(
-                'div',
-                {
-                    tabIndex: '-1',
-                    onFocus: function onFocus(e) {
-                        e.stopPropagation();
-                    },
-                    style: { outline: 'none' }
-                },
+                _FocusCatcher2.default,
+                null,
                 noHeading ? null : _react2.default.createElement(
@@ -362,4 +360,4 @@ _Heading2.default.H,
         return _react2.default.createElement(
-            _react.Fragment,
-            null,
+            'div',
+            { className: 'tabs-container' },
             _react2.default.createElement(
@@ -366,0 +364,0 @@ 'ul',

package.json

 {
     "name": "@tenon-io/tenon-ui",
-    "version": "1.0.0-beta.1",
+    "version": "1.0.0-beta.2",
     "description": "Tenon ui components library",
@@ -29,5 +29,6 @@ "contributors": [
         "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
-        "build": "npm-run-all lint lint-demo build-css build-js",
-        "build-js": "nwb build-react-component",
+        "build": "npm-run-all lint lint-demo build-css build-js clean-deploy",
+        "build-js": "nwb build-react-component --copy-files ",
         "clean": "nwb clean-module && nwb clean-demo",
+        "clean-deploy":"rimraf {es,lib}/modules/**/{__tests__,__mocks__}",
         "start": "npm-run-all -p watch-css start-js",
@@ -44,5 +45,7 @@ "start-js": "nwb serve-react-demo",
     "dependencies": {
+        "classnames": "2.2.6",
         "lodash.isequal": "4.5.0",
         "memoize-one": "4.0.0",
-        "uuid": "3.3.2"
+        "uuid": "3.3.2",
+        "vanilla-framework": "1.8.0"
     },
@@ -75,7 +78,8 @@ "peerDependencies": {
         "prop-types": "15.6.2",
-        "react": "16.4.1",
-        "react-dom": "16.4.1",
+        "react": "16.5.0",
+        "react-dom": "16.5.0",
         "react-i18next": "^7.10.1",
         "react-loadable": "^5.5.0",
-        "react-testing-library": "4.1.5"
+        "react-testing-library": "4.1.5",
+        "rimraf": "^2.6.2"
     },
@@ -82,0 +86,0 @@ "jest": {

New alerts

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

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

319544

increased by85.61%

Number of package files

61

increased by56.41%

Lines of code

8081

increased by104.53%

Worsened metrics

Dependency count

6

increased by50%

Dev dependency count

28

increased by3.7%

Number of low supply chain risk alerts

26

increased by30%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedclassnames@2.2.6

• + Addedvanilla-framework@1.8.0

• + Addedclassnames@2.2.6(transitive)

• + Addedvanilla-framework@1.8.0(transitive)