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

package/lib/FormFieldLayout/index.js

@@ -45,10 +45,12 @@ var _dec, _class, _class2, _temp;
 ---
 parent: FormField
 ---
+@tsProps
 **/
 let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = class FormFieldLayout extends _react.Component {
   constructor(props) {
     super(props);
+    this._messagesId = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -61,7 +63,7 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
     };
 
     this.handleInputContainerRef = node => {
-      if (this.props.inputContainerRef) {
+      if (typeof this.props.inputContainerRef === 'function') {
         this.props.inputContainerRef(node);
       }
     };
@@ -72,11 +74,15 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
   }
 
   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() {
@@ -134,10 +140,10 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
 
   render() {
     const ElementType = this.elementType;
-    const _this$props = this.props,
-          makeStyles = _this$props.makeStyles,
-          styles = _this$props.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          makeStyles = _this$props3.makeStyles,
+          styles = _this$props3.styles,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const width = props.width,
           layout = props.layout,
           children = props.children;
@@ -146,7 +152,7 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
       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(), (0, _emotion.jsx)(_Grid.Grid, Object.assign({
       rowSpacing: "small",
@@ -159,7 +165,6 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
   }
 
 }, _class2.displayName = "FormFieldLayout", _class2.componentId = 'FormFieldLayout', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  children: null,
   inline: false,
   layout: 'stacked',
   as: 'label',

package/lib/FormFieldLayout/props.js

@@ -36,41 +36,22 @@ 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,
-
-  /**
-   * 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,
   children: _propTypes.default.node,
   inline: _propTypes.default.bool,
   layout: _propTypes.default.oneOf(['stacked', 'inline']),
   labelAlign: _propTypes.default.oneOf(['start', 'end']),
+  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;
-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'
+];
 exports.allowedProps = allowedProps;

package/lib/FormFieldLayout/styles.js

@@ -39,7 +39,7 @@ exports.default = void 0;
  * @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/lib/FormFieldMessage/index.js

@@ -25,6 +25,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.
@@ -47,17 +48,21 @@ let FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
   }
 
   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' ? (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
       ref: this.handleRef
@@ -67,8 +72,7 @@ let FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
   }
 
 }, _class2.displayName = "FormFieldMessage", _class2.componentId = 'FormFieldMessage', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  variant: 'hint',
-  children: null
+  variant: 'hint'
 }, _temp)) || _class);
 exports.FormFieldMessage = FormFieldMessage;
 var _default = FormFieldMessage;

package/lib/FormFieldMessages/index.js

@@ -27,6 +27,7 @@ var _dec, _class, _class2, _temp;
 ---
 parent: FormField
 ---
+@tsProps
 
 A FormFieldMessages component
 
@@ -52,17 +53,21 @@ let FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
   }
 
   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 ? (0, _emotion.jsx)("span", Object.assign({
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages
     }, (0, _omitProps.omitProps)(this.props, FormFieldMessages.allowedProps), {

package/lib/FormFieldMessages/props.js

@@ -35,12 +35,6 @@ var _FormPropTypes = require("../FormPropTypes");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message)
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "8.13.1-snapshot.9+f32ba918e",
+  "version": "8.14.0",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,22 +24,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-themes": "8.13.1-snapshot.9+f32ba918e"
+    "@instructure/ui-babel-preset": "8.14.0",
+    "@instructure/ui-test-utils": "8.14.0",
+    "@instructure/ui-themes": "8.14.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/emotion": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/shared-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-a11y-content": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-a11y-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-grid": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-icons": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/uid": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/console": "8.14.0",
+    "@instructure/emotion": "8.14.0",
+    "@instructure/shared-types": "8.14.0",
+    "@instructure/ui-a11y-content": "8.14.0",
+    "@instructure/ui-a11y-utils": "8.14.0",
+    "@instructure/ui-grid": "8.14.0",
+    "@instructure/ui-icons": "8.14.0",
+    "@instructure/ui-react-utils": "8.14.0",
+    "@instructure/ui-utils": "8.14.0",
+    "@instructure/uid": "8.14.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -47,6 +47,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "f32ba918e4d3ce76c6ee95c856584d00a9d80958"
+  }
 }

package/src/FormField/index.tsx

@@ -35,6 +35,7 @@ import type { FormFieldProps } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 class FormField extends Component<FormFieldProps> {
   static readonly componentId = 'FormField'
@@ -45,8 +46,7 @@ class FormField extends Component<FormFieldProps> {
     inline: false,
     layout: 'stacked',
     labelAlign: 'end',
-    vAlign: 'middle',
-    children: null
+    vAlign: 'middle'
   }
 
   ref: Element | null = null
@@ -66,7 +66,7 @@ class FormField extends Component<FormFieldProps> {
       <FormFieldLayout
         {...omitProps(this.props, FormField.allowedProps)}
         {...pickProps(this.props, FormFieldLayout.allowedProps)}
-        // @ts-expect-error ts-migrate(2322) FIXME: Remove this comment to see the full error message
+        label={this.props.label}
         vAlign={this.props.vAlign}
         as="label"
         htmlFor={this.props.id}

package/src/FormField/props.ts

@@ -35,8 +35,20 @@ import type { FormMessage } from '../FormPropTypes'
 
 type FormFieldOwnProps = {
   label: React.ReactNode
+  /**
+   * the id of the input (to link it to its label for a11y)
+   */
   id: string
+  /**
+   * Array of objects with shape: `{
+   *   text: React.ReactNode,
+   *   type: One of: ['error', 'hint', 'success', 'screenreader-only']
+   * }`
+   */
   messages?: FormMessage[]
+  /**
+   * id for the form field messages
+   */
   messagesId?: string
   children?: React.ReactNode
   inline?: boolean
@@ -44,7 +56,10 @@ type FormFieldOwnProps = {
   labelAlign?: 'start' | 'end'
   vAlign?: 'top' | 'middle' | 'bottom'
   width?: string
-  inputContainerRef?: (...args: any[]) => any
+  inputContainerRef?: (element: HTMLSpanElement | null) => void
+  /**
+   * provides a reference to the underlying html root element
+   */
   elementRef?: (element: Element | null) => void
 }
 
@@ -56,16 +71,7 @@ type FormFieldProps = FormFieldOwnProps & OtherHTMLAttributes<FormFieldOwnProps>
 
 const propTypes: PropValidators<PropKeys> = {
   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,
@@ -75,9 +81,6 @@ const propTypes: PropValidators<PropKeys> = {
   vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
   width: PropTypes.string,
   inputContainerRef: PropTypes.func,
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 }
 
@@ -96,5 +99,5 @@ const allowedProps: AllowedPropKeys = [
   'elementRef'
 ]
 
-export type { FormFieldProps }
+export type { FormFieldOwnProps, FormFieldProps }
 export { propTypes, allowedProps }

package/src/FormFieldGroup/index.tsx

@@ -41,6 +41,7 @@ import type { FormFieldGroupProps, FormFieldGroupStyleProps } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class FormFieldGroup extends Component<FormFieldGroupProps> {
@@ -49,7 +50,6 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
     as: 'fieldset',
     disabled: false,
     rowSpacing: 'medium',
@@ -70,14 +70,11 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles(this.makeStylesVariables)
+    this.props.makeStyles?.(this.makeStylesVariables)
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles(this.makeStylesVariables)
+  componentDidUpdate() {
+    this.props.makeStyles?.(this.makeStylesVariables)
   }
 
   get makeStylesVariables(): FormFieldGroupStyleProps {
@@ -143,12 +140,11 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
       <FormFieldLayout
         {...omitProps(props, FormFieldGroup.allowedProps)}
         {...pickProps(props, FormFieldLayout.allowedProps)}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; vAlign: "top" | "middle... Remove this comment to see the full error message
         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' : undefined}
+        aria-invalid={this.invalid ? 'true' : undefined}
         elementRef={this.handleRef}
       >
         {this.renderFields()}

package/src/FormFieldGroup/props.ts

@@ -33,12 +33,25 @@ import type {
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { FormFieldLayoutOwnProps } from '../FormFieldLayout/props'
 import type { FormMessage } from '../FormPropTypes'
 
 type FormFieldGroupOwnProps = {
   description: React.ReactNode
+  /**
+   * the element type to render as
+   */
   as?: AsElementType
+  /**
+   * Array of objects with shape: `{
+   *   text: React.ReactNode,
+   *   type: One of: ['error', 'hint', 'success', 'screenreader-only']
+   * }`
+   */
   messages?: FormMessage[]
+  /**
+   * id for the form field messages
+   */
   messagesId?: string
   disabled?: boolean
   children?: React.ReactNode
@@ -46,7 +59,10 @@ type FormFieldGroupOwnProps = {
   rowSpacing?: 'none' | 'small' | 'medium' | 'large'
   colSpacing?: 'none' | 'small' | 'medium' | 'large'
   vAlign?: 'top' | 'middle' | 'bottom'
-  startAt?: any // TODO: PropTypes.oneOf(['small', 'medium', 'large', 'x-large', null])
+  startAt?: 'small' | 'medium' | 'large' | 'x-large' | null
+  /**
+   * provides a reference to the underlying html root element
+   */
   elementRef?: (element: Element | null) => void
 }
 
@@ -60,26 +76,20 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type FormFieldGroupProps = FormFieldGroupOwnProps &
   WithStyleProps<FormFieldGroupTheme, FormFieldGroupStyle> &
-  OtherHTMLAttributes<FormFieldGroupOwnProps>
+  OtherHTMLAttributes<FormFieldGroupOwnProps> &
+  // Adding other props that can be passed to FormFieldLayout,
+  // excluding the ones we set manually
+  Omit<
+    FormFieldLayoutOwnProps,
+    'messages' | 'messagesId' | 'vAlign' | 'layout' | 'label' | 'children'
+  >
 
 type FormFieldGroupStyle = ComponentStyle<'formFieldGroup'>
 
 const propTypes: PropValidators<PropKeys> = {
   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,
@@ -88,9 +98,6 @@ const propTypes: PropValidators<PropKeys> = {
   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
 }
 

package/src/FormFieldLabel/index.tsx

@@ -38,6 +38,7 @@ import type { FormFieldLabelProps } 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.
@@ -67,14 +68,11 @@ class FormFieldLabel extends Component<FormFieldLabelProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   render() {

package/src/FormFieldLabel/props.ts

@@ -33,8 +33,8 @@ import type {
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type FormFieldLabelOwnProps = {
-  as?: AsElementType
   children: React.ReactNode
+  as?: AsElementType
 }
 
 type PropKeys = keyof FormFieldLabelOwnProps
@@ -48,8 +48,8 @@ type FormFieldLabelProps = FormFieldLabelOwnProps &
 type FormFieldLabelStyle = ComponentStyle<'formFieldLabel'>
 
 const propTypes: PropValidators<PropKeys> = {
-  as: PropTypes.elementType,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  as: PropTypes.elementType
 }
 
 const allowedProps: AllowedPropKeys = ['as', 'children']

package/src/FormFieldLayout/index.tsx

@@ -50,6 +50,7 @@ import type { FormFieldLayoutProps } from './props'
 ---
 parent: FormField
 ---
+@tsProps
 **/
 @withStyle(generateStyle, null)
 class FormFieldLayout extends Component<FormFieldLayoutProps> {
@@ -58,18 +59,15 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
     inline: false,
     layout: 'stacked',
     as: 'label',
     labelAlign: 'end'
   } as const
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
+  constructor(props: FormFieldLayoutProps) {
     super(props)
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_messagesId' does not exist on type 'For... Remove this comment to see the full error message
     this._messagesId = props.messagesId || uid('FormFieldLayout-messages')
 
     error(
@@ -81,6 +79,8 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
     )
   }
 
+  private _messagesId: string
+
   ref: Element | null = null
 
   handleRef = (el: Element | null) => {
@@ -94,14 +94,11 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   get hasVisibleLabel() {
@@ -121,9 +118,8 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
     return this.props.inline && this.props.layout === 'inline'
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'node' implicitly has an 'any' type.
-  handleInputContainerRef = (node) => {
-    if (this.props.inputContainerRef) {
+  handleInputContainerRef = (node: HTMLSpanElement | null) => {
+    if (typeof this.props.inputContainerRef === 'function') {
       this.props.inputContainerRef(node)
     }
   }
@@ -171,7 +167,6 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
           textAlign={this.inlineContainerAndLabel ? 'end' : undefined}
         >
           <FormFieldMessages
-            // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
             id={this._messagesId}
             messages={this.props.messages}
           />
@@ -194,8 +189,7 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
         ])}
         css={styles?.formFieldLayout}
         style={{ width }}
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_messagesId' does not exist on type 'For... Remove this comment to see the full error message
-        aria-describedby={this.hasMessages ? this._messagesId : null}
+        aria-describedby={this.hasMessages ? this._messagesId : undefined}
         ref={this.handleRef}
       >
         {this.elementType === 'fieldset' && this.renderLegend()}