@instructure/ui-form-field 10.26.1-snapshot-2 → 10.26.1

package/lib/index.js

@@ -39,9 +39,16 @@ Object.defineProperty(exports, "FormFieldMessages", {
     return _FormFieldMessages.FormFieldMessages;
   }
 });
+Object.defineProperty(exports, "FormPropTypes", {
+  enumerable: true,
+  get: function () {
+    return _FormPropTypes.FormPropTypes;
+  }
+});
 var _FormField = require("./FormField");
 var _FormFieldLabel = require("./FormFieldLabel");
 var _FormFieldMessage = require("./FormFieldMessage");
 var _FormFieldMessages = require("./FormFieldMessages");
 var _FormFieldLayout = require("./FormFieldLayout");
-var _FormFieldGroup = require("./FormFieldGroup");
+var _FormFieldGroup = require("./FormFieldGroup");
+var _FormPropTypes = require("./FormPropTypes");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "10.26.1-snapshot-2",
+  "version": "10.26.1",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,28 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1-snapshot-2",
-    "@instructure/ui-babel-preset": "10.26.1-snapshot-2",
-    "@instructure/ui-themes": "10.26.1-snapshot-2",
+    "@instructure/ui-axe-check": "10.26.1",
+    "@instructure/ui-babel-preset": "10.26.1",
+    "@instructure/ui-themes": "10.26.1",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/react": "^16.0.1",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1-snapshot-2",
-    "@instructure/emotion": "10.26.1-snapshot-2",
-    "@instructure/shared-types": "10.26.1-snapshot-2",
-    "@instructure/ui-a11y-content": "10.26.1-snapshot-2",
-    "@instructure/ui-a11y-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-grid": "10.26.1-snapshot-2",
-    "@instructure/ui-icons": "10.26.1-snapshot-2",
-    "@instructure/ui-react-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-utils": "10.26.1-snapshot-2",
-    "@instructure/uid": "10.26.1-snapshot-2"
+    "@instructure/console": "10.26.1",
+    "@instructure/emotion": "10.26.1",
+    "@instructure/shared-types": "10.26.1",
+    "@instructure/ui-a11y-content": "10.26.1",
+    "@instructure/ui-a11y-utils": "10.26.1",
+    "@instructure/ui-grid": "10.26.1",
+    "@instructure/ui-icons": "10.26.1",
+    "@instructure/ui-react-utils": "10.26.1",
+    "@instructure/ui-utils": "10.26.1",
+    "@instructure/uid": "10.26.1",
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
-    "react": ">=18 <=19"
+    "react": ">=16.14 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/FormField/index.tsx

@@ -28,7 +28,7 @@ import { omitProps, pickProps } from '@instructure/ui-react-utils'
 
 import { FormFieldLayout } from '../FormFieldLayout'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { FormFieldProps } from './props'
 
 /**
@@ -39,6 +39,7 @@ category: components
 class FormField extends Component<FormFieldProps> {
   static readonly componentId = 'FormField'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     inline: false,

package/src/FormField/props.ts

@@ -23,8 +23,14 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
 
-import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import { FormPropTypes } from '../FormPropTypes'
+
+import type {
+  OtherHTMLAttributes,
+  PropValidators
+} from '@instructure/shared-types'
 import type { FormMessage } from '../FormPropTypes'
 import type { Spacing } from '@instructure/emotion'
 
@@ -69,6 +75,23 @@ type PropKeys = keyof FormFieldOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type FormFieldProps = FormFieldOwnProps & OtherHTMLAttributes<FormFieldOwnProps>
+
+const propTypes: PropValidators<PropKeys> = {
+  label: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  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,
+  elementRef: PropTypes.func,
+  margin: PropTypes.string
+}
+
 const allowedProps: AllowedPropKeys = [
   'label',
   'id',
@@ -86,4 +109,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { FormFieldOwnProps, FormFieldProps }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/FormFieldGroup/index.tsx

@@ -33,7 +33,7 @@ import { FormFieldLayout } from '../FormFieldLayout'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { FormFieldGroupProps, FormFieldGroupStyleProps } from './props'
 
 /**
@@ -45,6 +45,7 @@ category: components
 class FormFieldGroup extends Component<FormFieldGroupProps> {
   static readonly componentId = 'FormFieldGroup'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     as: 'fieldset',
@@ -99,8 +100,7 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
       return child ? (
         <Grid.Col
           width={
-            (child as ReactElement).props &&
-            (child as ReactElement<any>).props.width
+            (child as ReactElement).props && (child as ReactElement).props.width
               ? 'auto'
               : undefined
           }

package/src/FormFieldGroup/props.ts

@@ -22,8 +22,13 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
+
+import { FormPropTypes } from '../FormPropTypes'
+
 import type {
   AsElementType,
+  PropValidators,
   FormFieldGroupTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -80,6 +85,22 @@ type FormFieldGroupProps = FormFieldGroupOwnProps &
   >
 
 type FormFieldGroupStyle = ComponentStyle<'formFieldGroup'>
+
+const propTypes: PropValidators<PropKeys> = {
+  description: PropTypes.node.isRequired,
+  as: PropTypes.elementType,
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  messagesId: PropTypes.string,
+  disabled: PropTypes.bool,
+  children: PropTypes.node,
+  layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
+  rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
+  colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
+  vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  startAt: PropTypes.oneOf(['small', 'medium', 'large', 'x-large', null]),
+  elementRef: PropTypes.func
+}
+
 const allowedProps: AllowedPropKeys = [
   'description',
   'as',
@@ -100,4 +121,4 @@ export type {
   FormFieldGroupStyleProps,
   FormFieldGroupStyle
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/FormFieldLabel/index.tsx

@@ -24,13 +24,17 @@
 
 import { Component } from 'react'
 
-import { omitProps, getElementType } from '@instructure/ui-react-utils'
+import {
+  omitProps,
+  getElementType,
+  deprecated
+} from '@instructure/ui-react-utils'
 import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { FormFieldLabelProps } from './props'
 
 /**
@@ -52,9 +56,11 @@ type: example
  removed in the future
 **/
 @withStyle(generateStyle, generateComponentTheme)
+@deprecated('10', null, 'This component will be removed in a future version')
 class FormFieldLabel extends Component<FormFieldLabelProps> {
   static readonly componentId = 'FormFieldLabel'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     as: 'span'

package/src/FormFieldLabel/props.ts

@@ -22,8 +22,11 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
+
 import type {
   AsElementType,
+  PropValidators,
   FormFieldLabelTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -43,7 +46,13 @@ type FormFieldLabelProps = FormFieldLabelOwnProps &
   OtherHTMLAttributes<FormFieldLabelOwnProps>
 
 type FormFieldLabelStyle = ComponentStyle<'formFieldLabel'>
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.node.isRequired,
+  as: PropTypes.elementType
+}
+
 const allowedProps: AllowedPropKeys = ['as', 'children']
 
 export type { FormFieldLabelProps, FormFieldLabelStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/FormFieldLayout/index.tsx

@@ -33,7 +33,7 @@ import {
 import { withStyle } from '@instructure/emotion'
 import { FormFieldMessages } from '../FormFieldMessages'
 import generateStyle from './styles'
-import { allowedProps, FormFieldStyleProps } from './props'
+import { propTypes, allowedProps, FormFieldStyleProps } from './props'
 import type { FormFieldLayoutProps } from './props'
 import generateComponentTheme from './theme'
 
@@ -47,6 +47,7 @@ parent: FormField
 class FormFieldLayout extends Component<FormFieldLayoutProps> {
   static readonly componentId = 'FormFieldLayout'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     inline: false,

package/src/FormFieldLayout/props.ts

@@ -22,9 +22,14 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
+
+import { FormPropTypes } from '../FormPropTypes'
+
 import type {
   AsElementType,
-  OtherHTMLAttributes
+  OtherHTMLAttributes,
+  PropValidators
 } from '@instructure/shared-types'
 import type {
   WithStyleProps,
@@ -105,6 +110,25 @@ type FormFieldLayoutProps = FormFieldLayoutOwnProps &
 type FormFieldLayoutStyle = ComponentStyle<
   'formFieldLayout' | 'formFieldLabel' | 'formFieldChildren'
 >
+
+const propTypes: PropValidators<PropKeys> = {
+  label: PropTypes.node.isRequired,
+  id: PropTypes.string,
+  as: PropTypes.elementType,
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  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,
+  elementRef: PropTypes.func,
+  isGroup: PropTypes.bool,
+  margin: PropTypes.string
+}
+
 const allowedProps: AllowedPropKeys = [
   'label',
   'id',
@@ -134,4 +158,4 @@ export type {
   FormFieldLayoutStyle,
   FormFieldLayoutOwnProps
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/FormFieldMessage/index.tsx

@@ -33,7 +33,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { FormFieldMessageProps } from './props'
 
 /**
@@ -55,6 +55,7 @@ type: example
 class FormFieldMessage extends Component<FormFieldMessageProps> {
   static readonly componentId = 'FormFieldMessage'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     variant: 'hint'

package/src/FormFieldMessage/props.ts

@@ -22,7 +22,15 @@
  * SOFTWARE.
  */
 
-import type { FormFieldMessageTheme } from '@instructure/shared-types'
+import {
+  formMessageTypePropType,
+  formMessageChildPropType
+} from '../FormPropTypes'
+
+import type {
+  PropValidators,
+  FormFieldMessageTheme
+} from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { FormMessageType, FormMessageChild } from '../FormPropTypes'
 
@@ -39,7 +47,13 @@ type FormFieldMessageProps = FormFieldMessageOwnProps &
   WithStyleProps<FormFieldMessageTheme, FormFieldMessageStyle>
 
 type FormFieldMessageStyle = ComponentStyle<'formFieldMessage' | 'errorIcon'>
+
+const propTypes: PropValidators<PropKeys> = {
+  variant: formMessageTypePropType,
+  children: formMessageChildPropType
+}
+
 const allowedProps: AllowedPropKeys = ['variant', 'children']
 
 export type { FormFieldMessageProps, FormFieldMessageStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/FormFieldMessages/index.tsx

@@ -33,7 +33,7 @@ import { FormFieldMessage } from '../FormFieldMessage'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { FormFieldMessagesProps } from './props'
 
 /**
@@ -58,6 +58,7 @@ type: example
 class FormFieldMessages extends Component<FormFieldMessagesProps> {
   static readonly componentId = 'FormFieldMessages'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {}
 

package/src/FormFieldMessages/props.ts

@@ -22,7 +22,12 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
+
+import { FormPropTypes } from '../FormPropTypes'
+
 import type {
+  PropValidators,
   FormFieldMessagesTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -53,7 +58,13 @@ type FormFieldMessagesProps = FormFieldMessagesOwnProps &
   OtherHTMLAttributes<FormFieldMessagesOwnProps>
 
 type FormFieldMessagesStyle = ComponentStyle<'formFieldMessages' | 'message'>
+
+const propTypes: PropValidators<PropKeys> = {
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  gridArea: PropTypes.string
+}
+
 const allowedProps: AllowedPropKeys = ['messages', 'gridArea']
 
 export type { FormFieldMessagesProps, FormFieldMessagesStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/FormPropTypes.ts

@@ -23,6 +23,16 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
+const formMessageTypePropType = PropTypes.oneOf([
+  'error',
+  'newError',
+  'hint',
+  'success',
+  'screenreader-only'
+])
+const formMessageChildPropType = PropTypes.node
 
 type FormMessageType =
   | 'newError'
@@ -36,9 +46,18 @@ type FormMessageType =
  */
 type FormMessageChild = React.ReactNode
 
+const FormPropTypes = {
+  message: PropTypes.shape({
+    type: formMessageTypePropType,
+    text: formMessageChildPropType
+  })
+}
+
 type FormMessage = {
   type: FormMessageType
   text: FormMessageChild
 }
 
+export default FormPropTypes
+export { FormPropTypes, formMessageTypePropType, formMessageChildPropType }
 export type { FormMessage, FormMessageType, FormMessageChild }

package/src/index.ts

@@ -29,6 +29,7 @@ export { FormFieldMessages } from './FormFieldMessages'
 export { FormFieldLayout } from './FormFieldLayout'
 export { FormFieldGroup } from './FormFieldGroup'
 
+export { FormPropTypes } from './FormPropTypes'
 export type { FormMessageType, FormMessage } from './FormPropTypes'
 
 export type { FormFieldOwnProps, FormFieldProps } from './FormField/props'