fix: update popover position when panes change

[sjelfull]

Description

The Popover component from @sanity/ui and floating-ui does a good job of updating the position when things like its reference element or boundary changes. This is handled by the built-in autoUpdate middleware, setting up a ResizeObserver + listening for scroll events.

However we have at least one instance in the studio where this isn't enough. If you have an open popover inside of the PTE, the boundary element will be the PTE itself. If any panes is collapsed/expanded, the position of the popover should be updated as well, but the boundary element doesn't change in any way that can be detected automatically.

We don't have a way to access the root boundary element either, since the closest boundary will be the PTE, instead of the document pane.

floating-ui has a update method for cases like this where you need to manually update the position. Here we listen to the panes value, and trigges an update event.

This will only affect any open popovers, and shouldn't have any negative performance impact.

This PR relies on sanity-io/ui#1099 being released, that includes the usePopover hook.

What to review

• Is there any downside to listening to the panes value and triggering an update?
• Open the test studio -> Open a document inside Standard Inputs -> Portable Text -> Blocks test, create a link, open the edit popover, and then try to toggle some panes. See if the popover keeps being anchored to the text its linked to.

Notes for release

• Fixes an issue with misaligned popovers when panes get expanded or collapsed

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
performance-studio	✅ Ready (Inspect)	Visit Preview	May 26, 2023 0:31am
test-studio	✅ Ready (Inspect)	Visit Preview	May 26, 2023 0:31am

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)		May 26, 2023 0:31am

[socket-security[bot]]

New dependency changes detected. Learn more about Socket for GitHub ↗︎

---

👍 No new dependency issues detected in pull request

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore [email protected] bar@* or ignore all packages with @SocketSecurity ignore-all

Pull request alert summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

---

📊 Modified Dependency Overview:

➕ Added Package	Capability Access	+/- Transitive Count	Publisher
@sanity/[email protected]	None	+0

[RitaDias]

Hi @sjelfull 👋 thanks for setting this up!

Very quickly: I noticed that a tooltip (not the url itself but the tooltip with the edit button and trash button) is misaligned. Is this something that should be in the scope of this PR or something separate?

You'll be able to find what I mean in the last few seconds of the video:

https://github.com/sanity-io/sanity/assets/6951139/73d11d4e-9ad1-411a-9e49-117feedc81ec

[sjelfull]

Hi @sjelfull 👋 thanks for setting this up!

Very quickly: I noticed that a tooltip (not the url itself but the tooltip with the edit button and trash button) is misaligned. Is this something that should be in the scope of this PR or something separate?

You'll be able to find what I mean in the last few seconds of the video:

https://github.com/sanity-io/sanity/assets/6951139/73d11d4e-9ad1-411a-9e49-117feedc81ec

Good catch! I have only looked at popovers specifically, but tooltips are using the same library and have the same weakness. I'll look into it and see how we want to tackle it.

[hermanwikner]

The useEffect in PaneLayout works well for repositioning popovers when pane state is updated. However, you may still encounter situations when the popover is not positioned correctly. See video with an example using a custom component. This particular situation can be solved by adding a resize observer to FormView and use the update function as a callback.

  const {forceUpdate} = usePopover()

  useEffect(() => {
    const el = formRef.current

    if (!el) return undefined

    const ro = new ResizeObserver(forceUpdate)

    ro.observe(el)

    return () => {
      ro.disconnect()
      ro.unobserve(el)
    }
  }, [forceUpdate, formRef])

https://github.com/sanity-io/sanity/assets/15094168/bf2454b6-8cb2-4f64-b464-cf2d8cebd1ea

[sjelfull]

Very quickly: I noticed that a tooltip (not the url itself but the tooltip with the edit button and trash button) is misaligned. Is this something that should be in the scope of this PR or something separate?

@RitaDias Turns out that the tooltip is handled by a Popover. The complication is that the position is actually controlled by a virtual element, calculated from the rect of the range selected in the PTE.

This is a separate issue, and won't be affected by the proposed fix in @sanity/ui. I'll discuss with the team how we can tackle this.