carbon-react 143.2.3 → 143.2.4

package/esm/components/action-popover/__internal__/action-popover-utils.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type ReactItem = React.ReactChild | React.ReactFragment | React.ReactPortal;
+export declare const getItems: (children: React.ReactNode | React.ReactNode[]) => ReactItem[];
+export declare const isItemDisabled: (item: ReactItem) => boolean;
+export declare const findFirstFocusableItem: (items: ReactItem[]) => number;
+export declare const findLastFocusableItem: (items: ReactItem[]) => number;
+export {};

package/esm/components/action-popover/__internal__/action-popover-utils.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { ActionPopoverItem } from "../action-popover-item/action-popover-item.component";
+
+// Reusable type alias for item types
+
+export const getItems = children => React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === ActionPopoverItem);
+export const isItemDisabled = item => /*#__PURE__*/React.isValidElement(item) && !!item.props?.disabled;
+export const findFirstFocusableItem = items => items.findIndex((_, index) => !isItemDisabled(items[index]));
+
+// FIX-ME: FE-6248
+// Once we no longer support Node 16, this function can be removed and `findLastIndex()` can be used in its place.
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
+export const findLastFocusableItem = items => {
+  for (let i = items.length - 1; i >= 0; i--) {
+    if (!isItemDisabled(items[i])) {
+      return i;
+    }
+  }
+  return -1;
+};

package/esm/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -110,12 +110,13 @@ export const ActionPopoverItem = ({
     }
   }, [alignSubmenu, submenu]);
 
-  // focuses item on opening of actionPopover submenu
+  // Focuses item on opening of actionPopover submenu, but we want to do this once the Popover has finished opening
+  // We always want the focused item to be in the user's view for accessibility purposes, and without the initial unexpected scroll to top of page when used in a table.
   useEffect(() => {
     if (focusItem) {
-      ref.current?.focus({
-        preventScroll: true
-      });
+      setTimeout(() => {
+        ref.current?.focus();
+      }, 0);
     }
   }, [focusItem]);
   useEffect(() => {

package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useMemo, useContext, useState, useEffect } from "react";
+import React, { useCallback, useMemo, useContext, useState } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { Menu } from "../action-popover.style";
@@ -7,6 +7,7 @@ import Events from "../../../__internal__/utils/helpers/events";
 import ActionPopoverItem from "../action-popover-item/action-popover-item.component";
 import ActionPopoverDivider from "../action-popover-divider/action-popover-divider.component";
 import ActionPopoverContext from "../__internal__/action-popover.context";
+import { findFirstFocusableItem, findLastFocusableItem, getItems, isItemDisabled } from "../__internal__/action-popover-utils";
 const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
   children,
   parentID,
@@ -37,36 +38,10 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
     return !incorrectChild;
   }, [children]);
   !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `ActionPopoverMenu only accepts children of type \`${ActionPopoverItem.displayName}\`` + ` and \`${ActionPopoverDivider.displayName}\`.`) : invariant(false) : void 0;
-  const items = useMemo(() => {
-    return React.Children.toArray(children).filter(child => {
-      return /*#__PURE__*/React.isValidElement(child) && child.type === ActionPopoverItem;
-    });
-  }, [children]);
-  const isItemDisabled = useCallback(value => {
-    const item = items[value];
-    // The invariant will be triggered before this else path can be explored, hence the ignore else.
-    // istanbul ignore else
-    return /*#__PURE__*/React.isValidElement(item) && item.props.disabled;
-  }, [items]);
-  const firstFocusableItem = items.findIndex((_, index) => !isItemDisabled(index));
-
-  // FIX-ME: FE-6248
-  // Once we no longer support Node 16, this function can be removed and `findLastIndex()` can be used in it's place.
-  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
-  function findLastFocusableItem() {
-    let lastFocusableItem = -1;
-    for (let i = items.length - 1; i >= 0; i--) {
-      if (!isItemDisabled(i)) {
-        lastFocusableItem = i;
-        break;
-      }
-    }
-    return lastFocusableItem;
-  }
-  const lastFocusableItem = findLastFocusableItem();
-  useEffect(() => {
-    if (isOpen && firstFocusableItem !== -1) setFocusIndex(firstFocusableItem);
-  }, [isOpen, firstFocusableItem, setFocusIndex]);
+  const items = useMemo(() => getItems(children), [children]);
+  const checkItemDisabled = useCallback(value => isItemDisabled(items[value]), [items]);
+  const firstFocusableItem = findFirstFocusableItem(items);
+  const lastFocusableItem = findLastFocusableItem(items);
   const onKeyDown = useCallback(e => {
     if (Events.isTabKey(e)) {
       e.preventDefault();
@@ -78,7 +53,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       e.preventDefault();
       e.stopPropagation();
       let indexValue = focusIndex + 1;
-      while (indexValue < items.length && isItemDisabled(indexValue)) {
+      while (indexValue < items.length && checkItemDisabled(indexValue)) {
         indexValue += 1;
       }
       if (indexValue >= items.length) {
@@ -90,7 +65,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       e.preventDefault();
       e.stopPropagation();
       let indexValue = focusIndex - 1;
-      while (indexValue >= firstFocusableItem && isItemDisabled(indexValue)) {
+      while (indexValue >= firstFocusableItem && checkItemDisabled(indexValue)) {
         indexValue -= 1;
       }
       if (indexValue < firstFocusableItem) {
@@ -116,7 +91,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       let firstMatch;
       let nextMatch;
       items.forEach((item, index) => {
-        if (/*#__PURE__*/React.isValidElement(item) && !isItemDisabled(index) && item.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+        if (/*#__PURE__*/React.isValidElement(item) && !checkItemDisabled(index) && item.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
           // istanbul ignore else
           if (firstMatch === undefined) {
             firstMatch = index;
@@ -132,7 +107,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
         setFocusIndex(firstMatch);
       }
     }
-  }, [focusButton, setOpen, focusIndex, items, isItemDisabled, setFocusIndex, firstFocusableItem, lastFocusableItem]);
+  }, [focusButton, setOpen, focusIndex, items, checkItemDisabled, setFocusIndex, firstFocusableItem, lastFocusableItem]);
   const [childHasSubmenu, setChildHasSubmenu] = useState(false);
   const [childHasIcon, setChildHasIcon] = useState(false);
   const [currentSubmenuPosition, setCurrentSubmenuPosition] = useState(submenuPosition);

package/esm/components/action-popover/action-popover.component.js

@@ -12,6 +12,7 @@ import ActionPopoverItem from "./action-popover-item/action-popover-item.compone
 import ActionPopoverDivider from "./action-popover-divider/action-popover-divider.component";
 import ActionPopoverContext from "./__internal__/action-popover.context";
 import useModalManager from "../../hooks/__internal__/useModalManager";
+import { findFirstFocusableItem, findLastFocusableItem, getItems } from "./__internal__/action-popover-utils";
 const onOpenDefault = () => {};
 const onCloseDefault = () => {};
 export const ActionPopover = ({
@@ -33,11 +34,6 @@ export const ActionPopover = ({
   const [guid] = useState(createGuid());
   const buttonRef = useRef(null);
   const menu = useRef(null);
-  const itemCount = useMemo(() => {
-    return React.Children.toArray(children).filter(child => {
-      return /*#__PURE__*/React.isValidElement(child) && child.type === ActionPopoverItem;
-    }).length;
-  }, [children]);
   const hasProperChildren = useMemo(() => {
     const incorrectChild = React.Children.toArray(children).find(child => {
       if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -47,6 +43,9 @@ export const ActionPopover = ({
     });
     return !incorrectChild;
   }, [children]);
+  const items = useMemo(() => getItems(children), [children]);
+  const firstFocusableItem = findFirstFocusableItem(items);
+  const lastFocusableItem = findLastFocusableItem(items);
   !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `ActionPopover only accepts children of type \`${ActionPopoverItem.displayName}\`` + ` and \`${ActionPopoverDivider.displayName}\`.`) : invariant(false) : void 0;
   const mappedPlacement = useMemo(() => {
     if (placement === "top" && !rightAlignMenu) {
@@ -76,12 +75,13 @@ export const ActionPopover = ({
   const onButtonClick = useCallback(e => {
     e.stopPropagation();
     const isOpening = !isOpen;
+    setFocusIndex(firstFocusableItem);
     setOpen(isOpening);
     if (!isOpening) {
       // Closing the menu should focus the MenuButton
       focusButton();
     }
-  }, [isOpen, setOpen, focusButton]);
+  }, [isOpen, firstFocusableItem, setOpen, focusButton]);
 
   // Keyboard commands implemented as recommended by WAI-ARIA best practices
   // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html
@@ -90,15 +90,15 @@ export const ActionPopover = ({
     if (Events.isSpaceKey(e) || Events.isDownKey(e) || Events.isEnterKey(e)) {
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(0);
+      setFocusIndex(firstFocusableItem);
       setOpen(true);
     } else if (Events.isUpKey(e)) {
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(itemCount - 1);
+      setFocusIndex(lastFocusableItem);
       setOpen(true);
     }
-  }, [itemCount, setOpen]);
+  }, [firstFocusableItem, lastFocusableItem, setOpen]);
   const handleEscapeKey = useCallback(e => {
     /* istanbul ignore else */
     if (Events.isEscKey(e)) {
@@ -115,7 +115,7 @@ export const ActionPopover = ({
     const handler = ({
       target
     }) => {
-      // If the event didn't came from part of this component, close the menu.
+      // If the event didn't come from part of this component, close the menu.
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page
 

package/lib/components/action-popover/__internal__/action-popover-utils.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type ReactItem = React.ReactChild | React.ReactFragment | React.ReactPortal;
+export declare const getItems: (children: React.ReactNode | React.ReactNode[]) => ReactItem[];
+export declare const isItemDisabled: (item: ReactItem) => boolean;
+export declare const findFirstFocusableItem: (items: ReactItem[]) => number;
+export declare const findLastFocusableItem: (items: ReactItem[]) => number;
+export {};

package/lib/components/action-popover/__internal__/action-popover-utils.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isItemDisabled = exports.getItems = exports.findLastFocusableItem = exports.findFirstFocusableItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _actionPopoverItem = require("../action-popover-item/action-popover-item.component");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Reusable type alias for item types
+
+const getItems = children => _react.default.Children.toArray(children).filter(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type === _actionPopoverItem.ActionPopoverItem);
+exports.getItems = getItems;
+const isItemDisabled = item => /*#__PURE__*/_react.default.isValidElement(item) && !!item.props?.disabled;
+exports.isItemDisabled = isItemDisabled;
+const findFirstFocusableItem = items => items.findIndex((_, index) => !isItemDisabled(items[index]));
+
+// FIX-ME: FE-6248
+// Once we no longer support Node 16, this function can be removed and `findLastIndex()` can be used in its place.
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
+exports.findFirstFocusableItem = findFirstFocusableItem;
+const findLastFocusableItem = items => {
+  for (let i = items.length - 1; i >= 0; i--) {
+    if (!isItemDisabled(items[i])) {
+      return i;
+    }
+  }
+  return -1;
+};
+exports.findLastFocusableItem = findLastFocusableItem;

package/lib/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -119,12 +119,13 @@ const ActionPopoverItem = ({
     }
   }, [alignSubmenu, submenu]);
 
-  // focuses item on opening of actionPopover submenu
+  // Focuses item on opening of actionPopover submenu, but we want to do this once the Popover has finished opening
+  // We always want the focused item to be in the user's view for accessibility purposes, and without the initial unexpected scroll to top of page when used in a table.
   (0, _react.useEffect)(() => {
     if (focusItem) {
-      ref.current?.focus({
-        preventScroll: true
-      });
+      setTimeout(() => {
+        ref.current?.focus();
+      }, 0);
     }
   }, [focusItem]);
   (0, _react.useEffect)(() => {

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -12,6 +12,7 @@ var _events = _interopRequireDefault(require("../../../__internal__/utils/helper
 var _actionPopoverItem = _interopRequireDefault(require("../action-popover-item/action-popover-item.component"));
 var _actionPopoverDivider = _interopRequireDefault(require("../action-popover-divider/action-popover-divider.component"));
 var _actionPopover2 = _interopRequireDefault(require("../__internal__/action-popover.context"));
+var _actionPopoverUtils = require("../__internal__/action-popover-utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -46,36 +47,10 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
     return !incorrectChild;
   }, [children]);
   !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `ActionPopoverMenu only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`) : (0, _invariant.default)(false) : void 0;
-  const items = (0, _react.useMemo)(() => {
-    return _react.default.Children.toArray(children).filter(child => {
-      return /*#__PURE__*/_react.default.isValidElement(child) && child.type === _actionPopoverItem.default;
-    });
-  }, [children]);
-  const isItemDisabled = (0, _react.useCallback)(value => {
-    const item = items[value];
-    // The invariant will be triggered before this else path can be explored, hence the ignore else.
-    // istanbul ignore else
-    return /*#__PURE__*/_react.default.isValidElement(item) && item.props.disabled;
-  }, [items]);
-  const firstFocusableItem = items.findIndex((_, index) => !isItemDisabled(index));
-
-  // FIX-ME: FE-6248
-  // Once we no longer support Node 16, this function can be removed and `findLastIndex()` can be used in it's place.
-  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
-  function findLastFocusableItem() {
-    let lastFocusableItem = -1;
-    for (let i = items.length - 1; i >= 0; i--) {
-      if (!isItemDisabled(i)) {
-        lastFocusableItem = i;
-        break;
-      }
-    }
-    return lastFocusableItem;
-  }
-  const lastFocusableItem = findLastFocusableItem();
-  (0, _react.useEffect)(() => {
-    if (isOpen && firstFocusableItem !== -1) setFocusIndex(firstFocusableItem);
-  }, [isOpen, firstFocusableItem, setFocusIndex]);
+  const items = (0, _react.useMemo)(() => (0, _actionPopoverUtils.getItems)(children), [children]);
+  const checkItemDisabled = (0, _react.useCallback)(value => (0, _actionPopoverUtils.isItemDisabled)(items[value]), [items]);
+  const firstFocusableItem = (0, _actionPopoverUtils.findFirstFocusableItem)(items);
+  const lastFocusableItem = (0, _actionPopoverUtils.findLastFocusableItem)(items);
   const onKeyDown = (0, _react.useCallback)(e => {
     if (_events.default.isTabKey(e)) {
       e.preventDefault();
@@ -87,7 +62,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
       e.preventDefault();
       e.stopPropagation();
       let indexValue = focusIndex + 1;
-      while (indexValue < items.length && isItemDisabled(indexValue)) {
+      while (indexValue < items.length && checkItemDisabled(indexValue)) {
         indexValue += 1;
       }
       if (indexValue >= items.length) {
@@ -99,7 +74,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
       e.preventDefault();
       e.stopPropagation();
       let indexValue = focusIndex - 1;
-      while (indexValue >= firstFocusableItem && isItemDisabled(indexValue)) {
+      while (indexValue >= firstFocusableItem && checkItemDisabled(indexValue)) {
         indexValue -= 1;
       }
       if (indexValue < firstFocusableItem) {
@@ -125,7 +100,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
       let firstMatch;
       let nextMatch;
       items.forEach((item, index) => {
-        if (/*#__PURE__*/_react.default.isValidElement(item) && !isItemDisabled(index) && item.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+        if (/*#__PURE__*/_react.default.isValidElement(item) && !checkItemDisabled(index) && item.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
           // istanbul ignore else
           if (firstMatch === undefined) {
             firstMatch = index;
@@ -141,7 +116,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
         setFocusIndex(firstMatch);
       }
     }
-  }, [focusButton, setOpen, focusIndex, items, isItemDisabled, setFocusIndex, firstFocusableItem, lastFocusableItem]);
+  }, [focusButton, setOpen, focusIndex, items, checkItemDisabled, setFocusIndex, firstFocusableItem, lastFocusableItem]);
   const [childHasSubmenu, setChildHasSubmenu] = (0, _react.useState)(false);
   const [childHasIcon, setChildHasIcon] = (0, _react.useState)(false);
   const [currentSubmenuPosition, setCurrentSubmenuPosition] = (0, _react.useState)(submenuPosition);

package/lib/components/action-popover/action-popover.component.js

@@ -17,6 +17,7 @@ var _actionPopoverItem = _interopRequireDefault(require("./action-popover-item/a
 var _actionPopoverDivider = _interopRequireDefault(require("./action-popover-divider/action-popover-divider.component"));
 var _actionPopover2 = _interopRequireDefault(require("./__internal__/action-popover.context"));
 var _useModalManager = _interopRequireDefault(require("../../hooks/__internal__/useModalManager"));
+var _actionPopoverUtils = require("./__internal__/action-popover-utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -42,11 +43,6 @@ const ActionPopover = ({
   const [guid] = (0, _react.useState)((0, _guid.default)());
   const buttonRef = (0, _react.useRef)(null);
   const menu = (0, _react.useRef)(null);
-  const itemCount = (0, _react.useMemo)(() => {
-    return _react.default.Children.toArray(children).filter(child => {
-      return /*#__PURE__*/_react.default.isValidElement(child) && child.type === _actionPopoverItem.default;
-    }).length;
-  }, [children]);
   const hasProperChildren = (0, _react.useMemo)(() => {
     const incorrectChild = _react.default.Children.toArray(children).find(child => {
       if (! /*#__PURE__*/_react.default.isValidElement(child)) {
@@ -56,6 +52,9 @@ const ActionPopover = ({
     });
     return !incorrectChild;
   }, [children]);
+  const items = (0, _react.useMemo)(() => (0, _actionPopoverUtils.getItems)(children), [children]);
+  const firstFocusableItem = (0, _actionPopoverUtils.findFirstFocusableItem)(items);
+  const lastFocusableItem = (0, _actionPopoverUtils.findLastFocusableItem)(items);
   !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `ActionPopover only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`) : (0, _invariant.default)(false) : void 0;
   const mappedPlacement = (0, _react.useMemo)(() => {
     if (placement === "top" && !rightAlignMenu) {
@@ -85,12 +84,13 @@ const ActionPopover = ({
   const onButtonClick = (0, _react.useCallback)(e => {
     e.stopPropagation();
     const isOpening = !isOpen;
+    setFocusIndex(firstFocusableItem);
     setOpen(isOpening);
     if (!isOpening) {
       // Closing the menu should focus the MenuButton
       focusButton();
     }
-  }, [isOpen, setOpen, focusButton]);
+  }, [isOpen, firstFocusableItem, setOpen, focusButton]);
 
   // Keyboard commands implemented as recommended by WAI-ARIA best practices
   // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html
@@ -99,15 +99,15 @@ const ActionPopover = ({
     if (_events.default.isSpaceKey(e) || _events.default.isDownKey(e) || _events.default.isEnterKey(e)) {
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(0);
+      setFocusIndex(firstFocusableItem);
       setOpen(true);
     } else if (_events.default.isUpKey(e)) {
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(itemCount - 1);
+      setFocusIndex(lastFocusableItem);
       setOpen(true);
     }
-  }, [itemCount, setOpen]);
+  }, [firstFocusableItem, lastFocusableItem, setOpen]);
   const handleEscapeKey = (0, _react.useCallback)(e => {
     /* istanbul ignore else */
     if (_events.default.isEscKey(e)) {
@@ -124,7 +124,7 @@ const ActionPopover = ({
     const handler = ({
       target
     }) => {
-      // If the event didn't came from part of this component, close the menu.
+      // If the event didn't come from part of this component, close the menu.
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "143.2.3",
+  "version": "143.2.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",