@vention/machine-ui 3.36.0 → 3.37.1

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Typography, Button, Stack, Box as Box$1, Grid, IconButton, Modal, linearProgressClasses, LinearProgress, InputAdornment, TextField, Radio, FormControlLabel, FormControl, Select, MenuItem, FormHelperText, ButtonGroup, Paper, Card, CardMedia, CardContent, ListItemIcon, ListItemText, Popover, MenuList, ClickAwayListener, useTheme as useTheme$1, Drawer, Tooltip, Checkbox } from '@mui/material';
-import { IconCheck, IconAlertTriangleFilled, IconAlertTriangle, IconExclamationMark, IconExternalLink, IconX, IconInfoCircleFilled, IconCircleCheckFilled, IconChevronDown, IconInfoCircle, IconInfoSmall, IconMinus, IconPlus, IconLoader2, IconCaretRightFilled, IconChevronsRight, IconChevronsLeft, IconChevronRight } from '@tabler/icons-react';
-import { forwardRef, useState, cloneElement, lazy, memo, Suspense, useMemo, useRef, useCallback, useEffect, createContext, useContext, useImperativeHandle, Children, Fragment as Fragment$1, useReducer } from 'react';
+import { Typography, Button, Stack, Box as Box$1, Grid, IconButton, ClickAwayListener, Modal, linearProgressClasses, LinearProgress, InputAdornment, TextField, Radio, FormControlLabel, FormControl, Select, MenuItem, FormHelperText, ButtonGroup, Paper, Card, CardMedia, CardContent, ListItemIcon, ListItemText, Popover, MenuList, useTheme as useTheme$1, Drawer, Tooltip, Checkbox } from '@mui/material';
+import { IconCheck, IconAlertTriangleFilled, IconAlertTriangle, IconExclamationMark, IconExternalLink, IconX, IconInfoCircleFilled, IconCircleCheckFilled, IconChevronUp, IconChevronDown, IconInfoCircle, IconInfoSmall, IconMinus, IconPlus, IconLoader2, IconCaretRightFilled, IconChevronsRight, IconChevronsLeft, IconChevronRight } from '@tabler/icons-react';
+import { forwardRef, useState, cloneElement, useRef, useCallback, lazy, memo, Suspense, useMemo, useEffect, createContext, useContext, useImperativeHandle, Children, Fragment as Fragment$1, useReducer } from 'react';
 import { tss } from 'tss-react/mui';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -3365,55 +3365,97 @@ const useStyles$B = tss.withParams().create(({
   };
 });
 
+const menuTestIds = {
+  menuRootDiv: "menuRootDiv"
+};
 const VentionDropdownButton = _a => {
   var {
       variant = "simple",
       size = "small",
       className,
       disabled = false,
-      onClick,
+      onClose,
+      onOpen,
       icon,
       badgeText,
       label,
       stroke = 1,
-      contentColor
+      contentColor,
+      children,
+      menuPlacement = "bottom",
+      menuAlignment = "start",
+      onClick
     } = _a,
-    other = __rest(_a, ["variant", "size", "className", "disabled", "onClick", "icon", "badgeText", "label", "stroke", "contentColor"]);
+    other = __rest(_a, ["variant", "size", "className", "disabled", "onClose", "onOpen", "icon", "badgeText", "label", "stroke", "contentColor", "children", "menuPlacement", "menuAlignment", "onClick"]);
   const {
     classes,
     cx
   } = useStyles$A({
     variant,
     size,
-    contentColor
+    contentColor,
+    menuPlacement,
+    menuAlignment
+  });
+  const ref = useRef(null);
+  const [showDropdown, setShowDropdownInternal] = useState(false);
+  const Chevron = showDropdown ? IconChevronUp : IconChevronDown;
+  const handleClick = useCallback(event => {
+    if (!showDropdown) {
+      setShowDropdownInternal(true);
+      onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    } else {
+      setShowDropdownInternal(false);
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+  }, [showDropdown, onClose, onOpen, onClick]);
+  return jsx(ClickAwayListener, {
+    onClickAway: () => {
+      setShowDropdownInternal(false);
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    },
+    children: jsxs("div", {
+      style: {
+        display: "inline-block",
+        position: "relative"
+      },
+      children: [jsxs(IconButton, Object.assign({
+        ref: ref,
+        className: cx(classes.root, className),
+        disableRipple: true
+      }, other, {
+        disabled: disabled,
+        onClick: handleClick,
+        children: [icon, label && jsx(Typography, {
+          className: classes.label,
+          variant: LABEL_VARIANTS[size],
+          children: label
+        }), badgeText && jsx(VentionBadge, {
+          size: "small",
+          color: "slate",
+          text: badgeText,
+          variant: "filled",
+          className: classes.badge
+        }), jsx(Chevron, {
+          stroke: stroke,
+          size: 16,
+          color: contentColor
+        })]
+      })), showDropdown && jsx("div", {
+        "data-testid": menuTestIds.menuRootDiv,
+        className: classes.menuContainer,
+        children: children
+      })]
+    })
   });
-  return jsxs(IconButton, Object.assign({
-    className: cx(classes.root, className),
-    disableRipple: true,
-    disabled: disabled,
-    onClick: onClick
-  }, other, {
-    children: [icon, label && jsx(Typography, {
-      className: classes.label,
-      variant: LABEL_VARIANTS[size],
-      children: label
-    }), badgeText && jsx(VentionBadge, {
-      size: "small",
-      color: "slate",
-      text: badgeText,
-      variant: "filled",
-      className: classes.badge
-    }), jsx(IconChevronDown, {
-      stroke: stroke,
-      size: 16,
-      color: contentColor
-    })]
-  }));
 };
 const useStyles$A = tss.withParams().create(({
   variant,
   size,
   contentColor,
+  menuPlacement,
+  menuAlignment,
   theme
 }) => {
   const stylingProperties = getButtonStylingPropertiesGivenProps(variant, size, theme);
@@ -3424,9 +3466,8 @@ const useStyles$A = tss.withParams().create(({
       height: getButtonHeight(size, theme),
       padding: BUTTON_PADDINGS[size],
       backgroundColor: stylingProperties.backgroundColor,
-      borderColor: theme.palette.border.main,
       borderRadius: stylingProperties.borderRadius,
-      outline: stylingProperties.border,
+      border: stylingProperties.border,
       color,
       "&:hover": {
         backgroundColor: stylingProperties.backgroundColorOnHover
@@ -3446,9 +3487,51 @@ const useStyles$A = tss.withParams().create(({
     },
     badge: {
       maxWidth: "100px"
-    }
+    },
+    menuContainer: Object.assign({
+      position: "absolute",
+      zIndex: theme.zIndex.modal
+    }, getMenuPositionStyles(menuPlacement, menuAlignment))
   };
 });
+const getMenuPositionStyles = (placement, alignment) => {
+  const gap = `calc(100% + ${BUTTON_MENU_GAP})`;
+  const placementStyles = {
+    bottom: {
+      top: gap
+    },
+    top: {
+      bottom: gap
+    },
+    right: {
+      left: gap
+    },
+    left: {
+      right: gap
+    }
+  };
+  const isHorizontalPlacement = placement === "bottom" || placement === "top";
+  const alignmentStyles = {
+    start: isHorizontalPlacement ? {
+      left: 0
+    } : {
+      top: 0
+    },
+    middle: isHorizontalPlacement ? {
+      left: "50%",
+      transform: "translateX(-50%)"
+    } : {
+      top: "50%",
+      transform: "translateY(-50%)"
+    },
+    end: isHorizontalPlacement ? {
+      right: 0
+    } : {
+      bottom: 0
+    }
+  };
+  return Object.assign(Object.assign({}, placementStyles[placement]), alignmentStyles[alignment]);
+};
 const LABEL_VARIANTS = {
   small: "uiText12Medium",
   medium: "uiText14Medium",
@@ -3462,8 +3545,9 @@ const BUTTON_PADDINGS = {
 const BUTTON_GAPS = {
   small: "4px",
   medium: "6px",
-  large: "6px"
+  large: "8px"
 };
+const BUTTON_MENU_GAP = "3px";
 
 const defaultProps$6 = {
   size: "medium",
@@ -12103,4 +12187,4 @@ function calcMenuPosition(anchorRect, menuSize, placement, alignment) {
   }
 }
 
-export { COLORS, DEFAULT_VENTION_TREE_ITEM_HEIGHT, ElementTestIds, IconSizes, POSITIONED_MENU_OFFSET, VentionAlert, VentionBadge, VentionBanner, VentionButton, VentionCallout, VentionCheckbox, VentionCombobox, VentionCounter, VentionDraggable, VentionDrawer, VentionDropZone, VentionDropdownButton, VentionIcon, VentionIconButton, VentionLink, VentionMenu, VentionModal, VentionModalBanner, VentionModalBase, VentionPopover, VentionPositionedComponent, VentionProgressBar, VentionRadio, VentionRadioTile, VentionSelect, VentionSidebarItem, VentionSlider, VentionSpinner, VentionStatusDot, VentionStatusIndicator, VentionStepper, VentionSteps, VentionSwitch, VentionTabs, VentionTextInput, VentionTooltip, VentionTreeItem, VentionUploadFile, calcMenuPosition, getSpinnerColor, getVentionBadgeColors, machineUiHmiTheme, machineUiTheme, testIds, useBannerColorStyles, ventionModalBaseTestIds, ventionModalTestIds, ventionPopoverArrowSize };
+export { COLORS, DEFAULT_VENTION_TREE_ITEM_HEIGHT, ElementTestIds, IconSizes, POSITIONED_MENU_OFFSET, VentionAlert, VentionBadge, VentionBanner, VentionButton, VentionCallout, VentionCheckbox, VentionCombobox, VentionCounter, VentionDraggable, VentionDrawer, VentionDropZone, VentionDropdownButton, VentionIcon, VentionIconButton, VentionLink, VentionMenu, VentionModal, VentionModalBanner, VentionModalBase, VentionPopover, VentionPositionedComponent, VentionProgressBar, VentionRadio, VentionRadioTile, VentionSelect, VentionSidebarItem, VentionSlider, VentionSpinner, VentionStatusDot, VentionStatusIndicator, VentionStepper, VentionSteps, VentionSwitch, VentionTabs, VentionTextInput, VentionTooltip, VentionTreeItem, VentionUploadFile, calcMenuPosition, getSpinnerColor, getVentionBadgeColors, machineUiHmiTheme, machineUiTheme, menuTestIds, testIds, useBannerColorStyles, ventionModalBaseTestIds, ventionModalTestIds, ventionPopoverArrowSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "3.36.0",
+  "version": "3.37.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/lib/components/vention-button/vention-dropdown-button/vention-dropdown-button.d.ts

@@ -1,16 +1,29 @@
-/// <reference types="react" />
 import { ButtonProps } from "@mui/material";
 import { Sizes, StrictExtract } from "../../../theme/machine-ui-theme";
+import { ReactNode } from "react";
+import { PositionedMenuAlignment, PositionedMenuPlacement } from "../../../components/shared/vention-positioned-component";
+export declare const menuTestIds: {
+    menuRootDiv: string;
+};
 export interface VentionDropdownButtonProps extends Omit<ButtonProps, "size" | "variant" | "color"> {
     variant?: "simple" | "outline" | "shaded";
     size?: StrictExtract<Sizes, "small" | "medium" | "large">;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     stroke?: number | string;
     disabled?: boolean;
     className?: string;
     label?: string;
     badgeText?: string;
     contentColor?: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Required children to show when the button is clicked */
+    children: ReactNode;
+    /** Callback function called when the dropdown is closed. */
+    onClose?: (() => void) | undefined;
+    /** Callback function called when the dropdown is opened. */
+    onOpen?: (() => void) | undefined;
+    /** Placement of the menu relative to the button. */
+    menuPlacement?: PositionedMenuPlacement | undefined;
+    /** Alignment of the menu relative to the button. */
+    menuAlignment?: PositionedMenuAlignment | undefined;
 }
-export declare const VentionDropdownButton: ({ variant, size, className, disabled, onClick, icon, badgeText, label, stroke, contentColor, ...other }: VentionDropdownButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VentionDropdownButton: ({ variant, size, className, disabled, onClose, onOpen, icon, badgeText, label, stroke, contentColor, children, menuPlacement, menuAlignment, onClick, ...other }: VentionDropdownButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/vention-menu/vention-menu.d.ts

@@ -2,7 +2,7 @@ import { VentionMenuListProps } from "./vention-menu-list";
 import { MenuSize } from "./vention-menu-styling-helpers";
 export type VentionMenuProps = VentionMenuListProps & {
     showMenu?: boolean;
-    setShowMenu?: (show: boolean) => void;
+    setShowMenu: (show: boolean) => void;
     closeMenuOnClick?: boolean;
     size?: MenuSize;
     menuWidth?: string;