synapsefi-ui - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

dist/components/CheckboxGroup/CheckboxGroup.js

@@ -14,5 +14,6 @@ 'use strict';
     _templateObject4 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  cursor: pointer;\n\n  border: 1px solid var(--color-medium-gray);\n  border-color: var(--color-medium-gray);\n'], ['\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  cursor: pointer;\n\n  border: 1px solid var(--color-medium-gray);\n  border-color: var(--color-medium-gray);\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\n  border-radius: 3px;\n\n  ', ' ', ';\n\n  ', ';\n'], ['\n  border-radius: 3px;\n\n  ', ' ', ';\n\n  ', ';\n']),
-    _templateObject6 = _taggedTemplateLiteral(['\n      cursor: not-allowed;\n      border-color: var(--color-warm-light);\n      color: var(--color-warm-light);\n    '], ['\n      cursor: not-allowed;\n      border-color: var(--color-warm-light);\n      color: var(--color-warm-light);\n    ']),
-    _templateObject7 = _taggedTemplateLiteral(['\n      background-color: var(--color-warm-light);\n      color: var(--color-white);\n      border-color: var(--color-warm-light);\n    '], ['\n      background-color: var(--color-warm-light);\n      color: var(--color-white);\n      border-color: var(--color-warm-light);\n    ']);
+    _templateObject5 = _taggedTemplateLiteral(['\n  display: none;\n'], ['\n  display: none;\n']),
+    _templateObject6 = _taggedTemplateLiteral(['\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  cursor: pointer;\n\n  border: 1px solid var(--color-medium-gray);\n  border-color: var(--color-medium-gray);\n\n  border-radius: 3px;\n\n  ', ' ', ';\n\n  ', ';\n\n'], ['\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  cursor: pointer;\n\n  border: 1px solid var(--color-medium-gray);\n  border-color: var(--color-medium-gray);\n\n  border-radius: 3px;\n\n  ', ' ', ';\n\n  ', ';\n\n']),
+    _templateObject7 = _taggedTemplateLiteral(['\n      cursor: not-allowed;\n      border-color: var(--color-warm-light);\n      color: var(--color-warm-light);\n    '], ['\n      cursor: not-allowed;\n      border-color: var(--color-warm-light);\n      color: var(--color-warm-light);\n    ']),
+    _templateObject8 = _taggedTemplateLiteral(['\n      background-color: var(--color-warm-light);\n      color: var(--color-white);\n      border-color: var(--color-warm-light);\n    '], ['\n      background-color: var(--color-warm-light);\n      color: var(--color-white);\n      border-color: var(--color-warm-light);\n    ']);
 
@@ -55,7 +56,11 @@ var _react = require('react');
 
-var SelectionButton = _styledComponents2.default.div(_templateObject4);
+var SelectionButton = _styledComponents2.default.input.attrs({
+  type: 'checkbox'
+})(_templateObject4);
 
-var Group__CheckboxButton = SelectionButton.extend(_templateObject5, function (_ref) {
+var Group__CheckboxButton = SelectionButton.extend(_templateObject5);
+
+var CheckBoxGroup__Label = _styledComponents2.default.label(_templateObject6, function (_ref) {
   var disabled = _ref.disabled;
-  return disabled && (0, _styledComponents.css)(_templateObject6);
+  return disabled && (0, _styledComponents.css)(_templateObject7);
 }, function (_ref2) {
@@ -68,3 +73,3 @@ var checked = _ref2.checked,
       disabled = _ref3.disabled;
-  return checked && disabled && (0, _styledComponents.css)(_templateObject7);
+  return checked && disabled && (0, _styledComponents.css)(_templateObject8);
 });
@@ -80,6 +85,6 @@
 
-    var values = _this.props.propValues ? _this.props.propValues.values : _this.props.values;
+    var value = _this.props.propValues ? _this.props.propValues.value : _this.props.value;
 
     _this.state = {
-      list: values || []
+      list: value || []
     };
@@ -107,3 +112,3 @@
     value: function componentWillReceiveProps(nextProps) {
-      var nextValues = nextProps.propValues ? nextProps.propValues.values : nextProps.values;
+      var nextValues = nextProps.propValues ? nextProps.propValues.value : nextProps.value;
 
@@ -142,5 +147,4 @@ this.setState({ list: nextValues });
           options = _ref4.options,
-          field = _ref4.field,
           propName = _ref4.propName,
-          cb = _ref4.cb,
+          gatherValue = _ref4.gatherValue,
           onChange = _ref4.onChange,
@@ -153,3 +157,2 @@ label = _ref4.label,
           error = _ref4.error,
-          errorMessage = _ref4.errorMessage,
           checkboxClassName = _ref4.checkboxClassName;
@@ -168,4 +171,10 @@
             options.map(function (item, idx) {
+              var _ref5 = [_this2.props.selectionColor || 'var(--color-authentic)', _this2.state.list.includes(item.key), item.key],
+                  selectionColor = _ref5[0],
+                  checked = _ref5[1],
+                  value = _ref5[2];
+
+
               return _react2.default.createElement(
-                Group__CheckboxButton,
+                CheckBoxGroup__Label,
                 {
@@ -175,10 +184,16 @@ key: idx,
                   disabled: disabled,
-                  selectionColor: _this2.props.selectionColor || 'var(--color-authentic)',
-                  checked: _this2.state.list.includes(item.key),
-                  value: item.key,
-                  onClick: function onClick() {
-                    var newList = _this2.addOrRemove(item.key);
-                    onChange(newList, propName);
+                  selectionColor: selectionColor,
+                  checked: checked,
+                  value: value
+                },
+                _react2.default.createElement(Group__CheckboxButton, {
+                  id: propName,
+                  disabled: disabled,
+                  defaultChecked: checked,
+                  value: value,
+                  onClick: function onClick(e) {
+                    var value = _this2.addOrRemove(item.key);
+                    onChange(e, value, propName);
                   }
-                },
+                }),
                 item.text
@@ -188,3 +203,3 @@ );
           ),
-          _react2.default.createElement(_ErrorMessage2.default, { error: error, errorMessage: errorMessage, showSymbol: true })
+          _react2.default.createElement(_ErrorMessage2.default, { error: error, showSymbol: true })
         )
@@ -191,0 +206,0 @@ );

dist/components/Dropdown/Dropdown.js

@@ -19,5 +19,5 @@ 'use strict';
     _templateObject10 = _taggedTemplateLiteral(['\n  display: flex;\n  align-items: center;\n'], ['\n  display: flex;\n  align-items: center;\n']),
-    _templateObject11 = _taggedTemplateLiteral(['\n  border-width: 0px;\n  height: 100%;\n  width: 100%;\n  margin-bottom: 0px;\n\n  outline: none;\n  font-size: 1rem;\n  color: var(--color-warm-light);\n'], ['\n  border-width: 0px;\n  height: 100%;\n  width: 100%;\n  margin-bottom: 0px;\n\n  outline: none;\n  font-size: 1rem;\n  color: var(--color-warm-light);\n']),
+    _templateObject11 = _taggedTemplateLiteral(['\n  ', '\n\n  border-width: 0px;\n  height: 100%;\n  margin-bottom: 0px;\n  font-size: 16px;\n\n  outline: none;\n\n  width: 90%;\n'], ['\n  ', '\n\n  border-width: 0px;\n  height: 100%;\n  margin-bottom: 0px;\n  font-size: 16px;\n\n  outline: none;\n\n  width: 90%;\n']),
     _templateObject12 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n'], ['\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n']),
-    _templateObject13 = _taggedTemplateLiteral(['\n  fill: var(--color-warm-light);\n  width: 16px;\n  height: 16px;\n  margin-right: 3px;\n'], ['\n  fill: var(--color-warm-light);\n  width: 16px;\n  height: 16px;\n  margin-right: 3px;\n']);
+    _templateObject13 = _taggedTemplateLiteral(['\n  width: 15px;\n  height: 15px;\n  fill: var(--color-warm-light);\n'], ['\n  width: 15px;\n  height: 15px;\n  fill: var(--color-warm-light);\n']);
 
@@ -36,2 +36,4 @@ var _react = require('react');
 
+var _SvgIcons = require('../SvgIcons');
+
 var _Label = require('../Label/Label');
@@ -45,3 +47,3 @@
 
-var _SvgIcons = require('../SvgIcons');
+var _Input = require('../styles/Input.styles');
 
@@ -92,7 +94,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var SearchInput = _styledComponents2.default.input(_templateObject11);
+var SearchInput = _styledComponents2.default.input(_templateObject11, _Input.baseInputStyling);
 
 var FlexStartAlign = _styledComponents2.default.div(_templateObject12);
 
-var SearchIcon = (0, _styledComponents2.default)(_SvgIcons.search)(_templateObject13);
+var StyledSearchIcon = (0, _styledComponents2.default)(_SvgIcons.search)(_templateObject13);
 
@@ -131,3 +133,3 @@ var Dropdown = function (_Component) {
           null,
-          _react2.default.createElement(SearchIcon, null),
+          _react2.default.createElement(StyledSearchIcon, { style: { marginRight: '0.5rem' } }),
           text
@@ -164,3 +166,3 @@ );
             null,
-            _react2.default.createElement(SearchIcon, null),
+            _react2.default.createElement(StyledSearchIcon, null),
             _react2.default.createElement(SearchInput, {
@@ -238,4 +240,3 @@ value: this.state.inputValue,
           placeholder = _ref.placeholder,
-          error = _ref.error,
-          errorMessage = _ref.errorMessage;
+          error = _ref.error;
 
@@ -259,6 +260,3 @@ var filteredOptions = this.getOptionsList(options, searchable);
           },
-          _react2.default.createElement(_ErrorMessage2.default, {
-            error: error,
-            errorMessage: errorMessage
-          }),
+          _react2.default.createElement(_ErrorMessage2.default, { error: error }),
           _react2.default.createElement(
@@ -294,7 +292,8 @@ DropdownBar,
                     index: idx,
-                    onClick: function onClick() {
+                    value: item.key,
+                    onClick: function onClick(e) {
                       _this4.setState({
                         selectedItem: item, showMenu: false, empty: false, inputValue: ''
                       });
-                      onChange(item.key, propName);
+                      onChange(e, item.key, propName);
                     }
@@ -301,0 +300,0 @@ },

dist/components/ErrorMessage/ErrorMessage.js

@@ -7,4 +7,5 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  align-items: center;\n  color: var(--color-energy);\n  display: flex;\n  \n  padding: 0.5rem;\n\n  margin-top: 36px;\n  position: absolute;\n\n  ', '\n  \n'], ['\n  align-items: center;\n  color: var(--color-energy);\n  display: flex;\n  \n  padding: 0.5rem;\n\n  margin-top: 36px;\n  position: absolute;\n\n  ', '\n  \n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    margin-top: 0px;\n    position: relative;\n  '], ['\n    margin-top: 0px;\n    position: relative;\n  ']);
+var _templateObject = _taggedTemplateLiteral(['\n  height: 16px;\n  width: 16px;\n  margin-right: 0.5rem;\n\n  path:first-of-type {\n    fill: var(--color-energy);\n  }\n'], ['\n  height: 16px;\n  width: 16px;\n  margin-right: 0.5rem;\n\n  path:first-of-type {\n    fill: var(--color-energy);\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  align-items: center;\n  color: var(--color-energy);\n  display: flex;\n  \n  padding: 0.5rem;\n\n  margin-top: 36px;\n  position: absolute;\n\n  ', '\n  \n'], ['\n  align-items: center;\n  color: var(--color-energy);\n  display: flex;\n  \n  padding: 0.5rem;\n\n  margin-top: 36px;\n  position: absolute;\n\n  ', '\n  \n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n    margin-top: 0px;\n    position: relative;\n  '], ['\n    margin-top: 0px;\n    position: relative;\n  ']);
 
@@ -19,2 +20,4 @@ var _react = require('react');
 
+var _SvgIcons = require('../SvgIcons');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,26 +27,14 @@
 
-// import { error } from '../common/svgIcons';
+var StyledErrorSign = (0, _styledComponents2.default)(_SvgIcons.error)(_templateObject);
 
-// const StyledErrorSign = styled(error)`
-//   height: 1rem;
-//   width: 1rem;
-//   margin-right: 0.5rem;
-
-//   path:first-child {
-//     fill: var(--color-energy);
-//   }
-// `;
-
-var FlexColumn__ErrorMessage = _styledComponents2.default.span(_templateObject, function (props) {
-  return props.alignedLeft && (0, _styledComponents.css)(_templateObject2);
+var FlexColumn__ErrorMessage = _styledComponents2.default.span(_templateObject2, function (props) {
+  return props.alignedLeft && (0, _styledComponents.css)(_templateObject3);
 });
 
-var renderMessage = function renderMessage(errorMessage) {
-  if (errorMessage) {
-    return [
-    // <StyledErrorSign key='StyledErrorSign'/>,
-    _react2.default.createElement(
+var renderMessage = function renderMessage(error) {
+  if (error) {
+    return [_react2.default.createElement(StyledErrorSign, { key: 'StyledErrorSign' }), _react2.default.createElement(
       'span',
-      { key: 'StyledErrorSign-span' },
-      errorMessage
+      { key: 'ErrorSignText' },
+      error
     )];
@@ -57,3 +48,2 @@ }
   var error = props.error,
-      errorMessage = props.errorMessage,
       alignedLeft = props.alignedLeft;
@@ -65,3 +55,3 @@
       { alignedLeft: alignedLeft },
-      renderMessage(errorMessage)
+      renderMessage(error)
     );
@@ -68,0 +58,0 @@ }

dist/components/Input/Input.js

@@ -8,2 +8,4 @@ 'use strict';
 
+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 _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; }; }();
@@ -28,4 +30,2 @@
 
-var _Input = require('../styles/Input.styles');
-
 var _Label = require('../Label/Label');
@@ -39,4 +39,8 @@
 
+var _Input = require('../styles/Input.styles');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -66,3 +70,3 @@
 
-var FlexRowRev__Input = _styledComponents2.default.input(_templateObject8, _Input.baseStyling, FlexRowRev__Divider, FlexRowRev__Divider);
+var FlexRowRev__Input = _styledComponents2.default.input(_templateObject8, _Input.baseInputStyling, FlexRowRev__Divider, FlexRowRev__Divider);
 
@@ -144,6 +148,5 @@ var symbols = {
           autofocus = _ref.autofocus,
-          cb = _ref.cb,
           _onChange = _ref.onChange,
+          onFocus = _ref.onFocus,
           propName = _ref.propName,
-          field = _ref.field,
           placeholder = _ref.placeholder,
@@ -154,3 +157,7 @@ value = _ref.value,
 
-      return _react2.default.createElement(FlexRowRev__Input, {
+      var _props = this.props,
+          className = _props.className,
+          remainingProps = _objectWithoutProperties(_props, ['className']);
+
+      return _react2.default.createElement(FlexRowRev__Input, _extends({}, remainingProps, {
         id: propName,
@@ -161,8 +168,8 @@ autoFocus: autofocus,
         onChange: function onChange(e) {
-          return _onChange(e.target.value, propName);
-        }
-        // onBlur={this.props.onBlur}
-        , placeholder: placeholder,
+          return _onChange(e, e.target.value, propName);
+        },
+        onFocus: onFocus,
+        placeholder: placeholder,
         disabled: disabled
-      });
+      }));
     }
@@ -173,4 +180,4 @@
     //     autofocus,
-    //     cb,
-    //     updateField,
+    //     onChange,
+    //     onFocus,
     //     propName,
@@ -188,4 +195,4 @@ //     placeholder,
     //       field={propName}
-    //       cb={cb}
-    //       updateField={updateField}
+    //       onChange={onChange}
+    //       onFocus={onFocus}
     //       placeholder={placeholder}
@@ -213,2 +220,3 @@ //       disabled={disabled}
       var mainInput = this.renderBaseInput();
+
       return _react2.default.createElement(
@@ -224,6 +232,3 @@ FlexColumn,
         ),
-        _react2.default.createElement(_ErrorMessage2.default, {
-          error: error,
-          errorMessage: errorMessage
-        })
+        _react2.default.createElement(_ErrorMessage2.default, { error: error })
       );
@@ -230,0 +235,0 @@ }

dist/components/Label/Label.js

@@ -8,3 +8,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  flex-direction: column;\n\n  margin-top: ', ';\n'], ['\n  display: flex;\n  flex-direction: column;\n\n  margin-top: ', ';\n']),
+var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  flex-direction: column;\n  width: 32rem;\n\n  margin-top: ', ';\n'], ['\n  display: flex;\n  flex-direction: column;\n  width: 32rem;\n\n  margin-top: ', ';\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  font-size: 1rem;\n  font-weight: bold;\n  color: var(--color-dark-night);\n\n  display: flex;\n  align-self: left;\n\n  ', ';\n  ', ';\n'], ['\n  font-size: 1rem;\n  font-weight: bold;\n  color: var(--color-dark-night);\n\n  display: flex;\n  align-self: left;\n\n  ', ';\n  ', ';\n']),
@@ -11,0 +11,0 @@ _templateObject3 = _taggedTemplateLiteral(['\n  color: var(--color-evening);\n  text-align: left;\n  font-size: 13px;\n  white-space: pre-wrap;\n\n  margin-top: 5px;\n  width: 75%;\n'], ['\n  color: var(--color-evening);\n  text-align: left;\n  font-size: 13px;\n  white-space: pre-wrap;\n\n  margin-top: 5px;\n  width: 75%;\n']);

dist/components/RadioGroup/RadioGroup.js

@@ -9,5 +9,5 @@ 'use strict';
 var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  align-items: center;\n'], ['\n  display: flex;\n  align-items: center;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  cursor: pointer;\n  border: 1px solid var(--color-medium-gray);\n  border-color: var(--color-medium-gray);\n'], ['\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  cursor: pointer;\n  border: 1px solid var(--color-medium-gray);\n  border-color: var(--color-medium-gray);\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n'], ['\n  display: flex;\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  padding: 1rem;\n  color: var(--color-body-text);\n\n  border-right-width: 0px;\n\n  &:first-of-type {\n    border-top-left-radius: 3px;\n    border-bottom-left-radius: 3px;\n  }\n  &:last-of-type {\n    border-top-right-radius: 3px;\n    border-bottom-right-radius: 3px;\n\n    border-right-width: 1px;\n  }\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', ';\n\n  ', '\n'], ['\n  padding: 1rem;\n  color: var(--color-body-text);\n\n  border-right-width: 0px;\n\n  &:first-of-type {\n    border-top-left-radius: 3px;\n    border-bottom-left-radius: 3px;\n  }\n  &:last-of-type {\n    border-top-right-radius: 3px;\n    border-bottom-right-radius: 3px;\n\n    border-right-width: 1px;\n  }\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', ';\n\n  ', '\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  display: flex;\n'], ['\n  display: flex;\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  display: none;\n'], ['\n  display: none;\n']),
+    _templateObject4 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  cursor: pointer;\n  border: 1px solid var(--color-medium-gray);\n  border-color: var(--color-medium-gray);\n  padding: 1rem;\n  color: var(--color-body-text);\n\n  border-right-width: 0px;\n\n  &:first-of-type {\n    border-top-left-radius: 3px;\n    border-bottom-left-radius: 3px;\n  }\n  &:last-of-type {\n    border-top-right-radius: 3px;\n    border-bottom-right-radius: 3px;\n\n    border-right-width: 1px;\n  }\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', ';\n\n  ', '\n'], ['\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  cursor: pointer;\n  border: 1px solid var(--color-medium-gray);\n  border-color: var(--color-medium-gray);\n  padding: 1rem;\n  color: var(--color-body-text);\n\n  border-right-width: 0px;\n\n  &:first-of-type {\n    border-top-left-radius: 3px;\n    border-bottom-left-radius: 3px;\n  }\n  &:last-of-type {\n    border-top-right-radius: 3px;\n    border-bottom-right-radius: 3px;\n\n    border-right-width: 1px;\n  }\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', ';\n\n  ', '\n']),
     _templateObject5 = _taggedTemplateLiteral(['\n    cursor: not-allowed;\n    border-color: var(--color-warm-light);\n    color: var(--color-warm-light);\n  '], ['\n    cursor: not-allowed;\n    border-color: var(--color-warm-light);\n    color: var(--color-warm-light);\n  ']),
@@ -40,7 +40,9 @@ _templateObject6 = _taggedTemplateLiteral(['\n    border-color: var(--color-authentic);\n    background-color: var(--color-authentic);\n    color: var(--color-white);\n  '], ['\n    border-color: var(--color-authentic);\n    background-color: var(--color-authentic);\n    color: var(--color-white);\n  ']),
 
-var SelectionButton = _styledComponents2.default.div(_templateObject2);
+var Group = _styledComponents2.default.div(_templateObject2);
 
-var Group = _styledComponents2.default.div(_templateObject3);
+var Group__RadioButton = _styledComponents2.default.input.attrs({
+  type: 'radio'
+})(_templateObject3);
 
-var Group__RadioButton = SelectionButton.extend(_templateObject4, function (_ref) {
+var RadioButton__Label = _styledComponents2.default.label(_templateObject4, function (_ref) {
   var disabled = _ref.disabled;
@@ -98,3 +100,3 @@ return disabled && (0, _styledComponents.css)(_templateObject5);
       propName = _ref6.propName,
-      onChange = _ref6.onChange,
+      _onChange = _ref6.onChange,
       options = _ref6.options,
@@ -107,4 +109,3 @@ label = _ref6.label,
       disabled = _ref6.disabled,
-      error = _ref6.error,
-      errorMessage = _ref6.errorMessage;
+      error = _ref6.error;
 
@@ -122,21 +123,24 @@ var selectedIndex = void 0;
         return _react2.default.createElement(
-          Group__RadioButton,
+          RadioButton__Label,
           {
             key: idx,
-            disabled: disabled,
+            rightOfSelected: idx === selectedIndex + 1,
+            style: radioStyle,
             largeButtons: largeButtons,
             checked: item.key === value,
-            rightOfSelected: idx === selectedIndex + 1,
-            style: radioStyle,
-            onClick: function onClick() {
-              return onChange(item.key, propName);
+            disabled: disabled
+          },
+          _react2.default.createElement(Group__RadioButton, {
+            id: propName,
+            defaultValue: item.key,
+            disabled: disabled,
+            checked: item.key === value,
+            onChange: function onChange(e) {
+              return _onChange(e, item.key, propName);
             }
-          },
+          }),
           item.text
         );
       }),
-      _react2.default.createElement(_ErrorMessage2.default, {
-        error: error,
-        errorMessage: errorMessage
-      })
+      _react2.default.createElement(_ErrorMessage2.default, { error: error })
     )
@@ -143,0 +147,0 @@ );

dist/components/styles/Input.styles.js

@@ -6,2 +6,2 @@ "use strict";
 });
-var baseStyling = exports.baseStyling = "\n  outline: none;\n  display: block;\n  box-shadow: none;\n  resize: none;\n\n  font-family: inherit;\n  font-size: 1rem;\n\n  margin: 0;\n  padding: 0.5rem;\n\n  width: 100%;\n\n  border-radius: 0px;\n  color: var(--color-dark-base);\n  background-color: var(--color-input-background);\n\n  &::placeholder, &::-webkit-datetime-edit {\n    color: var(--color-warm-light);\n  }\n\n  &:focus {\n    color: var(--color-dark-base);\n    background-color: var(--color-input-background);\n\n    outline: none;\n  }\n";
+var baseInputStyling = exports.baseInputStyling = "\n  outline: none;\n  display: block;\n  box-shadow: none;\n  resize: none;\n\n  font-family: inherit;\n  font-size: 1rem;\n\n  margin: 0;\n  padding: 0.5rem;\n\n  width: 100%;\n\n  border-radius: 0px;\n  color: var(--color-dark-base);\n  background-color: var(--color-input-background);\n\n  &::placeholder, &::-webkit-datetime-edit {\n    color: var(--color-warm-light);\n  }\n\n  &:focus {\n    color: var(--color-dark-base);\n    background-color: var(--color-input-background);\n\n    outline: none;\n  }\n";

dist/components/Textarea/Textarea.js

@@ -8,2 +8,4 @@ 'use strict';
 
+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 _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; }; }();
@@ -27,4 +29,2 @@
 
-var _Input = require('../styles/Input.styles');
-
 var _Label = require('../Label/Label');
@@ -38,4 +38,8 @@
 
+var _Input = require('../styles/Input.styles');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -59,13 +63,13 @@
 
-var FlexRowRev__Textarea = _styledComponents2.default.textarea(_templateObject6, _Input.baseStyling, FlexRowRev__Divider);
+var FlexRowRev__Textarea = _styledComponents2.default.textarea(_templateObject6, _Input.baseInputStyling, FlexRowRev__Divider);
 
 var FlexColumn__ErrorMessage = _styledComponents2.default.span(_templateObject7);
 
-var Textarea = function (_Component) {
-  _inherits(Textarea, _Component);
+var TextArea = function (_Component) {
+  _inherits(TextArea, _Component);
 
-  function Textarea(props) {
-    _classCallCheck(this, Textarea);
+  function TextArea(props) {
+    _classCallCheck(this, TextArea);
 
-    return _possibleConstructorReturn(this, (Textarea.__proto__ || Object.getPrototypeOf(Textarea)).call(this, props));
+    return _possibleConstructorReturn(this, (TextArea.__proto__ || Object.getPrototypeOf(TextArea)).call(this, props));
   }
@@ -94,3 +98,3 @@
 
-  _createClass(Textarea, [{
+  _createClass(TextArea, [{
     key: 'renderTextareaField',
@@ -100,3 +104,3 @@ value: function renderTextareaField() {
           autofocus = _ref.autofocus,
-          cb = _ref.cb,
+          gatherValue = _ref.gatherValue,
           _onChange = _ref.onChange,
@@ -110,2 +114,6 @@ error = _ref.error,
 
+      var _props = this.props,
+          className = _props.className,
+          remainingProps = _objectWithoutProperties(_props, ['className']);
+
       return _react2.default.createElement(
@@ -117,3 +125,4 @@ FlexColumn,
           null,
-          _react2.default.createElement(FlexRowRev__Textarea, {
+          _react2.default.createElement(FlexRowRev__Textarea, _extends({}, remainingProps, {
+            id: propName,
             autoFocus: autofocus,
@@ -123,12 +132,9 @@ value: value,
             onChange: function onChange(e) {
-              return _onChange(e.target.value, propName);
+              return _onChange(e, e.target.value, propName);
             },
             placeholder: placeholder
-          }),
+          })),
           _react2.default.createElement(FlexRowRev__Divider, { error: error })
         ),
-        _react2.default.createElement(_ErrorMessage2.default, {
-          error: error,
-          errorMessage: errorMessage
-        })
+        _react2.default.createElement(_ErrorMessage2.default, { error: error })
       );
@@ -159,5 +165,5 @@ }
 
-  return Textarea;
+  return TextArea;
 }(_react.Component);
 
-exports.default = Textarea;
+exports.default = TextArea;

package.json

 {
   "name": "synapsefi-ui",
   "description": "synapsefi-ui",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "main": "index.js",
@@ -6,0 +6,0 @@ "license": "MIT",

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136884

increased by10.02%

Number of package files

19

increased by5.56%

Lines of code

2374

increased by9.25%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes