chore: upgrade ariakit

packages/web/package.json

@@ -107,7 +107,7 @@
     "app/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write"
   },
   "dependencies": {
-    "@ariakit/react": "^0.1.2",
+    "@ariakit/react": "^0.2.1",
     "@lexical/headless": "0.10.0",
     "@radix-ui/react-slot": "^1.0.1"
   }

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,11 +6,9 @@ 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 ModalOverlay = forwardRef(({ isOpen, children, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
   const [isMounted, setElement] = useModalAnimation(isOpen)
   const dialog = useDialogStore({
     open: isMounted,
@@ -23,22 +21,14 @@ const ModalOverlay = forwardRef(
   return (
     <Dialog
       tabIndex={0}
-        className="h-full w-full"
-        backdropProps={{
-          className: '!z-modal',
-          style: {
-            position: !portal ? 'absolute' : 'fixed',
-          },
-        }}
+      className="fixed top-0 left-0 z-modal h-full w-full"
       ref={mergeRefs([setElement, ref])}
       store={dialog}
-        portal={portal}
       {...props}
     >
       {children}
     </Dialog>
   )
-  },
-)
+})
 
 export default ModalOverlay

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

@@ -90,23 +90,25 @@ 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 {
+      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 {
+      return
+    }
     application.setPreference(PrefKey.AutoDarkThemeIdentifier, value as FeatureIdentifier).catch(console.error)
     setAutoDarkTheme(value)
   }
-  }
 
   return (
     <PreferencesPane>

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,11 +14,29 @@ const StyledTooltip = ({
   children: ReactNode
   className?: string
   label: string
-} & Partial<TooltipStoreProps>) => {
+} & Partial<TooltipOptions>) => {
   const tooltip = useTooltipStore({
     timeout: 350,
-    renderCallback(props) {
-      const { popoverElement, anchorElement } = props
+  })
+  const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+
+  if (isMobile) {
+    return <>{children}</>
+  }
+
+  return (
+    <>
+      <TooltipAnchor store={tooltip} as={Slot}>
+        {children}
+      </TooltipAnchor>
+      <Tooltip
+        store={tooltip}
+        className={classNames(
+          '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')
 
@@ -41,26 +59,8 @@ const StyledTooltip = ({
           })
 
           Object.assign(popoverElement.style, styles)
-    },
-    ...props,
-  })
-  const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
-
-  if (isMobile) {
-    return <>{children}</>
-  }
-
-  return (
-    <>
-      <TooltipAnchor store={tooltip} as={Slot}>
-        {children}
-      </TooltipAnchor>
-      <Tooltip
-        store={tooltip}
-        className={classNames(
-          'z-tooltip max-w-max rounded border border-border bg-contrast py-1.5 px-3 text-sm text-foreground shadow',
-          className,
-        )}
+        }}
+        {...props}
       >
         {label}
       </Tooltip>

yarn.lock

@@ -22,37 +22,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ariakit/core@npm:0.1.1":
-  version: 0.1.1
-  resolution: "@ariakit/core@npm:0.1.1"
-  checksum: b4db09f0f0fd5787ad5b76dad33ea01cfc5ba4cbdbfd19fe790bd8663b92beb379fd9f0f5c1bfee8448564b15250c5e1fa571e4fa515b60178faa29e5db5930c
+"@ariakit/core@npm:0.2.0":
+  version: 0.2.0
+  resolution: "@ariakit/core@npm:0.2.0"
+  checksum: f95e3db9ebb3a1b34ed8127f279c8d1a820ad04d42e59cb74b210df1bfb82bc7b5a3a2e965aeb089413015f2c7c573729230eb2e30494669c0a478a721aada3b
   languageName: node
   linkType: hard
 
-"@ariakit/react-core@npm:0.1.2":
-  version: 0.1.2
-  resolution: "@ariakit/react-core@npm:0.1.2"
+"@ariakit/react-core@npm:0.2.1":
+  version: 0.2.1
+  resolution: "@ariakit/react-core@npm:0.2.1"
   dependencies:
-    "@ariakit/core": 0.1.1
+    "@ariakit/core": 0.2.0
+    "@floating-ui/dom": ^1.0.0
     use-sync-external-store: ^1.2.0
   peerDependencies:
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
-  checksum: c42738d48ed4cfc1b6afb6cdcc9399970e2f90d7ff5d1d3fab99e9c7383e10ecffd11d0d6faeeb4dcada13bf4eb9268543930675a572fcca58aee88dfb695c7a
+  checksum: c10ba749afd48f16372bbed161587043dd1f97641b782f159031d4dafce71119b555403f99d71584e121b77b83d1f323578867119b08d779c49c34a22bab92f6
   languageName: node
   linkType: hard
 
-"@ariakit/react@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "@ariakit/react@npm:0.1.2"
+"@ariakit/react@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "@ariakit/react@npm:0.2.1"
   dependencies:
-    "@ariakit/core": 0.1.1
-    "@ariakit/react-core": 0.1.2
-    "@floating-ui/dom": ^1.0.0
+    "@ariakit/react-core": 0.2.1
   peerDependencies:
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
-  checksum: 5f6687b59ae04c14e90d22d486fe0d9a97df5e2b31d88f248d084fa95ea3f16333231f9f92dff025f21c712975904b3f6e0f9747896f5920583d4bc43c96b11d
+  checksum: 55de2d395fa6a2ae3ef3b383f7559af155e177b9065fe07b8baf8984689bc2ad0bb8531aac1c97ad2ca388c5cf3199b3407ffe3f292533d076bfd0613405d3d3
   languageName: node
   linkType: hard
 
@@ -4761,7 +4760,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@standardnotes/web@workspace:packages/web"
   dependencies:
-    "@ariakit/react": ^0.1.2
+    "@ariakit/react": ^0.2.1
     "@babel/core": "*"
     "@babel/plugin-proposal-class-properties": ^7.18.6
     "@babel/plugin-transform-react-jsx": ^7.19.0