@instructure/ui-react-utils 10.16.1-snapshot-0 → 10.16.1

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [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](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-react-utils
 

package/es/DeterministicIdContext/DeterministicIdContextProvider.js

@@ -21,8 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react';
+
 import { DeterministicIdContext, defaultDeterministicIDMap } from './DeterministicIdContext';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
  * ---
  * category: components/utilities
@@ -39,8 +40,9 @@ const DeterministicIdContextProvider = ({
   children,
   instanceCounterMap = defaultDeterministicIDMap
 }) => {
-  return /*#__PURE__*/React.createElement(DeterministicIdContext.Provider, {
-    value: instanceCounterMap
-  }, children);
+  return _jsx(DeterministicIdContext.Provider, {
+    value: instanceCounterMap,
+    children: children
+  });
 };
 export { DeterministicIdContextProvider };

package/es/DeterministicIdContext/withDeterministicId.js

@@ -21,12 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { forwardRef, useContext } from 'react';
+import { forwardRef, useContext } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { DeterministicIdContext } from './DeterministicIdContext';
 import { decorator } from '@instructure/ui-decorator';
 import { generateId } from '@instructure/ui-utils';
 import { warn } from '@instructure/console';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
  * This decorator is used to enable the decorated class to use the `DeterministicIdContext` which is needed
  * for deterministic id generation.
@@ -43,10 +44,11 @@ const withDeterministicId = decorator(ComposedComponent => {
     if (props.deterministicId) {
       warn(false, `Manually passing the "deterministicId" property is not allowed on the ${componentName} component.\n`, props.deterministicId);
     }
-    return /*#__PURE__*/React.createElement(ComposedComponent, Object.assign({
+    return _jsx(ComposedComponent, {
       ref: ref,
-      deterministicId: deterministicId
-    }, props));
+      deterministicId: deterministicId,
+      ...props
+    });
   });
   hoistNonReactStatics(WithDeterministicId, ComposedComponent);
 

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

@@ -23,21 +23,25 @@ var _dec, _class, _TestComponent, _div, _WrapperComponent2, _div2, _div3, _div4;
  * SOFTWARE.
  */
 
-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, {})
+    }));
   }
 }
 WrapperComponent.displayName = "WrapperComponent";
@@ -47,22 +51,26 @@ const uniqueIds = el => {
 };
 describe('DeterministicIdContext', () => {
   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');
     expect(testComponent).toBeInTheDocument();
     expect(testComponent.id).toBeDefined();
   });
   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');
     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');
     expect(uniqueIds(el)).toBe(true);
   });
@@ -70,17 +78,20 @@ describe('DeterministicIdContext', () => {
     const Wrapper = ({
       children
     }) => {
-      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');
     expect(uniqueIds(el)).toBe(true);
   });
@@ -88,9 +99,10 @@ describe('DeterministicIdContext', () => {
     const instUIInstanceCounter = '__INSTUI_GLOBAL_INSTANCE_COUNTER__';
     const counterValue = 345;
     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];
     expect(instanceCounter.get('TestComponent')).toBe(counterValue + 5);
   });

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

@@ -23,11 +23,12 @@ var _div, _div2;
  * SOFTWARE.
  */
 
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { callRenderProp } from '../callRenderProp';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('callRenderProp', () => {
   it('strings', () => {
     expect(callRenderProp('foo')).toEqual('foo');
@@ -44,18 +45,22 @@ describe('callRenderProp', () => {
     expect(callRenderProp(false)).toEqual(false);
   });
   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"
+        }));
       }
     }
     Foo.displayName = "Foo";
     const Result = callRenderProp(Foo);
-    expect(Result).toStrictEqual(/*#__PURE__*/React.createElement(Foo, null));
+    expect(Result).toStrictEqual(_jsx(Foo, {}));
     const _render = render(Result),
       getByText = _render.getByText;
     expect(getByText('hello')).toBeInTheDocument();
@@ -65,7 +70,9 @@ describe('callRenderProp', () => {
       return 'some text';
     };
     const result = callRenderProp(Baz);
-    const _render2 = render(/*#__PURE__*/React.createElement("div", null, result)),
+    const _render2 = render(_jsx("div", {
+        children: result
+      })),
       getByText = _render2.getByText;
     expect(getByText('some text')).toBeInTheDocument();
   });
@@ -81,7 +88,9 @@ describe('callRenderProp', () => {
     // if it was a real untranspiled fat arrow function.
     if (Baz.prototype) Baz.prototype = void 0;
     const result = callRenderProp(Baz);
-    const _render3 = render(/*#__PURE__*/React.createElement("div", null, result)),
+    const _render3 = render(_jsx("div", {
+        children: result
+      })),
       getByText = _render3.getByText;
     expect(getByText('some text')).toBeInTheDocument();
   });
@@ -89,18 +98,24 @@ describe('callRenderProp', () => {
     it('should pass props correctly to functions', () => {
       const someFunc = ({
         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;
       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
+          });
         }
       }
       Foo.displayName = "Foo";
@@ -113,7 +128,9 @@ describe('callRenderProp', () => {
       const result = callRenderProp(Foo, {
         shape: 'rectangle'
       });
-      const _render5 = render(/*#__PURE__*/React.createElement("div", null, result)),
+      const _render5 = render(_jsx("div", {
+          children: result
+        })),
         getByText = _render5.getByText;
       expect(getByText('rectangle')).toBeInTheDocument();
     });

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

@@ -22,15 +22,18 @@
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { vi } from 'vitest';
 import PropTypes from 'prop-types';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 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]
+    });
   }
 }
 TestComponent.displayName = "TestComponent";
@@ -51,7 +54,7 @@ describe('@deprecated', () => {
     })(TestComponent);
     it('should warn when suggesting new prop when using old prop', () => {
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_DeprecatedComponent || (_DeprecatedComponent = /*#__PURE__*/React.createElement(DeprecatedComponent, {
+      render(_DeprecatedComponent || (_DeprecatedComponent = _jsx(DeprecatedComponent, {
         foo: "Jane"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] `foo` is deprecated and will be removed in version 2.1.0. Use `bar` instead. ';
@@ -60,7 +63,7 @@ describe('@deprecated', () => {
     });
     it('should warn when using old prop with no new prop', () => {
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_DeprecatedComponent2 || (_DeprecatedComponent2 = /*#__PURE__*/React.createElement(DeprecatedComponent, {
+      render(_DeprecatedComponent2 || (_DeprecatedComponent2 = _jsx(DeprecatedComponent, {
         baz: "Goodbye"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] `baz` is deprecated and will be removed in version 2.1.0.';
@@ -69,7 +72,7 @@ describe('@deprecated', () => {
     });
     it('should not output a warning using new prop', () => {
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_DeprecatedComponent3 || (_DeprecatedComponent3 = /*#__PURE__*/React.createElement(DeprecatedComponent, {
+      render(_DeprecatedComponent3 || (_DeprecatedComponent3 = _jsx(DeprecatedComponent, {
         bar: "Jane"
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();
@@ -81,7 +84,7 @@ describe('@deprecated', () => {
     const DeprecatedComponent = deprecated('3.4.0')(TestComponent);
     it('should warn that the entire component is deprecated if no old props are supplied', () => {
       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.';
       expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       consoleWarningSpy.mockRestore();
@@ -93,7 +96,7 @@ describe('@deprecated', () => {
     it('should warn that the component is deprecated and output a warning that the package changed', () => {
       const consoleWarningSpy = 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.';
-      render(_DeprecatedComponent5 || (_DeprecatedComponent5 = /*#__PURE__*/React.createElement(DeprecatedComponent, null)));
+      render(_DeprecatedComponent5 || (_DeprecatedComponent5 = _jsx(DeprecatedComponent, {})));
       expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       consoleWarningSpy.mockRestore();
     });
@@ -103,7 +106,9 @@ describe('@deprecated', () => {
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
       class DeprecatedPropValueComponent extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return _jsx("div", {
+            children: this.props.color
+          });
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -113,7 +118,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      render(/*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(_jsx(DeprecatedPropValueComponent, {
         color: "yellow"
       }));
       expect(consoleWarningSpy).not.toHaveBeenCalled();
@@ -124,7 +129,9 @@ describe('@deprecated', () => {
       const color = 'orange';
       class DeprecatedPropValueComponent extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return _jsx("div", {
+            children: this.props.color
+          });
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -134,7 +141,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      render(/*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(_jsx(DeprecatedPropValueComponent, {
         color: color
       }));
       const expectedWarningMessage = `The '${color}' value for the \`color\` prop is deprecated.`;
@@ -147,7 +154,9 @@ describe('@deprecated', () => {
       const message = 'It will be removed in v8.0.0.';
       class DeprecatedPropValueComponent extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return _jsx("div", {
+            children: this.props.color
+          });
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -157,7 +166,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      render(/*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(_jsx(DeprecatedPropValueComponent, {
         color: color
       }));
       const expectedWarningMessage = `The '${color}' value for the \`color\` prop is deprecated. ${message}`;
@@ -170,7 +179,9 @@ describe('@deprecated', () => {
       const color = 'gold';
       class DeprecatedPropValueComponent extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return _jsx("div", {
+            children: this.props.color
+          });
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -180,7 +191,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      render(/*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(_jsx(DeprecatedPropValueComponent, {
         color: color
       }));
       const _messageMock$mock$cal = messageMock.mock.calls[0][0],
@@ -200,7 +211,9 @@ describe('@deprecated', () => {
       const color = 'gold';
       class DeprecatedPropValueComponent extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return _jsx("div", {
+            children: this.props.color
+          });
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -213,7 +226,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      render(/*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(_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/es/__new-tests__/experimental.test.js

@@ -22,15 +22,18 @@
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { vi } from 'vitest';
 import PropTypes from 'prop-types';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 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]
+    });
   }
 }
 TestComponent.displayName = "TestComponent";
@@ -48,7 +51,7 @@ describe('@experimental', () => {
     const ExperimentalComponent = experimental(['bar'])(TestComponent);
     it('should warn when using an experimental prop', () => {
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen || (_ExperimentalComponen = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen || (_ExperimentalComponen = _jsx(ExperimentalComponent, {
         bar: "Jane"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] The `bar` prop is experimental and its API could change significantly in a future release.';
@@ -57,7 +60,7 @@ describe('@experimental', () => {
     });
     it('should not output a warning using a non-experimental prop', () => {
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen2 || (_ExperimentalComponen2 = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen2 || (_ExperimentalComponen2 = _jsx(ExperimentalComponent, {
         qux: "Jane"
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();
@@ -65,7 +68,7 @@ describe('@experimental', () => {
     });
     it('should not output a warning for an experimental prop when dangerously ignored', () => {
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen3 || (_ExperimentalComponen3 = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen3 || (_ExperimentalComponen3 = _jsx(ExperimentalComponent, {
         qux: "Jane",
         __dangerouslyIgnoreExperimentalWarnings: true
       })));
@@ -78,14 +81,14 @@ describe('@experimental', () => {
     const ExperimentalComponent = experimental()(TestComponent);
     it('should warn that the entire component is experimental if no props are supplied', () => {
       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.';
       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 = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen5 || (_ExperimentalComponen5 = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen5 || (_ExperimentalComponen5 = _jsx(ExperimentalComponent, {
         __dangerouslyIgnoreExperimentalWarnings: true
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();

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

@@ -22,15 +22,18 @@
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { vi } from 'vitest';
 import PropTypes from 'prop-types';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 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]
+    });
   }
 }
 TestComponent.displayName = "TestComponent";
@@ -48,7 +51,7 @@ describe('@hack', () => {
     const HackComponent = hack(['bar'])(TestComponent);
     it('should warn when using an hack prop', () => {
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_HackComponent || (_HackComponent = /*#__PURE__*/React.createElement(HackComponent, {
+      render(_HackComponent || (_HackComponent = _jsx(HackComponent, {
         bar: "Jane"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] The `bar` prop is a temporary hack and will be removed in a future release.';
@@ -57,7 +60,7 @@ describe('@hack', () => {
     });
     it('should not output a warning using a non-hack prop', () => {
       const consoleWarningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_HackComponent2 || (_HackComponent2 = /*#__PURE__*/React.createElement(HackComponent, {
+      render(_HackComponent2 || (_HackComponent2 = _jsx(HackComponent, {
         qux: "Jane"
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();

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

@@ -22,12 +22,12 @@
  * SOFTWARE.
  */
 
-import React from 'react';
 import { vi } from 'vitest';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { safeCloneElement } from '../safeCloneElement';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('safeCloneElement', () => {
   const SafeClone = function ({
     element,
@@ -39,8 +39,8 @@ describe('safeCloneElement', () => {
   it('should preserve refs', () => {
     const origRef = vi.fn();
     const cloneRef = vi.fn();
-    render(/*#__PURE__*/React.createElement(SafeClone, {
-      element: /*#__PURE__*/React.createElement("div", {
+    render(_jsx(SafeClone, {
+      element: _jsx("div", {
         ref: origRef
       }),
       props: {
@@ -53,8 +53,8 @@ describe('safeCloneElement', () => {
   it('should preserve event handlers', () => {
     const onClickA = vi.fn();
     const onClickB = vi.fn();
-    render(/*#__PURE__*/React.createElement(SafeClone, {
-      element: /*#__PURE__*/React.createElement("button", {
+    render(_jsx(SafeClone, {
+      element: _jsx("button", {
         onClick: onClickA
       }),
       props: {
@@ -70,8 +70,8 @@ describe('safeCloneElement', () => {
     const onClickA = vi.fn();
     const onClickB = vi.fn();
     const onClickC = vi.fn();
-    render(/*#__PURE__*/React.createElement(SafeClone, {
-      element: /*#__PURE__*/React.createElement("button", {
+    render(_jsx(SafeClone, {
+      element: _jsx("button", {
         onClick: onClickA
       }),
       props: {

package/es/ensureSingleChild.js

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React, { Children } from 'react';
+import { Children } from 'react';
 import { safeCloneElement } from './safeCloneElement';
 
 /**
@@ -39,12 +39,16 @@ import { safeCloneElement } from './safeCloneElement';
  * @param {Object} props - props for child
  * @returns {ReactElement|null} cloned instance for a single child, or children wrapped in a span
  */
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 function ensureSingleChild(child, props = {}) {
   const childCount = Children.count(child);
   if (childCount === 0) {
     return null;
   } else if (typeof child === 'string' && child.length > 0 || childCount > 1) {
-    return /*#__PURE__*/React.createElement("span", props, child);
+    return _jsx("span", {
+      ...props,
+      children: child
+    });
   } else {
     // TODO: check that we can only end up here if child is ReactElement
     return safeCloneElement(Array.isArray(child) ? child[0] : child, props);

package/es/safeCloneElement.js

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React from 'react';
+import { cloneElement } from 'react';
 import { logWarn as warn } from '@instructure/console';
 import { createChainedFunction } from '@instructure/ui-utils';
 /**
@@ -66,12 +66,12 @@ function safeCloneElement(element, props, ...children) {
     }
   });
   if (originalRef == null || cloneRef == null) {
-    return /*#__PURE__*/React.cloneElement(element, mergedProps, ...children);
+    return /*#__PURE__*/cloneElement(element, mergedProps, ...children);
   }
   warn(originalRefIsAFunction, `Cloning an element with a ref that will be overwritten because the ref \
 is not a function. Use a composable callback-style ref instead. \
 Ignoring ref: ${originalRef}`);
-  return /*#__PURE__*/React.cloneElement(element, {
+  return /*#__PURE__*/cloneElement(element, {
     ...mergedProps,
     ref(component) {
       if (cloneRefIsFunction) {