chore(release): publish

- @standardnotes/[email protected]
 - @standardnotes/[email protected]
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].7

packages/desktop/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.23.243](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-24)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.242](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.241](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.240](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.239](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.238](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-22)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.237](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-21)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
 ## [3.23.236](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-21)
 
 **Note:** Version bump only for package @standardnotes/desktop

packages/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@standardnotes/desktop",
   "main": "./app/dist/index.js",
-  "version": "3.23.236",
+  "version": "3.23.243",
   "license": "AGPL-3.0-or-later",
   "author": "Standard Notes.",
   "private": true,

packages/mobile/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.43.30](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-24)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.43.29](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.43.28](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.43.27](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.43.26](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.43.25](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-22)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.43.24](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-21)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
 ## [3.43.23](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-21)
 
 **Note:** Version bump only for package @standardnotes/mobile

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/mobile",
-  "version": "3.43.23",
+  "version": "3.43.30",
   "author": "Standard Notes.",
   "private": true,
   "license": "AGPL-3.0-or-later",

packages/releases/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.172](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-24)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.171](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.170](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.169](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.168](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.167](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-22)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.166](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-21)
+
+**Note:** Version bump only for package @standardnotes/releases
+
 ## [1.3.165](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-21)
 
 **Note:** Version bump only for package @standardnotes/releases

packages/releases/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/releases",
-  "version": "1.3.165",
+  "version": "1.3.172",
   "license": "AGPL-3.0-or-later",
   "main": "dist/releases.json",
   "types": "dist/index.d.ts",

packages/web/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.84.7](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-24)
+
+### Bug Fixes
+
+* dont show item list "hover" indicator on mobile ([4181d7f](https://github.com/standardnotes/app/commit/4181d7ff2c6ff76bfd2eeaea5fa770d04062fb7c))
+
+## [3.84.6](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+### Bug Fixes
+
+* listed menu closing when clicking inside challenge modal ([#1863](https://github.com/standardnotes/app/issues/1863)) ([bb63cbe](https://github.com/standardnotes/app/commit/bb63cbe2d15dd47d62a2cc34f824ed4bec6091de))
+* **web:** emoji length computation ([#1864](https://github.com/standardnotes/app/issues/1864)) ([bda16b8](https://github.com/standardnotes/app/commit/bda16b88c0708bb28f2b7da2fdf4cad2af1936d5))
+
+## [3.84.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+### Bug Fixes
+
+* note option changes not updating correctly ([#1862](https://github.com/standardnotes/app/issues/1862)) ([9a509a7](https://github.com/standardnotes/app/commit/9a509a79c0e226b561d6606bf96907086326ae8f))
+
+## [3.84.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+### Bug Fixes
+
+* new note button on mobile when no account ([47b3286](https://github.com/standardnotes/app/commit/47b3286235da7b5f63aef5fbe0d8c9b34d1f4558))
+
+## [3.84.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-23)
+
+### Bug Fixes
+
+* link autocomplete input keyboard navigation ([#1859](https://github.com/standardnotes/app/issues/1859)) ([b98f5e2](https://github.com/standardnotes/app/commit/b98f5e2d02d77b65e9e7a08b73fb8d22a467f7ec))
+
+## [3.84.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-22)
+
+### Bug Fixes
+
+* hide items list button on desktop ([fc6c6ba](https://github.com/standardnotes/app/commit/fc6c6bad2ca0e8ec8b7e1410a6a88713ec7e6ec3))
+
+## [3.84.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-21)
+
+### Bug Fixes
+
+* new tag creation ([e63b4f0](https://github.com/standardnotes/app/commit/e63b4f0592ed32ecd3cdb01e84c9ca47d61fe243))
+
 # [3.84.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-21)
 
 ### Features

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/web",
-  "version": "3.84.0",
+  "version": "3.84.7",
   "license": "AGPL-3.0-or-later",
   "main": "dist/app.js",
   "author": "Standard Notes.",
@@ -30,7 +30,7 @@
     "@babel/preset-env": "*",
     "@babel/preset-typescript": "^7.18.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-    "@types/jest": "^29.0.2",
+    "@types/jest": "^29.2.0",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.26",
@@ -47,8 +47,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.2",
-    "jest-environment-jsdom": "^28.1.2",
+    "jest": "^29.2.1",
+    "jest-environment-jsdom": "^29.2.1",
     "lint-staged": ">=12",
     "mini-css-extract-plugin": "^2.6.1",
     "node-sass": "*",
@@ -61,8 +61,8 @@
     "sass-loader": "*",
     "svg-jest": "^1.0.1",
     "tailwindcss": "^3.1.8",
-    "ts-jest": "^28.0.5",
-    "ts-loader": "^9.3.1",
+    "ts-jest": "^29.0.3",
+    "ts-loader": "^9.4.1",
     "typescript": "*",
     "webpack": "*",
     "webpack-dev-server": "*",

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -255,8 +255,8 @@ const ContentListView: FunctionComponent<Props> = ({
                   return
                 }
 
-                for (const file of files) {
-                  void filesController.uploadNewFile(file)
+                for (let i = 0; i < files.length; i++) {
+                  void filesController.uploadNewFile(files[i])
                 }
               }}
             />

packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx

@@ -83,7 +83,7 @@ const ContentListHeader = ({
           </Popover>
         </div>
         <button
-          className="absolute bottom-6 right-6 ml-3 flex h-13 w-13 cursor-pointer items-center justify-center rounded-full border border-solid border-transparent bg-info text-info-contrast hover:brightness-125 md:static md:h-8 md:w-8"
+          className="absolute bottom-6 right-6 z-editor-title-bar ml-3 flex h-13 w-13 cursor-pointer items-center justify-center rounded-full border border-solid border-transparent bg-info text-info-contrast hover:brightness-125 md:static md:h-8 md:w-8"
           title={addButtonLabel}
           aria-label={addButtonLabel}
           onClick={addNewItem}

packages/web/src/javascripts/Components/Icon/EmojiLength.spec.ts

@@ -0,0 +1,13 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { getEmojiLength } from './EmojiLength'
+
+describe('emoji length', () => {
+  it('returns the correct length', () => {
+    expect(getEmojiLength('✍️')).toEqual(1)
+    expect(getEmojiLength('👩‍👩‍👧‍👦')).toEqual(1)
+    expect(getEmojiLength('👩‍❤️‍💋‍👩')).toEqual(1)
+  })
+})

packages/web/src/javascripts/Components/Icon/EmojiLength.ts

@@ -0,0 +1,7 @@
+export function getEmojiLength(emoji: string): number {
+  try {
+    return [...new Intl.Segmenter().segment(emoji)].length
+  } catch (error) {
+    return [...emoji].length
+  }
+}

packages/web/src/javascripts/Components/Icon/IconPicker.tsx

@@ -2,6 +2,7 @@ import { EmojiString, Platform, VectorIconNameOrEmoji } from '@standardnotes/snj
 import { FunctionComponent, useMemo, useRef, useState } from 'react'
 import Dropdown from '../Dropdown/Dropdown'
 import { DropdownItem } from '../Dropdown/DropdownItem'
+import { getEmojiLength } from './EmojiLength'
 import { isIconEmoji } from './Icon'
 import { IconNameToSvgMapping } from './IconNameToSvgMapping'
 import { IconPickerType } from './IconPickerType'
@@ -72,7 +73,7 @@ const IconPicker = ({ selectedValue, onIconChange, platform, className }: Props)
   const handleEmojiChange = (value: EmojiString) => {
     setEmojiInputValue(value)
 
-    const emojiLength = [...value].length
+    const emojiLength = getEmojiLength(value)
     if (emojiLength === 1) {
       onIconChange(value)
       emojiInputRef.current?.blur()

packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx

@@ -92,6 +92,7 @@ const ItemLinkAutocompleteInput = ({ linkingController, focusPreviousItem, focus
         break
       case KeyboardKey.Down:
         if (searchQuery.length > 0) {
+          event.preventDefault()
           searchResultsMenuRef.current?.focus()
         }
         break

packages/web/src/javascripts/Components/NoteGroupView/MobileItemsListButton.tsx

@@ -19,7 +19,7 @@ const MobileItemsListButton = () => {
 
   return (
     <RoundIconButton
-      className="mr-3"
+      className="mr-3 md:hidden pointer-coarse:md-only:flex pointer-coarse:lg-only:flex"
       onClick={() => {
         if (isTabletScreenSize) {
           toggleNotesListOnTablets()

packages/web/src/javascripts/Components/NoteView/NoteView.tsx

@@ -898,8 +898,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
 
     const observer = new MutationObserver((records) => {
       for (const record of records) {
-        const removedNodes = record.removedNodes.values()
-        for (const node of removedNodes) {
+        record.removedNodes.forEach((node) => {
           if (node === editor) {
             this.removeTabObserver?.()
             this.removeTabObserver = undefined
@@ -907,7 +906,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
             editor.removeEventListener('scroll', this.resetScrollPosition)
             this.scrollPosition = 0
           }
-        }
+        })
       }
     })
 

packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts

@@ -28,8 +28,9 @@ export const usePopoverCloseOnClickOutside = ({
       const isAnchorElement = anchorElement ? anchorElement === event.target || anchorElement.contains(target) : false
       const closestPopoverId = target.closest('[data-popover]')?.getAttribute('data-popover')
       const isDescendantOfChildPopover = closestPopoverId && childPopovers.has(closestPopoverId)
+      const isDescendantOfChallengeModal = !!target.closest('.challenge-modal')
 
-      if (!isDescendantOfMenu && !isAnchorElement && !isDescendantOfChildPopover) {
+      if (!isDescendantOfMenu && !isAnchorElement && !isDescendantOfChildPopover && !isDescendantOfChallengeModal) {
         togglePopover()
       }
     }

packages/web/src/javascripts/Controllers/Navigation/NavigationController.ts

@@ -522,6 +522,7 @@ export class NavigationController
 
     runInAction(() => {
       this.editing_ = newTag
+      this.editingFrom = 'all'
     })
   }
 

packages/web/src/javascripts/Controllers/NotesController.ts

@@ -80,7 +80,7 @@ export class NotesController extends AbstractViewController {
   }
 
   public get selectedNotes(): SNNote[] {
-    return this.selectionController.getSelectedItems<SNNote>(ContentType.Note)
+    return this.selectionController.getFilteredSelectedItems<SNNote>(ContentType.Note)
   }
 
   get firstSelectedNote(): SNNote | undefined {

packages/web/src/javascripts/Controllers/SelectedItemsController.ts

@@ -26,6 +26,7 @@ export class SelectedItemsController
 {
   lastSelectedItem: ListableContentItem | undefined
   selectedUuids: Set<UuidString> = observable(new Set<UuidString>())
+  selectedItems: Record<UuidString, ListableContentItem> = {}
   private itemListController!: ItemListController
 
   override deinit(): void {
@@ -38,6 +39,7 @@ export class SelectedItemsController
 
     makeObservable(this, {
       selectedUuids: observable,
+      selectedItems: observable,
 
       selectedItemsCount: computed,
       selectedFiles: computed,
@@ -46,6 +48,7 @@ export class SelectedItemsController
 
       selectItem: action,
       setSelectedUuids: action,
+      setSelectedItems: action,
 
       hydrateFromPersistedValue: action,
     })
@@ -82,13 +85,22 @@ export class SelectedItemsController
     this.itemListController = itemListController
 
     this.disposers.push(
-      this.application.streamItems<SNNote | FileItem>([ContentType.Note, ContentType.File], ({ removed }) => {
-        runInAction(() => {
-          for (const removedNote of removed) {
-            this.removeFromSelectedUuids(removedNote.uuid)
-          }
-        })
-      }),
+      this.application.streamItems<SNNote | FileItem>(
+        [ContentType.Note, ContentType.File],
+        ({ changed, inserted, removed }) => {
+          runInAction(() => {
+            for (const removedItem of removed) {
+              this.removeSelectedItem(removedItem.uuid)
+            }
+
+            for (const item of [...changed, ...inserted]) {
+              if (this.selectedItems[item.uuid]) {
+                this.selectedItems[item.uuid] = item
+              }
+            }
+          })
+        },
+      ),
     )
   }
 
@@ -97,11 +109,11 @@ export class SelectedItemsController
   }
 
   get selectedItemsCount(): number {
-    return this.selectedUuids.size
+    return Object.keys(this.selectedItems).length
   }
 
   get selectedFiles(): FileItem[] {
-    return this.getSelectedItems<FileItem>(ContentType.File)
+    return this.getFilteredSelectedItems<FileItem>(ContentType.File)
   }
 
   get selectedFilesCount(): number {
@@ -109,31 +121,37 @@ export class SelectedItemsController
   }
 
   get firstSelectedItem() {
-    return this.application.items.findSureItem(Array.from(this.selectedUuids)[0]) as ListableContentItem
+    return Object.values(this.selectedItems)[0]
   }
 
-  getSelectedItems = <T extends ListableContentItem = ListableContentItem>(contentType?: ContentType): T[] => {
+  getSelectedItems = () => {
     const uuids = Array.from(this.selectedUuids)
-    return uuids.length > 0
-      ? (uuids
-          .map((uuid) => this.application.items.findSureItem(uuid))
-          .filter((item) => {
-            return !contentType ? true : item.content_type === contentType
-          }) as T[])
-      : []
+    return uuids.map((uuid) => this.application.items.findSureItem<SNNote | FileItem>(uuid)).filter((item) => !!item)
+  }
+
+  getFilteredSelectedItems = <T extends ListableContentItem = ListableContentItem>(contentType?: ContentType): T[] => {
+    return Object.values(this.selectedItems).filter((item) => {
+      return !contentType ? true : item.content_type === contentType
+    }) as T[]
+  }
+
+  setSelectedItems = () => {
+    this.selectedItems = Object.fromEntries(this.getSelectedItems().map((item) => [item.uuid, item]))
   }
 
   setSelectedUuids = (selectedUuids: Set<UuidString>) => {
     this.selectedUuids = new Set(selectedUuids)
+    this.setSelectedItems()
   }
 
-  private removeFromSelectedUuids = (uuid: UuidString) => {
+  private removeSelectedItem = (uuid: UuidString) => {
     this.selectedUuids.delete(uuid)
     this.setSelectedUuids(this.selectedUuids)
+    delete this.selectedItems[uuid]
   }
 
   public deselectItem = (item: { uuid: ListableContentItem['uuid'] }): void => {
-    this.removeFromSelectedUuids(item.uuid)
+    this.removeSelectedItem(item.uuid)
 
     if (item.uuid === this.lastSelectedItem?.uuid) {
       this.lastSelectedItem = undefined
@@ -244,7 +262,7 @@ export class SelectedItemsController
 
     if (userTriggered && (hasMeta || hasCtrl)) {
       if (this.selectedUuids.has(uuid) && hasMoreThanOneSelected) {
-        this.removeFromSelectedUuids(uuid)
+        this.removeSelectedItem(uuid)
       } else if (isAuthorizedForAccess) {
         this.setSelectedUuids(this.selectedUuids.add(uuid))
         this.lastSelectedItem = item

packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts

@@ -1,27 +1,24 @@
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
-import { useCallback, useState, useEffect, RefObject } from 'react'
+import { useCallback, useEffect, RefObject, useRef } from 'react'
 
 export const useListKeyboardNavigation = (container: RefObject<HTMLElement | null>, initialFocus = 0) => {
-  const [listItems, setListItems] = useState<HTMLButtonElement[]>()
-  const [focusedItemIndex, setFocusedItemIndex] = useState<number>(initialFocus)
+  const listItems = useRef<HTMLButtonElement[]>([])
+  const focusedItemIndex = useRef<number>(initialFocus)
 
-  const focusItemWithIndex = useCallback(
-    (index: number, items?: HTMLButtonElement[]) => {
-      setFocusedItemIndex(index)
-      if (items && items.length > 0) {
-        items[index]?.focus()
-      } else {
-        listItems?.[index]?.focus()
-      }
-    },
-    [listItems],
-  )
+  const focusItemWithIndex = useCallback((index: number, items?: HTMLButtonElement[]) => {
+    focusedItemIndex.current = index
+    if (items && items.length > 0) {
+      items[index]?.focus()
+    } else {
+      listItems.current[index]?.focus()
+    }
+  }, [])
 
   useEffect(() => {
     if (container.current) {
       container.current.tabIndex = FOCUSABLE_BUT_NOT_TABBABLE
-      setListItems(Array.from(container.current.querySelectorAll('button')))
+      listItems.current = Array.from(container.current.querySelectorAll('button'))
     }
   }, [container])
 
@@ -33,47 +30,44 @@ export const useListKeyboardNavigation = (container: RefObject<HTMLElement | nul
         return
       }
 
-      if (!listItems?.length) {
-        setListItems(Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>))
+      listItems.current = Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>)
+
+      if (e.key === KeyboardKey.Up) {
+        let previousIndex = focusedItemIndex.current - 1
+        if (previousIndex < 0) {
+          previousIndex = listItems.current.length - 1
+        }
+        focusItemWithIndex(previousIndex)
       }
 
-      if (listItems) {
-        if (e.key === KeyboardKey.Up) {
-          let previousIndex = focusedItemIndex - 1
-          if (previousIndex < 0) {
-            previousIndex = listItems.length - 1
-          }
-          focusItemWithIndex(previousIndex)
-        }
-
-        if (e.key === KeyboardKey.Down) {
-          let nextIndex = focusedItemIndex + 1
-          if (nextIndex > listItems.length - 1) {
-            nextIndex = 0
-          }
-          focusItemWithIndex(nextIndex)
+      if (e.key === KeyboardKey.Down) {
+        let nextIndex = focusedItemIndex.current + 1
+        if (nextIndex > listItems.current.length - 1) {
+          nextIndex = 0
         }
+        focusItemWithIndex(nextIndex)
       }
     },
-    [container, focusItemWithIndex, focusedItemIndex, listItems],
+    [container, focusItemWithIndex],
   )
 
   const FIRST_ITEM_FOCUS_TIMEOUT = 20
 
   const containerFocusHandler = useCallback(() => {
-    let temporaryItems = listItems && listItems?.length > 0 ? listItems : []
-    if (!temporaryItems.length) {
-      temporaryItems = Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>)
-      setListItems(temporaryItems)
+    const items = Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>)
+    listItems.current = items
+
+    if (items.length < 1) {
+      return
     }
-    if (temporaryItems.length > 0) {
-      const selectedItemIndex = Array.from(temporaryItems).findIndex((item) => item.dataset.selected)
-      const indexToFocus = selectedItemIndex > -1 ? selectedItemIndex : initialFocus
-      setTimeout(() => {
-        focusItemWithIndex(indexToFocus, temporaryItems)
-      }, FIRST_ITEM_FOCUS_TIMEOUT)
-    }
-  }, [container, focusItemWithIndex, initialFocus, listItems])
+
+    const selectedItemIndex = Array.from(items).findIndex((item) => item.dataset.selected)
+    const indexToFocus = selectedItemIndex > -1 ? selectedItemIndex : initialFocus
+
+    setTimeout(() => {
+      focusItemWithIndex(indexToFocus, items)
+    }, FIRST_ITEM_FOCUS_TIMEOUT)
+  }, [container, focusItemWithIndex, initialFocus])
 
   useEffect(() => {
     const containerElement = container.current

packages/web/src/stylesheets/_items-column.scss

@@ -112,11 +112,16 @@
   }
 
   .content-list-item {
-    &.selected,
-    &:hover {
+    &.selected {
       background-color: var(--item-cell-selected-background-color);
     }
 
+    @media screen and (hover: hover) {
+      &:hover {
+        background-color: var(--item-cell-selected-background-color);
+      }
+    }
+
     ul {
       list-style: disc;
     }

packages/web/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../node_modules/@standardnotes/config/src/tsconfig.json",
   "compilerOptions": {
     "skipLibCheck": true,
+    "lib": ["ES2022"],
     "target": "ES2019",
     "module": "commonjs",
     "moduleResolution": "node",