@yosgo/swap-ui 1.0.140 → 1.0.142

package/build/Modal/Modal.types.d.ts

@@ -13,6 +13,7 @@ export interface ModalProps {
     footerDisplayColumn?: boolean;
     mobile?: boolean;
     fullWidth?: boolean;
+    fullScreen?: boolean;
     onClose: () => void;
     width?: string | number;
     maxWidth?: string | number;

package/build/index.esm.js

@@ -7371,8 +7371,8 @@ var useStyles$f = makeStyles$1(function (theme) { return ({
         border: "unset",
         borderRadius: 12,
         margin: function (_a) {
-            var fullWidth = _a.fullWidth, match_XS = _a.match_XS;
-            return fullWidth ? 0 : match_XS ? "0px 24px" : "0px 16px";
+            var fullWidth = _a.fullWidth, fullScreen = _a.fullScreen, match_XS = _a.match_XS;
+            return fullWidth || fullScreen ? 0 : match_XS ? "0px 24px" : "0px 16px";
         },
     },
     backdrop: {
@@ -7380,36 +7380,44 @@ var useStyles$f = makeStyles$1(function (theme) { return ({
     },
     modal: {
         width: function (_a) {
-            var width = _a.width, size = _a.size;
-            return width
-                ? width
-                : size === "large"
-                    ? 800
-                    : size === "medium"
-                        ? 640
-                        : size === "small"
-                            ? 480
-                            : size === "extraSmall"
-                                ? 320
-                                : "100%";
+            var fullScreen = _a.fullScreen, width = _a.width, size = _a.size;
+            return fullScreen
+                ? "100vw"
+                : width
+                    ? width
+                    : size === "large"
+                        ? 800
+                        : size === "medium"
+                            ? 640
+                            : size === "small"
+                                ? 480
+                                : size === "extraSmall"
+                                    ? 320
+                                    : "100%";
         },
         maxWidth: function (_a) {
             var maxWidth = _a.maxWidth;
             return maxWidth;
         },
         borderRadius: function (_a) {
-            var fullWidth = _a.fullWidth;
-            return fullWidth ? "12px 12px 0px 0px" : 12;
+            var fullWidth = _a.fullWidth, fullScreen = _a.fullScreen;
+            return fullScreen ? 0 : fullWidth ? "12px 12px 0px 0px" : 12;
         },
         border: "unset",
-        boxShadow: theme.boxShadow.l,
+        boxShadow: function (_a) {
+            var fullScreen = _a.fullScreen;
+            return fullScreen ? "unset" : theme.boxShadow.l;
+        },
         display: "flex",
         flexDirection: "column",
         outline: 0,
     },
     head: {
         height: "100%",
-        borderRadius: "12px 12px 0px 0px",
+        borderRadius: function (_a) {
+            var fullScreen = _a.fullScreen;
+            return fullScreen ? 0 : "12px 12px 0px 0px";
+        },
         padding: function (_a) {
             var headpadding = _a.headpadding, mobile = _a.mobile, disCloseIcon = _a.disCloseIcon, helpText = _a.helpText, multiline = _a.multiline;
             return headpadding
@@ -7689,8 +7697,8 @@ var useStyles$f = makeStyles$1(function (theme) { return ({
     body: {
         transition: "all 0.2s ease-in-out",
         height: function (_a) {
-            var height = _a.height;
-            return (height ? height : "100%");
+            var fullScreen = _a.fullScreen, height = _a.height;
+            return fullScreen ? "calc(100dvh - 146px)" : height ? height : "100%";
         },
         padding: function (_a) {
             var bodyPadding = _a.bodyPadding, mobile = _a.mobile;
@@ -7702,8 +7710,14 @@ var useStyles$f = makeStyles$1(function (theme) { return ({
             return (onExit ? "none" : "unset");
         },
         maxHeight: function (_a) {
-            var bodyMaxHeight = _a.bodyMaxHeight, fullWidth = _a.fullWidth, clientHeight = _a.clientHeight;
-            return bodyMaxHeight ? bodyMaxHeight : fullWidth ? clientHeight : "unset";
+            var bodyMaxHeight = _a.bodyMaxHeight, fullWidth = _a.fullWidth, fullScreen = _a.fullScreen, clientHeight = _a.clientHeight;
+            return fullScreen
+                ? "calc(100dvh - 146px)"
+                : bodyMaxHeight
+                    ? bodyMaxHeight
+                    : fullWidth
+                        ? clientHeight
+                        : "unset";
         },
         overflowY: function (_a) {
             var onExit = _a.onExit;
@@ -7757,7 +7771,7 @@ var useStyles$f = makeStyles$1(function (theme) { return ({
     },
 }); });
 var Modal = React__default.forwardRef(function (props, ref) {
-    var width = props.width, height = props.height, open = props.open, onClose = props.onClose, title = props.title, helpText = props.helpText, size = props.size, headpadding = props.headpadding, headChildren = props.headChildren, checked = props.checked, failed = props.failed, icon = props.icon, checkIconColor = props.checkIconColor, iconColor = props.iconColor, children = props.children, label = props.label, buttonFullWidth = props.buttonFullWidth, footerDisplayColumn = props.footerDisplayColumn, secondaryButton = props.secondaryButton, primaryButton = props.primaryButton, mobile = props.mobile, fullWidth = props.fullWidth, bodyPadding = props.bodyPadding, maxWidth = props.maxWidth, disCloseIcon = props.disCloseIcon, titleStyle = props.titleStyle, bodyStyle = props.bodyStyle, onExit = props.onExit, bodyMaxHeight = props.bodyMaxHeight, multiline = props.multiline, disUnderLine = props.disUnderLine, footer = props.footer;
+    var width = props.width, height = props.height, open = props.open, onClose = props.onClose, title = props.title, helpText = props.helpText, size = props.size, headpadding = props.headpadding, headChildren = props.headChildren, checked = props.checked, failed = props.failed, icon = props.icon, checkIconColor = props.checkIconColor, iconColor = props.iconColor, children = props.children, label = props.label, buttonFullWidth = props.buttonFullWidth, footerDisplayColumn = props.footerDisplayColumn, secondaryButton = props.secondaryButton, primaryButton = props.primaryButton, mobile = props.mobile, fullWidth = props.fullWidth, fullScreen = props.fullScreen, bodyPadding = props.bodyPadding, maxWidth = props.maxWidth, disCloseIcon = props.disCloseIcon, titleStyle = props.titleStyle, bodyStyle = props.bodyStyle, onExit = props.onExit, bodyMaxHeight = props.bodyMaxHeight, multiline = props.multiline, disUnderLine = props.disUnderLine, footer = props.footer;
     var _a = useState(0), clientHeight = _a[0], setClientHeight = _a[1];
     var _b = useState(0), scorllbarWidth = _b[0], setScorllbarWidth = _b[1];
     useEffect(function () {
@@ -7783,6 +7797,7 @@ var Modal = React__default.forwardRef(function (props, ref) {
     var match_XS = useBreakpoints("xs");
     var classes = useStyles$f({
         fullWidth: fullWidth,
+        fullScreen: fullScreen,
         match_XS: match_XS,
         width: width,
         size: size,
@@ -7809,7 +7824,7 @@ var Modal = React__default.forwardRef(function (props, ref) {
             className: classes.backdrop,
             style: { overflow: "auto", WebkitOverflowScrolling: "touch" },
         } },
-        React__default.createElement(ModalTransitionEffect, { in: open, slide: fullWidth, style: {
+        React__default.createElement(ModalTransitionEffect, { in: open, slide: fullWidth || fullScreen, style: {
                 outline: "none",
                 transition: "ease-in-out",
                 width: "100%",
@@ -7861,7 +7876,10 @@ var Modal = React__default.forwardRef(function (props, ref) {
                                     : mobile
                                         ? -16
                                         : -24,
-                                position: bodyMaxHeight || height || (mobile && fullWidth)
+                                position: bodyMaxHeight ||
+                                    height ||
+                                    (mobile && fullWidth) ||
+                                    fullScreen
                                     ? "fixed"
                                     : "absolute",
                                 width: width
@@ -7875,13 +7893,15 @@ var Modal = React__default.forwardRef(function (props, ref) {
                                                 : size === "extraSmall"
                                                     ? 320
                                                     : "100%",
-                                height: bodyMaxHeight
-                                    ? bodyMaxHeight
-                                    : height
-                                        ? height
-                                        : mobile && fullWidth
-                                            ? clientHeight
-                                            : "100%",
+                                height: fullScreen
+                                    ? "100dvh"
+                                    : bodyMaxHeight
+                                        ? bodyMaxHeight
+                                        : height
+                                            ? height
+                                            : mobile && fullWidth
+                                                ? clientHeight
+                                                : "100%",
                                 background: "black",
                                 opacity: 0.5,
                                 zIndex: 10,