Release v1.28.0

lerna.json

@@ -14,5 +14,5 @@
     "packages/*",
     "packages/themes/*"
   ],
-  "version": "1.27.0"
+  "version": "1.28.0"
 }

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

@@ -70,9 +70,10 @@ var Autocomplete = exports.Autocomplete = function (_React$PureComponent) {
 
     var _this = _possibleConstructorReturn(this, (Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call(this, props));
 
-    _this.id = (0, _lodash2.default)('autocomplete_');
+    _this.id = _this.props.id || (0, _lodash2.default)('autocomplete_');
     _this.labelId = (0, _lodash2.default)('autocomplete_header_');
     _this.listboxId = (0, _lodash2.default)('autocomplete_owned_listbox_');
+    _this.loader = null;
     return _this;
   }
 
@@ -115,12 +116,14 @@ var Autocomplete = exports.Autocomplete = function (_React$PureComponent) {
     value: function renderChildren(getInputProps) {
       var _this3 = this;
 
-      // Extend props on the TextField, by passing them through
-      // Downshift's `getInputProps` method
+      // Extend props on the TextField, by passing them
+      // through Downshift's `getInputProps` method
       return _react2.default.Children.map(this.props.children, function (child) {
         if (isTextField(child)) {
           var propOverrides = {
             'aria-controls': _this3.listboxId,
+            autoComplete: _this3.props.autoCompleteLabel,
+            focusTrigger: _this3.props.focusTrigger,
             id: _this3.id,
             onBlur: child.props.onBlur,
             onChange: child.props.onChange,
@@ -206,6 +209,7 @@ var Autocomplete = exports.Autocomplete = function (_React$PureComponent) {
 
 Autocomplete.defaultProps = {
   ariaClearLabel: 'Clear typeahead and search again',
+  autoCompleteLabel: 'nope',
   clearInputText: 'Clear search',
   itemToString: function itemToString(item) {
     return item ? item.name : '';
@@ -219,6 +223,13 @@ Autocomplete.propTypes = {
    * Screenreader-specific label for the Clear search `<button>`. Intended to provide a longer, more descriptive explanation of the button's behavior.
    */
   ariaClearLabel: _propTypes2.default.string,
+  /**
+   * Control the `TextField` autocomplete attribute. Defaults to 'nope' to prevent Chrome
+   * from autofilling user presets.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
+   */
+  autoCompleteLabel: _propTypes2.default.string,
   children: _propTypes2.default.node,
   /**
    * Additional classes to be added to the root element.
@@ -229,6 +240,17 @@ Autocomplete.propTypes = {
    * Clear search text that will appear on the page as part of the rendered `<button>` component
    */
   clearInputText: _propTypes2.default.node,
+  /**
+   * Used to focus child `TextField` on `componentDidMount()`
+   */
+  focusTrigger: _propTypes2.default.bool,
+  /**
+   * A unique id to be passed to the child `TextField`. If no id is passed as a prop,
+   * the `Autocomplete` component will auto-generate one. This prop was provided in cases
+   * where an id might need to be passed to multiple components, such as the `htmlFor`
+   * attribute on a label and the id of an input.
+   */
+  id: _propTypes2.default.string,
   /**
    * Used to determine the string value for the selected item (which is used to compute the `inputValue`).
    *

packages/core/dist/components/ChoiceList/Select.js

@@ -7,6 +7,8 @@ exports.Select = undefined;
 
 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; }; }();
+
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -27,36 +29,80 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 /**
  * A `Select` component can be used to render an HTML `select` menu.
  * Any _undocumented_ props that you pass to this component will be passed
  * to the `select` element, so you can use this to set additional attributes if
  * necessary.
+ *
+ * Class-based component gives flexibility for active focus management
+ * by allowing refs to be passed.
  */
-var Select = function Select(props) {
-  /* eslint-disable prefer-const */
-  var children = props.children,
-      className = props.className,
-      id = props.id,
-      inversed = props.inversed,
-      size = props.size,
-      selectProps = _objectWithoutProperties(props, ['children', 'className', 'id', 'inversed', 'size']);
-  /* eslint-enable prefer-const */
-
-  var classes = (0, _classnames2.default)('ds-c-field', { 'ds-c-field--inverse': inversed }, className, size && 'ds-c-field--' + size);
-
-  if (!id) {
-    id = (0, _lodash2.default)('select_' + selectProps.name + '_');
+
+var Select = exports.Select = function (_React$PureComponent) {
+  _inherits(Select, _React$PureComponent);
+
+  function Select() {
+    _classCallCheck(this, Select);
+
+    return _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).apply(this, arguments));
   }
 
-  return _react2.default.createElement(
-    'select',
-    _extends({ className: classes, id: id }, selectProps),
-    children
-  );
-};
+  _createClass(Select, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (this.props.focusTrigger) {
+        this.loader && this.loader.focus();
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      /* eslint-disable prefer-const */
+      var _props = this.props,
+          children = _props.children,
+          className = _props.className,
+          focusTrigger = _props.focusTrigger,
+          id = _props.id,
+          inversed = _props.inversed,
+          selectRef = _props.selectRef,
+          size = _props.size,
+          selectProps = _objectWithoutProperties(_props, ['children', 'className', 'focusTrigger', 'id', 'inversed', 'selectRef', 'size']);
+      /* eslint-enable prefer-const */
+
+      var classes = (0, _classnames2.default)('ds-c-field', { 'ds-c-field--inverse': inversed }, className, size && 'ds-c-field--' + size);
+
+      if (!id) {
+        id = (0, _lodash2.default)('select_' + selectProps.name + '_');
+      }
+
+      return _react2.default.createElement(
+        'select',
+        _extends({
+          className: classes,
+          id: id
+          /* eslint-disable no-return-assign */
+          , ref: focusTrigger ? function (loader) {
+            return _this2.loader = loader;
+          } : selectRef
+          /* eslint-enable no-return-assign */
+        }, selectProps),
+        children
+      );
+    }
+  }]);
+
+  return Select;
+}(_react2.default.PureComponent);
 
-exports.Select = Select;
 Select.propTypes = {
   children: _propTypes2.default.node.isRequired,
   /**
@@ -69,6 +115,10 @@ Select.propTypes = {
    */
   defaultValue: _propTypes2.default.string,
   disabled: _propTypes2.default.bool,
+  /**
+   * Used to focus `select` on `componentDidMount()`
+   */
+  focusTrigger: _propTypes2.default.bool,
   /**
    * A unique ID to be used for the select field. A unique ID will be generated
    * if one isn't provided.
@@ -96,6 +146,10 @@ Select.propTypes = {
   name: _propTypes2.default.string.isRequired,
   onBlur: _propTypes2.default.func,
   onChange: _propTypes2.default.func,
+  /**
+   * Access a reference to the `select` element
+   */
+  selectRef: _propTypes2.default.func,
   /**
    * Set the max-width of the input either to `'small'` or `'medium'`.
    */

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

@@ -63,6 +63,13 @@ var TextField = exports.TextField = function (_React$PureComponent) {
   }
 
   _createClass(TextField, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (this.props.focusTrigger) {
+        this.loader && this.loader.focus();
+      }
+    }
+  }, {
     key: 'ariaLabel',
     value: function ariaLabel() {
       if (this.props.ariaLabel) {
@@ -119,11 +126,14 @@ var TextField = exports.TextField = function (_React$PureComponent) {
   }, {
     key: 'render',
     value: function render() {
+      var _this2 = this;
+
       var _props = this.props,
           ariaLabel = _props.ariaLabel,
           className = _props.className,
           labelClassName = _props.labelClassName,
           fieldClassName = _props.fieldClassName,
+          focusTrigger = _props.focusTrigger,
           errorMessage = _props.errorMessage,
           hint = _props.hint,
           id = _props.id,
@@ -136,7 +146,7 @@ var TextField = exports.TextField = function (_React$PureComponent) {
           fieldRef = _props.fieldRef,
           size = _props.size,
           type = _props.type,
-          fieldProps = _objectWithoutProperties(_props, ['ariaLabel', 'className', 'labelClassName', 'fieldClassName', 'errorMessage', 'hint', 'id', 'requirementLabel', 'inversed', 'rows', 'mask', 'multiline', 'label', 'fieldRef', 'size', 'type']);
+          fieldProps = _objectWithoutProperties(_props, ['ariaLabel', 'className', 'labelClassName', 'fieldClassName', 'focusTrigger', 'errorMessage', 'hint', 'id', 'requirementLabel', 'inversed', 'rows', 'mask', 'multiline', 'label', 'fieldRef', 'size', 'type']);
 
       var FieldComponent = multiline ? 'textarea' : 'input';
       var _rows = multiline && rows ? rows : undefined;
@@ -152,9 +162,13 @@ var TextField = exports.TextField = function (_React$PureComponent) {
       var field = _react2.default.createElement(FieldComponent, _extends({
         'aria-label': this.ariaLabel(),
         className: fieldClasses,
-        id: this.id,
-        ref: fieldRef,
-        rows: _rows,
+        id: this.id
+        /* eslint-disable no-return-assign */
+        , ref: focusTrigger ? function (loader) {
+          return _this2.loader = loader;
+        } : fieldRef
+        /* eslint-enable no-return-assign */
+        , rows: _rows,
         type: multiline ? undefined : type
       }, fieldProps));
 
@@ -210,6 +224,10 @@ TextField.propTypes = {
    * Access a reference to the `input` or `textarea` element
    */
   fieldRef: _propTypes2.default.func,
+  /**
+   * Used to focus `input` on `componentDidMount()`
+   */
+  focusTrigger: _propTypes2.default.bool,
   /**
    * Additional hint text to display
    */

packages/core/package.json

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

packages/docs/package.json

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