@instructure/ui-form-field 11.7.5-snapshot-49 → 11.7.6-snapshot-0

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +12 -1
  2. package/es/FormFieldLayout/v2/index.js +4 -8
  3. package/lib/FormFieldLayout/v2/index.js +3 -7
  4. package/package.json +14 -14
  5. package/src/FormFieldLayout/v2/index.tsx +4 -9
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/FormFieldLayout/v2/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,18 @@
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.5-snapshot-49](https://github.com/instructure/instructure-ui/compare/v11.7.4...v11.7.5-snapshot-49) (2026-08-25)
6
+ ## [11.7.6-snapshot-0](https://github.com/instructure/instructure-ui/compare/v11.7.5...v11.7.6-snapshot-0) (2026-08-25)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** generate deterministic ids with React useId ([83aa25a](https://github.com/instructure/instructure-ui/commit/83aa25aebd41720fd09beac025dbf961e1f413c2))
12
+
13
+
14
+
15
+
16
+
17
+ ## [11.7.5](https://github.com/instructure/instructure-ui/compare/v11.7.4...v11.7.5) (2026-08-25)
7
18
 
8
19
  **Note:** Version bump only for package @instructure/ui-form-field
9
20
 
package/es/FormFieldLayout/v2/index.js CHANGED
@@ -22,7 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { forwardRef, useEffect, useState, useCallback } from 'react';
25
+ import { forwardRef, useCallback } from 'react';
26
26
  import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
27
27
  import { omitProps, useDeterministicId } from '@instructure/ui-react-utils';
28
28
  import { useStyleNew } from '@instructure/emotion';
@@ -59,16 +59,12 @@ const FormFieldLayout = /*#__PURE__*/forwardRef((props, ref) => {
59
59
  ...rest
60
60
  } = props;
61
61
 
62
- // Deterministic ID generation
63
- const [deterministicId, setDeterministicId] = useState();
64
- const getId = useDeterministicId('FormFieldLayout');
65
- useEffect(() => {
66
- setDeterministicId(getId());
67
- }, []);
62
+ // SSR-safe deterministic ID generation (stable across server/client render)
63
+ const deterministicId = useDeterministicId('FormFieldLayout')();
68
64
  const messagesId = messagesIdProp || deterministicId;
69
65
  // Give the label an id so controls can reference only the label text via
70
66
  // `aria-labelledby`, keeping messages out of the accessible name.
71
- const labelId = labelIdProp || (deterministicId ? `${deterministicId}-Label` : undefined);
67
+ const labelId = labelIdProp || `${deterministicId}-Label`;
72
68
 
73
69
  // Filter out error and success messages when disabled or readOnly
74
70
  const filteredMessages = disabled || readOnly ? messages?.filter(msg => msg.type !== 'error' && msg.type !== 'newError' && msg.type !== 'success') : messages;
package/lib/FormFieldLayout/v2/index.js CHANGED
@@ -74,16 +74,12 @@ const FormFieldLayout = exports.FormFieldLayout = /*#__PURE__*/(0, _react.forwar
74
74
  ...rest
75
75
  } = props;
76
76
 
77
- // Deterministic ID generation
78
- const [deterministicId, setDeterministicId] = (0, _react.useState)();
79
- const getId = (0, _useDeterministicId.useDeterministicId)('FormFieldLayout');
80
- (0, _react.useEffect)(() => {
81
- setDeterministicId(getId());
82
- }, []);
77
+ // SSR-safe deterministic ID generation (stable across server/client render)
78
+ const deterministicId = (0, _useDeterministicId.useDeterministicId)('FormFieldLayout')();
83
79
  const messagesId = messagesIdProp || deterministicId;
84
80
  // Give the label an id so controls can reference only the label text via
85
81
  // `aria-labelledby`, keeping messages out of the accessible name.
86
- const labelId = labelIdProp || (deterministicId ? `${deterministicId}-Label` : undefined);
82
+ const labelId = labelIdProp || `${deterministicId}-Label`;
87
83
 
88
84
  // Filter out error and success messages when disabled or readOnly
89
85
  const filteredMessages = disabled || readOnly ? messages?.filter(msg => msg.type !== 'error' && msg.type !== 'newError' && msg.type !== 'success') : messages;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-form-field",
3
- "version": "11.7.5-snapshot-49",
3
+ "version": "11.7.6-snapshot-0",
4
4
  "description": "Form layout components.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -15,24 +15,24 @@
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.29.7",
18
- "@instructure/shared-types": "11.7.5-snapshot-49",
19
- "@instructure/console": "11.7.5-snapshot-49",
20
- "@instructure/ui-a11y-utils": "11.7.5-snapshot-49",
21
- "@instructure/emotion": "11.7.5-snapshot-49",
22
- "@instructure/ui-a11y-content": "11.7.5-snapshot-49",
23
- "@instructure/ui-grid": "11.7.5-snapshot-49",
24
- "@instructure/ui-icons": "11.7.5-snapshot-49",
25
- "@instructure/ui-utils": "11.7.5-snapshot-49",
26
- "@instructure/ui-react-utils": "11.7.5-snapshot-49",
27
- "@instructure/uid": "11.7.5-snapshot-49",
28
- "@instructure/ui-themes": "11.7.5-snapshot-49"
18
+ "@instructure/console": "11.7.6-snapshot-0",
19
+ "@instructure/ui-a11y-content": "11.7.6-snapshot-0",
20
+ "@instructure/emotion": "11.7.6-snapshot-0",
21
+ "@instructure/ui-a11y-utils": "11.7.6-snapshot-0",
22
+ "@instructure/shared-types": "11.7.6-snapshot-0",
23
+ "@instructure/ui-icons": "11.7.6-snapshot-0",
24
+ "@instructure/ui-grid": "11.7.6-snapshot-0",
25
+ "@instructure/ui-react-utils": "11.7.6-snapshot-0",
26
+ "@instructure/ui-themes": "11.7.6-snapshot-0",
27
+ "@instructure/ui-utils": "11.7.6-snapshot-0",
28
+ "@instructure/uid": "11.7.6-snapshot-0"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@testing-library/jest-dom": "^6.9.1",
32
32
  "@testing-library/react": "16.3.2",
33
33
  "vitest": "^4.1.9",
34
- "@instructure/ui-axe-check": "11.7.5-snapshot-49",
35
- "@instructure/ui-babel-preset": "11.7.5-snapshot-49"
34
+ "@instructure/ui-axe-check": "11.7.6-snapshot-0",
35
+ "@instructure/ui-babel-preset": "11.7.6-snapshot-0"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "react": ">=18 <=19"
package/src/FormFieldLayout/v2/index.tsx CHANGED
@@ -22,7 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { forwardRef, useEffect, useState, useCallback } from 'react'
25
+ import { forwardRef, useCallback } from 'react'
26
26
  import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
27
27
  import { omitProps, useDeterministicId } from '@instructure/ui-react-utils'
28
28
 
@@ -62,18 +62,13 @@ const FormFieldLayout = forwardRef<Element, FormFieldLayoutProps>(
62
62
  ...rest
63
63
  } = props
64
64
 
65
- // Deterministic ID generation
66
- const [deterministicId, setDeterministicId] = useState<string | undefined>()
67
- const getId = useDeterministicId('FormFieldLayout')
68
- useEffect(() => {
69
- setDeterministicId(getId())
70
- }, [])
65
+ // SSR-safe deterministic ID generation (stable across server/client render)
66
+ const deterministicId = useDeterministicId('FormFieldLayout')()
71
67
 
72
68
  const messagesId = messagesIdProp || deterministicId
73
69
  // Give the label an id so controls can reference only the label text via
74
70
  // `aria-labelledby`, keeping messages out of the accessible name.
75
- const labelId =
76
- labelIdProp || (deterministicId ? `${deterministicId}-Label` : undefined)
71
+ const labelId = labelIdProp || `${deterministicId}-Label`
77
72
 
78
73
  // Filter out error and success messages when disabled or readOnly
79
74
  const filteredMessages =