@instructure/ui-react-utils 10.16.0 → 10.16.1-pr-snapshot-1744893671793

package/lib/DeterministicIdContext/DeterministicIdContextProvider.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DeterministicIdContextProvider = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _DeterministicIdContext = require("./DeterministicIdContext");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
  * The MIT License (MIT)
  *
@@ -47,8 +46,9 @@ const DeterministicIdContextProvider = ({
   children,
   instanceCounterMap = _DeterministicIdContext.defaultDeterministicIDMap
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_DeterministicIdContext.DeterministicIdContext.Provider, {
-    value: instanceCounterMap
-  }, children);
+  return (0, _jsxRuntime.jsx)(_DeterministicIdContext.DeterministicIdContext.Provider, {
+    value: instanceCounterMap,
+    children: children
+  });
 };
 exports.DeterministicIdContextProvider = DeterministicIdContextProvider;

package/lib/DeterministicIdContext/withDeterministicId.js

@@ -1,17 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withDeterministicId = exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
 var _DeterministicIdContext = require("./DeterministicIdContext");
 var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
 var _generateId = require("@instructure/ui-utils/lib/generateId.js");
 var _console = require("@instructure/console");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
  * The MIT License (MIT)
  *
@@ -52,10 +52,11 @@ const withDeterministicId = exports.withDeterministicId = (0, _decorator.decorat
     if (props.deterministicId) {
       (0, _console.warn)(false, `Manually passing the "deterministicId" property is not allowed on the ${componentName} component.\n`, props.deterministicId);
     }
-    return /*#__PURE__*/_react.default.createElement(ComposedComponent, Object.assign({
+    return (0, _jsxRuntime.jsx)(ComposedComponent, {
       ref: ref,
-      deterministicId: deterministicId
-    }, props));
+      deterministicId: deterministicId,
+      ...props
+    });
   });
   (0, _hoistNonReactStatics.default)(WithDeterministicId, ComposedComponent);
 

package/lib/__new-tests__/DeterministicIdContext.test.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 var _react2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _DeterministicIdContext = require("../DeterministicIdContext");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class, _TestComponent, _div, _WrapperComponent2, _div2, _div3, _div4;
 /*
  * The MIT License (MIT)
@@ -29,17 +29,20 @@ var _dec, _class, _TestComponent, _div, _WrapperComponent2, _div2, _div3, _div4;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-let TestComponent = (_dec = (0, _DeterministicIdContext.withDeterministicId)(), _dec(_class = (_TestComponent = class TestComponent extends _react.default.Component {
+let TestComponent = (_dec = (0, _DeterministicIdContext.withDeterministicId)(), _dec(_class = (_TestComponent = class TestComponent extends _react.Component {
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return (0, _jsxRuntime.jsx)("div", {
       "data-testid": "test-component",
-      id: this.props.deterministicId()
-    }, this.props.children);
+      id: this.props.deterministicId(),
+      children: this.props.children
+    });
   }
 }, _TestComponent.displayName = "TestComponent", _TestComponent)) || _class);
-class WrapperComponent extends _react.default.Component {
+class WrapperComponent extends _react.Component {
   render() {
-    return _div || (_div = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(TestComponent, null)));
+    return _div || (_div = (0, _jsxRuntime.jsx)("div", {
+      children: (0, _jsxRuntime.jsx)(TestComponent, {})
+    }));
   }
 }
 WrapperComponent.displayName = "WrapperComponent";
@@ -49,22 +52,26 @@ const uniqueIds = el => {
 };
 describe('DeterministicIdContext', () => {
   it('can be found and tested with ReactTestUtils', () => {
-    (0, _react2.render)(_WrapperComponent2 || (_WrapperComponent2 = /*#__PURE__*/_react.default.createElement(WrapperComponent, null)));
+    (0, _react2.render)(_WrapperComponent2 || (_WrapperComponent2 = (0, _jsxRuntime.jsx)(WrapperComponent, {})));
     const testComponent = _react2.screen.getByTestId('test-component');
     expect(testComponent).toBeInTheDocument();
     expect(testComponent.id).toBeDefined();
   });
   it('should generate unique ids without Provider wrapper', () => {
-    (0, _react2.render)(_div2 || (_div2 = /*#__PURE__*/_react.default.createElement("div", {
-      "data-testid": "test-components"
-    }, /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null))));
+    (0, _react2.render)(_div2 || (_div2 = (0, _jsxRuntime.jsxs)("div", {
+      "data-testid": "test-components",
+      children: [(0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {})]
+    })));
     const el = _react2.screen.getByTestId('test-components');
     expect(uniqueIds(el)).toBe(true);
   });
   it('should generate unique ids when components are rendered both out and inside of provider', () => {
-    (0, _react2.render)(_div3 || (_div3 = /*#__PURE__*/_react.default.createElement("div", {
-      "data-testid": "test-components"
-    }, /*#__PURE__*/_react.default.createElement(_DeterministicIdContext.DeterministicIdContextProvider, null, /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null)), /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null))));
+    (0, _react2.render)(_div3 || (_div3 = (0, _jsxRuntime.jsxs)("div", {
+      "data-testid": "test-components",
+      children: [(0, _jsxRuntime.jsxs)(_DeterministicIdContext.DeterministicIdContextProvider, {
+        children: [(0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {})]
+      }), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {})]
+    })));
     const el = _react2.screen.getByTestId('test-components');
     expect(uniqueIds(el)).toBe(true);
   });
@@ -72,17 +79,20 @@ describe('DeterministicIdContext', () => {
     const Wrapper = ({
       children
     }) => {
-      return /*#__PURE__*/_react.default.createElement(_DeterministicIdContext.DeterministicIdContextProvider, null, /*#__PURE__*/_react.default.createElement("div", {
-        "data-testid": "wrapper"
-      }, children));
+      return (0, _jsxRuntime.jsx)(_DeterministicIdContext.DeterministicIdContextProvider, {
+        children: (0, _jsxRuntime.jsx)("div", {
+          "data-testid": "wrapper",
+          children: children
+        })
+      });
     };
     const children = [];
     for (let i = 0; i < 10; i++) {
-      children.push(/*#__PURE__*/_react.default.createElement(TestComponent, {
-        key: i
-      }));
+      children.push((0, _jsxRuntime.jsx)(TestComponent, {}, i));
     }
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(Wrapper, null, children));
+    (0, _react2.render)((0, _jsxRuntime.jsx)(Wrapper, {
+      children: children
+    }));
     const el = _react2.screen.getByTestId('wrapper');
     expect(uniqueIds(el)).toBe(true);
   });
@@ -90,9 +100,10 @@ describe('DeterministicIdContext', () => {
     const instUIInstanceCounter = '__INSTUI_GLOBAL_INSTANCE_COUNTER__';
     const counterValue = 345;
     globalThis[instUIInstanceCounter].set('TestComponent', counterValue);
-    (0, _react2.render)(_div4 || (_div4 = /*#__PURE__*/_react.default.createElement("div", {
-      "data-testid": "test-components"
-    }, /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null), /*#__PURE__*/_react.default.createElement(TestComponent, null))));
+    (0, _react2.render)(_div4 || (_div4 = (0, _jsxRuntime.jsxs)("div", {
+      "data-testid": "test-components",
+      children: [(0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {}), (0, _jsxRuntime.jsx)(TestComponent, {})]
+    })));
     const instanceCounter = globalThis[instUIInstanceCounter];
     expect(instanceCounter.get('TestComponent')).toBe(counterValue + 5);
   });

package/lib/__new-tests__/callRenderProp.test.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _callRenderProp = require("../callRenderProp");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _div, _div2;
 /*
  * The MIT License (MIT)
@@ -46,18 +47,22 @@ describe('callRenderProp', () => {
     expect((0, _callRenderProp.callRenderProp)(false)).toEqual(false);
   });
   it('JSX literals', () => {
-    const Foo = () => _div || (_div = /*#__PURE__*/_react.default.createElement("div", null, "hello"));
-    expect((0, _callRenderProp.callRenderProp)(/*#__PURE__*/_react.default.createElement(Foo, null))).toStrictEqual(/*#__PURE__*/_react.default.createElement(Foo, null));
+    const Foo = () => _div || (_div = (0, _jsxRuntime.jsx)("div", {
+      children: "hello"
+    }));
+    expect((0, _callRenderProp.callRenderProp)((0, _jsxRuntime.jsx)(Foo, {}))).toStrictEqual((0, _jsxRuntime.jsx)(Foo, {}));
   });
   it('React classes', () => {
-    class Foo extends _react.default.Component {
+    class Foo extends _react.Component {
       render() {
-        return _div2 || (_div2 = /*#__PURE__*/_react.default.createElement("div", null, "hello"));
+        return _div2 || (_div2 = (0, _jsxRuntime.jsx)("div", {
+          children: "hello"
+        }));
       }
     }
     Foo.displayName = "Foo";
     const Result = (0, _callRenderProp.callRenderProp)(Foo);
-    expect(Result).toStrictEqual(/*#__PURE__*/_react.default.createElement(Foo, null));
+    expect(Result).toStrictEqual((0, _jsxRuntime.jsx)(Foo, {}));
     const _render = (0, _react2.render)(Result),
       getByText = _render.getByText;
     expect(getByText('hello')).toBeInTheDocument();
@@ -67,7 +72,9 @@ describe('callRenderProp', () => {
       return 'some text';
     };
     const result = (0, _callRenderProp.callRenderProp)(Baz);
-    const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", null, result)),
+    const _render2 = (0, _react2.render)((0, _jsxRuntime.jsx)("div", {
+        children: result
+      })),
       getByText = _render2.getByText;
     expect(getByText('some text')).toBeInTheDocument();
   });
@@ -83,7 +90,9 @@ describe('callRenderProp', () => {
     // if it was a real untranspiled fat arrow function.
     if (Baz.prototype) Baz.prototype = void 0;
     const result = (0, _callRenderProp.callRenderProp)(Baz);
-    const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", null, result)),
+    const _render3 = (0, _react2.render)((0, _jsxRuntime.jsx)("div", {
+        children: result
+      })),
       getByText = _render3.getByText;
     expect(getByText('some text')).toBeInTheDocument();
   });
@@ -91,18 +100,24 @@ describe('callRenderProp', () => {
     it('should pass props correctly to functions', () => {
       const someFunc = ({
         shape
-      }) => /*#__PURE__*/_react.default.createElement("div", null, shape);
+      }) => (0, _jsxRuntime.jsx)("div", {
+        children: shape
+      });
       const result = (0, _callRenderProp.callRenderProp)(someFunc, {
         shape: 'rectangle'
       });
-      const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", null, result)),
+      const _render4 = (0, _react2.render)((0, _jsxRuntime.jsx)("div", {
+          children: result
+        })),
         getByText = _render4.getByText;
       expect(getByText('rectangle')).toBeInTheDocument();
     });
     it('should pass props correctly to React classes', () => {
-      class Foo extends _react.default.Component {
+      class Foo extends _react.Component {
         render() {
-          return /*#__PURE__*/_react.default.createElement("div", null, this.props.shape);
+          return (0, _jsxRuntime.jsx)("div", {
+            children: this.props.shape
+          });
         }
       }
       Foo.displayName = "Foo";
@@ -115,7 +130,9 @@ describe('callRenderProp', () => {
       const result = (0, _callRenderProp.callRenderProp)(Foo, {
         shape: 'rectangle'
       });
-      const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", null, result)),
+      const _render5 = (0, _react2.render)((0, _jsxRuntime.jsx)("div", {
+          children: result
+        })),
         getByText = _render5.getByText;
       expect(getByText('rectangle')).toBeInTheDocument();
     });

package/lib/__new-tests__/deprecated.test.js

@@ -1,13 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _vitest = require("vitest");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _deprecated = require("../deprecated");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
  * The MIT License (MIT)
  *
@@ -34,7 +34,9 @@ var _deprecated = require("../deprecated");
 
 class TestComponent extends _react.Component {
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", null, this.props.qux, " ", this.props.bar);
+    return (0, _jsxRuntime.jsxs)("div", {
+      children: [this.props.qux, " ", this.props.bar]
+    });
   }
 }
 TestComponent.displayName = "TestComponent";
@@ -55,7 +57,7 @@ describe('@deprecated', () => {
     })(TestComponent);
     it('should warn when suggesting new prop when using old prop', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-      (0, _react2.render)(_DeprecatedComponent || (_DeprecatedComponent = /*#__PURE__*/_react.default.createElement(DeprecatedComponent, {
+      (0, _react2.render)(_DeprecatedComponent || (_DeprecatedComponent = (0, _jsxRuntime.jsx)(DeprecatedComponent, {
         foo: "Jane"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] `foo` is deprecated and will be removed in version 2.1.0. Use `bar` instead. ';
@@ -64,7 +66,7 @@ describe('@deprecated', () => {
     });
     it('should warn when using old prop with no new prop', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-      (0, _react2.render)(_DeprecatedComponent2 || (_DeprecatedComponent2 = /*#__PURE__*/_react.default.createElement(DeprecatedComponent, {
+      (0, _react2.render)(_DeprecatedComponent2 || (_DeprecatedComponent2 = (0, _jsxRuntime.jsx)(DeprecatedComponent, {
         baz: "Goodbye"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] `baz` is deprecated and will be removed in version 2.1.0.';
@@ -73,7 +75,7 @@ describe('@deprecated', () => {
     });
     it('should not output a warning using new prop', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-      (0, _react2.render)(_DeprecatedComponent3 || (_DeprecatedComponent3 = /*#__PURE__*/_react.default.createElement(DeprecatedComponent, {
+      (0, _react2.render)(_DeprecatedComponent3 || (_DeprecatedComponent3 = (0, _jsxRuntime.jsx)(DeprecatedComponent, {
         bar: "Jane"
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();
@@ -85,7 +87,7 @@ describe('@deprecated', () => {
     const DeprecatedComponent = (0, _deprecated.deprecated)('3.4.0')(TestComponent);
     it('should warn that the entire component is deprecated if no old props are supplied', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-      (0, _react2.render)(_DeprecatedComponent4 || (_DeprecatedComponent4 = /*#__PURE__*/_react.default.createElement(DeprecatedComponent, null)));
+      (0, _react2.render)(_DeprecatedComponent4 || (_DeprecatedComponent4 = (0, _jsxRuntime.jsx)(DeprecatedComponent, {})));
       const expectedWarningMessage = 'Warning: [TestComponent] is deprecated and will be removed in version 3.4.0.';
       expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       consoleWarningSpy.mockRestore();
@@ -97,7 +99,7 @@ describe('@deprecated', () => {
     it('should warn that the component is deprecated and output a warning that the package changed', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
       const expectedWarningMessage = 'Warning: [TestComponent] is deprecated and will be removed in version 5.0.0. It has been moved from @instructure/ui-forms to @instructure/ui-number-input.';
-      (0, _react2.render)(_DeprecatedComponent5 || (_DeprecatedComponent5 = /*#__PURE__*/_react.default.createElement(DeprecatedComponent, null)));
+      (0, _react2.render)(_DeprecatedComponent5 || (_DeprecatedComponent5 = (0, _jsxRuntime.jsx)(DeprecatedComponent, {})));
       expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       consoleWarningSpy.mockRestore();
     });
@@ -107,7 +109,9 @@ describe('@deprecated', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
       class DeprecatedPropValueComponent extends _react.Component {
         render() {
-          return /*#__PURE__*/_react.default.createElement("div", null, this.props.color);
+          return (0, _jsxRuntime.jsx)("div", {
+            children: this.props.color
+          });
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -117,7 +121,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DeprecatedPropValueComponent, {
+      (0, _react2.render)((0, _jsxRuntime.jsx)(DeprecatedPropValueComponent, {
         color: "yellow"
       }));
       expect(consoleWarningSpy).not.toHaveBeenCalled();
@@ -128,7 +132,9 @@ describe('@deprecated', () => {
       const color = 'orange';
       class DeprecatedPropValueComponent extends _react.Component {
         render() {
-          return /*#__PURE__*/_react.default.createElement("div", null, this.props.color);
+          return (0, _jsxRuntime.jsx)("div", {
+            children: this.props.color
+          });
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -138,7 +144,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DeprecatedPropValueComponent, {
+      (0, _react2.render)((0, _jsxRuntime.jsx)(DeprecatedPropValueComponent, {
         color: color
       }));
       const expectedWarningMessage = `The '${color}' value for the \`color\` prop is deprecated.`;
@@ -151,7 +157,9 @@ describe('@deprecated', () => {
       const message = 'It will be removed in v8.0.0.';
       class DeprecatedPropValueComponent extends _react.Component {
         render() {
-          return /*#__PURE__*/_react.default.createElement("div", null, this.props.color);
+          return (0, _jsxRuntime.jsx)("div", {
+            children: this.props.color
+          });
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -161,7 +169,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DeprecatedPropValueComponent, {
+      (0, _react2.render)((0, _jsxRuntime.jsx)(DeprecatedPropValueComponent, {
         color: color
       }));
       const expectedWarningMessage = `The '${color}' value for the \`color\` prop is deprecated. ${message}`;
@@ -174,7 +182,9 @@ describe('@deprecated', () => {
       const color = 'gold';
       class DeprecatedPropValueComponent extends _react.Component {
         render() {
-          return /*#__PURE__*/_react.default.createElement("div", null, this.props.color);
+          return (0, _jsxRuntime.jsx)("div", {
+            children: this.props.color
+          });
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -184,7 +194,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DeprecatedPropValueComponent, {
+      (0, _react2.render)((0, _jsxRuntime.jsx)(DeprecatedPropValueComponent, {
         color: color
       }));
       const _messageMock$mock$cal = messageMock.mock.calls[0][0],
@@ -204,7 +214,9 @@ describe('@deprecated', () => {
       const color = 'gold';
       class DeprecatedPropValueComponent extends _react.Component {
         render() {
-          return /*#__PURE__*/_react.default.createElement("div", null, this.props.color);
+          return (0, _jsxRuntime.jsx)("div", {
+            children: this.props.color
+          });
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -217,7 +229,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DeprecatedPropValueComponent, {
+      (0, _react2.render)((0, _jsxRuntime.jsx)(DeprecatedPropValueComponent, {
         color: color
       }));
       const expectedWarningMessage = `The ${color} value for color has been deprecated. Use the FooBar component with the 'baz' prop set instead.`;

package/lib/__new-tests__/experimental.test.js

@@ -1,13 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _vitest = require("vitest");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _experimental = require("../experimental");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
  * The MIT License (MIT)
  *
@@ -34,7 +34,9 @@ var _experimental = require("../experimental");
 
 class TestComponent extends _react.Component {
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", null, this.props.qux, " ", this.props.bar);
+    return (0, _jsxRuntime.jsxs)("div", {
+      children: [this.props.qux, " ", this.props.bar]
+    });
   }
 }
 TestComponent.displayName = "TestComponent";
@@ -52,7 +54,7 @@ describe('@experimental', () => {
     const ExperimentalComponent = (0, _experimental.experimental)(['bar'])(TestComponent);
     it('should warn when using an experimental prop', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-      (0, _react2.render)(_ExperimentalComponen || (_ExperimentalComponen = /*#__PURE__*/_react.default.createElement(ExperimentalComponent, {
+      (0, _react2.render)(_ExperimentalComponen || (_ExperimentalComponen = (0, _jsxRuntime.jsx)(ExperimentalComponent, {
         bar: "Jane"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] The `bar` prop is experimental and its API could change significantly in a future release.';
@@ -61,7 +63,7 @@ describe('@experimental', () => {
     });
     it('should not output a warning using a non-experimental prop', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-      (0, _react2.render)(_ExperimentalComponen2 || (_ExperimentalComponen2 = /*#__PURE__*/_react.default.createElement(ExperimentalComponent, {
+      (0, _react2.render)(_ExperimentalComponen2 || (_ExperimentalComponen2 = (0, _jsxRuntime.jsx)(ExperimentalComponent, {
         qux: "Jane"
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();
@@ -69,7 +71,7 @@ describe('@experimental', () => {
     });
     it('should not output a warning for an experimental prop when dangerously ignored', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-      (0, _react2.render)(_ExperimentalComponen3 || (_ExperimentalComponen3 = /*#__PURE__*/_react.default.createElement(ExperimentalComponent, {
+      (0, _react2.render)(_ExperimentalComponen3 || (_ExperimentalComponen3 = (0, _jsxRuntime.jsx)(ExperimentalComponent, {
         qux: "Jane",
         __dangerouslyIgnoreExperimentalWarnings: true
       })));
@@ -82,14 +84,14 @@ describe('@experimental', () => {
     const ExperimentalComponent = (0, _experimental.experimental)()(TestComponent);
     it('should warn that the entire component is experimental if no props are supplied', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-      (0, _react2.render)(_ExperimentalComponen4 || (_ExperimentalComponen4 = /*#__PURE__*/_react.default.createElement(ExperimentalComponent, null)));
+      (0, _react2.render)(_ExperimentalComponen4 || (_ExperimentalComponen4 = (0, _jsxRuntime.jsx)(ExperimentalComponent, {})));
       const expectedWarningMessage = 'Warning: [TestComponent] is experimental and its API could change significantly in a future release.';
       expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       consoleWarningSpy.mockRestore();
     });
     it('should not output a warning for a component when dangerously ignored', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-      (0, _react2.render)(_ExperimentalComponen5 || (_ExperimentalComponen5 = /*#__PURE__*/_react.default.createElement(ExperimentalComponent, {
+      (0, _react2.render)(_ExperimentalComponen5 || (_ExperimentalComponen5 = (0, _jsxRuntime.jsx)(ExperimentalComponent, {
         __dangerouslyIgnoreExperimentalWarnings: true
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();

package/lib/__new-tests__/hack.test.js

@@ -1,13 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _vitest = require("vitest");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _hack = require("../hack");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
  * The MIT License (MIT)
  *
@@ -34,7 +34,9 @@ var _hack = require("../hack");
 
 class TestComponent extends _react.Component {
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", null, this.props.qux, " ", this.props.bar);
+    return (0, _jsxRuntime.jsxs)("div", {
+      children: [this.props.qux, " ", this.props.bar]
+    });
   }
 }
 TestComponent.displayName = "TestComponent";
@@ -52,7 +54,7 @@ describe('@hack', () => {
     const HackComponent = (0, _hack.hack)(['bar'])(TestComponent);
     it('should warn when using an hack prop', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-      (0, _react2.render)(_HackComponent || (_HackComponent = /*#__PURE__*/_react.default.createElement(HackComponent, {
+      (0, _react2.render)(_HackComponent || (_HackComponent = (0, _jsxRuntime.jsx)(HackComponent, {
         bar: "Jane"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] The `bar` prop is a temporary hack and will be removed in a future release.';
@@ -61,7 +63,7 @@ describe('@hack', () => {
     });
     it('should not output a warning using a non-hack prop', () => {
       const consoleWarningSpy = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-      (0, _react2.render)(_HackComponent2 || (_HackComponent2 = /*#__PURE__*/_react.default.createElement(HackComponent, {
+      (0, _react2.render)(_HackComponent2 || (_HackComponent2 = (0, _jsxRuntime.jsx)(HackComponent, {
         qux: "Jane"
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();

package/lib/__new-tests__/safeCloneElement.test.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
 var _vitest = require("vitest");
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _safeCloneElement = require("../safeCloneElement");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
  * The MIT License (MIT)
  *
@@ -42,8 +41,8 @@ describe('safeCloneElement', () => {
   it('should preserve refs', () => {
     const origRef = _vitest.vi.fn();
     const cloneRef = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(SafeClone, {
-      element: /*#__PURE__*/_react.default.createElement("div", {
+    (0, _react.render)((0, _jsxRuntime.jsx)(SafeClone, {
+      element: (0, _jsxRuntime.jsx)("div", {
         ref: origRef
       }),
       props: {
@@ -56,15 +55,15 @@ describe('safeCloneElement', () => {
   it('should preserve event handlers', () => {
     const onClickA = _vitest.vi.fn();
     const onClickB = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(SafeClone, {
-      element: /*#__PURE__*/_react.default.createElement("button", {
+    (0, _react.render)((0, _jsxRuntime.jsx)(SafeClone, {
+      element: (0, _jsxRuntime.jsx)("button", {
         onClick: onClickA
       }),
       props: {
         onClick: onClickB
       }
     }));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     button.click();
     expect(onClickA).toHaveBeenCalled();
     expect(onClickB).toHaveBeenCalled();
@@ -73,15 +72,15 @@ describe('safeCloneElement', () => {
     const onClickA = _vitest.vi.fn();
     const onClickB = _vitest.vi.fn();
     const onClickC = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(SafeClone, {
-      element: /*#__PURE__*/_react.default.createElement("button", {
+    (0, _react.render)((0, _jsxRuntime.jsx)(SafeClone, {
+      element: (0, _jsxRuntime.jsx)("button", {
         onClick: onClickA
       }),
       props: {
         onClick: (0, _createChainedFunction.createChainedFunction)(onClickB, onClickC)
       }
     }));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     button.click();
     expect(onClickA).toHaveBeenCalled();
     expect(onClickB).toHaveBeenCalled();