@instructure/ui-form-field 11.7.8 → 11.7.9-snapshot-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [11.7.9-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-1) (2026-10-06)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-form-field
9
+
10
+
11
+
12
+
13
+
6
14
  ## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
7
15
 
8
16
  ### Bug Fixes
@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = exports.FormField = void 0;
7
7
  var _react = require("react");
8
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
9
- var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
8
+ var _uiReactUtils = require("@instructure/ui-react-utils");
10
9
  var _index = require("../../FormFieldLayout/v1/index.js");
11
10
  var _props = require("./props.js");
12
11
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
@@ -61,8 +60,8 @@ class FormField extends _react.Component {
61
60
  };
62
61
  render() {
63
62
  return (0, _jsxRuntime.jsx)(_index.FormFieldLayout, {
64
- ...(0, _omitProps.omitProps)(this.props, FormField.allowedProps),
65
- ...(0, _pickProps.pickProps)(this.props, _index.FormFieldLayout.allowedProps),
63
+ ...(0, _uiReactUtils.omitProps)(this.props, FormField.allowedProps),
64
+ ...(0, _uiReactUtils.pickProps)(this.props, _index.FormFieldLayout.allowedProps),
66
65
  label: this.props.label,
67
66
  vAlign: this.props.vAlign,
68
67
  as: "label"
@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = exports.FormField = void 0;
7
7
  var _react = require("react");
8
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
9
- var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
8
+ var _uiReactUtils = require("@instructure/ui-react-utils");
10
9
  var _props = require("../../FormFieldLayout/v2/props.js");
11
10
  var _index = require("../../FormFieldLayout/v2/index.js");
12
11
  var _props2 = require("./props.js");
@@ -62,8 +61,8 @@ class FormField extends _react.Component {
62
61
  };
63
62
  render() {
64
63
  return (0, _jsxRuntime.jsx)(_index.FormFieldLayout, {
65
- ...(0, _omitProps.omitProps)(this.props, FormField.allowedProps),
66
- ...(0, _pickProps.pickProps)(this.props, _props.allowedProps),
64
+ ...(0, _uiReactUtils.omitProps)(this.props, FormField.allowedProps),
65
+ ...(0, _uiReactUtils.pickProps)(this.props, _props.allowedProps),
67
66
  label: this.props.label,
68
67
  vAlign: this.props.vAlign,
69
68
  as: "label"
@@ -7,8 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = exports.FormFieldGroup = void 0;
8
8
  var _react = require("react");
9
9
  var _v11_ = require("@instructure/ui-grid/v11_6");
10
- var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
11
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
10
+ var _uiReactUtils = require("@instructure/ui-react-utils");
12
11
  var _emotion = require("@instructure/emotion");
13
12
  var _props = require("../../FormFieldLayout/v1/props.js");
14
13
  var _index = require("../../FormFieldLayout/v1/index.js");
@@ -132,8 +131,8 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_s
132
131
  ariaInvalid = 'true';
133
132
  }
134
133
  return (0, _jsxRuntime.jsx)(_index.FormFieldLayout, {
135
- ...(0, _omitProps.omitProps)(props, FormFieldGroup.allowedProps),
136
- ...(0, _pickProps.pickProps)(props, _props.allowedProps),
134
+ ...(0, _uiReactUtils.omitProps)(props, FormFieldGroup.allowedProps),
135
+ ...(0, _uiReactUtils.pickProps)(props, _props.allowedProps),
137
136
  vAlign: props.vAlign,
138
137
  layout: props.layout === 'inline' ? 'inline' : 'stacked',
139
138
  label: props.description,
@@ -7,9 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = exports.FormFieldGroup = void 0;
8
8
  var _react = require("react");
9
9
  var _latest = require("@instructure/ui-grid/latest");
10
- var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
11
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
12
- var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
10
+ var _uiReactUtils = require("@instructure/ui-react-utils");
13
11
  var _emotion = require("@instructure/emotion");
14
12
  var _props = require("../../FormFieldLayout/v2/props.js");
15
13
  var _index = require("../../FormFieldLayout/v2/index.js");
@@ -85,7 +83,7 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyleNew)
85
83
  return _react.Children.map(this.props.children, (child, index) => {
86
84
  if (!child) return null;
87
85
  const el = child;
88
- const renderedChild = disabled && /*#__PURE__*/(0, _react.isValidElement)(el) ? (0, _safeCloneElement.safeCloneElement)(el, {
86
+ const renderedChild = disabled && /*#__PURE__*/(0, _react.isValidElement)(el) ? (0, _uiReactUtils.safeCloneElement)(el, {
89
87
  disabled: true
90
88
  }) : child;
91
89
  return (0, _jsxRuntime.jsx)(_latest.Grid.Col, {
@@ -131,8 +129,8 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyleNew)
131
129
  ariaInvalid = 'true';
132
130
  }
133
131
  return (0, _jsxRuntime.jsx)(_index.FormFieldLayout, {
134
- ...(0, _omitProps.omitProps)(props, FormFieldGroup.allowedProps),
135
- ...(0, _pickProps.pickProps)(props, _props.allowedProps),
132
+ ...(0, _uiReactUtils.omitProps)(props, FormFieldGroup.allowedProps),
133
+ ...(0, _uiReactUtils.pickProps)(props, _props.allowedProps),
136
134
  vAlign: props.vAlign,
137
135
  layout: props.layout === 'inline' ? 'inline' : 'stacked',
138
136
  label: props.description,
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = exports.FormFieldLabel = void 0;
8
8
  var _react = require("react");
9
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
10
- var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
9
+ var _uiReactUtils = require("@instructure/ui-react-utils");
11
10
  var _emotion = require("@instructure/emotion");
12
11
  var _styles = _interopRequireDefault(require("./styles.js"));
13
12
  var _theme = _interopRequireDefault(require("./theme.js"));
@@ -73,13 +72,13 @@ let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyle)(_s
73
72
  this.props.makeStyles?.();
74
73
  }
75
74
  render() {
76
- const ElementType = (0, _getElementType.getElementType)(FormFieldLabel, this.props);
75
+ const ElementType = (0, _uiReactUtils.getElementType)(FormFieldLabel, this.props);
77
76
  const {
78
77
  styles,
79
78
  children
80
79
  } = this.props;
81
80
  return (0, _jsxRuntime.jsx)(ElementType, {
82
- ...(0, _omitProps.omitProps)(this.props, FormFieldLabel.allowedProps),
81
+ ...(0, _uiReactUtils.omitProps)(this.props, FormFieldLabel.allowedProps),
83
82
  css: styles?.formFieldLabel,
84
83
  ref: this.handleRef,
85
84
  children: children
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
7
+ var _uiA11yUtils = require("@instructure/ui-a11y-utils");
8
8
  /*
9
9
  * The MIT License (MIT)
10
10
  *
@@ -43,7 +43,7 @@ const generateStyle = (componentTheme, props) => {
43
43
  const {
44
44
  children
45
45
  } = props;
46
- const hasContent = (0, _hasVisibleChildren.hasVisibleChildren)(children);
46
+ const hasContent = (0, _uiA11yUtils.hasVisibleChildren)(children);
47
47
  const labelStyles = {
48
48
  all: 'initial',
49
49
  display: 'block',
@@ -6,10 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = exports.FormFieldLayout = void 0;
8
8
  var _react = require("react");
9
- var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
10
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
11
- var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
12
- var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
9
+ var _uiA11yUtils = require("@instructure/ui-a11y-utils");
10
+ var _uiReactUtils = require("@instructure/ui-react-utils");
13
11
  var _emotion = require("@instructure/emotion");
14
12
  var _index = require("../../FormFieldMessages/v1/index.js");
15
13
  var _styles = _interopRequireDefault(require("./styles.js"));
@@ -45,7 +43,7 @@ var _dec, _dec2, _class;
45
43
  parent: FormField
46
44
  ---
47
45
  **/
48
- let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class FormFieldLayout extends _react.Component {
46
+ let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class FormFieldLayout extends _react.Component {
49
47
  static displayName = 'FormFieldLayout';
50
48
  static componentId = 'FormFieldLayout';
51
49
  static allowedProps = _props.allowedProps;
@@ -88,7 +86,7 @@ let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId
88
86
  };
89
87
  };
90
88
  get hasVisibleLabel() {
91
- return this.props.label ? (0, _hasVisibleChildren.hasVisibleChildren)(this.props.label) : false;
89
+ return this.props.label ? (0, _uiA11yUtils.hasVisibleChildren)(this.props.label) : false;
92
90
  }
93
91
  get hasMessages() {
94
92
  if (!this.props.messages || this.props.messages.length == 0) {
@@ -107,7 +105,7 @@ let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId
107
105
  return false;
108
106
  }
109
107
  get elementType() {
110
- return (0, _getElementType.getElementType)(FormFieldLayout, this.props);
108
+ return (0, _uiReactUtils.getElementType)(FormFieldLayout, this.props);
111
109
  }
112
110
  handleInputContainerRef = node => {
113
111
  if (typeof this.props.inputContainerRef === 'function') {
@@ -176,7 +174,7 @@ let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId
176
174
  } = props;
177
175
  const hasNewErrorMsgAndIsGroup = !!messages?.find(m => m.type === 'newError') && isGroup;
178
176
  return (0, _jsxRuntime.jsxs)(ElementType, {
179
- ...(0, _omitProps.omitProps)(props, [...FormFieldLayout.allowedProps]),
177
+ ...(0, _uiReactUtils.omitProps)(props, [...FormFieldLayout.allowedProps]),
180
178
  css: styles?.formFieldLayout,
181
179
  "aria-describedby": this.hasMessages ? this._messagesId : undefined,
182
180
  "aria-errormessage": this.props['aria-invalid'] ? this._messagesId : undefined,
@@ -13,9 +13,8 @@ Object.defineProperty(exports, "allowedProps", {
13
13
  });
14
14
  exports.default = void 0;
15
15
  var _react = require("react");
16
- var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
17
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
18
- var _useDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/useDeterministicId.js");
16
+ var _uiA11yUtils = require("@instructure/ui-a11y-utils");
17
+ var _uiReactUtils = require("@instructure/ui-react-utils");
19
18
  var _emotion = require("@instructure/emotion");
20
19
  var _index = require("../../FormFieldMessages/v2/index.js");
21
20
  var _styles = _interopRequireDefault(require("./styles.js"));
@@ -75,7 +74,7 @@ const FormFieldLayout = exports.FormFieldLayout = /*#__PURE__*/(0, _react.forwar
75
74
  } = props;
76
75
 
77
76
  // SSR-safe deterministic ID generation (stable across server/client render)
78
- const deterministicId = (0, _useDeterministicId.useDeterministicId)('FormFieldLayout')();
77
+ const deterministicId = (0, _uiReactUtils.useDeterministicId)('FormFieldLayout')();
79
78
  const messagesId = messagesIdProp || deterministicId;
80
79
  // Give the label an id so controls can reference only the label text via
81
80
  // `aria-labelledby`, keeping messages out of the accessible name.
@@ -107,7 +106,7 @@ const FormFieldLayout = exports.FormFieldLayout = /*#__PURE__*/(0, _react.forwar
107
106
  }
108
107
  }
109
108
  }
110
- const hasVisibleLabel = label ? (0, _hasVisibleChildren.hasVisibleChildren)(label) : false;
109
+ const hasVisibleLabel = label ? (0, _uiA11yUtils.hasVisibleChildren)(label) : false;
111
110
  const invalid = !!filteredMessages?.find(m => m.type === 'error' || m.type === 'newError');
112
111
 
113
112
  // Styles
@@ -202,7 +201,7 @@ const FormFieldLayout = exports.FormFieldLayout = /*#__PURE__*/(0, _react.forwar
202
201
  }) : null;
203
202
  };
204
203
  return (0, _jsxRuntime.jsxs)(ElementType, {
205
- ...(0, _omitProps.omitProps)(rest, [..._props.allowedProps]),
204
+ ...(0, _uiReactUtils.omitProps)(rest, [..._props.allowedProps]),
206
205
  css: styles?.formFieldLayout,
207
206
  "aria-describedby": hasMessages ? messagesId : undefined,
208
207
  "aria-errormessage": rest['aria-invalid'] ? messagesId : undefined,
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = exports.FormFieldMessage = void 0;
8
8
  var _react = require("react");
9
- var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
10
- var _IconWarningSolid = require("@instructure/ui-icons/lib/generated/IconWarningSolid.js");
9
+ var _uiA11yContent = require("@instructure/ui-a11y-content");
10
+ var _uiIcons = require("@instructure/ui-icons");
11
11
  var _emotion = require("@instructure/emotion");
12
12
  var _styles = _interopRequireDefault(require("./styles.js"));
13
13
  var _theme = _interopRequireDefault(require("./theme.js"));
@@ -80,7 +80,7 @@ let FormFieldMessage = exports.FormFieldMessage = (_dec = (0, _emotion.withStyle
80
80
  },
81
81
  children: [this.props.variant === 'newError' && this.props.children && (0, _jsxRuntime.jsx)("span", {
82
82
  css: styles?.errorIcon,
83
- children: (0, _jsxRuntime.jsx)(_IconWarningSolid.IconWarningSolid, {
83
+ children: (0, _jsxRuntime.jsx)(_uiIcons.IconWarningSolid, {
84
84
  color: "error"
85
85
  })
86
86
  }), (0, _jsxRuntime.jsx)("span", {
@@ -88,7 +88,7 @@ let FormFieldMessage = exports.FormFieldMessage = (_dec = (0, _emotion.withStyle
88
88
  ref: this.handleRef,
89
89
  children: children
90
90
  })]
91
- }) : (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
91
+ }) : (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {
92
92
  elementRef: this.handleRef,
93
93
  children: children
94
94
  });
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = exports.FormFieldMessage = void 0;
8
8
  var _react = require("react");
9
- var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
9
+ var _uiA11yContent = require("@instructure/ui-a11y-content");
10
10
  var _uiIcons = require("@instructure/ui-icons");
11
11
  var _emotion = require("@instructure/emotion");
12
12
  var _styles = _interopRequireDefault(require("./styles.js"));
@@ -92,7 +92,7 @@ const FormFieldMessage = exports.FormFieldMessage = /*#__PURE__*/(0, _react.forw
92
92
  ref: handleRef,
93
93
  children: children
94
94
  })]
95
- }) : (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
95
+ }) : (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {
96
96
  elementRef: handleRef,
97
97
  children: children
98
98
  });
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = exports.FormFieldMessages = void 0;
8
8
  var _react = require("react");
9
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
9
+ var _uiReactUtils = require("@instructure/ui-react-utils");
10
10
  var _emotion = require("@instructure/emotion");
11
11
  var _index = require("../../FormFieldMessage/v1/index.js");
12
12
  var _styles = _interopRequireDefault(require("./styles.js"));
@@ -77,7 +77,7 @@ let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withSty
77
77
  } = this.props;
78
78
  return messages && messages.length > 0 ? (0, _jsxRuntime.jsx)("div", {
79
79
  css: styles?.formFieldMessages,
80
- ...(0, _omitProps.omitProps)(this.props, FormFieldMessages.allowedProps),
80
+ ...(0, _uiReactUtils.omitProps)(this.props, FormFieldMessages.allowedProps),
81
81
  ref: this.handleRef,
82
82
  children: messages.map((msg, i) => {
83
83
  return (0, _jsxRuntime.jsx)("span", {
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = exports.FormFieldMessages = void 0;
8
8
  var _react = require("react");
9
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
9
+ var _uiReactUtils = require("@instructure/ui-react-utils");
10
10
  var _emotion = require("@instructure/emotion");
11
11
  var _index = require("../../FormFieldMessage/v2/index.js");
12
12
  var _styles = _interopRequireDefault(require("./styles.js"));
@@ -78,7 +78,7 @@ let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withSty
78
78
  // we could move a proper hasMessages logic here (see FormFieldLayout)
79
79
  return messages && messages.length > 0 ? (0, _jsxRuntime.jsx)("div", {
80
80
  css: styles?.formFieldMessages,
81
- ...(0, _omitProps.omitProps)(this.props, FormFieldMessages.allowedProps),
81
+ ...(0, _uiReactUtils.omitProps)(this.props, FormFieldMessages.allowedProps),
82
82
  ref: this.handleRef,
83
83
  children: messages.map((msg, i) => {
84
84
  return (0, _jsxRuntime.jsx)("span", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-form-field",
3
- "version": "11.7.8",
3
+ "version": "11.7.9-snapshot-1",
4
4
  "description": "Form layout components.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -15,22 +15,22 @@
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.29.7",
18
- "@instructure/emotion": "11.7.8",
19
- "@instructure/shared-types": "11.7.8",
20
- "@instructure/ui-a11y-content": "11.7.8",
21
- "@instructure/ui-a11y-utils": "11.7.8",
22
- "@instructure/console": "11.7.8",
23
- "@instructure/ui-grid": "11.7.8",
24
- "@instructure/ui-icons": "11.7.8",
25
- "@instructure/ui-react-utils": "11.7.8",
26
- "@instructure/ui-themes": "11.7.8",
27
- "@instructure/uid": "11.7.8",
28
- "@instructure/ui-utils": "11.7.8"
18
+ "@instructure/console": "11.7.9-snapshot-1",
19
+ "@instructure/emotion": "11.7.9-snapshot-1",
20
+ "@instructure/shared-types": "11.7.9-snapshot-1",
21
+ "@instructure/ui-a11y-content": "11.7.9-snapshot-1",
22
+ "@instructure/ui-a11y-utils": "11.7.9-snapshot-1",
23
+ "@instructure/ui-grid": "11.7.9-snapshot-1",
24
+ "@instructure/ui-icons": "11.7.9-snapshot-1",
25
+ "@instructure/ui-react-utils": "11.7.9-snapshot-1",
26
+ "@instructure/ui-utils": "11.7.9-snapshot-1",
27
+ "@instructure/uid": "11.7.9-snapshot-1",
28
+ "@instructure/ui-themes": "11.7.9-snapshot-1"
29
29
  },
30
30
  "devDependencies": {
31
31
  "vitest": "^5.0.0",
32
- "@instructure/ui-babel-preset": "11.7.8",
33
- "@instructure/ui-axe-check": "11.7.8"
32
+ "@instructure/ui-axe-check": "11.7.9-snapshot-1",
33
+ "@instructure/ui-babel-preset": "11.7.9-snapshot-1"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": ">=18 <=19"