@vention/machine-ui 3.35.0 → 3.37.0

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);
@@ -3446,9 +3488,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 +3546,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",
@@ -11996,4 +12081,111 @@ const useStyle = tss$1.withParams().create(({
   };
 });
 
-export { COLORS, DEFAULT_VENTION_TREE_ITEM_HEIGHT, ElementTestIds, IconSizes, VentionAlert, VentionBadge, VentionBanner, VentionButton, VentionCallout, VentionCheckbox, VentionCombobox, VentionCounter, VentionDraggable, VentionDrawer, VentionDropZone, VentionDropdownButton, VentionIcon, VentionIconButton, VentionLink, VentionMenu, VentionModal, VentionModalBanner, VentionModalBase, VentionPopover, VentionProgressBar, VentionRadio, VentionRadioTile, VentionSelect, VentionSidebarItem, VentionSlider, VentionSpinner, VentionStatusDot, VentionStatusIndicator, VentionStepper, VentionSteps, VentionSwitch, VentionTabs, VentionTextInput, VentionTooltip, VentionTreeItem, VentionUploadFile, getSpinnerColor, getVentionBadgeColors, machineUiHmiTheme, machineUiTheme, testIds, useBannerColorStyles, ventionModalBaseTestIds, ventionModalTestIds, ventionPopoverArrowSize };
+const POSITIONED_MENU_OFFSET = 3;
+/**
+ * Generic positioned component that can position any React component based on viewport constraints.
+ * It can be positioned relative to an anchor element or a specified position.
+ *
+ * @param props - The properties for the positioned component, including position and children.
+ * @returns The positioned component wrapper.
+ */
+function VentionPositionedComponent({
+  position,
+  anchorRect,
+  placement = "bottom",
+  alignment = "start",
+  children
+}) {
+  const ref = useRef(null);
+  const [adjustedPosition, setAdjustedPosition] = useState({
+    top: 0,
+    left: 0
+  });
+  useEffect(() => {
+    const {
+      width,
+      height
+    } = ref.current.getBoundingClientRect();
+    let top = 0;
+    let left = 0;
+    if (position !== undefined) {
+      top = position.top;
+      left = position.left;
+    } else {
+      const calculatedPosition = calcMenuPosition(anchorRect, {
+        width,
+        height
+      }, placement, alignment);
+      top = calculatedPosition.top;
+      left = calculatedPosition.left;
+    }
+    // Clamp to viewport
+    const maxLeft = Math.max(0, window.innerWidth - width);
+    const maxTop = Math.max(0, window.innerHeight - height);
+    left = Math.min(Math.max(left, 0), maxLeft);
+    top = Math.min(Math.max(top, 0), maxTop);
+    setAdjustedPosition({
+      top,
+      left
+    });
+  }, [position, anchorRect, placement, alignment, children]);
+  return jsx("div", {
+    ref: ref,
+    style: {
+      position: "fixed",
+      top: adjustedPosition.top,
+      left: adjustedPosition.left,
+      zIndex: machineUiTheme.zIndex.modal
+    },
+    children: children
+  });
+}
+function calcMenuPosition(anchorRect, menuSize, placement, alignment) {
+  const {
+    width,
+    height
+  } = menuSize;
+  const {
+    left,
+    top,
+    right,
+    bottom,
+    width: anchorWidth,
+    height: anchorHeight
+  } = anchorRect;
+  const offset = POSITIONED_MENU_OFFSET;
+  const align = (alignment, start, end, anchorSize, size) => {
+    switch (alignment) {
+      case "start":
+        return start;
+      case "end":
+        return end - size;
+      case "middle":
+        return start + (anchorSize - size) / 2;
+    }
+  };
+  switch (placement) {
+    case "bottom":
+      return {
+        top: bottom + offset,
+        left: align(alignment, left, right, anchorWidth, width)
+      };
+    case "top":
+      return {
+        top: top - height - offset,
+        left: align(alignment, left, right, anchorWidth, width)
+      };
+    case "right":
+      return {
+        left: right + offset,
+        top: align(alignment, top, bottom, anchorHeight, height)
+      };
+    default:
+      return {
+        left: left - width - offset,
+        top: align(alignment, top, bottom, anchorHeight, height)
+      };
+  }
+}
+
+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.35.0",
+  "version": "3.37.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/index.d.ts

@@ -36,6 +36,7 @@ export * from "./lib/components/vention-tooltip/vention-tooltip";
 export * from "./lib/components/vention-checkbox/vention-checkbox";
 export * from "./lib/components/vention-uploadfile/vention-uploadfile";
 export * from "./lib/components/vention-dropzone/vention-dropzone";
+export * from "./lib/components/shared/vention-positioned-component";
 export * from "./lib/theme/machine-ui-theme";
 export * from "./lib/theme/colors";
 export { type VentionAlertProps } from "./lib/components/vention-alert/vention-alert-utils";

package/src/lib/components/shared/vention-positioned-component.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+export type AnchorPosition = {
+    top: number;
+    left: number;
+};
+export type PositionedMenuPlacement = "bottom" | "top" | "left" | "right";
+export type PositionedMenuAlignment = "start" | "middle" | "end";
+export declare const POSITIONED_MENU_OFFSET = 3;
+interface BasePositionedProps {
+    placement?: PositionedMenuPlacement | undefined;
+    alignment?: PositionedMenuAlignment | undefined;
+    children: React.ReactNode;
+}
+interface PositionedPropsWithAnchor extends BasePositionedProps {
+    anchorRect: DOMRect;
+    position?: never;
+}
+interface PositionedPropsWithPosition extends BasePositionedProps {
+    anchorRect?: never;
+    position: AnchorPosition;
+}
+/**
+ * Props for the positioned component.
+ * Either position or anchorRect must be defined, but not both.
+ */
+export type PositionedComponentProps = PositionedPropsWithAnchor | PositionedPropsWithPosition;
+/**
+ * Generic positioned component that can position any React component based on viewport constraints.
+ * It can be positioned relative to an anchor element or a specified position.
+ *
+ * @param props - The properties for the positioned component, including position and children.
+ * @returns The positioned component wrapper.
+ */
+export declare function VentionPositionedComponent({ position, anchorRect, placement, alignment, children, }: PositionedComponentProps): JSX.Element;
+export declare function calcMenuPosition(anchorRect: DOMRect, menuSize: {
+    width: number;
+    height: number;
+}, placement: PositionedMenuPlacement, alignment: PositionedMenuAlignment): AnchorPosition;
+export {};

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;