chore: upgrade ariakit

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

@@ -1,4 +1,3 @@
-import { useEffect } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { DropdownItem } from './DropdownItem'
 import { classNames } from '@standardnotes/snjs'
@@ -17,7 +16,7 @@ type DropdownProps = {
   label: string
   items: DropdownItem[]
   value: string
-  onChange: (value: string, item: DropdownItem) => void
+  onChange: (value: string) => void
   disabled?: boolean
   classNameOverride?: {
     wrapper?: string
@@ -39,36 +38,14 @@ const Dropdown = ({
   popoverPlacement,
 }: DropdownProps) => {
   const select = useSelectStore({
-    defaultValue: value,
-    renderCallback(props) {
-      const { popoverElement, defaultRenderCallback } = props
-      defaultRenderCallback()
-      if (popoverElement) {
-        popoverElement.style.zIndex = 'var(--z-index-dropdown-menu)'
-      }
-    },
-    placement: popoverPlacement,
+    value,
+    setValue: onChange,
+    placement: popoverPlacement || 'top',
   })
 
-  const selectedValue = select.useState('value')
   const isExpanded = select.useState('open')
 
-  const currentItem = items.find((item) => item.value === selectedValue)
-
-  useEffect(() => {
-    select.setValue(value)
-  }, [select, value])
-
-  useEffect(() => {
-    return select.subscribe(
-      (state) => {
-        if (state.value !== value) {
-          onChange(state.value, items.find((item) => item.value === state.value) as DropdownItem)
-        }
-      },
-      ['value'],
-    )
-  }, [items, onChange, select, value])
+  const currentItem = items.find((item) => item.value === value)
 
   return (
     <div
@@ -109,6 +86,15 @@ const Dropdown = ({
           'max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded border border-border bg-default py-1',
           classNameOverride.popover,
         )}
+        portal={false}
+        updatePosition={(props) => {
+          const { updatePosition } = props
+          const { popoverElement } = select.getState()
+          updatePosition()
+          if (popoverElement) {
+            popoverElement.style.zIndex = 'var(--z-index-dropdown-menu)'
+          }
+        }}
       >
         {items.map((item) => (
           <SelectItem

packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx

@@ -6,39 +6,29 @@ import { useModalAnimation } from '../Modal/useModalAnimation'
 type Props = {
   isOpen: boolean
   children: ReactNode
-  portal?: boolean
 }
 
-const ModalOverlay = forwardRef(
-  ({ isOpen, children, portal = true, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
-    const [isMounted, setElement] = useModalAnimation(isOpen)
-    const dialog = useDialogStore({
-      open: isMounted,
-    })
+const ModalOverlay = forwardRef(({ isOpen, children, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+  const [isMounted, setElement] = useModalAnimation(isOpen)
+  const dialog = useDialogStore({
+    open: isMounted,
+  })
 
-    if (!isMounted) {
-      return null
-    }
+  if (!isMounted) {
+    return null
+  }
 
-    return (
-      <Dialog
-        tabIndex={0}
-        className="h-full w-full"
-        backdropProps={{
-          className: '!z-modal',
-          style: {
-            position: !portal ? 'absolute' : 'fixed',
-          },
-        }}
-        ref={mergeRefs([setElement, ref])}
-        store={dialog}
-        portal={portal}
-        {...props}
-      >
-        {children}
-      </Dialog>
-    )
-  },
-)
+  return (
+    <Dialog
+      tabIndex={0}
+      className="fixed top-0 left-0 z-modal h-full w-full"
+      ref={mergeRefs([setElement, ref])}
+      store={dialog}
+      {...props}
+    >
+      {children}
+    </Dialog>
+  )
+})
 
 export default ModalOverlay

packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -90,22 +90,24 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
     setUseDeviceSettings(!useDeviceSettings)
   }
 
-  const changeAutoLightTheme = (value: string, item: DropdownItem) => {
-    if (item.icon === PremiumFeatureIconName) {
+  const changeAutoLightTheme = (value: string) => {
+    const item = themeItems.find((item) => item.value === value)
+    if (item && item.icon === PremiumFeatureIconName) {
       premiumModal.activate(`${item.label} theme`)
-    } else {
-      application.setPreference(PrefKey.AutoLightThemeIdentifier, value as FeatureIdentifier).catch(console.error)
-      setAutoLightTheme(value)
+      return
     }
+    application.setPreference(PrefKey.AutoLightThemeIdentifier, value as FeatureIdentifier).catch(console.error)
+    setAutoLightTheme(value)
   }
 
-  const changeAutoDarkTheme = (value: string, item: DropdownItem) => {
-    if (item.icon === PremiumFeatureIconName) {
+  const changeAutoDarkTheme = (value: string) => {
+    const item = themeItems.find((item) => item.value === value)
+    if (item && item.icon === PremiumFeatureIconName) {
       premiumModal.activate(`${item.label} theme`)
-    } else {
-      application.setPreference(PrefKey.AutoDarkThemeIdentifier, value as FeatureIdentifier).catch(console.error)
-      setAutoDarkTheme(value)
+      return
     }
+    application.setPreference(PrefKey.AutoDarkThemeIdentifier, value as FeatureIdentifier).catch(console.error)
+    setAutoDarkTheme(value)
   }
 
   return (

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>