uikit-react-public 0.47.0 → 0.47.1

package/lib/components/Dialog/BaseDialog.tsx

@@ -20,6 +20,7 @@ export const LARGE_WIDTH = 740;
 export interface BaseDialogProps extends HTMLAttributes<HTMLDialogElement> {
   open?: boolean;
   size?: 'small' | 'medium' | 'large';
+  fullScreenOnMobile?: boolean;
   modal?: boolean;
   closeOnClickOutside?: boolean;
   closeOnClickOutsideStopPropagation?: boolean;
@@ -39,6 +40,7 @@ const BaseDialog = forwardRef<HTMLDialogElement, BaseDialogProps>(
     {
       open = false,
       size = 'medium',
+      fullScreenOnMobile = true,
       modal = true,
       closeOnClickOutside = true,
       closeOnClickOutsideStopPropagation = true,
@@ -185,32 +187,40 @@ const BaseDialog = forwardRef<HTMLDialogElement, BaseDialogProps>(
       font-size: ${md.fontSize}px;
       font-weight: ${md.fontWeight};
       line-height: ${md.lineHeight}%;
-      width: 100vw;
-      height: 100vh;
+      width: ${width}px;
+      max-width: calc(100vw - ${theme.margin.m16});
+      height: fit-content;
       margin: auto;
 
       &:modal {
-        max-width: none;
-        max-height: none;
+        max-width: min(${width}px, calc(100vw - ${theme.margin.m16}));
+        max-height: calc(100vh - 32px);
+      }
+
+      &::backdrop {
+        background-color: ${theme.colour.surface.backdrop};
       }
+    `;
 
-      @media (min-width: ${theme.breakpoints.tablet}px) {
-        width: ${width}px;
-        max-width: calc(100vw - ${theme.margin.m16});
-        height: fit-content;
+    const fullScreenOnMobileStyle = css`
+      @media (width < ${theme.breakpoints.tablet}px) {
+        width: 100vw;
+        max-width: none;
+        height: 100vh;
 
         &:modal {
-          max-width: min(${width}px, calc(100vw - ${theme.margin.m16}));
-          max-height: calc(100vh - 32px);
+          max-width: none;
+          max-height: none;
         }
       }
-
-      &::backdrop {
-        background-color: ${theme.colour.surface.backdrop};
-      }
     `;
 
-    const style = cx(NAME, baseStyle, className);
+    const style = cx(
+      NAME,
+      baseStyle,
+      fullScreenOnMobile && fullScreenOnMobileStyle,
+      className
+    );
 
     if (open) {
       return (

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.47.0",
+  "version": "0.47.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",