@instructure/ui-menu 10.16.1-snapshot-0 → 10.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Menu/MenuItem/__new-tests__/MenuItem.test.js +53 -35
  3. package/es/Menu/MenuItem/index.js +26 -17
  4. package/es/Menu/MenuItemGroup/__new-tests__/MenuItemGroup.test.js +87 -43
  5. package/es/Menu/MenuItemGroup/index.js +16 -12
  6. package/es/Menu/MenuItemSeparator/index.js +5 -4
  7. package/es/Menu/__new-tests__/Menu.test.js +204 -107
  8. package/es/Menu/index.js +28 -23
  9. package/lib/Menu/MenuItem/__new-tests__/MenuItem.test.js +66 -49
  10. package/lib/Menu/MenuItem/index.js +24 -17
  11. package/lib/Menu/MenuItemGroup/__new-tests__/MenuItemGroup.test.js +99 -56
  12. package/lib/Menu/MenuItemGroup/index.js +15 -12
  13. package/lib/Menu/MenuItemSeparator/index.js +4 -3
  14. package/lib/Menu/__new-tests__/Menu.test.js +216 -121
  15. package/lib/Menu/index.js +26 -23
  16. package/package.json +19 -19
  17. package/src/Menu/MenuItem/__new-tests__/MenuItem.test.tsx +0 -1
  18. package/src/Menu/MenuItem/index.tsx +3 -3
  19. package/src/Menu/MenuItemGroup/__new-tests__/MenuItemGroup.test.tsx +0 -1
  20. package/src/Menu/MenuItemGroup/index.tsx +4 -5
  21. package/src/Menu/MenuItemSeparator/index.tsx +1 -2
  22. package/src/Menu/__new-tests__/Menu.test.tsx +1 -1
  23. package/src/Menu/index.tsx +7 -7
  24. package/tsconfig.build.tsbuildinfo +1 -1
  25. package/types/Menu/MenuItem/__new-tests__/MenuItem.test.d.ts.map +1 -1
  26. package/types/Menu/MenuItem/index.d.ts +5 -7
  27. package/types/Menu/MenuItem/index.d.ts.map +1 -1
  28. package/types/Menu/MenuItemGroup/__new-tests__/MenuItemGroup.test.d.ts.map +1 -1
  29. package/types/Menu/MenuItemGroup/index.d.ts +5 -7
  30. package/types/Menu/MenuItemGroup/index.d.ts.map +1 -1
  31. package/types/Menu/MenuItemSeparator/index.d.ts +1 -3
  32. package/types/Menu/MenuItemSeparator/index.d.ts.map +1 -1
  33. package/types/Menu/index.d.ts +8 -10
  34. package/types/Menu/index.d.ts.map +1 -1
package/lib/Menu/MenuItem/__new-tests__/MenuItem.test.js CHANGED
@@ -1,11 +1,10 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
3
+ var _react = require("@testing-library/react");
6
4
  var _vitest = require("vitest");
7
5
  require("@testing-library/jest-dom");
8
6
  var _index = require("../index");
7
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
9
8
  var _MenuItem, _MenuItem2, _ExtendedMenuItem, _MenuItem3, _MenuItem4, _MenuItem5, _MenuItem6, _MenuItem7, _MenuItem8, _MenuItem9;
10
9
  /*
11
10
  * The MIT License (MIT)
@@ -33,103 +32,121 @@ var _MenuItem, _MenuItem2, _ExtendedMenuItem, _MenuItem3, _MenuItem4, _MenuItem5
33
32
  const ExtendedMenuItem = ({
34
33
  ...props
35
34
  }) => {
36
- return /*#__PURE__*/_react.default.createElement(_index.MenuItem, props);
35
+ return (0, _jsxRuntime.jsx)(_index.MenuItem, {
36
+ ...props
37
+ });
37
38
  };
38
39
  describe('<MenuItem />', () => {
39
40
  it('should render', () => {
40
- (0, _react2.render)(_MenuItem || (_MenuItem = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Menu Item Text")));
41
- const menuItem = _react2.screen.getByText('Menu Item Text');
41
+ (0, _react.render)(_MenuItem || (_MenuItem = (0, _jsxRuntime.jsx)(_index.MenuItem, {
42
+ children: "Menu Item Text"
43
+ })));
44
+ const menuItem = _react.screen.getByText('Menu Item Text');
42
45
  expect(menuItem).toBeInTheDocument();
43
46
  });
44
47
  it('should render as a link when an href is provided', () => {
45
- (0, _react2.render)(_MenuItem2 || (_MenuItem2 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
46
- href: "example.html"
47
- }, "Menu Item Text")));
48
- const menuItem = _react2.screen.getByRole('menuitem');
48
+ (0, _react.render)(_MenuItem2 || (_MenuItem2 = (0, _jsxRuntime.jsx)(_index.MenuItem, {
49
+ href: "example.html",
50
+ children: "Menu Item Text"
51
+ })));
52
+ const menuItem = _react.screen.getByRole('menuitem');
49
53
  expect(menuItem).toBeInTheDocument();
50
54
  expect(menuItem).toHaveAttribute('href', 'example.html');
51
55
  });
52
56
  it('should render as a link when a to is provided', () => {
53
- (0, _react2.render)(_ExtendedMenuItem || (_ExtendedMenuItem = /*#__PURE__*/_react.default.createElement(ExtendedMenuItem, {
54
- to: "/example"
55
- }, "Hello")));
56
- const menuItem = _react2.screen.getByRole('menuitem');
57
+ (0, _react.render)(_ExtendedMenuItem || (_ExtendedMenuItem = (0, _jsxRuntime.jsx)(ExtendedMenuItem, {
58
+ to: "/example",
59
+ children: "Hello"
60
+ })));
61
+ const menuItem = _react.screen.getByRole('menuitem');
57
62
  expect(menuItem).toHaveAttribute('to', '/example');
58
63
  });
59
64
  it('should call onSelect after click', () => {
60
65
  const onSelect = _vitest.vi.fn();
61
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.MenuItem, {
66
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.MenuItem, {
62
67
  onSelect: onSelect,
63
- value: "foo"
64
- }, "Hello"));
65
- const menuItem = _react2.screen.getByRole('menuitem');
66
- _react2.fireEvent.click(menuItem);
68
+ value: "foo",
69
+ children: "Hello"
70
+ }));
71
+ const menuItem = _react.screen.getByRole('menuitem');
72
+ _react.fireEvent.click(menuItem);
67
73
  expect(onSelect).toHaveBeenCalledWith(expect.any(Object), 'foo', true, expect.any(Object));
68
74
  });
69
75
  it('should call onClick after click', () => {
70
76
  const onClick = _vitest.vi.fn();
71
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.MenuItem, {
77
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.MenuItem, {
72
78
  onClick: onClick,
73
- value: "foo"
74
- }, "Hello"));
75
- const menuItem = _react2.screen.getByRole('menuitem');
76
- _react2.fireEvent.click(menuItem);
79
+ value: "foo",
80
+ children: "Hello"
81
+ }));
82
+ const menuItem = _react.screen.getByRole('menuitem');
83
+ _react.fireEvent.click(menuItem);
77
84
  expect(onClick).toHaveBeenCalled();
78
85
  });
79
86
  it('should set the tabIndex attribute', () => {
80
- (0, _react2.render)(_MenuItem3 || (_MenuItem3 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Hello")));
81
- const menuItem = _react2.screen.getByRole('menuitem');
87
+ (0, _react.render)(_MenuItem3 || (_MenuItem3 = (0, _jsxRuntime.jsx)(_index.MenuItem, {
88
+ children: "Hello"
89
+ })));
90
+ const menuItem = _react.screen.getByRole('menuitem');
82
91
  expect(menuItem).toHaveAttribute('tabIndex', '-1');
83
92
  });
84
93
  it('should set the aria-controls attribute', () => {
85
- (0, _react2.render)(_MenuItem4 || (_MenuItem4 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
86
- controls: "testId"
87
- }, "Hello")));
88
- const menuItem = _react2.screen.getByRole('menuitem');
94
+ (0, _react.render)(_MenuItem4 || (_MenuItem4 = (0, _jsxRuntime.jsx)(_index.MenuItem, {
95
+ controls: "testId",
96
+ children: "Hello"
97
+ })));
98
+ const menuItem = _react.screen.getByRole('menuitem');
89
99
  expect(menuItem).toHaveAttribute('aria-controls', 'testId');
90
100
  });
91
101
  it('should set the aria-disabled attribute', () => {
92
- (0, _react2.render)(_MenuItem5 || (_MenuItem5 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
93
- disabled: true
94
- }, "Hello")));
95
- const menuItem = _react2.screen.getByRole('menuitem');
102
+ (0, _react.render)(_MenuItem5 || (_MenuItem5 = (0, _jsxRuntime.jsx)(_index.MenuItem, {
103
+ disabled: true,
104
+ children: "Hello"
105
+ })));
106
+ const menuItem = _react.screen.getByRole('menuitem');
96
107
  expect(menuItem).toHaveAttribute('aria-disabled', 'true');
97
108
  });
98
109
  it('should set the aria-checked attribute when defaultSelected prop is true', () => {
99
- (0, _react2.render)(_MenuItem6 || (_MenuItem6 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
110
+ (0, _react.render)(_MenuItem6 || (_MenuItem6 = (0, _jsxRuntime.jsx)(_index.MenuItem, {
100
111
  type: "checkbox",
101
- defaultSelected: true
102
- }, "Hello")));
103
- const menuItem = _react2.screen.getByRole('menuitemcheckbox');
112
+ defaultSelected: true,
113
+ children: "Hello"
114
+ })));
115
+ const menuItem = _react.screen.getByRole('menuitemcheckbox');
104
116
  expect(menuItem).toHaveAttribute('aria-checked', 'true');
105
117
  });
106
118
  it('should set the aria-checked attribute when selected prop is true', () => {
107
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.MenuItem, {
119
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.MenuItem, {
108
120
  type: "checkbox",
109
121
  selected: true,
110
- onSelect: _vitest.vi.fn()
111
- }, "Hello"));
112
- const menuItem = _react2.screen.getByRole('menuitemcheckbox');
122
+ onSelect: _vitest.vi.fn(),
123
+ children: "Hello"
124
+ }));
125
+ const menuItem = _react.screen.getByRole('menuitemcheckbox');
113
126
  expect(menuItem).toHaveAttribute('aria-checked', 'true');
114
127
  });
115
128
  it('should default to the "menuitem" role', () => {
116
- const _render = (0, _react2.render)(_MenuItem7 || (_MenuItem7 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Menu Item Text"))),
129
+ const _render = (0, _react.render)(_MenuItem7 || (_MenuItem7 = (0, _jsxRuntime.jsx)(_index.MenuItem, {
130
+ children: "Menu Item Text"
131
+ }))),
117
132
  container = _render.container;
118
133
  const menuItem = container.querySelector("span[class$='-menuItem']");
119
134
  expect(menuItem).toHaveAttribute('role', 'menuitem');
120
135
  });
121
136
  it('should set the role to "menuitemcheckbox" when the type is "checkbox"', () => {
122
- const _render2 = (0, _react2.render)(_MenuItem8 || (_MenuItem8 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
123
- type: "checkbox"
124
- }, "Hello"))),
137
+ const _render2 = (0, _react.render)(_MenuItem8 || (_MenuItem8 = (0, _jsxRuntime.jsx)(_index.MenuItem, {
138
+ type: "checkbox",
139
+ children: "Hello"
140
+ }))),
125
141
  container = _render2.container;
126
142
  const menuItem = container.querySelector("span[class$='-menuItem']");
127
143
  expect(menuItem).toHaveAttribute('role', 'menuitemcheckbox');
128
144
  });
129
145
  it('should set the role to "menuitemradio" when the type is "radio"', () => {
130
- const _render3 = (0, _react2.render)(_MenuItem9 || (_MenuItem9 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
131
- type: "radio"
132
- }, "Hello"))),
146
+ const _render3 = (0, _react.render)(_MenuItem9 || (_MenuItem9 = (0, _jsxRuntime.jsx)(_index.MenuItem, {
147
+ type: "radio",
148
+ children: "Hello"
149
+ }))),
133
150
  container = _render3.container;
134
151
  const menuItem = container.querySelector("span[class$='-menuItem']");
135
152
  expect(menuItem).toHaveAttribute('role', 'menuitemradio');
package/lib/Menu/MenuItem/index.js CHANGED
@@ -1,12 +1,11 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.MenuItem = void 0;
9
- var _react = _interopRequireWildcard(require("react"));
8
+ var _react = require("react");
10
9
  var _keycode = _interopRequireDefault(require("keycode"));
11
10
  var _IconCheckSolid2 = require("@instructure/ui-icons/lib/IconCheckSolid.js");
12
11
  var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
@@ -23,6 +22,7 @@ var _MenuContext = require("../../MenuContext");
23
22
  var _styles = _interopRequireDefault(require("./styles"));
24
23
  var _theme = _interopRequireDefault(require("./theme"));
25
24
  var _props = require("./props");
25
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
26
26
  var _dec, _dec2, _dec3, _class, _MenuItem, _IconCheckSolid, _IconArrowOpenEndSoli;
27
27
  /*
28
28
  * The MIT License (MIT)
@@ -47,7 +47,6 @@ var _dec, _dec2, _dec3, _class, _MenuItem, _IconCheckSolid, _IconArrowOpenEndSol
47
47
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
48
48
  * SOFTWARE.
49
49
  */
50
- /** @jsx jsx */
51
50
  /**
52
51
  ---
53
52
  parent: Menu
@@ -174,16 +173,22 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
174
173
  children = _this$props4.children,
175
174
  type = _this$props4.type,
176
175
  renderLabelInfo = _this$props4.renderLabelInfo;
177
- return (0, _emotion.jsx)("span", null, (type === 'checkbox' || type === 'radio') && (0, _emotion.jsx)("span", {
178
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
179
- }, this.selected && (_IconCheckSolid || (_IconCheckSolid = (0, _emotion.jsx)(_IconCheckSolid2.IconCheckSolid, null)))), (0, _emotion.jsx)("span", {
180
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
181
- id: this.labelId
182
- }, children), type === 'flyout' && (0, _emotion.jsx)("span", {
183
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
184
- }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, null))), renderLabelInfo && (0, _emotion.jsx)("span", {
185
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.labelInfo
186
- }, (0, _callRenderProp.callRenderProp)(renderLabelInfo)));
176
+ return (0, _jsxRuntime.jsxs)("span", {
177
+ children: [(type === 'checkbox' || type === 'radio') && (0, _jsxRuntime.jsx)("span", {
178
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon,
179
+ children: this.selected && (_IconCheckSolid || (_IconCheckSolid = (0, _jsxRuntime.jsx)(_IconCheckSolid2.IconCheckSolid, {})))
180
+ }), (0, _jsxRuntime.jsx)("span", {
181
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
182
+ id: this.labelId,
183
+ children: children
184
+ }), type === 'flyout' && (0, _jsxRuntime.jsx)("span", {
185
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon,
186
+ children: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _jsxRuntime.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {}))
187
+ }), renderLabelInfo && (0, _jsxRuntime.jsx)("span", {
188
+ css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.labelInfo,
189
+ children: (0, _callRenderProp.callRenderProp)(renderLabelInfo)
190
+ })]
191
+ });
187
192
  }
188
193
  render() {
189
194
  var _this$props$styles5;
@@ -197,9 +202,10 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
197
202
  target = _this$props5.target;
198
203
  const props = (0, _omitProps.omitProps)(this.props, MenuItem.allowedProps);
199
204
  const ElementType = this.elementType;
200
- return (0, _emotion.jsx)(ElementType, Object.assign({
205
+ return (0, _jsxRuntime.jsx)(ElementType, {
201
206
  tabIndex: -1 // note: tabIndex can be overridden by Menu or MenuItemGroup components
202
- }, props, {
207
+ ,
208
+ ...props,
203
209
  href: href,
204
210
  target: target,
205
211
  role: this.role,
@@ -212,8 +218,9 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
212
218
  onKeyDown: (0, _createChainedFunction.createChainedFunction)(onKeyDown, this.handleKeyDown),
213
219
  ref: this.handleRef,
214
220
  css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.menuItem,
215
- onMouseOver: this.handleMouseOver
216
- }), this.renderContent());
221
+ onMouseOver: this.handleMouseOver,
222
+ children: this.renderContent()
223
+ });
217
224
  }
218
225
  }, _MenuItem.displayName = "MenuItem", _MenuItem.componentId = 'Menu.Item', _MenuItem.propTypes = _props.propTypes, _MenuItem.allowedProps = _props.allowedProps, _MenuItem.defaultProps = {
219
226
  type: 'button',
package/lib/Menu/MenuItemGroup/__new-tests__/MenuItemGroup.test.js CHANGED
@@ -1,13 +1,12 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
3
+ var _react = require("@testing-library/react");
6
4
  var _vitest = require("vitest");
7
5
  require("@testing-library/jest-dom");
8
6
  var _MenuItem11 = require("../../MenuItem");
9
7
  var _MenuItemSeparator5 = require("../../MenuItemSeparator");
10
8
  var _index = require("../index");
9
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
11
10
  var _MenuItemGroup, _MenuItemGroup2, _MenuItemGroup3, _MenuItemGroup4, _MenuItem, _MenuItem2, _MenuItemSeparator, _MenuItem3, _MenuItem4, _MenuItemSeparator2, _MenuItem5, _MenuItem6, _MenuItem7, _MenuItem8, _MenuItemSeparator3, _MenuItem9, _MenuItem10, _MenuItemSeparator4;
12
11
  /*
13
12
  * The MIT License (MIT)
@@ -34,9 +33,14 @@ var _MenuItemGroup, _MenuItemGroup2, _MenuItemGroup3, _MenuItemGroup4, _MenuItem
34
33
  */
35
34
  describe('<MenuItemGroup />', () => {
36
35
  it('should render', () => {
37
- const _render = (0, _react2.render)(_MenuItemGroup || (_MenuItemGroup = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
38
- label: "Menu Label"
39
- }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item Text 1"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item Text 2"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null)))),
36
+ const _render = (0, _react.render)(_MenuItemGroup || (_MenuItemGroup = (0, _jsxRuntime.jsxs)(_index.MenuItemGroup, {
37
+ label: "Menu Label",
38
+ children: [(0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
39
+ children: "Item Text 1"
40
+ }), (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
41
+ children: "Item Text 2"
42
+ }), (0, _jsxRuntime.jsx)(_MenuItemSeparator5.MenuItemSeparator, {})]
43
+ }))),
40
44
  container = _render.container;
41
45
  const group = container.querySelector("[class*='menuItemGroup']");
42
46
  expect(group).toBeInTheDocument();
@@ -45,104 +49,143 @@ describe('<MenuItemGroup />', () => {
45
49
  expect(group).toHaveTextContent('Item Text 2');
46
50
  });
47
51
  it('should default to children with type "radio"', () => {
48
- (0, _react2.render)(_MenuItemGroup2 || (_MenuItemGroup2 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
49
- label: "Select one"
50
- }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
51
- const menuItems = _react2.screen.getAllByRole('menuitemradio');
52
+ (0, _react.render)(_MenuItemGroup2 || (_MenuItemGroup2 = (0, _jsxRuntime.jsxs)(_index.MenuItemGroup, {
53
+ label: "Select one",
54
+ children: [(0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
55
+ children: "Foo"
56
+ }), (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
57
+ children: "Bar"
58
+ }), (0, _jsxRuntime.jsx)(_MenuItemSeparator5.MenuItemSeparator, {})]
59
+ })));
60
+ const menuItems = _react.screen.getAllByRole('menuitemradio');
52
61
  expect(menuItems).toHaveLength(2);
53
62
  });
54
63
  it('should render children with type "checkbox" if allowMultiple is true', () => {
55
- (0, _react2.render)(_MenuItemGroup3 || (_MenuItemGroup3 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
64
+ (0, _react.render)(_MenuItemGroup3 || (_MenuItemGroup3 = (0, _jsxRuntime.jsxs)(_index.MenuItemGroup, {
56
65
  label: "Select a few",
57
- allowMultiple: true
58
- }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
59
- const menuItems = _react2.screen.getAllByRole('menuitemcheckbox');
66
+ allowMultiple: true,
67
+ children: [(0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
68
+ children: "Foo"
69
+ }), (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
70
+ children: "Bar"
71
+ }), (0, _jsxRuntime.jsx)(_MenuItemSeparator5.MenuItemSeparator, {})]
72
+ })));
73
+ const menuItems = _react.screen.getAllByRole('menuitemcheckbox');
60
74
  expect(menuItems).toHaveLength(2);
61
75
  });
62
76
  it('should set aria-disabled', () => {
63
- (0, _react2.render)(_MenuItemGroup4 || (_MenuItemGroup4 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
77
+ (0, _react.render)(_MenuItemGroup4 || (_MenuItemGroup4 = (0, _jsxRuntime.jsxs)(_index.MenuItemGroup, {
64
78
  label: "Select one",
65
- disabled: true
66
- }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
67
- const menuItems = _react2.screen.getAllByRole('menuitemradio');
79
+ disabled: true,
80
+ children: [(0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
81
+ children: "Foo"
82
+ }), (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
83
+ children: "Bar"
84
+ }), (0, _jsxRuntime.jsx)(_MenuItemSeparator5.MenuItemSeparator, {})]
85
+ })));
86
+ const menuItems = _react.screen.getAllByRole('menuitemradio');
68
87
  expect(menuItems).toHaveLength(2);
69
88
  expect(menuItems[0]).toHaveAttribute('aria-disabled', 'true');
70
89
  expect(menuItems[1]).toHaveAttribute('aria-disabled', 'true');
71
90
  });
72
91
  it('should set selected from defaultSelected prop', () => {
73
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
92
+ (0, _react.render)((0, _jsxRuntime.jsxs)(_index.MenuItemGroup, {
74
93
  label: "Select one",
75
- defaultSelected: [1]
76
- }, _MenuItem || (_MenuItem = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo")), _MenuItem2 || (_MenuItem2 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar")), _MenuItemSeparator || (_MenuItemSeparator = /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
77
- const menuItems = _react2.screen.getAllByRole('menuitemradio');
94
+ defaultSelected: [1],
95
+ children: [_MenuItem || (_MenuItem = (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
96
+ children: "Foo"
97
+ })), _MenuItem2 || (_MenuItem2 = (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
98
+ children: "Bar"
99
+ })), _MenuItemSeparator || (_MenuItemSeparator = (0, _jsxRuntime.jsx)(_MenuItemSeparator5.MenuItemSeparator, {}))]
100
+ }));
101
+ const menuItems = _react.screen.getAllByRole('menuitemradio');
78
102
  expect(menuItems).toHaveLength(2);
79
103
  expect(menuItems[0]).toHaveAttribute('aria-checked', 'false');
80
104
  expect(menuItems[1]).toHaveAttribute('aria-checked', 'true');
81
105
  });
82
106
  it('should set selected from selected prop', () => {
83
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
107
+ (0, _react.render)((0, _jsxRuntime.jsxs)(_index.MenuItemGroup, {
84
108
  label: "Select one",
85
109
  onSelect: _vitest.vi.fn(),
86
- selected: [1]
87
- }, _MenuItem3 || (_MenuItem3 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo")), _MenuItem4 || (_MenuItem4 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar")), _MenuItemSeparator2 || (_MenuItemSeparator2 = /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
88
- const menuItems = _react2.screen.getAllByRole('menuitemradio');
110
+ selected: [1],
111
+ children: [_MenuItem3 || (_MenuItem3 = (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
112
+ children: "Foo"
113
+ })), _MenuItem4 || (_MenuItem4 = (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
114
+ children: "Bar"
115
+ })), _MenuItemSeparator2 || (_MenuItemSeparator2 = (0, _jsxRuntime.jsx)(_MenuItemSeparator5.MenuItemSeparator, {}))]
116
+ }));
117
+ const menuItems = _react.screen.getAllByRole('menuitemradio');
89
118
  expect(menuItems).toHaveLength(2);
90
119
  expect(menuItems[0]).toHaveAttribute('aria-checked', 'false');
91
120
  expect(menuItems[1]).toHaveAttribute('aria-checked', 'true');
92
121
  });
93
122
  it('should set selected from children', () => {
94
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
123
+ (0, _react.render)((0, _jsxRuntime.jsxs)(_index.MenuItemGroup, {
95
124
  label: "Select a few",
96
- allowMultiple: true
97
- }, _MenuItem5 || (_MenuItem5 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, {
98
- key: "foo",
99
- defaultSelected: true
100
- }, "Foo")), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, {
101
- key: "bar",
102
- selected: true,
103
- onSelect: _vitest.vi.fn()
104
- }, "Bar")));
105
- const menuItems = _react2.screen.getAllByRole('menuitemcheckbox');
125
+ allowMultiple: true,
126
+ children: [_MenuItem5 || (_MenuItem5 = (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
127
+ defaultSelected: true,
128
+ children: "Foo"
129
+ }, "foo")), (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
130
+ selected: true,
131
+ onSelect: _vitest.vi.fn(),
132
+ children: "Bar"
133
+ }, "bar")]
134
+ }));
135
+ const menuItems = _react.screen.getAllByRole('menuitemcheckbox');
106
136
  expect(menuItems).toHaveLength(2);
107
137
  expect(menuItems[0]).toHaveAttribute('aria-checked', 'true');
108
138
  expect(menuItems[1]).toHaveAttribute('aria-checked', 'true');
109
139
  });
110
140
  it('should honor the allowMultiple prop (defaults to false)', () => {
111
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
112
- label: "Select one"
113
- }, _MenuItem6 || (_MenuItem6 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, {
114
- defaultSelected: true
115
- }, "Foo")), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, {
116
- selected: true,
117
- onSelect: _vitest.vi.fn()
118
- }, "Bar")));
119
- const menuItems = _react2.screen.getAllByRole('menuitemradio');
141
+ (0, _react.render)((0, _jsxRuntime.jsxs)(_index.MenuItemGroup, {
142
+ label: "Select one",
143
+ children: [_MenuItem6 || (_MenuItem6 = (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
144
+ defaultSelected: true,
145
+ children: "Foo"
146
+ })), (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
147
+ selected: true,
148
+ onSelect: _vitest.vi.fn(),
149
+ children: "Bar"
150
+ })]
151
+ }));
152
+ const menuItems = _react.screen.getAllByRole('menuitemradio');
120
153
  expect(menuItems).toHaveLength(2);
121
154
  expect(menuItems[0]).toHaveAttribute('aria-checked', 'true');
122
155
  expect(menuItems[1]).toHaveAttribute('aria-checked', 'false');
123
156
  });
124
157
  it('calls onSelect when items are selected', () => {
125
158
  const onSelect = _vitest.vi.fn();
126
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
159
+ (0, _react.render)((0, _jsxRuntime.jsxs)(_index.MenuItemGroup, {
127
160
  label: "Select one",
128
161
  onSelect: onSelect,
129
- selected: [1]
130
- }, _MenuItem7 || (_MenuItem7 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item 1")), _MenuItem8 || (_MenuItem8 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item 2")), _MenuItemSeparator3 || (_MenuItemSeparator3 = /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
131
- const menuItem = _react2.screen.getByText('Item 1');
132
- _react2.fireEvent.click(menuItem);
162
+ selected: [1],
163
+ children: [_MenuItem7 || (_MenuItem7 = (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
164
+ children: "Item 1"
165
+ })), _MenuItem8 || (_MenuItem8 = (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
166
+ children: "Item 2"
167
+ })), _MenuItemSeparator3 || (_MenuItemSeparator3 = (0, _jsxRuntime.jsx)(_MenuItemSeparator5.MenuItemSeparator, {}))]
168
+ }));
169
+ const menuItem = _react.screen.getByText('Item 1');
170
+ _react.fireEvent.click(menuItem);
133
171
  expect(onSelect).toHaveBeenCalled();
134
172
  expect(onSelect.mock.calls[0][1]).toEqual([0]);
135
173
  expect(onSelect.mock.calls[0][2]).toEqual(true);
136
174
  });
137
175
  it('does not call onSelect when disabled', () => {
138
176
  const onSelect = _vitest.vi.fn();
139
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
177
+ (0, _react.render)((0, _jsxRuntime.jsxs)(_index.MenuItemGroup, {
140
178
  label: "Select one",
141
179
  onSelect: onSelect,
142
- disabled: true
143
- }, _MenuItem9 || (_MenuItem9 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item 1")), _MenuItem10 || (_MenuItem10 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item 2")), _MenuItemSeparator4 || (_MenuItemSeparator4 = /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
144
- const menuItem = _react2.screen.getByText('Item 1');
145
- _react2.fireEvent.click(menuItem);
180
+ disabled: true,
181
+ children: [_MenuItem9 || (_MenuItem9 = (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
182
+ children: "Item 1"
183
+ })), _MenuItem10 || (_MenuItem10 = (0, _jsxRuntime.jsx)(_MenuItem11.MenuItem, {
184
+ children: "Item 2"
185
+ })), _MenuItemSeparator4 || (_MenuItemSeparator4 = (0, _jsxRuntime.jsx)(_MenuItemSeparator5.MenuItemSeparator, {}))]
186
+ }));
187
+ const menuItem = _react.screen.getByText('Item 1');
188
+ _react.fireEvent.click(menuItem);
146
189
  expect(onSelect).not.toHaveBeenCalled();
147
190
  });
148
191
  });
package/lib/Menu/MenuItemGroup/index.js CHANGED
@@ -1,12 +1,11 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.MenuItemGroup = void 0;
9
- var _react = _interopRequireWildcard(require("react"));
8
+ var _react = require("react");
10
9
  var _emotion = require("@instructure/emotion");
11
10
  var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
12
11
  var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
@@ -18,6 +17,7 @@ var _MenuItem = require("../MenuItem");
18
17
  var _styles = _interopRequireDefault(require("./styles"));
19
18
  var _theme = _interopRequireDefault(require("./theme"));
20
19
  var _props = require("./props");
20
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
21
21
  var _dec, _dec2, _dec3, _class, _MenuItemGroup;
22
22
  /*
23
23
  * The MIT License (MIT)
@@ -42,7 +42,6 @@ var _dec, _dec2, _dec3, _class, _MenuItemGroup;
42
42
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
43
43
  * SOFTWARE.
44
44
  */
45
- /** @jsx jsx */
46
45
  /**
47
46
  ---
48
47
  parent: Menu
@@ -126,9 +125,10 @@ let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.wit
126
125
  renderLabel() {
127
126
  var _this$props$styles;
128
127
  const label = this.props.label;
129
- return (0, _hasVisibleChildren.hasVisibleChildren)(label) ? (0, _emotion.jsx)("span", {
130
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label
131
- }, label) : label;
128
+ return (0, _hasVisibleChildren.hasVisibleChildren)(label) ? (0, _jsxRuntime.jsx)("span", {
129
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label,
130
+ children: label
131
+ }) : label;
132
132
  }
133
133
  renderChildren() {
134
134
  const _this$props3 = this.props,
@@ -163,13 +163,16 @@ let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.wit
163
163
  render() {
164
164
  var _this$props$styles2, _this$props$styles3;
165
165
  const props = (0, _omitProps.omitProps)(this.props, MenuItemGroup.allowedProps);
166
- return (0, _emotion.jsx)("span", Object.assign({}, props, {
166
+ return (0, _jsxRuntime.jsxs)("span", {
167
+ ...props,
167
168
  css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
168
- ref: this.handleRef
169
- }), this.renderLabel(), (0, _emotion.jsx)("div", {
170
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.items,
171
- "aria-disabled": this.props.disabled ? 'true' : void 0
172
- }, this.renderChildren()));
169
+ ref: this.handleRef,
170
+ children: [this.renderLabel(), (0, _jsxRuntime.jsx)("div", {
171
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.items,
172
+ "aria-disabled": this.props.disabled ? 'true' : void 0,
173
+ children: this.renderChildren()
174
+ })]
175
+ });
173
176
  }
174
177
  }, _MenuItemGroup.displayName = "MenuItemGroup", _MenuItemGroup.componentId = 'Menu.Group', _MenuItemGroup.propTypes = _props.propTypes, _MenuItemGroup.allowedProps = _props.allowedProps, _MenuItemGroup.defaultProps = {
175
178
  disabled: false,
package/lib/Menu/MenuItemSeparator/index.js CHANGED
@@ -12,6 +12,7 @@ var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
12
12
  var _styles = _interopRequireDefault(require("./styles"));
13
13
  var _theme = _interopRequireDefault(require("./theme"));
14
14
  var _props = require("./props");
15
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
15
16
  var _dec, _dec2, _class, _MenuItemSeparator;
16
17
  /*
17
18
  * The MIT License (MIT)
@@ -36,7 +37,6 @@ var _dec, _dec2, _class, _MenuItemSeparator;
36
37
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
37
38
  * SOFTWARE.
38
39
  */
39
- /** @jsx jsx */
40
40
  /**
41
41
  ---
42
42
  parent: Menu
@@ -65,11 +65,12 @@ let MenuItemSeparator = exports.MenuItemSeparator = (_dec = (0, _emotion.withSty
65
65
  const props = (0, _omitProps.omitProps)(this.props, MenuItemSeparator.allowedProps);
66
66
  // role="separator" would fit better here, but it causes NVDA to stop the
67
67
  // MenuItem count after it
68
- return (0, _emotion.jsx)("div", Object.assign({}, props, {
68
+ return (0, _jsxRuntime.jsx)("div", {
69
+ ...props,
69
70
  role: "presentation",
70
71
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator,
71
72
  ref: this.handleRef
72
- }));
73
+ });
73
74
  }
74
75
  }, _MenuItemSeparator.displayName = "MenuItemSeparator", _MenuItemSeparator.componentId = 'Menu.Separator', _MenuItemSeparator.propTypes = _props.propTypes, _MenuItemSeparator.allowedProps = _props.allowedProps, _MenuItemSeparator)) || _class) || _class);
75
76
  var _default = exports.default = MenuItemSeparator;