Release 1.21.0

lerna.json

@@ -14,5 +14,5 @@
     "packages/*",
     "packages/themes/*"
   ],
-  "version": "1.20.1"
+  "version": "1.21.0"
 }

packages/core/dist/components/Autocomplete/Autocomplete.js

@@ -31,6 +31,10 @@ var _TextField = require('../TextField/TextField');
 
 var _TextField2 = _interopRequireDefault(_TextField);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _lodash = require('lodash.uniqueid');
 
 var _lodash2 = _interopRequireDefault(_lodash);
@@ -141,7 +145,10 @@ var Autocomplete = exports.Autocomplete = function (_React$PureComponent) {
           label = _props.label,
           loading = _props.loading,
           children = _props.children,
-          autocompleteProps = _objectWithoutProperties(_props, ['ariaClearLabel', 'clearInputText', 'items', 'label', 'loading', 'children']);
+          className = _props.className,
+          autocompleteProps = _objectWithoutProperties(_props, ['ariaClearLabel', 'clearInputText', 'items', 'label', 'loading', 'children', 'className']);
+
+      var rootClassName = (0, _classnames2.default)('ds-u-clearfix', 'ds-c-autocomplete', className);
 
       return _react2.default.createElement(_downshift2.default, _extends({
         render: function render(_ref) {
@@ -153,7 +160,7 @@ var Autocomplete = exports.Autocomplete = function (_React$PureComponent) {
               isOpen = _ref.isOpen;
           return _react2.default.createElement(
             'div',
-            { className: 'ds-u-clearfix ds-c-autocomplete' },
+            { className: rootClassName },
             _this4.renderChildren(getInputProps),
             isOpen && (loading || items) ? _react2.default.createElement(
               'div',
@@ -213,6 +220,11 @@ Autocomplete.propTypes = {
    */
   ariaClearLabel: _propTypes2.default.string,
   children: _propTypes2.default.node,
+  /**
+   * Additional classes to be added to the root element.
+   * Useful for adding utility classes.
+   */
+  className: _propTypes2.default.string,
   /**
    * Clear search text that will appear on the page as part of the rendered `<button>` component
    */

packages/core/dist/components/TextField/Mask.js

@@ -137,7 +137,6 @@ var Mask = exports.Mask = function (_React$PureComponent) {
 
     var _this = _possibleConstructorReturn(this, (Mask.__proto__ || Object.getPrototypeOf(Mask)).call(this, props));
 
-    _this.field = _react2.default.Children.only(_this.props.children);
     _this.state = {
       value: _this.maskedValue(_this.initialValue())
     };
@@ -148,11 +147,23 @@ var Mask = exports.Mask = function (_React$PureComponent) {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
       if (this.debouncedOnBlurEvent) {
-        this.field.props.onBlur(this.debouncedOnBlurEvent);
+        this.field().props.onBlur(this.debouncedOnBlurEvent);
         this.debouncedOnBlurEvent = null;
       }
     }
 
+    /**
+     * Get the child text field. Called as a method so that
+     * updates to the field cause the mask to re-render
+     * @returns {React.ReactElement} Child TextField
+     */
+
+  }, {
+    key: 'field',
+    value: function field() {
+      return _react2.default.Children.only(this.props.children);
+    }
+
     /**
      * Returns the value with additional masking characters
      * @param {String} value
@@ -186,17 +197,18 @@ var Mask = exports.Mask = function (_React$PureComponent) {
      * add/remove characters after the field has been blurred,
      * rather than when the user is typing in the field
      * @param {Object} evt
+     * @param {React.Element} field - Child TextField
      */
 
   }, {
     key: 'handleBlur',
-    value: function handleBlur(evt) {
+    value: function handleBlur(evt, field) {
       var value = this.maskedValue(evt.target.value);
 
       // We only debounce the onBlur when we know for sure that
       // this component will re-render (AKA when the value changes)
       // and when an onBlur callback is present
-      var debounce = value !== this.state.value && typeof this.field.props.onBlur === 'function';
+      var debounce = value !== this.state.value && typeof field.props.onBlur === 'function';
 
       if (debounce) {
         // We need to retain a reference to the event after the callback
@@ -211,38 +223,47 @@ var Mask = exports.Mask = function (_React$PureComponent) {
         value: value
       });
 
-      if (!debounce && typeof this.field.props.onBlur === 'function') {
+      if (!debounce && typeof field.props.onBlur === 'function') {
         // If we didn't debounce the onBlur event, then we need to
         // call the onBlur callback from here
-        this.field.props.onBlur(evt);
+        field.props.onBlur(evt);
       }
     }
+
+    /**
+     * @param {Object} evt
+     * @param {React.Element} field - Child TextField
+     */
+
   }, {
     key: 'handleChange',
-    value: function handleChange(evt) {
+    value: function handleChange(evt, field) {
       this.setState({ value: evt.target.value });
 
-      if (typeof this.field.props.onChange === 'function') {
-        this.field.props.onChange(evt);
+      if (typeof field.props.onChange === 'function') {
+        field.props.onChange(evt);
       }
     }
   }, {
     key: 'initialValue',
     value: function initialValue() {
-      return this.field.props.value || this.field.props.defaultValue;
+      var field = this.field();
+      return field.props.value || field.props.defaultValue;
     }
   }, {
     key: 'render',
     value: function render() {
       var _this2 = this;
 
-      return _react2.default.cloneElement(this.field, {
+      var field = this.field();
+
+      return _react2.default.cloneElement(field, {
         defaultValue: undefined,
         onBlur: function onBlur(evt) {
-          return _this2.handleBlur(evt);
+          return _this2.handleBlur(evt, field);
         },
         onChange: function onChange(evt) {
-          return _this2.handleChange(evt);
+          return _this2.handleChange(evt, field);
         },
         value: this.state.value
       });

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmsgov/design-system-core",
-  "version": "1.20.1",
+  "version": "1.21.0",
   "publishConfig": {
     "access": "public"
   },
@@ -9,7 +9,7 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "dist/index.js",
   "dependencies": {
-    "@cmsgov/design-system-support": "^1.20.1",
+    "@cmsgov/design-system-support": "^1.21.0",
     "classnames": "^2.2.5",
     "core-js": "^2.5.3",
     "downshift": "^1.28.2",

packages/docs/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@cmsgov/design-system-docs",
-  "version": "1.20.1",
+  "version": "1.21.0",
   "private": true,
   "description": "Design system's documentation website",
   "repository": "CMSgov/design-system",
   "dependencies": {
-    "@cmsgov/design-system-core": "^1.20.1",
-    "@cmsgov/design-system-layout": "^1.20.1",
-    "@cmsgov/design-system-support": "^1.20.1",
+    "@cmsgov/design-system-core": "^1.21.0",
+    "@cmsgov/design-system-layout": "^1.21.0",
+    "@cmsgov/design-system-support": "^1.21.0",
     "classnames": "^2.2.5",
     "core-js": "^2.5.3",
     "lodash": "^4.17.5",

packages/layout/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@cmsgov/design-system-layout",
-  "version": "1.20.1",
+  "version": "1.21.0",
   "publishConfig": {
     "access": "public"
   },
   "description": "Responsive flexbox grid framework",
   "repository": "CMSgov/design-system",
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@cmsgov/design-system-support": "^1.20.1"
+    "@cmsgov/design-system-support": "^1.21.0"
   }
 }

packages/support/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmsgov/design-system-support",
-  "version": "1.20.1",
+  "version": "1.21.0",
   "publishConfig": {
     "access": "public"
   },