carbon-react 154.3.2 → 154.4.0-beta.0

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

@@ -1,147 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _invariant = _interopRequireDefault(require("invariant"));
-var _actionPopover = require("../action-popover.style");
-var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
-var _actionPopoverItem = _interopRequireDefault(require("../action-popover-item/action-popover-item.component"));
-var _actionPopoverDivider = _interopRequireDefault(require("../action-popover-divider/action-popover-divider.component"));
-var _actionPopover2 = 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; }
-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); }
-const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
-  children,
-  parentID,
-  focusIndex,
-  isOpen,
-  menuID,
-  setOpen,
-  setFocusIndex,
-  placement = "bottom",
-  horizontalAlignment,
-  isASubmenu,
-  ...rest
-}, ref) => {
-  const {
-    focusButton,
-    submenuPosition
-  } = (0, _actionPopover2.useActionPopoverContext)();
-  !(setOpen && setFocusIndex && typeof focusIndex !== "undefined") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component") : (0, _invariant.default)(false) : void 0;
-  const hasProperChildren = (0, _react.useMemo)(() => {
-    const incorrectChild = _react.default.Children.toArray(children).find(child => ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== "ActionPopoverItem" && child.type.displayName !== "ActionPopoverDivider");
-    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)(() => (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();
-      // TAB: close menu and allow focus to change to the next focusable element
-      focusButton();
-      setOpen(false);
-    } else if (_events.default.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.default.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.default.isHomeKey(e)) {
-      // HOME: focus on the first non-disabled item
-      e.preventDefault();
-      e.stopPropagation();
-      const indexValue = firstFocusableItem;
-      setFocusIndex(indexValue);
-    } else if (_events.default.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.default.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] = (0, _react.useState)(false);
-  const [childHasIcon, setChildHasIcon] = (0, _react.useState)(false);
-  const [currentSubmenuPosition, setCurrentSubmenuPosition] = (0, _react.useState)(submenuPosition);
-  const clonedChildren = (0, _react.useMemo)(() => {
-    let index = 0;
-    return _react.default.Children.map(children, child => {
-      if (/*#__PURE__*/_react.default.isValidElement(child) && child.type === _actionPopoverItem.default) {
-        index += 1;
-        return /*#__PURE__*/_react.default.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.default.createElement(_actionPopover.Menu, _extends({
-    "data-component": "action-popover",
-    isOpen: isOpen,
-    onKeyDown: onKeyDown,
-    id: menuID,
-    "aria-labelledby": parentID,
-    ref: ref,
-    role: "list"
-  }, rest), clonedChildren);
-});
-ActionPopoverMenu.displayName = "ActionPopoverMenu";
-var _default = exports.default = ActionPopoverMenu;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),o=require("../action-popover.style.js"),r=require("../../../__internal__/utils/helpers/events/events.js"),i=require("../action-popover-item/action-popover-item.component.js");require("../action-popover-divider/action-popover-divider.component.js");var a=require("../__internal__/action-popover.context.js"),s=require("../__internal__/action-popover.utils.js");function l(e){return e&&e.__esModule?e:{default:e}}var u=l(t),p=l(n);function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const d=u.default.forwardRef(((n,l)=>{var{children:d,parentID:f,focusIndex:m,isOpen:v,menuID:b,setOpen:y,setFocusIndex:O,placement:P="bottom",horizontalAlignment:h,isASubmenu:j}=n,g=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}(n,["children","parentID","focusIndex","isOpen","menuID","setOpen","setFocusIndex","placement","horizontalAlignment","isASubmenu"]);const{focusButton:I,submenuPosition:D}=a.useActionPopoverContext();p.default(y&&O&&void 0!==m,"ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component");const w=t.useMemo((()=>!u.default.Children.toArray(d).find((e=>!u.default.isValidElement(e)||"ActionPopoverItem"!==e.type.displayName&&"ActionPopoverDivider"!==e.type.displayName))),[d]);p.default(w,`ActionPopoverMenu only accepts children of type \`${i.ActionPopoverItem.displayName}\` and \`${o.MenuItemDivider.displayName}\`.`);const A=t.useMemo((()=>s.getItems(d)),[d]),S=t.useCallback((e=>s.isItemDisabled(A[e])),[A]),_=s.findFirstFocusableItem(A),x=s.findLastFocusableItem(A),C=t.useCallback((e=>{if(r.default.isTabKey(e))e.preventDefault(),I(),y(!1);else if(r.default.isDownKey(e)){e.preventDefault(),e.stopPropagation();let t=m+1;for(;t<A.length&&S(t);)t+=1;t>=A.length&&(t=_),O(t)}else if(r.default.isUpKey(e)){e.preventDefault(),e.stopPropagation();let t=m-1;for(;t>=_&&S(t);)t-=1;t<_&&(t=x),O(t)}else if(r.default.isHomeKey(e))e.preventDefault(),e.stopPropagation(),O(_);else if(r.default.isEndKey(e))e.preventDefault(),e.stopPropagation(),O(x);else if(1===e.key.length){let t,n;e.stopPropagation(),A.forEach(((o,r)=>{u.default.isValidElement(o)&&!S(r)&&o.props.children.toLowerCase().startsWith(e.key.toLowerCase())&&(void 0===t&&(t=r),r>m&&void 0===n&&(n=r))})),void 0!==n?O(n):void 0!==t&&O(t)}}),[I,y,m,A,S,O,_,x]),[M,q]=t.useState(!1),[E,k]=t.useState(!1),[K,F]=t.useState(D),H=t.useMemo((()=>{let e=0;return u.default.Children.map(d,(t=>u.default.isValidElement(t)&&t.type===i.ActionPopoverItem?(e+=1,u.default.cloneElement(t,{focusItem:v&&m===e-1,placement:t.props.submenu?P:void 0,horizontalAlignment:h,childHasSubmenu:M,setChildHasSubmenu:q,childHasIcon:E,setChildHasIcon:k,currentSubmenuPosition:K,setCurrentSubmenuPosition:F,isASubmenu:j})):t))}),[d,m,v,P,h,M,E,K,j]);return e.jsx(o.Menu,(N=function(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){c(e,t,n[t])}))}return e}({"data-component":"action-popover",isOpen:v,onKeyDown:C,id:b,"aria-labelledby":f,ref:l,role:"list"},g),z=null!=(z={children:H})?z:{},Object.getOwnPropertyDescriptors?Object.defineProperties(N,Object.getOwnPropertyDescriptors(z)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(z)).forEach((function(e){Object.defineProperty(N,e,Object.getOwnPropertyDescriptor(z,e))})),N));var N,z}));d.displayName="ActionPopoverMenu",exports.default=d;

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

@@ -1,28 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ActionPopoverMenuButton = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _actionPopover = require("../action-popover.style");
-var _button = _interopRequireDefault(require("../../button"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
-const ActionPopoverMenuButton = ({
-  buttonType,
-  iconType,
-  iconPosition,
-  size,
-  children,
-  ariaAttributes,
-  ...props
-}) => /*#__PURE__*/_react.default.createElement(_actionPopover.MenuButtonOverrideWrapper, null, /*#__PURE__*/_react.default.createElement(_button.default, _extends({
-  buttonType: buttonType,
-  iconType: iconType,
-  iconPosition: iconPosition,
-  size: size
-}, ariaAttributes, props), children));
-exports.ActionPopoverMenuButton = ActionPopoverMenuButton;
-ActionPopoverMenuButton.displayName = "ActionPopoverMenuButton";
-var _default = exports.default = ActionPopoverMenuButton;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("../action-popover.style.js"),r=require("../../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:u,iconType:p,iconPosition:s,size:b,children:l,ariaAttributes:a}=n,y=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.jsx(t.MenuButtonOverrideWrapper,{children:e.jsx(r.default,(i=o({buttonType:u,iconType:p,iconPosition:s,size:b},a,y),c={children:l},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",exports.ActionPopoverMenuButton=i,exports.default=i;

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

@@ -1,236 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ActionPopover = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _invariant = _interopRequireDefault(require("invariant"));
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
-var _actionPopover = require("./action-popover.style");
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
-var _popover = _interopRequireDefault(require("../../__internal__/popover"));
-var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
-var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
-var _actionPopoverMenu = _interopRequireDefault(require("./action-popover-menu/action-popover-menu.component"));
-var _actionPopoverItem = _interopRequireDefault(require("./action-popover-item/action-popover-item.component"));
-var _actionPopoverDivider = _interopRequireDefault(require("./action-popover-divider/action-popover-divider.component"));
-var _actionPopover2 = require("./__internal__/action-popover.context");
-var _useModalManager = _interopRequireDefault(require("../../hooks/__internal__/useModalManager"));
-var _actionPopoverUtils = require("./__internal__/action-popover-utils");
-var _flatTable = _interopRequireDefault(require("../flat-table/__internal__/flat-table.context"));
-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; }
-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); }
-const onOpenDefault = () => {};
-const onCloseDefault = () => {};
-const ActionPopover = exports.ActionPopover = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  id,
-  onOpen = onOpenDefault,
-  onClose = onCloseDefault,
-  rightAlignMenu,
-  renderButton,
-  placement = "bottom",
-  horizontalAlignment = "left",
-  submenuPosition = "left",
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-describedby": ariaDescribedBy,
-  ...rest
-}, ref) => {
-  const l = (0, _useLocale.default)();
-  const [isOpen, setOpenState] = (0, _react.useState)(false);
-  const [focusIndex, setFocusIndex] = (0, _react.useState)(0);
-  const [guid] = (0, _react.useState)((0, _guid.default)());
-  const buttonRef = (0, _react.useRef)(null);
-  const menu = (0, _react.useRef)(null);
-  const {
-    isInFlatTable
-  } = (0, _react.useContext)(_flatTable.default);
-  const hasProperChildren = (0, _react.useMemo)(() => {
-    const incorrectChild = _react.default.Children.toArray(children).find(child => {
-      if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-        return true;
-      }
-      return child.type !== _actionPopoverItem.default && child.type !== _actionPopoverDivider.default;
-    });
-    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) {
-      return "top-end";
-    }
-    if (placement === "top" && rightAlignMenu) {
-      return "top-start";
-    }
-    if (placement === "bottom" && rightAlignMenu) {
-      return "bottom-start";
-    }
-    return "bottom-end";
-  }, [placement, rightAlignMenu]);
-  const setOpen = (0, _react.useCallback)(value => {
-    if (value && !isOpen) {
-      onOpen();
-    }
-    if (!value && isOpen) {
-      onClose();
-    }
-    setOpenState(value);
-  }, [isOpen, onOpen, onClose]);
-  const focusButton = (0, _react.useCallback)(() => {
-    const button = buttonRef.current?.querySelector("[data-element='action-popover-button']");
-    button?.focus();
-  }, []);
-  (0, _react.useImperativeHandle)(ref, () => ({
-    focusButton() {
-      focusButton();
-    }
-  }), [focusButton]);
-  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, 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
-
-  const onButtonKeyDown = (0, _react.useCallback)(e => {
-    if (_events.default.isSpaceKey(e) || _events.default.isDownKey(e) || _events.default.isEnterKey(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-      setFocusIndex(firstFocusableItem);
-      setOpen(true);
-    } else if (_events.default.isUpKey(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-      setFocusIndex(lastFocusableItem);
-      setOpen(true);
-    }
-  }, [firstFocusableItem, lastFocusableItem, setOpen]);
-  const handleEscapeKey = (0, _react.useCallback)(e => {
-    /* istanbul ignore else */
-    if (_events.default.isEscKey(e)) {
-      setOpen(false);
-      focusButton();
-    }
-  }, [setOpen, focusButton]);
-  (0, _useModalManager.default)({
-    open: isOpen,
-    closeModal: handleEscapeKey,
-    modalRef: buttonRef
-  });
-  (0, _react.useEffect)(() => {
-    const handler = ({
-      target
-    }) => {
-      // 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
-
-      const isInMenu = menu?.current?.contains(target);
-      const isInButton = buttonRef?.current?.contains(target);
-      if (!isInMenu && !isInButton) {
-        setOpen(false);
-      }
-    };
-    const event = "click";
-    document.addEventListener(event, handler, {
-      capture: true
-    });
-    return function cleanup() {
-      document.removeEventListener(event, handler, {
-        capture: true
-      });
-    };
-  }, [setOpen]);
-  const menuButton = menuID => {
-    if (renderButton) {
-      const renderButtonComponent = renderButton({
-        tabIndex: isOpen ? -1 : 0,
-        "data-element": "action-popover-button",
-        ariaAttributes: {
-          "aria-haspopup": "true",
-          "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
-          "aria-labelledby": ariaLabelledBy,
-          "aria-describedby": ariaDescribedBy,
-          "aria-controls": menuID,
-          "aria-expanded": `${isOpen}`
-        }
-      });
-      const buttonHasString = (0, _actionPopoverUtils.checkChildrenForString)(renderButtonComponent);
-      return renderButton({
-        tabIndex: isOpen ? -1 : 0,
-        "data-element": "action-popover-button",
-        ariaAttributes: {
-          "aria-haspopup": "true",
-          "aria-label": buttonHasString ? undefined : ariaLabel || l.actionPopover.ariaLabel(),
-          "aria-labelledby": ariaLabelledBy,
-          "aria-describedby": ariaDescribedBy,
-          "aria-controls": menuID,
-          "aria-expanded": `${isOpen}`
-        }
-      });
-    }
-    return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledButtonIcon, {
-      role: "button",
-      "aria-haspopup": "true",
-      "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      "aria-controls": menuID,
-      "aria-expanded": isOpen,
-      tabIndex: isOpen ? -1 : 0,
-      "data-element": "action-popover-button"
-    }, /*#__PURE__*/_react.default.createElement(_actionPopover.ButtonIcon, {
-      type: "ellipsis_vertical"
-    }));
-  };
-  const parentID = id || `ActionPopoverButton_${guid}`;
-  const menuID = `ActionPopoverMenu_${guid}`;
-  const menuProps = {
-    buttonRef,
-    parentID,
-    setFocusIndex,
-    focusIndex,
-    menuID,
-    isOpen,
-    setOpen,
-    rightAlignMenu,
-    placement,
-    horizontalAlignment
-  };
-  return /*#__PURE__*/_react.default.createElement(_actionPopover.MenuButton, _extends({
-    id: parentID,
-    onKeyDown: onButtonKeyDown,
-    onClick: onButtonClick,
-    isOpen,
-    ref: buttonRef
-  }, rest, (0, _tags.default)("action-popover-wrapper", rest)), menuButton(menuID), /*#__PURE__*/_react.default.createElement(_actionPopover2.ActionPopoverProvider, {
-    value: {
-      setOpenPopover: setOpen,
-      focusButton,
-      submenuPosition,
-      isOpenPopover: isOpen
-    }
-  }, isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, {
-    placement: mappedPlacement,
-    reference: buttonRef,
-    disableBackgroundUI: isInFlatTable
-  }, /*#__PURE__*/_react.default.createElement(_actionPopoverMenu.default, _extends({
-    "data-component": "action-popover",
-    ref: menu
-  }, menuProps), children))));
-});
-var _default = exports.default = ActionPopover;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("invariant"),n=require("../../__internal__/utils/helpers/tags/tags.js"),o=require("./action-popover.style.js"),a=require("../../__internal__/utils/helpers/events/events.js"),i=require("../../__internal__/popover/popover.component.js"),l=require("../../__internal__/utils/helpers/guid/index.js"),u=require("../../hooks/__internal__/useLocale/useLocale.js"),s=require("./action-popover-menu/action-popover-menu.component.js"),c=require("./action-popover-item/action-popover-item.component.js");require("./action-popover-divider/action-popover-divider.component.js");var p=require("./__internal__/action-popover.context.js"),d=require("../../hooks/__internal__/useModalManager/useModalManager.js"),b=require("./__internal__/action-popover.utils.js"),f=require("../flat-table/__internal__/flat-table.context.js");function v(e){return e&&e.__esModule?e:{default:e}}var m=v(t),y=v(r);function _(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){_(e,t,r[t])}))}return e}function O(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 r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const g=()=>{},P=()=>{},h=t.forwardRef(((r,v)=>{var{children:_,id:h,onOpen:x=g,onClose:I=P,rightAlignMenu:q,renderButton:M,placement:A="bottom",horizontalAlignment:w="left",submenuPosition:k="left","aria-label":S,"aria-labelledby":D,"aria-describedby":C}=r,B=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(r,["children","id","onOpen","onClose","rightAlignMenu","renderButton","placement","horizontalAlignment","submenuPosition","aria-label","aria-labelledby","aria-describedby"]);const E=u.default(),[L,F]=t.useState(!1),[K,$]=t.useState(0),[R]=t.useState(l.default()),z=t.useRef(null),N=t.useRef(null),{isInFlatTable:U}=t.useContext(f.default),H=t.useMemo((()=>!m.default.Children.toArray(_).find((e=>!m.default.isValidElement(e)||e.type!==c.ActionPopoverItem&&e.type!==o.MenuItemDivider))),[_]),T=t.useMemo((()=>b.getItems(_)),[_]),V=b.findFirstFocusableItem(T),G=b.findLastFocusableItem(T);y.default(H,`ActionPopover only accepts children of type \`${c.ActionPopoverItem.displayName}\` and \`${o.MenuItemDivider.displayName}\`.`);const J=t.useMemo((()=>"top"!==A||q?"top"===A&&q?"top-start":"bottom"===A&&q?"bottom-start":"bottom-end":"top-end"),[A,q]),Q=t.useCallback((e=>{e&&!L&&x(),!e&&L&&I(),F(e)}),[L,x,I]),W=t.useCallback((()=>{var e;const t=null===(e=z.current)||void 0===e?void 0:e.querySelector("[data-element='action-popover-button']");null==t||t.focus()}),[]);t.useImperativeHandle(v,(()=>({focusButton(){W()}})),[W]);const X=t.useCallback((e=>{e.stopPropagation();const t=!L;$(V),Q(t),t||W()}),[L,V,Q,W]),Y=t.useCallback((e=>{a.default.isSpaceKey(e)||a.default.isDownKey(e)||a.default.isEnterKey(e)?(e.preventDefault(),e.stopPropagation(),$(V),Q(!0)):a.default.isUpKey(e)&&(e.preventDefault(),e.stopPropagation(),$(G),Q(!0))}),[V,G,Q]),Z=t.useCallback((e=>{a.default.isEscKey(e)&&(Q(!1),W())}),[Q,W]);d.default({open:L,closeModal:Z,modalRef:z}),t.useEffect((()=>{const e=({target:e})=>{var t,r;const n=null==N||null===(t=N.current)||void 0===t?void 0:t.contains(e),o=null==z||null===(r=z.current)||void 0===r?void 0:r.contains(e);n||o||Q(!1)},t="click";return document.addEventListener(t,e,{capture:!0}),function(){document.removeEventListener(t,e,{capture:!0})}}),[Q]);const ee=h||`ActionPopoverButton_${R}`,te=`ActionPopoverMenu_${R}`,re={buttonRef:z,parentID:ee,setFocusIndex:$,focusIndex:K,menuID:te,isOpen:L,setOpen:Q,rightAlignMenu:q,placement:A,horizontalAlignment:w};return e.jsxs(o.MenuButton,O(j({id:ee,onKeyDown:Y,onClick:X,isOpen:L,ref:z},B,n.default("action-popover-wrapper",B)),{children:[(t=>{if(M){const e=M({tabIndex:L?-1:0,"data-element":"action-popover-button",ariaAttributes:{"aria-haspopup":"true","aria-label":S||E.actionPopover.ariaLabel(),"aria-labelledby":D,"aria-describedby":C,"aria-controls":t,"aria-expanded":`${L}`}}),r=b.checkChildrenForString(e);return M({tabIndex:L?-1:0,"data-element":"action-popover-button",ariaAttributes:{"aria-haspopup":"true","aria-label":r?void 0:S||E.actionPopover.ariaLabel(),"aria-labelledby":D,"aria-describedby":C,"aria-controls":t,"aria-expanded":`${L}`}})}return e.jsx(o.StyledButtonIcon,{role:"button","aria-haspopup":"true","aria-label":S||E.actionPopover.ariaLabel(),"aria-labelledby":D,"aria-describedby":C,"aria-controls":t,"aria-expanded":L,tabIndex:L?-1:0,"data-element":"action-popover-button",children:e.jsx(o.ButtonIcon,{type:"ellipsis_vertical"})})})(te),e.jsx(p.ActionPopoverProvider,{value:{setOpenPopover:Q,focusButton:W,submenuPosition:k,isOpenPopover:L},children:L&&e.jsx(i.default,{placement:J,reference:z,disableBackgroundUI:U,children:e.jsx(s.default,O(j({"data-component":"action-popover",ref:N},re),{children:_}))})})]}))}));exports.ActionPopover=h,exports.default=h;