@instructure/ui-dialog 10.16.1-snapshot-0 → 10.16.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Dialog/__new-tests__/Dialog.test.js +105 -73
  3. package/es/Dialog/index.js +7 -4
  4. package/lib/Dialog/__new-tests__/Dialog.test.js +105 -74
  5. package/lib/Dialog/index.js +7 -5
  6. package/package.json +9 -9
  7. package/src/Dialog/__new-tests__/Dialog.test.tsx +1 -1
  8. package/src/Dialog/index.tsx +1 -1
  9. package/tsconfig.build.tsbuildinfo +1 -1
  10. package/types/Dialog/index.d.ts +2 -2
  11. package/types/Dialog/index.d.ts.map +1 -1
package/lib/Dialog/__new-tests__/Dialog.test.js CHANGED
@@ -1,14 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
4
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
6
- var _react = _interopRequireWildcard(require("react"));
5
+ var _react = require("react");
7
6
  var _react2 = require("@testing-library/react");
8
7
  var _vitest = require("vitest");
9
8
  var _userEvent = require("@testing-library/user-event");
10
9
  require("@testing-library/jest-dom");
11
10
  var _index = require("../index");
11
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
12
12
  var _button, _div, _div2, _DialogExample, _DialogExample2, _DialogExample3, _div3, _div4, _DialogExample4, _DialogExample5, _DialogExample6, _DialogExample7, _DialogExample8;
13
13
  /*
14
14
  * The MIT License (MIT)
@@ -41,7 +41,12 @@ const renderDialog = props => {
41
41
  label: TEST_LABEL,
42
42
  ...props
43
43
  };
44
- return (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Dialog, allProps, _button || (_button = /*#__PURE__*/_react.default.createElement("button", null, TEST_TEXT))));
44
+ return (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Dialog, {
45
+ ...allProps,
46
+ children: _button || (_button = (0, _jsxRuntime.jsx)("button", {
47
+ children: TEST_TEXT
48
+ }))
49
+ }));
45
50
  };
46
51
  const DialogExample = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
47
52
  const inputRef = (0, _react.useRef)(null);
@@ -55,23 +60,28 @@ const DialogExample = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
55
60
  focusDialog: () => dialogRef.current.focus(),
56
61
  blurDialog: () => dialogRef.current.blur()
57
62
  }));
58
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
59
- "data-testid": "input-trigger",
60
- type: "text",
61
- ref: inputRef
62
- }), /*#__PURE__*/_react.default.createElement(_index.Dialog, Object.assign({
63
- shouldContainFocus: true,
64
- shouldReturnFocus: true,
65
- label: TEST_LABEL
66
- }, props, {
67
- ref: dialogRef
68
- }), props.children || _div || (_div = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
69
- type: "text",
70
- "data-testid": "input-one"
71
- }), /*#__PURE__*/_react.default.createElement("input", {
72
- type: "text",
73
- "data-testid": "input-two"
74
- })))));
63
+ return (0, _jsxRuntime.jsxs)("div", {
64
+ children: [(0, _jsxRuntime.jsx)("input", {
65
+ "data-testid": "input-trigger",
66
+ type: "text",
67
+ ref: inputRef
68
+ }), (0, _jsxRuntime.jsx)(_index.Dialog, {
69
+ shouldContainFocus: true,
70
+ shouldReturnFocus: true,
71
+ label: TEST_LABEL,
72
+ ...props,
73
+ ref: dialogRef,
74
+ children: props.children || _div || (_div = (0, _jsxRuntime.jsxs)("div", {
75
+ children: [(0, _jsxRuntime.jsx)("input", {
76
+ type: "text",
77
+ "data-testid": "input-one"
78
+ }), (0, _jsxRuntime.jsx)("input", {
79
+ type: "text",
80
+ "data-testid": "input-two"
81
+ })]
82
+ }))
83
+ })]
84
+ });
75
85
  });
76
86
  DialogExample.displayName = 'DialogExample';
77
87
  const NestedDialogExample = props => {
@@ -80,22 +90,31 @@ const NestedDialogExample = props => {
80
90
  nestedOpen = _useState2[0],
81
91
  setNestedOpen = _useState2[1];
82
92
  const handleTriggerClick = () => setNestedOpen(true);
83
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.Dialog, Object.assign({
84
- open: true,
85
- shouldReturnFocus: true,
86
- label: TEST_LABEL
87
- }, props), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
88
- onClick: handleTriggerClick,
89
- type: "text",
90
- "data-testid": "nested-input-one"
91
- }), /*#__PURE__*/_react.default.createElement("input", {
92
- onClick: handleTriggerClick,
93
- type: "text",
94
- "data-testid": "nested-input-two"
95
- })), /*#__PURE__*/_react.default.createElement(_index.Dialog, {
96
- open: nestedOpen,
97
- label: TEST_LABEL
98
- }, TEST_TEXT))));
93
+ return (0, _jsxRuntime.jsx)("div", {
94
+ children: (0, _jsxRuntime.jsx)(_index.Dialog, {
95
+ open: true,
96
+ shouldReturnFocus: true,
97
+ label: TEST_LABEL,
98
+ ...props,
99
+ children: (0, _jsxRuntime.jsxs)("div", {
100
+ children: [(0, _jsxRuntime.jsxs)("div", {
101
+ children: [(0, _jsxRuntime.jsx)("input", {
102
+ onClick: handleTriggerClick,
103
+ type: "text",
104
+ "data-testid": "nested-input-one"
105
+ }), (0, _jsxRuntime.jsx)("input", {
106
+ onClick: handleTriggerClick,
107
+ type: "text",
108
+ "data-testid": "nested-input-two"
109
+ })]
110
+ }), (0, _jsxRuntime.jsx)(_index.Dialog, {
111
+ open: nestedOpen,
112
+ label: TEST_LABEL,
113
+ children: TEST_TEXT
114
+ })]
115
+ })
116
+ })
117
+ });
99
118
  };
100
119
  NestedDialogExample.displayName = 'NestedDialogExample';
101
120
  describe('<Dialog />', () => {
@@ -167,13 +186,17 @@ describe('<Dialog />', () => {
167
186
  });
168
187
  describe('managed focus', () => {
169
188
  it('should provide focus method', async () => {
170
- const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DialogExample, {
171
- open: true,
172
- contentElement: () => getByTestId('non-tabbable')
173
- }, TEST_TEXT), _div2 || (_div2 = /*#__PURE__*/_react.default.createElement("div", {
174
- tabIndex: -1,
175
- "data-testid": "non-tabbable"
176
- }, TEST_TEXT)))),
189
+ const _render = (0, _react2.render)((0, _jsxRuntime.jsxs)("div", {
190
+ children: [(0, _jsxRuntime.jsx)(DialogExample, {
191
+ open: true,
192
+ contentElement: () => getByTestId('non-tabbable'),
193
+ children: TEST_TEXT
194
+ }), _div2 || (_div2 = (0, _jsxRuntime.jsx)("div", {
195
+ tabIndex: -1,
196
+ "data-testid": "non-tabbable",
197
+ children: TEST_TEXT
198
+ }))]
199
+ })),
177
200
  getByTestId = _render.getByTestId;
178
201
  const nonTabbableContent = getByTestId('non-tabbable');
179
202
  _userEvent.userEvent.tab();
@@ -184,7 +207,7 @@ describe('<Dialog />', () => {
184
207
  it('should warn when trying to focus or blur a closed dialog', () => {
185
208
  const consoleError = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
186
209
  let ref;
187
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DialogExample, {
210
+ (0, _react2.render)((0, _jsxRuntime.jsx)(DialogExample, {
188
211
  open: false,
189
212
  ref: el => ref = el
190
213
  }));
@@ -195,7 +218,7 @@ describe('<Dialog />', () => {
195
218
  consoleError.mockRestore();
196
219
  });
197
220
  it('should focus the first tabbable element by default', async () => {
198
- const _render2 = (0, _react2.render)(_DialogExample || (_DialogExample = /*#__PURE__*/_react.default.createElement(DialogExample, {
221
+ const _render2 = (0, _react2.render)(_DialogExample || (_DialogExample = (0, _jsxRuntime.jsx)(DialogExample, {
199
222
  open: true
200
223
  }))),
201
224
  getByTestId = _render2.getByTestId;
@@ -205,7 +228,7 @@ describe('<Dialog />', () => {
205
228
  });
206
229
  });
207
230
  it('should focus the first tabbable element when open prop becomes true', async () => {
208
- const _render3 = (0, _react2.render)(_DialogExample2 || (_DialogExample2 = /*#__PURE__*/_react.default.createElement(DialogExample, {
231
+ const _render3 = (0, _react2.render)(_DialogExample2 || (_DialogExample2 = (0, _jsxRuntime.jsx)(DialogExample, {
209
232
  open: false
210
233
  }))),
211
234
  rerender = _render3.rerender,
@@ -214,7 +237,7 @@ describe('<Dialog />', () => {
214
237
  await (0, _react2.waitFor)(() => {
215
238
  expect(document.activeElement).toBe(inputTrigger);
216
239
  });
217
- rerender(_DialogExample3 || (_DialogExample3 = /*#__PURE__*/_react.default.createElement(DialogExample, {
240
+ rerender(_DialogExample3 || (_DialogExample3 = (0, _jsxRuntime.jsx)(DialogExample, {
218
241
  open: true
219
242
  })));
220
243
  const inputOne = getByTestId('input-one');
@@ -223,7 +246,7 @@ describe('<Dialog />', () => {
223
246
  });
224
247
  });
225
248
  it('should take a prop for finding default focus', async () => {
226
- const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DialogExample, {
249
+ const _render4 = (0, _react2.render)((0, _jsxRuntime.jsx)(DialogExample, {
227
250
  open: true,
228
251
  defaultFocusElement: () => getByTestId('input-two')
229
252
  })),
@@ -234,13 +257,15 @@ describe('<Dialog />', () => {
234
257
  });
235
258
  });
236
259
  it('should still focus the defaultFocusElement when it is focusable but not tabbable', async () => {
237
- const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DialogExample, {
260
+ const _render5 = (0, _react2.render)((0, _jsxRuntime.jsx)(DialogExample, {
238
261
  open: true,
239
- defaultFocusElement: () => getByTestId('non-tabbable')
240
- }, _div3 || (_div3 = /*#__PURE__*/_react.default.createElement("div", {
241
- tabIndex: -1,
242
- "data-testid": "non-tabbable"
243
- }, TEST_TEXT)))),
262
+ defaultFocusElement: () => getByTestId('non-tabbable'),
263
+ children: _div3 || (_div3 = (0, _jsxRuntime.jsx)("div", {
264
+ tabIndex: -1,
265
+ "data-testid": "non-tabbable",
266
+ children: TEST_TEXT
267
+ }))
268
+ })),
244
269
  getByTestId = _render5.getByTestId;
245
270
  const nonTabbableContent = getByTestId('non-tabbable');
246
271
  await (0, _react2.waitFor)(() => {
@@ -248,13 +273,17 @@ describe('<Dialog />', () => {
248
273
  });
249
274
  });
250
275
  it('should focus the contentElement by default if focusable and no defaultFocusElement is provided', async () => {
251
- const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DialogExample, {
252
- open: true,
253
- contentElement: () => getByTestId('non-tabbable')
254
- }, TEST_TEXT), _div4 || (_div4 = /*#__PURE__*/_react.default.createElement("div", {
255
- tabIndex: -1,
256
- "data-testid": "non-tabbable"
257
- }, TEST_TEXT)))),
276
+ const _render6 = (0, _react2.render)((0, _jsxRuntime.jsxs)("div", {
277
+ children: [(0, _jsxRuntime.jsx)(DialogExample, {
278
+ open: true,
279
+ contentElement: () => getByTestId('non-tabbable'),
280
+ children: TEST_TEXT
281
+ }), _div4 || (_div4 = (0, _jsxRuntime.jsx)("div", {
282
+ tabIndex: -1,
283
+ "data-testid": "non-tabbable",
284
+ children: TEST_TEXT
285
+ }))]
286
+ })),
258
287
  getByTestId = _render6.getByTestId;
259
288
  const nonTabbableContent = getByTestId('non-tabbable');
260
289
  await (0, _react2.waitFor)(() => {
@@ -262,34 +291,36 @@ describe('<Dialog />', () => {
262
291
  });
263
292
  });
264
293
  it('should focus the document body if there is no defaultFocusElement, tabbable elements, or focusable contentElement', async () => {
265
- const _render7 = (0, _react2.render)(_DialogExample4 || (_DialogExample4 = /*#__PURE__*/_react.default.createElement(DialogExample, {
266
- open: false
267
- }, TEST_TEXT))),
294
+ const _render7 = (0, _react2.render)(_DialogExample4 || (_DialogExample4 = (0, _jsxRuntime.jsx)(DialogExample, {
295
+ open: false,
296
+ children: TEST_TEXT
297
+ }))),
268
298
  rerender = _render7.rerender,
269
299
  getByTestId = _render7.getByTestId;
270
300
  const inputTrigger = getByTestId('input-trigger');
271
301
  inputTrigger.focus();
272
- rerender(_DialogExample5 || (_DialogExample5 = /*#__PURE__*/_react.default.createElement(DialogExample, {
273
- open: true
274
- }, TEST_TEXT)));
302
+ rerender(_DialogExample5 || (_DialogExample5 = (0, _jsxRuntime.jsx)(DialogExample, {
303
+ open: true,
304
+ children: TEST_TEXT
305
+ })));
275
306
  await (0, _react2.waitFor)(() => {
276
307
  expect(document.activeElement).toBe(document.body);
277
308
  });
278
309
  });
279
310
  it('should return focus', async () => {
280
- const _render8 = (0, _react2.render)(_DialogExample6 || (_DialogExample6 = /*#__PURE__*/_react.default.createElement(DialogExample, {
311
+ const _render8 = (0, _react2.render)(_DialogExample6 || (_DialogExample6 = (0, _jsxRuntime.jsx)(DialogExample, {
281
312
  open: false
282
313
  }))),
283
314
  rerender = _render8.rerender,
284
315
  getByTestId = _render8.getByTestId;
285
316
  expect(document.activeElement).toBe(getByTestId('input-trigger'));
286
- rerender(_DialogExample7 || (_DialogExample7 = /*#__PURE__*/_react.default.createElement(DialogExample, {
317
+ rerender(_DialogExample7 || (_DialogExample7 = (0, _jsxRuntime.jsx)(DialogExample, {
287
318
  open: true
288
319
  })));
289
320
  await (0, _react2.waitFor)(() => {
290
321
  expect(document.activeElement).toBe(getByTestId('input-one'));
291
322
  });
292
- rerender(_DialogExample8 || (_DialogExample8 = /*#__PURE__*/_react.default.createElement(DialogExample, {
323
+ rerender(_DialogExample8 || (_DialogExample8 = (0, _jsxRuntime.jsx)(DialogExample, {
293
324
  open: false
294
325
  })));
295
326
  await (0, _react2.waitFor)(() => {
@@ -299,7 +330,7 @@ describe('<Dialog />', () => {
299
330
  describe('when focus leaves the first and last tabbable', () => {
300
331
  it(`should NOT call onBlur when shouldContainFocus=true and tab pressing last tabbable`, async () => {
301
332
  const onBlur = _vitest.vi.fn();
302
- const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DialogExample, {
333
+ const _render9 = (0, _react2.render)((0, _jsxRuntime.jsx)(DialogExample, {
303
334
  open: true,
304
335
  onBlur: onBlur,
305
336
  shouldContainFocus: true,
@@ -319,7 +350,7 @@ describe('<Dialog />', () => {
319
350
  });
320
351
  it('should NOT call onBlur when shouldContainFocus=true and Shift+Tab pressing first tabbable', async () => {
321
352
  const onBlur = _vitest.vi.fn();
322
- const _render10 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DialogExample, {
353
+ const _render10 = (0, _react2.render)((0, _jsxRuntime.jsx)(DialogExample, {
323
354
  open: true,
324
355
  shouldContainFocus: true,
325
356
  defaultFocusElement: () => getByTestId('input-one'),
@@ -343,7 +374,7 @@ describe('<Dialog />', () => {
343
374
  });
344
375
  it('should call onBlur when shouldContainFocus=false and tab pressing last tabbable', async () => {
345
376
  const onBlur = _vitest.vi.fn();
346
- const _render11 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DialogExample, {
377
+ const _render11 = (0, _react2.render)((0, _jsxRuntime.jsx)(DialogExample, {
347
378
  open: true,
348
379
  shouldContainFocus: false,
349
380
  defaultFocusElement: () => getByTestId('input-two'),
@@ -365,7 +396,7 @@ describe('<Dialog />', () => {
365
396
  });
366
397
  it('should call onBlur when shouldContainFocus=false and pressing Shift+Tab on the first tabbable', async () => {
367
398
  const onBlur = _vitest.vi.fn();
368
- const _render12 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DialogExample, {
399
+ const _render12 = (0, _react2.render)((0, _jsxRuntime.jsx)(DialogExample, {
369
400
  open: true,
370
401
  shouldContainFocus: false,
371
402
  defaultFocusElement: () => getByTestId('input-one'),
package/lib/Dialog/index.js CHANGED
@@ -1,13 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.Dialog = void 0;
9
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _react = _interopRequireWildcard(require("react"));
9
+ var _react = require("react");
11
10
  var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
12
11
  var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
13
12
  var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
@@ -15,6 +14,7 @@ var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnima
15
14
  var _console = require("@instructure/console");
16
15
  var _FocusRegionManager = require("@instructure/ui-a11y-utils/lib/FocusRegionManager.js");
17
16
  var _props = require("./props");
17
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
18
  const _excluded = ["open", "contentElement"],
19
19
  _excluded2 = ["open", "contentElement"];
20
20
  /*
@@ -139,12 +139,14 @@ class Dialog extends _react.Component {
139
139
 
140
140
  // In case the HTML role attribute is explicitly passed, use props.role
141
141
  const role = this.props.role || (this.props.label ? 'dialog' : void 0);
142
- return this.props.open ? /*#__PURE__*/_react.default.createElement(ElementType, Object.assign({}, (0, _omitProps.omitProps)(this.props, Dialog.allowedProps), {
142
+ return this.props.open ? (0, _jsxRuntime.jsx)(ElementType, {
143
+ ...(0, _omitProps.omitProps)(this.props, Dialog.allowedProps),
143
144
  role: role,
144
145
  "aria-label": this.props.label,
145
146
  className: this.props.className,
146
- ref: this.getRef
147
- }), this.props.children) : null;
147
+ ref: this.getRef,
148
+ children: this.props.children
149
+ }) : null;
148
150
  }
149
151
  }
150
152
  exports.Dialog = Dialog;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-dialog",
3
- "version": "10.16.1-snapshot-0",
3
+ "version": "10.16.1",
4
4
  "description": "A utility component for managing keyboard accessibility and screen reader behavior",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,17 +24,17 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.26.0",
27
- "@instructure/shared-types": "10.16.1-snapshot-0",
28
- "@instructure/ui-a11y-utils": "10.16.1-snapshot-0",
29
- "@instructure/ui-dom-utils": "10.16.1-snapshot-0",
30
- "@instructure/ui-react-utils": "10.16.1-snapshot-0",
31
- "@instructure/ui-testable": "10.16.1-snapshot-0",
27
+ "@instructure/shared-types": "10.16.1",
28
+ "@instructure/ui-a11y-utils": "10.16.1",
29
+ "@instructure/ui-dom-utils": "10.16.1",
30
+ "@instructure/ui-react-utils": "10.16.1",
31
+ "@instructure/ui-testable": "10.16.1",
32
32
  "prop-types": "^15.8.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@instructure/console": "10.16.1-snapshot-0",
36
- "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
37
- "@instructure/ui-prop-types": "10.16.1-snapshot-0",
35
+ "@instructure/console": "10.16.1",
36
+ "@instructure/ui-babel-preset": "10.16.1",
37
+ "@instructure/ui-prop-types": "10.16.1",
38
38
  "@testing-library/jest-dom": "^6.6.3",
39
39
  "@testing-library/react": "^16.0.1",
40
40
  "@testing-library/user-event": "^14.5.2",
package/src/Dialog/__new-tests__/Dialog.test.tsx CHANGED
@@ -22,7 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React, {
25
+ import {
26
26
  forwardRef,
27
27
  useEffect,
28
28
  useImperativeHandle,
package/src/Dialog/index.tsx CHANGED
@@ -22,7 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React, { Component } from 'react'
25
+ import { Component } from 'react'
26
26
 
27
27
  import { omitProps, getElementType } from '@instructure/ui-react-utils'
28
28
  import { findDOMNode, requestAnimationFrame } from '@instructure/ui-dom-utils'