@instructure/ui-form-field 10.26.1 → 11.0.1-snapshot-0

package/lib/index.js

@@ -39,16 +39,9 @@ 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 _FormPropTypes = require("./FormPropTypes");
+var _FormFieldGroup = require("./FormFieldGroup");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "10.26.1",
+  "version": "11.0.1-snapshot-0",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,29 +23,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1",
-    "@instructure/ui-babel-preset": "10.26.1",
-    "@instructure/ui-themes": "10.26.1",
+    "@instructure/ui-axe-check": "11.0.1-snapshot-0",
+    "@instructure/ui-babel-preset": "11.0.1-snapshot-0",
+    "@instructure/ui-themes": "11.0.1-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@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"
+    "@instructure/console": "11.0.1-snapshot-0",
+    "@instructure/emotion": "11.0.1-snapshot-0",
+    "@instructure/shared-types": "11.0.1-snapshot-0",
+    "@instructure/ui-a11y-content": "11.0.1-snapshot-0",
+    "@instructure/ui-a11y-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-grid": "11.0.1-snapshot-0",
+    "@instructure/ui-icons": "11.0.1-snapshot-0",
+    "@instructure/ui-react-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-utils": "11.0.1-snapshot-0",
+    "@instructure/uid": "11.0.1-snapshot-0"
   },
   "peerDependencies": {
-    "react": ">=16.14 <=18"
+    "react": ">=18 <=19"
   },
   "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 { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { FormFieldProps } from './props'
 
 /**
@@ -39,7 +39,6 @@ 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,14 +23,8 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
 
-import { FormPropTypes } from '../FormPropTypes'
-
-import type {
-  OtherHTMLAttributes,
-  PropValidators
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { FormMessage } from '../FormPropTypes'
 import type { Spacing } from '@instructure/emotion'
 
@@ -75,23 +69,6 @@ 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',
@@ -109,4 +86,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { FormFieldOwnProps, FormFieldProps }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/FormFieldGroup/index.tsx

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

package/src/FormFieldGroup/props.ts

@@ -22,13 +22,8 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
-
-import { FormPropTypes } from '../FormPropTypes'
-
 import type {
   AsElementType,
-  PropValidators,
   FormFieldGroupTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -85,22 +80,6 @@ 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',
@@ -121,4 +100,4 @@ export type {
   FormFieldGroupStyleProps,
   FormFieldGroupStyle
 }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/FormFieldLabel/index.tsx

@@ -24,17 +24,13 @@
 
 import { Component } from 'react'
 
-import {
-  omitProps,
-  getElementType,
-  deprecated
-} from '@instructure/ui-react-utils'
+import { omitProps, getElementType } from '@instructure/ui-react-utils'
 import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { FormFieldLabelProps } from './props'
 
 /**
@@ -56,11 +52,9 @@ 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,11 +22,8 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
-
 import type {
   AsElementType,
-  PropValidators,
   FormFieldLabelTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -46,13 +43,7 @@ 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 { propTypes, allowedProps }
+export { 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 { propTypes, allowedProps, FormFieldStyleProps } from './props'
+import { allowedProps, FormFieldStyleProps } from './props'
 import type { FormFieldLayoutProps } from './props'
 import generateComponentTheme from './theme'
 
@@ -47,7 +47,6 @@ 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,14 +22,9 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
-
-import { FormPropTypes } from '../FormPropTypes'
-
 import type {
   AsElementType,
-  OtherHTMLAttributes,
-  PropValidators
+  OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type {
   WithStyleProps,
@@ -110,25 +105,6 @@ 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',
@@ -158,4 +134,4 @@ export type {
   FormFieldLayoutStyle,
   FormFieldLayoutOwnProps
 }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/FormFieldMessage/index.tsx

@@ -33,7 +33,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { FormFieldMessageProps } from './props'
 
 /**
@@ -55,7 +55,6 @@ 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,15 +22,7 @@
  * SOFTWARE.
  */
 
-import {
-  formMessageTypePropType,
-  formMessageChildPropType
-} from '../FormPropTypes'
-
-import type {
-  PropValidators,
-  FormFieldMessageTheme
-} from '@instructure/shared-types'
+import type { FormFieldMessageTheme } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { FormMessageType, FormMessageChild } from '../FormPropTypes'
 
@@ -47,13 +39,7 @@ 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 { propTypes, allowedProps }
+export { allowedProps }

package/src/FormFieldMessages/index.tsx

@@ -33,7 +33,7 @@ import { FormFieldMessage } from '../FormFieldMessage'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { FormFieldMessagesProps } from './props'
 
 /**
@@ -58,7 +58,6 @@ 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,12 +22,7 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
-
-import { FormPropTypes } from '../FormPropTypes'
-
 import type {
-  PropValidators,
   FormFieldMessagesTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -58,13 +53,7 @@ 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 { propTypes, allowedProps }
+export { allowedProps }

package/src/FormPropTypes.ts

@@ -23,16 +23,6 @@
  */
 
 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'
@@ -46,18 +36,9 @@ 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,7 +29,6 @@ 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'