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,
+    value,
-    renderCallback(props) {
+    setValue: onChange,
-      const { popoverElement, defaultRenderCallback } = props
+    placement: popoverPlacement || 'top',
-      defaultRenderCallback()
-      if (popoverElement) {
-        popoverElement.style.zIndex = 'var(--z-index-dropdown-menu)'
-      }
-    },
-    placement: popoverPlacement,
   })
 
-  const selectedValue = select.useState('value')
   const isExpanded = select.useState('open')
 
-  const currentItem = items.find((item) => item.value === selectedValue)
+  const currentItem = items.find((item) => item.value === value)
-
-  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])
 
   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(
+const ModalOverlay = forwardRef(({ isOpen, children, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
-  ({ isOpen, children, portal = true, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+  const [isMounted, setElement] = useModalAnimation(isOpen)
-    const [isMounted, setElement] = useModalAnimation(isOpen)
+  const dialog = useDialogStore({
-    const dialog = useDialogStore({
+    open: isMounted,
-      open: isMounted,
+  })
-    })
 
-    if (!isMounted) {
+  if (!isMounted) {
-      return null
+    return null
-    }
+  }
 
-    return (
+  return (
-      <Dialog
+    <Dialog
-        tabIndex={0}
+      tabIndex={0}
-        className="h-full w-full"
+      className="fixed top-0 left-0 z-modal h-full w-full"
-        backdropProps={{
+      ref={mergeRefs([setElement, ref])}
-          className: '!z-modal',
+      store={dialog}
-          style: {
+      {...props}
-            position: !portal ? 'absolute' : 'fixed',
+    >
-          },
+      {children}
-        }}
+    </Dialog>
-        ref={mergeRefs([setElement, ref])}
+  )
-        store={dialog}
+})
-        portal={portal}
-        {...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) => {
+  const changeAutoLightTheme = (value: string) => {
-    if (item.icon === PremiumFeatureIconName) {
+    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)
     }
+    application.setPreference(PrefKey.AutoLightThemeIdentifier, value as FeatureIdentifier).catch(console.error)
+    setAutoLightTheme(value)
   }
 
-  const changeAutoDarkTheme = (value: string, item: DropdownItem) => {
+  const changeAutoDarkTheme = (value: string) => {
-    if (item.icon === PremiumFeatureIconName) {
+    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)
     }
+    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>

yarn.lock

@@ -22,37 +22,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ariakit/core@npm:0.1.1":
+"@ariakit/core@npm:0.2.0":
-  version: 0.1.1
+  version: 0.2.0
-  resolution: "@ariakit/core@npm:0.1.1"
+  resolution: "@ariakit/core@npm:0.2.0"
-  checksum: b4db09f0f0fd5787ad5b76dad33ea01cfc5ba4cbdbfd19fe790bd8663b92beb379fd9f0f5c1bfee8448564b15250c5e1fa571e4fa515b60178faa29e5db5930c
+  checksum: f95e3db9ebb3a1b34ed8127f279c8d1a820ad04d42e59cb74b210df1bfb82bc7b5a3a2e965aeb089413015f2c7c573729230eb2e30494669c0a478a721aada3b
   languageName: node
   linkType: hard
 
-"@ariakit/react-core@npm:0.1.2":
+"@ariakit/react-core@npm:0.2.1":
-  version: 0.1.2
+  version: 0.2.1
-  resolution: "@ariakit/react-core@npm:0.1.2"
+  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":
+"@ariakit/react@npm:^0.2.1":
-  version: 0.1.2
+  version: 0.2.1
-  resolution: "@ariakit/react@npm:0.1.2"
+  resolution: "@ariakit/react@npm:0.2.1"
   dependencies:
-    "@ariakit/core": 0.1.1
+    "@ariakit/react-core": 0.2.1
-    "@ariakit/react-core": 0.1.2
-    "@floating-ui/dom": ^1.0.0
   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