carbon-react 114.17.2 → 114.17.4

package/esm/components/button/button.config.d.ts

@@ -1,4 +1,4 @@
-import { ButtonTypes } from "./button.component";
+import { ButtonTypes, ButtonIconPosition, SizeOptions } from "./button.component";
 export declare const BUTTON_VARIANTS: ButtonTypes[];
-export declare const BUTTON_SIZES: string[];
-export declare const BUTTON_ICON_POSITIONS: string[];
+export declare const BUTTON_SIZES: SizeOptions[];
+export declare const BUTTON_ICON_POSITIONS: ButtonIconPosition[];

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -103,7 +103,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   }, [openSubmenuId, closeSubmenu]);
   const findCurrentIndex = useCallback(id => {
     const index = submenuItemIds.findIndex(itemId => itemId === id);
-    return index === -1 ? 0 : index;
+    return index;
   }, [submenuItemIds]);
   const handleKeyDown = useCallback(event => {
     if (!submenuOpen) {
@@ -137,7 +137,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       }
 
       if (Events.isTabKey(event) && Events.isShiftKey(event)) {
-        if (nextIndex === 0) {
+        if (nextIndex <= 0) {
           closeSubmenu();
           return;
         }

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -31,7 +31,6 @@ const MultiActionButton = ({
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
   const hideButtons = useCallback(() => {
-    if (buttonRef.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
 
@@ -67,7 +66,7 @@ const MultiActionButton = ({
     });
   };
 
-  const handleKeyDown = useMenuKeyboardNavigation(buttonRef, buttonChildrenRefs, hideButtons);
+  const handleKeyDown = useMenuKeyboardNavigation(buttonRef, buttonChildrenRefs, hideButtons, showAdditionalButtons);
 
   const handleMainButtonKeyDown = ev => {
     if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev)) {
@@ -83,9 +82,6 @@ const MultiActionButton = ({
 
         (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
       }, 0);
-    } else if (Events.isEscKey(ev)) {
-      ev.preventDefault();
-      setShowAdditionalButtons(false);
     }
   };
 
@@ -117,9 +113,13 @@ const MultiActionButton = ({
   }, childrenWithProps()));
 
   const handleClick = useClickAwayListener(hideButtons);
+  const hideButtonsIfTriggerNotFocused = useCallback(() => {
+    if (buttonRef.current === document.activeElement) return;
+    setShowAdditionalButtons(false);
+  }, []);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
-    onMouseLeave: hideButtons,
+    onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
     ref: ref,
     "data-component": "multi-action-button",

package/esm/components/split-button/split-button.component.js

@@ -41,10 +41,9 @@ const SplitButton = ({
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
   const hideButtons = useCallback(() => {
-    if (toggleButton.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
-  const handleKeyDown = useMenuKeyboardNavigation(toggleButton, buttonChildrenRefs, hideButtons);
+  const handleKeyDown = useMenuKeyboardNavigation(toggleButton, buttonChildrenRefs, hideButtons, showAdditionalButtons);
 
   function showButtons() {
     setShowAdditionalButtons(true);
@@ -68,16 +67,17 @@ const SplitButton = ({
 
         (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
       }, 0);
-    } else if (Events.isEscKey(ev)) {
-      setShowAdditionalButtons(false);
-      ev.preventDefault();
     }
   }
 
+  const hideButtonsIfTriggerNotFocused = useCallback(() => {
+    if (toggleButton.current === document.activeElement) return;
+    setShowAdditionalButtons(false);
+  }, []);
   const mainButtonProps = {
-    onMouseEnter: hideButtons,
-    onFocus: hideButtons,
-    onTouchStart: hideButtons,
+    onMouseEnter: hideButtonsIfTriggerNotFocused,
+    onFocus: hideButtonsIfTriggerNotFocused,
+    onTouchStart: hideButtonsIfTriggerNotFocused,
     iconPosition,
     buttonType,
     disabled,
@@ -175,7 +175,7 @@ const SplitButton = ({
   const handleClick = useClickAwayListener(hideButtons);
   return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
     "aria-haspopup": "true",
-    onMouseLeave: hideButtons,
+    onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
     ref: splitButtonNode
   }, componentTags(), filterStyledSystemMarginProps(rest)), renderMainButton(), renderAdditionalButtons());

package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void) => (ev: any) => void;
+declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void, isOpen: boolean) => (ev: any) => void;
 export default _default;

package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js

@@ -1,8 +1,24 @@
 import { useCallback, useMemo } from "react";
 import Events from "../../../__internal__/utils/helpers/events";
 import { defaultFocusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
-export default ((mainControlRef, childrenRefs, hide) => {
+import useModalManager from "../useModalManager";
+export default ((mainControlRef, childrenRefs, hide, isOpen) => {
   const childrenLength = useMemo(() => childrenRefs.length, [childrenRefs]);
+  const refocusMainControl = useCallback(() => {
+    var _mainControlRef$curre;
+
+    hide();
+    (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
+  }, [hide, mainControlRef]);
+  const handleEscapeKey = useCallback(e => {
+    /* istanbul ignore else */
+    if (Events.isEscKey(e)) {
+      refocusMainControl();
+    }
+  }, [refocusMainControl]); // useModalmanager is used here to handle the escape key
+  // and to ensure that closing the menu does not close the modal
+
+  useModalManager(isOpen, handleEscapeKey, mainControlRef);
   const handleKeyDown = useCallback(ev => {
     if (!(Events.isEnterKey(ev) || Events.isSpaceKey(ev))) {
       ev.preventDefault();
@@ -10,14 +26,6 @@ export default ((mainControlRef, childrenRefs, hide) => {
 
     const currentIndex = childrenRefs === null || childrenRefs === void 0 ? void 0 : childrenRefs.findIndex(node => node.current === document.activeElement);
     let nextIndex = -1;
-
-    const refocusMainControl = () => {
-      var _mainControlRef$curre;
-
-      hide();
-      (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
-    };
-
     const arrowModifierPressed = ev.ctrlKey || ev.metaKey;
 
     if (Events.isEndKey(ev) || arrowModifierPressed && Events.isDownKey(ev)) {
@@ -64,10 +72,6 @@ export default ((mainControlRef, childrenRefs, hide) => {
 
       (_childrenRefs$nextInd = childrenRefs[nextIndex].current) === null || _childrenRefs$nextInd === void 0 ? void 0 : _childrenRefs$nextInd.focus();
     }
-
-    if (Events.isEscKey(ev)) {
-      refocusMainControl();
-    }
-  }, [childrenLength, hide, childrenRefs, mainControlRef]);
+  }, [childrenLength, hide, refocusMainControl, childrenRefs, mainControlRef]);
   return handleKeyDown;
 });

package/lib/components/button/button.config.d.ts

@@ -1,4 +1,4 @@
-import { ButtonTypes } from "./button.component";
+import { ButtonTypes, ButtonIconPosition, SizeOptions } from "./button.component";
 export declare const BUTTON_VARIANTS: ButtonTypes[];
-export declare const BUTTON_SIZES: string[];
-export declare const BUTTON_ICON_POSITIONS: string[];
+export declare const BUTTON_SIZES: SizeOptions[];
+export declare const BUTTON_ICON_POSITIONS: ButtonIconPosition[];

package/lib/components/menu/__internal__/submenu/submenu.component.js

@@ -128,7 +128,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   }, [openSubmenuId, closeSubmenu]);
   const findCurrentIndex = (0, _react.useCallback)(id => {
     const index = submenuItemIds.findIndex(itemId => itemId === id);
-    return index === -1 ? 0 : index;
+    return index;
   }, [submenuItemIds]);
   const handleKeyDown = (0, _react.useCallback)(event => {
     if (!submenuOpen) {
@@ -162,7 +162,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       }
 
       if (_events.default.isTabKey(event) && _events.default.isShiftKey(event)) {
-        if (nextIndex === 0) {
+        if (nextIndex <= 0) {
           closeSubmenu();
           return;
         }

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -52,7 +52,6 @@ const MultiActionButton = ({
   const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
   const hideButtons = (0, _react.useCallback)(() => {
-    if (buttonRef.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
 
@@ -88,7 +87,7 @@ const MultiActionButton = ({
     });
   };
 
-  const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(buttonRef, buttonChildrenRefs, hideButtons);
+  const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(buttonRef, buttonChildrenRefs, hideButtons, showAdditionalButtons);
 
   const handleMainButtonKeyDown = ev => {
     if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev)) {
@@ -104,9 +103,6 @@ const MultiActionButton = ({
 
         (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
       }, 0);
-    } else if (_events.default.isEscKey(ev)) {
-      ev.preventDefault();
-      setShowAdditionalButtons(false);
     }
   };
 
@@ -138,9 +134,13 @@ const MultiActionButton = ({
   }, childrenWithProps()));
 
   const handleClick = (0, _useClickAwayListener.default)(hideButtons);
+  const hideButtonsIfTriggerNotFocused = (0, _react.useCallback)(() => {
+    if (buttonRef.current === document.activeElement) return;
+    setShowAdditionalButtons(false);
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
-    onMouseLeave: hideButtons,
+    onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
     ref: ref,
     "data-component": "multi-action-button",

package/lib/components/split-button/split-button.component.js

@@ -70,10 +70,9 @@ const SplitButton = ({
   const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
   const hideButtons = (0, _react.useCallback)(() => {
-    if (toggleButton.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
-  const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(toggleButton, buttonChildrenRefs, hideButtons);
+  const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(toggleButton, buttonChildrenRefs, hideButtons, showAdditionalButtons);
 
   function showButtons() {
     setShowAdditionalButtons(true);
@@ -97,16 +96,17 @@ const SplitButton = ({
 
         (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
       }, 0);
-    } else if (_events.default.isEscKey(ev)) {
-      setShowAdditionalButtons(false);
-      ev.preventDefault();
     }
   }
 
+  const hideButtonsIfTriggerNotFocused = (0, _react.useCallback)(() => {
+    if (toggleButton.current === document.activeElement) return;
+    setShowAdditionalButtons(false);
+  }, []);
   const mainButtonProps = {
-    onMouseEnter: hideButtons,
-    onFocus: hideButtons,
-    onTouchStart: hideButtons,
+    onMouseEnter: hideButtonsIfTriggerNotFocused,
+    onFocus: hideButtonsIfTriggerNotFocused,
+    onTouchStart: hideButtonsIfTriggerNotFocused,
     iconPosition,
     buttonType,
     disabled,
@@ -204,7 +204,7 @@ const SplitButton = ({
   const handleClick = (0, _useClickAwayListener.default)(hideButtons);
   return /*#__PURE__*/_react.default.createElement(_splitButton.default, _extends({
     "aria-haspopup": "true",
-    onMouseLeave: hideButtons,
+    onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
     ref: splitButtonNode
   }, componentTags(), (0, _utils.filterStyledSystemMarginProps)(rest)), renderMainButton(), renderAdditionalButtons());

package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void) => (ev: any) => void;
+declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void, isOpen: boolean) => (ev: any) => void;
 export default _default;

package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js

@@ -11,10 +11,27 @@ var _events = _interopRequireDefault(require("../../../__internal__/utils/helper
 
 var _focusTrapUtils = require("../../../__internal__/focus-trap/focus-trap-utils");
 
+var _useModalManager = _interopRequireDefault(require("../useModalManager"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = (mainControlRef, childrenRefs, hide) => {
+var _default = (mainControlRef, childrenRefs, hide, isOpen) => {
   const childrenLength = (0, _react.useMemo)(() => childrenRefs.length, [childrenRefs]);
+  const refocusMainControl = (0, _react.useCallback)(() => {
+    var _mainControlRef$curre;
+
+    hide();
+    (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
+  }, [hide, mainControlRef]);
+  const handleEscapeKey = (0, _react.useCallback)(e => {
+    /* istanbul ignore else */
+    if (_events.default.isEscKey(e)) {
+      refocusMainControl();
+    }
+  }, [refocusMainControl]); // useModalmanager is used here to handle the escape key
+  // and to ensure that closing the menu does not close the modal
+
+  (0, _useModalManager.default)(isOpen, handleEscapeKey, mainControlRef);
   const handleKeyDown = (0, _react.useCallback)(ev => {
     if (!(_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev))) {
       ev.preventDefault();
@@ -22,14 +39,6 @@ var _default = (mainControlRef, childrenRefs, hide) => {
 
     const currentIndex = childrenRefs === null || childrenRefs === void 0 ? void 0 : childrenRefs.findIndex(node => node.current === document.activeElement);
     let nextIndex = -1;
-
-    const refocusMainControl = () => {
-      var _mainControlRef$curre;
-
-      hide();
-      (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
-    };
-
     const arrowModifierPressed = ev.ctrlKey || ev.metaKey;
 
     if (_events.default.isEndKey(ev) || arrowModifierPressed && _events.default.isDownKey(ev)) {
@@ -77,11 +86,7 @@ var _default = (mainControlRef, childrenRefs, hide) => {
 
       (_childrenRefs$nextInd = childrenRefs[nextIndex].current) === null || _childrenRefs$nextInd === void 0 ? void 0 : _childrenRefs$nextInd.focus();
     }
-
-    if (_events.default.isEscKey(ev)) {
-      refocusMainControl();
-    }
-  }, [childrenLength, hide, childrenRefs, mainControlRef]);
+  }, [childrenLength, hide, refocusMainControl, childrenRefs, mainControlRef]);
   return handleKeyDown;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.17.2",
+  "version": "114.17.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -111,8 +111,8 @@
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
     "css-loader": "4.0.0",
-    "cypress": "^12.3.0",
-    "cypress-axe": "^1.2.0",
+    "cypress": "^12.7.0",
+    "cypress-axe": "^1.4.0",
     "cypress-each": "^1.13.1",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.7.6",