@vention/machine-ui 3.35.0 → 3.36.0

package/index.esm.js

@@ -11996,4 +11996,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, testIds, useBannerColorStyles, ventionModalBaseTestIds, ventionModalTestIds, ventionPopoverArrowSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "3.35.0",
+  "version": "3.36.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 {};