@luscii-healthtech/web-ui 44.5.2 → 44.6.0

package/dist/index.development.js

@@ -2000,19 +2000,27 @@ const ModalFooter = (props) => {
   }), children: [props.footerLeadingAccessory && (typeof props.footerLeadingAccessory === "string" ? jsxRuntime.jsx(Text, { variant: "base", color: "slate-500", children: props.footerLeadingAccessory }) : props.footerLeadingAccessory), props.footerLeadingComponent && (typeof props.footerLeadingComponent === "string" ? jsxRuntime.jsx(Text, { variant: "base", color: "slate-500", children: props.footerLeadingComponent }) : jsxRuntime.jsx(SecondaryButton, Object.assign({ "data-test-id": "modal-footer-leading-secondary-button" }, props.footerLeadingComponent))), jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:space-x-2", children: [props.footerTrailingComponents.secondaryButton, props.footerTrailingComponents.secondaryButtonProps && jsxRuntime.jsx(SecondaryButton, Object.assign({ "data-test-id": "modal-footer-trailing-secondary-button" }, props.footerTrailingComponents.secondaryButtonProps)), props.footerTrailingComponents.primaryButton, props.footerTrailingComponents.primaryButtonProps && jsxRuntime.jsx(PrimaryButton, Object.assign({ "data-test-id": "modal-footer-trailing-primary-button" }, props.footerTrailingComponents.primaryButtonProps))] })] });
 };
 
+const TOP_BOTTOM_MARGIN_REM = 7.5;
+const TOP_BOTTOM_EXTRA_MARGIN_REM = 8.5;
 const ModalBase = (props) => {
   var _a;
-  const { size = "medium", withContentPaddingY = true, isOpen = false } = props;
+  const { size = "medium", withContentPaddingY = true, isOpen = false, autoMaxContentHeight = false } = props;
   return jsxRuntime.jsxs(ReactModal__default.default, { isOpen, data: { "test-id": (_a = props.dataTestId) !== null && _a !== void 0 ? _a : "react-modal" }, contentLabel: props.title, overlayClassName: classNames__default.default("ui:px-2 ui:py-15", "ui:z-20", "ui:fixed ui:top-0 ui:bottom-0 ui:left-0 ui:right-0", "ui:overflow-x-hidden ui:overflow-y-auto", "ui:bg-overlay"), onRequestClose: props.onCloseClick, shouldFocusAfterRender: false, shouldCloseOnOverlayClick: false, className: classNames__default.default("ui:mx-auto ui:my-0", "ui:relative", "ui:rounded-lg ui:bg-white ui:shadow-lg ui:outline-none", {
+    "ui:flex ui:flex-col": props.scrollableContent && autoMaxContentHeight,
     "ui:overflow-y-hidden": props.scrollableContent,
     "ui:mt-17": props.withExtraMarginTop,
     "ui:md:w-120": size === "dialog-medium",
     "ui:md:w-80": size === "small" || size === "dialog-small",
     "ui:md:w-132": size === "medium",
     "ui:md:w-216": size === "wide"
-  }), children: [props.title && jsxRuntime.jsx(ModalHeader, { title: props.title, onCloseClick: props.onCloseClick }), jsxRuntime.jsx("div", { className: classNames__default.default({
+  }), style: {
+    content: props.scrollableContent && autoMaxContentHeight ? {
+      height: props.withExtraMarginTop ? `calc(100vh - ${TOP_BOTTOM_MARGIN_REM} - ${TOP_BOTTOM_EXTRA_MARGIN_REM})` : `calc(100vh - ${TOP_BOTTOM_MARGIN_REM})`
+    } : {}
+  }, children: [props.title && jsxRuntime.jsx(ModalHeader, { title: props.title, onCloseClick: props.onCloseClick }), jsxRuntime.jsx("div", { className: classNames__default.default({
     "ui:rounded-t-lg": !props.title,
-    "ui:max-h-135 ui:overflow-y-auto": props.scrollableContent
+    "ui:flex-1 ui:overflow-y-auto ui:min-h-0": props.scrollableContent && autoMaxContentHeight,
+    "ui:max-h-135 ui:overflow-y-auto": props.scrollableContent && !autoMaxContentHeight
   }), children: jsxRuntime.jsx("div", { className: classNames__default.default("ui:px-6", {
     "ui:py-6": withContentPaddingY
   }), children: props.children }) }), jsxRuntime.jsx(ModalFooter, { footerLeadingAccessory: props.footerLeadingAccessory, footerLeadingComponent: props.footerLeadingComponent, footerTrailingComponents: props.footerTrailingComponents })] });