@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/TextAreaField/TextAreaField.js

@@ -9,43 +9,40 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React, { forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
+import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
-import { Box, FieldHelperText, Label, TextArea } from '../../';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { Box, FieldHelperText, Label, TextArea } from '../..';
 import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+
 /**
  * Combines a textarea, label, and helper text for a complete, form-ready solution.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
-      isUnresizable = props.isUnresizable,
-      rows = props.rows,
-      status = props.status,
-      slots = props.slots;
+    isUnresizable = props.isUnresizable,
+    rows = props.rows,
+    status = props.status,
+    slots = props.slots;
   var statusClasses = {
     isUnresizable: isUnresizable
   };
-
   var _useField = useField(_objectSpread({
-    statusClasses: statusClasses
-  }, props)),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+      statusClasses: statusClasses
+    }, props)),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   var containerRef = useRef();
-  var inputContainerRef = useRef();
+  var fieldControlWrapperRef = useRef();
   var labelRef = useRef();
   var labelWrapperRef = useRef();
   var slotContainer = useRef();
@@ -53,24 +50,21 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperTextId = uuid();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return textAreaRef.current;
   });
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   var resizeFloatLabel = function resizeFloatLabel() {
     /* istanbul ignore next */
     labelRef.current.style.width = textAreaRef.current.style.width;
     labelWrapperRef.current.style.width = "".concat(textAreaRef.current.clientWidth - 2, "px");
   };
-  /* istanbul ignore next */
-
 
+  /* istanbul ignore next */
   var resizeSlotContainer = function resizeSlotContainer() {
-    inputContainerRef.current.style.width = textAreaRef.current.style.width;
+    fieldControlWrapperRef.current.style.width = textAreaRef.current.style.width;
   };
-
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (slots !== null && slots !== void 0 && slots.inContainer) {
@@ -82,28 +76,23 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     onResize: onResize
   });
   useLayoutEffect(onResize, [onResize]);
-
   var _useLabelHeight = useLabelHeight({
-    labelRef: labelRef,
-    inputRef: textAreaRef
-  }),
-      isLabelHigher = _useLabelHeight.isLabelHigher;
-
+      labelRef: labelRef,
+      inputRef: textAreaRef
+    }),
+    isLabelHigher = _useLabelHeight.isLabelHigher;
   var columnStyleProps = useColumnStyles({
     labelMode: props.labelMode
   });
   useEffect(function () {
     var thisRef = textAreaRef.current;
-
     if (!props.isUnresizable && props.labelMode === 'float') {
       thisRef.addEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     }
-
     return function () {
       thisRef.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     };
   }, [props.isUnresizable, props.labelMode, props.resizeCallback]);
-
   var labelNode = ___EmotionJSX(Label, _extends({
     ref: labelRef
   }, fieldLabelProps, {
@@ -111,29 +100,27 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
       gridRow: '1/5'
     }
   }));
-
   var wrappedLabel = ___EmotionJSX(Box, {
-    variant: "boxes.floatLabelWrapper",
+    variant: "forms.textarea.floatLabelWrapper",
     ref: labelWrapperRef
   }, labelNode);
-
   return ___EmotionJSX(Box, _extends({
-    variant: "forms.input.wrapper"
+    variant: "forms.input.fieldContainer"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
     ref: containerRef,
     maxWidth: "100%"
-  }), props.labelMode === 'float' ? wrappedLabel : labelNode, ___EmotionJSX(Box, {
+  }), props.labelMode === 'float' ? wrappedLabel : labelNode, ___EmotionJSX(Box, _extends({
     isRow: true,
-    variant: "forms.input.container",
-    className: fieldControlProps.className,
+    variant: "forms.input.fieldControlWrapper",
     minWidth: "40px",
     maxWidth: "100%",
-    ref: inputContainerRef
-  }, ___EmotionJSX(TextArea, _extends({
+    ref: fieldControlWrapperRef
+  }, fieldControlWrapperProps), ___EmotionJSX(TextArea, _extends({
     ref: textAreaRef,
-    rows: rows
-  }, fieldControlProps, {
+    rows: rows,
+    variant: "forms.textarea.baseField"
+  }, fieldControlInputProps, {
     sx: slots !== null && slots !== void 0 && slots.inContainer ? {
       paddingRight: '35px'
     } : {
@@ -142,35 +129,28 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-invalid": status === 'error' && true,
     "aria-describedby": helperText && helperTextId
   })), (slots === null || slots === void 0 ? void 0 : slots.inContainer) && ___EmotionJSX(Box, {
-    variant: "boxes.textFieldInContainerSlot",
+    variant: "forms.textarea.containerSlot",
     ref: slotContainer
   }, slots === null || slots === void 0 ? void 0 : slots.inContainer)), helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     id: helperTextId
   }, helperText));
 });
-TextAreaField.propTypes = _objectSpread({
+TextAreaField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** Text rendered below the textarea. */
   helperText: PropTypes.node,
-
   /** If present this prop will cause a help hint to render in the label of the field. */
   hintText: PropTypes.string,
-
   /** The unique identifier for the textarea element. */
   id: PropTypes.string,
-
   /** A string designating whether or not the label is a float label. */
   labelMode: PropTypes.string,
-
   /** Whether the textarea is unable to be resized. */
   isUnresizable: PropTypes.bool,
-
   /** The name for the textarea element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name). */
   name: PropTypes.string,
-
   /**
    * Callback fired when the value is changed on the textarea element.
    *
@@ -178,79 +158,52 @@ TextAreaField.propTypes = _objectSpread({
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
-
   /** The value for the textarea element (controlled). */
   value: PropTypes.string,
-
   /** 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. */
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
   /** The default value for the textarea element. */
   defaultValue: PropTypes.string,
-
   /** Whether the textarea element is automatically focused when loaded onto the page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autofocus). */
   hasAutoFocus: PropTypes.bool,
-
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: PropTypes.bool,
-
   /** Whether the field is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Whether the input can be selected, but not changed by the user. */
   isReadOnly: PropTypes.bool,
-
   /** Whether the field is required. */
   isRequired: PropTypes.bool,
-
   /** Add max Length to input value */
   maxLength: PropTypes.number,
-
   /**
    * Callback fired when focus is lost on the textarea element.
    */
   onBlur: PropTypes.func,
-
   /**
    * Callback fired when focus is lost on the textarea element.
    */
   onFocus: PropTypes.func,
-
   /**
    * Callback fired when textfield is resized.
    */
   resizeCallback: PropTypes.func,
-
   /** The placeholder text to display in the textarea element. */
   placeholder: PropTypes.string,
-
   /** The number of rows to display for the textarea. Controls the default height. */
   rows: PropTypes.number,
-
   /** Determines the textarea status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({}),
-
   /** Provides a way to insert markup in specified places. */
   slots: PropTypes.shape({
     /** The given node will be inserted into the field container. */
     inContainer: PropTypes.node
   })
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 TextAreaField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

package/lib/components/TextAreaField/TextAreaField.stories.js

@@ -10,18 +10,16 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useState } from 'react';
 import SearchIcon from 'mdi-react/SearchIcon';
-import TextAreaField from '.';
-import { Box, Icon } from '../../';
+import { Box, Icon } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { modes as labelModes } from '../Label/constants';
-import statuses from '../../utils/devUtils/constants/statuses';
+import TextAreaField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextAreaField',
@@ -33,7 +31,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -76,28 +74,24 @@ export default {
     id: {},
     autocomplete: {},
     className: {},
-    containerProps: {},
-    labelProps: {},
-    controlProps: {},
     value: {
       control: {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
-
 var IconSlot = ___EmotionJSX(Box, {
   isRow: true
 }, ___EmotionJSX(Icon, {
   icon: SearchIcon
 }));
-
 export var Default = function Default(args) {
   return ___EmotionJSX(TextAreaField, args);
 };
 export var WithSlots = function WithSlots(args) {
-  return (// This is an example of a slot that can be passed into the component
+  return (
+    // This is an example of a slot that can be passed into the component
     // const IconSlot = (
     //   <Box isRow>
     //     <Icon
@@ -120,10 +114,9 @@ export var FloatLabel = function FloatLabel() {
 };
 export var Controlled = function Controlled() {
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   return ___EmotionJSX(TextAreaField, {
     label: "Example Label",
     onChange: function onChange(e) {

package/lib/components/TextAreaField/TextAreaField.test.js

@@ -3,11 +3,11 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import React from 'react';
-import userEvent from '@testing-library/user-event';
 import { fireEvent } from '@testing-library/react';
-import axeTest from '../../utils/testUtils/testAxe';
-import { screen, render } from '../../utils/testUtils/testWrapper';
+import userEvent from '@testing-library/user-event';
 import statuses from '../../utils/devUtils/constants/statuses';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
 import TextAreaField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-textAreaField';
@@ -15,14 +15,13 @@ var defaultProps = {
   'data-testid': testId,
   label: 'testLabel'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(TextAreaField, _extends({}, defaultProps, props)));
 };
+var mockfunction = jest.fn();
 
-var mockfunction = jest.fn(); // Need to be added to each test file to test accessibility using axe.
-
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('disabled prop disables input', function () {
   getComponent({
@@ -78,7 +77,6 @@ test('mousemove calls resize event', function () {
 });
 test('label will receive gridRow attribute if it will be higher than textarea', function () {
   var originalOffsetHeight = _Object$getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
-
   _Object$defineProperties(window.HTMLElement.prototype, {
     offsetHeight: {
       get: function get() {
@@ -86,10 +84,8 @@ test('label will receive gridRow attribute if it will be higher than textarea',
       }
     }
   });
-
   getComponent();
   expect(screen.getByText(defaultProps.label)).toHaveStyle('grid-row: 1/5');
-
   _Object$defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
 });
 test('form wrapper will have default max label column width when no custom width set', function () {
@@ -126,7 +122,6 @@ test('providing slot props causes slot to render', function () {
   var slot = ___EmotionJSX("p", {
     "data-testid": "testSlot"
   }, "testText");
-
   var slots = {
     inContainer: slot
   };

package/lib/components/TextField/TextField.js

@@ -9,56 +9,49 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
-import { Box, FieldHelperText, Input, Label } from '../../';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { Box, FieldHelperText, Input, Label } from '../..';
 import { useField, useLabelHeight, usePropWarning } from '../../hooks';
-import statuses from '../../utils/devUtils/constants/statuses';
 import useColumnStyles from '../../hooks/useColumnStyles';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+
 /**
  * Combines a text input, label, and helper text for a complete, form-ready solution.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
-      slots = props.slots,
-      status = props.status,
-      wrapperProps = props.wrapperProps;
-
+    slots = props.slots,
+    status = props.status;
   var _useField = useField(props),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   var inputRef = useRef();
   var labelRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
-
   var _useLabelHeight = useLabelHeight({
-    labelRef: labelRef,
-    inputRef: inputRef
-  }),
-      isLabelHigher = _useLabelHeight.isLabelHigher;
-
+      labelRef: labelRef,
+      inputRef: inputRef
+    }),
+    isLabelHigher = _useLabelHeight.isLabelHigher;
   var columnStyleProps = useColumnStyles({
     labelMode: props.labelMode
   });
   var helperTextId = uuid();
   return ___EmotionJSX(Box, _extends({
-    variant: "forms.input.wrapper"
+    variant: "forms.input.fieldContainer"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
   }), ___EmotionJSX(Label, _extends({}, fieldLabelProps, {
@@ -67,11 +60,10 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
       gridRow: '1/5'
     }
   })), ___EmotionJSX(Box, _extends({
-    variant: "forms.input.container",
-    className: fieldControlProps.className
-  }, wrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, ___EmotionJSX(Input, _extends({
+    variant: "forms.input.fieldControlWrapper"
+  }, fieldControlWrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, ___EmotionJSX(Input, _extends({
     ref: inputRef
-  }, fieldControlProps, {
+  }, fieldControlInputProps, {
     "aria-invalid": status === 'error' && true,
     "aria-describedby": helperText && helperTextId
   })), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && ___EmotionJSX(FieldHelperText, {
@@ -79,22 +71,17 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-TextField.propTypes = _objectSpread({
+TextField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** A string designating whether or not the label is a float label. */
   labelMode: PropTypes.string,
-
   /** Text rendered below the input. */
   helperText: PropTypes.node,
-
   /** The unique identifier for the input element. */
   id: PropTypes.string,
-
   /** The name for the input element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
   name: PropTypes.string,
-
   /**
    * Callback fired when the value is changed on the input element.
    *
@@ -102,83 +89,54 @@ TextField.propTypes = _objectSpread({
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
-
   /** The value for the input element (controlled). */
   value: PropTypes.string,
-
   /** 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. */
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
   /** The default value for the input element. */
   defaultValue: PropTypes.string,
-
   /** Whether the input element is automatically focused when loaded onto the page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus). */
   hasAutoFocus: PropTypes.bool,
-
   /** If present this prop will cause a help hint to render in the label of the field. */
   hintText: PropTypes.string,
-
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: PropTypes.bool,
-
   /** Whether the field is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Whether the input can be selected, but not changed by the user. */
   isReadOnly: PropTypes.bool,
-
   /** Whether the field is required. */
   isRequired: PropTypes.bool,
-
   /** Add max Length to input value */
   maxLength: PropTypes.number,
-
   /**
    * Callback fired when focus is lost on the input element.
    */
   onBlur: PropTypes.func,
-
   /**
    * Callback fired when focus is lost on the input element.
    */
   onFocus: PropTypes.func,
-
   /** The placeholder text to display in the input element. */
   placeholder: PropTypes.string,
-
   /** Provides a way to insert markup in specified places. */
   slots: PropTypes.shape({
     /** The given node will be inserted before the input. */
     beforeInput: PropTypes.node,
-
     /** The given node will be inserted into the field container. */
     inContainer: PropTypes.node
   }),
-
   /** Determines the input status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** Determines the type of input to use. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
   type: PropTypes.string,
-
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({}),
-
   /** Props object that is spread directly into the input wrapper element. */
   wrapperProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 TextField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,