From 7672bc3c3e4b4a049109d34fb6360002100c83d0 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 13 Jul 2023 18:38:57 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix(exportModal/index.tsx):=20ch?=
 =?UTF-8?q?ange=20function=20component=20to=20forwardRef=20component=20to?=
 =?UTF-8?q?=20support=20ref=20forwarding=20=F0=9F=94=A7=20fix(exportModal/?=
 =?UTF-8?q?index.tsx):=20update=20usage=20of=20children=20prop=20to=20use?=
 =?UTF-8?q?=20props.children=20for=20better=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modals/exportModal/index.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index b2a07f2de..2355082cf 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -1,5 +1,5 @@
 import { Download } from "lucide-react";
-import { ReactNode, useContext, useState } from "react";
+import { ReactNode, forwardRef, useContext, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
@@ -10,7 +10,7 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils";
 import BaseModal from "../baseModal";
 
-export default function ExportModal({ children }: { children: ReactNode }) {
+const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
   const { closePopUp } = useContext(PopUpContext);
   const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
     useContext(TabsContext);
@@ -21,7 +21,7 @@ export default function ExportModal({ children }: { children: ReactNode }) {
   );
   return (
     <BaseModal size="smaller">
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      <BaseModal.Trigger>{props.children}</BaseModal.Trigger>
       <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
         <DialogTitle className="flex items-center">
           <span className="pr-2">Export</span>
@@ -80,4 +80,5 @@ export default function ExportModal({ children }: { children: ReactNode }) {
       </BaseModal.Footer>
     </BaseModal>
   );
-}
+});
+export default ExportModal;