@vention/machine-ui 3.27.0

package/src/lib/components/vention-menu/vention-menu-item/vention-menu-header.tsx

@@ -0,0 +1,30 @@
+import { tss } from "tss-react/mui"
+import { getPaddingForMenuHeaderSize } from "../vention-menu-styling-helpers"
+import { VentionMenuChildItem } from "./vention-menu-child-item"
+
+export interface VentionMenuHeaderProps {
+  labelText: string
+  size: "small" | "medium" | "large"
+}
+
+export const VentionMenuHeader = (props: VentionMenuHeaderProps) => {
+  const { labelText, size } = props
+  const { classes } = useStyles({ size })
+
+  return (
+    <div className={classes.root}>
+      <VentionMenuChildItem disabled labelText={labelText} />
+    </div>
+  )
+}
+
+type StylingParams = Pick<VentionMenuHeaderProps, "size">
+const useStyles = tss.withParams<StylingParams>().create(({ size }) => {
+  const stylingProperties = getPaddingForMenuHeaderSize(size)
+
+  return {
+    root: {
+      padding: stylingProperties,
+    },
+  }
+})

package/src/lib/components/vention-menu/vention-menu-item/vention-menu-item.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from "react"
+
+import { VentionMenuParentItem } from "./vention-menu-parent-item"
+import { VentionMenuChildItem } from "./vention-menu-child-item"
+
+interface BaseProps {
+  onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void
+  disabled?: boolean
+  leftElement?: ReactNode
+  shortcutKey?: string
+  closeMenuOnClick?: boolean
+  customID?: string
+  subMenuItems?: ReactNode
+  focused?: boolean
+  "data-testid"?: string
+}
+export type VentionMenuItemProps =
+  | ({ labelText: string; children?: never } & BaseProps)
+  | ({ children: ReactNode; labelText?: never } & BaseProps)
+
+export const VentionMenuItem = (props: VentionMenuItemProps) => {
+  const { subMenuItems, ...childItemProps } = props
+
+  return subMenuItems !== undefined ? <VentionMenuParentItem {...props} /> : <VentionMenuChildItem {...childItemProps} />
+}

package/src/lib/components/vention-menu/vention-menu-item/vention-menu-parent-item.tsx

@@ -0,0 +1,84 @@
+import { useContext, useRef, useState } from "react"
+import { VentionMenuItemProps } from "./vention-menu-item"
+import { Popover } from "@mui/material"
+import { VentionMenuList } from "../vention-menu-list"
+import { VentionMenuChildItem } from "./vention-menu-child-item"
+import { tss } from "tss-react/mui"
+import { getStylingPropertiesGivenProps } from "../vention-menu-styling-helpers"
+import { VentionMenuContext } from "../vention-menu-context"
+import { VentionMenuProps } from "../vention-menu"
+
+/**
+ * This Component will render a menu item with its sub items as a nested VentionMenuList that is shown on hover.
+ *
+ * Any VentionMenuItem that has its `subMenuItems` prop defined will render this component instead of a `VentionMenuChildItem` directly.
+ */
+export const VentionMenuParentItem = ({ subMenuItems, ...props }: VentionMenuItemProps) => {
+  const menuItemRef = useRef<HTMLLIElement | null>(null)
+  const { size } = useContext(VentionMenuContext)
+  const { classes } = useStyles({ size })
+  const [open, setOpen] = useState(false)
+
+  const handleMouseEnter = () => {
+    if (!props.disabled) {
+      setOpen(true)
+    }
+  }
+
+  const handleMouseLeave = () => {
+    setOpen(false)
+  }
+
+  return (
+    <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      <VentionMenuChildItem
+        ref={menuItemRef}
+        closeMenuOnClick={false} // defaults to false for a parent item, but can be overridden by the props
+        {...props}
+        hasSubMenu={true}
+        focused={open}
+      />
+
+      <Popover
+        // Set pointer events to 'none' to prevent the invisible Popover div
+        // from capturing events for clicks and hovers
+        sx={{ pointerEvents: "none" }}
+        anchorEl={menuItemRef.current}
+        anchorOrigin={{
+          horizontal: "right",
+          vertical: "top",
+        }}
+        transformOrigin={{
+          horizontal: "left",
+          vertical: 8, // it is what it is
+        }}
+        slotProps={{
+          paper: {
+            classes: { root: classes.submenuPaper },
+          },
+        }}
+        open={open}
+        disableAutoFocus
+        disableScrollLock
+        disableRestoreFocus
+      >
+        <VentionMenuList data-testid="menuItemSubMenu" disableBoxShadow>
+          <div style={{ pointerEvents: "auto" }}>{subMenuItems}</div>
+        </VentionMenuList>
+      </Popover>
+    </div>
+  )
+}
+
+type StylingParams = Pick<VentionMenuProps, "size">
+const useStyles = tss.withParams<StylingParams>().create(({ size, theme }) => {
+  const stylingProperties = getStylingPropertiesGivenProps(size, theme)
+
+  return {
+    submenuPaper: {
+      backgroundColor: "transparent",
+      boxShadow: theme.shadows[6],
+      marginLeft: stylingProperties.submenuOffset,
+    },
+  }
+})

package/src/lib/components/vention-menu/vention-menu-list.tsx

@@ -0,0 +1,66 @@
+import { VentionMenuItem, VentionMenuItemProps } from "./vention-menu-item/vention-menu-item"
+import { MenuList } from "@mui/material"
+import { tss } from "tss-react/mui"
+import { PropsWithChildren, useContext } from "react"
+import { VentionMenuProps } from "./vention-menu"
+import { getStylingPropertiesGivenProps } from "./vention-menu-styling-helpers"
+import { VentionMenuContext } from "./vention-menu-context"
+
+export type VentionMenuListProps = PropsWithChildren<{
+  /**
+   * Consider using composition
+   * @example ```jsx
+   * <VentionMenu {...menuProps}>
+   *   <VentionMenu.Item labelText="Item 1" />
+   *   <VentionMenu.Item labelText="Item 2" />
+   * </VentionMenu>
+   * ```
+   */
+  menuOptionsInfo?: VentionMenuItemProps[]
+  "data-testid"?: string
+  disableBoxShadow?: boolean
+}>
+
+export const VentionMenuList = ({
+  menuOptionsInfo,
+  "data-testid": dataTestId = "menuRootDiv",
+  children,
+  disableBoxShadow = false,
+}: VentionMenuListProps) => {
+  const { size, menuWidth } = useContext(VentionMenuContext)
+  const { classes } = useStyles({ size, menuWidth, disableBoxShadow })
+
+  const renderMenuItem = (ventionMenuItemProps: VentionMenuItemProps, index: number) => {
+    return <VentionMenuItem key={index} {...ventionMenuItemProps} />
+  }
+
+  return (
+    <MenuList data-testid={dataTestId} className={classes.root}>
+      {menuOptionsInfo?.map(renderMenuItem) ?? children}
+    </MenuList>
+  )
+}
+
+const useStyles = tss
+  .withParams<Pick<VentionMenuProps, "size" | "menuWidth" | "disableBoxShadow">>()
+  .create(({ size, menuWidth, disableBoxShadow, theme }) => {
+    const stylingProperties = getStylingPropertiesGivenProps(size, theme)
+
+    return {
+      root: {
+        backgroundColor: theme.palette.common.white,
+        borderRadius: "4px",
+        zIndex: theme.zIndex.modal,
+        gap: stylingProperties.gap,
+        border: `1px solid ${theme.palette.border.main}`,
+        paddingTop: stylingProperties.menuPadding,
+        paddingBottom: stylingProperties.menuPadding,
+        textTransform: "none",
+        boxShadow: disableBoxShadow ? undefined : theme.shadows[6],
+        display: "flex",
+        flexDirection: "column",
+        width: menuWidth,
+        boxSizing: "border-box",
+      },
+    }
+  })

package/src/lib/components/vention-menu/vention-menu-styling-helpers.ts

@@ -0,0 +1,151 @@
+import { Theme } from "@mui/material"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+export type MenuSize = StrictExtract<Sizes, "small" | "medium" | "large" | "x-large">
+export type MenuHeaderSize = StrictExtract<Sizes, "small" | "medium" | "large">
+export type MenuDividerSize = StrictExtract<Sizes, "small" | "medium" | "large">
+
+export interface StylingProperties {
+  borderRadius: string
+  gap: string
+  iconHeight: string
+  iconSize: number
+  itemHeight: string
+  itemMargin: string
+  itemPadding: string
+  menuPadding: string
+  textVariant: string
+  submenuOffset: string
+}
+
+export function getStylingPropertiesGivenProps(size: MenuSize, theme: Theme): StylingProperties {
+  const margin = getMarginGivenSize(size, theme)
+
+  return {
+    borderRadius: getItemBorderRadiusGivenSize(size),
+    gap: getSpacingGivenSize(size, theme),
+    iconHeight: getIconHeightGivenSize(size),
+    iconSize: getIconSizeGivenMenuSize(size),
+    itemHeight: getItemHeightGivenSize(size),
+    itemMargin: margin,
+    itemPadding: getItemPaddingGivenSize(size, theme),
+    menuPadding: margin,
+    textVariant: getTextVariantGivenSize(size),
+    submenuOffset: getSubmenuOffsetGivenSize(size),
+  }
+}
+
+export function getPaddingForMenuHeaderSize(size: MenuHeaderSize): string {
+  const padding: Record<MenuHeaderSize, string> = {
+    small: "6px 8px 2px 0px",
+    medium: "10px 8px 6px 0px",
+    large: "16px 12px 8px 0px",
+  }
+
+  return padding[size]
+}
+
+export function getPaddingForMenuDividerSize(size: MenuDividerSize): string {
+  const padding: Record<MenuDividerSize, string> = {
+    small: "8px 12px 7px 12px",
+    medium: "12px 12px 11px 12px",
+    large: "16px 12px 15px 12px",
+  }
+
+  return padding[size]
+}
+
+export function getIconSizeGivenMenuSize(size: MenuSize) {
+  return iconSize[size]
+}
+
+const borderRadius: Record<MenuSize, string> = {
+  small: "2px",
+  medium: "4px",
+  large: "4px",
+  "x-large": "4px",
+}
+function getItemBorderRadiusGivenSize(size: MenuSize) {
+  return borderRadius[size]
+}
+
+function getSpacingGivenSize(size: MenuSize, theme: Theme): string {
+  const spacing: Record<MenuSize, string> = {
+    small: theme.spacing(1),
+    medium: theme.spacing(0),
+    large: theme.spacing(0),
+    "x-large": theme.spacing(0),
+  }
+
+  return spacing[size]
+}
+
+function getMarginGivenSize(size: MenuSize, theme: Theme): string {
+  const margin: Record<MenuSize, string> = {
+    small: theme.spacing(2),
+    medium: theme.spacing(3),
+    large: theme.spacing(3),
+    "x-large": theme.spacing(4),
+  }
+
+  return margin[size]
+}
+
+function getItemPaddingGivenSize(size: MenuSize, theme: Theme) {
+  const padding: Record<MenuSize, string> = {
+    small: theme.spacing(1),
+    medium: theme.spacing(1),
+    large: theme.spacing(2),
+    "x-large": theme.spacing(2),
+  }
+
+  return padding[size]
+}
+
+const itemHeight: Record<MenuSize, string> = {
+  small: "24px",
+  medium: "32px",
+  large: "40px",
+  "x-large": "56px",
+}
+function getItemHeightGivenSize(size: MenuSize) {
+  return itemHeight[size]
+}
+
+const textVariant: Record<MenuSize, "uiText12Regular" | "uiText14Regular" | "paragraph18Regular"> = {
+  small: "uiText12Regular",
+  medium: "uiText14Regular",
+  large: "uiText14Regular",
+  "x-large": "paragraph18Regular",
+}
+export function getTextVariantGivenSize(size: MenuSize) {
+  return textVariant[size]
+}
+
+const iconHeight: Record<MenuSize, string> = {
+  small: "16px",
+  medium: "24px",
+  large: "24px",
+  "x-large": "32px",
+}
+function getIconHeightGivenSize(size: MenuSize) {
+  return iconHeight[size]
+}
+
+const iconSize: Record<MenuSize, number> = {
+  small: 16,
+  medium: 18,
+  large: 18,
+  "x-large": 22,
+}
+
+const subMenuOffset: Record<MenuSize, string> = {
+  small: "12px",
+  medium: "16px",
+  large: "16px",
+  "x-large": "24px",
+}
+
+function getSubmenuOffsetGivenSize(size: MenuSize): string {
+  return subMenuOffset[size]
+}

package/src/lib/components/vention-menu/vention-menu.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Icon12Hours, Icon360View, IconAddressBook, IconCommand } from "@tabler/icons-react"
+import React, { ComponentType } from "react"
+
+import { VentionMenu, VentionMenuProps } from "./vention-menu"
+import styled from "styled-components"
+
+const Container = styled.div`
+  border: 1px solid lightgrey;
+  height: 400px;
+`
+
+const VentionMenuStory = (props: VentionMenuProps) => {
+  const [showMenu, setShowMenu] = React.useState(props.showMenu)
+
+  const handleRightClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
+    setShowMenu(true)
+    event.preventDefault()
+  }
+
+  const handleItemClick = () => console.log("Menu option clicked!")
+
+  const nestedSubMenuItems = (
+    <>
+      <VentionMenu.Item onClick={handleItemClick} labelText="Sub Sub Option 1" />
+      <VentionMenu.Item onClick={handleItemClick} labelText="Sub Sub Option 2" />
+      <VentionMenu.Item onClick={handleItemClick} labelText="Sub Sub Option 3" />
+      <VentionMenu.Item onClick={handleItemClick} labelText="Sub Sub Option 4" />
+    </>
+  )
+
+  const subMenuItems = (
+    <>
+      <VentionMenu.Item onClick={handleItemClick} labelText="Sub Option 1" />
+      <VentionMenu.Item onClick={handleItemClick} labelText="Sub Option 2" />
+      <VentionMenu.Item onClick={handleItemClick} labelText="Sub Option 3" />
+      <VentionMenu.Item onClick={handleItemClick} labelText="Sub Option 4" subMenuItems={nestedSubMenuItems} />
+      <VentionMenu.Item onClick={handleItemClick} labelText="Sub Option 5" />
+      <VentionMenu.Item onClick={handleItemClick} labelText="Sub Option 6" />
+    </>
+  )
+
+  return (
+    <>
+      <p>
+        <b>Left</b> click anywhere <b>outside</b> the menu to <b>close</b> it
+      </p>
+      <p>
+        <b>Right</b> click <b>inside</b> the box to <b>open</b> the menu
+      </p>
+      <Container onContextMenu={handleRightClick}>
+        <VentionMenu setShowMenu={setShowMenu} {...props} showMenu={showMenu}>
+          <VentionMenu.Header labelText="Small Header" size="small" />
+          <VentionMenu.Item labelText="Option 1" onClick={handleItemClick} leftElement={<Icon12Hours />} />
+          <VentionMenu.Item
+            labelText="Don't close menu on click"
+            onClick={handleItemClick}
+            leftElement={<Icon360View />}
+            closeMenuOnClick={false}
+          />
+          <VentionMenu.Divider size="small" />
+          <VentionMenu.Header labelText="Medium Header" size="small" />
+          <VentionMenu.Item labelText="Option 3" onClick={handleItemClick} leftElement={<IconCommand />} shortcutKey="K" />
+          <VentionMenu.Item labelText="Option 4" onClick={handleItemClick} leftElement={<IconAddressBook />} subMenuItems={subMenuItems} />
+          <VentionMenu.Divider size="small" />
+          <VentionMenu.Header labelText="Large Header" size="large" />
+          <VentionMenu.Item labelText="Option 5" onClick={handleItemClick} leftElement={<IconAddressBook />} subMenuItems={subMenuItems} />
+          <VentionMenu.Item labelText="Option 6" onClick={handleItemClick} leftElement={<IconAddressBook />} subMenuItems={subMenuItems} />
+          <VentionMenu.Item>Option 7 as children</VentionMenu.Item>
+          <VentionMenu.Item leftElement={<IconCommand />}></VentionMenu.Item>
+        </VentionMenu>
+      </Container>
+    </>
+  )
+}
+
+const meta: Meta<typeof VentionMenu> = {
+  component: VentionMenu,
+  subcomponents: { "VentionMenu.Item": VentionMenu.Item as ComponentType },
+  title: "Components/VentionMenu",
+  render: VentionMenuStory,
+}
+export default meta
+type Story = StoryObj<typeof VentionMenu>
+
+export const PrimarySmall: Story = {
+  args: {
+    size: "small",
+    showMenu: true,
+  },
+}
+
+export const PrimaryMedium: Story = {
+  args: {
+    size: "medium",
+    showMenu: true,
+  },
+}
+
+export const PrimaryLarge: Story = {
+  args: {
+    size: "large",
+    showMenu: true,
+  },
+}
+
+export const PrimaryXLarge: Story = {
+  args: {
+    size: "x-large",
+    showMenu: true,
+  },
+}
+
+export const LegacyOptionsInArgs: Story = {
+  args: {
+    menuOptionsInfo: [{ labelText: "Legacy Option 1" }, { labelText: "Legacy Option 2" }, { labelText: "Legacy Option 3" }],
+    showMenu: true,
+  },
+}