chore(deps): update dependency framer-motion to v11.15.0 (#8084)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Espen Hovlandsdal <[email protected]>

dev/test-studio/components/TranslateExample.tsx

@@ -1,8 +1,9 @@
 import {InfoFilledIcon} from '@sanity/icons'
 import {Card, Stack, Text} from '@sanity/ui'
+import {forwardRef} from 'react'
 import {Translate, useTranslation} from 'sanity'
 
-export function TranslateExample() {
+export const TranslateExample = forwardRef(function TranslateExample() {
   const {t} = useTranslation('testStudio')
   return (
     <Card padding={4}>
@@ -60,4 +61,4 @@ export function TranslateExample() {
       </Stack>
     </Card>
   )
-}
+})

packages/sanity/package.json

@@ -206,7 +206,7 @@
     "execa": "^2.0.0",
     "exif-component": "^1.0.1",
     "form-data": "^4.0.0",
-    "framer-motion": "11.0.8",
+    "framer-motion": "11.15.0",
     "get-it": "^8.6.5",
     "get-random-values-esm": "1.0.2",
     "groq-js": "^1.14.2",

packages/sanity/src/core/comments/plugin/input/components/FloatingButtonPopover.tsx

@@ -9,7 +9,7 @@ import {useTranslation} from '../../../../i18n'
 import {CommentDisabledIcon} from '../../../components'
 import {commentsLocaleNamespace} from '../../../i18n'
 
-const MotionPopover = styled(motion(Popover))`
+const MotionPopover = styled(motion.create(Popover))`
   user-select: none;
 `
 

packages/sanity/src/core/comments/plugin/input/components/InlineCommentInputPopover.tsx

@@ -10,7 +10,7 @@ import {hasCommentMessageValue} from '../../../helpers'
 
 const POPOVER_FALLBACK_PLACEMENTS: PopoverProps['fallbackPlacements'] = ['bottom', 'top']
 
-const MotionPopover = motion(Popover)
+const MotionPopover = motion.create(Popover)
 
 const RootStack = styled(Stack)`
   width: 250px;

packages/sanity/src/core/form/inputs/PortableText/presence-cursors/UserPresenceCursor.tsx

@@ -83,7 +83,7 @@ const CursorDot = styled.div`
   }
 `
 
-const UserBox = styled(motion(Box))(({theme}) => {
+const UserBox = styled(motion.create(Box))(({theme}) => {
   const radius = getTheme_v2(theme)?.radius[4]
 
   return css`
@@ -102,7 +102,7 @@ const UserBox = styled(motion(Box))(({theme}) => {
   `
 })
 
-const UserText = styled(motion(Text))`
+const UserText = styled(motion.create(Text))`
   color: var(--presence-cursor-fg);
   mix-blend-mode: unset;
 `

packages/sanity/src/core/form/studio/tree-editing/components/TreeEditingDialog.tsx

@@ -61,7 +61,7 @@ const StyledDialog = styled(Dialog)(({theme}: {theme: Theme}) => {
   `
 })
 
-const MotionFlex = motion(Flex)
+const MotionFlex = motion.create(Flex)
 
 interface TreeEditingDialogProps {
   onPathFocus: (path: Path) => void

packages/sanity/src/core/form/studio/tree-editing/components/layout/TreeEditingLayoutSidebar.tsx

@@ -23,7 +23,7 @@ const SidebarCard = styled(Card)`
   flex-direction: column;
 `
 
-const SidebarStack = styled(motion(Stack))`
+const SidebarStack = styled(motion.create(Stack))`
   overflow-x: hidden;
 `
 

packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx

@@ -53,7 +53,7 @@ const Root = styled(Layer)`
   height: 100%;
 `
 
-const BackdropMotion = styled(motion(Card))`
+const BackdropMotion = styled(motion.create(Card))`
   position: absolute;
   top: 0;
   left: 0;
@@ -62,7 +62,7 @@ const BackdropMotion = styled(motion(Card))`
   background: var(--card-shadow-penumbra-color);
 `
 
-const InnerCardMotion = styled(motion(Card))`
+const InnerCardMotion = styled(motion.create(Card))`
   position: relative;
   pointer-events: all;
   flex-direction: column;

packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx

@@ -4,7 +4,6 @@ import {useRef, useState} from 'react'
 import FocusLock from 'react-focus-lock'
 import {styled} from 'styled-components'
 
-import {useTranslation} from '../../../../../i18n'
 import {supportsTouch} from '../../../../../util'
 import {
   POPOVER_INPUT_PADDING,
@@ -53,7 +52,7 @@ const OVERLAY_VARIANTS: Variants = {
 
 const Y_POSITION = 12 // vh
 
-const MotionOverlay = styled(motion(Card))`
+const MotionOverlay = styled(motion.create(Card))`
   background-color: var(--card-backdrop-color);
   bottom: 0;
   left: 0;
@@ -62,7 +61,7 @@ const MotionOverlay = styled(motion(Card))`
   top: 0;
 `
 
-const SearchMotionCard = styled(motion(Card))`
+const SearchMotionCard = styled(motion.create(Card))`
   display: flex !important;
   flex-direction: column;
   left: 50%;
@@ -88,10 +87,9 @@ export function SearchPopover({
 }: SearchPopoverProps) {
   const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
 
-  const popoverElement = useRef<HTMLElement | null>(null)
+  const popoverElement = useRef<HTMLDivElement | null>(null)
 
   const {isTopLayer, zIndex} = useLayer()
-  const {t} = useTranslation()
 
   const {
     onClose: onSearchClose,

packages/sanity/src/core/tasks/components/activity/TasksActivityLog.tsx

@@ -37,7 +37,7 @@ const VARIANTS: Variants = {
   visible: {opacity: 1, x: 0},
 }
 
-const MotionStack = styled(motion(Stack))``
+const MotionStack = styled(motion.create(Stack))``
 
 interface TasksActivityLogProps {
   onChange: (patch: FormPatch | PatchEvent | FormPatch[]) => void

packages/sanity/src/core/tasks/plugin/TasksStudioActiveToolLayout.tsx

@@ -28,7 +28,7 @@ const RootFlex = styled(Flex)(({theme}) => {
   `
 })
 
-const SidebarMotionLayer = styled(motion(Layer))(({theme}) => {
+const SidebarMotionLayer = styled(motion.create(Layer))(({theme}) => {
   const media = theme.sanity.media
 
   return css`