@zohodesk/components 1.0.0-temp-199.10 → 1.0.0-temp-199.12

package/lib/RippleEffect/props/propTypes.js

@@ -16,7 +16,7 @@ var propTypes = {
   isDisabled: _propTypes["default"].bool,
   isNeedEffect: _propTypes["default"].bool,
   needBorder: _propTypes["default"].bool,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  palette: _propTypes["default"].oneOf(['default', 'secondary', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
   cssClassPropOfChild: _propTypes["default"].string,
   isCopyTextEnabled: _propTypes["default"].bool
 };

package/lib/Select/GroupSelect.js

@@ -668,8 +668,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           isLoading = _this$props9.isLoading,
           dataSelectorId = _this$props9.dataSelectorId,
           customProps = _this$props9.customProps;
-      var _customProps$suggesti = customProps.suggestionsProps,
-          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
+      var _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -862,7 +862,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
               role: 'option'
             },
             dataId: "".concat(dataId, "_Options")
-          }, suggestionsProps)));
+          }, SuggestionsProps)));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/Select/SelectWithAvatar.js

@@ -217,8 +217,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           dataSelectorId = _this$props.dataSelectorId,
           getTargetRef = _this$props.getTargetRef,
           customProps = _this$props.customProps;
-      var _customProps$suggesti = customProps.suggestionsProps,
-          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
+      var _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -374,7 +374,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaParentRole: 'listbox',
             role: 'option'
           }
-        }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/Select/SelectWithIcon.js

@@ -441,8 +441,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
-          _customProps$listItem = customProps.listItemProps,
-          listItemProps = _customProps$listItem === void 0 ? {} : _customProps$listItem;
+          _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -599,7 +599,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
               ariaSelected: selectedId === options[idKey],
               ariaLabel: options[valueKey]
             }
-          }, listItemProps));
+          }, ListItemProps));
         })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/Select/props/propTypes.js

@@ -195,7 +195,7 @@ var GroupSelect_propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
     TextBoxIconProps: _propTypes["default"].object,
-    suggestionsProps: _propTypes["default"].object
+    SuggestionsProps: _propTypes["default"].object
   })
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
@@ -260,7 +260,9 @@ var SelectWithAvatar_propTypes = _objectSpread(_objectSpread({}, Select_propType
   needEffect: _propTypes["default"].bool,
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
-  customProps: _propTypes["default"].string
+  customProps: _propTypes["default"].shape({
+    SuggestionsProps: _propTypes["default"].object
+  })
 });
 
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
@@ -324,7 +326,8 @@ var SelectWithIcon_propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
-    TextBoxIconProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object,
+    ListItemProps: _propTypes["default"].object
   })
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/lib/Tag/Tag.js

@@ -103,7 +103,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
       e && e.preventDefault();
       e.stopPropagation && e.stopPropagation();
       e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-      onRemove && onRemove(id);
+      onRemove && onRemove(id, e);
     }
   }, {
     key: "getRef",

package/lib/Textarea/Textarea.js

@@ -102,7 +102,10 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
           htmlId = _this$props.htmlId,
           a11y = _this$props.a11y,
           customClass = _this$props.customClass,
-          isFocus = _this$props.isFocus;
+          isFocus = _this$props.isFocus,
+          rows = _this$props.rows,
+          cols = _this$props.cols,
+          customAttributes = _this$props.customAttributes;
       var ariaLabel = a11y.ariaLabel,
           ariaLabelledby = a11y.ariaLabelledby;
       var resizes = {
@@ -126,7 +129,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
       }
 
       var isEditable = !(isReadOnly || isDisabled);
-      var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(_TextareaModule["default"][size], " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], "  ").concat(animated ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : '', "   ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextareaModule["default"].effect, " ").concat(isEditable && isFocus ? _TextareaModule["default"].active : '') : "".concat(_TextareaModule["default"].basic);
+      var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(size !== 'default' ? _TextareaModule["default"][size] : '', " ").concat(!rows && size === 'default' ? _TextareaModule["default"].defaultHeight : '', " ").concat(!cols ? _TextareaModule["default"].defaultWidth : '', " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], "  ").concat(animated && size !== 'default' ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : '', "   ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextareaModule["default"].effect, " ").concat(isEditable && isFocus ? _TextareaModule["default"].active : '') : "".concat(_TextareaModule["default"].basic);
       return /*#__PURE__*/_react["default"].createElement("textarea", _extends({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
@@ -143,8 +146,10 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         ref: getRef,
         value: text,
         id: htmlId,
-        "data-selector-id": dataSelectorId
-      }));
+        "data-selector-id": dataSelectorId,
+        rows: rows,
+        cols: cols
+      }, customAttributes));
     }
   }]);
 

package/lib/Textarea/Textarea.module.css

@@ -7,7 +7,8 @@
   --textarea_font_size: var(--zd_font_size14);
   --textarea_line_height: 1.5712;
   --textarea_padding: var(--zd_size2) 0;
-  --textarea_height: var(--zd_size30);
+  --textarea_height: auto;
+  --textarea_width: auto;
 
   /* textarea placeholder default variable */
   --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
@@ -63,7 +64,7 @@
     height var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
-  width: 100% ;
+  width: var(--textarea_width);
   max-width: 100% ;
   min-width: var(--zd_size100) ;
   font-size: var(--textarea_font_size);
@@ -91,6 +92,13 @@
 .effect:focus,.effect.active {
   --textarea_border_color: var(--zdt_textarea_focus_border);
 }
+
+.defaultHeight{
+  --textarea_height: var(--zd_size30);
+} 
+.defaultWidth {
+  --textarea_width: 100%;
+}
 .xsmall,
 .xmedium {
   vertical-align: middle;
@@ -107,7 +115,7 @@
   --textarea_height: var(--zd_size25);
   --textarea_line_height: 1.3077;
 }
-.small {
+ .small{
   --textarea_height: var(--zd_size30);
   --textarea_padding: var(--zd_size2) 0;
 }

package/lib/Textarea/__tests__/Textarea.spec.js

@@ -232,4 +232,42 @@ describe('Textarea component', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should be render rows and cols ', function () {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      size: "default",
+      rows: "3",
+      cols: "3"
+    })),
+        asFragment = _render26.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render rows only ', function () {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      size: "default",
+      rows: "3"
+    })),
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render  cols only ', function () {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      size: "default",
+      cols: "3"
+    })),
+        asFragment = _render28.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render custom Attributes ', function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      customAttributes: {
+        disabled: true
+      }
+    })),
+        asFragment = _render29.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap

@@ -1,9 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Textarea component Should be render  cols only  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container  defaultHeight  default needBorder noresize     effect  borderColor_default"
+    cols="3"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
 exports[`Textarea component Should be render autofocus true  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -11,10 +23,22 @@ exports[`Textarea component Should be render autofocus true  1`] = `
 </DocumentFragment>
 `;
 
+exports[`Textarea component Should be render custom Attributes  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    disabled=""
+  />
+</DocumentFragment>
+`;
+
 exports[`Textarea component Should be render customClass  1`] = `
 <DocumentFragment>
   <textarea
-    class="textAreaCustomClass  container small default needBorder noresize     effect  borderColor_default"
+    class="textAreaCustomClass  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -25,7 +49,7 @@ exports[`Textarea component Should be render customClass  1`] = `
 exports[`Textarea component Should be render htmlId  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -37,7 +61,7 @@ exports[`Textarea component Should be render htmlId  1`] = `
 exports[`Textarea component Should be render isDisabled is false and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -48,7 +72,7 @@ exports[`Textarea component Should be render isDisabled is false and needEffect
 exports[`Textarea component Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize       borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -60,7 +84,7 @@ exports[`Textarea component Should be render isDisabled is true 1`] = `
 exports[`Textarea component Should be render isDisabled is true and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize       borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -72,7 +96,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
 exports[`Textarea component Should be render isDisabled is true and needEffect is true 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -84,7 +108,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
 exports[`Textarea component Should be render isReadOnly is false and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -95,7 +119,7 @@ exports[`Textarea component Should be render isReadOnly is false and needEffect
 exports[`Textarea component Should be render isReadOnly is true and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class=" readonly container small default needBorder noresize       borderColor_default"
+    class=" readonly container small  defaultWidth default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -107,7 +131,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
 exports[`Textarea component Should be render isReadOnly is true and needEffect is true 1`] = `
 <DocumentFragment>
   <textarea
-    class=" readonly container small default needBorder noresize     effect  borderColor_default"
+    class=" readonly container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -119,7 +143,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
 exports[`Textarea component Should be render maxLength in number 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -131,7 +155,7 @@ exports[`Textarea component Should be render maxLength in number 1`] = `
 exports[`Textarea component Should be render maxLength in string 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -154,7 +178,7 @@ exports[`Textarea component Should be render needAppearance is false  1`] = `
 exports[`Textarea component Should be render needBorder is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default noBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default noBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -165,7 +189,7 @@ exports[`Textarea component Should be render needBorder is false 1`] = `
 exports[`Textarea component Should be render needReadOnlyStyle is false  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -176,7 +200,7 @@ exports[`Textarea component Should be render needReadOnlyStyle is false  1`] = `
 exports[`Textarea component Should be render placeholder 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -185,10 +209,35 @@ exports[`Textarea component Should be render placeholder 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Textarea component Should be render rows and cols  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container    default needBorder noresize     effect  borderColor_default"
+    cols="3"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    rows="3"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render rows only  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container   defaultWidth default needBorder noresize     effect  borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    rows="3"
+  />
+</DocumentFragment>
+`;
+
 exports[`Textarea component Should be render text 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -201,7 +250,7 @@ exports[`Textarea component Should be render text 1`] = `
 exports[`Textarea component Should be render with the basic set of default props 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -212,7 +261,7 @@ exports[`Textarea component Should be render with the basic set of default props
 exports[`Textarea component Should render Varient - default 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -223,7 +272,7 @@ exports[`Textarea component Should render Varient - default 1`] = `
 exports[`Textarea component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small primary needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth primary needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -234,7 +283,7 @@ exports[`Textarea component Should render Varient - primary 1`] = `
 exports[`Textarea component Should render animated is false - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large default needBorder noresize     effect  borderColor_default"
+    class="  container large  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -245,7 +294,7 @@ exports[`Textarea component Should render animated is false - large 1`] = `
 exports[`Textarea component Should render animated is false - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium default needBorder noresize     effect  borderColor_default"
+    class="  container medium  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -256,7 +305,7 @@ exports[`Textarea component Should render animated is false - medium 1`] = `
 exports[`Textarea component Should render animated is false - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -267,7 +316,7 @@ exports[`Textarea component Should render animated is false - small 1`] = `
 exports[`Textarea component Should render animated is false - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium default needBorder noresize     effect  borderColor_default"
+    class="  container xmedium  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -278,7 +327,7 @@ exports[`Textarea component Should render animated is false - xmedium 1`] = `
 exports[`Textarea component Should render animated is false - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall default needBorder noresize     effect  borderColor_default"
+    class="  container xsmall  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -289,7 +338,7 @@ exports[`Textarea component Should render animated is false - xsmall 1`] = `
 exports[`Textarea component Should render animated is true - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large default needBorder noresize  largeanimated   effect  borderColor_default"
+    class="  container large  defaultWidth default needBorder noresize  largeanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -300,7 +349,7 @@ exports[`Textarea component Should render animated is true - large 1`] = `
 exports[`Textarea component Should render animated is true - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium default needBorder noresize  undefined   effect  borderColor_default"
+    class="  container medium  defaultWidth default needBorder noresize  undefined   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -311,7 +360,7 @@ exports[`Textarea component Should render animated is true - medium 1`] = `
 exports[`Textarea component Should render animated is true - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize  smallanimated   effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize  smallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -322,7 +371,7 @@ exports[`Textarea component Should render animated is true - small 1`] = `
 exports[`Textarea component Should render animated is true - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium default needBorder noresize  xmediumanimated   effect  borderColor_default"
+    class="  container xmedium  defaultWidth default needBorder noresize  xmediumanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -333,7 +382,7 @@ exports[`Textarea component Should render animated is true - xmedium 1`] = `
 exports[`Textarea component Should render animated is true - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall default needBorder noresize  xsmallanimated   effect  borderColor_default"
+    class="  container xsmall  defaultWidth default needBorder noresize  xsmallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -344,7 +393,7 @@ exports[`Textarea component Should render animated is true - xsmall 1`] = `
 exports[`Textarea component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -355,7 +404,7 @@ exports[`Textarea component Should render borderColor - default 1`] = `
 exports[`Textarea component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_transparent"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_transparent"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -366,7 +415,7 @@ exports[`Textarea component Should render borderColor - transparent 1`] = `
 exports[`Textarea component Should render resize  - both 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder resizeboth     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder resizeboth     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -377,7 +426,7 @@ exports[`Textarea component Should render resize  - both 1`] = `
 exports[`Textarea component Should render resize  - horizontal 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder resizeX     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder resizeX     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -388,7 +437,7 @@ exports[`Textarea component Should render resize  - horizontal 1`] = `
 exports[`Textarea component Should render resize  - none 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -399,7 +448,7 @@ exports[`Textarea component Should render resize  - none 1`] = `
 exports[`Textarea component Should render resize  - vertical 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder resizeY     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder resizeY     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -410,7 +459,7 @@ exports[`Textarea component Should render resize  - vertical 1`] = `
 exports[`Textarea component Should render size  - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large default needBorder noresize  largeanimated   effect  borderColor_default"
+    class="  container large  defaultWidth default needBorder noresize  largeanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -421,7 +470,7 @@ exports[`Textarea component Should render size  - large 1`] = `
 exports[`Textarea component Should render size  - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium default needBorder noresize  undefined   effect  borderColor_default"
+    class="  container medium  defaultWidth default needBorder noresize  undefined   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -432,7 +481,7 @@ exports[`Textarea component Should render size  - medium 1`] = `
 exports[`Textarea component Should render size  - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize  smallanimated   effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize  smallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -443,7 +492,7 @@ exports[`Textarea component Should render size  - small 1`] = `
 exports[`Textarea component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium default needBorder noresize  xmediumanimated   effect  borderColor_default"
+    class="  container xmedium  defaultWidth default needBorder noresize  xmediumanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -454,7 +503,7 @@ exports[`Textarea component Should render size  - xmedium 1`] = `
 exports[`Textarea component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall default needBorder noresize  xsmallanimated   effect  borderColor_default"
+    class="  container xsmall  defaultWidth default needBorder noresize  xsmallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -467,7 +516,7 @@ exports[`Textarea component rendering ally clearLabel 1`] = `
   <textarea
     aria-label="TextAreaAriaLabel"
     aria-labelledby="TexareaAriaLabelledby"
-    class="  container small default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"

package/lib/Textarea/props/defaultProps.js

@@ -19,6 +19,7 @@ var defaultProps = {
   autoFocus: false,
   customClass: '',
   a11y: {},
-  dataSelectorId: 'textarea'
+  dataSelectorId: 'textarea',
+  customAttributes: {}
 };
 exports.defaultProps = defaultProps;