carbon-react 118.2.0 → 118.2.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 (7) hide show
  1. package/esm/components/menu/menu-full-screen/menu-full-screen.component.js +18 -0
  2. package/esm/components/menu/menu-item/menu-item.component.js +1 -1
  3. package/esm/components/menu/menu-item/menu-item.style.js +13 -11
  4. package/lib/components/menu/menu-full-screen/menu-full-screen.component.js +18 -0
  5. package/lib/components/menu/menu-item/menu-item.component.js +1 -1
  6. package/lib/components/menu/menu-item/menu-item.style.js +13 -11
  7. package/package.json +1 -1
package/esm/components/menu/menu-full-screen/menu-full-screen.component.js CHANGED
@@ -33,6 +33,24 @@ const MenuFullscreen = ({
33
33
  if (Events.isEscKey(ev)) {
34
34
  onClose(ev);
35
35
  }
36
+
37
+ if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
38
+ var _menuWrapperRef$curre;
39
+
40
+ const search = (_menuWrapperRef$curre = menuWrapperRef.current) === null || _menuWrapperRef$curre === void 0 ? void 0 : _menuWrapperRef$curre.querySelector('[data-component="search"');
41
+ const searchInput = search === null || search === void 0 ? void 0 : search.querySelector("input");
42
+ const searchButton = search === null || search === void 0 ? void 0 : search.querySelector("button"); // if there is no value in the search input the button disappears when the input blurs
43
+ // this means we need to programatically set focus to the next menu item
44
+
45
+ if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
46
+ var _menuWrapperRef$curre2, _elements;
47
+
48
+ ev.preventDefault();
49
+ const elements = Array.from((_menuWrapperRef$curre2 = menuWrapperRef.current) === null || _menuWrapperRef$curre2 === void 0 ? void 0 : _menuWrapperRef$curre2.querySelectorAll("a, input, button"));
50
+ const index = elements.indexOf(searchInput);
51
+ (_elements = elements[index + 2]) === null || _elements === void 0 ? void 0 : _elements.focus();
52
+ }
53
+ }
36
54
  };
37
55
 
38
56
  return /*#__PURE__*/React.createElement("li", {
package/esm/components/menu/menu-item/menu-item.component.js CHANGED
@@ -111,7 +111,7 @@ const MenuItem = ({
111
111
  (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
112
112
  }
113
113
 
114
- const shouldFocusIcon = ((_inputIcon$current2 = inputIcon.current) === null || _inputIcon$current2 === void 0 ? void 0 : _inputIcon$current2.getAttribute("tabindex")) === "0" && document.activeElement === inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value); // let natural tab order move focus if input icon is tabbable
114
+ const shouldFocusIcon = ((_inputIcon$current2 = inputIcon.current) === null || _inputIcon$current2 === void 0 ? void 0 : _inputIcon$current2.getAttribute("tabindex")) === "0" && document.activeElement === inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value); // let natural tab order move focus if input icon is tabbable or input with button exists
115
115
 
116
116
  if (Events.isTabKey(event) && (!Events.isShiftKey(event) && shouldFocusIcon || Events.isShiftKey(event) && document.activeElement === inputIcon.current)) {
117
117
  return;
package/esm/components/menu/menu-item/menu-item.style.js CHANGED
@@ -300,18 +300,20 @@ const StyledMenuItemWrapper = styled.a.attrs({
300
300
  position: relative;
301
301
  }
302
302
 
303
- a:focus,
304
- a:hover,
305
- button:focus,
306
- button:hover {
307
- background-color: var(--colorsComponentsMenuAutumnStandard600);
308
- color: var(--colorsComponentsMenuYang100);
303
+ && {
304
+ a:focus,
305
+ a:hover,
306
+ button:focus,
307
+ button:hover {
308
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
309
+ color: var(--colorsComponentsMenuYang100);
309
310
 
310
- ${!hasInput && `
311
- [data-component="icon"] {
312
- color: var(--colorsComponentsMenuYang100);
313
- }
314
- `}
311
+ ${!hasInput && `
312
+ [data-component="icon"] {
313
+ color: var(--colorsComponentsMenuYang100);
314
+ }
315
+ `}
316
+ }
315
317
  }
316
318
  }
317
319
  `}
package/lib/components/menu/menu-full-screen/menu-full-screen.component.js CHANGED
@@ -58,6 +58,24 @@ const MenuFullscreen = ({
58
58
  if (_events.default.isEscKey(ev)) {
59
59
  onClose(ev);
60
60
  }
61
+
62
+ if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev)) {
63
+ var _menuWrapperRef$curre;
64
+
65
+ const search = (_menuWrapperRef$curre = menuWrapperRef.current) === null || _menuWrapperRef$curre === void 0 ? void 0 : _menuWrapperRef$curre.querySelector('[data-component="search"');
66
+ const searchInput = search === null || search === void 0 ? void 0 : search.querySelector("input");
67
+ const searchButton = search === null || search === void 0 ? void 0 : search.querySelector("button"); // if there is no value in the search input the button disappears when the input blurs
68
+ // this means we need to programatically set focus to the next menu item
69
+
70
+ if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
71
+ var _menuWrapperRef$curre2, _elements;
72
+
73
+ ev.preventDefault();
74
+ const elements = Array.from((_menuWrapperRef$curre2 = menuWrapperRef.current) === null || _menuWrapperRef$curre2 === void 0 ? void 0 : _menuWrapperRef$curre2.querySelectorAll("a, input, button"));
75
+ const index = elements.indexOf(searchInput);
76
+ (_elements = elements[index + 2]) === null || _elements === void 0 ? void 0 : _elements.focus();
77
+ }
78
+ }
61
79
  };
62
80
 
63
81
  return /*#__PURE__*/_react.default.createElement("li", {
package/lib/components/menu/menu-item/menu-item.component.js CHANGED
@@ -135,7 +135,7 @@ const MenuItem = ({
135
135
  (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
136
136
  }
137
137
 
138
- const shouldFocusIcon = ((_inputIcon$current2 = inputIcon.current) === null || _inputIcon$current2 === void 0 ? void 0 : _inputIcon$current2.getAttribute("tabindex")) === "0" && document.activeElement === inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value); // let natural tab order move focus if input icon is tabbable
138
+ const shouldFocusIcon = ((_inputIcon$current2 = inputIcon.current) === null || _inputIcon$current2 === void 0 ? void 0 : _inputIcon$current2.getAttribute("tabindex")) === "0" && document.activeElement === inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value); // let natural tab order move focus if input icon is tabbable or input with button exists
139
139
 
140
140
  if (_events.default.isTabKey(event) && (!_events.default.isShiftKey(event) && shouldFocusIcon || _events.default.isShiftKey(event) && document.activeElement === inputIcon.current)) {
141
141
  return;
package/lib/components/menu/menu-item/menu-item.style.js CHANGED
@@ -321,18 +321,20 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
321
321
  position: relative;
322
322
  }
323
323
 
324
- a:focus,
325
- a:hover,
326
- button:focus,
327
- button:hover {
328
- background-color: var(--colorsComponentsMenuAutumnStandard600);
329
- color: var(--colorsComponentsMenuYang100);
324
+ && {
325
+ a:focus,
326
+ a:hover,
327
+ button:focus,
328
+ button:hover {
329
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
330
+ color: var(--colorsComponentsMenuYang100);
330
331
 
331
- ${!hasInput && `
332
- [data-component="icon"] {
333
- color: var(--colorsComponentsMenuYang100);
334
- }
335
- `}
332
+ ${!hasInput && `
333
+ [data-component="icon"] {
334
+ color: var(--colorsComponentsMenuYang100);
335
+ }
336
+ `}
337
+ }
336
338
  }
337
339
  }
338
340
  `}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "118.2.0",
3
+ "version": "118.2.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",