@instructure/ui-menu 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-menu
 

package/es/Menu/MenuItem/__new-tests__/MenuItem.test.js

@@ -23,111 +23,129 @@ var _MenuItem, _MenuItem2, _ExtendedMenuItem, _MenuItem3, _MenuItem4, _MenuItem5
  * SOFTWARE.
  */
 
-import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { MenuItem } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const ExtendedMenuItem = ({
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement(MenuItem, props);
+  return _jsx(MenuItem, {
+    ...props
+  });
 };
 describe('<MenuItem />', () => {
   it('should render', () => {
-    render(_MenuItem || (_MenuItem = /*#__PURE__*/React.createElement(MenuItem, null, "Menu Item Text")));
+    render(_MenuItem || (_MenuItem = _jsx(MenuItem, {
+      children: "Menu Item Text"
+    })));
     const menuItem = screen.getByText('Menu Item Text');
     expect(menuItem).toBeInTheDocument();
   });
   it('should render as a link when an href is provided', () => {
-    render(_MenuItem2 || (_MenuItem2 = /*#__PURE__*/React.createElement(MenuItem, {
-      href: "example.html"
-    }, "Menu Item Text")));
+    render(_MenuItem2 || (_MenuItem2 = _jsx(MenuItem, {
+      href: "example.html",
+      children: "Menu Item Text"
+    })));
     const menuItem = screen.getByRole('menuitem');
     expect(menuItem).toBeInTheDocument();
     expect(menuItem).toHaveAttribute('href', 'example.html');
   });
   it('should render as a link when a to is provided', () => {
-    render(_ExtendedMenuItem || (_ExtendedMenuItem = /*#__PURE__*/React.createElement(ExtendedMenuItem, {
-      to: "/example"
-    }, "Hello")));
+    render(_ExtendedMenuItem || (_ExtendedMenuItem = _jsx(ExtendedMenuItem, {
+      to: "/example",
+      children: "Hello"
+    })));
     const menuItem = screen.getByRole('menuitem');
     expect(menuItem).toHaveAttribute('to', '/example');
   });
   it('should call onSelect after click', () => {
     const onSelect = vi.fn();
-    render(/*#__PURE__*/React.createElement(MenuItem, {
+    render(_jsx(MenuItem, {
       onSelect: onSelect,
-      value: "foo"
-    }, "Hello"));
+      value: "foo",
+      children: "Hello"
+    }));
     const menuItem = screen.getByRole('menuitem');
     fireEvent.click(menuItem);
     expect(onSelect).toHaveBeenCalledWith(expect.any(Object), 'foo', true, expect.any(Object));
   });
   it('should call onClick after click', () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(MenuItem, {
+    render(_jsx(MenuItem, {
       onClick: onClick,
-      value: "foo"
-    }, "Hello"));
+      value: "foo",
+      children: "Hello"
+    }));
     const menuItem = screen.getByRole('menuitem');
     fireEvent.click(menuItem);
     expect(onClick).toHaveBeenCalled();
   });
   it('should set the tabIndex attribute', () => {
-    render(_MenuItem3 || (_MenuItem3 = /*#__PURE__*/React.createElement(MenuItem, null, "Hello")));
+    render(_MenuItem3 || (_MenuItem3 = _jsx(MenuItem, {
+      children: "Hello"
+    })));
     const menuItem = screen.getByRole('menuitem');
     expect(menuItem).toHaveAttribute('tabIndex', '-1');
   });
   it('should set the aria-controls attribute', () => {
-    render(_MenuItem4 || (_MenuItem4 = /*#__PURE__*/React.createElement(MenuItem, {
-      controls: "testId"
-    }, "Hello")));
+    render(_MenuItem4 || (_MenuItem4 = _jsx(MenuItem, {
+      controls: "testId",
+      children: "Hello"
+    })));
     const menuItem = screen.getByRole('menuitem');
     expect(menuItem).toHaveAttribute('aria-controls', 'testId');
   });
   it('should set the aria-disabled attribute', () => {
-    render(_MenuItem5 || (_MenuItem5 = /*#__PURE__*/React.createElement(MenuItem, {
-      disabled: true
-    }, "Hello")));
+    render(_MenuItem5 || (_MenuItem5 = _jsx(MenuItem, {
+      disabled: true,
+      children: "Hello"
+    })));
     const menuItem = screen.getByRole('menuitem');
     expect(menuItem).toHaveAttribute('aria-disabled', 'true');
   });
   it('should set the aria-checked attribute when defaultSelected prop is true', () => {
-    render(_MenuItem6 || (_MenuItem6 = /*#__PURE__*/React.createElement(MenuItem, {
+    render(_MenuItem6 || (_MenuItem6 = _jsx(MenuItem, {
       type: "checkbox",
-      defaultSelected: true
-    }, "Hello")));
+      defaultSelected: true,
+      children: "Hello"
+    })));
     const menuItem = screen.getByRole('menuitemcheckbox');
     expect(menuItem).toHaveAttribute('aria-checked', 'true');
   });
   it('should set the aria-checked attribute when selected prop is true', () => {
-    render(/*#__PURE__*/React.createElement(MenuItem, {
+    render(_jsx(MenuItem, {
       type: "checkbox",
       selected: true,
-      onSelect: vi.fn()
-    }, "Hello"));
+      onSelect: vi.fn(),
+      children: "Hello"
+    }));
     const menuItem = screen.getByRole('menuitemcheckbox');
     expect(menuItem).toHaveAttribute('aria-checked', 'true');
   });
   it('should default to the "menuitem" role', () => {
-    const _render = render(_MenuItem7 || (_MenuItem7 = /*#__PURE__*/React.createElement(MenuItem, null, "Menu Item Text"))),
+    const _render = render(_MenuItem7 || (_MenuItem7 = _jsx(MenuItem, {
+        children: "Menu Item Text"
+      }))),
       container = _render.container;
     const menuItem = container.querySelector("span[class$='-menuItem']");
     expect(menuItem).toHaveAttribute('role', 'menuitem');
   });
   it('should set the role to "menuitemcheckbox" when the type is "checkbox"', () => {
-    const _render2 = render(_MenuItem8 || (_MenuItem8 = /*#__PURE__*/React.createElement(MenuItem, {
-        type: "checkbox"
-      }, "Hello"))),
+    const _render2 = render(_MenuItem8 || (_MenuItem8 = _jsx(MenuItem, {
+        type: "checkbox",
+        children: "Hello"
+      }))),
       container = _render2.container;
     const menuItem = container.querySelector("span[class$='-menuItem']");
     expect(menuItem).toHaveAttribute('role', 'menuitemcheckbox');
   });
   it('should set the role to "menuitemradio" when the type is "radio"', () => {
-    const _render3 = render(_MenuItem9 || (_MenuItem9 = /*#__PURE__*/React.createElement(MenuItem, {
-        type: "radio"
-      }, "Hello"))),
+    const _render3 = render(_MenuItem9 || (_MenuItem9 = _jsx(MenuItem, {
+        type: "radio",
+        children: "Hello"
+      }))),
       container = _render3.container;
     const menuItem = container.querySelector("span[class$='-menuItem']");
     expect(menuItem).toHaveAttribute('role', 'menuitemradio');

package/es/Menu/MenuItem/index.js

@@ -22,19 +22,20 @@ var _dec, _dec2, _dec3, _class, _MenuItem, _IconCheckSolid, _IconArrowOpenEndSol
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
-import React, { Component } from 'react';
+
+import { Component } from 'react';
 import keycode from 'keycode';
 import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons';
 import { omitProps, getElementType, withDeterministicId, callRenderProp } from '@instructure/ui-react-utils';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { isActiveElement, findDOMNode } from '@instructure/ui-dom-utils';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { MenuContext } from '../../MenuContext';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: Menu
@@ -161,16 +162,22 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       children = _this$props4.children,
       type = _this$props4.type,
       renderLabelInfo = _this$props4.renderLabelInfo;
-    return jsx("span", null, (type === 'checkbox' || type === 'radio') && jsx("span", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
-    }, this.selected && (_IconCheckSolid || (_IconCheckSolid = jsx(IconCheckSolid, null)))), jsx("span", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
-      id: this.labelId
-    }, children), type === 'flyout' && jsx("span", {
-      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
-    }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = jsx(IconArrowOpenEndSolid, null))), renderLabelInfo && jsx("span", {
-      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.labelInfo
-    }, callRenderProp(renderLabelInfo)));
+    return _jsxs("span", {
+      children: [(type === 'checkbox' || type === 'radio') && _jsx("span", {
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon,
+        children: this.selected && (_IconCheckSolid || (_IconCheckSolid = _jsx(IconCheckSolid, {})))
+      }), _jsx("span", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
+        id: this.labelId,
+        children: children
+      }), type === 'flyout' && _jsx("span", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon,
+        children: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = _jsx(IconArrowOpenEndSolid, {}))
+      }), renderLabelInfo && _jsx("span", {
+        css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.labelInfo,
+        children: callRenderProp(renderLabelInfo)
+      })]
+    });
   }
   render() {
     var _this$props$styles5;
@@ -184,9 +191,10 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       target = _this$props5.target;
     const props = omitProps(this.props, MenuItem.allowedProps);
     const ElementType = this.elementType;
-    return jsx(ElementType, Object.assign({
+    return _jsx(ElementType, {
       tabIndex: -1 // note: tabIndex can be overridden by Menu or MenuItemGroup components
-    }, props, {
+      ,
+      ...props,
       href: href,
       target: target,
       role: this.role,
@@ -199,8 +207,9 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
       ref: this.handleRef,
       css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.menuItem,
-      onMouseOver: this.handleMouseOver
-    }), this.renderContent());
+      onMouseOver: this.handleMouseOver,
+      children: this.renderContent()
+    });
   }
 }, _MenuItem.displayName = "MenuItem", _MenuItem.componentId = 'Menu.Item', _MenuItem.propTypes = propTypes, _MenuItem.allowedProps = allowedProps, _MenuItem.defaultProps = {
   type: 'button',

package/es/Menu/MenuItemGroup/__new-tests__/MenuItemGroup.test.js

@@ -23,18 +23,23 @@ var _MenuItemGroup, _MenuItemGroup2, _MenuItemGroup3, _MenuItemGroup4, _MenuItem
  * SOFTWARE.
  */
 
-import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { MenuItem } from '../../MenuItem';
 import { MenuItemSeparator } from '../../MenuItemSeparator';
 import { MenuItemGroup } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<MenuItemGroup />', () => {
   it('should render', () => {
-    const _render = render(_MenuItemGroup || (_MenuItemGroup = /*#__PURE__*/React.createElement(MenuItemGroup, {
-        label: "Menu Label"
-      }, /*#__PURE__*/React.createElement(MenuItem, null, "Item Text 1"), /*#__PURE__*/React.createElement(MenuItem, null, "Item Text 2"), /*#__PURE__*/React.createElement(MenuItemSeparator, null)))),
+    const _render = render(_MenuItemGroup || (_MenuItemGroup = _jsxs(MenuItemGroup, {
+        label: "Menu Label",
+        children: [_jsx(MenuItem, {
+          children: "Item Text 1"
+        }), _jsx(MenuItem, {
+          children: "Item Text 2"
+        }), _jsx(MenuItemSeparator, {})]
+      }))),
       container = _render.container;
     const group = container.querySelector("[class*='menuItemGroup']");
     expect(group).toBeInTheDocument();
@@ -43,77 +48,106 @@ describe('<MenuItemGroup />', () => {
     expect(group).toHaveTextContent('Item Text 2');
   });
   it('should default to children with type "radio"', () => {
-    render(_MenuItemGroup2 || (_MenuItemGroup2 = /*#__PURE__*/React.createElement(MenuItemGroup, {
-      label: "Select one"
-    }, /*#__PURE__*/React.createElement(MenuItem, null, "Foo"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"), /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+    render(_MenuItemGroup2 || (_MenuItemGroup2 = _jsxs(MenuItemGroup, {
+      label: "Select one",
+      children: [_jsx(MenuItem, {
+        children: "Foo"
+      }), _jsx(MenuItem, {
+        children: "Bar"
+      }), _jsx(MenuItemSeparator, {})]
+    })));
     const menuItems = screen.getAllByRole('menuitemradio');
     expect(menuItems).toHaveLength(2);
   });
   it('should render children with type "checkbox" if allowMultiple is true', () => {
-    render(_MenuItemGroup3 || (_MenuItemGroup3 = /*#__PURE__*/React.createElement(MenuItemGroup, {
+    render(_MenuItemGroup3 || (_MenuItemGroup3 = _jsxs(MenuItemGroup, {
       label: "Select a few",
-      allowMultiple: true
-    }, /*#__PURE__*/React.createElement(MenuItem, null, "Foo"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"), /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+      allowMultiple: true,
+      children: [_jsx(MenuItem, {
+        children: "Foo"
+      }), _jsx(MenuItem, {
+        children: "Bar"
+      }), _jsx(MenuItemSeparator, {})]
+    })));
     const menuItems = screen.getAllByRole('menuitemcheckbox');
     expect(menuItems).toHaveLength(2);
   });
   it('should set aria-disabled', () => {
-    render(_MenuItemGroup4 || (_MenuItemGroup4 = /*#__PURE__*/React.createElement(MenuItemGroup, {
+    render(_MenuItemGroup4 || (_MenuItemGroup4 = _jsxs(MenuItemGroup, {
       label: "Select one",
-      disabled: true
-    }, /*#__PURE__*/React.createElement(MenuItem, null, "Foo"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"), /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+      disabled: true,
+      children: [_jsx(MenuItem, {
+        children: "Foo"
+      }), _jsx(MenuItem, {
+        children: "Bar"
+      }), _jsx(MenuItemSeparator, {})]
+    })));
     const menuItems = screen.getAllByRole('menuitemradio');
     expect(menuItems).toHaveLength(2);
     expect(menuItems[0]).toHaveAttribute('aria-disabled', 'true');
     expect(menuItems[1]).toHaveAttribute('aria-disabled', 'true');
   });
   it('should set selected from defaultSelected prop', () => {
-    render(/*#__PURE__*/React.createElement(MenuItemGroup, {
+    render(_jsxs(MenuItemGroup, {
       label: "Select one",
-      defaultSelected: [1]
-    }, _MenuItem || (_MenuItem = /*#__PURE__*/React.createElement(MenuItem, null, "Foo")), _MenuItem2 || (_MenuItem2 = /*#__PURE__*/React.createElement(MenuItem, null, "Bar")), _MenuItemSeparator || (_MenuItemSeparator = /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+      defaultSelected: [1],
+      children: [_MenuItem || (_MenuItem = _jsx(MenuItem, {
+        children: "Foo"
+      })), _MenuItem2 || (_MenuItem2 = _jsx(MenuItem, {
+        children: "Bar"
+      })), _MenuItemSeparator || (_MenuItemSeparator = _jsx(MenuItemSeparator, {}))]
+    }));
     const menuItems = screen.getAllByRole('menuitemradio');
     expect(menuItems).toHaveLength(2);
     expect(menuItems[0]).toHaveAttribute('aria-checked', 'false');
     expect(menuItems[1]).toHaveAttribute('aria-checked', 'true');
   });
   it('should set selected from selected prop', () => {
-    render(/*#__PURE__*/React.createElement(MenuItemGroup, {
+    render(_jsxs(MenuItemGroup, {
       label: "Select one",
       onSelect: vi.fn(),
-      selected: [1]
-    }, _MenuItem3 || (_MenuItem3 = /*#__PURE__*/React.createElement(MenuItem, null, "Foo")), _MenuItem4 || (_MenuItem4 = /*#__PURE__*/React.createElement(MenuItem, null, "Bar")), _MenuItemSeparator2 || (_MenuItemSeparator2 = /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+      selected: [1],
+      children: [_MenuItem3 || (_MenuItem3 = _jsx(MenuItem, {
+        children: "Foo"
+      })), _MenuItem4 || (_MenuItem4 = _jsx(MenuItem, {
+        children: "Bar"
+      })), _MenuItemSeparator2 || (_MenuItemSeparator2 = _jsx(MenuItemSeparator, {}))]
+    }));
     const menuItems = screen.getAllByRole('menuitemradio');
     expect(menuItems).toHaveLength(2);
     expect(menuItems[0]).toHaveAttribute('aria-checked', 'false');
     expect(menuItems[1]).toHaveAttribute('aria-checked', 'true');
   });
   it('should set selected from children', () => {
-    render(/*#__PURE__*/React.createElement(MenuItemGroup, {
+    render(_jsxs(MenuItemGroup, {
       label: "Select a few",
-      allowMultiple: true
-    }, _MenuItem5 || (_MenuItem5 = /*#__PURE__*/React.createElement(MenuItem, {
-      key: "foo",
-      defaultSelected: true
-    }, "Foo")), /*#__PURE__*/React.createElement(MenuItem, {
-      key: "bar",
-      selected: true,
-      onSelect: vi.fn()
-    }, "Bar")));
+      allowMultiple: true,
+      children: [_MenuItem5 || (_MenuItem5 = _jsx(MenuItem, {
+        defaultSelected: true,
+        children: "Foo"
+      }, "foo")), _jsx(MenuItem, {
+        selected: true,
+        onSelect: vi.fn(),
+        children: "Bar"
+      }, "bar")]
+    }));
     const menuItems = screen.getAllByRole('menuitemcheckbox');
     expect(menuItems).toHaveLength(2);
     expect(menuItems[0]).toHaveAttribute('aria-checked', 'true');
     expect(menuItems[1]).toHaveAttribute('aria-checked', 'true');
   });
   it('should honor the allowMultiple prop (defaults to false)', () => {
-    render(/*#__PURE__*/React.createElement(MenuItemGroup, {
-      label: "Select one"
-    }, _MenuItem6 || (_MenuItem6 = /*#__PURE__*/React.createElement(MenuItem, {
-      defaultSelected: true
-    }, "Foo")), /*#__PURE__*/React.createElement(MenuItem, {
-      selected: true,
-      onSelect: vi.fn()
-    }, "Bar")));
+    render(_jsxs(MenuItemGroup, {
+      label: "Select one",
+      children: [_MenuItem6 || (_MenuItem6 = _jsx(MenuItem, {
+        defaultSelected: true,
+        children: "Foo"
+      })), _jsx(MenuItem, {
+        selected: true,
+        onSelect: vi.fn(),
+        children: "Bar"
+      })]
+    }));
     const menuItems = screen.getAllByRole('menuitemradio');
     expect(menuItems).toHaveLength(2);
     expect(menuItems[0]).toHaveAttribute('aria-checked', 'true');
@@ -121,11 +155,16 @@ describe('<MenuItemGroup />', () => {
   });
   it('calls onSelect when items are selected', () => {
     const onSelect = vi.fn();
-    render(/*#__PURE__*/React.createElement(MenuItemGroup, {
+    render(_jsxs(MenuItemGroup, {
       label: "Select one",
       onSelect: onSelect,
-      selected: [1]
-    }, _MenuItem7 || (_MenuItem7 = /*#__PURE__*/React.createElement(MenuItem, null, "Item 1")), _MenuItem8 || (_MenuItem8 = /*#__PURE__*/React.createElement(MenuItem, null, "Item 2")), _MenuItemSeparator3 || (_MenuItemSeparator3 = /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+      selected: [1],
+      children: [_MenuItem7 || (_MenuItem7 = _jsx(MenuItem, {
+        children: "Item 1"
+      })), _MenuItem8 || (_MenuItem8 = _jsx(MenuItem, {
+        children: "Item 2"
+      })), _MenuItemSeparator3 || (_MenuItemSeparator3 = _jsx(MenuItemSeparator, {}))]
+    }));
     const menuItem = screen.getByText('Item 1');
     fireEvent.click(menuItem);
     expect(onSelect).toHaveBeenCalled();
@@ -134,11 +173,16 @@ describe('<MenuItemGroup />', () => {
   });
   it('does not call onSelect when disabled', () => {
     const onSelect = vi.fn();
-    render(/*#__PURE__*/React.createElement(MenuItemGroup, {
+    render(_jsxs(MenuItemGroup, {
       label: "Select one",
       onSelect: onSelect,
-      disabled: true
-    }, _MenuItem9 || (_MenuItem9 = /*#__PURE__*/React.createElement(MenuItem, null, "Item 1")), _MenuItem10 || (_MenuItem10 = /*#__PURE__*/React.createElement(MenuItem, null, "Item 2")), _MenuItemSeparator4 || (_MenuItemSeparator4 = /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+      disabled: true,
+      children: [_MenuItem9 || (_MenuItem9 = _jsx(MenuItem, {
+        children: "Item 1"
+      })), _MenuItem10 || (_MenuItem10 = _jsx(MenuItem, {
+        children: "Item 2"
+      })), _MenuItemSeparator4 || (_MenuItemSeparator4 = _jsx(MenuItemSeparator, {}))]
+    }));
     const menuItem = screen.getByText('Item 1');
     fireEvent.click(menuItem);
     expect(onSelect).not.toHaveBeenCalled();

package/es/Menu/MenuItemGroup/index.js

@@ -23,9 +23,8 @@ var _dec, _dec2, _dec3, _class, _MenuItemGroup;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Children, Component } from 'react';
-import { withStyle, jsx } from '@instructure/emotion';
+import { Children, Component } from 'react';
+import { withStyle } from '@instructure/emotion';
 import { omitProps, safeCloneElement, matchComponentTypes, withDeterministicId } from '@instructure/ui-react-utils';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { testable } from '@instructure/ui-testable';
@@ -33,6 +32,7 @@ import { MenuItem } from '../MenuItem';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: Menu
@@ -116,9 +116,10 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
   renderLabel() {
     var _this$props$styles;
     const label = this.props.label;
-    return hasVisibleChildren(label) ? jsx("span", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label
-    }, label) : label;
+    return hasVisibleChildren(label) ? _jsx("span", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label,
+      children: label
+    }) : label;
   }
   renderChildren() {
     const _this$props3 = this.props,
@@ -153,13 +154,16 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
   render() {
     var _this$props$styles2, _this$props$styles3;
     const props = omitProps(this.props, MenuItemGroup.allowedProps);
-    return jsx("span", Object.assign({}, props, {
+    return _jsxs("span", {
+      ...props,
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
-      ref: this.handleRef
-    }), this.renderLabel(), jsx("div", {
-      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.items,
-      "aria-disabled": this.props.disabled ? 'true' : void 0
-    }, this.renderChildren()));
+      ref: this.handleRef,
+      children: [this.renderLabel(), _jsx("div", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.items,
+        "aria-disabled": this.props.disabled ? 'true' : void 0,
+        children: this.renderChildren()
+      })]
+    });
   }
 }, _MenuItemGroup.displayName = "MenuItemGroup", _MenuItemGroup.componentId = 'Menu.Group', _MenuItemGroup.propTypes = propTypes, _MenuItemGroup.allowedProps = allowedProps, _MenuItemGroup.defaultProps = {
   disabled: false,

package/es/Menu/MenuItemSeparator/index.js

@@ -23,14 +23,14 @@ var _dec, _dec2, _class, _MenuItemSeparator;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { testable } from '@instructure/ui-testable';
 import { omitProps } from '@instructure/ui-react-utils';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: Menu
@@ -59,11 +59,12 @@ let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme)
     const props = omitProps(this.props, MenuItemSeparator.allowedProps);
     // role="separator" would fit better here, but it causes NVDA to stop the
     // MenuItem count after it
-    return jsx("div", Object.assign({}, props, {
+    return _jsx("div", {
+      ...props,
       role: "presentation",
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator,
       ref: this.handleRef
-    }));
+    });
   }
 }, _MenuItemSeparator.displayName = "MenuItemSeparator", _MenuItemSeparator.componentId = 'Menu.Separator', _MenuItemSeparator.propTypes = propTypes, _MenuItemSeparator.allowedProps = allowedProps, _MenuItemSeparator)) || _class) || _class);
 export default MenuItemSeparator;