refactor: use ariakit for super note popovers

packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx

@@ -19,9 +19,7 @@ export function BlockPickerMenuItem({
     <li
       key={option.key}
       tabIndex={-1}
-      className={`border-bottom gap-3 border-[0.5px] border-border ${PopoverItemClassNames} ${
+      className={`gap-3 ${PopoverItemClassNames} ${isSelected ? PopoverItemSelectedClassNames : ''}`}
-        isSelected ? PopoverItemSelectedClassNames : ''
-      }`}
       ref={option.setRefElement}
       role="option"
       aria-selected={isSelected}

packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx

@@ -8,9 +8,7 @@ import { BlockPickerOption } from './BlockPickerOption'
 import { BlockPickerMenuItem } from './BlockPickerMenuItem'
 import { GetDynamicPasswordBlocks, GetPasswordBlockOption } from '../Blocks/Password'
 import { GetDynamicTableBlocks, GetTableBlockOption } from '../Blocks/Table'
-import Popover from '@/Components/Popover/Popover'
 import { GetDatetimeBlockOptions } from '../Blocks/DateTime'
-import { isMobileScreen } from '@/Utils'
 import { useApplication } from '@/Components/ApplicationProvider'
 import { GetRemoteImageBlockOption } from '../Blocks/RemoteImage'
 import { InsertRemoteImageDialog } from '../RemoteImagePlugin/RemoteImagePlugin'
@@ -29,6 +27,8 @@ import { GetQuoteBlockOption } from '../Blocks/Quote'
 import { GetDividerBlockOption } from '../Blocks/Divider'
 import { GetCollapsibleBlockOption } from '../Blocks/Collapsible'
 import { GetEmbedsBlockOptions } from '../Blocks/Embeds'
+import { Popover, PopoverProvider } from '@ariakit/react'
+import { PopoverClassNames } from '../ClassNames'
 
 export default function BlockPickerMenuPlugin(): JSX.Element {
   const [editor] = useLexicalComposerContext()
@@ -111,6 +111,7 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
   return (
     <>
       {modal}
+      <PopoverProvider>
         <LexicalTypeaheadMenuPlugin<BlockPickerOption>
           onQueryChange={setQueryString}
           onSelectOption={onSelectOption}
@@ -120,18 +121,16 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
             if (!anchorElementRef.current || !options.length) {
               return null
             }
-
             return (
               <Popover
-              title="Block picker"
+                open
-              align="start"
+                getAnchorRect={() => anchorElementRef.current!.getBoundingClientRect()}
-              anchorElement={anchorElementRef.current}
+                autoFocus={false}
-              open={true}
+                autoFocusOnShow={false}
-              disableMobileFullscreenTakeover={true}
+                className={PopoverClassNames}
-              side={isMobileScreen() ? 'top' : 'bottom'}
+                fitViewport
-              maxHeight={(mh) => mh / 2}
               >
-              <ul>
+                <ul className="divide-y divide-border">
                   {options.map((option, i: number) => (
                     <BlockPickerMenuItem
                       index={i}
@@ -152,6 +151,7 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
             )
           }}
         />
+      </PopoverProvider>
     </>
   )
 }

packages/web/src/javascripts/Components/SuperEditor/Plugins/ClassNames.ts

@@ -1,9 +1,7 @@
 import { classNames } from '@standardnotes/utils'
 
-export const PopoverClassNames = classNames(
+export const PopoverClassNames =
-  'z-dropdown-menu w-full',
+  'max-h-[min(var(--popover-available-height,_50vh),_50vh)] w-[--popover-available-width] overflow-y-auto rounded border border-[--popover-border-color] bg-default shadow-main [backdrop-filter:var(--popover-backdrop-filter)] md:max-w-xs md:bg-[--popover-background-color]'
-  'cursor-auto flex-col overflow-y-auto rounded bg-default h-auto',
-)
 
 export const PopoverItemClassNames = classNames(
   'flex w-full items-center text-base overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground',

packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx

@@ -7,11 +7,11 @@ import { ItemOption } from './ItemOption'
 import { useApplication } from '@/Components/ApplicationProvider'
 import { ContentType, SNNote } from '@standardnotes/snjs'
 import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
-import Popover from '@/Components/Popover/Popover'
 import { INSERT_BUBBLE_COMMAND, INSERT_FILE_COMMAND } from '../Commands'
 import { useLinkingController } from '../../../../Controllers/LinkingControllerProvider'
-import { isMobileScreen } from '@/Utils'
 import { useTypeaheadAllowingSpacesAndPunctuation } from './useTypeaheadAllowingSpacesAndPunctuation'
+import { Popover, PopoverProvider } from '@ariakit/react'
+import { PopoverClassNames } from '../ClassNames'
 
 type Props = {
   currentNote: SNNote
@@ -83,6 +83,7 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
   }, [application, editor, currentNote, queryString, linkingController])
 
   return (
+    <PopoverProvider>
       <LexicalTypeaheadMenuPlugin<ItemOption>
         onQueryChange={setQueryString}
         onSelectOption={onSelectOption}
@@ -92,18 +93,16 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
           if (!anchorElementRef.current || !options.length) {
             return null
           }
-
           return (
             <Popover
-            title="Select item"
+              open
-            align="start"
+              getAnchorRect={() => anchorElementRef.current!.getBoundingClientRect()}
-            anchorElement={anchorElementRef}
+              autoFocus={false}
-            open={true}
+              autoFocusOnShow={false}
-            disableMobileFullscreenTakeover={true}
+              className={PopoverClassNames}
-            side={isMobileScreen() ? 'top' : 'bottom'}
+              fitViewport
-            maxHeight={(mh) => mh / 2}
             >
-            <ul>
+              <ul className="divide-y divide-border">
                 {options.map((option, i: number) => (
                   <ItemSelectionItemComponent
                     searchQuery={queryString || ''}
@@ -125,5 +124,6 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
           )
         }}
       />
+    </PopoverProvider>
   )
 }