chore: upgrade ariakit

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -1,6 +1,6 @@
 import { classNames } from '@standardnotes/snjs'
 import { ReactNode } from 'react'
-import { Tooltip, TooltipAnchor, TooltipStoreProps, useTooltipStore } from '@ariakit/react'
+import { Tooltip, TooltipAnchor, TooltipOptions, useTooltipStore } from '@ariakit/react'
 import { Slot } from '@radix-ui/react-slot'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { getPositionedPopoverStyles } from '../Popover/GetPositionedPopoverStyles'
@@ -14,35 +14,9 @@ const StyledTooltip = ({
   children: ReactNode
   className?: string
   label: string
-} & Partial<TooltipStoreProps>) => {
+} & Partial<TooltipOptions>) => {
   const tooltip = useTooltipStore({
     timeout: 350,
-    renderCallback(props) {
-      const { popoverElement, anchorElement } = props
-
-      const documentElement = document.querySelector('.main-ui-view')
-
-      if (!popoverElement || !anchorElement || !documentElement) {
-        return
-      }
-
-      const anchorRect = anchorElement.getBoundingClientRect()
-      const popoverRect = popoverElement.getBoundingClientRect()
-      const documentRect = documentElement.getBoundingClientRect()
-
-      const styles = getPositionedPopoverStyles({
-        align: 'center',
-        side: 'bottom',
-        anchorRect,
-        popoverRect,
-        documentRect,
-        disableMobileFullscreenTakeover: true,
-        offset: 6,
-      })
-
-      Object.assign(popoverElement.style, styles)
-    },
-    ...props,
   })
   const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
 
@@ -61,6 +35,32 @@ const StyledTooltip = ({
           'z-tooltip max-w-max rounded border border-border bg-contrast py-1.5 px-3 text-sm text-foreground shadow',
           className,
         )}
+        updatePosition={() => {
+          const { popoverElement, anchorElement } = tooltip.getState()
+
+          const documentElement = document.querySelector('.main-ui-view')
+
+          if (!popoverElement || !anchorElement || !documentElement) {
+            return
+          }
+
+          const anchorRect = anchorElement.getBoundingClientRect()
+          const popoverRect = popoverElement.getBoundingClientRect()
+          const documentRect = documentElement.getBoundingClientRect()
+
+          const styles = getPositionedPopoverStyles({
+            align: 'center',
+            side: 'bottom',
+            anchorRect,
+            popoverRect,
+            documentRect,
+            disableMobileFullscreenTakeover: true,
+            offset: 6,
+          })
+
+          Object.assign(popoverElement.style, styles)
+        }}
+        {...props}
       >
         {label}
       </Tooltip>