@eclass/ui-kit 1.60.4 → 1.61.0

package/dist/eclass-ui-kit.es.js

@@ -7607,30 +7607,45 @@ const useModalConfig = ({
   closeOnOverlayClick,
   scrollBehavior,
   fixedButtons,
-  withoutMargin
+  withoutMargin,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  mobileCompact = false
 }) => {
   const [isDesktop] = useMediaQuery(`(min-width: ${uiKitModalIsDesktop}px)`);
   const isInsideScroll = scrollBehavior === "inside";
   const shouldForceInsideScroll = fixedButtons;
+  const desktopMinWidth = minWidth != null ? minWidth : "690px";
+  const desktopMaxWidth = maxWidth != null ? maxWidth : "690px";
+  const desktopMinHeight = minHeight != null ? minHeight : "300px";
+  const insideMaxHeight = maxHeight != null ? maxHeight : "calc(100% - 96px)";
+  const outsideMaxHeight = maxHeight != null ? maxHeight : "auto";
+  const compactMobileWidth = maxWidth != null ? maxWidth : "calc(100vw - 32px)";
+  const compactMobileMaxWidth = maxWidth != null ? maxWidth : "375px";
+  const compactMobileMaxHeight = maxHeight != null ? maxHeight : "calc(100dvh - 32px)";
   const isInside = isInsideScroll || shouldForceInsideScroll;
   return {
     closeOnOverlayClick,
     closeOnEsc: closeOnOverlayClick,
     scrollBehavior: isInside ? "inside" : "outside",
     contentProps: {
-      maxH: isInside ? "100dvh" : "auto",
-      minH: isDesktop ? "300px" : "100dvh",
+      maxH: isInside ? maxHeight != null ? maxHeight : "100%" : mobileCompact && !isDesktop ? compactMobileMaxHeight : outsideMaxHeight,
+      minH: isDesktop ? desktopMinHeight : mobileCompact ? "auto" : "100%",
       padding: 0,
-      width: "100%",
+      width: isDesktop ? "fit-content" : mobileCompact ? compactMobileWidth : "100%",
       animation: "none",
       sx: {
         bgColor: vars("colors-neutral-white"),
-        borderRadius: isDesktop ? "8px" : 0,
-        mt: isDesktop ? "48px" : 0,
-        mb: isDesktop ? "48px" : 0,
-        marginX: isDesktop ? "auto" : 0,
-        maxH: isInside ? "calc(100dvh - 96px)" : "auto",
-        maxWidth: isDesktop ? "690px" : "100%",
+        borderRadius: isDesktop ? "8px" : mobileCompact ? "10px" : 0,
+        mt: isDesktop ? "48px" : mobileCompact ? "auto" : 0,
+        mb: isDesktop ? "48px" : mobileCompact ? "auto" : 0,
+        marginX: isDesktop ? "auto" : mobileCompact ? "auto" : 0,
+        maxH: isInside ? insideMaxHeight : mobileCompact && !isDesktop ? compactMobileMaxHeight : outsideMaxHeight,
+        minWidth: isDesktop ? desktopMinWidth : mobileCompact ? "auto" : void 0,
+        maxWidth: isDesktop ? desktopMaxWidth : mobileCompact ? compactMobileMaxWidth : "100%",
+        overflow: mobileCompact && !isDesktop ? "hidden" : void 0,
         ...fixedButtons && {
           ".uikit-modalContent": {
             pb: 0
@@ -7667,14 +7682,22 @@ const Modal = ({
   withoutMargin = false,
   scrollBehavior = "outside",
   fixedButtons = false,
-  autoFocus = false
+  autoFocus = false,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) => {
   const isInside = scrollBehavior === "inside" || fixedButtons;
   const modalConfig = useModalConfig({
     closeOnOverlayClick,
     scrollBehavior,
     fixedButtons,
-    withoutMargin
+    withoutMargin,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
   });
   return /* @__PURE__ */ jsxs(Modal$1, {
     closeOnOverlayClick: modalConfig.closeOnOverlayClick,
@@ -7762,13 +7785,15 @@ const ModalSimple = ({
   onClose,
   closeOnOverlayClick = true,
   closeOnEsc,
-  withoutMargin = false
+  withoutMargin = false,
+  mobileCompact = false
 }) => {
   const modalConfig = useModalConfig({
     closeOnOverlayClick,
     scrollBehavior: "outside",
     fixedButtons: false,
-    withoutMargin
+    withoutMargin,
+    mobileCompact
   });
   return /* @__PURE__ */ jsxs(Modal$1, {
     closeOnOverlayClick: modalConfig.closeOnOverlayClick,
@@ -7777,6 +7802,7 @@ const ModalSimple = ({
     motionPreset: "scale",
     onClose,
     scrollBehavior: "outside",
+    isCentered: mobileCompact,
     blockScrollOnMount: false,
     children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent$1, {
       ...modalConfig.contentProps,
@@ -7959,7 +7985,7 @@ const useModalAlertConfig = () => {
       p: 0,
       m: "10vh auto 0",
       sx: {
-        maxWidth: isDesktop ? "589px" : "343px"
+        maxWidth: isDesktop ? "589px" : "calc(100vw - 32px)"
       }
     }
   };
@@ -8027,13 +8053,21 @@ const useModalMultipleConfig = ({
   closeOnOverlayClick,
   scrollBehavior,
   fixedButtons,
-  withoutMargin
+  withoutMargin,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
 }) => {
   const modalConfig = useModalConfig({
     closeOnOverlayClick,
     scrollBehavior,
     fixedButtons,
-    withoutMargin
+    withoutMargin,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
   });
   const modalAlertConfig = useModalAlertConfig();
   switch (type) {
@@ -8056,14 +8090,22 @@ const ModalMultiple = (props) => {
     fixedSubtitle,
     withoutMargin = false,
     scrollBehavior = "outside",
-    fixedButtons = false
+    fixedButtons = false,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
   } = props;
   const modalConfig = useModalMultipleConfig({
     type,
     closeOnOverlayClick,
     scrollBehavior,
     fixedButtons,
-    withoutMargin
+    withoutMargin,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
   });
   const renderContent = () => {
     switch (type) {