carbon-react 106.6.2 → 106.6.5

package/esm/components/action-popover/action-popover-test.stories.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { ActionPopover, ActionPopoverDivider, ActionPopoverItem, ActionPopoverMenu } from ".";
+import { FlatTable, FlatTableHead, FlatTableBody, FlatTableRow, FlatTableHeader, FlatTableCell } from "../flat-table";
+export default {
+  title: "Action Popover/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  }
+};
+export const Default = () => {
+  const submenu = /*#__PURE__*/React.createElement(ActionPopoverMenu, null, /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    onClick: action("sub menu 1")
+  }, "Sub Menu 1"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    onClick: action("sub menu 2")
+  }, "Sub Menu 2"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    disabled: true,
+    onClick: action("sub menu 3")
+  }, "Sub Menu 3"));
+  const submenuWithIcons = /*#__PURE__*/React.createElement(ActionPopoverMenu, null, /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    icon: "graph",
+    onClick: action("sub menu 1")
+  }, "Sub Menu 1"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    icon: "add",
+    onClick: action("sub menu 2")
+  }, "Sub Menu 2"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    icon: "print",
+    disabled: true,
+    onClick: action("sub menu 3")
+  }, "Sub Menu 3"));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "40px",
+      height: "275px"
+    }
+  }, /*#__PURE__*/React.createElement(FlatTable, {
+    isZebra: true
+  }, /*#__PURE__*/React.createElement(FlatTableHead, null, /*#__PURE__*/React.createElement(FlatTableRow, null, /*#__PURE__*/React.createElement(FlatTableHeader, null, "First Name"), /*#__PURE__*/React.createElement(FlatTableHeader, null, "Last Name"), /*#__PURE__*/React.createElement(FlatTableHeader, null, "\xA0"))), /*#__PURE__*/React.createElement(FlatTableBody, null, /*#__PURE__*/React.createElement(FlatTableRow, null, /*#__PURE__*/React.createElement(FlatTableCell, null, "John"), /*#__PURE__*/React.createElement(FlatTableCell, null, "Doe"), /*#__PURE__*/React.createElement(FlatTableCell, null, /*#__PURE__*/React.createElement(ActionPopover, {
+    onOpen: action("popover opened"),
+    onClose: action("popover closed")
+  }, /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    disabled: true,
+    icon: "graph",
+    submenu: submenu,
+    onClick: action("email")
+  }, "Business"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    icon: "email",
+    onClick: action("email")
+  }, "Email Invoice"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    icon: "print",
+    onClick: action("print"),
+    submenu: submenu
+  }, "Print Invoice"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    icon: "pdf",
+    submenu: submenu,
+    onClick: action("pdf")
+  }, "Download PDF"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    icon: "csv",
+    onClick: action("csv")
+  }, "Download CSV"), /*#__PURE__*/React.createElement(ActionPopoverDivider, null), /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    icon: "delete",
+    onClick: action("delete")
+  }, "Delete")))), /*#__PURE__*/React.createElement(FlatTableRow, null, /*#__PURE__*/React.createElement(FlatTableCell, null, "Jane"), /*#__PURE__*/React.createElement(FlatTableCell, null, "Smith"), /*#__PURE__*/React.createElement(FlatTableCell, null, /*#__PURE__*/React.createElement(ActionPopover, null, /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    icon: "csv",
+    onClick: action("csv")
+  }, "Download CSV")))), /*#__PURE__*/React.createElement(FlatTableRow, null, /*#__PURE__*/React.createElement(FlatTableCell, null, "Bob"), /*#__PURE__*/React.createElement(FlatTableCell, null, "Jones"), /*#__PURE__*/React.createElement(FlatTableCell, null, /*#__PURE__*/React.createElement(ActionPopover, null, /*#__PURE__*/React.createElement(ActionPopoverItem, {
+    icon: "csv",
+    submenu: submenuWithIcons,
+    onClick: action("csv")
+  }, "Download CSV")))))));
+};

package/esm/components/action-popover/action-popover.component.d.ts

@@ -1,55 +1,32 @@
-export default ActionPopover;
-declare function ActionPopover({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, ...rest }: {
-    [x: string]: any;
-    children: any;
-    id: any;
-    onOpen: any;
-    onClose: any;
-    rightAlignMenu: any;
-    renderButton: any;
-    placement?: string | undefined;
-    horizontalAlignment: any;
-}): JSX.Element;
-declare namespace ActionPopover {
-    const propTypes: {
-        /** Unique ID */
-        id: PropTypes.Requireable<string>;
-        /** Callback to be called on menu open */
-        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        /** Callback to be called on menu close */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        /** Boolean to control whether menu should align to right */
-        rightAlignMenu: PropTypes.Requireable<boolean>;
-        /** Children for popover component */
-        children(props: any, propName: any, componentName: any): undefined;
-        /** Render a custom menu button to override default ellipsis icon */
-        renderButton: PropTypes.Requireable<(...args: any[]) => any>;
-        /** Horizontal alignment of menu items content */
-        horizontalAlignment: PropTypes.Requireable<string>;
-        /** Set whether the menu should open above or below the button */
-        placement: PropTypes.Requireable<string>;
-        marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+import React from "react";
+import { MarginProps } from "styled-system";
+interface RenderButtonProps {
+    tabIndex: number;
+    "data-element": string;
+    ariaAttributes: {
+        "aria-haspopup": string;
+        "aria-label": string;
+        "aria-controls": string;
+        "aria-expanded": string;
     };
-    namespace defaultProps {
-        export const id: null;
-        export { onOpen };
-        export { onClose };
-        export const horizontalAlignment: string;
-    }
 }
-import PropTypes from "prop-types";
-declare function onOpen(): void;
-declare function onClose(): void;
+export interface ActionPopoverProps extends MarginProps {
+    /** Children for popover component */
+    children?: React.ReactNode;
+    /** Horizontal alignment of menu items content */
+    horizontalAlignment?: "left" | "right";
+    /** Unique ID */
+    id?: string;
+    /** Callback to be called on menu open */
+    onOpen?: () => void;
+    /** Callback to be called on menu close */
+    onClose?: () => void;
+    /** Set whether the menu should open above or below the button */
+    placement?: "bottom" | "top";
+    /** Render a custom menu button to override default ellipsis icon */
+    renderButton?: (buttonProps: RenderButtonProps) => React.ReactNode;
+    /** Boolean to control whether menu should align to right */
+    rightAlignMenu?: boolean;
+}
+export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, ...rest }: ActionPopoverProps) => JSX.Element;
+export default ActionPopover;

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

@@ -2,10 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState, useCallback, useMemo, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
+import invariant from "invariant";
 import { MenuButton, ButtonIcon, StyledButtonIcon } from "./action-popover.style";
 import Events from "../../__internal__/utils/helpers/events";
-import { filterStyledSystemMarginProps } from "../../style/utils";
 import Popover from "../../__internal__/popover";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
@@ -13,28 +12,44 @@ import ActionPopoverMenu from "./action-popover-menu/action-popover-menu.compone
 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 marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const onOpenDefault = () => {};
+
+const onCloseDefault = () => {};
 
 const ActionPopover = ({
   children,
   id,
-  onOpen,
-  onClose,
+  onOpen = onOpenDefault,
+  onClose = onCloseDefault,
   rightAlignMenu,
   renderButton,
   placement = "bottom",
-  horizontalAlignment,
+  horizontalAlignment = "left",
   ...rest
 }) => {
   const l = useLocale();
   const [isOpen, setOpenState] = useState(false);
   const [focusIndex, setFocusIndex] = useState(0);
   const [guid] = useState(createGuid());
-  const buttonRef = useRef();
-  const menu = useRef();
+  const buttonRef = useRef(null);
+  const menu = useRef(null);
   const itemCount = useMemo(() => {
-    return React.Children.toArray(children).filter(child => child.type === ActionPopoverItem).length;
+    return React.Children.toArray(children).filter(child => {
+      return /*#__PURE__*/React.isValidElement(child) && child.type === ActionPopoverItem;
+    }).length;
+  }, [children]);
+  const hasProperChildren = useMemo(() => {
+    const incorrectChild = React.Children.toArray(children).find(child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) {
+        return true;
+      }
+
+      return child.type !== ActionPopoverItem && child.type !== ActionPopoverDivider;
+    });
+    return !incorrectChild;
   }, [children]);
+  invariant(hasProperChildren, `ActionPopover only accepts children of type \`${ActionPopoverItem.displayName}\`` + ` and \`${ActionPopoverDivider.displayName}\`.`);
   const mappedPlacement = useMemo(() => {
     if (placement === "top" && !rightAlignMenu) {
       return "top-end";
@@ -61,6 +76,12 @@ const ActionPopover = ({
 
     setOpenState(value);
   }, [isOpen, onOpen, onClose]);
+  const focusButton = useCallback(() => {
+    var _buttonRef$current;
+
+    const button = (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.querySelector("[data-element='action-popover-button']");
+    button === null || button === void 0 ? void 0 : button.focus();
+  }, []);
   const onButtonClick = useCallback(e => {
     e.stopPropagation();
     const isOpening = !isOpen;
@@ -68,9 +89,9 @@ const ActionPopover = ({
 
     if (!isOpening) {
       // Closing the menu should focus the MenuButton
-      buttonRef.current.querySelector("[data-component='action-popover-button']").focus();
+      focusButton();
     }
-  }, [isOpen, setOpen]); // Keyboard commands implemented as recommended by WAI-ARIA best practices
+  }, [isOpen, 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 = useCallback(e => {
@@ -86,7 +107,6 @@ const ActionPopover = ({
       setOpen(true);
     }
   }, [itemCount, setOpen]);
-  const focusButton = useCallback(() => buttonRef.current.querySelector("[data-component='action-popover-button']").focus(), []);
   useEffect(() => {
     const handler = ({
       target
@@ -94,7 +114,10 @@ const ActionPopover = ({
       // If the event didn't came 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
-      if (!buttonRef.current.contains(target) && menu.current && !menu.current.contains(target)) {
+      const isInMenu = menu.current && menu.current.contains(target);
+      const isInButton = buttonRef.current && buttonRef.current.contains(target);
+
+      if (!isInMenu && !isInButton) {
         setOpen(false);
       }
     };
@@ -113,13 +136,13 @@ const ActionPopover = ({
   const menuButton = menuID => {
     if (renderButton) {
       return renderButton({
-        tabIndex: isOpen ? "-1" : "0",
-        "data-component": "action-popover-button",
+        tabIndex: isOpen ? -1 : 0,
+        "data-element": "action-popover-button",
         ariaAttributes: {
           "aria-haspopup": "true",
           "aria-label": l.actionPopover.ariaLabel(),
           "aria-controls": menuID,
-          "aria-expanded": isOpen
+          "aria-expanded": `${isOpen}`
         }
       });
     }
@@ -130,8 +153,8 @@ const ActionPopover = ({
       "aria-label": l.actionPopover.ariaLabel(),
       "aria-controls": menuID,
       "aria-expanded": isOpen,
-      tabIndex: isOpen ? "-1" : "0",
-      "data-component": "action-popover-button"
+      tabIndex: isOpen ? -1 : 0,
+      "data-element": "action-popover-button"
     }, /*#__PURE__*/React.createElement(ButtonIcon, {
       type: "ellipsis_vertical"
     }));
@@ -174,54 +197,169 @@ const ActionPopover = ({
   }, menuProps), children))));
 };
 
-ActionPopover.propTypes = { ...marginPropTypes,
-
-  /** Unique ID */
-  id: PropTypes.string,
-
-  /** Callback to be called on menu open */
-  onOpen: PropTypes.func,
-
-  /** Callback to be called on menu close */
-  onClose: PropTypes.func,
-
-  /** Boolean to control whether menu should align to right */
-  rightAlignMenu: PropTypes.bool,
-
-  /** Children for popover component */
-  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;
-  },
-
-  /** Render a custom menu button to override default ellipsis icon */
-  renderButton: PropTypes.func,
-
-  /** Horizontal alignment of menu items content */
-  horizontalAlignment: PropTypes.oneOf(["left", "right"]),
-
-  /** Set whether the menu should open above or below the button */
-  placement: PropTypes.oneOf(["top", "bottom"])
-};
-
-const onOpen = () => {};
-
-const onClose = () => {};
-
-ActionPopover.defaultProps = {
-  id: null,
-  onOpen,
-  onClose,
-  horizontalAlignment: "left"
+ActionPopover.propTypes = {
+  "children": PropTypes.node,
+  "horizontalAlignment": PropTypes.oneOf(["left", "right"]),
+  "id": PropTypes.string,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "onClose": PropTypes.func,
+  "onOpen": PropTypes.func,
+  "placement": PropTypes.oneOf(["bottom", "top"]),
+  "renderButton": PropTypes.func,
+  "rightAlignMenu": PropTypes.bool
 };
+export { ActionPopover };
 export default ActionPopover;

package/esm/components/action-popover/action-popover.style.d.ts

@@ -1,13 +1,19 @@
-export const Menu: import("styled-components").StyledComponent<"div", any, {}, never>;
-export function MenuItemFactory(button: any): import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
-export const MenuButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const ButtonIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
-export const StyledButtonIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const MenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
-export const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
+import Icon from "../icon";
+declare const Menu: import("styled-components").StyledComponent<"div", any, {
+    isOpen?: boolean | undefined;
+}, never>;
+declare type StyledMenuItemProps = {
+    isDisabled: boolean;
+    horizontalAlignment: "left" | "right";
+};
+declare const StyledMenuItem: import("styled-components").StyledComponent<"button", any, StyledMenuItemProps, never>;
+declare const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
     "data-element": string;
 }, "data-element">;
-export const SubMenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
-export const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledMenuItem: import("styled-components").StyledComponent<"button", any, {}, never>;
-import Icon from "../icon";
+declare const MenuButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const ButtonIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
+declare const StyledButtonIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const MenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
+declare const SubMenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
+declare const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem, };

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

@@ -20,12 +20,7 @@ const Menu = styled.div`
 const StyledMenuItem = styled.button`
   text-decoration: none;
   background-color: var(--colorsActionMajorYang100);
-`;
-
-const MenuItemFactory = button => styled(button)`
-  cursor: ${({
-  disabled
-}) => disabled ? "not-allowed" : "pointer"};
+  cursor: pointer;
   box-sizing: border-box;
   padding: 0 var(--spacing150);
   position: relative;
@@ -36,43 +31,42 @@ const MenuItemFactory = button => styled(button)`
   align-items: center;
   border: none;
   width: 100%;
-  color: ${({
-  disabled
-}) => disabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin090)"};
+  color: var(--colorsUtilityYin090);
   font-size: 14px;
   font-weight: 700;
   justify-content: ${({
   horizontalAlignment
 }) => horizontalAlignment === "left" ? "flex-start" : "flex-end"};
-  &:focus,
-  &:hover {
-    ${({
-  disabled
-}) => !disabled && css`
-        background-color: var(--colorsUtilityMajor025);
-      `}
-  }
+
   &:focus {
     outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     z-index: 1;
   }
+
   ${({
-  disabled
-}) => !disabled && css`
+  isDisabled
+}) => isDisabled && css`
+      color: var(--colorsUtilityYin030);
+      cursor: not-allowed;
+
       && ${StyledIcon} {
-        cursor: pointer;
+        cursor: not-allowed;
+        color: var(--colorsUtilityYin030);
       }
     `}
+
   ${({
-  disabled
-}) => disabled && css`
+  isDisabled
+}) => !isDisabled && css`
+      &:focus,
+      &:hover {
+        background-color: var(--colorsUtilityMajor025);
+      }
       && ${StyledIcon} {
-        cursor: not-allowed;
-        color: var(--colorsUtilityYin030);
+        cursor: pointer;
       }
     `}
 `;
-
 const MenuItemDivider = styled.div.attrs({
   "data-element": "action-popover-divider"
 })`
@@ -138,4 +132,4 @@ const MenuButtonOverrideWrapper = styled.div`
     }
   }
 `;
-export { Menu, MenuItemFactory, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem };
+export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem };

package/esm/components/action-popover/index.d.ts

@@ -1,5 +1,9 @@
-export { default as ActionPopover } from "./action-popover";
-export { default as ActionPopoverMenu } from "./action-popover-menu/action-popover-menu";
-export { default as ActionPopoverItem } from "./action-popover-item/action-popover-item";
-export { default as ActionPopoverMenuButton } from "./action-popover-menu-button";
-export { default as ActionPopoverDivider } from "./action-popover-divider/action-popover-divider";
+export { default as ActionPopover } from "./action-popover.component";
+export type { ActionPopoverProps } from "./action-popover.component";
+export { default as ActionPopoverMenu } from "./action-popover-menu/action-popover-menu.component";
+export type { ActionPopoverMenuProps } from "./action-popover-menu/action-popover-menu.component";
+export { default as ActionPopoverItem } from "./action-popover-item/action-popover-item.component";
+export type { ActionPopoverItemProps } from "./action-popover-item/action-popover-item.component";
+export { default as ActionPopoverMenuButton } from "./action-popover-menu-button/action-popover-menu-button.component";
+export type { ActionPopoverMenuButtonProps } from "./action-popover-menu-button/action-popover-menu-button.component";
+export { default as ActionPopoverDivider } from "./action-popover-divider/action-popover-divider.component";