[PB-6724]: Upgrade dialog behaviour in share modal

.storybook/main.ts

@@ -8,12 +8,12 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@chromatic-com/storybook',
     '@storybook/addon-themes',
-    '@storybook/addon-docs'
+    '@storybook/addon-docs',
   ],
 
   framework: {
     name: '@storybook/react-vite',
     options: {},
-  }
+  },
 };
 export default config;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",

src/components/feedback/notifications/usageBanner/index.ts

@@ -1,2 +1,2 @@
 export { default as UsageWarningBanner } from './UsageWarningBanner';
-export type { UsageWarningBannerProps } from './UsageWarningBanner';
+export type { UsageWarningBannerProps } from './UsageWarningBanner';

src/components/input/slider/__test__/RangeSlider.test.tsx

@@ -5,7 +5,7 @@ import { RangeSlider } from '../';
 
 describe('RangeSlider component', () => {
   it('should match snapshot', () => {
-    const loader = render(<RangeSlider value={50} max={100} onChange={() => { }} />);
+    const loader = render(<RangeSlider value={50} max={100} onChange={() => {}} />);
     expect(loader).toMatchSnapshot();
   });
 

src/components/layout/grid/__test__/Grid.test.tsx

@@ -15,7 +15,7 @@ describe('Grid component', () => {
       <Grid>
         <div>Item 1</div>
         <div>Item 2</div>
-      </Grid>
+      </Grid>,
     );
     expect(getByText('Item 1')).toBeInTheDocument();
     expect(getByText('Item 2')).toBeInTheDocument();
@@ -40,7 +40,11 @@ describe('Grid component', () => {
   });
 
   it('should assign id and data-cy correctly', () => {
-    const { container } = render(<Grid id="grid-id" dataCy="grid-data-cy">Test</Grid>);
+    const { container } = render(
+      <Grid id="grid-id" dataCy="grid-data-cy">
+        Test
+      </Grid>,
+    );
     const gridDiv = container.firstChild as HTMLElement;
 
     expect(gridDiv).toHaveAttribute('id', 'grid-id');

src/components/mail/tray/__test__/MessageCheap.test.tsx

@@ -17,8 +17,7 @@ const mockEmail = {
 
 const mockOnClick = vi.fn();
 
-const renderMessageCheap = (props = {}) =>
-  render(<MessageCheap email={mockEmail} onClick={mockOnClick} {...props} />);
+const renderMessageCheap = (props = {}) => render(<MessageCheap email={mockEmail} onClick={mockOnClick} {...props} />);
 
 describe('MessageCheap', () => {
   afterEach(() => {

src/components/navigation/suiteLauncher/__test__/SuiteLauncher.test.tsx

@@ -4,7 +4,7 @@ import { describe, it, expect, vi } from 'vitest';
 
 describe('SuiteLauncher', () => {
   it('should match snapshot', () => {
-    const suiteLauncher = render(<SuiteLauncher suiteArray={[]} />);;
+    const suiteLauncher = render(<SuiteLauncher suiteArray={[]} />);
     expect(suiteLauncher).toMatchSnapshot();
   });
 

src/components/overlay/dialog/Dialog.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useState } from 'react';
 import { Button } from '../../input/button';
+import { createPortal } from 'react-dom';
 
 export interface DialogProps {
   isOpen: boolean;
@@ -109,43 +110,48 @@ const Dialog = ({
 
   return (
     <>
-      {isVisible && (
-        <div className={`fixed inset-0 z-50 ${isOpen ? '' : 'pointer-events-none'}`}>
+      {isVisible &&
+        createPortal(
           <div
-            className={
-              `absolute inset-0 bg-gray-100/50 transition-opacity duration-150 ` +
-              `dark:bg-black/75 ${transitionOpacity}`
-            }
-            onClick={onClose}
-            data-testid="dialog-overlay"
-          ></div>
-
-          <div
-            className={
-              `absolute left-1/2 top-1/2 w-full max-w-${maxWidth} -translate-x-1/2 -translate-y-1/2 transform ` +
-              `rounded-2xl bg-surface p-5 transition-all duration-150 dark:bg-gray-1 ${transitionScale} ${transitionOpacity}`
-            }
+            className={`fixed inset-0 z-[9999] ${isOpen ? '' : 'pointer-events-none'}`}
+            onMouseDown={(event) => event.stopPropagation()}
           >
-            <div className="flex flex-col space-y-2">
-              <p className="text-2xl font-medium text-gray-100">{title}</p>
-              <p className="text-gray-60">{subtitle}</p>
-            </div>
+            <div
+              className={
+                `absolute inset-0 bg-gray-100/50 transition-opacity duration-150 ` +
+                `dark:bg-black/75 ${transitionOpacity}`
+              }
+              onClick={onClose}
+              data-testid="dialog-overlay"
+            ></div>
+
+            <div
+              className={
+                `absolute left-1/2 top-1/2 w-full max-w-${maxWidth} -translate-x-1/2 -translate-y-1/2 transform ` +
+                `rounded-2xl bg-surface p-5 transition-all duration-150 dark:bg-gray-1 ${transitionScale} ${transitionOpacity}`
+              }
+            >
+              <div className="flex flex-col space-y-2">
+                <p className="text-2xl font-medium text-gray-100">{title}</p>
+                <p className="text-gray-60">{subtitle}</p>
+              </div>
 
-            <div className="mt-5 flex justify-end space-x-2">
-              <Button variant="secondary" onClick={onSecondaryAction} disabled={isLoading}>
-                {secondaryAction}
-              </Button>
-              <Button
-                onClick={onPrimaryAction}
-                loading={isLoading}
-                variant={primaryActionColor === 'primary' ? 'primary' : 'destructive'}
-              >
-                {primaryAction}
-              </Button>
+              <div className="mt-5 flex justify-end space-x-2">
+                <Button variant="secondary" onClick={onSecondaryAction} disabled={isLoading}>
+                  {secondaryAction}
+                </Button>
+                <Button
+                  onClick={onPrimaryAction}
+                  loading={isLoading}
+                  variant={primaryActionColor === 'primary' ? 'primary' : 'destructive'}
+                >
+                  {primaryAction}
+                </Button>
+              </div>
             </div>
-          </div>
-        </div>
-      )}
+          </div>,
+          document.body,
+        )}
     </>
   );
 };

src/components/overlay/dialog/__test__/Dialog.test.tsx

@@ -24,8 +24,8 @@ describe('Dialog', () => {
   });
 
   it('should match snapshot', () => {
-    const { container } = renderDialog();
-    expect(container).toMatchSnapshot();
+    const { baseElement } = renderDialog();
+    expect(baseElement).toMatchSnapshot();
   });
 
   it('renders dialog content when open', () => {

src/components/overlay/dialog/__test__/__snapshots__/Dialog.test.tsx.snap

@@ -1,9 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Dialog > should match snapshot 1`] = `
-<div>
+<body>
+  <div />
   <div
-    class="fixed inset-0 z-50 "
+    class="fixed inset-0 z-[9999] "
   >
     <div
       class="absolute inset-0 bg-gray-100/50 transition-opacity duration-150 dark:bg-black/75 opacity-0"
@@ -58,5 +59,5 @@ exports[`Dialog > should match snapshot 1`] = `
       </div>
     </div>
   </div>
-</div>
+</body>
 `;

src/stories/components/usageBanner/Banner.stories.tsx

@@ -81,8 +81,8 @@ export const AlmostFull: Story = {
       <>
         <p>You may soon be unable to upload new files</p>
         <p>
-          Upgrade now with an exclusive <strong>85% discount</strong> to continue storing and syncing your files
-          without limits
+          Upgrade now with an exclusive <strong>85% discount</strong> to continue storing and syncing your files without
+          limits
         </p>
       </>
     ),