Revert "refactor: use ariakit for super note popovers"

This reverts commit 3c5c672.

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

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

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

@@ -8,7 +8,9 @@ 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'
@@ -27,8 +29,6 @@ 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,47 +111,47 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
   return (
     <>
       {modal}
-      <PopoverProvider>
-        <LexicalTypeaheadMenuPlugin<BlockPickerOption>
-          onQueryChange={setQueryString}
-          onSelectOption={onSelectOption}
-          triggerFn={checkForTriggerMatch}
-          options={options}
-          menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
-            if (!anchorElementRef.current || !options.length) {
-              return null
-            }
-            return (
-              <Popover
-                open
-                getAnchorRect={() => anchorElementRef.current!.getBoundingClientRect()}
-                autoFocus={false}
-                autoFocusOnShow={false}
-                className={PopoverClassNames}
-                fitViewport
-              >
-                <ul className="divide-y divide-border">
-                  {options.map((option, i: number) => (
-                    <BlockPickerMenuItem
-                      index={i}
-                      isSelected={selectedIndex === i}
-                      onClick={() => {
-                        setHighlightedIndex(i)
-                        selectOptionAndCleanUp(option)
-                      }}
-                      onMouseEnter={() => {
-                        setHighlightedIndex(i)
-                      }}
-                      key={option.key}
-                      option={option}
-                    />
-                  ))}
-                </ul>
-              </Popover>
-            )
-          }}
-        />
-      </PopoverProvider>
+      <LexicalTypeaheadMenuPlugin<BlockPickerOption>
+        onQueryChange={setQueryString}
+        onSelectOption={onSelectOption}
+        triggerFn={checkForTriggerMatch}
+        options={options}
+        menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+          if (!anchorElementRef.current || !options.length) {
+            return null
+          }
+
+          return (
+            <Popover
+              title="Block picker"
+              align="start"
+              anchorElement={anchorElementRef.current}
+              open={true}
+              disableMobileFullscreenTakeover={true}
+              side={isMobileScreen() ? 'top' : 'bottom'}
+              maxHeight={(mh) => mh / 2}
+            >
+              <ul>
+                {options.map((option, i: number) => (
+                  <BlockPickerMenuItem
+                    index={i}
+                    isSelected={selectedIndex === i}
+                    onClick={() => {
+                      setHighlightedIndex(i)
+                      selectOptionAndCleanUp(option)
+                    }}
+                    onMouseEnter={() => {
+                      setHighlightedIndex(i)
+                    }}
+                    key={option.key}
+                    option={option}
+                  />
+                ))}
+              </ul>
+            </Popover>
+          )
+        }}
+      />
     </>
   )
 }

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

@@ -1,7 +1,9 @@
 import { classNames } from '@standardnotes/utils'
 
-export const PopoverClassNames =
-  '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]'
+export const PopoverClassNames = classNames(
+  'z-dropdown-menu w-full',
+  '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,47 +83,47 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
   }, [application, editor, currentNote, queryString, linkingController])
 
   return (
-    <PopoverProvider>
-      <LexicalTypeaheadMenuPlugin<ItemOption>
-        onQueryChange={setQueryString}
-        onSelectOption={onSelectOption}
-        triggerFn={checkForTriggerMatch}
-        options={options}
-        menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
-          if (!anchorElementRef.current || !options.length) {
-            return null
-          }
-          return (
-            <Popover
-              open
-              getAnchorRect={() => anchorElementRef.current!.getBoundingClientRect()}
-              autoFocus={false}
-              autoFocusOnShow={false}
-              className={PopoverClassNames}
-              fitViewport
-            >
-              <ul className="divide-y divide-border">
-                {options.map((option, i: number) => (
-                  <ItemSelectionItemComponent
-                    searchQuery={queryString || ''}
-                    index={i}
-                    isSelected={selectedIndex === i}
-                    onClick={() => {
-                      setHighlightedIndex(i)
-                      selectOptionAndCleanUp(option)
-                    }}
-                    onMouseEnter={() => {
-                      setHighlightedIndex(i)
-                    }}
-                    key={option.key}
-                    option={option}
-                  />
-                ))}
-              </ul>
-            </Popover>
-          )
-        }}
-      />
-    </PopoverProvider>
+    <LexicalTypeaheadMenuPlugin<ItemOption>
+      onQueryChange={setQueryString}
+      onSelectOption={onSelectOption}
+      triggerFn={checkForTriggerMatch}
+      options={options}
+      menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+        if (!anchorElementRef.current || !options.length) {
+          return null
+        }
+
+        return (
+          <Popover
+            title="Select item"
+            align="start"
+            anchorElement={anchorElementRef}
+            open={true}
+            disableMobileFullscreenTakeover={true}
+            side={isMobileScreen() ? 'top' : 'bottom'}
+            maxHeight={(mh) => mh / 2}
+          >
+            <ul>
+              {options.map((option, i: number) => (
+                <ItemSelectionItemComponent
+                  searchQuery={queryString || ''}
+                  index={i}
+                  isSelected={selectedIndex === i}
+                  onClick={() => {
+                    setHighlightedIndex(i)
+                    selectOptionAndCleanUp(option)
+                  }}
+                  onMouseEnter={() => {
+                    setHighlightedIndex(i)
+                  }}
+                  key={option.key}
+                  option={option}
+                />
+              ))}
+            </ul>
+          </Popover>
+        )
+      }}
+    />
   )
 }