refactor: migrate disclosure & combobox from reach-ui (#2316)

2023-04-21 22:56:09 +05:30
parent bf294eccd4
commit c02c45b916
13 changed files with 171 additions and 362 deletions
--- a/.yarn/cache/@reach-auto-id-npm-0.18.0-f919ca8edd-75a37a0a09.zip
+++ b/.yarn/cache/@reach-auto-id-npm-0.18.0-f919ca8edd-75a37a0a09.zip
--- a/.yarn/cache/@reach-disclosure-npm-0.18.0-2fdc238043-7786674320.zip
+++ b/.yarn/cache/@reach-disclosure-npm-0.18.0-2fdc238043-7786674320.zip
--- a/.yarn/cache/@reach-polymorphic-npm-0.18.0-31b4a0e8fe-0d62260a55.zip
+++ b/.yarn/cache/@reach-polymorphic-npm-0.18.0-31b4a0e8fe-0d62260a55.zip
--- a/.yarn/cache/@reach-utils-npm-0.18.0-a458ed585d-eeda20a74c.zip
+++ b/.yarn/cache/@reach-utils-npm-0.18.0-a458ed585d-eeda20a74c.zip
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -30,7 +30,6 @@
    "@babel/preset-typescript": "^7.18.6",
    "@lexical/react": "0.9.2",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@reach/disclosure": "^0.18.0",
    "@simplewebauthn/browser": "^7.1.0",
    "@standardnotes/authenticator": "^2.3.9",
    "@standardnotes/autobiography-theme": "^1.2.7",
--- a/packages/web/src/javascripts/Components/ItemSelectionDropdown/ItemSelectionDropdown.tsx
+++ b/packages/web/src/javascripts/Components/ItemSelectionDropdown/ItemSelectionDropdown.tsx
@@ -1,13 +1,10 @@
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import { doesItemMatchSearchQuery } from '@/Utils/Items/Search/doesItemMatchSearchQuery'
-import { Disclosure, DisclosurePanel } from '@reach/disclosure'
-import { classNames, ContentType, DecryptedItem, naturalSort } from '@standardnotes/snjs'
+import { Combobox, ComboboxItem, ComboboxPopover, useComboboxStore, VisuallyHidden } from '@ariakit/react'
+import { ContentType, DecryptedItem, naturalSort } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { ChangeEventHandler, FocusEventHandler, useCallback, useEffect, useRef, useState } from 'react'
+import { useDeferredValue, useEffect, useState } from 'react'
 import { useApplication } from '../ApplicationProvider'
 import LinkedItemMeta from '../LinkedItems/LinkedItemMeta'
-import Menu from '../Menu/Menu'

 type Props = {
  contentTypes: ContentType[]
@@ -18,41 +15,11 @@ type Props = {
 const ItemSelectionDropdown = ({ contentTypes, placeholder, onSelection }: Props) => {
  const application = useApplication()

-  const [searchQuery, setSearchQuery] = useState('')
-  const [dropdownVisible, setDropdownVisible] = useState(false)
-
-  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>('auto')
-  const containerRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const searchResultsMenuRef = useRef<HTMLMenuElement>(null)
+  const combobox = useComboboxStore()
+  const value = combobox.useState('value')
+  const searchQuery = useDeferredValue(value)
  const [items, setItems] = useState<DecryptedItem[]>([])

-  const showDropdown = () => {
-    const { clientHeight } = document.documentElement
-    const inputRect = inputRef.current?.getBoundingClientRect()
-    if (inputRect) {
-      setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2)
-      setDropdownVisible(true)
-    }
-  }
-
-  const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
-    setDropdownVisible(visible)
-    setSearchQuery('')
-  })
-
-  const onBlur: FocusEventHandler = (event) => {
-    closeOnBlur(event)
-  }
-
-  const onSearchQueryChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    setSearchQuery(event.currentTarget.value)
-  }
-
-  const handleFocus = () => {
-    showDropdown()
-  }
-
  useEffect(() => {
    const searchableItems = naturalSort(application.items.getItems(contentTypes), 'title')
    const filteredItems = searchableItems.filter((item) => {
@@ -61,70 +28,38 @@ const ItemSelectionDropdown = ({ contentTypes, placeholder, onSelection }: Props
    setItems(filteredItems)
  }, [searchQuery, application, contentTypes])

-  const onSelectItem = useCallback(
-    (item: DecryptedItem) => {
-      onSelection(item)
-      setSearchQuery('')
-      setDropdownVisible(false)
-    },
-    [onSelection],
-  )
-
  return (
-    <div className="relative" ref={containerRef}>
-      <Disclosure open={dropdownVisible} onChange={showDropdown}>
-        <input
-          ref={inputRef}
-          className={classNames(
-            'mr-10 w-70',
-            'bg-transparent text-sm text-text focus:border-b-2 focus:border-solid focus:border-info lg:text-xs',
-            'no-border h-7 focus:shadow-none focus:outline-none',
-          )}
-          value={searchQuery}
-          onChange={onSearchQueryChange}
-          type="text"
+    <div>
+      <label>
+        <VisuallyHidden>Select an item</VisuallyHidden>
+        <Combobox
+          store={combobox}
          placeholder={placeholder}
-          onFocus={handleFocus}
-          onBlur={onBlur}
-          autoComplete="off"
+          className="h-7 w-70 bg-transparent text-sm text-text focus:border-b-2 focus:border-info focus:shadow-none focus:outline-none lg:text-xs"
        />
-
-        {dropdownVisible && (
-          <DisclosurePanel
-            className={classNames(
-              'mr-10 w-70',
-              'absolute z-dropdown-menu flex flex-col overflow-y-auto rounded bg-default py-2 shadow-main',
-            )}
-            style={{
-              maxHeight: dropdownMaxHeight,
-            }}
-            tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-            onBlur={closeOnBlur}
-          >
-            <Menu
-              isOpen={dropdownVisible}
-              a11yLabel="Tag search results"
-              ref={searchResultsMenuRef}
-              shouldAutoFocus={false}
+      </label>
+      <ComboboxPopover
+        store={combobox}
+        className="z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded bg-default py-2 shadow-main"
+      >
+        {items.length > 0 ? (
+          items.map((item) => (
+            <ComboboxItem
+              key={item.uuid}
+              className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info-backdrop"
+              hideOnClick
+              onClick={() => {
+                combobox.setValue('')
+                onSelection(item)
+              }}
            >
-              {items.map((item) => {
-                return (
-                  <button
-                    key={item.uuid}
-                    className={classNames(
-                      'flex w-full items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast',
-                      'hover:text-foreground focus:bg-info-backdrop',
-                    )}
-                    onClick={() => onSelectItem(item)}
-                  >
-                    <LinkedItemMeta item={item} searchQuery={searchQuery} />
-                  </button>
-                )
-              })}
-            </Menu>
-          </DisclosurePanel>
+              <LinkedItemMeta item={item} searchQuery={searchQuery} />
+            </ComboboxItem>
+          ))
+        ) : (
+          <div className="px-2">No results found</div>
        )}
-      </Disclosure>
+      </ComboboxPopover>
    </div>
  )
 }
--- a/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
@@ -1,26 +1,18 @@
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  FormEventHandler,
-  KeyboardEventHandler,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import { Disclosure, DisclosurePanel } from '@reach/disclosure'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { FormEventHandler, KeyboardEventHandler, useDeferredValue, useEffect, useRef } from 'react'
 import { observer } from 'mobx-react-lite'
 import { classNames } from '@standardnotes/utils'
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
-import LinkedItemSearchResults from './LinkedItemSearchResults'
 import { LinkingController } from '@/Controllers/LinkingController'
-import { KeyboardKey } from '@standardnotes/ui-services'
 import { ElementIds } from '@/Constants/ElementIDs'
-import Menu from '../Menu/Menu'
 import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
 import { useApplication } from '../ApplicationProvider'
-import { DecryptedItem } from '@standardnotes/snjs'
+import { DecryptedItem, SNNote } from '@standardnotes/snjs'
+import { Combobox, ComboboxItem, ComboboxPopover, useComboboxStore, VisuallyHidden } from '@ariakit/react'
+import LinkedItemMeta from './LinkedItemMeta'
+import { LinkedItemSearchResultsAddTagOption } from './LinkedItemSearchResultsAddTagOption'
+import { Slot } from '@radix-ui/react-slot'
+import Icon from '../Icon/Icon'
+import { PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
+import { KeyboardKey } from '@standardnotes/ui-services'

 type Props = {
  linkingController: LinkingController
@@ -45,33 +37,13 @@ const ItemLinkAutocompleteInput = ({

  const tagsLinkedToItem = getLinkedTagsForItem(item) || []

-  const [searchQuery, setSearchQuery] = useState('')
+  const combobox = useComboboxStore()
+  const value = combobox.useState('value')
+  const searchQuery = useDeferredValue(value)
+
  const { unlinkedItems, shouldShowCreateTag } = getLinkingSearchResults(searchQuery, application, item)

-  const [dropdownVisible, setDropdownVisible] = useState(false)
-  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>('auto')
-
-  const containerRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const searchResultsMenuRef = useRef<HTMLMenuElement>(null)
-
-  const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
-    setDropdownVisible(visible)
-    setSearchQuery('')
-  })
-
-  const showDropdown = () => {
-    const { clientHeight } = document.documentElement
-    const inputRect = inputRef.current?.getBoundingClientRect()
-    if (inputRect) {
-      setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2)
-      setDropdownVisible(true)
-    }
-  }
-
-  const onSearchQueryChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    setSearchQuery(event.currentTarget.value)
-  }
+  const inputRef = useRef<HTMLInputElement | null>(null)

  const onFormSubmit: FormEventHandler = async (event) => {
    event.preventDefault()
@@ -84,11 +56,6 @@ const ItemLinkAutocompleteInput = ({
    if (focusedId !== ElementIds.ItemLinkAutocompleteInput) {
      setFocusedId(ElementIds.ItemLinkAutocompleteInput)
    }
-    showDropdown()
-  }
-
-  const onBlur: FocusEventHandler = (event) => {
-    closeOnBlur(event)
  }

  const onKeyDown: KeyboardEventHandler = (event) => {
@@ -98,12 +65,6 @@ const ItemLinkAutocompleteInput = ({
          focusPreviousItem()
        }
        break
-      case KeyboardKey.Down:
-        if (searchQuery.length > 0) {
-          event.preventDefault()
-          searchResultsMenuRef.current?.focus()
-        }
-        break
    }
  }

@@ -113,70 +74,63 @@ const ItemLinkAutocompleteInput = ({
    }
  }, [focusedId])

-  const areSearchResultsVisible = dropdownVisible && (unlinkedItems.length > 0 || shouldShowCreateTag)
-
-  const handleMenuKeyDown: KeyboardEventHandler<HTMLMenuElement> = useCallback((event) => {
-    if (event.key === KeyboardKey.Escape) {
-      inputRef.current?.focus()
-    }
-  }, [])
-
  return (
-    <div ref={containerRef}>
+    <div>
      <form onSubmit={onFormSubmit}>
-        <Disclosure open={dropdownVisible} onChange={showDropdown}>
-          <input
-            ref={inputRef}
+        <label>
+          <VisuallyHidden>Link tags, notes or files</VisuallyHidden>
+          <Combobox
+            store={combobox}
+            placeholder="Link tags, notes, files..."
            className={classNames(
              `${tagsLinkedToItem.length > 0 ? 'w-80' : 'mr-10 w-70'}`,
-              'bg-transparent text-sm text-text focus:border-b-2 focus:border-solid focus:border-info lg:text-xs',
-              'no-border h-7 focus:shadow-none focus:outline-none',
+              'h-7 w-70 bg-transparent text-sm text-text focus:border-b-2 focus:border-info focus:shadow-none focus:outline-none lg:text-xs',
            )}
-            value={searchQuery}
-            onChange={onSearchQueryChange}
-            type="text"
-            placeholder="Link tags, notes, files..."
-            onBlur={onBlur}
+            title={hoverLabel}
+            id={ElementIds.ItemLinkAutocompleteInput}
+            ref={inputRef}
            onFocus={handleFocus}
            onKeyDown={onKeyDown}
-            id={ElementIds.ItemLinkAutocompleteInput}
-            autoComplete="off"
-            title={hoverLabel}
-            aria-label={hoverLabel}
          />
-          {areSearchResultsVisible && (
-            <DisclosurePanel
-              className={classNames(
-                tagsLinkedToItem.length > 0 ? 'w-80' : 'mr-10 w-70',
-                'absolute z-dropdown-menu flex flex-col overflow-y-auto rounded bg-default py-2 shadow-main',
-              )}
-              style={{
-                maxHeight: dropdownMaxHeight,
-              }}
-              onBlur={closeOnBlur}
-              tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-            >
-              <Menu
-                isOpen={areSearchResultsVisible}
-                a11yLabel="Unlinked items search results"
-                onKeyDown={handleMenuKeyDown}
-                ref={searchResultsMenuRef}
-                shouldAutoFocus={false}
-              >
-                <LinkedItemSearchResults
-                  createAndAddNewTag={createAndAddNewTag}
-                  linkItems={linkItems}
-                  item={item}
-                  results={unlinkedItems}
-                  searchQuery={searchQuery}
-                  shouldShowCreateTag={shouldShowCreateTag}
-                  onClickCallback={() => setSearchQuery('')}
-                  isEntitledToNoteLinking={isEntitledToNoteLinking}
-                />
-              </Menu>
-            </DisclosurePanel>
+        </label>
+        <ComboboxPopover
+          store={combobox}
+          className={classNames(
+            'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded bg-default py-2 shadow-main',
+            unlinkedItems.length === 0 && !shouldShowCreateTag && 'hidden',
          )}
-        </Disclosure>
+        >
+          {unlinkedItems.map((result) => {
+            const cannotLinkItem = !isEntitledToNoteLinking && result instanceof SNNote
+
+            return (
+              <ComboboxItem
+                key={result.uuid}
+                className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info-backdrop"
+                hideOnClick
+                onClick={() => {
+                  linkItems(item, result).catch(console.error)
+                  combobox.setValue('')
+                }}
+              >
+                <LinkedItemMeta item={result} searchQuery={searchQuery} />
+                {cannotLinkItem && <Icon type={PremiumFeatureIconName} className="ml-auto flex-shrink-0 text-info" />}
+              </ComboboxItem>
+            )
+          })}
+          {shouldShowCreateTag && (
+            <ComboboxItem
+              hideOnClick
+              as={Slot}
+              onClick={() => {
+                void createAndAddNewTag(searchQuery)
+                combobox.setValue('')
+              }}
+            >
+              <LinkedItemSearchResultsAddTagOption searchQuery={searchQuery} />
+            </ComboboxItem>
+          )}
+        </ComboboxPopover>
      </form>
    </div>
  )
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx
@@ -1,42 +1,49 @@
 import { classNames } from '@standardnotes/utils'
+import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'
 import Icon from '../Icon/Icon'

 type Props = {
  searchQuery: string
-  onClickCallback: (searchQuery: string) => void
+  onClickCallback?: (searchQuery: string) => void
  isFocused?: boolean
-}
+} & ComponentPropsWithoutRef<'button'>

-export const LinkedItemSearchResultsAddTagOption = ({ searchQuery, onClickCallback, isFocused }: Props) => {
-  return (
-    <button
-      className={classNames(
-        'group flex w-full items-center gap-2 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground',
-        'focus:bg-info-backdrop',
-        isFocused ? 'bg-contrast bg-info-backdrop text-foreground' : '',
-      )}
-      onClick={() => {
-        onClickCallback(searchQuery)
-      }}
-    >
-      <span className="flex-shrink-0 align-middle text-sm lg:text-xs">Create &amp; add tag</span>{' '}
-      <span
+export const LinkedItemSearchResultsAddTagOption = forwardRef(
+  ({ searchQuery, onClickCallback, isFocused, ...props }: Props, ref: ForwardedRef<HTMLButtonElement>) => {
+    return (
+      <button
        className={classNames(
-          'inline-flex min-w-0 items-center gap-1 rounded py-1 pl-1 pr-2 align-middle text-xs ',
-          'group-hover:bg-info group-hover:text-info-contrast',
-          isFocused ? 'bg-info text-info-contrast' : 'bg-contrast text-text',
+          'group flex w-full items-center gap-2 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground',
+          'focus:bg-info-backdrop [&[data-active-item]]:bg-info-backdrop',
+          isFocused ? 'bg-info-backdrop text-foreground' : '',
        )}
+        onClick={() => {
+          if (onClickCallback) {
+            onClickCallback(searchQuery)
+          }
+        }}
+        ref={ref}
+        {...props}
      >
-        <Icon
-          type="hashtag"
+        <span className="flex-shrink-0 align-middle text-sm lg:text-xs">Create &amp; add tag</span>{' '}
+        <span
          className={classNames(
-            'flex-shrink-0 group-hover:text-info-contrast',
-            isFocused ? 'text-info-contrast' : 'text-info',
+            'inline-flex min-w-0 items-center gap-1 rounded py-1 pl-1 pr-2 align-middle text-xs ',
+            'group-hover:bg-info group-hover:text-info-contrast',
+            isFocused ? 'bg-info text-info-contrast' : 'bg-contrast text-text',
          )}
-          size="small"
-        />
-        <span className="min-w-0 overflow-hidden text-ellipsis">{searchQuery}</span>
-      </span>
-    </button>
-  )
-}
+        >
+          <Icon
+            type="hashtag"
+            className={classNames(
+              'flex-shrink-0 group-hover:text-info-contrast',
+              isFocused ? 'text-info-contrast' : 'text-info',
+            )}
+            size="small"
+          />
+          <span className="min-w-0 overflow-hidden text-ellipsis">{searchQuery}</span>
+        </span>
+      </button>
+    )
+  },
+)
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/AuthAppInfoPopup.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/AuthAppInfoPopup.tsx
@@ -1,65 +1,21 @@
 import Icon from '@/Components/Icon/Icon'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
-import { FunctionComponent, useState, useRef, useEffect, MouseEventHandler } from 'react'
-import { IconType } from '@standardnotes/snjs'
+import { Hovercard, HovercardAnchor, useHovercardStore } from '@ariakit/react'

-type Props = {
-  className?: string
-  icon: IconType
-  onMouseEnter?: MouseEventHandler<HTMLButtonElement>
-  onMouseLeave?: MouseEventHandler<HTMLButtonElement>
-}
-
-const DisclosureIconButton: FunctionComponent<Props> = ({ className = '', icon, onMouseEnter, onMouseLeave }) => (
-  <DisclosureButton
-    onMouseEnter={onMouseEnter}
-    onMouseLeave={onMouseLeave}
-    className={`no-border cursor-pointer bg-transparent p-0 hover:brightness-125 ${className ?? ''}`}
-  >
-    <Icon type={icon} />
-  </DisclosureButton>
-)
-
-/**
- * AuthAppInfoPopup is an info icon that shows a tooltip when clicked
- * Tooltip is dismissible by clicking outside
- *
- * Note: it can be generalized but more use cases are required
- * @returns
- */
-const AuthAppInfoTooltip: FunctionComponent = () => {
-  const [isClicked, setClicked] = useState(false)
-  const [isHover, setHover] = useState(false)
-  const ref = useRef(null)
-
-  useEffect(() => {
-    const dismiss = () => setClicked(false)
-    document.addEventListener('mousedown', dismiss)
-    return () => {
-      document.removeEventListener('mousedown', dismiss)
-    }
-  }, [ref])
+const AuthAppInfoTooltip = () => {
+  const infoHovercard = useHovercardStore({
+    showTimeout: 100,
+  })

  return (
-    <Disclosure open={isClicked || isHover} onChange={() => setClicked(!isClicked)}>
-      <div className="relative">
-        <DisclosureIconButton
-          icon="info"
-          className="mt-1"
-          onMouseEnter={() => setHover(true)}
-          onMouseLeave={() => setHover(false)}
-        />
-        <DisclosurePanel>
-          <div
-            className={`bg-inverted-default text-inverted-default shadow-overlay w-103 -left-51
-absolute -top-10 rounded py-1.5 px-2 text-center`}
-          >
-            Some apps, like Google Authenticator, do not back up and restore your secret keys if you lose your device or
-            get a new one.
-          </div>
-        </DisclosurePanel>
-      </div>
-    </Disclosure>
+    <>
+      <HovercardAnchor store={infoHovercard}>
+        <Icon type="info" />
+      </HovercardAnchor>
+      <Hovercard store={infoHovercard} className=" max-w-76 rounded border border-border bg-default py-2 px-3 text-sm">
+        Some apps, like Google Authenticator, do not back up and restore your secret keys if you lose your device or get
+        a new one.
+      </Hovercard>
+    </>
  )
 }

--- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
@@ -78,7 +78,6 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
          }}
          classNameOverride={{
            wrapper: 'relative',
-            popover: 'bottom-full w-full max-h-max',
            button: 'focus:outline-none focus:shadow-none focus:ring-none',
          }}
        />
--- a/packages/web/src/javascripts/Components/Shared/AccordionItem.tsx
+++ b/packages/web/src/javascripts/Components/Shared/AccordionItem.tsx
@@ -15,14 +15,14 @@ const AccordionItem: FunctionComponent<Props> = ({ title, className = '', childr
  return (
    <div className={className}>
      <div
-        className={'relative flex cursor-pointer hover:underline'}
+        className="relative flex cursor-pointer items-center justify-between hover:underline"
        onClick={() => {
          setIsExpanded(!isExpanded)
        }}
      >
        <Title>{title}</Title>
        <ArrowDownCheckmarkIcon
-          className={'sn-accordion-arrow-icon absolute right-0'}
+          className="sn-accordion-arrow-icon"
          width={20}
          height={20}
          data-is-expanded={isExpanded}
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
@@ -11,9 +11,9 @@ import TabPanel from '../Tabs/TabPanel'
 import { useTabState } from '../Tabs/useTabState'
 import TabsContainer from '../Tabs/TabsContainer'
 import CopyableCodeBlock from '../Shared/CopyableCodeBlock'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { classNames } from '@standardnotes/utils'
 import Modal, { ModalAction } from '../Modal/Modal'
+import { Disclosure, DisclosureContent, useDisclosureStore } from '@ariakit/react'

 type Props = {
  controller: AddSmartViewModalController
@@ -77,7 +77,8 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
  const [shouldShowIconPicker, setShouldShowIconPicker] = useState(false)
  const iconPickerButtonRef = useRef<HTMLButtonElement>(null)

-  const [shouldShowJsonExamples, setShouldShowJsonExamples] = useState(false)
+  const jsonExamplesDisclosure = useDisclosureStore()
+  const showingJsonExamples = jsonExamplesDisclosure.useState('open')

  const toggleIconPicker = () => {
    setShouldShowIconPicker((shouldShow) => !shouldShow)
@@ -223,22 +224,26 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
              </TabPanel>
            </TabsContainer>
            {tabState.activeTab === 'custom' && (
-              <Disclosure open={shouldShowJsonExamples} onChange={() => setShouldShowJsonExamples((show) => !show)}>
-                <div className="flex flex-col gap-1.5 rounded-md border-2 border-info-backdrop bg-info-backdrop py-3 px-4">
-                  <DisclosureButton className="flex items-center justify-between focus:shadow-none focus:outline-none">
-                    <div className="text-sm font-semibold">Examples</div>
-                    <Icon type={shouldShowJsonExamples ? 'chevron-up' : 'chevron-down'} />
-                  </DisclosureButton>
-                  <DisclosurePanel className={classNames(shouldShowJsonExamples && 'flex', 'flex-col gap-2.5')}>
-                    <div className="text-sm font-medium">1. List notes that are conflicted copies of another note:</div>
-                    <CopyableCodeBlock code={ConflictedNotesExampleCode} />
-                    <div className="text-sm font-medium">
-                      2. List notes that have the tag `todo` but not the tag `completed`:
-                    </div>
-                    <CopyableCodeBlock code={ComplexCompoundExampleCode} />
-                  </DisclosurePanel>
-                </div>
-              </Disclosure>
+              <div className="flex flex-col gap-1.5 rounded-md border-2 border-info-backdrop bg-info-backdrop py-3 px-4">
+                <Disclosure
+                  store={jsonExamplesDisclosure}
+                  className="flex items-center justify-between focus:shadow-none focus:outline-none"
+                >
+                  <div className="text-sm font-semibold">Examples</div>
+                  <Icon type={showingJsonExamples ? 'chevron-up' : 'chevron-down'} />
+                </Disclosure>
+                <DisclosureContent
+                  store={jsonExamplesDisclosure}
+                  className={classNames(showingJsonExamples && 'flex', 'flex-col gap-2.5')}
+                >
+                  <div className="text-sm font-medium">1. List notes that are conflicted copies of another note:</div>
+                  <CopyableCodeBlock code={ConflictedNotesExampleCode} />
+                  <div className="text-sm font-medium">
+                    2. List notes that have the tag `todo` but not the tag `completed`:
+                  </div>
+                  <CopyableCodeBlock code={ComplexCompoundExampleCode} />
+                </DisclosureContent>
+              </div>
            )}
          </div>
        </div>
--- a/yarn.lock
+++ b/yarn.lock
@@ -4230,51 +4230,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@reach/auto-id@npm:0.18.0":
-  version: 0.18.0
-  resolution: "@reach/auto-id@npm:0.18.0"
-  dependencies:
-    "@reach/utils": 0.18.0
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: 75a37a0a09c382dfc358d37f3212cffdea2b4c80c2f555b7fee857af59a46e959324234be8dbb51c476fba0874ed93694254079192b478ce3e9abba5ce63fdec
-  languageName: node
-  linkType: hard
-
-"@reach/disclosure@npm:^0.18.0":
-  version: 0.18.0
-  resolution: "@reach/disclosure@npm:0.18.0"
-  dependencies:
-    "@reach/auto-id": 0.18.0
-    "@reach/polymorphic": 0.18.0
-    "@reach/utils": 0.18.0
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: 77866743202a87e1c608fb41a56180b6676894a71b9853a6ca45408c82962f85fb7c3405e10c296518fcba95b0e7a4848ca681a6d8beb6d4574d548e606316d9
-  languageName: node
-  linkType: hard
-
-"@reach/polymorphic@npm:0.18.0":
-  version: 0.18.0
-  resolution: "@reach/polymorphic@npm:0.18.0"
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-  checksum: 0d62260a55c71e0dc95f38867f24b3d699e0bb7ea2273c6fa5a1fa3d804269e2deb63a458f1f1eb7b74c32bc0add3ab31a1c2668c1dee6b2837187876d3c4cc2
-  languageName: node
-  linkType: hard
-
-"@reach/utils@npm:0.18.0":
-  version: 0.18.0
-  resolution: "@reach/utils@npm:0.18.0"
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: eeda20a74c1db71e95680c622371c6efc46e2c767b28902bc43b580654436a34ec7f8b5f63c51a7c4cc8fd48c94066e3215496ba5a053c96e65c7a9bdcdc2687
-  languageName: node
-  linkType: hard
-
 "@react-native-async-storage/async-storage@npm:1.17.11":
  version: 1.17.11
  resolution: "@react-native-async-storage/async-storage@npm:1.17.11"
@@ -5558,7 +5513,6 @@ __metadata:
    "@lexical/react": 0.9.2
    "@pmmmwh/react-refresh-webpack-plugin": ^0.5.10
    "@radix-ui/react-slot": ^1.0.1
-    "@reach/disclosure": ^0.18.0
    "@simplewebauthn/browser": ^7.1.0
    "@standardnotes/authenticator": ^2.3.9
    "@standardnotes/autobiography-theme": ^1.2.7