carbon-react 106.6.1 → 106.6.4

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

@@ -2,21 +2,55 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useEffect, useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
-import { withTheme } from "styled-components";
-import { MenuItemFactory, MenuItemIcon, SubMenuItemIcon, StyledMenuItem } from "../action-popover.style";
+import invariant from "invariant";
+import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem } from "../action-popover.style";
 import Events from "../../../__internal__/utils/helpers/events";
 import createGuid from "../../../__internal__/utils/helpers/guid";
 import ActionPopoverContext from "../action-popover-context";
 import useLocale from "../../../hooks/__internal__/useLocale";
+import ActionPopoverMenu from "../action-popover-menu/action-popover-menu.component";
 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,
@@ -25,47 +59,49 @@ const MenuItem = ({
   ...rest
 }) => {
   const l = useLocale();
+  const context = useContext(ActionPopoverContext);
+  invariant(context, "ActionPopoverItem must be used within an ActionPopover component");
+  invariant( /*#__PURE__*/React.isValidElement(submenu) ? submenu.type === ActionPopoverMenu : true, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`");
   const {
     setOpenPopover,
     isOpenPopover,
     focusButton
-  } = useContext(ActionPopoverContext);
+  } = context;
   const isHref = !!href;
-  const [containerPosition, setContainerPosition] = useState(null);
+  const [containerPosition, setContainerPosition] = useState(undefined);
   const [guid] = useState(createGuid());
   const [isOpen, setOpen] = useState(false);
   const [focusIndex, setFocusIndex] = useState(0);
   const [isLeftAligned, setIsLeftAligned] = useState(true);
-  const submenuRef = useRef();
-  const ref = useRef();
-  const mouseEnterTimer = useRef();
-  const mouseLeaveTimer = useRef();
-  const {
-    spacing
-  } = theme;
+  const submenuRef = useRef(null);
+  const ref = useRef(null);
+  const mouseEnterTimer = useRef(null);
+  const mouseLeaveTimer = useRef(null);
   useEffect(() => {
     if (!isOpenPopover) {
       setOpen(false);
     }
   }, [isOpenPopover]);
   const alignSubmenu = 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]);
   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]);
   useEffect(() => {
     return function cleanup() {
-      clearTimeout(mouseEnterTimer.current);
-      clearTimeout(mouseLeaveTimer.current);
+      if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
+      if (mouseLeaveTimer.current) clearTimeout(mouseLeaveTimer.current);
     };
   }, []);
   useEffect(() => {
@@ -83,10 +119,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]);
@@ -107,8 +145,10 @@ const MenuItem = ({
             setFocusIndex(0);
             e.stopPropagation();
           } else if (Events.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 {
@@ -120,8 +160,10 @@ const MenuItem = ({
           }
 
           if (Events.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();
           }
         }
@@ -129,7 +171,9 @@ const MenuItem = ({
         e.preventDefault();
       } else if (Events.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();
@@ -141,23 +185,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();
       }
@@ -170,8 +216,8 @@ const MenuItem = ({
 
   const renderMenuItemIcon = () => {
     return icon && /*#__PURE__*/React.createElement(MenuItemIcon, {
-      type: icon,
-      horizontalAlignment: horizontalAlignment
+      as: undefined,
+      type: icon
     });
   };
 
@@ -180,15 +226,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.cloneElement(submenu, {
+  }, submenu && itemSubmenuProps), /*#__PURE__*/React.isValidElement(submenu) ? /*#__PURE__*/React.cloneElement(submenu, {
     parentID: `ActionPopoverItem_${guid}`,
     menuID: `ActionPopoverMenu_${guid}`,
     "data-element": "action-popover-submenu",
@@ -198,92 +246,25 @@ const MenuItem = ({
     setOpen,
     setFocusIndex,
     focusIndex
-  }), submenu && checkRef(ref) && isLeftAligned && /*#__PURE__*/React.createElement(SubMenuItemIcon, {
+  }) : null, submenu && checkRef(ref) && isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
     type: "chevron_left"
-  }), horizontalAlignment === "left" && renderMenuItemIcon(), children, horizontalAlignment === "right" && renderMenuItemIcon(), submenu && checkRef(ref) && !isLeftAligned && /*#__PURE__*/React.createElement(SubMenuItemIcon, {
+  }) : null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, children, horizontalAlignment === "right" ? renderMenuItemIcon() : null, submenu && checkRef(ref) && !isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
     type: "chevron_right"
-  }));
-};
-
-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 = MenuItemFactory(MenuItem);
-StyledActionPopoverItem.displayName = "ActionPopoverItem";
-const ActionPopoverItem = withTheme(StyledActionPopoverItem);
-const propTypes = {
-  /** The text label to display for this Item */
-  children: PropTypes.string.isRequired,
-
-  /** Flag to indicate if item is disabled */
-  disabled: PropTypes.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.string,
-
-  /** Callback to run when item is clicked */
-  onClick: PropTypes.func,
-
-  /** allows to provide download prop that works dependent with href */
-  download: PropTypes.bool,
-
-  /** allows to provide href prop */
-  href: PropTypes.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.oneOf(["bottom", "top"]),
-
-  /** @ignore @private */
-  focusItem: PropTypes.bool,
-
-  /** @ignore @private */
-  horizontalAlignment: PropTypes.oneOf(["left", "right"])
+  }) : null);
 };
-ActionPopoverItem.propTypes = { ...propTypes
-}; // needed to export MenuItem to create prop tables in storybook
 
-MenuItem.propTypes = { ...propTypes
+ActionPopoverItem.propTypes = {
+  "children": PropTypes.string.isRequired,
+  "disabled": PropTypes.bool,
+  "download": PropTypes.bool,
+  "focusItem": PropTypes.bool,
+  "horizontalAlignment": PropTypes.oneOf(["left", "right"]),
+  "href": PropTypes.string,
+  "icon": PropTypes.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.func,
+  "placement": PropTypes.oneOf(["bottom", "top"]),
+  "submenu": PropTypes.node
 };
-MenuItem.displayName = "ActionPopoverItem";
-export { MenuItem };
+export { ActionPopoverItem };
+ActionPopoverItem.displayName = "ActionPopoverItem";
 export default ActionPopoverItem;

package/esm/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/esm/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -2,28 +2,46 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useMemo, useContext } from "react";
 import PropTypes from "prop-types";
+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 ActionPopoverContext from "../action-popover-context";
 const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
-  parentID,
   children,
+  parentID,
   focusIndex,
   isOpen,
   menuID,
-  onClick,
   setOpen,
   setFocusIndex,
   placement = "bottom",
   horizontalAlignment,
   ...rest
 }, ref) => {
+  const context = useContext(ActionPopoverContext);
+  invariant(context, "ActionPopoverMenu must be used within an ActionPopover component");
   const {
     focusButton
-  } = useContext(ActionPopoverContext);
-  const items = useMemo(() => React.Children.toArray(children).filter(child => child && child.type === ActionPopoverItem), [children]);
+  } = context;
+  invariant(setOpen && setFocusIndex && typeof focusIndex !== "undefined", "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component");
+  const hasProperChildren = useMemo(() => {
+    const incorrectChild = React.Children.toArray(children).find(child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) {
+        return true;
+      }
+
+      return child.type !== ActionPopoverItem && child.type !== ActionPopoverDivider;
+    });
+    return !incorrectChild;
+  }, [children]);
+  invariant(hasProperChildren, `ActionPopoverMenu only accepts children of type \`${ActionPopoverItem.displayName}\`` + ` and \`${ActionPopoverDivider.displayName}\`.`);
+  const items = useMemo(() => {
+    return React.Children.toArray(children).filter(child => {
+      return /*#__PURE__*/React.isValidElement(child) && child.type === ActionPopoverItem;
+    });
+  }, [children]);
   const onKeyDown = useCallback(e => {
     if (Events.isTabKey(e)) {
       e.preventDefault(); // TAB: close menu and allow focus to change to next focusable element
@@ -58,12 +76,8 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       e.stopPropagation();
       let firstMatch;
       let nextMatch;
-      React.Children.forEach(items, ({
-        props: {
-          children: text
-        }
-      }, index) => {
-        if (text && text.toLowerCase().startsWith(e.key.toLowerCase())) {
+      React.Children.forEach(items, (child, index) => {
+        if ( /*#__PURE__*/React.isValidElement(child) && child.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
           if (firstMatch === undefined) {
             firstMatch = index;
           }
@@ -84,7 +98,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
   const clonedChildren = useMemo(() => {
     let index = 0;
     return React.Children.map(children, child => {
-      if (child && child.type === ActionPopoverItem) {
+      if ( /*#__PURE__*/React.isValidElement(child) && child.type === ActionPopoverItem) {
         index += 1;
         return /*#__PURE__*/React.cloneElement(child, {
           focusItem: isOpen && focusIndex === index - 1,
@@ -107,48 +121,23 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
   }, rest), clonedChildren);
 });
 ActionPopoverMenu.propTypes = {
-  /** Unique ID for the menu's parent */
-  parentID: PropTypes.string,
-
-  /** Children for the menu */
-  children(props, propName, componentName) {
-    let error;
-    const prop = props[propName];
-    React.Children.forEach(prop, child => {
-      if (child === null) {
-        return;
-      }
-
-      if (![ActionPopoverItem.displayName, ActionPopoverDivider.displayName].includes(child.type.displayName)) {
-        error = new Error(`\`${componentName}\` only accepts children of type \`${ActionPopoverItem.displayName}\`` + ` and \`${ActionPopoverDivider.displayName}\`.`);
-      }
-    });
-    return error;
-  },
-
-  /** Index to control which item is focused */
-  focusIndex: PropTypes.number,
-
-  /** A unique ID for the menu */
-  menuID: PropTypes.string,
-
-  /** Flag to indicate whether a menu should open */
-  isOpen: PropTypes.bool,
-
-  /** Callback to set the index of the focused item */
-  setFocusIndex: PropTypes.func,
-
-  /** Callback to set the isOpen flag */
-  setOpen: PropTypes.func,
-
-  /** Callback called on click event */
-  onClick: PropTypes.func,
-
-  /** @ignore @private */
-  placement: PropTypes.oneOf(["bottom", "top"]),
-
-  /** @ignore @private */
-  horizontalAlignment: PropTypes.oneOf(["left", "right"])
+  "children": PropTypes.node,
+  "data-element": PropTypes.string,
+  "focusIndex": PropTypes.number,
+  "horizontalAlignment": PropTypes.oneOf(["left", "right"]),
+  "isOpen": PropTypes.bool,
+  "menuID": PropTypes.string,
+  "parentID": PropTypes.string,
+  "placement": PropTypes.oneOf(["bottom", "top"]),
+  "role": PropTypes.string,
+  "setFocusIndex": PropTypes.func,
+  "setOpen": PropTypes.func,
+  "style": PropTypes.shape({
+    "bottom": PropTypes.string,
+    "left": PropTypes.number.isRequired,
+    "right": PropTypes.oneOf(["auto"]).isRequired,
+    "top": PropTypes.string
+  })
 };
 ActionPopoverMenu.displayName = "ActionPopoverMenu";
 export default ActionPopoverMenu;

package/esm/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/esm/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.js

@@ -20,10 +20,18 @@ const ActionPopoverMenuButton = ({
 }, props), children));
 
 ActionPopoverMenuButton.propTypes = {
-  buttonType: PropTypes.string,
-  iconType: PropTypes.string,
-  iconPosition: PropTypes.string,
-  size: PropTypes.string,
-  children: PropTypes.string
+  "ariaAttributes": PropTypes.shape({
+    "aria-controls": PropTypes.string.isRequired,
+    "aria-expanded": PropTypes.string.isRequired,
+    "aria-haspopup": PropTypes.string.isRequired,
+    "aria-label": PropTypes.string.isRequired
+  }).isRequired,
+  "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
+  "children": PropTypes.string,
+  "data-element": PropTypes.string.isRequired,
+  "iconPosition": PropTypes.oneOf(["after", "before"]),
+  "iconType": PropTypes.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.oneOf(["large", "medium", "small"]),
+  "tabIndex": PropTypes.number.isRequired
 };
 export default ActionPopoverMenuButton;