@instructure/ui-alerts 11.7.4-snapshot-100 → 11.7.4-snapshot-101

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 (23) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Alert/v1/index.js +6 -0
  3. package/es/Alert/v1/props.js +1 -1
  4. package/es/Alert/v2/index.js +6 -0
  5. package/es/Alert/v2/props.js +1 -1
  6. package/lib/Alert/v1/index.js +6 -0
  7. package/lib/Alert/v1/props.js +1 -1
  8. package/lib/Alert/v2/index.js +6 -0
  9. package/lib/Alert/v2/props.js +1 -1
  10. package/package.json +15 -15
  11. package/src/Alert/v1/index.tsx +4 -0
  12. package/src/Alert/v1/props.ts +7 -1
  13. package/src/Alert/v2/index.tsx +4 -0
  14. package/src/Alert/v2/props.ts +7 -1
  15. package/tsconfig.build.tsbuildinfo +1 -1
  16. package/types/Alert/v1/index.d.ts +1 -0
  17. package/types/Alert/v1/index.d.ts.map +1 -1
  18. package/types/Alert/v1/props.d.ts +4 -0
  19. package/types/Alert/v1/props.d.ts.map +1 -1
  20. package/types/Alert/v2/index.d.ts +1 -0
  21. package/types/Alert/v2/index.d.ts.map +1 -1
  22. package/types/Alert/v2/props.d.ts +4 -0
  23. package/types/Alert/v2/props.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
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.4-snapshot-100](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-100) (2026-07-14)
6
+ ## [11.7.4-snapshot-101](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-101) (2026-07-14)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-alerts
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-motion,ui-alerts:** capture child DOM via elementRef in Transition to avoid React 'ref is not a prop' warning ([aaa4a58](https://github.com/instructure/instructure-ui/commit/aaa4a58c4fd8f0d678972a4dea6f2d7c3faaed46))
9
12
 
10
13
 
11
14
 
package/es/Alert/v1/index.js CHANGED
@@ -77,6 +77,12 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
77
77
  ref = null;
78
78
  handleRef = el => {
79
79
  this.ref = el;
80
+ const {
81
+ elementRef
82
+ } = this.props;
83
+ if (typeof elementRef === 'function') {
84
+ elementRef(el);
85
+ }
80
86
  };
81
87
  handleTimeout = () => {
82
88
  if (this.props.timeout > 0) {
package/es/Alert/v1/props.js CHANGED
@@ -22,5 +22,5 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- const allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon'];
25
+ const allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon', 'elementRef'];
26
26
  export { allowedProps };
package/es/Alert/v2/index.js CHANGED
@@ -76,6 +76,12 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle),
76
76
  ref = null;
77
77
  handleRef = el => {
78
78
  this.ref = el;
79
+ const {
80
+ elementRef
81
+ } = this.props;
82
+ if (typeof elementRef === 'function') {
83
+ elementRef(el);
84
+ }
79
85
  };
80
86
  handleTimeout = () => {
81
87
  if (this.props.timeout > 0) {
package/es/Alert/v2/props.js CHANGED
@@ -22,5 +22,5 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- const allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon'];
25
+ const allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon', 'elementRef'];
26
26
  export { allowedProps };
package/lib/Alert/v1/index.js CHANGED
@@ -88,6 +88,12 @@ let Alert = exports.Alert = (_dec = (0, _withDeterministicId.withDeterministicId
88
88
  ref = null;
89
89
  handleRef = el => {
90
90
  this.ref = el;
91
+ const {
92
+ elementRef
93
+ } = this.props;
94
+ if (typeof elementRef === 'function') {
95
+ elementRef(el);
96
+ }
91
97
  };
92
98
  handleTimeout = () => {
93
99
  if (this.props.timeout > 0) {
package/lib/Alert/v1/props.js CHANGED
@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
28
28
  * SOFTWARE.
29
29
  */
30
30
 
31
- const allowedProps = exports.allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon'];
31
+ const allowedProps = exports.allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon', 'elementRef'];
package/lib/Alert/v2/index.js CHANGED
@@ -84,6 +84,12 @@ let Alert = exports.Alert = (_dec = (0, _withDeterministicId.withDeterministicId
84
84
  ref = null;
85
85
  handleRef = el => {
86
86
  this.ref = el;
87
+ const {
88
+ elementRef
89
+ } = this.props;
90
+ if (typeof elementRef === 'function') {
91
+ elementRef(el);
92
+ }
87
93
  };
88
94
  handleTimeout = () => {
89
95
  if (this.props.timeout > 0) {
package/lib/Alert/v2/props.js CHANGED
@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
28
28
  * SOFTWARE.
29
29
  */
30
30
 
31
- const allowedProps = exports.allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon'];
31
+ const allowedProps = exports.allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon', 'elementRef'];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-alerts",
3
- "version": "11.7.4-snapshot-100",
3
+ "version": "11.7.4-snapshot-101",
4
4
  "description": "An alert component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -16,26 +16,26 @@
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.29.7",
18
18
  "keycode": "^2",
19
- "@instructure/console": "11.7.4-snapshot-100",
20
- "@instructure/shared-types": "11.7.4-snapshot-100",
21
- "@instructure/ui-buttons": "11.7.4-snapshot-100",
22
- "@instructure/emotion": "11.7.4-snapshot-100",
23
- "@instructure/ui-a11y-content": "11.7.4-snapshot-100",
24
- "@instructure/ui-motion": "11.7.4-snapshot-100",
25
- "@instructure/ui-react-utils": "11.7.4-snapshot-100",
26
- "@instructure/ui-themes": "11.7.4-snapshot-100",
27
- "@instructure/ui-view": "11.7.4-snapshot-100",
28
- "@instructure/ui-icons": "11.7.4-snapshot-100"
19
+ "@instructure/console": "11.7.4-snapshot-101",
20
+ "@instructure/emotion": "11.7.4-snapshot-101",
21
+ "@instructure/shared-types": "11.7.4-snapshot-101",
22
+ "@instructure/ui-a11y-content": "11.7.4-snapshot-101",
23
+ "@instructure/ui-buttons": "11.7.4-snapshot-101",
24
+ "@instructure/ui-icons": "11.7.4-snapshot-101",
25
+ "@instructure/ui-motion": "11.7.4-snapshot-101",
26
+ "@instructure/ui-react-utils": "11.7.4-snapshot-101",
27
+ "@instructure/ui-themes": "11.7.4-snapshot-101",
28
+ "@instructure/ui-view": "11.7.4-snapshot-101"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@testing-library/jest-dom": "^6.9.1",
32
32
  "@testing-library/react": "16.3.2",
33
33
  "@testing-library/user-event": "^14.6.1",
34
34
  "vitest": "^4.1.9",
35
- "@instructure/ui-babel-preset": "11.7.4-snapshot-100",
36
- "@instructure/ui-axe-check": "11.7.4-snapshot-100",
37
- "@instructure/ui-color-utils": "11.7.4-snapshot-100",
38
- "@instructure/ui-scripts": "11.7.4-snapshot-100"
35
+ "@instructure/ui-axe-check": "11.7.4-snapshot-101",
36
+ "@instructure/ui-color-utils": "11.7.4-snapshot-101",
37
+ "@instructure/ui-babel-preset": "11.7.4-snapshot-101",
38
+ "@instructure/ui-scripts": "11.7.4-snapshot-101"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "react": ">=18 <=19",
package/src/Alert/v1/index.tsx CHANGED
@@ -99,6 +99,10 @@ class Alert extends Component<AlertProps, AlertState> {
99
99
 
100
100
  handleRef = (el: Element | null) => {
101
101
  this.ref = el
102
+ const { elementRef } = this.props
103
+ if (typeof elementRef === 'function') {
104
+ elementRef(el)
105
+ }
102
106
  }
103
107
 
104
108
  handleTimeout = () => {
package/src/Alert/v1/props.ts CHANGED
@@ -109,6 +109,11 @@ type AlertOwnProps = {
109
109
  * An icon, or function that returns an icon. Setting it will override the variant's icon.
110
110
  */
111
111
  renderCustomIcon?: Renderable
112
+
113
+ /**
114
+ * provides a reference to the underlying html root element
115
+ */
116
+ elementRef?: (element: Element | null) => void
112
117
  }
113
118
 
114
119
  type PropKeys = keyof AlertOwnProps
@@ -137,7 +142,8 @@ const allowedProps: AllowedPropKeys = [
137
142
  'transition',
138
143
  'open',
139
144
  'hasShadow',
140
- 'renderCustomIcon'
145
+ 'renderCustomIcon',
146
+ 'elementRef'
141
147
  ]
142
148
 
143
149
  type AlertState = {
package/src/Alert/v2/index.tsx CHANGED
@@ -98,6 +98,10 @@ class Alert extends Component<AlertProps, AlertState> {
98
98
 
99
99
  handleRef = (el: Element | null) => {
100
100
  this.ref = el
101
+ const { elementRef } = this.props
102
+ if (typeof elementRef === 'function') {
103
+ elementRef(el)
104
+ }
101
105
  }
102
106
 
103
107
  handleTimeout = () => {
package/src/Alert/v2/props.ts CHANGED
@@ -110,6 +110,11 @@ type AlertOwnProps = {
110
110
  * An icon, or function that returns an icon. Setting it will override the variant's icon.
111
111
  */
112
112
  renderCustomIcon?: Renderable
113
+
114
+ /**
115
+ * provides a reference to the underlying html root element
116
+ */
117
+ elementRef?: (element: Element | null) => void
113
118
  }
114
119
 
115
120
  type PropKeys = keyof AlertOwnProps
@@ -138,7 +143,8 @@ const allowedProps: AllowedPropKeys = [
138
143
  'transition',
139
144
  'open',
140
145
  'hasShadow',
141
- 'renderCustomIcon'
146
+ 'renderCustomIcon',
147
+ 'elementRef'
142
148
  ]
143
149
 
144
150
  type AlertState = {