@vention/machine-ui 6.4.2 → 6.5.0

package/index.esm.js

@@ -7021,12 +7021,14 @@ const getColors$3 = (color, variant, theme) => {
   return counterStyleMap[color][variant](theme);
 };
 
+const DEFAULT_MODAL_MAX_HEIGHT = "calc(100dvh - 96px)";
 const VentionModalBase = props => {
   const {
     modalSize = "medium",
     isTouchDevice = false,
     backDropClickClosable = true,
     width,
+    maxHeight = DEFAULT_MODAL_MAX_HEIGHT,
     dataTestId
   } = props;
   const {
@@ -7035,7 +7037,8 @@ const VentionModalBase = props => {
   } = useStyles$C({
     modalSize,
     isTouchDevice,
-    width
+    width,
+    maxHeight
   });
   const handleClose = (event, reason) => {
     if (!backDropClickClosable && reason === "backdropClick") {
@@ -7114,6 +7117,7 @@ const useStyles$C = tss.withParams().create(({
   modalSize,
   isTouchDevice,
   width,
+  maxHeight,
   theme
 }) => {
   const modalStyle = getModalStyle(modalSize, width);
@@ -7132,6 +7136,8 @@ const useStyles$C = tss.withParams().create(({
       display: "flex",
       flexDirection: "column",
       width: modalStyle.width,
+      maxHeight,
+      overflowY: "auto",
       backgroundColor: theme.palette.background.paper,
       padding: isTouchDevice ? theme.spacing(9, 8, 8, 8) : theme.spacing(8, 7, 7, 7),
       borderRadius: 8,
@@ -7204,6 +7210,7 @@ const VentionModal = props => {
     isTouchDevice: isTouchDevice,
     backDropClickClosable: backDropClickClosable,
     width: props.width,
+    maxHeight: props.maxHeight,
     dataTestId: (_b = (_a = props.dataTestIds) === null || _a === void 0 ? void 0 : _a.modal) !== null && _b !== void 0 ? _b : ventionModalTestIds.container,
     children: jsxs(Box$1, {
       className: classes.modalContent,
@@ -7230,6 +7237,7 @@ const VentionModal = props => {
       }), jsx(Typography, {
         className: classes.bodyText,
         variant: getBodyTextTypography(modalSize, isTouchDevice),
+        "data-testid": ventionModalTestIds.body,
         children: props.body
       }), jsxs(Box$1, {
         className: classes.modalActions,
@@ -7277,7 +7285,8 @@ const useStyles$B = tss.withParams().create(({
     modalContent: {
       display: "flex",
       flexDirection: "column",
-      alignItems: ALIGN_ITEMS[textAlign]
+      alignItems: ALIGN_ITEMS[textAlign],
+      minHeight: 0
     },
     statusGlow: {
       width: status.glowSize,
@@ -7314,6 +7323,10 @@ const useStyles$B = tss.withParams().create(({
     bodyText: {
       textAlign,
       width: "100%",
+      overflowY: "auto",
+      scrollbarWidth: "thin",
+      scrollbarColor: `${theme.palette.border.subtleSlate} transparent`,
+      scrollbarGutter: "stable both-edges",
       marginBottom: isTouchDevice || modalSize === "xx-large" ? theme.spacing(9) : theme.spacing(5)
     }
   };
@@ -7385,7 +7398,8 @@ const ventionModalTestIds = {
   loadingIcon: "vention-modal-loading-icon",
   warningIcon: "vention-modal-warning-icon",
   negativeIcon: "vention-modal-negative-icon",
-  modalActions: "vention-modal-actions"
+  modalActions: "vention-modal-actions",
+  body: "vention-modal-body"
 };
 
 const defaultProps$5 = {

package/package.json

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

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

@@ -44,6 +44,12 @@ export interface VentionModalProps {
      * If nothing is provided, {@link modalSize} will drive the width.
      */
     width?: VentionModalBaseProps["width"];
+    /**
+     * Default max height is calc(100dvh - 96px), so 48px from the top and bottom of the screen.
+     * The modal grows until it reaches this size, then the body content begins to scroll,
+     * leaving the title and buttons always visible.
+     */
+    maxHeight?: VentionModalBaseProps["maxHeight"];
 }
 export declare const VentionModal: (props: VentionModalProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ventionModalTestIds: {
@@ -54,4 +60,5 @@ export declare const ventionModalTestIds: {
     warningIcon: string;
     negativeIcon: string;
     modalActions: string;
+    body: string;
 };

package/src/lib/components/vention-modal-base/vention-modal-base.d.ts

@@ -1,4 +1,5 @@
 import { Sizes, StrictExtract } from "../../theme/machine-ui-theme";
+import { Property } from "csstype";
 export type ModalSize = StrictExtract<Sizes, "small" | "medium" | "large" | "x-large" | "xx-large" | "dynamic">;
 export interface VentionModalBaseProps {
     modalSize?: ModalSize;
@@ -13,6 +14,12 @@ export interface VentionModalBaseProps {
      * If nothing is provided, {@link modalSize} will drive the width.
      */
     width?: `${number}px` | `${number}%`;
+    /**
+     * Default max height is calc(100dvh - 96px), so 48px from the top and bottom of the screen.
+     * The modal grows until it reaches this size, then the body content beings to scroll,
+     * leaving the title and buttons always visible.
+     */
+    maxHeight?: Property.MaxHeight;
 }
 export declare const VentionModalBase: (props: VentionModalBaseProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ventionModalBaseTestIds: {