@instructure/ui-form-field 11.7.4-snapshot-3 → 11.7.4-snapshot-4

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-3](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-3) (2026-05-12)
+## [11.7.4-snapshot-4](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-4) (2026-05-12)
 
-**Note:** Version bump only for package @instructure/ui-form-field
+
+### Bug Fixes
+
+* **ui-form-field:** disable child inputs when FormFieldGroup is disabled ([7fada35](https://github.com/instructure/instructure-ui/commit/7fada35327a9e53c387efb6cfbfc75a0759756ec))
 
 
 

package/es/FormFieldGroup/v2/index.js

@@ -23,9 +23,9 @@ var _dec, _class;
  * SOFTWARE.
  */
 
-import { Component, Children } from 'react';
+import { Component, Children, isValidElement } from 'react';
 import { Grid } from '@instructure/ui-grid/latest';
-import { pickProps, omitProps } from '@instructure/ui-react-utils';
+import { pickProps, omitProps, safeCloneElement } from '@instructure/ui-react-utils';
 import { withStyleNew } from '@instructure/emotion';
 import { allowedProps as formFieldLayoutAllowedProps } from "../../FormFieldLayout/v2/props.js";
 import { FormFieldLayout } from "../../FormFieldLayout/v2/index.js";
@@ -71,11 +71,19 @@ let FormFieldGroup = (_dec = withStyleNew(generateStyle), _dec(_class = class Fo
     }) >= 0;
   }
   renderColumns() {
+    const {
+      disabled
+    } = this.props;
     return Children.map(this.props.children, (child, index) => {
-      return child ? _jsx(Grid.Col, {
-        width: child.props && child.props.width ? 'auto' : undefined,
-        children: child
-      }, index) : null;
+      if (!child) return null;
+      const el = child;
+      const renderedChild = disabled && /*#__PURE__*/isValidElement(el) ? safeCloneElement(el, {
+        disabled: true
+      }) : child;
+      return _jsx(Grid.Col, {
+        width: el.props && el.props.width ? 'auto' : undefined,
+        children: renderedChild
+      }, index);
     });
   }
   renderChildren() {

package/lib/FormFieldGroup/v2/index.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _latest = require("@instructure/ui-grid/latest");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _emotion = require("@instructure/emotion");
 var _props = require("../../FormFieldLayout/v2/props");
 var _v = require("../../FormFieldLayout/v2");
@@ -78,11 +79,19 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyleNew)
     }) >= 0;
   }
   renderColumns() {
+    const {
+      disabled
+    } = this.props;
     return _react.Children.map(this.props.children, (child, index) => {
-      return child ? (0, _jsxRuntime.jsx)(_latest.Grid.Col, {
-        width: child.props && child.props.width ? 'auto' : undefined,
-        children: child
-      }, index) : null;
+      if (!child) return null;
+      const el = child;
+      const renderedChild = disabled && /*#__PURE__*/(0, _react.isValidElement)(el) ? (0, _safeCloneElement.safeCloneElement)(el, {
+        disabled: true
+      }) : child;
+      return (0, _jsxRuntime.jsx)(_latest.Grid.Col, {
+        width: el.props && el.props.width ? 'auto' : undefined,
+        children: renderedChild
+      }, index);
     });
   }
   renderChildren() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "11.7.4-snapshot-3",
+  "version": "11.7.4-snapshot-4",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,24 +15,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@instructure/console": "11.7.4-snapshot-3",
-    "@instructure/emotion": "11.7.4-snapshot-3",
-    "@instructure/shared-types": "11.7.4-snapshot-3",
-    "@instructure/ui-a11y-content": "11.7.4-snapshot-3",
-    "@instructure/ui-a11y-utils": "11.7.4-snapshot-3",
-    "@instructure/ui-grid": "11.7.4-snapshot-3",
-    "@instructure/ui-icons": "11.7.4-snapshot-3",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-3",
-    "@instructure/ui-themes": "11.7.4-snapshot-3",
-    "@instructure/uid": "11.7.4-snapshot-3",
-    "@instructure/ui-utils": "11.7.4-snapshot-3"
+    "@instructure/console": "11.7.4-snapshot-4",
+    "@instructure/emotion": "11.7.4-snapshot-4",
+    "@instructure/shared-types": "11.7.4-snapshot-4",
+    "@instructure/ui-a11y-content": "11.7.4-snapshot-4",
+    "@instructure/ui-a11y-utils": "11.7.4-snapshot-4",
+    "@instructure/ui-grid": "11.7.4-snapshot-4",
+    "@instructure/ui-icons": "11.7.4-snapshot-4",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-4",
+    "@instructure/ui-utils": "11.7.4-snapshot-4",
+    "@instructure/uid": "11.7.4-snapshot-4",
+    "@instructure/ui-themes": "11.7.4-snapshot-4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-3",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-3"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-4",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-4"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/FormFieldGroup/v2/index.tsx

@@ -22,10 +22,20 @@
  * SOFTWARE.
  */
 
-import { Component, Children, ReactElement, AriaAttributes } from 'react'
+import {
+  Component,
+  Children,
+  ReactElement,
+  AriaAttributes,
+  isValidElement
+} from 'react'
 
 import { Grid } from '@instructure/ui-grid/latest'
-import { pickProps, omitProps } from '@instructure/ui-react-utils'
+import {
+  pickProps,
+  omitProps,
+  safeCloneElement
+} from '@instructure/ui-react-utils'
 import { withStyleNew } from '@instructure/emotion'
 
 import { allowedProps as formFieldLayoutAllowedProps } from '../../FormFieldLayout/v2/props'
@@ -86,20 +96,22 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
   }
 
   renderColumns() {
+    const { disabled } = this.props
     return Children.map(this.props.children, (child, index) => {
-      return child ? (
+      if (!child) return null
+      const el = child as ReactElement<any>
+      const renderedChild =
+        disabled && isValidElement(el)
+          ? safeCloneElement(el, { disabled: true })
+          : child
+      return (
         <Grid.Col
-          width={
-            (child as ReactElement).props &&
-            (child as ReactElement<any>).props.width
-              ? 'auto'
-              : undefined
-          }
+          width={el.props && el.props.width ? 'auto' : undefined}
           key={index}
         >
-          {child}
+          {renderedChild}
         </Grid.Col>
-      ) : null
+      )
     })
   }
 

package/src/FormFieldGroup/v2/props.ts

@@ -48,7 +48,8 @@ type FormFieldGroupOwnProps = {
    */
   messagesId?: string
   /**
-   * Whether the field group is disabled. When true, error and success messages will be hidden.
+   * Whether the field group is disabled. When true, the disabled prop is propagated to all
+   * child components, error and success messages will be hidden.
    */
   disabled?: boolean
   /**