@instructure/ui-tray 10.16.1-snapshot-0 → 10.16.1-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.
Files changed (12) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Tray/__new-tests__/Tray.test.js +47 -37
  3. package/es/Tray/index.js +36 -29
  4. package/lib/Tray/__new-tests__/Tray.test.js +57 -48
  5. package/lib/Tray/index.js +35 -28
  6. package/package.json +16 -16
  7. package/src/Tray/__new-tests__/Tray.test.tsx +0 -1
  8. package/src/Tray/index.tsx +1 -2
  9. package/tsconfig.build.tsbuildinfo +1 -1
  10. package/types/Tray/__new-tests__/Tray.test.d.ts.map +1 -1
  11. package/types/Tray/index.d.ts +1 -3
  12. package/types/Tray/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.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
6
+ ## [10.16.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-tray
9
9
 
package/es/Tray/__new-tests__/Tray.test.js CHANGED
@@ -23,77 +23,84 @@ var _Tray, _Tray2, _Tray3, _input, _input2;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render, screen, waitFor } from '@testing-library/react';
28
27
  import { vi } from 'vitest';
29
28
  import '@testing-library/jest-dom';
30
29
  import { Tray } from '../index';
30
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
31
31
  describe('<Tray />', async () => {
32
32
  it('should render nothing and have a node with no parent when closed', async () => {
33
- render(_Tray || (_Tray = /*#__PURE__*/React.createElement(Tray, {
34
- label: "Tray Example"
35
- }, "Hello Tray")));
33
+ render(_Tray || (_Tray = _jsx(Tray, {
34
+ label: "Tray Example",
35
+ children: "Hello Tray"
36
+ })));
36
37
  const trayContent = screen.queryByText('Hello Tray');
37
38
  expect(trayContent).not.toBeInTheDocument();
38
39
  });
39
40
  it('should render children and have a node with a parent when open', async () => {
40
- render(_Tray2 || (_Tray2 = /*#__PURE__*/React.createElement(Tray, {
41
+ render(_Tray2 || (_Tray2 = _jsx(Tray, {
41
42
  label: "Tray Example",
42
- open: true
43
- }, "Hello Tray")));
43
+ open: true,
44
+ children: "Hello Tray"
45
+ })));
44
46
  const trayContent = screen.getByText('Hello Tray');
45
47
  expect(trayContent).toBeInTheDocument();
46
48
  });
47
49
  it('should apply the a11y attributes', async () => {
48
- render(_Tray3 || (_Tray3 = /*#__PURE__*/React.createElement(Tray, {
50
+ render(_Tray3 || (_Tray3 = _jsx(Tray, {
49
51
  label: "Tray Example",
50
- open: true
51
- }, "Hello Tray")));
52
+ open: true,
53
+ children: "Hello Tray"
54
+ })));
52
55
  const tray = screen.getByRole('dialog');
53
56
  expect(tray).toHaveAttribute('aria-label', 'Tray Example');
54
57
  });
55
58
  it('should support onOpen prop', async () => {
56
59
  const onOpen = vi.fn();
57
- render(/*#__PURE__*/React.createElement(Tray, {
60
+ render(_jsx(Tray, {
58
61
  label: "Tray Example",
59
62
  open: true,
60
- onOpen: onOpen
61
- }, "Hello Tray"));
63
+ onOpen: onOpen,
64
+ children: "Hello Tray"
65
+ }));
62
66
  await waitFor(() => {
63
67
  expect(onOpen).toHaveBeenCalled();
64
68
  });
65
69
  });
66
70
  it('should support onClose prop', async () => {
67
71
  const onClose = vi.fn();
68
- const _render = render(/*#__PURE__*/React.createElement(Tray, {
72
+ const _render = render(_jsx(Tray, {
69
73
  label: "Tray Example",
70
74
  open: true,
71
- onClose: onClose
72
- }, "Hello Tray")),
75
+ onClose: onClose,
76
+ children: "Hello Tray"
77
+ })),
73
78
  rerender = _render.rerender;
74
79
 
75
80
  // Set prop: open
76
- rerender(/*#__PURE__*/React.createElement(Tray, {
81
+ rerender(_jsx(Tray, {
77
82
  label: "Tray Example",
78
83
  open: false,
79
- onClose: onClose
80
- }, "Hello Tray"));
84
+ onClose: onClose,
85
+ children: "Hello Tray"
86
+ }));
81
87
  await waitFor(() => {
82
88
  expect(onClose).toHaveBeenCalled();
83
89
  });
84
90
  });
85
91
  it('should take a prop for finding default focus', async () => {
86
- render(/*#__PURE__*/React.createElement(Tray, {
92
+ render(_jsxs(Tray, {
87
93
  label: "Tray Example",
88
94
  open: true,
89
- defaultFocusElement: () => document.getElementById('my-input')
90
- }, "Hello Tray", _input || (_input = /*#__PURE__*/React.createElement("input", {
91
- type: "text"
92
- })), _input2 || (_input2 = /*#__PURE__*/React.createElement("input", {
93
- type: "text",
94
- id: "my-input",
95
- "aria-label": "my-input-label"
96
- }))));
95
+ defaultFocusElement: () => document.getElementById('my-input'),
96
+ children: ["Hello Tray", _input || (_input = _jsx("input", {
97
+ type: "text"
98
+ })), _input2 || (_input2 = _jsx("input", {
99
+ type: "text",
100
+ id: "my-input",
101
+ "aria-label": "my-input-label"
102
+ }))]
103
+ }));
97
104
  const input = screen.getByLabelText('my-input-label');
98
105
  await waitFor(() => {
99
106
  expect(document.activeElement).toBe(input);
@@ -133,12 +140,13 @@ describe('<Tray />', async () => {
133
140
  it(`returns ${val} for ${placement} when entering`, async () => {
134
141
  const onEntered = vi.fn();
135
142
  document.documentElement.setAttribute('dir', dir);
136
- render(/*#__PURE__*/React.createElement(Tray, {
143
+ render(_jsx(Tray, {
137
144
  open: true,
138
145
  label: "Tray Example",
139
146
  placement: placement,
140
- onEntered: onEntered
141
- }, "Hello"));
147
+ onEntered: onEntered,
148
+ children: "Hello"
149
+ }));
142
150
  await waitFor(() => {
143
151
  expect(onEntered).toHaveBeenCalled();
144
152
  });
@@ -149,21 +157,23 @@ describe('<Tray />', async () => {
149
157
  it(`returns ${val} for ${placement} when exiting`, async () => {
150
158
  const onExited = vi.fn();
151
159
  document.documentElement.setAttribute('dir', dir);
152
- const _render2 = render(/*#__PURE__*/React.createElement(Tray, {
160
+ const _render2 = render(_jsx(Tray, {
153
161
  open: true,
154
162
  label: "Tray Example",
155
163
  placement: placement,
156
- onExited: onExited
157
- }, "Hello")),
164
+ onExited: onExited,
165
+ children: "Hello"
166
+ })),
158
167
  rerender = _render2.rerender;
159
168
 
160
169
  // Set prop: open
161
- rerender(/*#__PURE__*/React.createElement(Tray, {
170
+ rerender(_jsx(Tray, {
162
171
  open: false,
163
172
  label: "Tray Example",
164
173
  placement: placement,
165
- onExited: onExited
166
- }, "Hello"));
174
+ onExited: onExited,
175
+ children: "Hello"
176
+ }));
167
177
  await waitFor(() => {
168
178
  expect(onExited).toHaveBeenCalled();
169
179
  });
package/es/Tray/index.js CHANGED
@@ -25,7 +25,6 @@ var _dec, _dec2, _dec3, _class, _Tray;
25
25
  * SOFTWARE.
26
26
  */
27
27
 
28
- /** @jsx jsx */
29
28
  import { Component } from 'react';
30
29
  import { Dialog } from '@instructure/ui-dialog';
31
30
  import { omitProps } from '@instructure/ui-react-utils';
@@ -35,7 +34,7 @@ import { testable } from '@instructure/ui-testable';
35
34
  import { Portal } from '@instructure/ui-portal';
36
35
  import { mirrorHorizontalPlacement } from '@instructure/ui-position';
37
36
  import { Transition } from '@instructure/ui-motion';
38
- import { withStyle, jsx } from '@instructure/emotion';
37
+ import { withStyle } from '@instructure/emotion';
39
38
  import generateStyle from './styles';
40
39
  import generateComponentTheme from './theme';
41
40
  import { propTypes, allowedProps } from './props';
@@ -46,6 +45,7 @@ import { Mask } from '@instructure/ui-overlays';
46
45
  category: components
47
46
  ---
48
47
  **/
48
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
49
49
  let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Tray = class Tray extends Component {
50
50
  constructor(props) {
51
51
  var _props$open;
@@ -153,7 +153,7 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
153
153
  enableMask = _this$props4.enableMask,
154
154
  props = _objectWithoutProperties(_this$props4, _excluded);
155
155
  const portalIsOpen = this.state.open || this.state.transitioning;
156
- const content = jsx(Transition, {
156
+ const content = _jsx(Transition, {
157
157
  in: open,
158
158
  type: this.transition,
159
159
  onTransition: onTransition,
@@ -165,35 +165,42 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
165
165
  onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose),
166
166
  transitionOnMount: transitionOnMount,
167
167
  transitionEnter: transitionEnter,
168
- transitionExit: transitionExit
169
- }, jsx("span", Object.assign({}, omitProps(props, Tray.allowedProps), {
170
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.tray,
171
- ref: contentRef
172
- }), jsx(Dialog, {
173
- ref: element => this.dialogRef = element,
174
- as: "div",
175
- label: label,
176
- defaultFocusElement: defaultFocusElement,
177
- open: true,
178
- shouldContainFocus: shouldContainFocus,
179
- shouldReturnFocus: shouldReturnFocus,
180
- shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
181
- shouldCloseOnEscape: true,
182
- liveRegion: liveRegion,
183
- onDismiss: onDismiss,
184
- role: role
185
- }, jsx("div", {
186
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.content
187
- }, children))));
188
- return jsx(Portal, {
168
+ transitionExit: transitionExit,
169
+ children: _jsx("span", {
170
+ ...omitProps(props, Tray.allowedProps),
171
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.tray,
172
+ ref: contentRef,
173
+ children: _jsx(Dialog, {
174
+ ref: element => this.dialogRef = element,
175
+ as: "div",
176
+ label: label,
177
+ defaultFocusElement: defaultFocusElement,
178
+ open: true,
179
+ shouldContainFocus: shouldContainFocus,
180
+ shouldReturnFocus: shouldReturnFocus,
181
+ shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
182
+ shouldCloseOnEscape: true,
183
+ liveRegion: liveRegion,
184
+ onDismiss: onDismiss,
185
+ role: role,
186
+ children: _jsx("div", {
187
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.content,
188
+ children: children
189
+ })
190
+ })
191
+ })
192
+ });
193
+ return _jsx(Portal, {
189
194
  open: portalIsOpen,
190
195
  onOpen: this.handlePortalOpen,
191
196
  insertAt: insertAt,
192
- mountNode: mountNode
193
- }, enableMask ? jsx(Mask, {
194
- placement: 'center',
195
- fullscreen: true
196
- }, content) : content);
197
+ mountNode: mountNode,
198
+ children: enableMask ? _jsx(Mask, {
199
+ placement: 'center',
200
+ fullscreen: true,
201
+ children: content
202
+ }) : content
203
+ });
197
204
  }
198
205
  }, _Tray.displayName = "Tray", _Tray.componentId = 'Tray', _Tray.allowedProps = allowedProps, _Tray.propTypes = propTypes, _Tray.defaultProps = {
199
206
  defaultFocusElement: null,
package/lib/Tray/__new-tests__/Tray.test.js CHANGED
@@ -1,11 +1,10 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
3
+ var _react = require("@testing-library/react");
6
4
  var _vitest = require("vitest");
7
5
  require("@testing-library/jest-dom");
8
6
  var _index = require("../index");
7
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
9
8
  var _Tray, _Tray2, _Tray3, _input, _input2;
10
9
  /*
11
10
  * The MIT License (MIT)
@@ -32,72 +31,79 @@ var _Tray, _Tray2, _Tray3, _input, _input2;
32
31
  */
33
32
  describe('<Tray />', async () => {
34
33
  it('should render nothing and have a node with no parent when closed', async () => {
35
- (0, _react2.render)(_Tray || (_Tray = /*#__PURE__*/_react.default.createElement(_index.Tray, {
36
- label: "Tray Example"
37
- }, "Hello Tray")));
38
- const trayContent = _react2.screen.queryByText('Hello Tray');
34
+ (0, _react.render)(_Tray || (_Tray = (0, _jsxRuntime.jsx)(_index.Tray, {
35
+ label: "Tray Example",
36
+ children: "Hello Tray"
37
+ })));
38
+ const trayContent = _react.screen.queryByText('Hello Tray');
39
39
  expect(trayContent).not.toBeInTheDocument();
40
40
  });
41
41
  it('should render children and have a node with a parent when open', async () => {
42
- (0, _react2.render)(_Tray2 || (_Tray2 = /*#__PURE__*/_react.default.createElement(_index.Tray, {
42
+ (0, _react.render)(_Tray2 || (_Tray2 = (0, _jsxRuntime.jsx)(_index.Tray, {
43
43
  label: "Tray Example",
44
- open: true
45
- }, "Hello Tray")));
46
- const trayContent = _react2.screen.getByText('Hello Tray');
44
+ open: true,
45
+ children: "Hello Tray"
46
+ })));
47
+ const trayContent = _react.screen.getByText('Hello Tray');
47
48
  expect(trayContent).toBeInTheDocument();
48
49
  });
49
50
  it('should apply the a11y attributes', async () => {
50
- (0, _react2.render)(_Tray3 || (_Tray3 = /*#__PURE__*/_react.default.createElement(_index.Tray, {
51
+ (0, _react.render)(_Tray3 || (_Tray3 = (0, _jsxRuntime.jsx)(_index.Tray, {
51
52
  label: "Tray Example",
52
- open: true
53
- }, "Hello Tray")));
54
- const tray = _react2.screen.getByRole('dialog');
53
+ open: true,
54
+ children: "Hello Tray"
55
+ })));
56
+ const tray = _react.screen.getByRole('dialog');
55
57
  expect(tray).toHaveAttribute('aria-label', 'Tray Example');
56
58
  });
57
59
  it('should support onOpen prop', async () => {
58
60
  const onOpen = _vitest.vi.fn();
59
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tray, {
61
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.Tray, {
60
62
  label: "Tray Example",
61
63
  open: true,
62
- onOpen: onOpen
63
- }, "Hello Tray"));
64
- await (0, _react2.waitFor)(() => {
64
+ onOpen: onOpen,
65
+ children: "Hello Tray"
66
+ }));
67
+ await (0, _react.waitFor)(() => {
65
68
  expect(onOpen).toHaveBeenCalled();
66
69
  });
67
70
  });
68
71
  it('should support onClose prop', async () => {
69
72
  const onClose = _vitest.vi.fn();
70
- const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tray, {
73
+ const _render = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Tray, {
71
74
  label: "Tray Example",
72
75
  open: true,
73
- onClose: onClose
74
- }, "Hello Tray")),
76
+ onClose: onClose,
77
+ children: "Hello Tray"
78
+ })),
75
79
  rerender = _render.rerender;
76
80
 
77
81
  // Set prop: open
78
- rerender(/*#__PURE__*/_react.default.createElement(_index.Tray, {
82
+ rerender((0, _jsxRuntime.jsx)(_index.Tray, {
79
83
  label: "Tray Example",
80
84
  open: false,
81
- onClose: onClose
82
- }, "Hello Tray"));
83
- await (0, _react2.waitFor)(() => {
85
+ onClose: onClose,
86
+ children: "Hello Tray"
87
+ }));
88
+ await (0, _react.waitFor)(() => {
84
89
  expect(onClose).toHaveBeenCalled();
85
90
  });
86
91
  });
87
92
  it('should take a prop for finding default focus', async () => {
88
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tray, {
93
+ (0, _react.render)((0, _jsxRuntime.jsxs)(_index.Tray, {
89
94
  label: "Tray Example",
90
95
  open: true,
91
- defaultFocusElement: () => document.getElementById('my-input')
92
- }, "Hello Tray", _input || (_input = /*#__PURE__*/_react.default.createElement("input", {
93
- type: "text"
94
- })), _input2 || (_input2 = /*#__PURE__*/_react.default.createElement("input", {
95
- type: "text",
96
- id: "my-input",
97
- "aria-label": "my-input-label"
98
- }))));
99
- const input = _react2.screen.getByLabelText('my-input-label');
100
- await (0, _react2.waitFor)(() => {
96
+ defaultFocusElement: () => document.getElementById('my-input'),
97
+ children: ["Hello Tray", _input || (_input = (0, _jsxRuntime.jsx)("input", {
98
+ type: "text"
99
+ })), _input2 || (_input2 = (0, _jsxRuntime.jsx)("input", {
100
+ type: "text",
101
+ id: "my-input",
102
+ "aria-label": "my-input-label"
103
+ }))]
104
+ }));
105
+ const input = _react.screen.getByLabelText('my-input-label');
106
+ await (0, _react.waitFor)(() => {
101
107
  expect(document.activeElement).toBe(input);
102
108
  });
103
109
  });
@@ -135,13 +141,14 @@ describe('<Tray />', async () => {
135
141
  it(`returns ${val} for ${placement} when entering`, async () => {
136
142
  const onEntered = _vitest.vi.fn();
137
143
  document.documentElement.setAttribute('dir', dir);
138
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tray, {
144
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.Tray, {
139
145
  open: true,
140
146
  label: "Tray Example",
141
147
  placement: placement,
142
- onEntered: onEntered
143
- }, "Hello"));
144
- await (0, _react2.waitFor)(() => {
148
+ onEntered: onEntered,
149
+ children: "Hello"
150
+ }));
151
+ await (0, _react.waitFor)(() => {
145
152
  expect(onEntered).toHaveBeenCalled();
146
153
  });
147
154
  });
@@ -151,22 +158,24 @@ describe('<Tray />', async () => {
151
158
  it(`returns ${val} for ${placement} when exiting`, async () => {
152
159
  const onExited = _vitest.vi.fn();
153
160
  document.documentElement.setAttribute('dir', dir);
154
- const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tray, {
161
+ const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Tray, {
155
162
  open: true,
156
163
  label: "Tray Example",
157
164
  placement: placement,
158
- onExited: onExited
159
- }, "Hello")),
165
+ onExited: onExited,
166
+ children: "Hello"
167
+ })),
160
168
  rerender = _render2.rerender;
161
169
 
162
170
  // Set prop: open
163
- rerender(/*#__PURE__*/_react.default.createElement(_index.Tray, {
171
+ rerender((0, _jsxRuntime.jsx)(_index.Tray, {
164
172
  open: false,
165
173
  label: "Tray Example",
166
174
  placement: placement,
167
- onExited: onExited
168
- }, "Hello"));
169
- await (0, _react2.waitFor)(() => {
175
+ onExited: onExited,
176
+ children: "Hello"
177
+ }));
178
+ await (0, _react.waitFor)(() => {
170
179
  expect(onExited).toHaveBeenCalled();
171
180
  });
172
181
  });
package/lib/Tray/index.js CHANGED
@@ -20,6 +20,7 @@ var _styles = _interopRequireDefault(require("./styles"));
20
20
  var _theme = _interopRequireDefault(require("./theme"));
21
21
  var _props = require("./props");
22
22
  var _Mask = require("@instructure/ui-overlays/lib/Mask");
23
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
23
24
  const _excluded = ["label", "children", "size", "placement", "open", "defaultFocusElement", "contentRef", "shouldContainFocus", "shouldReturnFocus", "shouldCloseOnDocumentClick", "onOpen", "onClose", "onDismiss", "mountNode", "insertAt", "liveRegion", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onTransition", "transitionOnMount", "transitionEnter", "transitionExit", "border", "shadow", "role", "enableMask"];
24
25
  var _dec, _dec2, _dec3, _class, _Tray;
25
26
  /*
@@ -45,7 +46,6 @@ var _dec, _dec2, _dec3, _class, _Tray;
45
46
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
46
47
  * SOFTWARE.
47
48
  */
48
- /** @jsx jsx */
49
49
  /**
50
50
  ---
51
51
  category: components
@@ -158,7 +158,7 @@ let Tray = exports.Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _them
158
158
  enableMask = _this$props4.enableMask,
159
159
  props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
160
160
  const portalIsOpen = this.state.open || this.state.transitioning;
161
- const content = (0, _emotion.jsx)(_Transition.Transition, {
161
+ const content = (0, _jsxRuntime.jsx)(_Transition.Transition, {
162
162
  in: open,
163
163
  type: this.transition,
164
164
  onTransition: onTransition,
@@ -170,35 +170,42 @@ let Tray = exports.Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _them
170
170
  onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose),
171
171
  transitionOnMount: transitionOnMount,
172
172
  transitionEnter: transitionEnter,
173
- transitionExit: transitionExit
174
- }, (0, _emotion.jsx)("span", Object.assign({}, (0, _omitProps.omitProps)(props, Tray.allowedProps), {
175
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.tray,
176
- ref: contentRef
177
- }), (0, _emotion.jsx)(_Dialog.Dialog, {
178
- ref: element => this.dialogRef = element,
179
- as: "div",
180
- label: label,
181
- defaultFocusElement: defaultFocusElement,
182
- open: true,
183
- shouldContainFocus: shouldContainFocus,
184
- shouldReturnFocus: shouldReturnFocus,
185
- shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
186
- shouldCloseOnEscape: true,
187
- liveRegion: liveRegion,
188
- onDismiss: onDismiss,
189
- role: role
190
- }, (0, _emotion.jsx)("div", {
191
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.content
192
- }, children))));
193
- return (0, _emotion.jsx)(_Portal.Portal, {
173
+ transitionExit: transitionExit,
174
+ children: (0, _jsxRuntime.jsx)("span", {
175
+ ...(0, _omitProps.omitProps)(props, Tray.allowedProps),
176
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.tray,
177
+ ref: contentRef,
178
+ children: (0, _jsxRuntime.jsx)(_Dialog.Dialog, {
179
+ ref: element => this.dialogRef = element,
180
+ as: "div",
181
+ label: label,
182
+ defaultFocusElement: defaultFocusElement,
183
+ open: true,
184
+ shouldContainFocus: shouldContainFocus,
185
+ shouldReturnFocus: shouldReturnFocus,
186
+ shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
187
+ shouldCloseOnEscape: true,
188
+ liveRegion: liveRegion,
189
+ onDismiss: onDismiss,
190
+ role: role,
191
+ children: (0, _jsxRuntime.jsx)("div", {
192
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.content,
193
+ children: children
194
+ })
195
+ })
196
+ })
197
+ });
198
+ return (0, _jsxRuntime.jsx)(_Portal.Portal, {
194
199
  open: portalIsOpen,
195
200
  onOpen: this.handlePortalOpen,
196
201
  insertAt: insertAt,
197
- mountNode: mountNode
198
- }, enableMask ? (0, _emotion.jsx)(_Mask.Mask, {
199
- placement: 'center',
200
- fullscreen: true
201
- }, content) : content);
202
+ mountNode: mountNode,
203
+ children: enableMask ? (0, _jsxRuntime.jsx)(_Mask.Mask, {
204
+ placement: 'center',
205
+ fullscreen: true,
206
+ children: content
207
+ }) : content
208
+ });
202
209
  }
203
210
  }, _Tray.displayName = "Tray", _Tray.componentId = 'Tray', _Tray.allowedProps = _props.allowedProps, _Tray.propTypes = _props.propTypes, _Tray.defaultProps = {
204
211
  defaultFocusElement: null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-tray",
3
- "version": "10.16.1-snapshot-0",
3
+ "version": "10.16.1-snapshot-1",
4
4
  "description": "Tray component for secondary/menu content",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,24 +24,24 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.26.0",
27
- "@instructure/console": "10.16.1-snapshot-0",
28
- "@instructure/emotion": "10.16.1-snapshot-0",
29
- "@instructure/shared-types": "10.16.1-snapshot-0",
30
- "@instructure/ui-dialog": "10.16.1-snapshot-0",
31
- "@instructure/ui-i18n": "10.16.1-snapshot-0",
32
- "@instructure/ui-motion": "10.16.1-snapshot-0",
33
- "@instructure/ui-overlays": "10.16.1-snapshot-0",
34
- "@instructure/ui-portal": "10.16.1-snapshot-0",
35
- "@instructure/ui-position": "10.16.1-snapshot-0",
36
- "@instructure/ui-prop-types": "10.16.1-snapshot-0",
37
- "@instructure/ui-react-utils": "10.16.1-snapshot-0",
38
- "@instructure/ui-testable": "10.16.1-snapshot-0",
39
- "@instructure/ui-utils": "10.16.1-snapshot-0",
27
+ "@instructure/console": "10.16.1-snapshot-1",
28
+ "@instructure/emotion": "10.16.1-snapshot-1",
29
+ "@instructure/shared-types": "10.16.1-snapshot-1",
30
+ "@instructure/ui-dialog": "10.16.1-snapshot-1",
31
+ "@instructure/ui-i18n": "10.16.1-snapshot-1",
32
+ "@instructure/ui-motion": "10.16.1-snapshot-1",
33
+ "@instructure/ui-overlays": "10.16.1-snapshot-1",
34
+ "@instructure/ui-portal": "10.16.1-snapshot-1",
35
+ "@instructure/ui-position": "10.16.1-snapshot-1",
36
+ "@instructure/ui-prop-types": "10.16.1-snapshot-1",
37
+ "@instructure/ui-react-utils": "10.16.1-snapshot-1",
38
+ "@instructure/ui-testable": "10.16.1-snapshot-1",
39
+ "@instructure/ui-utils": "10.16.1-snapshot-1",
40
40
  "prop-types": "^15.8.1"
41
41
  },
42
42
  "devDependencies": {
43
- "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
44
- "@instructure/ui-themes": "10.16.1-snapshot-0",
43
+ "@instructure/ui-babel-preset": "10.16.1-snapshot-1",
44
+ "@instructure/ui-themes": "10.16.1-snapshot-1",
45
45
  "@testing-library/jest-dom": "^6.6.3",
46
46
  "@testing-library/react": "^16.0.1",
47
47
  "@testing-library/user-event": "^14.5.2",
package/src/Tray/__new-tests__/Tray.test.tsx CHANGED
@@ -22,7 +22,6 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React from 'react'
26
25
  import { render, screen, waitFor } from '@testing-library/react'
27
26
  import { vi } from 'vitest'
28
27
  import '@testing-library/jest-dom'
package/src/Tray/index.tsx CHANGED
@@ -22,7 +22,6 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- /** @jsx jsx */
26
25
  import { Component } from 'react'
27
26
 
28
27
  import { Dialog } from '@instructure/ui-dialog'
@@ -35,7 +34,7 @@ import type { PortalNode } from '@instructure/ui-portal'
35
34
  import { mirrorHorizontalPlacement } from '@instructure/ui-position'
36
35
  import { Transition } from '@instructure/ui-motion'
37
36
  import type { TransitionType } from '@instructure/ui-motion'
38
- import { withStyle, jsx } from '@instructure/emotion'
37
+ import { withStyle } from '@instructure/emotion'
39
38
  import generateStyle from './styles'
40
39
  import generateComponentTheme from './theme'
41
40
  import { propTypes, allowedProps } from './props'