fix(dialog): dialog prevent mouse events in controlled mode

adevinta · Nov 6, 2023 · 535e11e · 535e11e
1 parent 3d261de
commit 535e11e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/dialog/src/DialogContent.styles.tsx b/packages/components/dialog/src/DialogContent.styles.tsx
@@ -1,33 +1,25 @@
 import { cva, VariantProps } from 'class-variance-authority'
 
-export const dialogContentWrapperStyles = cva([
-  'fixed inset-none z-modal flex items-center justify-center',
-  'focus-visible:u-ring focus-visible:outline-none',
-])
-
 export const dialogContentStyles = cva(
-  [
-    ['relative', 'flex', 'flex-col'],
-    ['bg-surface'],
-    'focus-visible:outline-none focus-visible:u-ring',
-  ],
+  ['z-modal flex flex-col bg-surface', 'focus-visible:outline-none focus-visible:u-ring'],
   {
     variants: {
       size: {
-        fullscreen: ['w-full', 'h-full'],
-        sm: ['max-w-sz-480'],
-        md: ['max-w-sz-672'],
-        lg: ['max-w-sz-864'],
+        fullscreen: 'fixed w-full h-full  top-none left-none',
+        sm: 'max-w-sz-480',
+        md: 'max-w-sz-672',
+        lg: 'max-w-sz-864',
       },
     },
     compoundVariants: [
       {
         size: ['sm', 'md', 'lg'],
         class: [
-          ['w-full', 'max-h-[80%]'],
-          ['shadow-md', 'rounded-lg'],
-          ['data-[state=open]:animate-fade-in'],
-          ['data-[state=closed]:animate-fade-out'],
+          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+          'w-full max-h-[80%]',
+          'shadow-md rounded-lg',
+          'data-[state=open]:animate-fade-in',
+          'data-[state=closed]:animate-fade-out',
         ],
       },
     ],

diff --git a/packages/components/dialog/src/DialogContent.tsx b/packages/components/dialog/src/DialogContent.tsx
@@ -1,11 +1,7 @@
 import * as RadixDialog from '@radix-ui/react-dialog'
 import { forwardRef, type ReactElement, type Ref, useEffect } from 'react'
 
-import {
-  dialogContentStyles,
-  type DialogContentStylesProps,
-  dialogContentWrapperStyles,
-} from './DialogContent.styles'
+import { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'
 import { useDialog } from './DialogContext'
 
 export type ContentProps = RadixDialog.DialogContentProps & DialogContentStylesProps
@@ -24,19 +20,17 @@ export const Content = forwardRef(
     }, [setIsFullScreen, size])
 
     return (
-      <div className={dialogContentWrapperStyles()}>
-        <RadixDialog.Content
-          data-spark-component="dialog-content"
-          ref={ref}
-          className={dialogContentStyles({
-            size,
-            className,
-          })}
-          {...rest}
-        >
-          {children}
-        </RadixDialog.Content>
-      </div>
+      <RadixDialog.Content
+        data-spark-component="dialog-content"
+        ref={ref}
+        className={dialogContentStyles({
+          size,
+          className,
+        })}
+        {...rest}
+      >
+        {children}
+      </RadixDialog.Content>
     )
   }
 )