From 5db6220dc99dbe8d03fcf4b57fe191d6ca17dfdd Mon Sep 17 00:00:00 2001 From: Francisco Mazzoni Date: Tue, 9 Aug 2022 10:23:44 -0300 Subject: [PATCH] add outside interaction control to radix dialog based ui --- studio/components/interfaces/App/PortalToast.tsx | 2 +- .../Policies/PolicyEditorModal/index.tsx | 6 ++++++ .../SidePanelEditor/ColumnEditor/ColumnEditor.tsx | 6 ++++++ .../SidePanelEditor/RowEditor/RowEditor.tsx | 6 ++++++ .../SidePanelEditor/TableEditor/TableEditor.tsx | 6 ++++++ studio/package-lock.json | 14 +++++++------- studio/package.json | 8 ++++---- 7 files changed, 36 insertions(+), 12 deletions(-) diff --git a/studio/components/interfaces/App/PortalToast.tsx b/studio/components/interfaces/App/PortalToast.tsx index 7521b9118f7..b9b6f29c89b 100644 --- a/studio/components/interfaces/App/PortalToast.tsx +++ b/studio/components/interfaces/App/PortalToast.tsx @@ -10,7 +10,7 @@ const PortalRootWithNoSSR = dynamic( const PortalToast = () => ( // @ts-ignore - + = ({ />, ]} onCancel={onSelectCancel} + onInteractOutside={(event) => { + const isToast = (event.target as Element)?.closest('#toast') + if (isToast) { + event.preventDefault() + } + }} >
{view === POLICY_MODAL_VIEWS.SELECTION ? ( diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx index c2cd7c1c4dd..4570eb13c90 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx @@ -152,6 +152,12 @@ const ColumnEditor: FC = ({ applyFunction={(resolve: () => void) => onSaveChanges(resolve)} /> } + onInteractOutside={(event) => { + const isToast = (event.target as Element)?.closest('#toast') + if (isToast) { + event.preventDefault() + } + }} >
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx index 938fa79ec87..5b3bfb9d459 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx @@ -156,6 +156,12 @@ const RowEditor: FC = ({ }`} onCancel={closePanel} hideFooter + onInteractOutside={(event) => { + const isToast = (event.target as Element)?.closest('#toast') + if (isToast) { + event.preventDefault() + } + }} >
onSaveChanges(e)} className="h-full">
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx index 132492782c4..ee39ae9d9ab 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx @@ -169,6 +169,12 @@ const TableEditor: FC = ({ applyFunction={(resolve: () => void) => onSaveChanges(resolve)} /> } + onInteractOutside={(event) => { + const isToast = (event.target as Element)?.closest('#toast') + if (isToast) { + event.preventDefault() + } + }} > <> diff --git a/studio/package-lock.json b/studio/package-lock.json index 94a4a8704c0..532fc71a8cb 100644 --- a/studio/package-lock.json +++ b/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", diff --git a/studio/package.json b/studio/package.json index aefa7e187d6..3482959eca0 100644 --- a/studio/package.json +++ b/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",