add outside interaction control to radix dialog based ui

studio/components/interfaces/App/PortalToast.tsx

@@ -10,7 +10,7 @@ const PortalRootWithNoSSR = dynamic(
 
 const PortalToast = () => (
   // @ts-ignore
-  <PortalRootWithNoSSR className="portal--toast">
+  <PortalRootWithNoSSR className="portal--toast" id="toast">
     <Toaster
       position="top-right"
       toastOptions={{

studio/components/interfaces/Authentication/Policies/PolicyEditorModal/index.tsx

@@ -183,6 +183,12 @@ const PolicyEditorModal: FC<Props> = ({
         />,
       ]}
       onCancel={onSelectCancel}
+      onInteractOutside={(event) => {
+        const isToast = (event.target as Element)?.closest('#toast')
+        if (isToast) {
+          event.preventDefault()
+        }
+      }}
     >
       <div className="">
         {view === POLICY_MODAL_VIEWS.SELECTION ? (

studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx

@@ -152,6 +152,12 @@ const ColumnEditor: FC<Props> = ({
           applyFunction={(resolve: () => void) => onSaveChanges(resolve)}
         />
       }
+      onInteractOutside={(event) => {
+        const isToast = (event.target as Element)?.closest('#toast')
+        if (isToast) {
+          event.preventDefault()
+        }
+      }}
     >
       <SidePanel.Content>
         <div className="space-y-10 py-6">

studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx

@@ -156,6 +156,12 @@ const RowEditor: FC<Props> = ({
       }`}
       onCancel={closePanel}
       hideFooter
+      onInteractOutside={(event) => {
+        const isToast = (event.target as Element)?.closest('#toast')
+        if (isToast) {
+          event.preventDefault()
+        }
+      }}
     >
       <form onSubmit={(e) => onSaveChanges(e)} className="h-full">
         <div className="flex h-full flex-col">

studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx

@@ -169,6 +169,12 @@ const TableEditor: FC<Props> = ({
           applyFunction={(resolve: () => void) => onSaveChanges(resolve)}
         />
       }
+      onInteractOutside={(event) => {
+        const isToast = (event.target as Element)?.closest('#toast')
+        if (isToast) {
+          event.preventDefault()
+        }
+      }}
     >
       <>
         <SidePanel.Content>

studio/package-lock.json

@@ -22,7 +22,7 @@
         "@supabase/react-data-grid": "^7.1.0-beta.7",
         "@supabase/shared-types": "^0.1.24",
         "@supabase/supabase-js": "^1.36.0-next.9",
-        "@supabase/ui": "0.37.0-alpha.76",
+        "@supabase/ui": "0.37.0-alpha.80",
         "ajv": "^8.6.3",
         "analytics-node": "^3.5.0",
         "awesome-debounce-promise": "^2.1.0",
@@ -8402,9 +8402,9 @@
       }
     },
     "node_modules/@supabase/ui": {
-      "version": "0.37.0-alpha.76",
-      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.76.tgz",
-      "integrity": "sha512-K1mzTG/2nnBd0SrC+BpMb0qHFSIIF+WtqR0oG/mZXEgvNJhxZADBrDtIr2hjSSx86ZrsOdgjxiqtzisAEg+65Q==",
+      "version": "0.37.0-alpha.80",
+      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.80.tgz",
+      "integrity": "sha512-oTBX43SipvCOmdG4UTt2yM//Meqfof4j7Fgmdi6rAn2EGpqo9xVqWxqlCLLvcbaK94Sl0i5R43zZEWz6RJoUIg==",
       "dependencies": {
         "@headlessui/react": "^1.0.0",
         "@mertasan/tailwindcss-variables": "^2.0.1",
@@ -36133,9 +36133,9 @@
       }
     },
     "@supabase/ui": {
-      "version": "0.37.0-alpha.76",
-      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.76.tgz",
-      "integrity": "sha512-K1mzTG/2nnBd0SrC+BpMb0qHFSIIF+WtqR0oG/mZXEgvNJhxZADBrDtIr2hjSSx86ZrsOdgjxiqtzisAEg+65Q==",
+      "version": "0.37.0-alpha.80",
+      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.80.tgz",
+      "integrity": "sha512-oTBX43SipvCOmdG4UTt2yM//Meqfof4j7Fgmdi6rAn2EGpqo9xVqWxqlCLLvcbaK94Sl0i5R43zZEWz6RJoUIg==",
       "requires": {
         "@headlessui/react": "^1.0.0",
         "@mertasan/tailwindcss-variables": "^2.0.1",

studio/package.json

@@ -28,7 +28,7 @@
     "@supabase/react-data-grid": "^7.1.0-beta.7",
     "@supabase/shared-types": "^0.1.24",
     "@supabase/supabase-js": "^1.36.0-next.9",
-    "@supabase/ui": "0.37.0-alpha.76",
+    "@supabase/ui": "0.37.0-alpha.80",
     "ajv": "^8.6.3",
     "analytics-node": "^3.5.0",
     "awesome-debounce-promise": "^2.1.0",
@@ -36,10 +36,10 @@
     "configcat-js": "^5.6.0",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.0",
-    "json-logic-js": "^2.0.2",
     "file-saver": "^2.0.5",
     "generate-password": "^1.7.0",
     "immutability-helper": "^3.1.1",
+    "json-logic-js": "^2.0.2",
     "lodash": "^4.17.21",
     "lottie-react": "^2.2.1",
     "markdown-table": "=2.0.0",
@@ -78,8 +78,8 @@
     "swr": "^1.2.1",
     "uniforms-bootstrap4": "^3.6.2",
     "uniforms-bridge-json-schema": "^3.6.2",
-    "yup": "^0.32.11",
     "uuid": "^8.3.2",
+    "yup": "^0.32.11",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
@@ -95,8 +95,8 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/crypto-js": "^4.0.2",
-    "@types/json-logic-js": "^1.2.1",
     "@types/file-saver": "^2.0.2",
+    "@types/json-logic-js": "^1.2.1",
     "@types/lodash": "^4.14.172",
     "@types/markdown-table": "^3.0.0",
     "@types/papaparse": "^5.3.1",