@pingux/astro 1.9.0-alpha.1 → 1.9.0-alpha.4

package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js

@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithCustomHeight = exports.Required = exports.HelperText = exports.FocusMenuTrigger = exports.DisabledKeys = exports.Disabled = exports.Default = exports.CustomDefaultFilter = exports.ControlledWithCustomValue = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.ControlledFiltering = exports.AsyncLoading = exports.AllowCustomValue = void 0;
+exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithCustomInputValue = exports.WithCustomHeight = exports.Required = exports.HelperText = exports.FocusMenuTrigger = exports.DisabledKeys = exports.Disabled = exports.Default = exports.CustomDefaultFilter = exports.ControlledWithCustomValue = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.ControlledFiltering = exports.AsyncLoading = exports.AllowCustomValue = void 0;
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
@@ -415,6 +415,21 @@ var ControlledWithCustomValue = function ControlledWithCustomValue() {
 
 exports.ControlledWithCustomValue = ControlledWithCustomValue;
 
+var WithCustomInputValue = function WithCustomInputValue() {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], {
+    label: "Example label",
+    defaultItems: items,
+    hasCustomValue: true
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.id,
+      textValue: item.id
+    }, item.name);
+  }));
+};
+
+exports.WithCustomInputValue = WithCustomInputValue;
+
 var AllowCustomValue = function AllowCustomValue() {
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",

package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js

@@ -2,13 +2,29 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
@@ -44,6 +60,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var items = [{
   name: 'Aardvark',
   id: '1'
@@ -67,10 +87,10 @@ var getComponent = function getComponent() {
       renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
 
   return renderFn((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, defaultProps, props), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({}, item, {
       key: item.id,
       "data-id": item.name
-    }, item.name);
+    }), item.name);
   })));
 };
 
@@ -504,6 +524,45 @@ test('should be able to use custom default filtering', /*#__PURE__*/(0, _asyncTo
     }
   }, _callee2);
 })));
+test('should show in input "textValue" if provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+  var newItems, input, options;
+  return _regenerator["default"].wrap(function _callee3$(_context3) {
+    while (1) {
+      switch (_context3.prev = _context3.next) {
+        case 0:
+          newItems = (0, _map["default"])(items).call(items, function (item) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              textValue: item.id
+            });
+          });
+          getComponent({
+            items: newItems
+          });
+          input = _testWrapper.screen.queryByRole('combobox');
+
+          _userEvent["default"].click(input);
+
+          _context3.next = 6;
+          return _testWrapper.screen.findAllByRole('option');
+
+        case 6:
+          options = _context3.sent;
+
+          _userEvent["default"].click(options[0]);
+
+          expect(input).toHaveValue(newItems[0].textValue); // Check that on clicking again "textValue" still returning
+
+          _userEvent["default"].click(options[0]);
+
+          expect(input).toHaveValue(newItems[0].textValue);
+
+        case 11:
+        case "end":
+          return _context3.stop();
+      }
+    }
+  }, _callee3);
+})));
 describe('loadingState', function () {
   it('combobox should not render a loader if menu is not open', function () {
     var _getComponent = getComponent({
@@ -870,26 +929,26 @@ test('onSelectionChange works properly with custom value', function () {
 
   expect(onSelectionChange).toHaveBeenCalledWith('');
 });
-test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
   var _getComponent6, container, results;
 
-  return _regenerator["default"].wrap(function _callee3$(_context3) {
+  return _regenerator["default"].wrap(function _callee4$(_context4) {
     while (1) {
-      switch (_context3.prev = _context3.next) {
+      switch (_context4.prev = _context4.next) {
         case 0:
           jest.useRealTimers();
           _getComponent6 = getComponent(), container = _getComponent6.container;
-          _context3.next = 4;
+          _context4.next = 4;
           return (0, _jestAxe.axe)(container);
 
         case 4:
-          results = _context3.sent;
+          results = _context4.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
     }
-  }, _callee3);
+  }, _callee4);
 })));

package/lib/cjs/components/PasswordField/PasswordField.js

@@ -262,7 +262,10 @@ PasswordField.propTypes = {
   /** The value for the input element (controlled). */
   value: _propTypes["default"].string,
 
-  /** How the input element should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). */
+  /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
+  autoComplete: _propTypes["default"].string,
+
+  /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: _propTypes["default"].string,
 
   /** A list of class names to apply to the input element. */

package/lib/cjs/components/SearchField/SearchField.js

@@ -127,7 +127,10 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }))));
 });
 SearchField.propTypes = {
-  /** Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). */
+  /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
+  autoComplete: _propTypes["default"].string,
+
+  /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: _propTypes["default"].string,
 
   /** The default value (uncontrolled). */

package/lib/cjs/components/SearchField/SearchField.stories.js

@@ -57,7 +57,7 @@ var _default = {
     isDisabled: {},
     hasAutoFocus: {},
     hasNoClearButton: {},
-    autocomplete: {},
+    autoComplete: {},
     containerProps: {},
     iconProps: {},
     controlProps: {},

package/lib/cjs/components/TextAreaField/TextAreaField.js

@@ -211,7 +211,10 @@ TextAreaField.propTypes = {
   /** The value for the textarea element (controlled). */
   value: _propTypes["default"].string,
 
-  /** How the textarea element should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocomplete). */
+  /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
+  autoComplete: _propTypes["default"].string,
+
+  /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: _propTypes["default"].string,
 
   /** A list of class names to apply to the textarea element. */

package/lib/cjs/components/TextField/TextField.js

@@ -139,7 +139,10 @@ TextField.propTypes = {
   /** The value for the input element (controlled). */
   value: _propTypes["default"].string,
 
-  /** How the input element should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). */
+  /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
+  autoComplete: _propTypes["default"].string,
+
+  /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: _propTypes["default"].string,
 
   /** A list of class names to apply to the input element. */

package/lib/cjs/hooks/useField/useField.js

@@ -213,7 +213,7 @@ var useField = function useField() {
   });
 
   var fieldControlProps = _objectSpread(_objectSpread(_objectSpread({
-    autocomplete: autocomplete || autoComplete,
+    autoComplete: autocomplete || autoComplete,
     autoCorrect: autoCorrect,
     autoFocus: hasAutoFocus,
     className: classNames,

package/lib/cjs/hooks/useField/useField.test.js

@@ -35,7 +35,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var defaultProps = {
-  autocomplete: 'off',
+  autoComplete: 'off',
   className: 'test',
   containerProps: {
     id: 'test'
@@ -88,7 +88,7 @@ test('should return props objects for field components', function () {
     })
   });
   expect(fieldControlProps).toEqual({
-    autocomplete: defaultProps.autocomplete,
+    autoComplete: defaultProps.autoComplete,
     autoFocus: defaultProps.hasAutoFocus,
     className: (0, _concat["default"])(_context = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context, _statuses["default"].DEFAULT, " is-tested"),
     defaultSelected: true,
@@ -117,16 +117,33 @@ test('should return props objects for field components', function () {
     isRequired: true
   });
 });
+test('should support autocomplete additionally', function () {
+  var newProps = _objectSpread(_objectSpread({}, defaultProps), {}, {
+    autocomplete: 'new-password'
+  });
+
+  delete newProps.autoComplete;
+
+  var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+    return (0, _useField["default"])(newProps);
+  }),
+      result = _renderHook2.result;
+
+  var fieldControlProps = result.current.fieldControlProps;
+  expect(fieldControlProps).toMatchObject({
+    autoComplete: 'new-password'
+  });
+});
 test('should return isFloatLabelActive class for container', function () {
-  var _renderHook2 = (0, _reactHooks.renderHook)(function (initialProps) {
+  var _renderHook3 = (0, _reactHooks.renderHook)(function (initialProps) {
     return (0, _useField["default"])(_objectSpread(_objectSpread({}, initialProps), {}, {
       placeholder: null
     }));
   }, {
     initialProps: defaultProps
   }),
-      result = _renderHook2.result,
-      rerender = _renderHook2.rerender; // Does not have the class if the label mode is not set to float
+      result = _renderHook3.result,
+      rerender = _renderHook3.rerender; // Does not have the class if the label mode is not set to float
 
 
   expect(result.current.fieldContainerProps.className).not.toContain('is-float-label-active'); // Has the class if the value is valid and label mode is float
@@ -168,13 +185,13 @@ test('should return isFloatLabelActive class for container', function () {
   expect(result.current.fieldContainerProps.className).toContain('is-float-label-active');
 });
 test('should return isLeftLabel class for container', function () {
-  var _renderHook3 = (0, _reactHooks.renderHook)(function (initialProps) {
+  var _renderHook4 = (0, _reactHooks.renderHook)(function (initialProps) {
     return (0, _useField["default"])(initialProps);
   }, {
     initialProps: defaultProps
   }),
-      result = _renderHook3.result,
-      rerender = _renderHook3.rerender; // Does not have the class if the label mode is not set to left
+      result = _renderHook4.result,
+      rerender = _renderHook4.rerender; // Does not have the class if the label mode is not set to left
 
 
   expect(result.current.fieldContainerProps.className).not.toContain('is-left-label'); // Has the class if the value is valid and label mode is left
@@ -188,7 +205,7 @@ test('should return hasValue class for container when onChange updates internal
   var onChange = jest.fn();
   var numCalls = 0;
 
-  var _renderHook4 = (0, _reactHooks.renderHook)(function () {
+  var _renderHook5 = (0, _reactHooks.renderHook)(function () {
     return (0, _useField["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
       defaultValue: null,
       placeholder: null,
@@ -196,7 +213,7 @@ test('should return hasValue class for container when onChange updates internal
       value: ''
     }));
   }),
-      result = _renderHook4.result; // Empty string is not a valid value
+      result = _renderHook5.result; // Empty string is not a valid value
 
 
   expect(result.current.fieldContainerProps.className).not.toContain('has-value'); // 0 should be a valid value

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -351,6 +351,18 @@ export var ControlledWithCustomValue = function ControlledWithCustomValue() {
     }, item.name);
   }));
 };
+export var WithCustomInputValue = function WithCustomInputValue() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, {
+    label: "Example label",
+    defaultItems: items,
+    hasCustomValue: true
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.id,
+      textValue: item.id
+    }, item.name);
+  }));
+};
 export var AllowCustomValue = function AllowCustomValue() {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
     label: "Example label",

package/lib/components/ComboBoxField/ComboBoxField.test.js

@@ -1,3 +1,11 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
@@ -5,6 +13,11 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { useState, useMemo } from 'react';
 import { axe } from 'jest-axe';
 import { useFilter } from '@react-aria/i18n';
@@ -36,10 +49,10 @@ var getComponent = function getComponent() {
       renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
 
   return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({}, defaultProps, props), function (item) {
-    return ___EmotionJSX(Item, {
+    return ___EmotionJSX(Item, _extends({}, item, {
       key: item.id,
       "data-id": item.name
-    }, item.name);
+    }), item.name);
   })));
 };
 
@@ -398,6 +411,40 @@ test('should be able to use custom default filtering', /*#__PURE__*/_asyncToGene
     }
   }, _callee2);
 })));
+test('should show in input "textValue" if provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+  var newItems, input, options;
+  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+    while (1) {
+      switch (_context3.prev = _context3.next) {
+        case 0:
+          newItems = _mapInstanceProperty(items).call(items, function (item) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              textValue: item.id
+            });
+          });
+          getComponent({
+            items: newItems
+          });
+          input = screen.queryByRole('combobox');
+          userEvent.click(input);
+          _context3.next = 6;
+          return screen.findAllByRole('option');
+
+        case 6:
+          options = _context3.sent;
+          userEvent.click(options[0]);
+          expect(input).toHaveValue(newItems[0].textValue); // Check that on clicking again "textValue" still returning
+
+          userEvent.click(options[0]);
+          expect(input).toHaveValue(newItems[0].textValue);
+
+        case 11:
+        case "end":
+          return _context3.stop();
+      }
+    }
+  }, _callee3);
+})));
 describe('loadingState', function () {
   it('combobox should not render a loader if menu is not open', function () {
     var _getComponent = getComponent({
@@ -716,26 +763,26 @@ test('onSelectionChange works properly with custom value', function () {
   userEvent.type(input, '{selectall}{backspace}{enter}');
   expect(onSelectionChange).toHaveBeenCalledWith('');
 });
-test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
   var _getComponent6, container, results;
 
-  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+  return _regeneratorRuntime.wrap(function _callee4$(_context4) {
     while (1) {
-      switch (_context3.prev = _context3.next) {
+      switch (_context4.prev = _context4.next) {
         case 0:
           jest.useRealTimers();
           _getComponent6 = getComponent(), container = _getComponent6.container;
-          _context3.next = 4;
+          _context4.next = 4;
           return axe(container);
 
         case 4:
-          results = _context3.sent;
+          results = _context4.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
     }
-  }, _callee3);
+  }, _callee4);
 })));

package/lib/components/PasswordField/PasswordField.js

@@ -209,7 +209,10 @@ PasswordField.propTypes = {
   /** The value for the input element (controlled). */
   value: PropTypes.string,
 
-  /** How the input element should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). */
+  /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
+  autoComplete: PropTypes.string,
+
+  /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: PropTypes.string,
 
   /** A list of class names to apply to the input element. */

package/lib/components/SearchField/SearchField.js

@@ -92,7 +92,10 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
   }))));
 });
 SearchField.propTypes = {
-  /** Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). */
+  /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
+  autoComplete: PropTypes.string,
+
+  /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: PropTypes.string,
 
   /** The default value (uncontrolled). */

package/lib/components/SearchField/SearchField.stories.js

@@ -27,7 +27,7 @@ export default {
     isDisabled: {},
     hasAutoFocus: {},
     hasNoClearButton: {},
-    autocomplete: {},
+    autoComplete: {},
     containerProps: {},
     iconProps: {},
     controlProps: {},

package/lib/components/TextAreaField/TextAreaField.js

@@ -177,7 +177,10 @@ TextAreaField.propTypes = {
   /** The value for the textarea element (controlled). */
   value: PropTypes.string,
 
-  /** How the textarea element should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocomplete). */
+  /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
+  autoComplete: PropTypes.string,
+
+  /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: PropTypes.string,
 
   /** A list of class names to apply to the textarea element. */

package/lib/components/TextField/TextField.js

@@ -102,7 +102,10 @@ TextField.propTypes = {
   /** The value for the input element (controlled). */
   value: PropTypes.string,
 
-  /** How the input element should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). */
+  /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
+  autoComplete: PropTypes.string,
+
+  /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: PropTypes.string,
 
   /** A list of class names to apply to the input element. */

package/lib/hooks/useField/useField.js

@@ -182,7 +182,7 @@ var useField = function useField() {
   });
 
   var fieldControlProps = _objectSpread(_objectSpread(_objectSpread({
-    autocomplete: autocomplete || autoComplete,
+    autoComplete: autocomplete || autoComplete,
     autoCorrect: autoCorrect,
     autoFocus: hasAutoFocus,
     className: classNames,

package/lib/hooks/useField/useField.test.js

@@ -18,7 +18,7 @@ import useField from './useField';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { modes as labelModes } from '../../components/Label/constants';
 var defaultProps = {
-  autocomplete: 'off',
+  autoComplete: 'off',
   className: 'test',
   containerProps: {
     id: 'test'
@@ -71,7 +71,7 @@ test('should return props objects for field components', function () {
     })
   });
   expect(fieldControlProps).toEqual({
-    autocomplete: defaultProps.autocomplete,
+    autoComplete: defaultProps.autoComplete,
     autoFocus: defaultProps.hasAutoFocus,
     className: _concatInstanceProperty(_context = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context, statuses.DEFAULT, " is-tested"),
     defaultSelected: true,
@@ -100,16 +100,33 @@ test('should return props objects for field components', function () {
     isRequired: true
   });
 });
+test('should support autocomplete additionally', function () {
+  var newProps = _objectSpread(_objectSpread({}, defaultProps), {}, {
+    autocomplete: 'new-password'
+  });
+
+  delete newProps.autoComplete;
+
+  var _renderHook2 = renderHook(function () {
+    return useField(newProps);
+  }),
+      result = _renderHook2.result;
+
+  var fieldControlProps = result.current.fieldControlProps;
+  expect(fieldControlProps).toMatchObject({
+    autoComplete: 'new-password'
+  });
+});
 test('should return isFloatLabelActive class for container', function () {
-  var _renderHook2 = renderHook(function (initialProps) {
+  var _renderHook3 = renderHook(function (initialProps) {
     return useField(_objectSpread(_objectSpread({}, initialProps), {}, {
       placeholder: null
     }));
   }, {
     initialProps: defaultProps
   }),
-      result = _renderHook2.result,
-      rerender = _renderHook2.rerender; // Does not have the class if the label mode is not set to float
+      result = _renderHook3.result,
+      rerender = _renderHook3.rerender; // Does not have the class if the label mode is not set to float
 
 
   expect(result.current.fieldContainerProps.className).not.toContain('is-float-label-active'); // Has the class if the value is valid and label mode is float
@@ -151,13 +168,13 @@ test('should return isFloatLabelActive class for container', function () {
   expect(result.current.fieldContainerProps.className).toContain('is-float-label-active');
 });
 test('should return isLeftLabel class for container', function () {
-  var _renderHook3 = renderHook(function (initialProps) {
+  var _renderHook4 = renderHook(function (initialProps) {
     return useField(initialProps);
   }, {
     initialProps: defaultProps
   }),
-      result = _renderHook3.result,
-      rerender = _renderHook3.rerender; // Does not have the class if the label mode is not set to left
+      result = _renderHook4.result,
+      rerender = _renderHook4.rerender; // Does not have the class if the label mode is not set to left
 
 
   expect(result.current.fieldContainerProps.className).not.toContain('is-left-label'); // Has the class if the value is valid and label mode is left
@@ -171,7 +188,7 @@ test('should return hasValue class for container when onChange updates internal
   var onChange = jest.fn();
   var numCalls = 0;
 
-  var _renderHook4 = renderHook(function () {
+  var _renderHook5 = renderHook(function () {
     return useField(_objectSpread(_objectSpread({}, defaultProps), {}, {
       defaultValue: null,
       placeholder: null,
@@ -179,7 +196,7 @@ test('should return hasValue class for container when onChange updates internal
       value: ''
     }));
   }),
-      result = _renderHook4.result; // Empty string is not a valid value
+      result = _renderHook5.result; // Empty string is not a valid value
 
 
   expect(result.current.fieldContainerProps.className).not.toContain('has-value'); // 0 should be a valid value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.9.0-alpha.1",
+  "version": "1.9.0-alpha.4",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",