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

package/src/FormFieldLayout/props.ts

@@ -36,16 +36,35 @@ import type { FormMessage } from '../FormPropTypes'
 
 type FormFieldLayoutOwnProps = {
   label: React.ReactNode
+  /**
+   * the id of the input (to link it to its label for a11y)
+   */
   id?: string
+  /**
+   * 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
   children?: React.ReactNode
   inline?: boolean
   layout?: 'stacked' | 'inline'
   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
 }
 
@@ -61,34 +80,17 @@ type FormFieldLayoutStyle = ComponentStyle<'formFieldLayout'>
 
 const propTypes: PropValidators<PropKeys> = {
   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
 }
 
@@ -105,7 +107,15 @@ const allowedProps: AllowedPropKeys = [
   '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 type { FormFieldLayoutProps, FormFieldLayoutStyle }
+export type {
+  FormFieldLayoutProps,
+  FormFieldLayoutStyle,
+  FormFieldLayoutOwnProps
+}
 export { propTypes, allowedProps }

package/src/FormFieldLayout/styles.ts

@@ -35,8 +35,7 @@ import type { FormFieldLayoutProps, FormFieldLayoutStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  // @ts-expect-error no theme used here
-  componentTheme,
+  _componentTheme: null,
   props: FormFieldLayoutProps
 ): FormFieldLayoutStyle => {
   const { inline } = props

package/src/FormFieldMessage/index.tsx

@@ -39,6 +39,7 @@ import type { FormFieldMessageProps } 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.
@@ -57,8 +58,7 @@ class FormFieldMessage extends Component<FormFieldMessageProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    variant: 'hint',
-    children: null
+    variant: 'hint'
   }
 
   ref: Element | null = null
@@ -68,14 +68,11 @@ class FormFieldMessage extends Component<FormFieldMessageProps> {
   }
 
   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/FormFieldMessages/index.tsx

@@ -41,6 +41,7 @@ import type { FormFieldMessagesProps } from './props'
 ---
 parent: FormField
 ---
+@tsProps
 
 A FormFieldMessages component
 
@@ -70,14 +71,11 @@ class FormFieldMessages extends Component<FormFieldMessagesProps> {
   }
 
   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/FormFieldMessages/props.ts

@@ -35,6 +35,12 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { FormMessage } from '../FormPropTypes'
 
 type FormFieldMessagesOwnProps = {
+  /**
+   * Array of objects with shape: `{
+   *   text: React.ReactNode,
+   *   type: One of: ['error', 'hint', 'success', 'screenreader-only']
+   * }`
+   */
   messages?: FormMessage[]
 }
 
@@ -49,12 +55,6 @@ type FormFieldMessagesProps = FormFieldMessagesOwnProps &
 type FormFieldMessagesStyle = ComponentStyle<'formFieldMessages' | 'message'>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message)
 }
 

package/src/index.ts

@@ -32,7 +32,7 @@ export { FormFieldGroup } from './FormFieldGroup'
 export { FormPropTypes } from './FormPropTypes'
 export type { FormMessageType, FormMessage } from './FormPropTypes'
 
-export type { FormFieldProps } from './FormField/props'
+export type { FormFieldOwnProps, FormFieldProps } from './FormField/props'
 export type { FormFieldLabelProps } from './FormFieldLabel/props'
 export type { FormFieldMessageProps } from './FormFieldMessage/props'
 export type { FormFieldMessagesProps } from './FormFieldMessages/props'

package/tsconfig.build.json

@@ -1,7 +1,24 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "outDir": "./types"
+    "outDir": "./types",
+    "composite": true,
+    "rootDir": "./src"
   },
-  "include": ["src/**/*"]
+  "include": ["src"],
+  "references": [
+    { "path": "../ui-babel-preset/tsconfig.build.json" },
+    { "path": "../ui-test-utils/tsconfig.build.json" },
+    { "path": "../ui-themes/tsconfig.build.json" },
+    { "path": "../console/tsconfig.build.json" },
+    { "path": "../emotion/tsconfig.build.json" },
+    { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-a11y-content/tsconfig.build.json" },
+    { "path": "../ui-a11y-utils/tsconfig.build.json" },
+    { "path": "../ui-grid/tsconfig.build.json" },
+    { "path": "../ui-icons/tsconfig.build.json" },
+    { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-utils/tsconfig.build.json" },
+    { "path": "../uid/tsconfig.build.json" }
+  ]
 }