carbon-react 114.5.1 → 114.6.0

package/esm/components/i18n-provider/i18n-provider.component.js

@@ -114,6 +114,11 @@ I18nProvider.propTypes = {
       "ariaLabels": PropTypes.shape({
         "close": PropTypes.func.isRequired
       }).isRequired
+    }),
+    "verticalMenuFullScreen": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
     })
   })
 };

package/esm/components/vertical-menu/index.d.ts

@@ -0,0 +1,8 @@
+export { default as VerticalMenu } from "./vertical-menu.component";
+export type { VerticalMenuProps } from "./vertical-menu.component";
+export { default as VerticalMenuItem } from "./vertical-menu-item.component";
+export type { VerticalMenuItemProps } from "./vertical-menu-item.component";
+export { default as VerticalMenuFullScreen } from "./vertical-menu-full-screen.component";
+export type { VerticalMenuFullScreenProps } from "./vertical-menu-full-screen.component";
+export { default as VerticalMenuTrigger } from "./vertical-menu-trigger.component";
+export type { VerticalMenuTriggerProps } from "./vertical-menu-trigger.component";

package/esm/components/vertical-menu/index.js

@@ -0,0 +1,4 @@
+export { default as VerticalMenu } from "./vertical-menu.component";
+export { default as VerticalMenuItem } from "./vertical-menu-item.component";
+export { default as VerticalMenuFullScreen } from "./vertical-menu-full-screen.component";
+export { default as VerticalMenuTrigger } from "./vertical-menu-trigger.component";

package/esm/components/vertical-menu/vertical-menu-full-screen.component.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface VerticalMenuFullScreenProps extends TagProps {
+    /** An aria-label attribute for the menu */
+    "aria-label"?: string;
+    /** An aria-labelledby attribute for the menu */
+    "aria-labelledby"?: string;
+    /**  Content of the menu - VerticalMenuItem */
+    children: React.ReactNode;
+    /** Whether the menu is open or not */
+    isOpen: boolean;
+    /** A callback to be called when the close icon is clicked or enter is pressed when focused */
+    onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => JSX.Element | null;
+export default VerticalMenuFullScreen;

package/esm/components/vertical-menu/vertical-menu-full-screen.component.js

@@ -0,0 +1,79 @@
+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); }
+
+import React, { useCallback, useRef } from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
+import useLocale from "../../hooks/__internal__/useLocale";
+import Portal from "../portal";
+import FocusTrap from "../../__internal__/focus-trap/focus-trap.component";
+import IconButton from "../icon-button";
+import Icon from "../icon";
+import Box from "../box";
+import { StyledList, StyledVerticalMenuFullScreen } from "./vertical-menu.style";
+import VerticalMenuFullScreenContext from "./vertical-menu-full-screen.context";
+import Events from "../../__internal__/utils/helpers/events/events";
+
+const VerticalMenuFullScreen = ({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  children,
+  isOpen,
+  onClose,
+  ...rest
+}) => {
+  const l = useLocale();
+  const menuWrapperRef = useRef(null);
+  const handleKeyDown = useCallback(ev => {
+    // istanbul ignore else
+    if (Events.isEscKey(ev)) {
+      onClose(ev);
+    }
+  }, [onClose]); // TODO remove this as part of FE-5650
+
+  if (!isOpen) return null;
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
+    isOpen: isOpen,
+    wrapperRef: menuWrapperRef
+  }, /*#__PURE__*/React.createElement(StyledVerticalMenuFullScreen, _extends({
+    ref: menuWrapperRef,
+    scrollVariant: "light",
+    as: "nav",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    onKeyDown: handleKeyDown
+  }, tagComponent("vertical-menu-full-screen", rest)), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    justifyContent: "flex-end",
+    height: "60px",
+    alignItems: "flex-start",
+    px: "20px",
+    pt: "20px",
+    boxSizing: "border-box"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    "aria-label": l.verticalMenuFullScreen.ariaLabels.close(),
+    onAction: onClose,
+    "data-element": "close"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "close",
+    color: "var(--colorsComponentsLeftnavWinterStandardContent)",
+    bgSize: "small",
+    fontSize: "medium"
+  }))), /*#__PURE__*/React.createElement(VerticalMenuFullScreenContext.Provider, {
+    value: {
+      isFullScreen: true
+    }
+  }, /*#__PURE__*/React.createElement(StyledList, null, children)))));
+};
+
+VerticalMenuFullScreen.propTypes = {
+  "aria-label": PropTypes.string,
+  "aria-labelledby": PropTypes.string,
+  "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "isOpen": PropTypes.bool.isRequired,
+  "onClose": PropTypes.func.isRequired
+};
+export { VerticalMenuFullScreen };
+export default VerticalMenuFullScreen;

package/esm/components/vertical-menu/vertical-menu-full-screen.context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const VerticalMenuFullScreenContext: React.Context<{
+    isFullScreen: boolean;
+}>;
+export default VerticalMenuFullScreenContext;

package/esm/components/vertical-menu/vertical-menu-full-screen.context.js

@@ -0,0 +1,5 @@
+import React from "react";
+const VerticalMenuFullScreenContext = /*#__PURE__*/React.createContext({
+  isFullScreen: false
+});
+export default VerticalMenuFullScreenContext;

package/esm/components/vertical-menu/vertical-menu-item.component.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import { IconType } from "../icon";
+export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, TagProps {
+    /** Children of the menu item - another level of VerticalMenuItems */
+    children?: React.ReactNode;
+    /** Title of the menu item */
+    title: string;
+    /** Adornment of the menu item meant to be rendered on the right side */
+    adornment?: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
+    /** Icon meant to be rendered on the left side */
+    iconType?: IconType;
+    /** Whether the menu item is active or not */
+    active?: boolean | ((isOpen: boolean) => boolean);
+    /** Height of the menu item */
+    height?: string;
+    /**  Href, when passed the menu item will be rendered as an anchor tag */
+    href?: string;
+    /** Optional component to render instead of the default div, useful for rendering router link components */
+    component?: T;
+}
+declare type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
+export declare const VerticalMenuItem: <T>({ title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType<any> ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps<React.ElementType<any>>) => JSX.Element;
+export default VerticalMenuItem;

package/esm/components/vertical-menu/vertical-menu-item.component.js

@@ -0,0 +1,267 @@
+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); }
+
+import React, { useState, useContext } from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
+import { filterStyledSystemPaddingProps } from "../../style/utils";
+import VerticalMenuFullScreenContext from "./vertical-menu-full-screen.context";
+import { StyledVerticalMenuItem, StyledTitle, StyledAdornment, StyledList, StyledChevronIcon, StyledTitleIcon } from "./vertical-menu.style";
+const MenuItemContext = /*#__PURE__*/React.createContext({
+  level: 0
+});
+
+const VerticalMenuItem = ({
+  title,
+  iconType,
+  adornment,
+  children,
+  component,
+  active,
+  height = "56px",
+  href,
+  ...rest
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOnClick = () => {
+    setIsOpen(state => !state);
+  };
+
+  const {
+    level
+  } = useContext(MenuItemContext);
+  const {
+    isFullScreen
+  } = useContext(VerticalMenuFullScreenContext);
+
+  const renderAdornment = () => typeof adornment === "function" ? adornment(isOpen) : adornment;
+
+  const shouldDisplayActiveState = typeof active === "function" ? active(isOpen) : active;
+  let itemProps = {};
+
+  if (href) {
+    itemProps = {
+      as: "a",
+      href
+    };
+  }
+
+  if (component) {
+    itemProps = {
+      as: component,
+      href,
+      tabIndex: 0,
+      ...rest
+    };
+  }
+
+  if (children) {
+    itemProps = {
+      as: "button",
+      type: "button",
+      "aria-expanded": isOpen,
+      onClick: handleOnClick
+    };
+  }
+
+  const paddingX = `calc(var(--spacing500) + (${level} * var(--spacing400)))`;
+  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledVerticalMenuItem, _extends({
+    height: height,
+    px: paddingX,
+    py: 2,
+    active: shouldDisplayActiveState
+  }, itemProps, filterStyledSystemPaddingProps(rest), tagComponent("vertical-menu-item", rest)), iconType && /*#__PURE__*/React.createElement(StyledTitleIcon, {
+    type: iconType
+  }), /*#__PURE__*/React.createElement(StyledTitle, null, title), adornment && /*#__PURE__*/React.createElement(StyledAdornment, null, renderAdornment()), children && !isFullScreen && /*#__PURE__*/React.createElement(StyledChevronIcon, {
+    type: isOpen ? "chevron_up_thick" : "chevron_down_thick"
+  })), (isOpen || isFullScreen) && /*#__PURE__*/React.createElement(MenuItemContext.Provider, {
+    value: {
+      level: level + 1
+    }
+  }, /*#__PURE__*/React.createElement(StyledList, null, children)));
+};
+
+VerticalMenuItem.propTypes = {
+  "active": PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  "adornment": PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@iterator": PropTypes.func.isRequired
+  }), PropTypes.string, PropTypes.bool]),
+  "children": PropTypes.node,
+  "component": PropTypes.oneOfType([PropTypes.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]), PropTypes.func, PropTypes.shape({
+    "childContextTypes": PropTypes.object,
+    "contextType": PropTypes.shape({
+      "Consumer": PropTypes.func.isRequired,
+      "displayName": PropTypes.string,
+      "Provider": PropTypes.func.isRequired
+    }),
+    "contextTypes": PropTypes.object,
+    "defaultProps": PropTypes.object,
+    "displayName": PropTypes.string,
+    "getDerivedStateFromError": PropTypes.func,
+    "getDerivedStateFromProps": PropTypes.func,
+    "propTypes": PropTypes.object
+  })]),
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "height": PropTypes.string,
+  "href": PropTypes.string,
+  "iconType": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "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", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "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", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "p": 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]),
+  "padding": 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]),
+  "paddingBottom": 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]),
+  "paddingLeft": 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]),
+  "paddingRight": 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]),
+  "paddingTop": 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]),
+  "paddingX": 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]),
+  "paddingY": 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]),
+  "pb": 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]),
+  "pl": 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]),
+  "pr": 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]),
+  "pt": 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]),
+  "px": 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]),
+  "py": 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]),
+  "title": PropTypes.string.isRequired
+};
+export { VerticalMenuItem };
+export default VerticalMenuItem;

package/esm/components/vertical-menu/vertical-menu-trigger.component.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface VerticalMenuTriggerProps extends PaddingProps, TagProps {
+    /** Height of the menu trigger */
+    height?: string;
+    /** Title of the menu trigger */
+    children: string;
+    /** Callback passed to the menu trigger */
+    onClick: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const VerticalMenuTrigger: ({ height, p, onClick, children, ...rest }: VerticalMenuTriggerProps) => JSX.Element;
+export default VerticalMenuTrigger;

package/esm/components/vertical-menu/vertical-menu-trigger.component.js

@@ -0,0 +1,189 @@
+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); }
+
+import React from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
+import { filterStyledSystemPaddingProps } from "../../style/utils";
+import { StyledVerticalMenuItem, StyledTitle } from "./vertical-menu.style";
+
+const VerticalMenuTrigger = ({
+  height = "40px",
+  p = 2,
+  onClick,
+  children,
+  ...rest
+}) => {
+  const paddingProps = filterStyledSystemPaddingProps(rest);
+  return /*#__PURE__*/React.createElement(StyledVerticalMenuItem, _extends({
+    onClick: onClick,
+    as: "button",
+    height: height,
+    p: p,
+    tabIndex: 0
+  }, paddingProps, tagComponent("vertical-menu-trigger", rest)), /*#__PURE__*/React.createElement(StyledTitle, null, children));
+};
+
+VerticalMenuTrigger.propTypes = {
+  "children": PropTypes.string.isRequired,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "height": PropTypes.string,
+  "onClick": PropTypes.func.isRequired,
+  "p": 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]),
+  "padding": 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]),
+  "paddingBottom": 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]),
+  "paddingLeft": 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]),
+  "paddingRight": 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]),
+  "paddingTop": 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]),
+  "paddingX": 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]),
+  "paddingY": 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]),
+  "pb": 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]),
+  "pl": 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]),
+  "pr": 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]),
+  "pt": 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]),
+  "px": 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]),
+  "py": 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])
+};
+export { VerticalMenuTrigger };
+export default VerticalMenuTrigger;