@instructure/ui-modal 10.2.3-snapshot-13 → 10.2.3-snapshot-15
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 +1 -1
- package/es/Modal/ModalBody/__new-tests__/ModalBody.test.js +3 -3
- package/es/Modal/__new-tests__/Modal.test.js +12 -12
- package/lib/Modal/ModalBody/__new-tests__/ModalBody.test.js +3 -3
- package/lib/Modal/__new-tests__/Modal.test.js +12 -12
- package/package.json +22 -22
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Modal/ModalBody/index.d.ts +2 -2
- package/types/Modal/ModalBody/index.d.ts.map +1 -1
- package/types/Modal/ModalFooter/index.d.ts +2 -2
- package/types/Modal/ModalFooter/index.d.ts.map +1 -1
- package/types/Modal/ModalHeader/index.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
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
|
-
## [10.2.3-snapshot-
|
|
6
|
+
## [10.2.3-snapshot-15](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-15) (2024-10-03)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-modal
|
|
9
9
|
|
|
@@ -53,7 +53,7 @@ describe('<ModalBody />', () => {
|
|
|
53
53
|
expect(bodyBackground).toBe(themeVariables.inverseBackground);
|
|
54
54
|
});
|
|
55
55
|
it('should set the same width and height as the parent when overflow is set to fit', async () => {
|
|
56
|
-
const _render3 = render(
|
|
56
|
+
const _render3 = render(/*#__PURE__*/React.createElement("div", {
|
|
57
57
|
style: {
|
|
58
58
|
width: '500px',
|
|
59
59
|
height: '600px'
|
|
@@ -81,7 +81,7 @@ describe('<ModalBody />', () => {
|
|
|
81
81
|
const props = {
|
|
82
82
|
[prop]: allowedProps[prop]
|
|
83
83
|
};
|
|
84
|
-
render(
|
|
84
|
+
render(/*#__PURE__*/React.createElement(ModalBody, props));
|
|
85
85
|
expect(consoleErrorSpy).not.toHaveBeenCalled();
|
|
86
86
|
consoleErrorSpy.mockRestore();
|
|
87
87
|
});
|
|
@@ -92,7 +92,7 @@ describe('<ModalBody />', () => {
|
|
|
92
92
|
const props = {
|
|
93
93
|
[prop]: 'NOT_ALLOWED_VALUE'
|
|
94
94
|
};
|
|
95
|
-
render(
|
|
95
|
+
render(/*#__PURE__*/React.createElement(ModalBody, props));
|
|
96
96
|
expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
|
|
97
97
|
consoleErrorSpy.mockRestore();
|
|
98
98
|
});
|
|
@@ -65,7 +65,7 @@ describe('<Modal />', () => {
|
|
|
65
65
|
it('should apply theme overrides when open', async () => {
|
|
66
66
|
const testFont = 'test-font';
|
|
67
67
|
const bodyText = 'Modal-body-text';
|
|
68
|
-
const _render2 = render(
|
|
68
|
+
const _render2 = render(/*#__PURE__*/React.createElement(Modal, {
|
|
69
69
|
open: true,
|
|
70
70
|
size: "small",
|
|
71
71
|
label: "Modal Dialog",
|
|
@@ -96,7 +96,7 @@ describe('<Modal />', () => {
|
|
|
96
96
|
expect(constrain).toBeInTheDocument();
|
|
97
97
|
});
|
|
98
98
|
it("should not inherit its parent's font color", async () => {
|
|
99
|
-
const _render4 = render(
|
|
99
|
+
const _render4 = render(/*#__PURE__*/React.createElement("div", {
|
|
100
100
|
style: {
|
|
101
101
|
color: 'rgb(255, 255, 255)'
|
|
102
102
|
}
|
|
@@ -137,7 +137,7 @@ describe('<Modal />', () => {
|
|
|
137
137
|
});
|
|
138
138
|
it('should handle null children', async () => {
|
|
139
139
|
const bodyText = 'Modal-body-text';
|
|
140
|
-
const _render6 = render(
|
|
140
|
+
const _render6 = render(/*#__PURE__*/React.createElement(Modal, {
|
|
141
141
|
open: true,
|
|
142
142
|
label: "Modal Dialog",
|
|
143
143
|
shouldReturnFocus: false
|
|
@@ -161,7 +161,7 @@ describe('<Modal />', () => {
|
|
|
161
161
|
const onEnter = vi.fn();
|
|
162
162
|
const onEntering = vi.fn();
|
|
163
163
|
const onEntered = vi.fn();
|
|
164
|
-
const _render8 = render(
|
|
164
|
+
const _render8 = render(/*#__PURE__*/React.createElement(Modal, {
|
|
165
165
|
open: true,
|
|
166
166
|
onEnter: onEnter,
|
|
167
167
|
onEntering: onEntering,
|
|
@@ -181,7 +181,7 @@ describe('<Modal />', () => {
|
|
|
181
181
|
});
|
|
182
182
|
it('should support onOpen prop', async () => {
|
|
183
183
|
const onOpen = vi.fn();
|
|
184
|
-
const _render9 = render(
|
|
184
|
+
const _render9 = render(/*#__PURE__*/React.createElement(Modal, {
|
|
185
185
|
open: true,
|
|
186
186
|
onOpen: onOpen,
|
|
187
187
|
label: "Modal Dialog",
|
|
@@ -196,7 +196,7 @@ describe('<Modal />', () => {
|
|
|
196
196
|
});
|
|
197
197
|
it('should support onClose prop', async () => {
|
|
198
198
|
const onClose = vi.fn();
|
|
199
|
-
const _render10 = render(
|
|
199
|
+
const _render10 = render(/*#__PURE__*/React.createElement(Modal, {
|
|
200
200
|
open: true,
|
|
201
201
|
onClose: onClose,
|
|
202
202
|
label: "Modal Dialog",
|
|
@@ -206,7 +206,7 @@ describe('<Modal />', () => {
|
|
|
206
206
|
rerender = _render10.rerender;
|
|
207
207
|
const dialog = await findByRole('dialog');
|
|
208
208
|
expect(dialog).toBeInTheDocument();
|
|
209
|
-
rerender(
|
|
209
|
+
rerender(/*#__PURE__*/React.createElement(Modal, {
|
|
210
210
|
open: false,
|
|
211
211
|
onClose: onClose,
|
|
212
212
|
label: "Modal Dialog",
|
|
@@ -218,7 +218,7 @@ describe('<Modal />', () => {
|
|
|
218
218
|
});
|
|
219
219
|
it('should dismiss when overlay clicked by default', async () => {
|
|
220
220
|
const onDismiss = vi.fn();
|
|
221
|
-
const _render11 = render(
|
|
221
|
+
const _render11 = render(/*#__PURE__*/React.createElement(Modal, {
|
|
222
222
|
open: true,
|
|
223
223
|
onDismiss: onDismiss,
|
|
224
224
|
label: "Modal Dialog",
|
|
@@ -235,7 +235,7 @@ describe('<Modal />', () => {
|
|
|
235
235
|
it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
|
|
236
236
|
const onDismiss = vi.fn();
|
|
237
237
|
const onClickOuter = vi.fn();
|
|
238
|
-
const _render12 = render(
|
|
238
|
+
const _render12 = render(/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
|
|
239
239
|
"data-testid": "outer-element",
|
|
240
240
|
onClick: onClickOuter
|
|
241
241
|
}, "for dismiss"), /*#__PURE__*/React.createElement(Modal, {
|
|
@@ -294,7 +294,7 @@ describe('<Modal />', () => {
|
|
|
294
294
|
let headerRef = null;
|
|
295
295
|
let bodyRef = null;
|
|
296
296
|
let footerRef = null;
|
|
297
|
-
const _render16 = render(
|
|
297
|
+
const _render16 = render(/*#__PURE__*/React.createElement(Modal, {
|
|
298
298
|
open: true,
|
|
299
299
|
label: "Dark Modal",
|
|
300
300
|
shouldReturnFocus: false,
|
|
@@ -315,7 +315,7 @@ describe('<Modal />', () => {
|
|
|
315
315
|
});
|
|
316
316
|
it('should pass overflow to Modal.Body', async () => {
|
|
317
317
|
let bodyRef = null;
|
|
318
|
-
const _render17 = render(
|
|
318
|
+
const _render17 = render(/*#__PURE__*/React.createElement(Modal, {
|
|
319
319
|
open: true,
|
|
320
320
|
label: "Modal",
|
|
321
321
|
shouldReturnFocus: false,
|
|
@@ -369,7 +369,7 @@ describe('<Modal />', () => {
|
|
|
369
369
|
});
|
|
370
370
|
});
|
|
371
371
|
it('should take a prop for finding default focus', async () => {
|
|
372
|
-
const _render19 = render(
|
|
372
|
+
const _render19 = render(/*#__PURE__*/React.createElement(ModalExample, {
|
|
373
373
|
open: true,
|
|
374
374
|
label: "A Modal",
|
|
375
375
|
defaultFocusElement: () => document.getElementById('input-one')
|
|
@@ -55,7 +55,7 @@ describe('<ModalBody />', () => {
|
|
|
55
55
|
expect(bodyBackground).toBe(themeVariables.inverseBackground);
|
|
56
56
|
});
|
|
57
57
|
it('should set the same width and height as the parent when overflow is set to fit', async () => {
|
|
58
|
-
const _render3 = (0, _react2.render)(
|
|
58
|
+
const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", {
|
|
59
59
|
style: {
|
|
60
60
|
width: '500px',
|
|
61
61
|
height: '600px'
|
|
@@ -83,7 +83,7 @@ describe('<ModalBody />', () => {
|
|
|
83
83
|
const props = {
|
|
84
84
|
[prop]: allowedProps[prop]
|
|
85
85
|
};
|
|
86
|
-
(0, _react2.render)(
|
|
86
|
+
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ModalBody, props));
|
|
87
87
|
expect(consoleErrorSpy).not.toHaveBeenCalled();
|
|
88
88
|
consoleErrorSpy.mockRestore();
|
|
89
89
|
});
|
|
@@ -94,7 +94,7 @@ describe('<ModalBody />', () => {
|
|
|
94
94
|
const props = {
|
|
95
95
|
[prop]: 'NOT_ALLOWED_VALUE'
|
|
96
96
|
};
|
|
97
|
-
(0, _react2.render)(
|
|
97
|
+
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ModalBody, props));
|
|
98
98
|
expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
|
|
99
99
|
consoleErrorSpy.mockRestore();
|
|
100
100
|
});
|
|
@@ -67,7 +67,7 @@ describe('<Modal />', () => {
|
|
|
67
67
|
it('should apply theme overrides when open', async () => {
|
|
68
68
|
const testFont = 'test-font';
|
|
69
69
|
const bodyText = 'Modal-body-text';
|
|
70
|
-
const _render2 = (0, _react2.render)(
|
|
70
|
+
const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
|
|
71
71
|
open: true,
|
|
72
72
|
size: "small",
|
|
73
73
|
label: "Modal Dialog",
|
|
@@ -98,7 +98,7 @@ describe('<Modal />', () => {
|
|
|
98
98
|
expect(constrain).toBeInTheDocument();
|
|
99
99
|
});
|
|
100
100
|
it("should not inherit its parent's font color", async () => {
|
|
101
|
-
const _render4 = (0, _react2.render)(
|
|
101
|
+
const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", {
|
|
102
102
|
style: {
|
|
103
103
|
color: 'rgb(255, 255, 255)'
|
|
104
104
|
}
|
|
@@ -139,7 +139,7 @@ describe('<Modal />', () => {
|
|
|
139
139
|
});
|
|
140
140
|
it('should handle null children', async () => {
|
|
141
141
|
const bodyText = 'Modal-body-text';
|
|
142
|
-
const _render6 = (0, _react2.render)(
|
|
142
|
+
const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
|
|
143
143
|
open: true,
|
|
144
144
|
label: "Modal Dialog",
|
|
145
145
|
shouldReturnFocus: false
|
|
@@ -163,7 +163,7 @@ describe('<Modal />', () => {
|
|
|
163
163
|
const onEnter = _vitest.vi.fn();
|
|
164
164
|
const onEntering = _vitest.vi.fn();
|
|
165
165
|
const onEntered = _vitest.vi.fn();
|
|
166
|
-
const _render8 = (0, _react2.render)(
|
|
166
|
+
const _render8 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
|
|
167
167
|
open: true,
|
|
168
168
|
onEnter: onEnter,
|
|
169
169
|
onEntering: onEntering,
|
|
@@ -183,7 +183,7 @@ describe('<Modal />', () => {
|
|
|
183
183
|
});
|
|
184
184
|
it('should support onOpen prop', async () => {
|
|
185
185
|
const onOpen = _vitest.vi.fn();
|
|
186
|
-
const _render9 = (0, _react2.render)(
|
|
186
|
+
const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
|
|
187
187
|
open: true,
|
|
188
188
|
onOpen: onOpen,
|
|
189
189
|
label: "Modal Dialog",
|
|
@@ -198,7 +198,7 @@ describe('<Modal />', () => {
|
|
|
198
198
|
});
|
|
199
199
|
it('should support onClose prop', async () => {
|
|
200
200
|
const onClose = _vitest.vi.fn();
|
|
201
|
-
const _render10 = (0, _react2.render)(
|
|
201
|
+
const _render10 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
|
|
202
202
|
open: true,
|
|
203
203
|
onClose: onClose,
|
|
204
204
|
label: "Modal Dialog",
|
|
@@ -208,7 +208,7 @@ describe('<Modal />', () => {
|
|
|
208
208
|
rerender = _render10.rerender;
|
|
209
209
|
const dialog = await findByRole('dialog');
|
|
210
210
|
expect(dialog).toBeInTheDocument();
|
|
211
|
-
rerender(
|
|
211
|
+
rerender(/*#__PURE__*/_react.default.createElement(_index.Modal, {
|
|
212
212
|
open: false,
|
|
213
213
|
onClose: onClose,
|
|
214
214
|
label: "Modal Dialog",
|
|
@@ -220,7 +220,7 @@ describe('<Modal />', () => {
|
|
|
220
220
|
});
|
|
221
221
|
it('should dismiss when overlay clicked by default', async () => {
|
|
222
222
|
const onDismiss = _vitest.vi.fn();
|
|
223
|
-
const _render11 = (0, _react2.render)(
|
|
223
|
+
const _render11 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
|
|
224
224
|
open: true,
|
|
225
225
|
onDismiss: onDismiss,
|
|
226
226
|
label: "Modal Dialog",
|
|
@@ -237,7 +237,7 @@ describe('<Modal />', () => {
|
|
|
237
237
|
it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
|
|
238
238
|
const onDismiss = _vitest.vi.fn();
|
|
239
239
|
const onClickOuter = _vitest.vi.fn();
|
|
240
|
-
const _render12 = (0, _react2.render)(
|
|
240
|
+
const _render12 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
|
|
241
241
|
"data-testid": "outer-element",
|
|
242
242
|
onClick: onClickOuter
|
|
243
243
|
}, "for dismiss"), /*#__PURE__*/_react.default.createElement(_index.Modal, {
|
|
@@ -296,7 +296,7 @@ describe('<Modal />', () => {
|
|
|
296
296
|
let headerRef = null;
|
|
297
297
|
let bodyRef = null;
|
|
298
298
|
let footerRef = null;
|
|
299
|
-
const _render16 = (0, _react2.render)(
|
|
299
|
+
const _render16 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
|
|
300
300
|
open: true,
|
|
301
301
|
label: "Dark Modal",
|
|
302
302
|
shouldReturnFocus: false,
|
|
@@ -317,7 +317,7 @@ describe('<Modal />', () => {
|
|
|
317
317
|
});
|
|
318
318
|
it('should pass overflow to Modal.Body', async () => {
|
|
319
319
|
let bodyRef = null;
|
|
320
|
-
const _render17 = (0, _react2.render)(
|
|
320
|
+
const _render17 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
|
|
321
321
|
open: true,
|
|
322
322
|
label: "Modal",
|
|
323
323
|
shouldReturnFocus: false,
|
|
@@ -371,7 +371,7 @@ describe('<Modal />', () => {
|
|
|
371
371
|
});
|
|
372
372
|
});
|
|
373
373
|
it('should take a prop for finding default focus', async () => {
|
|
374
|
-
const _render19 = (0, _react2.render)(
|
|
374
|
+
const _render19 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(ModalExample, {
|
|
375
375
|
open: true,
|
|
376
376
|
label: "A Modal",
|
|
377
377
|
defaultFocusElement: () => document.getElementById('input-one')
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-modal",
|
|
3
|
-
"version": "10.2.3-snapshot-
|
|
3
|
+
"version": "10.2.3-snapshot-15",
|
|
4
4
|
"description": "A component for displaying content in a dialog overlay",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -23,35 +23,35 @@
|
|
|
23
23
|
},
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@babel/runtime": "^7.
|
|
27
|
-
"@instructure/console": "10.2.3-snapshot-
|
|
28
|
-
"@instructure/emotion": "10.2.3-snapshot-
|
|
29
|
-
"@instructure/shared-types": "10.2.3-snapshot-
|
|
30
|
-
"@instructure/ui-buttons": "10.2.3-snapshot-
|
|
31
|
-
"@instructure/ui-dialog": "10.2.3-snapshot-
|
|
32
|
-
"@instructure/ui-dom-utils": "10.2.3-snapshot-
|
|
33
|
-
"@instructure/ui-motion": "10.2.3-snapshot-
|
|
34
|
-
"@instructure/ui-overlays": "10.2.3-snapshot-
|
|
35
|
-
"@instructure/ui-portal": "10.2.3-snapshot-
|
|
36
|
-
"@instructure/ui-prop-types": "10.2.3-snapshot-
|
|
37
|
-
"@instructure/ui-react-utils": "10.2.3-snapshot-
|
|
38
|
-
"@instructure/ui-testable": "10.2.3-snapshot-
|
|
39
|
-
"@instructure/ui-utils": "10.2.3-snapshot-
|
|
40
|
-
"@instructure/ui-view": "10.2.3-snapshot-
|
|
26
|
+
"@babel/runtime": "^7.25.6",
|
|
27
|
+
"@instructure/console": "10.2.3-snapshot-15",
|
|
28
|
+
"@instructure/emotion": "10.2.3-snapshot-15",
|
|
29
|
+
"@instructure/shared-types": "10.2.3-snapshot-15",
|
|
30
|
+
"@instructure/ui-buttons": "10.2.3-snapshot-15",
|
|
31
|
+
"@instructure/ui-dialog": "10.2.3-snapshot-15",
|
|
32
|
+
"@instructure/ui-dom-utils": "10.2.3-snapshot-15",
|
|
33
|
+
"@instructure/ui-motion": "10.2.3-snapshot-15",
|
|
34
|
+
"@instructure/ui-overlays": "10.2.3-snapshot-15",
|
|
35
|
+
"@instructure/ui-portal": "10.2.3-snapshot-15",
|
|
36
|
+
"@instructure/ui-prop-types": "10.2.3-snapshot-15",
|
|
37
|
+
"@instructure/ui-react-utils": "10.2.3-snapshot-15",
|
|
38
|
+
"@instructure/ui-testable": "10.2.3-snapshot-15",
|
|
39
|
+
"@instructure/ui-utils": "10.2.3-snapshot-15",
|
|
40
|
+
"@instructure/ui-view": "10.2.3-snapshot-15",
|
|
41
41
|
"prop-types": "^15.8.1"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": ">=16.8 <=18"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@instructure/ui-babel-preset": "10.2.3-snapshot-
|
|
48
|
-
"@instructure/ui-color-utils": "10.2.3-snapshot-
|
|
49
|
-
"@instructure/ui-position": "10.2.3-snapshot-
|
|
50
|
-
"@instructure/ui-themes": "10.2.3-snapshot-
|
|
47
|
+
"@instructure/ui-babel-preset": "10.2.3-snapshot-15",
|
|
48
|
+
"@instructure/ui-color-utils": "10.2.3-snapshot-15",
|
|
49
|
+
"@instructure/ui-position": "10.2.3-snapshot-15",
|
|
50
|
+
"@instructure/ui-themes": "10.2.3-snapshot-15",
|
|
51
51
|
"@testing-library/jest-dom": "^6.4.6",
|
|
52
|
-
"@testing-library/react": "^
|
|
52
|
+
"@testing-library/react": "^16.0.1",
|
|
53
53
|
"@testing-library/user-event": "^14.5.2",
|
|
54
|
-
"vitest": "^2.
|
|
54
|
+
"vitest": "^2.1.1"
|
|
55
55
|
},
|
|
56
56
|
"publishConfig": {
|
|
57
57
|
"access": "public"
|