@instructure/ui-form-field 8.13.1-snapshot.9 → 8.14.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.14.0](https://github.com/instructure/instructure-ui/compare/v8.13.0...v8.14.0) (2021-12-16)
+
+**Note:** Version bump only for package @instructure/ui-form-field
+
 # [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
 
 ### Features

package/es/FormField/index.js

@@ -30,6 +30,7 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 class FormField extends Component {
   constructor() {
@@ -48,6 +49,7 @@ class FormField extends Component {
 
   render() {
     return /*#__PURE__*/React.createElement(FormFieldLayout, Object.assign({}, omitProps(this.props, FormField.allowedProps), pickProps(this.props, FormFieldLayout.allowedProps), {
+      label: this.props.label,
       vAlign: this.props.vAlign,
       as: "label",
       htmlFor: this.props.id,
@@ -65,8 +67,7 @@ FormField.defaultProps = {
   inline: false,
   layout: 'stacked',
   labelAlign: 'end',
-  vAlign: 'middle',
-  children: null
+  vAlign: 'middle'
 };
 export default FormField;
 export { FormField };

package/es/FormField/props.js

@@ -25,18 +25,7 @@ import PropTypes from 'prop-types';
 import { FormPropTypes } from '../FormPropTypes';
 const propTypes = {
   label: PropTypes.node.isRequired,
-
-  /**
-   * the id of the input (to link it to its label for a11y)
-   */
   id: PropTypes.string.isRequired,
-
-  /**
-   * object with shape: `{
-   *   text: PropTypes.node,
-   *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   * }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message),
   messagesId: PropTypes.string,
   children: PropTypes.node,
@@ -46,10 +35,6 @@ const propTypes = {
   vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
   width: PropTypes.string,
   inputContainerRef: PropTypes.func,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 };
 const allowedProps = ['label', 'id', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'vAlign', 'width', 'inputContainerRef', 'elementRef'];

package/es/FormFieldGroup/index.js

@@ -41,6 +41,7 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class FormFieldGroup extends Component {
   constructor() {
@@ -58,11 +59,15 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
   componentDidMount() {
-    this.props.makeStyles(this.makeStylesVariables);
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles(this.makeStylesVariables);
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
   }
 
   get makeStylesVariables() {
@@ -104,23 +109,22 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
   render() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          makeStyles = _this$props.makeStyles,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          makeStyles = _this$props3.makeStyles,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
     return jsx(FormFieldLayout, Object.assign({}, omitProps(props, FormFieldGroup.allowedProps), pickProps(props, FormFieldLayout.allowedProps), {
       vAlign: props.vAlign,
       layout: props.layout === 'inline' ? 'inline' : 'stacked',
       label: props.description,
-      "aria-disabled": props.disabled ? 'true' : null,
-      "aria-invalid": this.invalid ? 'true' : null,
+      "aria-disabled": props.disabled ? 'true' : void 0,
+      "aria-invalid": this.invalid ? 'true' : void 0,
       elementRef: this.handleRef
     }), this.renderFields());
   }
 
 }, _class2.displayName = "FormFieldGroup", _class2.componentId = 'FormFieldGroup', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  children: null,
   as: 'fieldset',
   disabled: false,
   rowSpacing: 'medium',

package/es/FormFieldGroup/props.js

@@ -25,23 +25,8 @@ import PropTypes from 'prop-types';
 import { FormPropTypes } from '../FormPropTypes';
 const propTypes = {
   description: PropTypes.node.isRequired,
-
-  /**
-   * the element type to render as
-   */
   as: PropTypes.elementType,
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message),
-
-  /**
-   * id for the form field messages
-   */
   messagesId: PropTypes.string,
   disabled: PropTypes.bool,
   children: PropTypes.node,
@@ -50,10 +35,6 @@ const propTypes = {
   colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
   vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
   startAt: PropTypes.oneOf(['small', 'medium', 'large', 'x-large', null]),
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 };
 const allowedProps = ['description', 'as', 'messages', 'messagesId', 'disabled', 'children', 'layout', 'rowSpacing', 'colSpacing', 'vAlign', 'startAt', 'elementRef'];

package/es/FormFieldLabel/index.js

@@ -36,6 +36,7 @@ import { propTypes, allowedProps } from './props';
 ---
 parent: FormField
 ---
+@tsProps
 
 This is a helper component that is used by most of the custom form
 components. In most cases it shouldn't be used directly.
@@ -59,19 +60,24 @@ let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
     const ElementType = getElementType(FormFieldLabel, this.props);
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          children = _this$props.children;
-    return jsx(ElementType, Object.assign({}, omitProps(this.props, FormFieldLabel.allowedProps), {
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          children = _this$props3.children;
+    return jsx(ElementType // @ts-expect-error TODO: `ref` prop causes: "Expression produces a union type that is too complex to represent.ts(2590)"
+    , Object.assign({}, omitProps(this.props, FormFieldLabel.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
       ref: this.handleRef
     }), children);

package/es/FormFieldLabel/props.js

@@ -23,8 +23,8 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  as: PropTypes.elementType
 };
 const allowedProps = ['as', 'children'];
 export { propTypes, allowedProps };

package/es/FormFieldLayout/index.js

@@ -45,10 +45,12 @@ import { propTypes, allowedProps } from './props';
 ---
 parent: FormField
 ---
+@tsProps
 **/
 let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = class FormFieldLayout extends Component {
   constructor(props) {
     super(props);
+    this._messagesId = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -61,7 +63,7 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
     };
 
     this.handleInputContainerRef = node => {
-      if (this.props.inputContainerRef) {
+      if (typeof this.props.inputContainerRef === 'function') {
         this.props.inputContainerRef(node);
       }
     };
@@ -72,11 +74,15 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   get hasVisibleLabel() {
@@ -135,10 +141,10 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
   render() {
     const ElementType = this.elementType;
 
-    const _this$props = this.props,
-          makeStyles = _this$props.makeStyles,
-          styles = _this$props.styles,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          makeStyles = _this$props3.makeStyles,
+          styles = _this$props3.styles,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
     const width = props.width,
           layout = props.layout,
@@ -148,7 +154,7 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
       style: {
         width
       },
-      "aria-describedby": this.hasMessages ? this._messagesId : null,
+      "aria-describedby": this.hasMessages ? this._messagesId : void 0,
       ref: this.handleRef
     }), this.elementType === 'fieldset' && this.renderLegend(), jsx(Grid, Object.assign({
       rowSpacing: "small",
@@ -161,7 +167,6 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
   }
 
 }, _class2.displayName = "FormFieldLayout", _class2.componentId = 'FormFieldLayout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  children: null,
   inline: false,
   layout: 'stacked',
   as: 'label',

package/es/FormFieldLayout/props.js

@@ -25,40 +25,21 @@ import PropTypes from 'prop-types';
 import { FormPropTypes } from '../FormPropTypes';
 const propTypes = {
   label: PropTypes.node.isRequired,
-
-  /**
-   * the id of the input (to link it to its label for a11y)
-   */
   id: PropTypes.string,
-
-  /**
-   * the element type to render as
-   */
   as: PropTypes.elementType,
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message),
-
-  /**
-   * id for the form field messages
-   */
   messagesId: PropTypes.string,
   children: PropTypes.node,
   inline: PropTypes.bool,
   layout: PropTypes.oneOf(['stacked', 'inline']),
   labelAlign: PropTypes.oneOf(['start', 'end']),
+  vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
   width: PropTypes.string,
   inputContainerRef: PropTypes.func,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 };
-const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef'];
+const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef' // added vAlign because FormField and FormFieldGroup passes it, but not adding
+// it to allowedProps to prevent it from getting passed through accidentally
+//'vAlign'
+];
 export { propTypes, allowedProps };

package/es/FormFieldLayout/styles.js

@@ -32,7 +32,7 @@
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props) => {
+const generateStyle = (_componentTheme, props) => {
   const inline = props.inline;
   return {
     formFieldLayout: {

package/es/FormFieldMessage/index.js

@@ -36,6 +36,7 @@ import { propTypes, allowedProps } from './props';
 ---
 parent: FormField
 ---
+@tsProps
 
 This is a helper component that is used by most of the custom form
 components. In most cases it shouldn't be used directly.
@@ -58,17 +59,21 @@ let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme),
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          styles = _this$props3.styles;
     return this.props.variant !== 'screenreader-only' ? jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
       ref: this.handleRef
@@ -78,8 +83,7 @@ let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme),
   }
 
 }, _class2.displayName = "FormFieldMessage", _class2.componentId = 'FormFieldMessage', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  variant: 'hint',
-  children: null
+  variant: 'hint'
 }, _temp)) || _class);
 export default FormFieldMessage;
 export { FormFieldMessage };

package/es/FormFieldMessages/index.js

@@ -37,6 +37,7 @@ import { propTypes, allowedProps } from './props';
 ---
 parent: FormField
 ---
+@tsProps
 
 A FormFieldMessages component
 
@@ -62,17 +63,21 @@ let FormFieldMessages = (_dec = withStyle(generateStyle, generateComponentTheme)
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
-    const _this$props = this.props,
-          messages = _this$props.messages,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          messages = _this$props3.messages,
+          styles = _this$props3.styles;
     return messages && messages.length > 0 ? jsx("span", Object.assign({
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages
     }, omitProps(this.props, FormFieldMessages.allowedProps), {

package/es/FormFieldMessages/props.js

@@ -24,12 +24,6 @@
 import PropTypes from 'prop-types';
 import { FormPropTypes } from '../FormPropTypes';
 const propTypes = {
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message)
 };
 const allowedProps = ['messages'];

package/lib/FormField/index.js

@@ -45,6 +45,7 @@ var _props = require("./props");
 ---
 category: components
 ---
+@tsProps
 **/
 class FormField extends _react.Component {
   constructor() {
@@ -63,6 +64,7 @@ class FormField extends _react.Component {
 
   render() {
     return /*#__PURE__*/_react.default.createElement(_FormFieldLayout.FormFieldLayout, Object.assign({}, (0, _omitProps.omitProps)(this.props, FormField.allowedProps), (0, _pickProps.pickProps)(this.props, _FormFieldLayout.FormFieldLayout.allowedProps), {
+      label: this.props.label,
       vAlign: this.props.vAlign,
       as: "label",
       htmlFor: this.props.id,
@@ -81,8 +83,7 @@ FormField.defaultProps = {
   inline: false,
   layout: 'stacked',
   labelAlign: 'end',
-  vAlign: 'middle',
-  children: null
+  vAlign: 'middle'
 };
 var _default = FormField;
 exports.default = _default;

package/lib/FormField/props.js

@@ -36,18 +36,7 @@ var _FormPropTypes = require("../FormPropTypes");
  */
 const propTypes = {
   label: _propTypes.default.node.isRequired,
-
-  /**
-   * the id of the input (to link it to its label for a11y)
-   */
   id: _propTypes.default.string.isRequired,
-
-  /**
-   * object with shape: `{
-   *   text: PropTypes.node,
-   *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   * }`
-   */
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
   messagesId: _propTypes.default.string,
   children: _propTypes.default.node,
@@ -57,10 +46,6 @@ const propTypes = {
   vAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
   width: _propTypes.default.string,
   inputContainerRef: _propTypes.default.func,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/lib/FormFieldGroup/index.js

@@ -35,6 +35,7 @@ var _dec, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class FormFieldGroup extends _react.Component {
   constructor() {
@@ -52,11 +53,15 @@ let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   componentDidMount() {
-    this.props.makeStyles(this.makeStylesVariables);
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles(this.makeStylesVariables);
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
   }
 
   get makeStylesVariables() {
@@ -98,22 +103,21 @@ let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   render() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          makeStyles = _this$props.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          makeStyles = _this$props3.makeStyles,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return (0, _emotion.jsx)(_FormFieldLayout.FormFieldLayout, Object.assign({}, (0, _omitProps.omitProps)(props, FormFieldGroup.allowedProps), (0, _pickProps.pickProps)(props, _FormFieldLayout.FormFieldLayout.allowedProps), {
       vAlign: props.vAlign,
       layout: props.layout === 'inline' ? 'inline' : 'stacked',
       label: props.description,
-      "aria-disabled": props.disabled ? 'true' : null,
-      "aria-invalid": this.invalid ? 'true' : null,
+      "aria-disabled": props.disabled ? 'true' : void 0,
+      "aria-invalid": this.invalid ? 'true' : void 0,
       elementRef: this.handleRef
     }), this.renderFields());
   }
 
 }, _class2.displayName = "FormFieldGroup", _class2.componentId = 'FormFieldGroup', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  children: null,
   as: 'fieldset',
   disabled: false,
   rowSpacing: 'medium',

package/lib/FormFieldGroup/props.js

@@ -36,23 +36,8 @@ var _FormPropTypes = require("../FormPropTypes");
  */
 const propTypes = {
   description: _propTypes.default.node.isRequired,
-
-  /**
-   * the element type to render as
-   */
   as: _propTypes.default.elementType,
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-
-  /**
-   * id for the form field messages
-   */
   messagesId: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   children: _propTypes.default.node,
@@ -61,10 +46,6 @@ const propTypes = {
   colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
   vAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
   startAt: _propTypes.default.oneOf(['small', 'medium', 'large', 'x-large', null]),
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/lib/FormFieldLabel/index.js

@@ -27,6 +27,7 @@ var _dec, _class, _class2, _temp;
 ---
 parent: FormField
 ---
+@tsProps
 
 This is a helper component that is used by most of the custom form
 components. In most cases it shouldn't be used directly.
@@ -50,19 +51,24 @@ let FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
     const ElementType = (0, _getElementType.getElementType)(FormFieldLabel, this.props);
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          children = _this$props.children;
-    return (0, _emotion.jsx)(ElementType, Object.assign({}, (0, _omitProps.omitProps)(this.props, FormFieldLabel.allowedProps), {
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          children = _this$props3.children;
+    return (0, _emotion.jsx)(ElementType // @ts-expect-error TODO: `ref` prop causes: "Expression produces a union type that is too complex to represent.ts(2590)"
+    , Object.assign({}, (0, _omitProps.omitProps)(this.props, FormFieldLabel.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
       ref: this.handleRef
     }), children);

package/lib/FormFieldLabel/props.js

@@ -33,8 +33,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
-  as: _propTypes.default.elementType,
-  children: _propTypes.default.node.isRequired
+  children: _propTypes.default.node.isRequired,
+  as: _propTypes.default.elementType
 };
 exports.propTypes = propTypes;
 const allowedProps = ['as', 'children'];