carbon-react 114.17.0 → 114.17.2

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

@@ -43,6 +43,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   const [submenuItemIds, setSubmenuItemIds] = useState([]);
   const [characterString, setCharacterString] = useState("");
   const shiftTabPressed = useRef(false);
+  const focusFirstMenuItemOnOpen = useRef(false);
   const registerItem = useCallback(id => {
     setSubmenuItemIds(prevState => {
       return [...prevState, id];
@@ -109,6 +110,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       if (Events.isEnterKey(event) || Events.isSpaceKey(event) || Events.isDownKey(event) || Events.isUpKey(event)) {
         event.preventDefault();
         openSubmenu();
+        focusFirstMenuItemOnOpen.current = !href;
       }
     }
 
@@ -212,10 +214,11 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     }
   }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
   useEffect(() => {
-    if (submenuOpen && !href && !submenuFocusId && submenuItemIds.length) {
+    if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
+      focusFirstMenuItemOnOpen.current = false;
       setSubmenuFocusId(submenuItemIds[0]);
     }
-  }, [submenuOpen, href, submenuFocusId, submenuItemIds]);
+  }, [submenuOpen, submenuFocusId, submenuItemIds]);
 
   const handleClickAway = () => {
     document.removeEventListener("click", handleClickAway);

package/esm/components/menu/menu-item/menu-item.component.js

@@ -123,7 +123,7 @@ const MenuItem = ({
     href,
     target,
     rel,
-    onClick: onClick || (inputRef.current ? updateFocusOnClick : undefined),
+    onClick,
     icon,
     selected,
     variant,
@@ -172,7 +172,8 @@ const MenuItem = ({
   }, rest, {
     inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
     menuOpen: menuOpen,
-    id: menuItemId.current
+    id: menuItemId.current,
+    onClick: updateFocusOnClick
   }), /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({
     as: inputRef.current ? "div" : Link,
     isSearch: inputRef.current,

package/esm/components/select/multi-select/multi-select.component.js

@@ -371,11 +371,10 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       return [...previousValue, newValue];
     });
   }, [textboxRef, actualValue, updateValue]);
-
-  function onSelectListClose() {
+  const onSelectListClose = useCallback(() => {
     setOpenState(false);
     setFilterText("");
-  }
+  }, []);
 
   function findElementWithMatchingText(textToMatch, list) {
     return list.find(child => {

package/esm/components/select/select-list/select-list.component.js

@@ -6,6 +6,7 @@ import { flip, offset, size } from "@floating-ui/dom";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import findLastIndex from "lodash/findLastIndex";
 import useScrollBlock from "../../../hooks/__internal__/useScrollBlock";
+import useModalManager from "../../../hooks/__internal__/useModalManager";
 import { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody } from "./select-list.style";
 import Popover from "../../../__internal__/popover";
 import OptionRow from "../option-row/option-row.component";
@@ -220,7 +221,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
 
     if (key === "Tab" && listActionButton) {
       handleActionButtonTab(event, isActionButtonFocused);
-    } else if (key === "Tab" || key === "Escape") {
+    } else if (key === "Tab") {
       onSelectListClose();
     } else if (key === "Enter" && !isActionButtonFocused) {
       event.preventDefault();
@@ -246,6 +247,12 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       highlightNextItem(key);
     }
   }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen, childIds]);
+  const handleEscapeKey = useCallback(event => {
+    if (event.key === "Escape") {
+      onSelectListClose();
+    }
+  }, [onSelectListClose]);
+  useModalManager(isOpen, handleEscapeKey, listRef);
   const handleListScroll = useCallback(event => {
     const element = event.target;
     /* istanbul ignore else */

package/esm/components/select/simple-select/simple-select.component.js

@@ -294,10 +294,9 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     }
   }
 
-  function onSelectListClose() {
+  const onSelectListClose = useCallback(() => {
     setOpenState(false);
-  }
-
+  }, []);
   const assignInput = useCallback(element => {
     setTextboxRef(element);
 

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

@@ -68,6 +68,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   const [submenuItemIds, setSubmenuItemIds] = (0, _react.useState)([]);
   const [characterString, setCharacterString] = (0, _react.useState)("");
   const shiftTabPressed = (0, _react.useRef)(false);
+  const focusFirstMenuItemOnOpen = (0, _react.useRef)(false);
   const registerItem = (0, _react.useCallback)(id => {
     setSubmenuItemIds(prevState => {
       return [...prevState, id];
@@ -134,6 +135,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       if (_events.default.isEnterKey(event) || _events.default.isSpaceKey(event) || _events.default.isDownKey(event) || _events.default.isUpKey(event)) {
         event.preventDefault();
         openSubmenu();
+        focusFirstMenuItemOnOpen.current = !href;
       }
     }
 
@@ -237,10 +239,11 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
   (0, _react.useEffect)(() => {
-    if (submenuOpen && !href && !submenuFocusId && submenuItemIds.length) {
+    if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
+      focusFirstMenuItemOnOpen.current = false;
       setSubmenuFocusId(submenuItemIds[0]);
     }
-  }, [submenuOpen, href, submenuFocusId, submenuItemIds]);
+  }, [submenuOpen, submenuFocusId, submenuItemIds]);
 
   const handleClickAway = () => {
     document.removeEventListener("click", handleClickAway);

package/lib/components/menu/menu-item/menu-item.component.js

@@ -147,7 +147,7 @@ const MenuItem = ({
     href,
     target,
     rel,
-    onClick: onClick || (inputRef.current ? updateFocusOnClick : undefined),
+    onClick,
     icon,
     selected,
     variant,
@@ -196,7 +196,8 @@ const MenuItem = ({
   }, rest, {
     inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
     menuOpen: menuOpen,
-    id: menuItemId.current
+    id: menuItemId.current,
+    onClick: updateFocusOnClick
   }), /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({
     as: inputRef.current ? "div" : _link.default,
     isSearch: inputRef.current,

package/lib/components/select/multi-select/multi-select.component.js

@@ -402,11 +402,10 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       return [...previousValue, newValue];
     });
   }, [textboxRef, actualValue, updateValue]);
-
-  function onSelectListClose() {
+  const onSelectListClose = (0, _react.useCallback)(() => {
     setOpenState(false);
     setFilterText("");
-  }
+  }, []);
 
   function findElementWithMatchingText(textToMatch, list) {
     return list.find(child => {

package/lib/components/select/select-list/select-list.component.js

@@ -17,6 +17,8 @@ var _findLastIndex = _interopRequireDefault(require("lodash/findLastIndex"));
 
 var _useScrollBlock = _interopRequireDefault(require("../../../hooks/__internal__/useScrollBlock"));
 
+var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
+
 var _selectList = require("./select-list.style");
 
 var _popover = _interopRequireDefault(require("../../../__internal__/popover"));
@@ -252,7 +254,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     if (key === "Tab" && listActionButton) {
       handleActionButtonTab(event, isActionButtonFocused);
-    } else if (key === "Tab" || key === "Escape") {
+    } else if (key === "Tab") {
       onSelectListClose();
     } else if (key === "Enter" && !isActionButtonFocused) {
       event.preventDefault();
@@ -278,6 +280,12 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       highlightNextItem(key);
     }
   }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen, childIds]);
+  const handleEscapeKey = (0, _react.useCallback)(event => {
+    if (event.key === "Escape") {
+      onSelectListClose();
+    }
+  }, [onSelectListClose]);
+  (0, _useModalManager.default)(isOpen, handleEscapeKey, listRef);
   const handleListScroll = (0, _react.useCallback)(event => {
     const element = event.target;
     /* istanbul ignore else */

package/lib/components/select/simple-select/simple-select.component.js

@@ -322,10 +322,9 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     }
   }
 
-  function onSelectListClose() {
+  const onSelectListClose = (0, _react.useCallback)(() => {
     setOpenState(false);
-  }
-
+  }, []);
   const assignInput = (0, _react.useCallback)(element => {
     setTextboxRef(element);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.17.0",
+  "version": "114.17.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -104,7 +104,7 @@
     "babel-eslint": "10.0.3",
     "babel-jest": "^26.6.3",
     "babel-plugin-dev-expression": "^0.2.3",
-    "browserslist": "^4.16.6",
+    "browserslist": "^4.21.5",
     "chromatic": "^6.0.5",
     "commitizen": "^4.2.5",
     "conventional-changelog-conventionalcommits": "^4.5.0",