@instructure/ui-motion 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 (16) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Transition/BaseTransition/index.js +2 -2
  3. package/es/Transition/__new-tests__/Transition.test.js +81 -41
  4. package/es/Transition/index.js +20 -17
  5. package/lib/Transition/BaseTransition/index.js +2 -3
  6. package/lib/Transition/__new-tests__/Transition.test.js +81 -42
  7. package/lib/Transition/index.js +19 -17
  8. package/package.json +9 -9
  9. package/src/Transition/BaseTransition/index.ts +2 -2
  10. package/src/Transition/__new-tests__/Transition.test.tsx +1 -1
  11. package/src/Transition/index.tsx +2 -4
  12. package/tsconfig.build.tsbuildinfo +1 -1
  13. package/types/Transition/BaseTransition/index.d.ts +4 -4
  14. package/types/Transition/BaseTransition/index.d.ts.map +1 -1
  15. package/types/Transition/index.d.ts +2 -5
  16. package/types/Transition/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-motion
9
9
 
package/es/Transition/BaseTransition/index.js CHANGED
@@ -22,7 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React from 'react';
25
+ import { Component } from 'react';
26
26
  import { getClassList, findDOMNode } from '@instructure/ui-dom-utils';
27
27
  import { ensureSingleChild, safeCloneElement } from '@instructure/ui-react-utils';
28
28
  import { allowedProps, propTypes } from './props';
@@ -40,7 +40,7 @@ private: true
40
40
  Note: this is forked from https://github.com/react-bootstrap/react-overlays/blob/master/src/Transition.js
41
41
  so that it works with css modules. The internals are pretty different now, but it has roughly the same api.
42
42
  **/
43
- class BaseTransition extends React.Component {
43
+ class BaseTransition extends Component {
44
44
  constructor(...args) {
45
45
  super(...args);
46
46
  this._timeouts = [];
package/es/Transition/__new-tests__/Transition.test.js CHANGED
@@ -23,12 +23,13 @@ var _div, _div2, _ExampleComponent2, _div3, _div4, _Transition3, _Transition4, _
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React, { Component } from 'react';
26
+ import { Component } from 'react';
27
27
  import { render, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
28
28
  import { vi } from 'vitest';
29
29
  import '@testing-library/jest-dom';
30
30
  import { Transition } from '../index';
31
31
  import { getClassNames } from '../styles';
32
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
32
33
  const COMPONENT_TEXT = 'Component Text';
33
34
  const getClass = (type, phase) => {
34
35
  const classNames = getClassNames(type);
@@ -36,7 +37,9 @@ const getClass = (type, phase) => {
36
37
  };
37
38
  class ExampleComponent extends Component {
38
39
  render() {
39
- return _div || (_div = /*#__PURE__*/React.createElement("div", null, COMPONENT_TEXT));
40
+ return _div || (_div = _jsx("div", {
41
+ children: COMPONENT_TEXT
42
+ }));
40
43
  }
41
44
  }
42
45
  ExampleComponent.displayName = "ExampleComponent";
@@ -56,19 +59,23 @@ describe('<Transition />', () => {
56
59
  const expectTypeClass = function (type) {
57
60
  var _Transition, _Transition2;
58
61
  it(`should correctly apply classes for '${type}' with html element`, () => {
59
- const _render = render(_Transition || (_Transition = /*#__PURE__*/React.createElement(Transition, {
62
+ const _render = render(_Transition || (_Transition = _jsx(Transition, {
60
63
  type: type,
61
- in: true
62
- }, _div2 || (_div2 = /*#__PURE__*/React.createElement("div", null, "hello"))))),
64
+ in: true,
65
+ children: _div2 || (_div2 = _jsx("div", {
66
+ children: "hello"
67
+ }))
68
+ }))),
63
69
  getByText = _render.getByText;
64
70
  const element = getByText('hello');
65
71
  expect(element).toHaveClass(getClass(type, 'entered'));
66
72
  });
67
73
  it(`should correctly apply classes for '${type}' with Component`, () => {
68
- const _render2 = render(_Transition2 || (_Transition2 = /*#__PURE__*/React.createElement(Transition, {
74
+ const _render2 = render(_Transition2 || (_Transition2 = _jsx(Transition, {
69
75
  type: type,
70
- in: true
71
- }, _ExampleComponent2 || (_ExampleComponent2 = /*#__PURE__*/React.createElement(ExampleComponent, null))))),
76
+ in: true,
77
+ children: _ExampleComponent2 || (_ExampleComponent2 = _jsx(ExampleComponent, {}))
78
+ }))),
72
79
  getByText = _render2.getByText;
73
80
  const element = getByText(COMPONENT_TEXT);
74
81
  expect(element).toHaveClass(getClass(type, 'entered'));
@@ -79,72 +86,96 @@ describe('<Transition />', () => {
79
86
  });
80
87
  it('should correctly apply enter and exit classes', async () => {
81
88
  const type = 'fade';
82
- const _render3 = render(/*#__PURE__*/React.createElement(Transition, {
89
+ const _render3 = render(_jsx(Transition, {
83
90
  type: type,
84
- in: true
85
- }, _div3 || (_div3 = /*#__PURE__*/React.createElement("div", null, "hello")))),
91
+ in: true,
92
+ children: _div3 || (_div3 = _jsx("div", {
93
+ children: "hello"
94
+ }))
95
+ })),
86
96
  getByText = _render3.getByText,
87
97
  rerender = _render3.rerender;
88
98
  const element = getByText('hello');
89
99
  expect(element).toHaveClass(getClass(type, 'entered'));
90
- rerender(/*#__PURE__*/React.createElement(Transition, {
100
+ rerender(_jsx(Transition, {
91
101
  type: type,
92
- in: false
93
- }, _div4 || (_div4 = /*#__PURE__*/React.createElement("div", null, "hello"))));
102
+ in: false,
103
+ children: _div4 || (_div4 = _jsx("div", {
104
+ children: "hello"
105
+ }))
106
+ }));
94
107
  await waitFor(() => {
95
108
  expect(element).toHaveClass(getClass(type, 'exited'));
96
109
  });
97
110
  });
98
111
  it('should remove component from DOM when `unmountOnExit` is set', async () => {
99
- const _render4 = render(_Transition3 || (_Transition3 = /*#__PURE__*/React.createElement(Transition, {
112
+ const _render4 = render(_Transition3 || (_Transition3 = _jsx(Transition, {
100
113
  type: "fade",
101
114
  in: true,
102
- unmountOnExit: true
103
- }, /*#__PURE__*/React.createElement("div", null, "hello")))),
115
+ unmountOnExit: true,
116
+ children: _jsx("div", {
117
+ children: "hello"
118
+ })
119
+ }))),
104
120
  getByText = _render4.getByText,
105
121
  rerender = _render4.rerender;
106
122
  expect(getByText('hello')).toBeInTheDocument();
107
- rerender(_Transition4 || (_Transition4 = /*#__PURE__*/React.createElement(Transition, {
123
+ rerender(_Transition4 || (_Transition4 = _jsx(Transition, {
108
124
  type: "fade",
109
125
  in: false,
110
- unmountOnExit: true
111
- }, /*#__PURE__*/React.createElement("div", null, "hello"))));
126
+ unmountOnExit: true,
127
+ children: _jsx("div", {
128
+ children: "hello"
129
+ })
130
+ })));
112
131
  await waitForElementToBeRemoved(() => getByText('hello'));
113
132
  });
114
133
  it('should not execute enter transition with `transitionEnter` set to false', async () => {
115
134
  const onEntering = vi.fn();
116
- const _render5 = render(/*#__PURE__*/React.createElement(Transition, {
135
+ const _render5 = render(_jsx(Transition, {
117
136
  type: "fade",
118
137
  in: false,
119
138
  transitionEnter: true,
120
- onEntering: onEntering
121
- }, _div5 || (_div5 = /*#__PURE__*/React.createElement("div", null, "hello")))),
139
+ onEntering: onEntering,
140
+ children: _div5 || (_div5 = _jsx("div", {
141
+ children: "hello"
142
+ }))
143
+ })),
122
144
  rerender = _render5.rerender;
123
- rerender(/*#__PURE__*/React.createElement(Transition, {
145
+ rerender(_jsx(Transition, {
124
146
  type: "fade",
125
147
  in: true,
126
148
  transitionEnter: false,
127
- onEntering: onEntering
128
- }, _div6 || (_div6 = /*#__PURE__*/React.createElement("div", null, "hello"))));
149
+ onEntering: onEntering,
150
+ children: _div6 || (_div6 = _jsx("div", {
151
+ children: "hello"
152
+ }))
153
+ }));
129
154
  await waitFor(() => {
130
155
  expect(onEntering).not.toHaveBeenCalled();
131
156
  });
132
157
  });
133
158
  it('should not execute exit transition with `transitionExit` set to false', async () => {
134
159
  const onExiting = vi.fn();
135
- const _render6 = render(/*#__PURE__*/React.createElement(Transition, {
160
+ const _render6 = render(_jsx(Transition, {
136
161
  type: "fade",
137
162
  in: true,
138
163
  transitionExit: false,
139
- onExiting: onExiting
140
- }, _div7 || (_div7 = /*#__PURE__*/React.createElement("div", null, "hello")))),
164
+ onExiting: onExiting,
165
+ children: _div7 || (_div7 = _jsx("div", {
166
+ children: "hello"
167
+ }))
168
+ })),
141
169
  rerender = _render6.rerender;
142
- rerender(/*#__PURE__*/React.createElement(Transition, {
170
+ rerender(_jsx(Transition, {
143
171
  type: "fade",
144
172
  in: false,
145
173
  transitionExit: false,
146
- onExiting: onExiting
147
- }, _div8 || (_div8 = /*#__PURE__*/React.createElement("div", null, "hello"))));
174
+ onExiting: onExiting,
175
+ children: _div8 || (_div8 = _jsx("div", {
176
+ children: "hello"
177
+ }))
178
+ }));
148
179
  await waitFor(() => {
149
180
  expect(onExiting).not.toHaveBeenCalled();
150
181
  });
@@ -153,13 +184,16 @@ describe('<Transition />', () => {
153
184
  const onEnter = vi.fn();
154
185
  const onEntering = vi.fn();
155
186
  const onEntered = vi.fn();
156
- render(/*#__PURE__*/React.createElement(Transition, {
187
+ render(_jsx(Transition, {
157
188
  type: "fade",
158
189
  in: true,
159
190
  onEnter: onEnter,
160
191
  onEntering: onEntering,
161
- onEntered: onEntered
162
- }, _div9 || (_div9 = /*#__PURE__*/React.createElement("div", null, "hello"))));
192
+ onEntered: onEntered,
193
+ children: _div9 || (_div9 = _jsx("div", {
194
+ children: "hello"
195
+ }))
196
+ }));
163
197
  await waitFor(() => {
164
198
  expect(onEnter).toHaveBeenCalled();
165
199
  expect(onEntering).toHaveBeenCalled();
@@ -170,21 +204,27 @@ describe('<Transition />', () => {
170
204
  const onExit = vi.fn();
171
205
  const onExiting = vi.fn();
172
206
  const onExited = vi.fn();
173
- const _render7 = render(/*#__PURE__*/React.createElement(Transition, {
207
+ const _render7 = render(_jsx(Transition, {
174
208
  type: "fade",
175
209
  in: true,
176
210
  onExit: onExit,
177
211
  onExiting: onExiting,
178
- onExited: onExited
179
- }, _div10 || (_div10 = /*#__PURE__*/React.createElement("div", null, "hello")))),
212
+ onExited: onExited,
213
+ children: _div10 || (_div10 = _jsx("div", {
214
+ children: "hello"
215
+ }))
216
+ })),
180
217
  rerender = _render7.rerender;
181
- rerender(/*#__PURE__*/React.createElement(Transition, {
218
+ rerender(_jsx(Transition, {
182
219
  type: "fade",
183
220
  in: false,
184
221
  onExit: onExit,
185
222
  onExiting: onExiting,
186
- onExited: onExited
187
- }, _div11 || (_div11 = /*#__PURE__*/React.createElement("div", null, "hello"))));
223
+ onExited: onExited,
224
+ children: _div11 || (_div11 = _jsx("div", {
225
+ children: "hello"
226
+ }))
227
+ }));
188
228
  await waitFor(() => {
189
229
  expect(onExit).toHaveBeenCalled();
190
230
  expect(onExiting).toHaveBeenCalled();
package/es/Transition/index.js CHANGED
@@ -25,17 +25,16 @@ var _dec, _dec2, _class, _Transition;
25
25
  * SOFTWARE.
26
26
  */
27
27
 
28
- /** @jsx jsx */
29
- /** @jsxFrag React.Fragment */
30
28
  // test is breaking without importing React here
31
- import React, { Component } from 'react';
29
+ import { Component } from 'react';
32
30
  import { ms } from '@instructure/ui-utils';
33
31
  import { testable } from '@instructure/ui-testable';
34
- import { withStyle, jsx, Global } from '@instructure/emotion';
32
+ import { withStyle, Global } from '@instructure/emotion';
35
33
  import generateStyle from './styles';
36
34
  import generateComponentTheme from './theme';
37
35
  import { BaseTransition } from './BaseTransition';
38
36
  import { allowedProps, propTypes } from './props';
37
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
39
38
  /**
40
39
  ---
41
40
  category: components/utilities
@@ -70,7 +69,7 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
70
69
  // Todo: try to refactor or replace Transition/BaseTransition component in v9.0.0. so that it is not class based
71
70
  this.renderTransitionHelper = () => {
72
71
  const styles = this.props.styles;
73
- return jsx(Global, {
72
+ return _jsx(Global, {
74
73
  styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
75
74
  });
76
75
  };
@@ -90,18 +89,22 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
90
89
  styles = _this$props3.styles,
91
90
  props = _objectWithoutProperties(_this$props3, _excluded);
92
91
  const duration = ms(styles.duration);
93
- return jsx(React.Fragment, null, this.renderTransitionHelper(), jsx(BaseTransition, Object.assign({}, props, {
94
- enterDelay: duration,
95
- exitDelay: duration,
96
- transitionClassName: styles.classNames.transitioning,
97
- exitedClassName: styles.classNames.exited,
98
- exitingClassName: styles.classNames.exiting,
99
- enteredClassName: styles.classNames.entered,
100
- enteringClassName: styles.classNames.entering,
101
- onEntered: this.handleEntered,
102
- onExited: this.handleExited,
103
- elementRef: this.handleRef
104
- }), children));
92
+ return _jsxs(_Fragment, {
93
+ children: [this.renderTransitionHelper(), _jsx(BaseTransition, {
94
+ ...props,
95
+ enterDelay: duration,
96
+ exitDelay: duration,
97
+ transitionClassName: styles.classNames.transitioning,
98
+ exitedClassName: styles.classNames.exited,
99
+ exitingClassName: styles.classNames.exiting,
100
+ enteredClassName: styles.classNames.entered,
101
+ enteringClassName: styles.classNames.entering,
102
+ onEntered: this.handleEntered,
103
+ onExited: this.handleExited,
104
+ elementRef: this.handleRef,
105
+ children: children
106
+ })]
107
+ });
105
108
  }
106
109
  }, _Transition.displayName = "Transition", _Transition.componentId = 'Transition', _Transition.allowedProps = allowedProps, _Transition.propTypes = propTypes, _Transition.defaultProps = {
107
110
  type: 'fade',
package/lib/Transition/BaseTransition/index.js CHANGED
@@ -1,11 +1,10 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = exports.BaseTransition = void 0;
8
- var _react = _interopRequireDefault(require("react"));
7
+ var _react = require("react");
9
8
  var _getClassList = require("@instructure/ui-dom-utils/lib/getClassList.js");
10
9
  var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
11
10
  var _ensureSingleChild = require("@instructure/ui-react-utils/lib/ensureSingleChild.js");
@@ -49,7 +48,7 @@ private: true
49
48
  Note: this is forked from https://github.com/react-bootstrap/react-overlays/blob/master/src/Transition.js
50
49
  so that it works with css modules. The internals are pretty different now, but it has roughly the same api.
51
50
  **/
52
- class BaseTransition extends _react.default.Component {
51
+ class BaseTransition extends _react.Component {
53
52
  constructor(...args) {
54
53
  super(...args);
55
54
  this._timeouts = [];
package/lib/Transition/__new-tests__/Transition.test.js CHANGED
@@ -1,12 +1,12 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
- var _react = _interopRequireWildcard(require("react"));
3
+ var _react = require("react");
5
4
  var _react2 = require("@testing-library/react");
6
5
  var _vitest = require("vitest");
7
6
  require("@testing-library/jest-dom");
8
7
  var _index = require("../index");
9
8
  var _styles = require("../styles");
9
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
10
10
  var _div, _div2, _ExampleComponent2, _div3, _div4, _Transition3, _Transition4, _div5, _div6, _div7, _div8, _div9, _div10, _div11;
11
11
  /*
12
12
  * The MIT License (MIT)
@@ -38,7 +38,9 @@ const getClass = (type, phase) => {
38
38
  };
39
39
  class ExampleComponent extends _react.Component {
40
40
  render() {
41
- return _div || (_div = /*#__PURE__*/_react.default.createElement("div", null, COMPONENT_TEXT));
41
+ return _div || (_div = (0, _jsxRuntime.jsx)("div", {
42
+ children: COMPONENT_TEXT
43
+ }));
42
44
  }
43
45
  }
44
46
  ExampleComponent.displayName = "ExampleComponent";
@@ -58,19 +60,23 @@ describe('<Transition />', () => {
58
60
  const expectTypeClass = function (type) {
59
61
  var _Transition, _Transition2;
60
62
  it(`should correctly apply classes for '${type}' with html element`, () => {
61
- const _render = (0, _react2.render)(_Transition || (_Transition = /*#__PURE__*/_react.default.createElement(_index.Transition, {
63
+ const _render = (0, _react2.render)(_Transition || (_Transition = (0, _jsxRuntime.jsx)(_index.Transition, {
62
64
  type: type,
63
- in: true
64
- }, _div2 || (_div2 = /*#__PURE__*/_react.default.createElement("div", null, "hello"))))),
65
+ in: true,
66
+ children: _div2 || (_div2 = (0, _jsxRuntime.jsx)("div", {
67
+ children: "hello"
68
+ }))
69
+ }))),
65
70
  getByText = _render.getByText;
66
71
  const element = getByText('hello');
67
72
  expect(element).toHaveClass(getClass(type, 'entered'));
68
73
  });
69
74
  it(`should correctly apply classes for '${type}' with Component`, () => {
70
- const _render2 = (0, _react2.render)(_Transition2 || (_Transition2 = /*#__PURE__*/_react.default.createElement(_index.Transition, {
75
+ const _render2 = (0, _react2.render)(_Transition2 || (_Transition2 = (0, _jsxRuntime.jsx)(_index.Transition, {
71
76
  type: type,
72
- in: true
73
- }, _ExampleComponent2 || (_ExampleComponent2 = /*#__PURE__*/_react.default.createElement(ExampleComponent, null))))),
77
+ in: true,
78
+ children: _ExampleComponent2 || (_ExampleComponent2 = (0, _jsxRuntime.jsx)(ExampleComponent, {}))
79
+ }))),
74
80
  getByText = _render2.getByText;
75
81
  const element = getByText(COMPONENT_TEXT);
76
82
  expect(element).toHaveClass(getClass(type, 'entered'));
@@ -81,72 +87,96 @@ describe('<Transition />', () => {
81
87
  });
82
88
  it('should correctly apply enter and exit classes', async () => {
83
89
  const type = 'fade';
84
- const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Transition, {
90
+ const _render3 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Transition, {
85
91
  type: type,
86
- in: true
87
- }, _div3 || (_div3 = /*#__PURE__*/_react.default.createElement("div", null, "hello")))),
92
+ in: true,
93
+ children: _div3 || (_div3 = (0, _jsxRuntime.jsx)("div", {
94
+ children: "hello"
95
+ }))
96
+ })),
88
97
  getByText = _render3.getByText,
89
98
  rerender = _render3.rerender;
90
99
  const element = getByText('hello');
91
100
  expect(element).toHaveClass(getClass(type, 'entered'));
92
- rerender(/*#__PURE__*/_react.default.createElement(_index.Transition, {
101
+ rerender((0, _jsxRuntime.jsx)(_index.Transition, {
93
102
  type: type,
94
- in: false
95
- }, _div4 || (_div4 = /*#__PURE__*/_react.default.createElement("div", null, "hello"))));
103
+ in: false,
104
+ children: _div4 || (_div4 = (0, _jsxRuntime.jsx)("div", {
105
+ children: "hello"
106
+ }))
107
+ }));
96
108
  await (0, _react2.waitFor)(() => {
97
109
  expect(element).toHaveClass(getClass(type, 'exited'));
98
110
  });
99
111
  });
100
112
  it('should remove component from DOM when `unmountOnExit` is set', async () => {
101
- const _render4 = (0, _react2.render)(_Transition3 || (_Transition3 = /*#__PURE__*/_react.default.createElement(_index.Transition, {
113
+ const _render4 = (0, _react2.render)(_Transition3 || (_Transition3 = (0, _jsxRuntime.jsx)(_index.Transition, {
102
114
  type: "fade",
103
115
  in: true,
104
- unmountOnExit: true
105
- }, /*#__PURE__*/_react.default.createElement("div", null, "hello")))),
116
+ unmountOnExit: true,
117
+ children: (0, _jsxRuntime.jsx)("div", {
118
+ children: "hello"
119
+ })
120
+ }))),
106
121
  getByText = _render4.getByText,
107
122
  rerender = _render4.rerender;
108
123
  expect(getByText('hello')).toBeInTheDocument();
109
- rerender(_Transition4 || (_Transition4 = /*#__PURE__*/_react.default.createElement(_index.Transition, {
124
+ rerender(_Transition4 || (_Transition4 = (0, _jsxRuntime.jsx)(_index.Transition, {
110
125
  type: "fade",
111
126
  in: false,
112
- unmountOnExit: true
113
- }, /*#__PURE__*/_react.default.createElement("div", null, "hello"))));
127
+ unmountOnExit: true,
128
+ children: (0, _jsxRuntime.jsx)("div", {
129
+ children: "hello"
130
+ })
131
+ })));
114
132
  await (0, _react2.waitForElementToBeRemoved)(() => getByText('hello'));
115
133
  });
116
134
  it('should not execute enter transition with `transitionEnter` set to false', async () => {
117
135
  const onEntering = _vitest.vi.fn();
118
- const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Transition, {
136
+ const _render5 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Transition, {
119
137
  type: "fade",
120
138
  in: false,
121
139
  transitionEnter: true,
122
- onEntering: onEntering
123
- }, _div5 || (_div5 = /*#__PURE__*/_react.default.createElement("div", null, "hello")))),
140
+ onEntering: onEntering,
141
+ children: _div5 || (_div5 = (0, _jsxRuntime.jsx)("div", {
142
+ children: "hello"
143
+ }))
144
+ })),
124
145
  rerender = _render5.rerender;
125
- rerender(/*#__PURE__*/_react.default.createElement(_index.Transition, {
146
+ rerender((0, _jsxRuntime.jsx)(_index.Transition, {
126
147
  type: "fade",
127
148
  in: true,
128
149
  transitionEnter: false,
129
- onEntering: onEntering
130
- }, _div6 || (_div6 = /*#__PURE__*/_react.default.createElement("div", null, "hello"))));
150
+ onEntering: onEntering,
151
+ children: _div6 || (_div6 = (0, _jsxRuntime.jsx)("div", {
152
+ children: "hello"
153
+ }))
154
+ }));
131
155
  await (0, _react2.waitFor)(() => {
132
156
  expect(onEntering).not.toHaveBeenCalled();
133
157
  });
134
158
  });
135
159
  it('should not execute exit transition with `transitionExit` set to false', async () => {
136
160
  const onExiting = _vitest.vi.fn();
137
- const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Transition, {
161
+ const _render6 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Transition, {
138
162
  type: "fade",
139
163
  in: true,
140
164
  transitionExit: false,
141
- onExiting: onExiting
142
- }, _div7 || (_div7 = /*#__PURE__*/_react.default.createElement("div", null, "hello")))),
165
+ onExiting: onExiting,
166
+ children: _div7 || (_div7 = (0, _jsxRuntime.jsx)("div", {
167
+ children: "hello"
168
+ }))
169
+ })),
143
170
  rerender = _render6.rerender;
144
- rerender(/*#__PURE__*/_react.default.createElement(_index.Transition, {
171
+ rerender((0, _jsxRuntime.jsx)(_index.Transition, {
145
172
  type: "fade",
146
173
  in: false,
147
174
  transitionExit: false,
148
- onExiting: onExiting
149
- }, _div8 || (_div8 = /*#__PURE__*/_react.default.createElement("div", null, "hello"))));
175
+ onExiting: onExiting,
176
+ children: _div8 || (_div8 = (0, _jsxRuntime.jsx)("div", {
177
+ children: "hello"
178
+ }))
179
+ }));
150
180
  await (0, _react2.waitFor)(() => {
151
181
  expect(onExiting).not.toHaveBeenCalled();
152
182
  });
@@ -155,13 +185,16 @@ describe('<Transition />', () => {
155
185
  const onEnter = _vitest.vi.fn();
156
186
  const onEntering = _vitest.vi.fn();
157
187
  const onEntered = _vitest.vi.fn();
158
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Transition, {
188
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Transition, {
159
189
  type: "fade",
160
190
  in: true,
161
191
  onEnter: onEnter,
162
192
  onEntering: onEntering,
163
- onEntered: onEntered
164
- }, _div9 || (_div9 = /*#__PURE__*/_react.default.createElement("div", null, "hello"))));
193
+ onEntered: onEntered,
194
+ children: _div9 || (_div9 = (0, _jsxRuntime.jsx)("div", {
195
+ children: "hello"
196
+ }))
197
+ }));
165
198
  await (0, _react2.waitFor)(() => {
166
199
  expect(onEnter).toHaveBeenCalled();
167
200
  expect(onEntering).toHaveBeenCalled();
@@ -172,21 +205,27 @@ describe('<Transition />', () => {
172
205
  const onExit = _vitest.vi.fn();
173
206
  const onExiting = _vitest.vi.fn();
174
207
  const onExited = _vitest.vi.fn();
175
- const _render7 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Transition, {
208
+ const _render7 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Transition, {
176
209
  type: "fade",
177
210
  in: true,
178
211
  onExit: onExit,
179
212
  onExiting: onExiting,
180
- onExited: onExited
181
- }, _div10 || (_div10 = /*#__PURE__*/_react.default.createElement("div", null, "hello")))),
213
+ onExited: onExited,
214
+ children: _div10 || (_div10 = (0, _jsxRuntime.jsx)("div", {
215
+ children: "hello"
216
+ }))
217
+ })),
182
218
  rerender = _render7.rerender;
183
- rerender(/*#__PURE__*/_react.default.createElement(_index.Transition, {
219
+ rerender((0, _jsxRuntime.jsx)(_index.Transition, {
184
220
  type: "fade",
185
221
  in: false,
186
222
  onExit: onExit,
187
223
  onExiting: onExiting,
188
- onExited: onExited
189
- }, _div11 || (_div11 = /*#__PURE__*/_react.default.createElement("div", null, "hello"))));
224
+ onExited: onExited,
225
+ children: _div11 || (_div11 = (0, _jsxRuntime.jsx)("div", {
226
+ children: "hello"
227
+ }))
228
+ }));
190
229
  await (0, _react2.waitFor)(() => {
191
230
  expect(onExit).toHaveBeenCalled();
192
231
  expect(onExiting).toHaveBeenCalled();
package/lib/Transition/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.Transition = 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 _ms = require("@instructure/ui-utils/lib/ms.js");
12
11
  var _testable = require("@instructure/ui-testable/lib/testable.js");
13
12
  var _emotion = require("@instructure/emotion");
@@ -15,6 +14,7 @@ var _styles = _interopRequireDefault(require("./styles"));
15
14
  var _theme = _interopRequireDefault(require("./theme"));
16
15
  var _BaseTransition = require("./BaseTransition");
17
16
  var _props = require("./props");
17
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
18
  const _excluded = ["type", "children", "styles"];
19
19
  var _dec, _dec2, _class, _Transition;
20
20
  /*
@@ -40,8 +40,6 @@ var _dec, _dec2, _class, _Transition;
40
40
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
41
41
  * SOFTWARE.
42
42
  */
43
- /** @jsx jsx */
44
- /** @jsxFrag React.Fragment */
45
43
  // test is breaking without importing React here
46
44
  /**
47
45
  ---
@@ -77,7 +75,7 @@ let Transition = exports.Transition = (_dec = (0, _emotion.withStyle)(_styles.de
77
75
  // Todo: try to refactor or replace Transition/BaseTransition component in v9.0.0. so that it is not class based
78
76
  this.renderTransitionHelper = () => {
79
77
  const styles = this.props.styles;
80
- return (0, _emotion.jsx)(_emotion.Global, {
78
+ return (0, _jsxRuntime.jsx)(_emotion.Global, {
81
79
  styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
82
80
  });
83
81
  };
@@ -97,18 +95,22 @@ let Transition = exports.Transition = (_dec = (0, _emotion.withStyle)(_styles.de
97
95
  styles = _this$props3.styles,
98
96
  props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
99
97
  const duration = (0, _ms.ms)(styles.duration);
100
- return (0, _emotion.jsx)(_react.default.Fragment, null, this.renderTransitionHelper(), (0, _emotion.jsx)(_BaseTransition.BaseTransition, Object.assign({}, props, {
101
- enterDelay: duration,
102
- exitDelay: duration,
103
- transitionClassName: styles.classNames.transitioning,
104
- exitedClassName: styles.classNames.exited,
105
- exitingClassName: styles.classNames.exiting,
106
- enteredClassName: styles.classNames.entered,
107
- enteringClassName: styles.classNames.entering,
108
- onEntered: this.handleEntered,
109
- onExited: this.handleExited,
110
- elementRef: this.handleRef
111
- }), children));
98
+ return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
99
+ children: [this.renderTransitionHelper(), (0, _jsxRuntime.jsx)(_BaseTransition.BaseTransition, {
100
+ ...props,
101
+ enterDelay: duration,
102
+ exitDelay: duration,
103
+ transitionClassName: styles.classNames.transitioning,
104
+ exitedClassName: styles.classNames.exited,
105
+ exitingClassName: styles.classNames.exiting,
106
+ enteredClassName: styles.classNames.entered,
107
+ enteringClassName: styles.classNames.entering,
108
+ onEntered: this.handleEntered,
109
+ onExited: this.handleExited,
110
+ elementRef: this.handleRef,
111
+ children: children
112
+ })]
113
+ });
112
114
  }
113
115
  }, _Transition.displayName = "Transition", _Transition.componentId = 'Transition', _Transition.allowedProps = _props.allowedProps, _Transition.propTypes = _props.propTypes, _Transition.defaultProps = {
114
116
  type: 'fade',