@dhis2-ui/menu 9.12.0 → 9.13.0

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 (7) hide show
  1. package/build/cjs/flyout-menu/__tests__/flyout-menu.test.js +7 -7
  2. package/build/cjs/menu/__tests__/menu.test.js +40 -31
  3. package/build/cjs/menu-item/__tests__/menu-item.test.js +4 -4
  4. package/build/es/flyout-menu/__tests__/flyout-menu.test.js +7 -7
  5. package/build/es/menu/__tests__/menu.test.js +40 -31
  6. package/build/es/menu-item/__tests__/menu-item.test.js +4 -4
  7. package/package.json +12 -12
package/build/cjs/flyout-menu/__tests__/flyout-menu.test.js CHANGED
@@ -1,18 +1,18 @@
1
1
  "use strict";
2
2
 
3
3
  var _react = require("@testing-library/react");
4
- var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
4
+ var _userEvent = require("@testing-library/user-event");
5
5
  var _react2 = _interopRequireDefault(require("react"));
6
6
  var _menuItem = require("../../menu-item/menu-item.js");
7
7
  var _flyoutMenu = require("../flyout-menu.js");
8
8
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
9
  describe('Flyout Menu Component', () => {
10
- it('can handle navigation of submenus', () => {
10
+ it('can handle navigation of submenus', async () => {
11
11
  const {
12
12
  getByText,
13
13
  queryByText,
14
14
  getAllByRole
15
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_flyoutMenu.FlyoutMenu, null, /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
15
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_flyoutMenu.FlyoutMenu, null, /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
16
16
  label: "Item 1"
17
17
  }), /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
18
18
  label: "Item 2"
@@ -27,17 +27,17 @@ describe('Flyout Menu Component', () => {
27
27
  expect(menuItems[0]).toBe(itemOne.parentNode);
28
28
  expect(menuItems[1]).toBe(itemTwo.parentNode);
29
29
  expect(submenuChild).not.toBeInTheDocument();
30
- _userEvent.default.tab();
30
+ await _userEvent.userEvent.tab();
31
31
  expect(menuItems[0].parentNode).toHaveFocus();
32
32
  expect(menuItems[1].parentNode).not.toHaveFocus();
33
- _userEvent.default.keyboard('{ArrowDown}');
33
+ await _userEvent.userEvent.keyboard('{ArrowDown}');
34
34
  expect(menuItems[0].parentNode).not.toHaveFocus();
35
35
  expect(menuItems[1].parentNode).toHaveFocus();
36
- _userEvent.default.keyboard('{ArrowRight}');
36
+ await _userEvent.userEvent.keyboard('{ArrowRight}');
37
37
  submenuChild = getByText(/Item 2 a/i);
38
38
  expect(submenuChild).toBeInTheDocument();
39
39
  expect(submenuChild.parentElement.parentElement).toHaveFocus();
40
- _userEvent.default.keyboard('{ArrowLeft}');
40
+ await _userEvent.userEvent.keyboard('{ArrowLeft}');
41
41
  expect(queryByText(/Item 2 a/i)).not.toBeInTheDocument();
42
42
  expect(menuItems[1].parentNode).toHaveFocus();
43
43
  });
package/build/cjs/menu/__tests__/menu.test.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var _input = require("@dhis2-ui/input");
4
4
  var _react = require("@testing-library/react");
5
- var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
5
+ var _userEvent = require("@testing-library/user-event");
6
6
  var _enzyme = require("enzyme");
7
7
  var _react2 = _interopRequireDefault(require("react"));
8
8
  var _menuDivider = require("../../menu-divider/menu-divider.js");
@@ -15,7 +15,7 @@ describe('Menu Component', () => {
15
15
  const menuItemDataTest = 'data-test-menu-item';
16
16
  const dividerDataTest = 'data-test-menu-divider';
17
17
  it('Menu and menu items have aria attributes', () => {
18
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
18
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_menu.Menu, {
19
19
  dataTest: menuDataTest,
20
20
  dense: false
21
21
  }, /*#__PURE__*/_react2.default.createElement(_menuSectionHeader.MenuSectionHeader, {
@@ -42,7 +42,7 @@ describe('Menu Component', () => {
42
42
  });
43
43
  it('Empty menu has role menu', () => {
44
44
  const menuDataTest = 'data-test-menu';
45
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
45
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_menu.Menu, {
46
46
  dataTest: menuDataTest,
47
47
  dense: false
48
48
  }));
@@ -51,11 +51,11 @@ describe('Menu Component', () => {
51
51
  });
52
52
  expect(menuElement.prop('role')).toBe('menu');
53
53
  });
54
- it('can handle focus of first focusable element when tabbed to', () => {
54
+ it('can handle focus of first focusable element when tabbed to', async () => {
55
55
  const {
56
56
  getByRole,
57
57
  getByText
58
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
58
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_menu.Menu, {
59
59
  dataTest: menuDataTest,
60
60
  dense: false
61
61
  }, /*#__PURE__*/_react2.default.createElement(_menuSectionHeader.MenuSectionHeader, {
@@ -74,8 +74,9 @@ describe('Menu Component', () => {
74
74
  const header = getByText(/Header/i);
75
75
  const menuItem1 = getByText(/Menu item 1/i);
76
76
  const menuItem2 = getByText(/Menu item 2/i);
77
+ const user = _userEvent.userEvent.setup();
77
78
  expect(menu).not.toHaveFocus();
78
- _userEvent.default.tab();
79
+ await user.keyboard('{Tab}');
79
80
  // check if LI parent node has focus or not
80
81
  // headers and dividers do not receive focus
81
82
  expect(header.parentNode.parentNode).not.toHaveFocus();
@@ -86,7 +87,7 @@ describe('Menu Component', () => {
86
87
  it('can handle arrow down key navigation', async () => {
87
88
  const {
88
89
  getByText
89
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
90
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_menu.Menu, {
90
91
  dataTest: menuDataTest,
91
92
  dense: false
92
93
  }, /*#__PURE__*/_react2.default.createElement(_menuSectionHeader.MenuSectionHeader, {
@@ -102,20 +103,24 @@ describe('Menu Component', () => {
102
103
  })));
103
104
  const menuItem1 = getByText(/Menu item 1/i);
104
105
  const menuItem2 = getByText(/Menu item 2/i);
105
- _userEvent.default.tab();
106
+ const user = _userEvent.userEvent.setup();
107
+ expect(document.body).toHaveFocus();
108
+
109
+ // await fireEvent.focus(getByRole('menu'))
110
+ await user.keyboard('{Tab}');
106
111
  expect(menuItem1.parentNode.parentNode).toHaveFocus();
107
112
  // simulate arrowDown press
108
- _userEvent.default.keyboard('{ArrowDown}');
113
+ await user.keyboard('{ArrowDown}');
109
114
  expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
110
115
  expect(menuItem2.parentNode.parentNode).toHaveFocus();
111
- _userEvent.default.keyboard('{ArrowDown}');
116
+ await user.keyboard('{ArrowDown}');
112
117
  expect(menuItem1.parentNode.parentNode).toHaveFocus();
113
118
  expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
114
119
  });
115
120
  it('can handle arrow up key navigation', async () => {
116
121
  const {
117
122
  getByText
118
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
123
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_menu.Menu, {
119
124
  dataTest: menuDataTest,
120
125
  dense: false
121
126
  }, /*#__PURE__*/_react2.default.createElement(_menuSectionHeader.MenuSectionHeader, {
@@ -131,14 +136,15 @@ describe('Menu Component', () => {
131
136
  })));
132
137
  const menuItem1 = getByText(/Menu item 1/i);
133
138
  const menuItem2 = getByText(/Menu item 2/i);
134
- _userEvent.default.tab();
139
+ const user = _userEvent.userEvent.setup();
140
+ await user.tab();
135
141
  expect(menuItem1.parentNode.parentNode).toHaveFocus();
136
142
 
137
143
  // simulate arrowUp press
138
- _userEvent.default.keyboard('{ArrowUp}');
144
+ await user.keyboard('{ArrowUp}');
139
145
  expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
140
146
  expect(menuItem2.parentNode.parentNode).toHaveFocus();
141
- _userEvent.default.keyboard('{ArrowUp}');
147
+ await user.keyboard('{ArrowUp}');
142
148
  expect(menuItem1.parentNode.parentNode).toHaveFocus();
143
149
  expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
144
150
  });
@@ -146,7 +152,7 @@ describe('Menu Component', () => {
146
152
  const onClick = jest.fn();
147
153
  const {
148
154
  getByText
149
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
155
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_menu.Menu, {
150
156
  dataTest: menuDataTest,
151
157
  dense: false
152
158
  }, /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
@@ -155,18 +161,19 @@ describe('Menu Component', () => {
155
161
  label: "Click menu item"
156
162
  })));
157
163
  const clickableItem = getByText(/Click menu item/i);
158
- _userEvent.default.tab();
164
+ const user = _userEvent.userEvent.setup();
165
+ await user.tab();
159
166
  expect(clickableItem.parentNode.parentNode).toHaveFocus();
160
- _userEvent.default.keyboard('[Space]');
167
+ await user.keyboard('[Space]');
161
168
  expect(onClick).toHaveBeenCalledTimes(1);
162
- _userEvent.default.keyboard('{Enter}');
169
+ await user.keyboard('{Enter}');
163
170
  expect(onClick).toHaveBeenCalledTimes(2);
164
171
  });
165
- it('can handle non MenuItem components', () => {
172
+ it('can handle non MenuItem components', async () => {
166
173
  const onClick = jest.fn();
167
174
  const {
168
175
  getByText
169
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
176
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_menu.Menu, {
170
177
  dataTest: menuDataTest,
171
178
  dense: false
172
179
  }, /*#__PURE__*/_react2.default.createElement("span", {
@@ -186,24 +193,25 @@ describe('Menu Component', () => {
186
193
 
187
194
  // all children must be list items
188
195
  expect(nonListMenuItem.parentElement.nodeName).toBe('LI');
189
- _userEvent.default.tab();
196
+ const user = _userEvent.userEvent.setup();
197
+ await user.tab();
190
198
  expect(nonListMenuItem.parentElement).toHaveFocus();
191
199
  expect(nonListMenuItem.parentElement.tabIndex).toBe(0);
192
200
  expect(onClick).toHaveBeenCalledTimes(0);
193
- _userEvent.default.keyboard('[Space]');
201
+ await user.keyboard(' ');
194
202
  expect(onClick).toHaveBeenCalledTimes(1);
195
- _userEvent.default.keyboard('{ArrowDown}');
203
+ await user.keyboard('{ArrowDown}');
196
204
  expect(listMenuItem.parentElement).toHaveFocus();
197
- _userEvent.default.keyboard('{ArrowDown}');
205
+ await user.keyboard('{ArrowDown}');
198
206
  expect(nonListMenuItem.parentElement).toHaveFocus();
199
207
  // non menu items do not receive focus
200
208
  expect(plainListItem.parentElement).not.toHaveFocus();
201
209
  });
202
- it('does not hijack input change value if space entered [bug]', () => {
210
+ it('does not hijack input change value if space entered [bug]', async () => {
203
211
  const onChange = jest.fn();
204
212
  const {
205
213
  getByPlaceholderText
206
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
214
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_menu.Menu, {
207
215
  dataTest: menuDataTest,
208
216
  dense: false
209
217
  }, /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
@@ -214,11 +222,12 @@ describe('Menu Component', () => {
214
222
  placeholder: "test"
215
223
  })));
216
224
  const inputField = getByPlaceholderText('test');
217
- inputField.focus();
218
- _userEvent.default.keyboard('t');
219
- _userEvent.default.keyboard('e');
220
- _userEvent.default.keyboard(' ');
221
- _userEvent.default.keyboard('st');
225
+ const user = _userEvent.userEvent.setup();
226
+ await inputField.focus();
227
+ await user.type(inputField, 't');
228
+ await user.type(inputField, 'e');
229
+ await user.type(inputField, ' ');
230
+ await user.type(inputField, 'st');
222
231
  expect(inputField.value).toBe('te st');
223
232
  expect(onChange).toHaveBeenCalled();
224
233
  });
package/build/cjs/menu-item/__tests__/menu-item.test.js CHANGED
@@ -7,7 +7,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
7
7
  describe('Menu Component', () => {
8
8
  it('Default menu item has role', () => {
9
9
  const menuItemDataTest = 'data-test-menu-item';
10
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
10
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
11
11
  dataTest: menuItemDataTest,
12
12
  label: "Menu item"
13
13
  }));
@@ -20,7 +20,7 @@ describe('Menu Component', () => {
20
20
  });
21
21
  it('Disabled menu item has aria-disabled attribute', () => {
22
22
  const menuItemDataTest = 'data-test-menu-item';
23
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
23
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
24
24
  dataTest: menuItemDataTest,
25
25
  label: "Disabled menu item",
26
26
  disabled: true
@@ -34,7 +34,7 @@ describe('Menu Component', () => {
34
34
  });
35
35
  it('Toggle-able menu item has menuitemcheckbox role', () => {
36
36
  const menuItemDataTest = 'data-test-menu-item';
37
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
37
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
38
38
  dataTest: menuItemDataTest,
39
39
  label: "Toggle-able menu item",
40
40
  checkbox: true,
@@ -50,7 +50,7 @@ describe('Menu Component', () => {
50
50
  });
51
51
  it('Submenu has relevant aria attributes', () => {
52
52
  const showSubMenu = false;
53
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
53
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
54
54
  showSubMenu: showSubMenu,
55
55
  toggleSubMenu: () => jest.fn(),
56
56
  label: "Parent of submenus"
package/build/es/flyout-menu/__tests__/flyout-menu.test.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import { render } from '@testing-library/react';
2
- import userEvent from '@testing-library/user-event';
2
+ import { userEvent } from '@testing-library/user-event';
3
3
  import React from 'react';
4
4
  import { MenuItem } from '../../menu-item/menu-item.js';
5
5
  import { FlyoutMenu } from '../flyout-menu.js';
6
6
  describe('Flyout Menu Component', () => {
7
- it('can handle navigation of submenus', () => {
7
+ it('can handle navigation of submenus', async () => {
8
8
  const {
9
9
  getByText,
10
10
  queryByText,
11
11
  getAllByRole
12
- } = render( /*#__PURE__*/React.createElement(FlyoutMenu, null, /*#__PURE__*/React.createElement(MenuItem, {
12
+ } = render(/*#__PURE__*/React.createElement(FlyoutMenu, null, /*#__PURE__*/React.createElement(MenuItem, {
13
13
  label: "Item 1"
14
14
  }), /*#__PURE__*/React.createElement(MenuItem, {
15
15
  label: "Item 2"
@@ -24,17 +24,17 @@ describe('Flyout Menu Component', () => {
24
24
  expect(menuItems[0]).toBe(itemOne.parentNode);
25
25
  expect(menuItems[1]).toBe(itemTwo.parentNode);
26
26
  expect(submenuChild).not.toBeInTheDocument();
27
- userEvent.tab();
27
+ await userEvent.tab();
28
28
  expect(menuItems[0].parentNode).toHaveFocus();
29
29
  expect(menuItems[1].parentNode).not.toHaveFocus();
30
- userEvent.keyboard('{ArrowDown}');
30
+ await userEvent.keyboard('{ArrowDown}');
31
31
  expect(menuItems[0].parentNode).not.toHaveFocus();
32
32
  expect(menuItems[1].parentNode).toHaveFocus();
33
- userEvent.keyboard('{ArrowRight}');
33
+ await userEvent.keyboard('{ArrowRight}');
34
34
  submenuChild = getByText(/Item 2 a/i);
35
35
  expect(submenuChild).toBeInTheDocument();
36
36
  expect(submenuChild.parentElement.parentElement).toHaveFocus();
37
- userEvent.keyboard('{ArrowLeft}');
37
+ await userEvent.keyboard('{ArrowLeft}');
38
38
  expect(queryByText(/Item 2 a/i)).not.toBeInTheDocument();
39
39
  expect(menuItems[1].parentNode).toHaveFocus();
40
40
  });
package/build/es/menu/__tests__/menu.test.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Input } from '@dhis2-ui/input';
2
2
  import { render } from '@testing-library/react';
3
- import userEvent from '@testing-library/user-event';
3
+ import { userEvent } from '@testing-library/user-event';
4
4
  import { mount } from 'enzyme';
5
5
  import React from 'react';
6
6
  import { MenuDivider } from '../../menu-divider/menu-divider.js';
@@ -12,7 +12,7 @@ describe('Menu Component', () => {
12
12
  const menuItemDataTest = 'data-test-menu-item';
13
13
  const dividerDataTest = 'data-test-menu-divider';
14
14
  it('Menu and menu items have aria attributes', () => {
15
- const wrapper = mount( /*#__PURE__*/React.createElement(Menu, {
15
+ const wrapper = mount(/*#__PURE__*/React.createElement(Menu, {
16
16
  dataTest: menuDataTest,
17
17
  dense: false
18
18
  }, /*#__PURE__*/React.createElement(MenuSectionHeader, {
@@ -39,7 +39,7 @@ describe('Menu Component', () => {
39
39
  });
40
40
  it('Empty menu has role menu', () => {
41
41
  const menuDataTest = 'data-test-menu';
42
- const wrapper = mount( /*#__PURE__*/React.createElement(Menu, {
42
+ const wrapper = mount(/*#__PURE__*/React.createElement(Menu, {
43
43
  dataTest: menuDataTest,
44
44
  dense: false
45
45
  }));
@@ -48,11 +48,11 @@ describe('Menu Component', () => {
48
48
  });
49
49
  expect(menuElement.prop('role')).toBe('menu');
50
50
  });
51
- it('can handle focus of first focusable element when tabbed to', () => {
51
+ it('can handle focus of first focusable element when tabbed to', async () => {
52
52
  const {
53
53
  getByRole,
54
54
  getByText
55
- } = render( /*#__PURE__*/React.createElement(Menu, {
55
+ } = render(/*#__PURE__*/React.createElement(Menu, {
56
56
  dataTest: menuDataTest,
57
57
  dense: false
58
58
  }, /*#__PURE__*/React.createElement(MenuSectionHeader, {
@@ -71,8 +71,9 @@ describe('Menu Component', () => {
71
71
  const header = getByText(/Header/i);
72
72
  const menuItem1 = getByText(/Menu item 1/i);
73
73
  const menuItem2 = getByText(/Menu item 2/i);
74
+ const user = userEvent.setup();
74
75
  expect(menu).not.toHaveFocus();
75
- userEvent.tab();
76
+ await user.keyboard('{Tab}');
76
77
  // check if LI parent node has focus or not
77
78
  // headers and dividers do not receive focus
78
79
  expect(header.parentNode.parentNode).not.toHaveFocus();
@@ -83,7 +84,7 @@ describe('Menu Component', () => {
83
84
  it('can handle arrow down key navigation', async () => {
84
85
  const {
85
86
  getByText
86
- } = render( /*#__PURE__*/React.createElement(Menu, {
87
+ } = render(/*#__PURE__*/React.createElement(Menu, {
87
88
  dataTest: menuDataTest,
88
89
  dense: false
89
90
  }, /*#__PURE__*/React.createElement(MenuSectionHeader, {
@@ -99,20 +100,24 @@ describe('Menu Component', () => {
99
100
  })));
100
101
  const menuItem1 = getByText(/Menu item 1/i);
101
102
  const menuItem2 = getByText(/Menu item 2/i);
102
- userEvent.tab();
103
+ const user = userEvent.setup();
104
+ expect(document.body).toHaveFocus();
105
+
106
+ // await fireEvent.focus(getByRole('menu'))
107
+ await user.keyboard('{Tab}');
103
108
  expect(menuItem1.parentNode.parentNode).toHaveFocus();
104
109
  // simulate arrowDown press
105
- userEvent.keyboard('{ArrowDown}');
110
+ await user.keyboard('{ArrowDown}');
106
111
  expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
107
112
  expect(menuItem2.parentNode.parentNode).toHaveFocus();
108
- userEvent.keyboard('{ArrowDown}');
113
+ await user.keyboard('{ArrowDown}');
109
114
  expect(menuItem1.parentNode.parentNode).toHaveFocus();
110
115
  expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
111
116
  });
112
117
  it('can handle arrow up key navigation', async () => {
113
118
  const {
114
119
  getByText
115
- } = render( /*#__PURE__*/React.createElement(Menu, {
120
+ } = render(/*#__PURE__*/React.createElement(Menu, {
116
121
  dataTest: menuDataTest,
117
122
  dense: false
118
123
  }, /*#__PURE__*/React.createElement(MenuSectionHeader, {
@@ -128,14 +133,15 @@ describe('Menu Component', () => {
128
133
  })));
129
134
  const menuItem1 = getByText(/Menu item 1/i);
130
135
  const menuItem2 = getByText(/Menu item 2/i);
131
- userEvent.tab();
136
+ const user = userEvent.setup();
137
+ await user.tab();
132
138
  expect(menuItem1.parentNode.parentNode).toHaveFocus();
133
139
 
134
140
  // simulate arrowUp press
135
- userEvent.keyboard('{ArrowUp}');
141
+ await user.keyboard('{ArrowUp}');
136
142
  expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
137
143
  expect(menuItem2.parentNode.parentNode).toHaveFocus();
138
- userEvent.keyboard('{ArrowUp}');
144
+ await user.keyboard('{ArrowUp}');
139
145
  expect(menuItem1.parentNode.parentNode).toHaveFocus();
140
146
  expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
141
147
  });
@@ -143,7 +149,7 @@ describe('Menu Component', () => {
143
149
  const onClick = jest.fn();
144
150
  const {
145
151
  getByText
146
- } = render( /*#__PURE__*/React.createElement(Menu, {
152
+ } = render(/*#__PURE__*/React.createElement(Menu, {
147
153
  dataTest: menuDataTest,
148
154
  dense: false
149
155
  }, /*#__PURE__*/React.createElement(MenuItem, {
@@ -152,18 +158,19 @@ describe('Menu Component', () => {
152
158
  label: "Click menu item"
153
159
  })));
154
160
  const clickableItem = getByText(/Click menu item/i);
155
- userEvent.tab();
161
+ const user = userEvent.setup();
162
+ await user.tab();
156
163
  expect(clickableItem.parentNode.parentNode).toHaveFocus();
157
- userEvent.keyboard('[Space]');
164
+ await user.keyboard('[Space]');
158
165
  expect(onClick).toHaveBeenCalledTimes(1);
159
- userEvent.keyboard('{Enter}');
166
+ await user.keyboard('{Enter}');
160
167
  expect(onClick).toHaveBeenCalledTimes(2);
161
168
  });
162
- it('can handle non MenuItem components', () => {
169
+ it('can handle non MenuItem components', async () => {
163
170
  const onClick = jest.fn();
164
171
  const {
165
172
  getByText
166
- } = render( /*#__PURE__*/React.createElement(Menu, {
173
+ } = render(/*#__PURE__*/React.createElement(Menu, {
167
174
  dataTest: menuDataTest,
168
175
  dense: false
169
176
  }, /*#__PURE__*/React.createElement("span", {
@@ -183,24 +190,25 @@ describe('Menu Component', () => {
183
190
 
184
191
  // all children must be list items
185
192
  expect(nonListMenuItem.parentElement.nodeName).toBe('LI');
186
- userEvent.tab();
193
+ const user = userEvent.setup();
194
+ await user.tab();
187
195
  expect(nonListMenuItem.parentElement).toHaveFocus();
188
196
  expect(nonListMenuItem.parentElement.tabIndex).toBe(0);
189
197
  expect(onClick).toHaveBeenCalledTimes(0);
190
- userEvent.keyboard('[Space]');
198
+ await user.keyboard(' ');
191
199
  expect(onClick).toHaveBeenCalledTimes(1);
192
- userEvent.keyboard('{ArrowDown}');
200
+ await user.keyboard('{ArrowDown}');
193
201
  expect(listMenuItem.parentElement).toHaveFocus();
194
- userEvent.keyboard('{ArrowDown}');
202
+ await user.keyboard('{ArrowDown}');
195
203
  expect(nonListMenuItem.parentElement).toHaveFocus();
196
204
  // non menu items do not receive focus
197
205
  expect(plainListItem.parentElement).not.toHaveFocus();
198
206
  });
199
- it('does not hijack input change value if space entered [bug]', () => {
207
+ it('does not hijack input change value if space entered [bug]', async () => {
200
208
  const onChange = jest.fn();
201
209
  const {
202
210
  getByPlaceholderText
203
- } = render( /*#__PURE__*/React.createElement(Menu, {
211
+ } = render(/*#__PURE__*/React.createElement(Menu, {
204
212
  dataTest: menuDataTest,
205
213
  dense: false
206
214
  }, /*#__PURE__*/React.createElement(MenuItem, {
@@ -211,11 +219,12 @@ describe('Menu Component', () => {
211
219
  placeholder: "test"
212
220
  })));
213
221
  const inputField = getByPlaceholderText('test');
214
- inputField.focus();
215
- userEvent.keyboard('t');
216
- userEvent.keyboard('e');
217
- userEvent.keyboard(' ');
218
- userEvent.keyboard('st');
222
+ const user = userEvent.setup();
223
+ await inputField.focus();
224
+ await user.type(inputField, 't');
225
+ await user.type(inputField, 'e');
226
+ await user.type(inputField, ' ');
227
+ await user.type(inputField, 'st');
219
228
  expect(inputField.value).toBe('te st');
220
229
  expect(onChange).toHaveBeenCalled();
221
230
  });
package/build/es/menu-item/__tests__/menu-item.test.js CHANGED
@@ -4,7 +4,7 @@ import { MenuItem } from '../menu-item.js';
4
4
  describe('Menu Component', () => {
5
5
  it('Default menu item has role', () => {
6
6
  const menuItemDataTest = 'data-test-menu-item';
7
- const wrapper = mount( /*#__PURE__*/React.createElement(MenuItem, {
7
+ const wrapper = mount(/*#__PURE__*/React.createElement(MenuItem, {
8
8
  dataTest: menuItemDataTest,
9
9
  label: "Menu item"
10
10
  }));
@@ -17,7 +17,7 @@ describe('Menu Component', () => {
17
17
  });
18
18
  it('Disabled menu item has aria-disabled attribute', () => {
19
19
  const menuItemDataTest = 'data-test-menu-item';
20
- const wrapper = mount( /*#__PURE__*/React.createElement(MenuItem, {
20
+ const wrapper = mount(/*#__PURE__*/React.createElement(MenuItem, {
21
21
  dataTest: menuItemDataTest,
22
22
  label: "Disabled menu item",
23
23
  disabled: true
@@ -31,7 +31,7 @@ describe('Menu Component', () => {
31
31
  });
32
32
  it('Toggle-able menu item has menuitemcheckbox role', () => {
33
33
  const menuItemDataTest = 'data-test-menu-item';
34
- const wrapper = mount( /*#__PURE__*/React.createElement(MenuItem, {
34
+ const wrapper = mount(/*#__PURE__*/React.createElement(MenuItem, {
35
35
  dataTest: menuItemDataTest,
36
36
  label: "Toggle-able menu item",
37
37
  checkbox: true,
@@ -47,7 +47,7 @@ describe('Menu Component', () => {
47
47
  });
48
48
  it('Submenu has relevant aria attributes', () => {
49
49
  const showSubMenu = false;
50
- const wrapper = mount( /*#__PURE__*/React.createElement(MenuItem, {
50
+ const wrapper = mount(/*#__PURE__*/React.createElement(MenuItem, {
51
51
  showSubMenu: showSubMenu,
52
52
  toggleSubMenu: () => jest.fn(),
53
53
  label: "Parent of submenus"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/menu",
3
- "version": "9.12.0",
3
+ "version": "9.13.0",
4
4
  "description": "UI Menu",
5
5
  "repository": {
6
6
  "type": "git",
@@ -27,19 +27,19 @@
27
27
  "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
28
28
  },
29
29
  "peerDependencies": {
30
- "react": "^16.13",
31
- "react-dom": "^16.13",
30
+ "react": "^16.13 || ^18",
31
+ "react-dom": "^16.13 || ^18",
32
32
  "styled-jsx": "^4"
33
33
  },
34
34
  "dependencies": {
35
35
  "@dhis2/prop-types": "^3.1.2",
36
- "@dhis2-ui/card": "9.12.0",
37
- "@dhis2-ui/divider": "9.12.0",
38
- "@dhis2-ui/layer": "9.12.0",
39
- "@dhis2-ui/popper": "9.12.0",
40
- "@dhis2-ui/portal": "9.12.0",
41
- "@dhis2/ui-constants": "9.12.0",
42
- "@dhis2/ui-icons": "9.12.0",
36
+ "@dhis2-ui/card": "9.13.0",
37
+ "@dhis2-ui/divider": "9.13.0",
38
+ "@dhis2-ui/layer": "9.13.0",
39
+ "@dhis2-ui/popper": "9.13.0",
40
+ "@dhis2-ui/portal": "9.13.0",
41
+ "@dhis2/ui-constants": "9.13.0",
42
+ "@dhis2/ui-icons": "9.13.0",
43
43
  "classnames": "^2.3.1",
44
44
  "prop-types": "^15.7.2"
45
45
  },
@@ -48,8 +48,8 @@
48
48
  "types"
49
49
  ],
50
50
  "devDependencies": {
51
- "react": "16.13",
52
- "react-dom": "16.13",
51
+ "react": "^18.3.1",
52
+ "react-dom": "^18.3.1",
53
53
  "styled-jsx": "^4.0.1"
54
54
  },
55
55
  "types": "types"