carbon-react 106.6.2 → 106.6.3

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;

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

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _ = require(".");
+
+var _flatTable = require("../flat-table");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: "Action Popover/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  }
+};
+exports.default = _default;
+
+const Default = () => {
+  const submenu = /*#__PURE__*/_react.default.createElement(_.ActionPopoverMenu, null, /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    onClick: (0, _addonActions.action)("sub menu 1")
+  }, "Sub Menu 1"), /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    onClick: (0, _addonActions.action)("sub menu 2")
+  }, "Sub Menu 2"), /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    disabled: true,
+    onClick: (0, _addonActions.action)("sub menu 3")
+  }, "Sub Menu 3"));
+
+  const submenuWithIcons = /*#__PURE__*/_react.default.createElement(_.ActionPopoverMenu, null, /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    icon: "graph",
+    onClick: (0, _addonActions.action)("sub menu 1")
+  }, "Sub Menu 1"), /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    icon: "add",
+    onClick: (0, _addonActions.action)("sub menu 2")
+  }, "Sub Menu 2"), /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    icon: "print",
+    disabled: true,
+    onClick: (0, _addonActions.action)("sub menu 3")
+  }, "Sub Menu 3"));
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: "40px",
+      height: "275px"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_flatTable.FlatTable, {
+    isZebra: true
+  }, /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableHead, null, /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableRow, null, /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableHeader, null, "First Name"), /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableHeader, null, "Last Name"), /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableHeader, null, "\xA0"))), /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableBody, null, /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableRow, null, /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableCell, null, "John"), /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableCell, null, "Doe"), /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableCell, null, /*#__PURE__*/_react.default.createElement(_.ActionPopover, {
+    onOpen: (0, _addonActions.action)("popover opened"),
+    onClose: (0, _addonActions.action)("popover closed")
+  }, /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    disabled: true,
+    icon: "graph",
+    submenu: submenu,
+    onClick: (0, _addonActions.action)("email")
+  }, "Business"), /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    icon: "email",
+    onClick: (0, _addonActions.action)("email")
+  }, "Email Invoice"), /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    icon: "print",
+    onClick: (0, _addonActions.action)("print"),
+    submenu: submenu
+  }, "Print Invoice"), /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    icon: "pdf",
+    submenu: submenu,
+    onClick: (0, _addonActions.action)("pdf")
+  }, "Download PDF"), /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    icon: "csv",
+    onClick: (0, _addonActions.action)("csv")
+  }, "Download CSV"), /*#__PURE__*/_react.default.createElement(_.ActionPopoverDivider, null), /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    icon: "delete",
+    onClick: (0, _addonActions.action)("delete")
+  }, "Delete")))), /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableRow, null, /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableCell, null, "Jane"), /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableCell, null, "Smith"), /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableCell, null, /*#__PURE__*/_react.default.createElement(_.ActionPopover, null, /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    icon: "csv",
+    onClick: (0, _addonActions.action)("csv")
+  }, "Download CSV")))), /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableRow, null, /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableCell, null, "Bob"), /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableCell, null, "Jones"), /*#__PURE__*/_react.default.createElement(_flatTable.FlatTableCell, null, /*#__PURE__*/_react.default.createElement(_.ActionPopover, null, /*#__PURE__*/_react.default.createElement(_.ActionPopoverItem, {
+    icon: "csv",
+    submenu: submenuWithIcons,
+    onClick: (0, _addonActions.action)("csv")
+  }, "Download CSV")))))));
+};
+
+exports.Default = Default;

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

@@ -3,20 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ActionPopover = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _invariant = _interopRequireDefault(require("invariant"));
 
 var _actionPopover = require("./action-popover.style");
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
-var _utils = require("../../style/utils");
-
 var _popover = _interopRequireDefault(require("../../__internal__/popover"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -39,28 +37,44 @@ 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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.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 = (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)();
-  const menu = (0, _react.useRef)();
+  const buttonRef = (0, _react.useRef)(null);
+  const menu = (0, _react.useRef)(null);
   const itemCount = (0, _react.useMemo)(() => {
-    return _react.default.Children.toArray(children).filter(child => child.type === _actionPopoverItem.default).length;
+    return _react.default.Children.toArray(children).filter(child => {
+      return /*#__PURE__*/_react.default.isValidElement(child) && child.type === _actionPopoverItem.default;
+    }).length;
+  }, [children]);
+  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, `ActionPopover only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`);
   const mappedPlacement = (0, _react.useMemo)(() => {
     if (placement === "top" && !rightAlignMenu) {
       return "top-end";
@@ -87,6 +101,12 @@ const ActionPopover = ({
 
     setOpenState(value);
   }, [isOpen, onOpen, onClose]);
+  const focusButton = (0, _react.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 = (0, _react.useCallback)(e => {
     e.stopPropagation();
     const isOpening = !isOpen;
@@ -94,9 +114,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 = (0, _react.useCallback)(e => {
@@ -112,7 +132,6 @@ const ActionPopover = ({
       setOpen(true);
     }
   }, [itemCount, setOpen]);
-  const focusButton = (0, _react.useCallback)(() => buttonRef.current.querySelector("[data-component='action-popover-button']").focus(), []);
   (0, _react.useEffect)(() => {
     const handler = ({
       target
@@ -120,7 +139,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);
       }
     };
@@ -139,13 +161,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}`
         }
       });
     }
@@ -156,8 +178,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.default.createElement(_actionPopover.ButtonIcon, {
       type: "ellipsis_vertical"
     }));
@@ -200,57 +222,170 @@ const ActionPopover = ({
   }, menuProps), children))));
 };
 
-ActionPopover.propTypes = { ...marginPropTypes,
-
-  /** Unique ID */
-  id: _propTypes.default.string,
-
-  /** Callback to be called on menu open */
-  onOpen: _propTypes.default.func,
-
-  /** Callback to be called on menu close */
-  onClose: _propTypes.default.func,
-
-  /** Boolean to control whether menu should align to right */
-  rightAlignMenu: _propTypes.default.bool,
-
-  /** Children for popover component */
-  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;
-  },
-
-  /** Render a custom menu button to override default ellipsis icon */
-  renderButton: _propTypes.default.func,
-
-  /** Horizontal alignment of menu items content */
-  horizontalAlignment: _propTypes.default.oneOf(["left", "right"]),
-
-  /** Set whether the menu should open above or below the button */
-  placement: _propTypes.default.oneOf(["top", "bottom"])
-};
-
-const onOpen = () => {};
-
-const onClose = () => {};
-
-ActionPopover.defaultProps = {
-  id: null,
-  onOpen,
-  onClose,
-  horizontalAlignment: "left"
+exports.ActionPopover = ActionPopover;
+ActionPopover.propTypes = {
+  "children": _propTypes.default.node,
+  "horizontalAlignment": _propTypes.default.oneOf(["left", "right"]),
+  "id": _propTypes.default.string,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "onClose": _propTypes.default.func,
+  "onOpen": _propTypes.default.func,
+  "placement": _propTypes.default.oneOf(["bottom", "top"]),
+  "renderButton": _propTypes.default.func,
+  "rightAlignMenu": _propTypes.default.bool
 };
 var _default = ActionPopover;
 exports.default = _default;

package/lib/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, };