carbon-react 154.3.2 → 154.3.3-beta.1

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

@@ -1,9 +1 @@
-import { createContext, useContext } from "react";
-import invariant from "invariant";
-const ActionPopoverContext = /*#__PURE__*/createContext(null);
-export const ActionPopoverProvider = ActionPopoverContext.Provider;
-export const useActionPopoverContext = () => {
-  const context = useContext(ActionPopoverContext);
-  !context ? process.env.NODE_ENV !== "production" ? invariant(false, "Carbon ActionPopover: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.") : invariant(false) : void 0;
-  return context;
-};
+import{createContext as o,useContext as r}from"react";import t from"invariant";const e=o(null),n=e.Provider,a=()=>{const o=r(e);return t(o,"Carbon ActionPopover: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details."),o};export{n as ActionPopoverProvider,a as useActionPopoverContext};

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

@@ -0,0 +1 @@
+import e from"react";import{ActionPopoverItem as r}from"../action-popover-item/action-popover-item.component.js";const t=t=>e.Children.toArray(t).filter((t=>e.isValidElement(t)&&t.type===r)),o=r=>{var t;return e.isValidElement(r)&&!!(null===(t=r.props)||void 0===t?void 0:t.disabled)},i=e=>e.findIndex(((r,t)=>!o(e[t]))),n=e=>{for(let r=e.length-1;r>=0;r--)if(!o(e[r]))return r;return-1},l=r=>e.Children.toArray(r).some((r=>"string"==typeof r||!!e.isValidElement(r)&&l(r.props.children)));export{l as checkChildrenForString,i as findFirstFocusableItem,n as findLastFocusableItem,t as getItems,o as isItemDisabled};

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

@@ -1,3 +1 @@
-import { MenuItemDivider as ActionPopoverDivider } from "../action-popover.style";
-ActionPopoverDivider.displayName = "ActionPopoverDivider";
-export default ActionPopoverDivider;
+import{MenuItemDivider as o}from"../action-popover.style.js";o.displayName="ActionPopoverDivider";export{o as default};

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

@@ -1,282 +1 @@
-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, useEffect, useRef, useState } from "react";
-import invariant from "invariant";
-import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem, StyledMenuItemInnerText, StyledMenuItemOuterContainer, StyledMenuItemWrapper } from "../action-popover.style";
-import Events from "../../../__internal__/utils/helpers/events";
-import createGuid from "../../../__internal__/utils/helpers/guid";
-import { useActionPopoverContext } from "../__internal__/action-popover.context";
-import ActionPopoverMenu from "../action-popover-menu/action-popover-menu.component";
-const INTERVAL = 150;
-function checkRef(ref) {
-  return Boolean(ref && ref.current);
-}
-function calculateSubmenuPosition(ref, submenuRef, submenuPosition, currentSubmenuPosition) {
-  /* istanbul ignore if */
-
-  if (!ref.current || !submenuRef.current) return currentSubmenuPosition || submenuPosition;
-  const {
-    left,
-    right
-  } = ref.current.getBoundingClientRect();
-  const {
-    offsetWidth
-  } = submenuRef.current;
-  const windowWidth = document.body.clientWidth;
-  if (submenuPosition === "left") {
-    return left >= offsetWidth ? "left" : "right";
-  }
-  return windowWidth >= right + offsetWidth ? "right" : "left";
-}
-export const ActionPopoverItem = ({
-  children,
-  icon,
-  disabled = false,
-  onClick: onClickProp,
-  submenu,
-  placement = "bottom",
-  focusItem,
-  download,
-  href,
-  horizontalAlignment,
-  childHasSubmenu,
-  childHasIcon,
-  currentSubmenuPosition,
-  setChildHasSubmenu,
-  setChildHasIcon,
-  setCurrentSubmenuPosition,
-  isASubmenu = false,
-  ...rest
-}) => {
-  !(/*#__PURE__*/React.isValidElement(submenu) ? submenu.type === ActionPopoverMenu : true) ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`") : invariant(false) : void 0;
-  const {
-    setOpenPopover,
-    isOpenPopover,
-    focusButton,
-    submenuPosition
-  } = useActionPopoverContext();
-  const isHref = !!href;
-  const [containerPosition, setContainerPosition] = useState(undefined);
-  const [guid] = useState(createGuid());
-  const [isOpen, setOpen] = useState(false);
-  const [focusIndex, setFocusIndex] = useState(0);
-  const submenuRef = useRef(null);
-  const ref = useRef(null);
-  const mouseEnterTimer = useRef(null);
-  const mouseLeaveTimer = useRef(null);
-  useEffect(() => {
-    /* istanbul ignore if - doesn't seem to actually run as the child item is unmounted before the context updates */
-    if (!isOpenPopover) {
-      setOpen(false);
-    }
-  }, [isOpenPopover]);
-  useEffect(() => {
-    if (icon) {
-      setChildHasIcon?.(true);
-    }
-    if (submenu) {
-      setChildHasSubmenu?.(true);
-    }
-  }, [icon, setChildHasSubmenu, setChildHasIcon, submenu]);
-  const alignSubmenu = useCallback(() => {
-    const checkCalculatedSubmenuPosition = calculateSubmenuPosition(ref, submenuRef, submenuPosition, currentSubmenuPosition);
-    setCurrentSubmenuPosition?.(checkCalculatedSubmenuPosition);
-    return checkRef(ref) && checkRef(submenuRef) && submenu;
-  }, [submenu, setCurrentSubmenuPosition, submenuPosition, currentSubmenuPosition]);
-  useEffect(() => {
-    const getContainerPosition = () => {
-      /* istanbul ignore if */
-      if (!ref.current || !submenuRef.current) return undefined;
-      const {
-        offsetWidth: submenuWidth
-      } = submenuRef.current;
-      const leftAlignedSubmenu = currentSubmenuPosition === "left";
-      const leftValue = leftAlignedSubmenu ? -submenuWidth : "auto";
-      const rightValue = leftAlignedSubmenu ? "auto" : -submenuWidth;
-      const yPositionName = placement === "top" ? /* istanbul ignore next - tested in Playwright */"bottom" : "top";
-      return {
-        left: leftValue,
-        [yPositionName]: "calc(-1 * var(--spacing100))",
-        right: rightValue
-      };
-    };
-    setContainerPosition(getContainerPosition);
-  }, [submenu, currentSubmenuPosition, placement]);
-  useEffect(() => {
-    if (submenu) {
-      alignSubmenu();
-    }
-  }, [alignSubmenu, 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) {
-      setTimeout(() => {
-        ref.current?.focus();
-      }, 0);
-    }
-  }, [focusItem]);
-  useEffect(() => {
-    return function cleanup() {
-      if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
-      if (mouseLeaveTimer.current) clearTimeout(mouseLeaveTimer.current);
-    };
-  }, []);
-  useEffect(() => {
-    const event = "resize";
-    window.addEventListener(event, alignSubmenu);
-    return function cleanup() {
-      window.removeEventListener(event, alignSubmenu);
-    };
-  }, [alignSubmenu]);
-  const onClick = useCallback(e => {
-    e.stopPropagation();
-    if (!disabled) {
-      setOpenPopover(false);
-      focusButton();
-      if (onClickProp) {
-        onClickProp(e);
-      }
-    } else {
-      ref.current?.focus();
-      e.preventDefault();
-    }
-  }, [disabled, focusButton, onClickProp, setOpenPopover]);
-  const onKeyDown = useCallback(e => {
-    if (Events.isSpaceKey(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-    } else if (!disabled) {
-      if (submenu) {
-        if (currentSubmenuPosition === "left") {
-          // LEFT: open if has submenu and left aligned otherwise close submenu
-          if (Events.isLeftKey(e) || Events.isEnterKey(e)) {
-            setOpen(true);
-            setFocusIndex(0);
-            e.stopPropagation();
-          } else if (Events.isRightKey(e)) {
-            setOpen(false);
-            ref.current?.focus();
-            e.stopPropagation();
-          }
-        } else {
-          // RIGHT: open if has submenu and right aligned otherwise close submenu
-          if (Events.isRightKey(e) || Events.isEnterKey(e)) {
-            setOpen(true);
-            setFocusIndex(0);
-            e.stopPropagation();
-          }
-          if (Events.isLeftKey(e)) {
-            setOpen(false);
-            ref.current?.focus();
-            e.stopPropagation();
-          }
-        }
-        e.preventDefault();
-      } else if (Events.isEnterKey(e)) {
-        if (isHref && download) {
-          ref.current?.click();
-        }
-        e.preventDefault();
-        // this type assertion should be safe as the onclick handler is designed to catch events propagating from the inner buttons
-        onClick(e);
-      }
-    } else if (Events.isEnterKey(e)) {
-      e.stopPropagation();
-    }
-  }, [disabled, download, isHref, onClick, submenu, currentSubmenuPosition]);
-  const itemSubmenuProps = {
-    ...(!disabled && {
-      onClick: e => {
-        setOpen(true);
-        ref.current?.focus();
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    }),
-    "aria-haspopup": "true",
-    "aria-controls": `ActionPopoverMenu_${guid}`,
-    "aria-expanded": isOpen
-  };
-  const wrapperProps = {
-    ...(!disabled && {
-      onMouseEnter: e => {
-        if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
-        setFocusIndex(-1);
-        mouseEnterTimer.current = setTimeout(() => {
-          setOpen(true);
-        }, INTERVAL);
-        e.stopPropagation();
-      },
-      onMouseLeave: e => {
-        if (mouseLeaveTimer.current) clearTimeout(mouseLeaveTimer.current);
-        mouseLeaveTimer.current = setTimeout(() => {
-          setOpen(false);
-        }, INTERVAL);
-        e.stopPropagation();
-      }
-    })
-  };
-  const renderMenuItemIcon = () => {
-    return icon && /*#__PURE__*/React.createElement(MenuItemIcon, {
-      type: icon,
-      "data-element": "action-popover-menu-item-icon",
-      horizontalAlignment: horizontalAlignment,
-      submenuPosition: currentSubmenuPosition,
-      childHasIcon: childHasIcon,
-      childHasSubmenu: childHasSubmenu,
-      hasIcon: !!icon,
-      hasSubmenu: !!submenu,
-      isASubmenu: isASubmenu
-    });
-  };
-  return /*#__PURE__*/React.createElement(StyledMenuItemWrapper, submenu && wrapperProps, /*#__PURE__*/React.createElement("div", {
-    onKeyDown: onKeyDown,
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, rest, {
-    ref: ref,
-    onClick: onClick,
-    type: "button",
-    tabIndex: 0,
-    isDisabled: disabled,
-    horizontalAlignment: horizontalAlignment,
-    submenuPosition: currentSubmenuPosition,
-    hasSubmenu: !!submenu,
-    childHasSubmenu: childHasSubmenu
-  }, disabled && {
-    "aria-disabled": true
-  }, isHref && {
-    as: "a",
-    download,
-    href
-  }, submenu && itemSubmenuProps), submenu && checkRef(ref) && currentSubmenuPosition === "left" ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
-    "data-element": "action-popover-menu-item-chevron",
-    type: "chevron_left_thick"
-  }) : null, /*#__PURE__*/React.createElement(StyledMenuItemOuterContainer, null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, /*#__PURE__*/React.createElement(StyledMenuItemInnerText, {
-    "data-element": "action-popover-menu-item-inner-text",
-    horizontalAlignment: horizontalAlignment,
-    submenuPosition: currentSubmenuPosition,
-    isASubmenu: isASubmenu,
-    childHasSubmenu: childHasSubmenu,
-    childHasIcon: childHasIcon,
-    hasIcon: !!icon,
-    hasSubmenu: !!submenu
-  }, children), horizontalAlignment === "right" ? renderMenuItemIcon() : null), submenu && checkRef(ref) && currentSubmenuPosition === "right" ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
-    "data-element": "action-popover-menu-item-chevron",
-    type: "chevron_right_thick"
-  }) : null), /*#__PURE__*/React.isValidElement(submenu) ? /*#__PURE__*/React.cloneElement(submenu, {
-    parentID: `ActionPopoverItem_${guid}`,
-    menuID: `ActionPopoverMenu_${guid}`,
-    "data-element": "action-popover-submenu",
-    isOpen,
-    ref: submenuRef,
-    style: containerPosition,
-    setOpen,
-    setFocusIndex,
-    focusIndex,
-    isASubmenu: true,
-    horizontalAlignment
-  }) : null));
-};
-ActionPopoverItem.displayName = "ActionPopoverItem";
-export default ActionPopoverItem;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useState as o,useRef as r,useEffect as i,useCallback as u}from"react";import l from"invariant";import{StyledMenuItemWrapper as c,StyledMenuItem as s,SubMenuItemIcon as a,StyledMenuItemOuterContainer as p,StyledMenuItemInnerText as m,MenuItemIcon as f}from"../action-popover.style.js";import d from"../../../__internal__/utils/helpers/events/events.js";import b from"../../../__internal__/utils/helpers/guid/index.js";import{useActionPopoverContext as h}from"../__internal__/action-popover.context.js";import v from"../action-popover-menu/action-popover-menu.component.js";function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function g(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(t){y(e,t,n[t])}))}return e}function P(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function O(e){return Boolean(e&&e.current)}const S=y=>{var{children:S,icon:j,disabled:w=!1,onClick:I,submenu:_,placement:A="bottom",focusItem:D,download:E,href:H,horizontalAlignment:x,childHasSubmenu:C,childHasIcon:k,currentSubmenuPosition:K,setChildHasSubmenu:z,setChildHasIcon:T,setCurrentSubmenuPosition:L,isASubmenu:M=!1}=y,B=function(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(y,["children","icon","disabled","onClick","submenu","placement","focusItem","download","href","horizontalAlignment","childHasSubmenu","childHasIcon","currentSubmenuPosition","setChildHasSubmenu","setChildHasIcon","setCurrentSubmenuPosition","isASubmenu"]);l(!n.isValidElement(_)||_.type===v,"ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`");const{setOpenPopover:R,isOpenPopover:W,focusButton:$,submenuPosition:V}=h(),F=!!H,[N,q]=o(void 0),[G]=o(b()),[J,Q]=o(!1),[U,X]=o(0),Y=r(null),Z=r(null),ee=r(null),te=r(null);i((()=>{W||Q(!1)}),[W]),i((()=>{j&&(null==T||T(!0)),_&&(null==z||z(!0))}),[j,z,T,_]);const ne=u((()=>{const e=function(e,t,n,o){if(!e.current||!t.current)return o||n;const{left:r,right:i}=e.current.getBoundingClientRect(),{offsetWidth:u}=t.current,l=document.body.clientWidth;return"left"===n?r>=u?"left":"right":l>=i+u?"right":"left"}(Z,Y,V,K);return null==L||L(e),O(Z)&&O(Y)&&_}),[_,L,V,K]);i((()=>{q((()=>{if(!Z.current||!Y.current)return;const{offsetWidth:e}=Y.current,t="left"===K,n=t?"auto":-e,o="top"===A?"bottom":"top";return{left:t?-e:"auto",[o]:"calc(-1 * var(--spacing100))",right:n}}))}),[_,K,A]),i((()=>{_&&ne()}),[ne,_]),i((()=>{D&&setTimeout((()=>{var e;null===(e=Z.current)||void 0===e||e.focus()}),0)}),[D]),i((()=>function(){ee.current&&clearTimeout(ee.current),te.current&&clearTimeout(te.current)}),[]),i((()=>{const e="resize";return window.addEventListener(e,ne),function(){window.removeEventListener(e,ne)}}),[ne]);const oe=u((e=>{var t;e.stopPropagation(),w?(null===(t=Z.current)||void 0===t||t.focus(),e.preventDefault()):(R(!1),$(),I&&I(e))}),[w,$,I,R]),re=u((e=>{if(d.isSpaceKey(e))e.preventDefault(),e.stopPropagation();else if(w)d.isEnterKey(e)&&e.stopPropagation();else if(_){var t;if("left"===K){if(d.isLeftKey(e)||d.isEnterKey(e))Q(!0),X(0),e.stopPropagation();else if(d.isRightKey(e)){var n;Q(!1),null===(n=Z.current)||void 0===n||n.focus(),e.stopPropagation()}}else(d.isRightKey(e)||d.isEnterKey(e))&&(Q(!0),X(0),e.stopPropagation()),d.isLeftKey(e)&&(Q(!1),null===(t=Z.current)||void 0===t||t.focus(),e.stopPropagation());e.preventDefault()}else if(d.isEnterKey(e)){var o;F&&E&&(null===(o=Z.current)||void 0===o||o.click()),e.preventDefault(),oe(e)}}),[w,E,F,oe,_,K]),ie=P(g({},!w&&{onClick:e=>{var t;Q(!0),null===(t=Z.current)||void 0===t||t.focus(),e.preventDefault(),e.stopPropagation()}}),{"aria-haspopup":"true","aria-controls":`ActionPopoverMenu_${G}`,"aria-expanded":J}),ue=g({},!w&&{onMouseEnter:e=>{ee.current&&clearTimeout(ee.current),X(-1),ee.current=setTimeout((()=>{Q(!0)}),150),e.stopPropagation()},onMouseLeave:e=>{te.current&&clearTimeout(te.current),te.current=setTimeout((()=>{Q(!1)}),150),e.stopPropagation()}}),le=()=>j&&e(f,{type:j,"data-element":"action-popover-menu-item-icon",horizontalAlignment:x,submenuPosition:K,childHasIcon:k,childHasSubmenu:C,hasIcon:!!j,hasSubmenu:!!_,isASubmenu:M});return e(c,P(g({},_&&ue),{children:t("div",{onKeyDown:re,role:"presentation",children:[t(s,P(g(P(g({},B),{ref:Z,onClick:oe,type:"button",tabIndex:0,isDisabled:w,horizontalAlignment:x,submenuPosition:K,hasSubmenu:!!_,childHasSubmenu:C}),w&&{"aria-disabled":!0},F&&{as:"a",download:E,href:H},_&&ie),{children:[_&&O(Z)&&"left"===K?e(a,{"data-element":"action-popover-menu-item-chevron",type:"chevron_left_thick"}):null,t(p,{children:["left"===x?le():null,e(m,{"data-element":"action-popover-menu-item-inner-text",horizontalAlignment:x,submenuPosition:K,isASubmenu:M,childHasSubmenu:C,childHasIcon:k,hasIcon:!!j,hasSubmenu:!!_,children:S}),"right"===x?le():null]}),_&&O(Z)&&"right"===K?e(a,{"data-element":"action-popover-menu-item-chevron",type:"chevron_right_thick"}):null]})),n.isValidElement(_)?n.cloneElement(_,{parentID:`ActionPopoverItem_${G}`,menuID:`ActionPopoverMenu_${G}`,"data-element":"action-popover-submenu",isOpen:J,ref:Y,style:N,setOpen:Q,setFocusIndex:X,focusIndex:U,isASubmenu:!0,horizontalAlignment:x}):null]})}))};S.displayName="ActionPopoverItem";export{S as ActionPopoverItem,S as default};

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

@@ -1,138 +1 @@
-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, useState } from "react";
-import invariant from "invariant";
-import { Menu } from "../action-popover.style";
-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 { useActionPopoverContext } from "../__internal__/action-popover.context";
-import { findFirstFocusableItem, findLastFocusableItem, getItems, isItemDisabled } from "../__internal__/action-popover-utils";
-const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
-  children,
-  parentID,
-  focusIndex,
-  isOpen,
-  menuID,
-  setOpen,
-  setFocusIndex,
-  placement = "bottom",
-  horizontalAlignment,
-  isASubmenu,
-  ...rest
-}, ref) => {
-  const {
-    focusButton,
-    submenuPosition
-  } = useActionPopoverContext();
-  !(setOpen && setFocusIndex && typeof focusIndex !== "undefined") ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component") : invariant(false) : void 0;
-  const hasProperChildren = useMemo(() => {
-    const incorrectChild = React.Children.toArray(children).find(child => ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== "ActionPopoverItem" && child.type.displayName !== "ActionPopoverDivider");
-    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(() => 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();
-      // TAB: close menu and allow focus to change to the next focusable element
-      focusButton();
-      setOpen(false);
-    } else if (Events.isDownKey(e)) {
-      // DOWN: focus on the next item or first non-disabled item
-      e.preventDefault();
-      e.stopPropagation();
-      let indexValue = focusIndex + 1;
-      while (indexValue < items.length && checkItemDisabled(indexValue)) {
-        indexValue += 1;
-      }
-      if (indexValue >= items.length) {
-        indexValue = firstFocusableItem;
-      }
-      setFocusIndex(indexValue);
-    } else if (Events.isUpKey(e)) {
-      // UP: focus on the previous item or last non-disabled item
-      e.preventDefault();
-      e.stopPropagation();
-      let indexValue = focusIndex - 1;
-      while (indexValue >= firstFocusableItem && checkItemDisabled(indexValue)) {
-        indexValue -= 1;
-      }
-      if (indexValue < firstFocusableItem) {
-        indexValue = lastFocusableItem;
-      }
-      setFocusIndex(indexValue);
-    } else if (Events.isHomeKey(e)) {
-      // HOME: focus on the first non-disabled item
-      e.preventDefault();
-      e.stopPropagation();
-      const indexValue = firstFocusableItem;
-      setFocusIndex(indexValue);
-    } else if (Events.isEndKey(e)) {
-      // END: focus on the last non-disabled item
-      e.preventDefault();
-      e.stopPropagation();
-      const indexValue = lastFocusableItem;
-      setFocusIndex(indexValue);
-    } else if (e.key.length === 1) {
-      // Any printable character: focus on the next non-disabled item on the list that starts with that character
-      // Selection should wrap to the start of the list
-      e.stopPropagation();
-      let firstMatch;
-      let nextMatch;
-      items.forEach((item, index) => {
-        if (/*#__PURE__*/React.isValidElement(item) && !checkItemDisabled(index) && item.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
-          // istanbul ignore else
-          if (firstMatch === undefined) {
-            firstMatch = index;
-          }
-          if (index > focusIndex && nextMatch === undefined) {
-            nextMatch = index;
-          }
-        }
-      });
-      if (nextMatch !== undefined) {
-        setFocusIndex(nextMatch);
-      } else if (firstMatch !== undefined) {
-        setFocusIndex(firstMatch);
-      }
-    }
-  }, [focusButton, setOpen, focusIndex, items, checkItemDisabled, setFocusIndex, firstFocusableItem, lastFocusableItem]);
-  const [childHasSubmenu, setChildHasSubmenu] = useState(false);
-  const [childHasIcon, setChildHasIcon] = useState(false);
-  const [currentSubmenuPosition, setCurrentSubmenuPosition] = useState(submenuPosition);
-  const clonedChildren = useMemo(() => {
-    let index = 0;
-    return React.Children.map(children, child => {
-      if (/*#__PURE__*/React.isValidElement(child) && child.type === ActionPopoverItem) {
-        index += 1;
-        return /*#__PURE__*/React.cloneElement(child, {
-          focusItem: isOpen && focusIndex === index - 1,
-          placement: child.props.submenu ? placement : undefined,
-          horizontalAlignment,
-          childHasSubmenu,
-          setChildHasSubmenu,
-          childHasIcon,
-          setChildHasIcon,
-          currentSubmenuPosition,
-          setCurrentSubmenuPosition,
-          isASubmenu
-        });
-      }
-      return child;
-    });
-  }, [children, focusIndex, isOpen, placement, horizontalAlignment, childHasSubmenu, childHasIcon, currentSubmenuPosition, isASubmenu]);
-  return /*#__PURE__*/React.createElement(Menu, _extends({
-    "data-component": "action-popover",
-    isOpen: isOpen,
-    onKeyDown: onKeyDown,
-    id: menuID,
-    "aria-labelledby": parentID,
-    ref: ref,
-    role: "list"
-  }, rest), clonedChildren);
-});
-ActionPopoverMenu.displayName = "ActionPopoverMenu";
-export default ActionPopoverMenu;
+import{jsx as e}from"react/jsx-runtime";import t,{useMemo as o,useCallback as n,useState as r}from"react";import i from"invariant";import{MenuItemDivider as p,Menu as s}from"../action-popover.style.js";import a from"../../../__internal__/utils/helpers/events/events.js";import{ActionPopoverItem as l}from"../action-popover-item/action-popover-item.component.js";import"../action-popover-divider/action-popover-divider.component.js";import{useActionPopoverContext as c}from"../__internal__/action-popover.context.js";import{getItems as u,isItemDisabled as m,findFirstFocusableItem as f,findLastFocusableItem as d}from"../__internal__/action-popover.utils.js";function y(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}const b=t.forwardRef(((b,v)=>{var{children:O,parentID:P,focusIndex:h,isOpen:g,menuID:j,setOpen:w,setFocusIndex:D,placement:A="bottom",horizontalAlignment:I,isASubmenu:S}=b,_=function(e,t){if(null==e)return{};var o,n,r=function(e,t){if(null==e)return{};var o,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}(b,["children","parentID","focusIndex","isOpen","menuID","setOpen","setFocusIndex","placement","horizontalAlignment","isASubmenu"]);const{focusButton:x,submenuPosition:E}=c();i(w&&D&&void 0!==h,"ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component");const C=o((()=>!t.Children.toArray(O).find((e=>!t.isValidElement(e)||"ActionPopoverItem"!==e.type.displayName&&"ActionPopoverDivider"!==e.type.displayName))),[O]);i(C,`ActionPopoverMenu only accepts children of type \`${l.displayName}\` and \`${p.displayName}\`.`);const K=o((()=>u(O)),[O]),k=n((e=>m(K[e])),[K]),H=f(K),N=d(K),z=n((e=>{if(a.isTabKey(e))e.preventDefault(),x(),w(!1);else if(a.isDownKey(e)){e.preventDefault(),e.stopPropagation();let t=h+1;for(;t<K.length&&k(t);)t+=1;t>=K.length&&(t=H),D(t)}else if(a.isUpKey(e)){e.preventDefault(),e.stopPropagation();let t=h-1;for(;t>=H&&k(t);)t-=1;t<H&&(t=N),D(t)}else if(a.isHomeKey(e))e.preventDefault(),e.stopPropagation(),D(H);else if(a.isEndKey(e))e.preventDefault(),e.stopPropagation(),D(N);else if(1===e.key.length){let o,n;e.stopPropagation(),K.forEach(((r,i)=>{t.isValidElement(r)&&!k(i)&&r.props.children.toLowerCase().startsWith(e.key.toLowerCase())&&(void 0===o&&(o=i),i>h&&void 0===n&&(n=i))})),void 0!==n?D(n):void 0!==o&&D(o)}}),[x,w,h,K,k,D,H,N]),[M,V]=r(!1),[F,L]=r(!1),[$,B]=r(E),R=o((()=>{let e=0;return t.Children.map(O,(o=>t.isValidElement(o)&&o.type===l?(e+=1,t.cloneElement(o,{focusItem:g&&h===e-1,placement:o.props.submenu?A:void 0,horizontalAlignment:I,childHasSubmenu:M,setChildHasSubmenu:V,childHasIcon:F,setChildHasIcon:L,currentSubmenuPosition:$,setCurrentSubmenuPosition:B,isASubmenu:S})):o))}),[O,h,g,A,I,M,F,$,S]);return e(s,(T=function(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),n.forEach((function(t){y(e,t,o[t])}))}return e}({"data-component":"action-popover",isOpen:g,onKeyDown:z,id:j,"aria-labelledby":P,ref:v,role:"list"},_),U=null!=(U={children:R})?U:{},Object.getOwnPropertyDescriptors?Object.defineProperties(T,Object.getOwnPropertyDescriptors(U)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(U)).forEach((function(e){Object.defineProperty(T,e,Object.getOwnPropertyDescriptor(U,e))})),T));var T,U}));b.displayName="ActionPopoverMenu";export{b as default};

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

@@ -1,20 +1 @@
-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 from "react";
-import { MenuButtonOverrideWrapper } from "../action-popover.style";
-import Button from "../../button";
-export const ActionPopoverMenuButton = ({
-  buttonType,
-  iconType,
-  iconPosition,
-  size,
-  children,
-  ariaAttributes,
-  ...props
-}) => /*#__PURE__*/React.createElement(MenuButtonOverrideWrapper, null, /*#__PURE__*/React.createElement(Button, _extends({
-  buttonType: buttonType,
-  iconType: iconType,
-  iconPosition: iconPosition,
-  size: size
-}, ariaAttributes, props), children));
-ActionPopoverMenuButton.displayName = "ActionPopoverMenuButton";
-export default ActionPopoverMenuButton;
+import{jsx as e}from"react/jsx-runtime";import"react";import{MenuButtonOverrideWrapper as t}from"../action-popover.style.js";import r from"../../button/button.component.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}const i=n=>{var i,c,{buttonType:p,iconType:u,iconPosition:b,size:l,children:s,ariaAttributes:y}=n,a=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(n,["buttonType","iconType","iconPosition","size","children","ariaAttributes"]);return e(t,{children:e(r,(i=o({buttonType:p,iconType:u,iconPosition:b,size:l},y,a),c={children:s},c=null!=c?c:{},Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(c)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(c)).forEach((function(e){Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(c,e))})),i))})};i.displayName="ActionPopoverMenuButton";export{i as ActionPopoverMenuButton,i as default};