@instructure/ui-react-utils - npm Package Compare versions

Comparing version 10.16.1-snapshot-0 to 10.16.1-snapshot-1

CHANGELOG.md

@@ -6,3 +6,3 @@ # Change Log
 
-## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
 
@@ -9,0 +9,0 @@ **Note:** Version bump only for package @instructure/ui-react-utils

es/__new-tests__/callRenderProp.test.js

@@ -26,3 +26,3 @@ var _div, _div2;
 
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -32,2 +32,3 @@ import { render } from '@testing-library/react';
 import { callRenderProp } from '../callRenderProp';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('callRenderProp', () => {
@@ -49,9 +50,13 @@ it('strings', () => {
   it('JSX literals', () => {
-    const Foo = () => _div || (_div = /*#__PURE__*/React.createElement("div", null, "hello"));
-    expect(callRenderProp(/*#__PURE__*/React.createElement(Foo, null))).toStrictEqual(/*#__PURE__*/React.createElement(Foo, null));
+    const Foo = () => _div || (_div = _jsx("div", {
+      children: "hello"
+    }));
+    expect(callRenderProp(_jsx(Foo, {}))).toStrictEqual(_jsx(Foo, {}));
   });
   it('React classes', () => {
-    class Foo extends React.Component {
+    class Foo extends Component {
       render() {
-        return _div2 || (_div2 = /*#__PURE__*/React.createElement("div", null, "hello"));
+        return _div2 || (_div2 = _jsx("div", {
+          children: "hello"
+        }));
       }
@@ -61,3 +66,3 @@ }
     const Result = callRenderProp(Foo);
-    expect(Result).toStrictEqual(/*#__PURE__*/React.createElement(Foo, null));
+    expect(Result).toStrictEqual(_jsx(Foo, {}));
     const _render = render(Result),
@@ -72,3 +77,5 @@ getByText = _render.getByText;
     const result = callRenderProp(Baz);
-    const _render2 = render(/*#__PURE__*/React.createElement("div", null, result)),
+    const _render2 = render(_jsx("div", {
+        children: result
+      })),
       getByText = _render2.getByText;
@@ -89,3 +96,5 @@ expect(getByText('some text')).toBeInTheDocument();
     const result = callRenderProp(Baz);
-    const _render3 = render(/*#__PURE__*/React.createElement("div", null, result)),
+    const _render3 = render(_jsx("div", {
+        children: result
+      })),
       getByText = _render3.getByText;
@@ -98,7 +107,11 @@ expect(getByText('some text')).toBeInTheDocument();
         shape
-      }) => /*#__PURE__*/React.createElement("div", null, shape);
+      }) => _jsx("div", {
+        children: shape
+      });
       const result = callRenderProp(someFunc, {
         shape: 'rectangle'
       });
-      const _render4 = render(/*#__PURE__*/React.createElement("div", null, result)),
+      const _render4 = render(_jsx("div", {
+          children: result
+        })),
         getByText = _render4.getByText;
@@ -108,5 +121,7 @@ expect(getByText('rectangle')).toBeInTheDocument();
     it('should pass props correctly to React classes', () => {
-      class Foo extends React.Component {
+      class Foo extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.shape);
+          return _jsx("div", {
+            children: this.props.shape
+          });
         }
@@ -124,3 +139,5 @@ }
       });
-      const _render5 = render(/*#__PURE__*/React.createElement("div", null, result)),
+      const _render5 = render(_jsx("div", {
+          children: result
+        })),
         getByText = _render5.getByText;
@@ -127,0 +144,0 @@ expect(getByText('rectangle')).toBeInTheDocument();

es/__new-tests__/deprecated.test.js

@@ -25,3 +25,3 @@ /*
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { vi } from 'vitest';
@@ -32,5 +32,8 @@ import PropTypes from 'prop-types';
 import { deprecated } from '../deprecated';
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 class TestComponent extends Component {
   render() {
-    return /*#__PURE__*/React.createElement("div", null, this.props.qux, " ", this.props.bar);
+    return _jsxs("div", {
+      children: [this.props.qux, " ", this.props.bar]
+    });
   }
@@ -56,3 +59,3 @@ }
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_DeprecatedComponent || (_DeprecatedComponent = /*#__PURE__*/React.createElement(DeprecatedComponent, {
+      render(_DeprecatedComponent || (_DeprecatedComponent = _jsx(DeprecatedComponent, {
         foo: "Jane"
@@ -66,3 +69,3 @@ })));
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_DeprecatedComponent2 || (_DeprecatedComponent2 = /*#__PURE__*/React.createElement(DeprecatedComponent, {
+      render(_DeprecatedComponent2 || (_DeprecatedComponent2 = _jsx(DeprecatedComponent, {
         baz: "Goodbye"
@@ -76,3 +79,3 @@ })));
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_DeprecatedComponent3 || (_DeprecatedComponent3 = /*#__PURE__*/React.createElement(DeprecatedComponent, {
+      render(_DeprecatedComponent3 || (_DeprecatedComponent3 = _jsx(DeprecatedComponent, {
         bar: "Jane"
@@ -89,3 +92,3 @@ })));
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_DeprecatedComponent4 || (_DeprecatedComponent4 = /*#__PURE__*/React.createElement(DeprecatedComponent, null)));
+      render(_DeprecatedComponent4 || (_DeprecatedComponent4 = _jsx(DeprecatedComponent, {})));
       const expectedWarningMessage = 'Warning: [TestComponent] is deprecated and will be removed in version 3.4.0.';
@@ -102,3 +105,3 @@ expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       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.';
-      render(_DeprecatedComponent5 || (_DeprecatedComponent5 = /*#__PURE__*/React.createElement(DeprecatedComponent, null)));
+      render(_DeprecatedComponent5 || (_DeprecatedComponent5 = _jsx(DeprecatedComponent, {})));
       expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
@@ -113,3 +116,5 @@ consoleWarningSpy.mockRestore();
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return _jsx("div", {
+            children: this.props.color
+          });
         }
@@ -124,3 +129,3 @@ }
       };
-      render(/*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(_jsx(DeprecatedPropValueComponent, {
         color: "yellow"
@@ -136,3 +141,5 @@ }));
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return _jsx("div", {
+            children: this.props.color
+          });
         }
@@ -147,3 +154,3 @@ }
       };
-      render(/*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(_jsx(DeprecatedPropValueComponent, {
         color: color
@@ -161,3 +168,5 @@ }));
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return _jsx("div", {
+            children: this.props.color
+          });
         }
@@ -172,3 +181,3 @@ }
       };
-      render(/*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(_jsx(DeprecatedPropValueComponent, {
         color: color
@@ -186,3 +195,5 @@ }));
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return _jsx("div", {
+            children: this.props.color
+          });
         }
@@ -197,3 +208,3 @@ }
       };
-      render(/*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(_jsx(DeprecatedPropValueComponent, {
         color: color
@@ -218,3 +229,5 @@ }));
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return _jsx("div", {
+            children: this.props.color
+          });
         }
@@ -232,3 +245,3 @@ }
       };
-      render(/*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(_jsx(DeprecatedPropValueComponent, {
         color: color
@@ -235,0 +248,0 @@ }));

es/__new-tests__/DeterministicIdContext.test.js

@@ -26,17 +26,21 @@ var _dec, _class, _TestComponent, _div, _WrapperComponent2, _div2, _div3, _div4;
 
-import React from 'react';
+import { Component } from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { withDeterministicId, DeterministicIdContextProvider } from '../DeterministicIdContext';
-let TestComponent = (_dec = withDeterministicId(), _dec(_class = (_TestComponent = class TestComponent extends React.Component {
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+let TestComponent = (_dec = withDeterministicId(), _dec(_class = (_TestComponent = class TestComponent extends Component {
   render() {
-    return /*#__PURE__*/React.createElement("div", {
+    return _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.Component {
+class WrapperComponent extends Component {
   render() {
-    return _div || (_div = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TestComponent, null)));
+    return _div || (_div = _jsx("div", {
+      children: _jsx(TestComponent, {})
+    }));
   }
@@ -51,3 +55,3 @@ }
   it('can be found and tested with ReactTestUtils', () => {
-    render(_WrapperComponent2 || (_WrapperComponent2 = /*#__PURE__*/React.createElement(WrapperComponent, null)));
+    render(_WrapperComponent2 || (_WrapperComponent2 = _jsx(WrapperComponent, {})));
     const testComponent = screen.getByTestId('test-component');
@@ -58,5 +62,6 @@ expect(testComponent).toBeInTheDocument();
   it('should generate unique ids without Provider wrapper', () => {
-    render(_div2 || (_div2 = /*#__PURE__*/React.createElement("div", {
-      "data-testid": "test-components"
-    }, /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null))));
+    render(_div2 || (_div2 = _jsxs("div", {
+      "data-testid": "test-components",
+      children: [_jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {})]
+    })));
     const el = screen.getByTestId('test-components');
@@ -66,5 +71,8 @@ expect(uniqueIds(el)).toBe(true);
   it('should generate unique ids when components are rendered both out and inside of provider', () => {
-    render(_div3 || (_div3 = /*#__PURE__*/React.createElement("div", {
-      "data-testid": "test-components"
-    }, /*#__PURE__*/React.createElement(DeterministicIdContextProvider, null, /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null)), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null))));
+    render(_div3 || (_div3 = _jsxs("div", {
+      "data-testid": "test-components",
+      children: [_jsxs(DeterministicIdContextProvider, {
+        children: [_jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {})]
+      }), _jsx(TestComponent, {}), _jsx(TestComponent, {})]
+    })));
     const el = screen.getByTestId('test-components');
@@ -77,13 +85,16 @@ expect(uniqueIds(el)).toBe(true);
     }) => {
-      return /*#__PURE__*/React.createElement(DeterministicIdContextProvider, null, /*#__PURE__*/React.createElement("div", {
-        "data-testid": "wrapper"
-      }, children));
+      return _jsx(DeterministicIdContextProvider, {
+        children: _jsx("div", {
+          "data-testid": "wrapper",
+          children: children
+        })
+      });
     };
     const children = [];
     for (let i = 0; i < 10; i++) {
-      children.push(/*#__PURE__*/React.createElement(TestComponent, {
-        key: i
-      }));
+      children.push(_jsx(TestComponent, {}, i));
     }
-    render(/*#__PURE__*/React.createElement(Wrapper, null, children));
+    render(_jsx(Wrapper, {
+      children: children
+    }));
     const el = screen.getByTestId('wrapper');
@@ -96,5 +107,6 @@ expect(uniqueIds(el)).toBe(true);
     globalThis[instUIInstanceCounter].set('TestComponent', counterValue);
-    render(_div4 || (_div4 = /*#__PURE__*/React.createElement("div", {
-      "data-testid": "test-components"
-    }, /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null))));
+    render(_div4 || (_div4 = _jsxs("div", {
+      "data-testid": "test-components",
+      children: [_jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {})]
+    })));
     const instanceCounter = globalThis[instUIInstanceCounter];
@@ -101,0 +113,0 @@ expect(instanceCounter.get('TestComponent')).toBe(counterValue + 5);

es/__new-tests__/experimental.test.js

@@ -25,3 +25,3 @@ /*
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { vi } from 'vitest';
@@ -32,5 +32,8 @@ import PropTypes from 'prop-types';
 import { experimental } from '../experimental';
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 class TestComponent extends Component {
   render() {
-    return /*#__PURE__*/React.createElement("div", null, this.props.qux, " ", this.props.bar);
+    return _jsxs("div", {
+      children: [this.props.qux, " ", this.props.bar]
+    });
   }
@@ -53,3 +56,3 @@ }
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen || (_ExperimentalComponen = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen || (_ExperimentalComponen = _jsx(ExperimentalComponent, {
         bar: "Jane"
@@ -63,3 +66,3 @@ })));
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen2 || (_ExperimentalComponen2 = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen2 || (_ExperimentalComponen2 = _jsx(ExperimentalComponent, {
         qux: "Jane"
@@ -72,3 +75,3 @@ })));
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen3 || (_ExperimentalComponen3 = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen3 || (_ExperimentalComponen3 = _jsx(ExperimentalComponent, {
         qux: "Jane",
@@ -86,3 +89,3 @@ __dangerouslyIgnoreExperimentalWarnings: true
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen4 || (_ExperimentalComponen4 = /*#__PURE__*/React.createElement(ExperimentalComponent, null)));
+      render(_ExperimentalComponen4 || (_ExperimentalComponen4 = _jsx(ExperimentalComponent, {})));
       const expectedWarningMessage = 'Warning: [TestComponent] is experimental and its API could change significantly in a future release.';
@@ -94,3 +97,3 @@ expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen5 || (_ExperimentalComponen5 = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen5 || (_ExperimentalComponen5 = _jsx(ExperimentalComponent, {
         __dangerouslyIgnoreExperimentalWarnings: true
@@ -97,0 +100,0 @@ })));

es/__new-tests__/hack.test.js

@@ -25,3 +25,3 @@ /*
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { vi } from 'vitest';
@@ -32,5 +32,8 @@ import PropTypes from 'prop-types';
 import { hack } from '../hack';
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 class TestComponent extends Component {
   render() {
-    return /*#__PURE__*/React.createElement("div", null, this.props.qux, " ", this.props.bar);
+    return _jsxs("div", {
+      children: [this.props.qux, " ", this.props.bar]
+    });
   }
@@ -53,3 +56,3 @@ }
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_HackComponent || (_HackComponent = /*#__PURE__*/React.createElement(HackComponent, {
+      render(_HackComponent || (_HackComponent = _jsx(HackComponent, {
         bar: "Jane"
@@ -63,3 +66,3 @@ })));
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_HackComponent2 || (_HackComponent2 = /*#__PURE__*/React.createElement(HackComponent, {
+      render(_HackComponent2 || (_HackComponent2 = _jsx(HackComponent, {
         qux: "Jane"
@@ -66,0 +69,0 @@ })));

es/__new-tests__/safeCloneElement.test.js

@@ -25,3 +25,2 @@ /*
 
-import React from 'react';
 import { vi } from 'vitest';
@@ -32,2 +31,3 @@ import { createChainedFunction } from '@instructure/ui-utils';
 import { safeCloneElement } from '../safeCloneElement';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('safeCloneElement', () => {
@@ -44,4 +44,4 @@ const SafeClone = function ({
     const cloneRef = vi.fn();
-    render(/*#__PURE__*/React.createElement(SafeClone, {
-      element: /*#__PURE__*/React.createElement("div", {
+    render(_jsx(SafeClone, {
+      element: _jsx("div", {
         ref: origRef
@@ -59,4 +59,4 @@ }),
     const onClickB = vi.fn();
-    render(/*#__PURE__*/React.createElement(SafeClone, {
-      element: /*#__PURE__*/React.createElement("button", {
+    render(_jsx(SafeClone, {
+      element: _jsx("button", {
         onClick: onClickA
@@ -77,4 +77,4 @@ }),
     const onClickC = vi.fn();
-    render(/*#__PURE__*/React.createElement(SafeClone, {
-      element: /*#__PURE__*/React.createElement("button", {
+    render(_jsx(SafeClone, {
+      element: _jsx("button", {
         onClick: onClickA
@@ -81,0 +81,0 @@ }),

es/DeterministicIdContext/DeterministicIdContextProvider.js

@@ -24,4 +24,5 @@ /*
  */
-import React from 'react';
+
 import { DeterministicIdContext, defaultDeterministicIDMap } from './DeterministicIdContext';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
@@ -43,6 +44,7 @@ * ---
 }) => {
-  return /*#__PURE__*/React.createElement(DeterministicIdContext.Provider, {
-    value: instanceCounterMap
-  }, children);
+  return _jsx(DeterministicIdContext.Provider, {
+    value: instanceCounterMap,
+    children: children
+  });
 };
 export { DeterministicIdContextProvider };

es/DeterministicIdContext/withDeterministicId.js

@@ -24,3 +24,3 @@ /*
  */
-import React, { forwardRef, useContext } from 'react';
+import { forwardRef, useContext } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
@@ -31,2 +31,3 @@ import { DeterministicIdContext } from './DeterministicIdContext';
 import { warn } from '@instructure/console';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
@@ -48,6 +49,7 @@ * This decorator is used to enable the decorated class to use the `DeterministicIdContext` which is needed
     }
-    return /*#__PURE__*/React.createElement(ComposedComponent, Object.assign({
+    return _jsx(ComposedComponent, {
       ref: ref,
-      deterministicId: deterministicId
-    }, props));
+      deterministicId: deterministicId,
+      ...props
+    });
   });
@@ -54,0 +56,0 @@ hoistNonReactStatics(WithDeterministicId, ComposedComponent);

es/ensureSingleChild.js

@@ -25,3 +25,3 @@ /*
 
-import React, { Children } from 'react';
+import { Children } from 'react';
 import { safeCloneElement } from './safeCloneElement';
@@ -43,2 +43,3 @@
  */
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 function ensureSingleChild(child, props = {}) {
@@ -49,3 +50,6 @@ const childCount = Children.count(child);
   } else if (typeof child === 'string' && child.length > 0 || childCount > 1) {
-    return /*#__PURE__*/React.createElement("span", props, child);
+    return _jsx("span", {
+      ...props,
+      children: child
+    });
   } else {
@@ -52,0 +56,0 @@ // TODO: check that we can only end up here if child is ReactElement

es/safeCloneElement.js

@@ -25,3 +25,3 @@ /*
 
-import React from 'react';
+import { cloneElement } from 'react';
 import { logWarn as warn } from '@instructure/console';
@@ -70,3 +70,3 @@ import { createChainedFunction } from '@instructure/ui-utils';
   if (originalRef == null || cloneRef == null) {
-    return /*#__PURE__*/React.cloneElement(element, mergedProps, ...children);
+    return /*#__PURE__*/cloneElement(element, mergedProps, ...children);
   }
@@ -76,3 +76,3 @@ warn(originalRefIsAFunction, `Cloning an element with a ref that will be overwritten because the ref \
 Ignoring ref: ${originalRef}`);
-  return /*#__PURE__*/React.cloneElement(element, {
+  return /*#__PURE__*/cloneElement(element, {
     ...mergedProps,
@@ -79,0 +79,0 @@ ref(component) {

lib/__new-tests__/callRenderProp.test.js

 "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"));
@@ -9,2 +9,3 @@ var _react2 = require("@testing-library/react");
 var _callRenderProp = require("../callRenderProp");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _div, _div2;
@@ -50,9 +51,13 @@ /*
   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"
+        }));
       }
@@ -62,3 +67,3 @@ }
     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),
@@ -73,3 +78,5 @@ getByText = _render.getByText;
     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;
@@ -90,3 +97,5 @@ expect(getByText('some text')).toBeInTheDocument();
     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;
@@ -99,7 +108,11 @@ expect(getByText('some text')).toBeInTheDocument();
         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;
@@ -109,5 +122,7 @@ 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
+          });
         }
@@ -125,3 +140,5 @@ }
       });
-      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;
@@ -128,0 +145,0 @@ expect(getByText('rectangle')).toBeInTheDocument();

lib/__new-tests__/deprecated.test.js

 "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");
@@ -11,2 +10,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _deprecated = require("../deprecated");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
@@ -38,3 +38,5 @@ * The MIT License (MIT)
   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]
+    });
   }
@@ -60,3 +62,3 @@ }
       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"
@@ -70,3 +72,3 @@ })));
       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"
@@ -80,3 +82,3 @@ })));
       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"
@@ -93,3 +95,3 @@ })));
       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.';
@@ -106,3 +108,3 @@ expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       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));
@@ -117,3 +119,5 @@ consoleWarningSpy.mockRestore();
         render() {
-          return /*#__PURE__*/_react.default.createElement("div", null, this.props.color);
+          return (0, _jsxRuntime.jsx)("div", {
+            children: this.props.color
+          });
         }
@@ -128,3 +132,3 @@ }
       };
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DeprecatedPropValueComponent, {
+      (0, _react2.render)((0, _jsxRuntime.jsx)(DeprecatedPropValueComponent, {
         color: "yellow"
@@ -140,3 +144,5 @@ }));
         render() {
-          return /*#__PURE__*/_react.default.createElement("div", null, this.props.color);
+          return (0, _jsxRuntime.jsx)("div", {
+            children: this.props.color
+          });
         }
@@ -151,3 +157,3 @@ }
       };
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DeprecatedPropValueComponent, {
+      (0, _react2.render)((0, _jsxRuntime.jsx)(DeprecatedPropValueComponent, {
         color: color
@@ -165,3 +171,5 @@ }));
         render() {
-          return /*#__PURE__*/_react.default.createElement("div", null, this.props.color);
+          return (0, _jsxRuntime.jsx)("div", {
+            children: this.props.color
+          });
         }
@@ -176,3 +184,3 @@ }
       };
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DeprecatedPropValueComponent, {
+      (0, _react2.render)((0, _jsxRuntime.jsx)(DeprecatedPropValueComponent, {
         color: color
@@ -190,3 +198,5 @@ }));
         render() {
-          return /*#__PURE__*/_react.default.createElement("div", null, this.props.color);
+          return (0, _jsxRuntime.jsx)("div", {
+            children: this.props.color
+          });
         }
@@ -201,3 +211,3 @@ }
       };
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DeprecatedPropValueComponent, {
+      (0, _react2.render)((0, _jsxRuntime.jsx)(DeprecatedPropValueComponent, {
         color: color
@@ -222,3 +232,5 @@ }));
         render() {
-          return /*#__PURE__*/_react.default.createElement("div", null, this.props.color);
+          return (0, _jsxRuntime.jsx)("div", {
+            children: this.props.color
+          });
         }
@@ -236,3 +248,3 @@ }
       };
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(DeprecatedPropValueComponent, {
+      (0, _react2.render)((0, _jsxRuntime.jsx)(DeprecatedPropValueComponent, {
         color: color
@@ -239,0 +251,0 @@ }));

lib/__new-tests__/DeterministicIdContext.test.js

 "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;
@@ -32,13 +32,16 @@ /*
  */
-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, {})
+    }));
   }
@@ -53,3 +56,3 @@ }
   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');
@@ -60,5 +63,6 @@ expect(testComponent).toBeInTheDocument();
   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');
@@ -68,5 +72,8 @@ 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');
@@ -79,13 +86,16 @@ expect(uniqueIds(el)).toBe(true);
     }) => {
-      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');
@@ -98,5 +108,6 @@ expect(uniqueIds(el)).toBe(true);
     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];
@@ -103,0 +114,0 @@ expect(instanceCounter.get('TestComponent')).toBe(counterValue + 5);

lib/__new-tests__/experimental.test.js

 "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");
@@ -11,2 +10,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _experimental = require("../experimental");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
@@ -38,3 +38,5 @@ * The MIT License (MIT)
   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]
+    });
   }
@@ -57,3 +59,3 @@ }
       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"
@@ -67,3 +69,3 @@ })));
       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"
@@ -76,3 +78,3 @@ })));
       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",
@@ -90,3 +92,3 @@ __dangerouslyIgnoreExperimentalWarnings: true
       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.';
@@ -98,3 +100,3 @@ expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       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
@@ -101,0 +103,0 @@ })));

lib/__new-tests__/hack.test.js

 "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");
@@ -11,2 +10,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hack = require("../hack");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
@@ -38,3 +38,5 @@ * The MIT License (MIT)
   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]
+    });
   }
@@ -57,3 +59,3 @@ }
       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"
@@ -67,3 +69,3 @@ })));
       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"
@@ -70,0 +72,0 @@ })));

lib/__new-tests__/safeCloneElement.test.js

 "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");
 /*
@@ -45,4 +44,4 @@ * The MIT License (MIT)
     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
@@ -60,4 +59,4 @@ }),
     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
@@ -69,3 +68,3 @@ }),
     }));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     button.click();
@@ -79,4 +78,4 @@ expect(onClickA).toHaveBeenCalled();
     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
@@ -88,3 +87,3 @@ }),
     }));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     button.click();
@@ -91,0 +90,0 @@ expect(onClickA).toHaveBeenCalled();

lib/DeterministicIdContext/DeterministicIdContextProvider.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -8,4 +7,4 @@ value: true
 exports.DeterministicIdContextProvider = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _DeterministicIdContext = require("./DeterministicIdContext");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
@@ -51,6 +50,7 @@ * The MIT License (MIT)
 }) => {
-  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;

lib/DeterministicIdContext/withDeterministicId.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,3 +8,3 @@ 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"));
@@ -16,2 +15,3 @@ var _DeterministicIdContext = require("./DeterministicIdContext");
 var _console = require("@instructure/console");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
@@ -57,6 +57,7 @@ * The MIT License (MIT)
     }
-    return /*#__PURE__*/_react.default.createElement(ComposedComponent, Object.assign({
+    return (0, _jsxRuntime.jsx)(ComposedComponent, {
       ref: ref,
-      deterministicId: deterministicId
-    }, props));
+      deterministicId: deterministicId,
+      ...props
+    });
   });
@@ -63,0 +64,0 @@ (0, _hoistNonReactStatics.default)(WithDeterministicId, ComposedComponent);

lib/ensureSingleChild.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,4 +8,5 @@ value: true
 exports.ensureSingleChild = ensureSingleChild;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _safeCloneElement = require("./safeCloneElement");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
@@ -49,4 +49,3 @@ * The MIT License (MIT)
  * @returns {ReactElement|null} cloned instance for a single child, or children wrapped in a span
- */
-function ensureSingleChild(child, props = {}) {
+ */function ensureSingleChild(child, props = {}) {
   const childCount = _react.Children.count(child);
@@ -56,3 +55,6 @@ if (childCount === 0) {
   } else if (typeof child === 'string' && child.length > 0 || childCount > 1) {
-    return /*#__PURE__*/_react.default.createElement("span", props, child);
+    return (0, _jsxRuntime.jsx)("span", {
+      ...props,
+      children: child
+    });
   } else {
@@ -59,0 +61,0 @@ // TODO: check that we can only end up here if child is ReactElement

lib/safeCloneElement.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,3 +8,3 @@ value: true
 exports.safeCloneElement = safeCloneElement;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 var _console = require("@instructure/console");
@@ -78,3 +77,3 @@ var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
   if (originalRef == null || cloneRef == null) {
-    return /*#__PURE__*/_react.default.cloneElement(element, mergedProps, ...children);
+    return /*#__PURE__*/(0, _react.cloneElement)(element, mergedProps, ...children);
   }
@@ -84,3 +83,3 @@ (0, _console.logWarn)(originalRefIsAFunction, `Cloning an element with a ref that will be overwritten because the ref \
 Ignoring ref: ${originalRef}`);
-  return /*#__PURE__*/_react.default.cloneElement(element, {
+  return /*#__PURE__*/(0, _react.cloneElement)(element, {
     ...mergedProps,
@@ -87,0 +86,0 @@ ref(component) {

package.json

 {
   "name": "@instructure/ui-react-utils",
-  "version": "10.16.1-snapshot-0",
+  "version": "10.16.1-snapshot-1",
   "description": "A React utility library made by Instructure Inc.",
@@ -25,3 +25,3 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.16.1-snapshot-1",
     "@testing-library/jest-dom": "^6.6.3",
@@ -34,7 +34,7 @@ "@testing-library/react": "^16.0.1",
     "@emotion/is-prop-valid": "^1.3.1",
-    "@instructure/console": "10.16.1-snapshot-0",
-    "@instructure/shared-types": "10.16.1-snapshot-0",
-    "@instructure/ui-decorator": "10.16.1-snapshot-0",
-    "@instructure/ui-dom-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-utils": "10.16.1-snapshot-0",
+    "@instructure/console": "10.16.1-snapshot-1",
+    "@instructure/shared-types": "10.16.1-snapshot-1",
+    "@instructure/ui-decorator": "10.16.1-snapshot-1",
+    "@instructure/ui-dom-utils": "10.16.1-snapshot-1",
+    "@instructure/ui-utils": "10.16.1-snapshot-1",
     "hoist-non-react-statics": "^3.3.2",
@@ -41,0 +41,0 @@ "prop-types": "^15.8.1"

src/safeCloneElement.ts

@@ -25,3 +25,3 @@ /*
 
-import React, {
+import {
   Attributes,
@@ -32,3 +32,4 @@ FunctionComponentElement,
   ReactNode,
-  DOMElement
+  DOMElement,
+  cloneElement
 } from 'react'
@@ -98,3 +99,3 @@
   if (originalRef == null || cloneRef == null) {
-    return React.cloneElement<P>(element, mergedProps, ...children) as E
+    return cloneElement<P>(element, mergedProps, ...children) as E
   }
@@ -109,3 +110,3 @@
 
-  return React.cloneElement<P>(
+  return cloneElement<P>(
     element,
@@ -112,0 +113,0 @@ {

types/DeterministicIdContext/DeterministicIdContextProvider.d.ts

@@ -1,2 +0,1 @@
-import React from 'react';
 type DeterministicIdProviderValue = Map<string, number>;
@@ -24,5 +23,5 @@ type DeterministicIdProviderProps = React.PropsWithChildren<{
  */
-declare const DeterministicIdContextProvider: ({ children, instanceCounterMap }: DeterministicIdProviderProps) => React.JSX.Element;
+declare const DeterministicIdContextProvider: ({ children, instanceCounterMap }: DeterministicIdProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export { DeterministicIdContextProvider };
 export type { DeterministicIdProviderValue };
 //# sourceMappingURL=DeterministicIdContextProvider.d.ts.map

types/DeterministicIdContext/withDeterministicId.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+import { ComponentClass } from 'react';
 type WithDeterministicIdProps = {
@@ -13,3 +13,3 @@ deterministicId?: (instanceName?: string) => string;
  */
-declare const withDeterministicId: (...args: unknown[]) => (ComposedComponent: React.ComponentClass<any>) => any;
+declare const withDeterministicId: (...args: unknown[]) => (ComposedComponent: ComponentClass<any>) => any;
 export default withDeterministicId;
@@ -16,0 +16,0 @@ export { withDeterministicId };

types/ensureSingleChild.d.ts

@@ -1,2 +0,2 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 /**
@@ -16,5 +16,5 @@ * ---
  */
-declare function ensureSingleChild(child: ReactNode, props?: {}): React.JSX.Element | null;
+declare function ensureSingleChild(child: ReactNode, props?: {}): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export default ensureSingleChild;
 export { ensureSingleChild };
 //# sourceMappingURL=ensureSingleChild.d.ts.map

types/getElementType.d.ts

@@ -31,5 +31,5 @@ import { ComponentType } from 'react';
  */
-declare function getElementType<T extends PropsObject>(Component: Omit<ComponentType<T>, 'propTypes'>, props: T, getDefault?: () => AsElementType<T>): "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "animate" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").FunctionComponent<any> | import("react").ComponentClass<any, any> | "noindex" | "animateMotion" | "animateTransform" | "mpath" | import("react").ComponentClass<T, any> | import("react").FunctionComponent<T> | NonNullable<T["as"]>;
+declare function getElementType<T extends PropsObject>(Component: Omit<ComponentType<T>, 'propTypes'>, props: T, getDefault?: () => AsElementType<T>): "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "animate" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").FunctionComponent<any> | "noindex" | "animateMotion" | "animateTransform" | "mpath" | import("react").ComponentClass<any, any> | import("react").ComponentClass<T, any> | import("react").FunctionComponent<T> | NonNullable<T["as"]>;
 export default getElementType;
 export { getElementType };
 //# sourceMappingURL=getElementType.d.ts.map

No alert changes

Improved metrics

Lines of code

7888

1.19%

Worsened metrics

Total package byte prevSize

456510

-0.03%

Dependency changes

• + Added

  @instructure/console@10.16.1-snapshot-1
  (transitive)

• + Added

  @instructure/shared-types@10.16.1-snapshot-1
  (transitive)

• + Added

  @instructure/ui-decorator@10.16.1-snapshot-1
  (transitive)

• + Added

  @instructure/ui-dom-utils@10.16.1-snapshot-1
  (transitive)

• + Added

  @instructure/ui-utils@10.16.1-snapshot-1
  (transitive)

• - Removed

  @instructure/console@10.16.1-snapshot-0
  (transitive)

• - Removed

  @instructure/shared-types@10.16.1-snapshot-0
  (transitive)

• - Removed

  @instructure/ui-decorator@10.16.1-snapshot-0
  (transitive)

• - Removed

  @instructure/ui-dom-utils@10.16.1-snapshot-0
  (transitive)

• - Removed

  @instructure/ui-utils@10.16.1-snapshot-0
  (transitive)

• Updated

  @instructure/console@10.16.1-snapshot-1

• Updated

  @instructure/shared-types@10.16.1-snapshot-1

• Updated

  @instructure/ui-decorator@10.16.1-snapshot-1

• Updated

  @instructure/ui-dom-utils@10.16.1-snapshot-1

• Updated

  @instructure/ui-utils@10.16.1-snapshot-1