carbon-react 106.6.1 → 106.6.4

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MenuItem = void 0;
+exports.default = exports.ActionPopoverItem = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = require("styled-components");
+var _invariant = _interopRequireDefault(require("invariant"));
 
 var _actionPopover = require("../action-popover.style");
 
@@ -21,6 +21,8 @@ var _actionPopoverContext = _interopRequireDefault(require("../action-popover-co
 
 var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
 
+var _actionPopoverMenu = _interopRequireDefault(require("../action-popover-menu/action-popover-menu.component"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -31,13 +33,46 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const INTERVAL = 150;
 
-const MenuItem = ({
+function checkRef(ref) {
+  return Boolean(ref && ref.current);
+}
+
+function leftAlignSubmenu(ref, submenuRef) {
+  /* istanbul ignore if */
+  if (!ref.current || !submenuRef.current) return true;
+  const {
+    left
+  } = ref.current.getBoundingClientRect();
+  const {
+    offsetWidth
+  } = submenuRef.current;
+  return left >= offsetWidth;
+}
+
+function getContainerPosition(itemRef, submenuRef, placement) {
+  /* istanbul ignore if */
+  if (!itemRef.current || !submenuRef.current) return undefined;
+  const {
+    offsetWidth: parentWidth
+  } = itemRef.current;
+  const {
+    offsetWidth: submenuWidth
+  } = submenuRef.current;
+  const xPositionValue = leftAlignSubmenu(itemRef, submenuRef) ? -submenuWidth : parentWidth;
+  const yPositionName = placement === "top" ? "bottom" : "top";
+  return {
+    left: xPositionValue,
+    [yPositionName]: "calc(-1 * var(--spacing100))",
+    right: "auto"
+  };
+}
+
+const ActionPopoverItem = ({
   children,
   icon,
   disabled = false,
   onClick: onClickProp,
   submenu,
-  theme,
   placement = "bottom",
   focusItem,
   download,
@@ -46,47 +81,49 @@ const MenuItem = ({
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
+  const context = (0, _react.useContext)(_actionPopoverContext.default);
+  (0, _invariant.default)(context, "ActionPopoverItem must be used within an ActionPopover component");
+  (0, _invariant.default)( /*#__PURE__*/_react.default.isValidElement(submenu) ? submenu.type === _actionPopoverMenu.default : true, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`");
   const {
     setOpenPopover,
     isOpenPopover,
     focusButton
-  } = (0, _react.useContext)(_actionPopoverContext.default);
+  } = context;
   const isHref = !!href;
-  const [containerPosition, setContainerPosition] = (0, _react.useState)(null);
+  const [containerPosition, setContainerPosition] = (0, _react.useState)(undefined);
   const [guid] = (0, _react.useState)((0, _guid.default)());
   const [isOpen, setOpen] = (0, _react.useState)(false);
   const [focusIndex, setFocusIndex] = (0, _react.useState)(0);
   const [isLeftAligned, setIsLeftAligned] = (0, _react.useState)(true);
-  const submenuRef = (0, _react.useRef)();
-  const ref = (0, _react.useRef)();
-  const mouseEnterTimer = (0, _react.useRef)();
-  const mouseLeaveTimer = (0, _react.useRef)();
-  const {
-    spacing
-  } = theme;
+  const submenuRef = (0, _react.useRef)(null);
+  const ref = (0, _react.useRef)(null);
+  const mouseEnterTimer = (0, _react.useRef)(null);
+  const mouseLeaveTimer = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (!isOpenPopover) {
       setOpen(false);
     }
   }, [isOpenPopover]);
   const alignSubmenu = (0, _react.useCallback)(() => {
-    if (checkRef(ref) && checkRef(submenuRef)) {
-      const align = submenu && leftAlignSubmenu(ref, submenuRef);
+    if (checkRef(ref) && checkRef(submenuRef) && submenu) {
+      const align = leftAlignSubmenu(ref, submenuRef);
       setIsLeftAligned(align);
-      setContainerPosition(getContainerPosition(ref, submenuRef, spacing, placement));
+      setContainerPosition(getContainerPosition(ref, submenuRef, placement));
     }
-  }, [submenu, spacing, placement]);
+  }, [submenu, placement]);
   (0, _react.useEffect)(() => {
     alignSubmenu();
 
-    if (focusItem && ref.current) {
-      ref.current.focus();
+    if (focusItem) {
+      var _ref$current;
+
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
   }, [alignSubmenu, focusItem]);
   (0, _react.useEffect)(() => {
     return function cleanup() {
-      clearTimeout(mouseEnterTimer.current);
-      clearTimeout(mouseLeaveTimer.current);
+      if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
+      if (mouseLeaveTimer.current) clearTimeout(mouseLeaveTimer.current);
     };
   }, []);
   (0, _react.useEffect)(() => {
@@ -104,10 +141,12 @@ const MenuItem = ({
       focusButton();
 
       if (onClickProp) {
-        onClickProp();
+        onClickProp(e);
       }
     } else {
-      ref.current.focus();
+      var _ref$current2;
+
+      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
       e.preventDefault();
     }
   }, [disabled, focusButton, onClickProp, setOpenPopover]);
@@ -128,8 +167,10 @@ const MenuItem = ({
             setFocusIndex(0);
             e.stopPropagation();
           } else if (_events.default.isRightKey(e)) {
+            var _ref$current3;
+
             setOpen(false);
-            ref.current.focus();
+            (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
             e.stopPropagation();
           }
         } else {
@@ -141,8 +182,10 @@ const MenuItem = ({
           }
 
           if (_events.default.isLeftKey(e)) {
+            var _ref$current4;
+
             setOpen(false);
-            ref.current.focus();
+            (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.focus();
             e.stopPropagation();
           }
         }
@@ -150,7 +193,9 @@ const MenuItem = ({
         e.preventDefault();
       } else if (_events.default.isEnterKey(e)) {
         if (isHref && download) {
-          ref.current.click();
+          var _ref$current5;
+
+          (_ref$current5 = ref.current) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.click();
         }
 
         e.preventDefault();
@@ -162,23 +207,25 @@ const MenuItem = ({
   }, [disabled, download, focusButton, isHref, isLeftAligned, onClick, setOpenPopover, submenu]);
   const itemSubmenuProps = { ...(!disabled && {
       onMouseEnter: e => {
-        clearTimeout(mouseEnterTimer.current);
-        setFocusIndex(null);
+        if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
+        setFocusIndex(-1);
         mouseEnterTimer.current = setTimeout(() => {
           setOpen(true);
         }, INTERVAL);
         e.stopPropagation();
       },
       onMouseLeave: e => {
-        clearTimeout(mouseLeaveTimer.current);
+        if (mouseLeaveTimer.current) clearTimeout(mouseLeaveTimer.current);
         mouseLeaveTimer.current = setTimeout(() => {
           setOpen(false);
         }, INTERVAL);
         e.stopPropagation();
       },
       onClick: e => {
+        var _ref$current6;
+
         setOpen(true);
-        ref.current.focus();
+        (_ref$current6 = ref.current) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.focus();
         e.preventDefault();
         e.stopPropagation();
       }
@@ -191,8 +238,8 @@ const MenuItem = ({
 
   const renderMenuItemIcon = () => {
     return icon && /*#__PURE__*/_react.default.createElement(_actionPopover.MenuItemIcon, {
-      type: icon,
-      horizontalAlignment: horizontalAlignment
+      as: undefined,
+      type: icon
     });
   };
 
@@ -201,15 +248,17 @@ const MenuItem = ({
     onClick: onClick,
     onKeyDown: onKeyDown,
     type: "button",
-    tabIndex: "0",
-    role: "menuitem"
+    tabIndex: 0,
+    role: "menuitem",
+    isDisabled: disabled,
+    horizontalAlignment: horizontalAlignment
   }, disabled && {
     "aria-disabled": true
   }, isHref && {
     as: "a",
     download,
     href
-  }, submenu && itemSubmenuProps), submenu && /*#__PURE__*/_react.default.cloneElement(submenu, {
+  }, submenu && itemSubmenuProps), /*#__PURE__*/_react.default.isValidElement(submenu) ? /*#__PURE__*/_react.default.cloneElement(submenu, {
     parentID: `ActionPopoverItem_${guid}`,
     menuID: `ActionPopoverMenu_${guid}`,
     "data-element": "action-popover-submenu",
@@ -219,94 +268,26 @@ const MenuItem = ({
     setOpen,
     setFocusIndex,
     focusIndex
-  }), submenu && checkRef(ref) && isLeftAligned && /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
+  }) : null, submenu && checkRef(ref) && isLeftAligned ? /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
     type: "chevron_left"
-  }), horizontalAlignment === "left" && renderMenuItemIcon(), children, horizontalAlignment === "right" && renderMenuItemIcon(), submenu && checkRef(ref) && !isLeftAligned && /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
+  }) : null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, children, horizontalAlignment === "right" ? renderMenuItemIcon() : null, submenu && checkRef(ref) && !isLeftAligned ? /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
     type: "chevron_right"
-  }));
-};
-
-exports.MenuItem = MenuItem;
-
-function checkRef(ref) {
-  return Boolean(ref && ref.current);
-}
-
-function leftAlignSubmenu(ref, submenuRef) {
-  const itemRect = ref.current.getBoundingClientRect();
-  const {
-    offsetWidth
-  } = submenuRef.current;
-  return itemRect.left >= offsetWidth;
-}
-
-function getContainerPosition(itemRef, submenuRef, spacing, placement) {
-  const {
-    offsetWidth: parentWidth
-  } = itemRef.current;
-  const {
-    offsetWidth: submenuWidth
-  } = submenuRef.current;
-  const xPositionValue = leftAlignSubmenu(itemRef, submenuRef) ? -submenuWidth : parentWidth;
-  const yPositionName = placement === "top" ? "bottom" : "top";
-  return {
-    left: xPositionValue,
-    [yPositionName]: -spacing,
-    right: "auto"
-  };
-}
-
-const StyledActionPopoverItem = (0, _actionPopover.MenuItemFactory)(MenuItem);
-StyledActionPopoverItem.displayName = "ActionPopoverItem";
-const ActionPopoverItem = (0, _styledComponents.withTheme)(StyledActionPopoverItem);
-const propTypes = {
-  /** The text label to display for this Item */
-  children: _propTypes.default.string.isRequired,
-
-  /** Flag to indicate if item is disabled */
-  disabled: _propTypes.default.bool,
-
-  /**
-   * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   * The name of the icon to display next to the label
-   * */
-  icon: _propTypes.default.string,
-
-  /** Callback to run when item is clicked */
-  onClick: _propTypes.default.func,
-
-  /** allows to provide download prop that works dependent with href */
-  download: _propTypes.default.bool,
-
-  /** allows to provide href prop */
-  href: _propTypes.default.string,
-
-  /** Submenu component for item */
-  submenu(props, propName, componentName) {
-    let error;
-
-    if (props[propName] && props[propName].type.displayName !== "ActionPopoverMenu") {
-      error = new Error(`\`${componentName}\` only accepts submenu of type \`ActionPopoverMenu\``);
-    }
-
-    return error;
-  },
-
-  /** @ignore @private */
-  placement: _propTypes.default.oneOf(["bottom", "top"]),
-
-  /** @ignore @private */
-  focusItem: _propTypes.default.bool,
-
-  /** @ignore @private */
-  horizontalAlignment: _propTypes.default.oneOf(["left", "right"])
+  }) : null);
 };
-ActionPopoverItem.propTypes = { ...propTypes
-}; // needed to export MenuItem to create prop tables in storybook
 
-MenuItem.propTypes = { ...propTypes
+exports.ActionPopoverItem = ActionPopoverItem;
+ActionPopoverItem.propTypes = {
+  "children": _propTypes.default.string.isRequired,
+  "disabled": _propTypes.default.bool,
+  "download": _propTypes.default.bool,
+  "focusItem": _propTypes.default.bool,
+  "horizontalAlignment": _propTypes.default.oneOf(["left", "right"]),
+  "href": _propTypes.default.string,
+  "icon": _propTypes.default.oneOf(["add", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "copy", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "messages", "minus_large", "minus", "mobile", "money_bag", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "three_boxes", "tick_circle", "tick", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "onClick": _propTypes.default.func,
+  "placement": _propTypes.default.oneOf(["bottom", "top"]),
+  "submenu": _propTypes.default.node
 };
-MenuItem.displayName = "ActionPopoverItem";
+ActionPopoverItem.displayName = "ActionPopoverItem";
 var _default = ActionPopoverItem;
 exports.default = _default;

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.d.ts

@@ -1,3 +1,36 @@
-export default ActionPopoverMenu;
-declare const ActionPopoverMenu: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";
+export interface ActionPopoverMenuBaseProps {
+    /** Children for the menu */
+    children?: React.ReactNode;
+    /** Index to control which item is focused */
+    focusIndex?: number;
+    /** Flag to indicate whether a menu should open */
+    isOpen?: boolean;
+    /** A unique ID for the menu */
+    menuID?: string;
+    /** Callback to set the index of the focused item */
+    setFocusIndex?: (args: number) => void;
+    /** Callback to set the isOpen flag */
+    setOpen?: (args: boolean) => void;
+    /** Unique ID for the menu's parent */
+    parentID?: string;
+    /** Horizontal alignment of menu items content */
+    horizontalAlignment?: "left" | "right";
+    /** Set whether the menu should open above or below the button */
+    placement?: "bottom" | "top";
+    /** @ignore @private */
+    role?: string;
+    /** @ignore @private */
+    "data-element"?: string;
+    /** @ignore @private */
+    style?: {
+        left: number;
+        top?: string;
+        bottom?: string;
+        right: "auto";
+    };
+}
+export interface ActionPopoverMenuProps extends ActionPopoverMenuBaseProps, React.RefAttributes<HTMLDivElement> {
+}
+declare const ActionPopoverMenu: React.ForwardRefExoticComponent<ActionPopoverMenuBaseProps & React.RefAttributes<HTMLDivElement>>;
+export default ActionPopoverMenu;

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

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _invariant = _interopRequireDefault(require("invariant"));
+
 var _actionPopover = require("../action-popover.style");
 
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
@@ -28,22 +30,40 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
-  parentID,
   children,
+  parentID,
   focusIndex,
   isOpen,
   menuID,
-  onClick,
   setOpen,
   setFocusIndex,
   placement = "bottom",
   horizontalAlignment,
   ...rest
 }, ref) => {
+  const context = (0, _react.useContext)(_actionPopoverContext.default);
+  (0, _invariant.default)(context, "ActionPopoverMenu must be used within an ActionPopover component");
   const {
     focusButton
-  } = (0, _react.useContext)(_actionPopoverContext.default);
-  const items = (0, _react.useMemo)(() => _react.default.Children.toArray(children).filter(child => child && child.type === _actionPopoverItem.default), [children]);
+  } = context;
+  (0, _invariant.default)(setOpen && setFocusIndex && typeof focusIndex !== "undefined", "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component");
+  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]);
+  (0, _invariant.default)(hasProperChildren, `ActionPopoverMenu only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`);
+  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 onKeyDown = (0, _react.useCallback)(e => {
     if (_events.default.isTabKey(e)) {
       e.preventDefault(); // TAB: close menu and allow focus to change to next focusable element
@@ -79,12 +99,8 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
       let firstMatch;
       let nextMatch;
 
-      _react.default.Children.forEach(items, ({
-        props: {
-          children: text
-        }
-      }, index) => {
-        if (text && text.toLowerCase().startsWith(e.key.toLowerCase())) {
+      _react.default.Children.forEach(items, (child, index) => {
+        if ( /*#__PURE__*/_react.default.isValidElement(child) && child.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
           if (firstMatch === undefined) {
             firstMatch = index;
           }
@@ -105,7 +121,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
   const clonedChildren = (0, _react.useMemo)(() => {
     let index = 0;
     return _react.default.Children.map(children, child => {
-      if (child && child.type === _actionPopoverItem.default) {
+      if ( /*#__PURE__*/_react.default.isValidElement(child) && child.type === _actionPopoverItem.default) {
         index += 1;
         return /*#__PURE__*/_react.default.cloneElement(child, {
           focusItem: isOpen && focusIndex === index - 1,
@@ -129,50 +145,23 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
 });
 
 ActionPopoverMenu.propTypes = {
-  /** Unique ID for the menu's parent */
-  parentID: _propTypes.default.string,
-
-  /** Children for the menu */
-  children(props, propName, componentName) {
-    let error;
-    const prop = props[propName];
-
-    _react.default.Children.forEach(prop, child => {
-      if (child === null) {
-        return;
-      }
-
-      if (![_actionPopoverItem.default.displayName, _actionPopoverDivider.default.displayName].includes(child.type.displayName)) {
-        error = new Error(`\`${componentName}\` only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`);
-      }
-    });
-
-    return error;
-  },
-
-  /** Index to control which item is focused */
-  focusIndex: _propTypes.default.number,
-
-  /** A unique ID for the menu */
-  menuID: _propTypes.default.string,
-
-  /** Flag to indicate whether a menu should open */
-  isOpen: _propTypes.default.bool,
-
-  /** Callback to set the index of the focused item */
-  setFocusIndex: _propTypes.default.func,
-
-  /** Callback to set the isOpen flag */
-  setOpen: _propTypes.default.func,
-
-  /** Callback called on click event */
-  onClick: _propTypes.default.func,
-
-  /** @ignore @private */
-  placement: _propTypes.default.oneOf(["bottom", "top"]),
-
-  /** @ignore @private */
-  horizontalAlignment: _propTypes.default.oneOf(["left", "right"])
+  "children": _propTypes.default.node,
+  "data-element": _propTypes.default.string,
+  "focusIndex": _propTypes.default.number,
+  "horizontalAlignment": _propTypes.default.oneOf(["left", "right"]),
+  "isOpen": _propTypes.default.bool,
+  "menuID": _propTypes.default.string,
+  "parentID": _propTypes.default.string,
+  "placement": _propTypes.default.oneOf(["bottom", "top"]),
+  "role": _propTypes.default.string,
+  "setFocusIndex": _propTypes.default.func,
+  "setOpen": _propTypes.default.func,
+  "style": _propTypes.default.shape({
+    "bottom": _propTypes.default.string,
+    "left": _propTypes.default.number.isRequired,
+    "right": _propTypes.default.oneOf(["auto"]).isRequired,
+    "top": _propTypes.default.string
+  })
 };
 ActionPopoverMenu.displayName = "ActionPopoverMenu";
 var _default = ActionPopoverMenu;

package/lib/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.d.ts

@@ -1,19 +1,21 @@
-export default ActionPopoverMenuButton;
-declare function ActionPopoverMenuButton({ buttonType, iconType, iconPosition, size, children, ...props }: {
-    [x: string]: any;
-    buttonType: any;
-    iconType: any;
-    iconPosition: any;
-    size: any;
-    children: any;
-}): JSX.Element;
-declare namespace ActionPopoverMenuButton {
-    namespace propTypes {
-        const buttonType: PropTypes.Requireable<string>;
-        const iconType: PropTypes.Requireable<string>;
-        const iconPosition: PropTypes.Requireable<string>;
-        const size: PropTypes.Requireable<string>;
-        const children: PropTypes.Requireable<string>;
-    }
+/// <reference types="react" />
+import { ButtonTypes } from "../../button/button.component";
+import { IconType } from "../../icon";
+export declare type ActionPopoverMenuButtonAria = {
+    "aria-haspopup": string;
+    "aria-label": string;
+    "aria-controls": string;
+    "aria-expanded": string;
+};
+export interface ActionPopoverMenuButtonProps {
+    children?: string;
+    buttonType?: ButtonTypes;
+    iconType?: IconType;
+    iconPosition?: "after" | "before";
+    size?: "small" | "medium" | "large";
+    tabIndex: number;
+    ariaAttributes: ActionPopoverMenuButtonAria;
+    "data-element": string;
 }
-import PropTypes from "prop-types";
+declare const ActionPopoverMenuButton: ({ buttonType, iconType, iconPosition, size, children, ...props }: ActionPopoverMenuButtonProps) => JSX.Element;
+export default ActionPopoverMenuButton;

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

@@ -32,11 +32,19 @@ const ActionPopoverMenuButton = ({
 }, props), children));
 
 ActionPopoverMenuButton.propTypes = {
-  buttonType: _propTypes.default.string,
-  iconType: _propTypes.default.string,
-  iconPosition: _propTypes.default.string,
-  size: _propTypes.default.string,
-  children: _propTypes.default.string
+  "ariaAttributes": _propTypes.default.shape({
+    "aria-controls": _propTypes.default.string.isRequired,
+    "aria-expanded": _propTypes.default.string.isRequired,
+    "aria-haspopup": _propTypes.default.string.isRequired,
+    "aria-label": _propTypes.default.string.isRequired
+  }).isRequired,
+  "buttonType": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
+  "children": _propTypes.default.string,
+  "data-element": _propTypes.default.string.isRequired,
+  "iconPosition": _propTypes.default.oneOf(["after", "before"]),
+  "iconType": _propTypes.default.oneOf(["add", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "copy", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "messages", "minus_large", "minus", "mobile", "money_bag", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "three_boxes", "tick_circle", "tick", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "size": _propTypes.default.oneOf(["large", "medium", "small"]),
+  "tabIndex": _propTypes.default.number.isRequired
 };
 var _default = ActionPopoverMenuButton;
 exports.default = _default;