⬆️ Upgrade chakra version

apps/builder/package.json

@@ -14,14 +14,14 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "7.0.1",
-    "@chakra-ui/anatomy": "2.1.1",
-    "@chakra-ui/react": "2.7.1",
-    "@chakra-ui/theme-tools": "2.0.18",
+    "@chakra-ui/anatomy": "2.2.2",
+    "@chakra-ui/react": "2.8.2",
+    "@chakra-ui/theme-tools": "2.1.2",
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
-    "@emotion/react": "11.11.1",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.5",
     "@faire/mjml-react": "3.3.0",
     "@giphy/js-fetch-api": "5.0.0",
     "@giphy/js-types": "4.4.0",
@@ -65,13 +65,13 @@
     "dequal": "2.0.3",
     "emojilib": "3.0.10",
     "focus-visible": "5.2.0",
-    "framer-motion": "10.3.0",
+    "framer-motion": "11.1.7",
     "google-auth-library": "8.9.0",
     "google-spreadsheet": "4.1.1",
     "immer": "10.0.2",
     "isolated-vm": "4.7.2",
     "jsonwebtoken": "9.0.1",
-    "ky": "1.2.3",
+    "ky": "1.2.4",
     "libphonenumber-js": "1.10.37",
     "micro": "10.0.1",
     "micro-cors": "0.1.1",
@@ -99,7 +99,7 @@
     "zustand": "4.5.0"
   },
   "devDependencies": {
-    "@chakra-ui/styled-system": "2.9.1",
+    "@chakra-ui/styled-system": "2.9.2",
     "@playwright/test": "1.43.1",
     "@typebot.io/billing": "workspace:*",
     "@typebot.io/forge": "workspace:*",

apps/builder/src/components/EditableEmojiOrImageIcon.tsx

@@ -6,6 +6,7 @@ import {
   PopoverContent,
   Flex,
   useColorModeValue,
+  Portal,
 } from '@chakra-ui/react'
 import React from 'react'
 import { EmojiOrImageIcon } from './EmojiOrImageIcon'
@@ -55,16 +56,19 @@ export const EditableEmojiOrImageIcon = ({
               </PopoverTrigger>
             </Flex>
           </Tooltip>
-          <PopoverContent p="2">
-            <ImageUploadContent
-              uploadFileProps={uploadFileProps}
-              defaultUrl={icon ?? ''}
-              onSubmit={onChangeIcon}
-              excludedTabs={['giphy', 'unsplash']}
-              onClose={onClose}
-              initialTab="icon"
-            />
-          </PopoverContent>
+          <Portal>
+            <PopoverContent p="2">
+              <ImageUploadContent
+                uploadFileProps={uploadFileProps}
+                defaultUrl={icon ?? ''}
+                onSubmit={onChangeIcon}
+                excludedTabs={['giphy', 'unsplash']}
+                onClose={onClose}
+                initialTab="icon"
+                linkWithVariableButton={false}
+              />
+            </PopoverContent>
+          </Portal>
         </>
       )}
     </Popover>

apps/builder/src/components/ImageUploadContent/ImageUploadContent.tsx

@@ -16,6 +16,7 @@ type Props = {
   defaultUrl?: string
   imageSize?: 'small' | 'regular' | 'thumb'
   initialTab?: Tabs
+  linkWithVariableButton?: boolean
   onSubmit: (url: string) => void
   onClose?: () => void
 } & (
@@ -43,6 +44,7 @@ export const ImageUploadContent = ({
   imageSize = 'regular',
   onClose,
   initialTab,
+  linkWithVariableButton,
   ...props
 }: Props) => {
   const includedTabs =
@@ -128,6 +130,7 @@ export const ImageUploadContent = ({
         imageSize={imageSize}
         onSubmit={handleSubmit}
         defaultUrl={defaultUrl}
+        linkWithVariableButton={linkWithVariableButton}
       />
     </Stack>
   )
@@ -138,12 +141,14 @@ const BodyContent = ({
   tab,
   defaultUrl,
   imageSize,
+  linkWithVariableButton,
   onSubmit,
 }: {
   uploadFileProps?: FilePathUploadProps
   tab: Tabs
   defaultUrl?: string
   imageSize: 'small' | 'regular' | 'thumb'
+  linkWithVariableButton?: boolean
   onSubmit: (url: string) => void
 }) => {
   switch (tab) {
@@ -157,7 +162,13 @@ const BodyContent = ({
       )
     }
     case 'link':
-      return <EmbedLinkContent defaultUrl={defaultUrl} onNewUrl={onSubmit} />
+      return (
+        <EmbedLinkContent
+          defaultUrl={defaultUrl}
+          onNewUrl={onSubmit}
+          withVariableButton={linkWithVariableButton}
+        />
+      )
     case 'giphy':
       return <GiphyContent onNewUrl={onSubmit} />
     case 'emoji':
@@ -194,7 +205,8 @@ const UploadFileContent = ({
 const EmbedLinkContent = ({
   defaultUrl,
   onNewUrl,
-}: ContentProps & { defaultUrl?: string }) => {
+  withVariableButton,
+}: ContentProps & { defaultUrl?: string; withVariableButton?: boolean }) => {
   const { t } = useTranslate()
 
   return (
@@ -203,6 +215,7 @@ const EmbedLinkContent = ({
         placeholder={t('editor.header.linkTab.searchInputPlaceholder.label')}
         onChange={onNewUrl}
         defaultValue={defaultUrl ?? ''}
+        withVariableButton={withVariableButton}
       />
     </Stack>
   )