carbon-react 114.17.3 → 114.17.4

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 (9) hide show
  1. package/esm/components/multi-action-button/multi-action-button.component.js +6 -6
  2. package/esm/components/split-button/split-button.component.js +9 -9
  3. package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.d.ts +1 -1
  4. package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js +18 -14
  5. package/lib/components/multi-action-button/multi-action-button.component.js +6 -6
  6. package/lib/components/split-button/split-button.component.js +9 -9
  7. package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.d.ts +1 -1
  8. package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js +19 -14
  9. package/package.json +3 -3
package/esm/components/multi-action-button/multi-action-button.component.js CHANGED
@@ -31,7 +31,6 @@ const MultiActionButton = ({
31
31
  const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
32
32
  const [minWidth, setMinWidth] = useState(0);
33
33
  const hideButtons = useCallback(() => {
34
- if (buttonRef.current === document.activeElement) return;
35
34
  setShowAdditionalButtons(false);
36
35
  }, []);
37
36
 
@@ -67,7 +66,7 @@ const MultiActionButton = ({
67
66
  });
68
67
  };
69
68
 
70
- const handleKeyDown = useMenuKeyboardNavigation(buttonRef, buttonChildrenRefs, hideButtons);
69
+ const handleKeyDown = useMenuKeyboardNavigation(buttonRef, buttonChildrenRefs, hideButtons, showAdditionalButtons);
71
70
 
72
71
  const handleMainButtonKeyDown = ev => {
73
72
  if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev)) {
@@ -83,9 +82,6 @@ const MultiActionButton = ({
83
82
 
84
83
  (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
85
84
  }, 0);
86
- } else if (Events.isEscKey(ev)) {
87
- ev.preventDefault();
88
- setShowAdditionalButtons(false);
89
85
  }
90
86
  };
91
87
 
@@ -117,9 +113,13 @@ const MultiActionButton = ({
117
113
  }, childrenWithProps()));
118
114
 
119
115
  const handleClick = useClickAwayListener(hideButtons);
116
+ const hideButtonsIfTriggerNotFocused = useCallback(() => {
117
+ if (buttonRef.current === document.activeElement) return;
118
+ setShowAdditionalButtons(false);
119
+ }, []);
120
120
  return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
121
121
  "aria-haspopup": "true",
122
- onMouseLeave: hideButtons,
122
+ onMouseLeave: hideButtonsIfTriggerNotFocused,
123
123
  onClick: handleClick,
124
124
  ref: ref,
125
125
  "data-component": "multi-action-button",
package/esm/components/split-button/split-button.component.js CHANGED
@@ -41,10 +41,9 @@ const SplitButton = ({
41
41
  const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
42
42
  const [minWidth, setMinWidth] = useState(0);
43
43
  const hideButtons = useCallback(() => {
44
- if (toggleButton.current === document.activeElement) return;
45
44
  setShowAdditionalButtons(false);
46
45
  }, []);
47
- const handleKeyDown = useMenuKeyboardNavigation(toggleButton, buttonChildrenRefs, hideButtons);
46
+ const handleKeyDown = useMenuKeyboardNavigation(toggleButton, buttonChildrenRefs, hideButtons, showAdditionalButtons);
48
47
 
49
48
  function showButtons() {
50
49
  setShowAdditionalButtons(true);
@@ -68,16 +67,17 @@ const SplitButton = ({
68
67
 
69
68
  (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
70
69
  }, 0);
71
- } else if (Events.isEscKey(ev)) {
72
- setShowAdditionalButtons(false);
73
- ev.preventDefault();
74
70
  }
75
71
  }
76
72
 
73
+ const hideButtonsIfTriggerNotFocused = useCallback(() => {
74
+ if (toggleButton.current === document.activeElement) return;
75
+ setShowAdditionalButtons(false);
76
+ }, []);
77
77
  const mainButtonProps = {
78
- onMouseEnter: hideButtons,
79
- onFocus: hideButtons,
80
- onTouchStart: hideButtons,
78
+ onMouseEnter: hideButtonsIfTriggerNotFocused,
79
+ onFocus: hideButtonsIfTriggerNotFocused,
80
+ onTouchStart: hideButtonsIfTriggerNotFocused,
81
81
  iconPosition,
82
82
  buttonType,
83
83
  disabled,
@@ -175,7 +175,7 @@ const SplitButton = ({
175
175
  const handleClick = useClickAwayListener(hideButtons);
176
176
  return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
177
177
  "aria-haspopup": "true",
178
- onMouseLeave: hideButtons,
178
+ onMouseLeave: hideButtonsIfTriggerNotFocused,
179
179
  onClick: handleClick,
180
180
  ref: splitButtonNode
181
181
  }, componentTags(), filterStyledSystemMarginProps(rest)), renderMainButton(), renderAdditionalButtons());
package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void) => (ev: any) => void;
1
+ declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void, isOpen: boolean) => (ev: any) => void;
2
2
  export default _default;
package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js CHANGED
@@ -1,8 +1,24 @@
1
1
  import { useCallback, useMemo } from "react";
2
2
  import Events from "../../../__internal__/utils/helpers/events";
3
3
  import { defaultFocusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
4
- export default ((mainControlRef, childrenRefs, hide) => {
4
+ import useModalManager from "../useModalManager";
5
+ export default ((mainControlRef, childrenRefs, hide, isOpen) => {
5
6
  const childrenLength = useMemo(() => childrenRefs.length, [childrenRefs]);
7
+ const refocusMainControl = useCallback(() => {
8
+ var _mainControlRef$curre;
9
+
10
+ hide();
11
+ (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
12
+ }, [hide, mainControlRef]);
13
+ const handleEscapeKey = useCallback(e => {
14
+ /* istanbul ignore else */
15
+ if (Events.isEscKey(e)) {
16
+ refocusMainControl();
17
+ }
18
+ }, [refocusMainControl]); // useModalmanager is used here to handle the escape key
19
+ // and to ensure that closing the menu does not close the modal
20
+
21
+ useModalManager(isOpen, handleEscapeKey, mainControlRef);
6
22
  const handleKeyDown = useCallback(ev => {
7
23
  if (!(Events.isEnterKey(ev) || Events.isSpaceKey(ev))) {
8
24
  ev.preventDefault();
@@ -10,14 +26,6 @@ export default ((mainControlRef, childrenRefs, hide) => {
10
26
 
11
27
  const currentIndex = childrenRefs === null || childrenRefs === void 0 ? void 0 : childrenRefs.findIndex(node => node.current === document.activeElement);
12
28
  let nextIndex = -1;
13
-
14
- const refocusMainControl = () => {
15
- var _mainControlRef$curre;
16
-
17
- hide();
18
- (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
19
- };
20
-
21
29
  const arrowModifierPressed = ev.ctrlKey || ev.metaKey;
22
30
 
23
31
  if (Events.isEndKey(ev) || arrowModifierPressed && Events.isDownKey(ev)) {
@@ -64,10 +72,6 @@ export default ((mainControlRef, childrenRefs, hide) => {
64
72
 
65
73
  (_childrenRefs$nextInd = childrenRefs[nextIndex].current) === null || _childrenRefs$nextInd === void 0 ? void 0 : _childrenRefs$nextInd.focus();
66
74
  }
67
-
68
- if (Events.isEscKey(ev)) {
69
- refocusMainControl();
70
- }
71
- }, [childrenLength, hide, childrenRefs, mainControlRef]);
75
+ }, [childrenLength, hide, refocusMainControl, childrenRefs, mainControlRef]);
72
76
  return handleKeyDown;
73
77
  });
package/lib/components/multi-action-button/multi-action-button.component.js CHANGED
@@ -52,7 +52,6 @@ const MultiActionButton = ({
52
52
  const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
53
53
  const [minWidth, setMinWidth] = (0, _react.useState)(0);
54
54
  const hideButtons = (0, _react.useCallback)(() => {
55
- if (buttonRef.current === document.activeElement) return;
56
55
  setShowAdditionalButtons(false);
57
56
  }, []);
58
57
 
@@ -88,7 +87,7 @@ const MultiActionButton = ({
88
87
  });
89
88
  };
90
89
 
91
- const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(buttonRef, buttonChildrenRefs, hideButtons);
90
+ const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(buttonRef, buttonChildrenRefs, hideButtons, showAdditionalButtons);
92
91
 
93
92
  const handleMainButtonKeyDown = ev => {
94
93
  if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev)) {
@@ -104,9 +103,6 @@ const MultiActionButton = ({
104
103
 
105
104
  (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
106
105
  }, 0);
107
- } else if (_events.default.isEscKey(ev)) {
108
- ev.preventDefault();
109
- setShowAdditionalButtons(false);
110
106
  }
111
107
  };
112
108
 
@@ -138,9 +134,13 @@ const MultiActionButton = ({
138
134
  }, childrenWithProps()));
139
135
 
140
136
  const handleClick = (0, _useClickAwayListener.default)(hideButtons);
137
+ const hideButtonsIfTriggerNotFocused = (0, _react.useCallback)(() => {
138
+ if (buttonRef.current === document.activeElement) return;
139
+ setShowAdditionalButtons(false);
140
+ }, []);
141
141
  return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
142
142
  "aria-haspopup": "true",
143
- onMouseLeave: hideButtons,
143
+ onMouseLeave: hideButtonsIfTriggerNotFocused,
144
144
  onClick: handleClick,
145
145
  ref: ref,
146
146
  "data-component": "multi-action-button",
package/lib/components/split-button/split-button.component.js CHANGED
@@ -70,10 +70,9 @@ const SplitButton = ({
70
70
  const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
71
71
  const [minWidth, setMinWidth] = (0, _react.useState)(0);
72
72
  const hideButtons = (0, _react.useCallback)(() => {
73
- if (toggleButton.current === document.activeElement) return;
74
73
  setShowAdditionalButtons(false);
75
74
  }, []);
76
- const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(toggleButton, buttonChildrenRefs, hideButtons);
75
+ const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(toggleButton, buttonChildrenRefs, hideButtons, showAdditionalButtons);
77
76
 
78
77
  function showButtons() {
79
78
  setShowAdditionalButtons(true);
@@ -97,16 +96,17 @@ const SplitButton = ({
97
96
 
98
97
  (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
99
98
  }, 0);
100
- } else if (_events.default.isEscKey(ev)) {
101
- setShowAdditionalButtons(false);
102
- ev.preventDefault();
103
99
  }
104
100
  }
105
101
 
102
+ const hideButtonsIfTriggerNotFocused = (0, _react.useCallback)(() => {
103
+ if (toggleButton.current === document.activeElement) return;
104
+ setShowAdditionalButtons(false);
105
+ }, []);
106
106
  const mainButtonProps = {
107
- onMouseEnter: hideButtons,
108
- onFocus: hideButtons,
109
- onTouchStart: hideButtons,
107
+ onMouseEnter: hideButtonsIfTriggerNotFocused,
108
+ onFocus: hideButtonsIfTriggerNotFocused,
109
+ onTouchStart: hideButtonsIfTriggerNotFocused,
110
110
  iconPosition,
111
111
  buttonType,
112
112
  disabled,
@@ -204,7 +204,7 @@ const SplitButton = ({
204
204
  const handleClick = (0, _useClickAwayListener.default)(hideButtons);
205
205
  return /*#__PURE__*/_react.default.createElement(_splitButton.default, _extends({
206
206
  "aria-haspopup": "true",
207
- onMouseLeave: hideButtons,
207
+ onMouseLeave: hideButtonsIfTriggerNotFocused,
208
208
  onClick: handleClick,
209
209
  ref: splitButtonNode
210
210
  }, componentTags(), (0, _utils.filterStyledSystemMarginProps)(rest)), renderMainButton(), renderAdditionalButtons());
package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void) => (ev: any) => void;
1
+ declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void, isOpen: boolean) => (ev: any) => void;
2
2
  export default _default;
package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js CHANGED
@@ -11,10 +11,27 @@ var _events = _interopRequireDefault(require("../../../__internal__/utils/helper
11
11
 
12
12
  var _focusTrapUtils = require("../../../__internal__/focus-trap/focus-trap-utils");
13
13
 
14
+ var _useModalManager = _interopRequireDefault(require("../useModalManager"));
15
+
14
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
17
 
16
- var _default = (mainControlRef, childrenRefs, hide) => {
18
+ var _default = (mainControlRef, childrenRefs, hide, isOpen) => {
17
19
  const childrenLength = (0, _react.useMemo)(() => childrenRefs.length, [childrenRefs]);
20
+ const refocusMainControl = (0, _react.useCallback)(() => {
21
+ var _mainControlRef$curre;
22
+
23
+ hide();
24
+ (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
25
+ }, [hide, mainControlRef]);
26
+ const handleEscapeKey = (0, _react.useCallback)(e => {
27
+ /* istanbul ignore else */
28
+ if (_events.default.isEscKey(e)) {
29
+ refocusMainControl();
30
+ }
31
+ }, [refocusMainControl]); // useModalmanager is used here to handle the escape key
32
+ // and to ensure that closing the menu does not close the modal
33
+
34
+ (0, _useModalManager.default)(isOpen, handleEscapeKey, mainControlRef);
18
35
  const handleKeyDown = (0, _react.useCallback)(ev => {
19
36
  if (!(_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev))) {
20
37
  ev.preventDefault();
@@ -22,14 +39,6 @@ var _default = (mainControlRef, childrenRefs, hide) => {
22
39
 
23
40
  const currentIndex = childrenRefs === null || childrenRefs === void 0 ? void 0 : childrenRefs.findIndex(node => node.current === document.activeElement);
24
41
  let nextIndex = -1;
25
-
26
- const refocusMainControl = () => {
27
- var _mainControlRef$curre;
28
-
29
- hide();
30
- (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
31
- };
32
-
33
42
  const arrowModifierPressed = ev.ctrlKey || ev.metaKey;
34
43
 
35
44
  if (_events.default.isEndKey(ev) || arrowModifierPressed && _events.default.isDownKey(ev)) {
@@ -77,11 +86,7 @@ var _default = (mainControlRef, childrenRefs, hide) => {
77
86
 
78
87
  (_childrenRefs$nextInd = childrenRefs[nextIndex].current) === null || _childrenRefs$nextInd === void 0 ? void 0 : _childrenRefs$nextInd.focus();
79
88
  }
80
-
81
- if (_events.default.isEscKey(ev)) {
82
- refocusMainControl();
83
- }
84
- }, [childrenLength, hide, childrenRefs, mainControlRef]);
89
+ }, [childrenLength, hide, refocusMainControl, childrenRefs, mainControlRef]);
85
90
  return handleKeyDown;
86
91
  };
87
92
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "114.17.3",
3
+ "version": "114.17.4",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",
@@ -111,8 +111,8 @@
111
111
  "core-js": "^3.20.3",
112
112
  "cross-env": "^5.2.0",
113
113
  "css-loader": "4.0.0",
114
- "cypress": "^12.3.0",
115
- "cypress-axe": "^1.2.0",
114
+ "cypress": "^12.7.0",
115
+ "cypress-axe": "^1.4.0",
116
116
  "cypress-each": "^1.13.1",
117
117
  "cypress-plugin-tab": "^1.0.5",
118
118
  "cypress-real-events": "^1.7.6",