@furystack/shades-common-components 14.0.0 → 15.0.0

package/src/components/suggest/index.tsx

@@ -82,6 +82,15 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
 
     useHostProps({
       'data-opened': isOpened ? '' : undefined,
+      tabIndex: -1,
+      'data-spatial-nav-target': '',
+      onfocus: (ev: FocusEvent) => {
+        const host = ev.currentTarget as HTMLElement
+        const input = host.querySelector('input')
+        if (input) {
+          input.focus()
+        }
+      },
     })
     useDisposable('isLoadingSubscription', () =>
       manager.isLoading.subscribe((isLoading) => {
@@ -107,7 +116,10 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
       <div
         ref={wrapperRef}
         className="suggest-wrapper"
-        onkeyup={(ev) => {
+        onkeydown={(ev) => {
+          const hasSuggestions = manager.isOpened.getValue() && manager.currentSuggestions.getValue().length > 0
+          if (!hasSuggestions) return
+
           if (ev.key === 'Enter') {
             ev.preventDefault()
             manager.selectSuggestion()
@@ -123,7 +135,8 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
               Math.min(manager.selectedIndex.getValue() + 1, manager.currentSuggestions.getValue().length - 1),
             )
           }
-
+        }}
+        oninput={(ev) => {
           void manager.getSuggestion({ injector, term: (ev.target as HTMLInputElement).value })
         }}
       >

package/src/components/tabs.tsx

@@ -115,6 +115,10 @@ export const Tabs = Shade<{
       color: cssVariableTheme.text.primary,
       boxShadow: `inset 0 -2px 0 ${cssVariableTheme.palette.primary.main}`,
     },
+    '& .shade-tab-btn:focus-visible': {
+      outline: cssVariableTheme.action.focusOutline,
+      outlineOffset: '-2px',
+    },
 
     // Close button (span with role="button" via event delegation)
     '& .shade-tab-close': {

package/src/components/tree/tree-item.tsx

@@ -69,10 +69,20 @@ export const TreeItem: <T>(props: TreeItemProps<T>, children: ChildrenList) => J
     const isSelected = selection.includes(item)
 
     useHostProps({
+      tabIndex: isFocused ? 0 : -1,
+      'data-spatial-nav-target': '',
       role: 'treeitem',
       'aria-level': (level + 1).toString(),
       'aria-selected': isSelected.toString(),
       ...(hasChildren ? { 'aria-expanded': isExpanded.toString() } : {}),
+      onfocus: () => {
+        if (treeService.focusedItem.getValue() !== item) {
+          treeService.focusedItem.setValue(item)
+        }
+        if (!treeService.hasFocus.getValue()) {
+          treeService.hasFocus.setValue(true)
+        }
+      },
       onclick: (ev: MouseEvent) => {
         treeService.handleItemClick(item, ev)
       },
@@ -93,10 +103,15 @@ export const TreeItem: <T>(props: TreeItemProps<T>, children: ChildrenList) => J
       queueMicrotask(() => {
         const el = wrapperRef.current
         if (!el) return
+        const hostEl = el.closest('shade-tree-item') as HTMLElement
+        if (!hostEl) return
+
+        if (document.activeElement !== hostEl) {
+          hostEl.focus({ preventScroll: true })
+        }
+
         const scrollContainer = el.closest('shade-tree') as HTMLElement
         if (scrollContainer) {
-          const hostEl = el.closest('shade-tree-item') as HTMLElement
-          if (!hostEl) return
           const containerRect = scrollContainer.getBoundingClientRect()
           const itemRect = hostEl.getBoundingClientRect()
           const itemTopInContainer = itemRect.top - containerRect.top
@@ -105,12 +120,12 @@ export const TreeItem: <T>(props: TreeItemProps<T>, children: ChildrenList) => J
           if (itemTopInContainer < 0) {
             scrollContainer.scrollTo({
               top: scrollContainer.scrollTop + itemTopInContainer,
-              behavior: 'smooth',
+              behavior: 'instant',
             })
           } else if (itemBottomInContainer > scrollContainer.clientHeight) {
             scrollContainer.scrollTo({
               top: scrollContainer.scrollTop + (itemBottomInContainer - scrollContainer.clientHeight),
-              behavior: 'smooth',
+              behavior: 'instant',
             })
           }
         }

package/src/components/tree/tree.spec.tsx

@@ -501,8 +501,107 @@ describe('Tree', () => {
     })
   })
 
+  describe('item spatial navigation attributes', () => {
+    it('should set data-spatial-nav-target on tree items', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const treeData = createTreeData()
+        const service = createTestService()
+
+        service.rootItems.setValue(treeData)
+        service.updateFlattenedNodes()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Tree<TestNode>
+              rootItems={treeData}
+              treeService={service}
+              renderItem={(node) => <span>{node.name}</span>}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const items = document.querySelectorAll('shade-tree-item')
+        for (const item of items) {
+          expect(item.hasAttribute('data-spatial-nav-target')).toBe(true)
+        }
+
+        service[Symbol.dispose]()
+      })
+    })
+
+    it('should set tabIndex 0 on focused item and -1 on others', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const treeData = createTreeData()
+        const service = createTestService()
+
+        service.rootItems.setValue(treeData)
+        service.updateFlattenedNodes()
+        service.focusedItem.setValue(treeData[1])
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Tree<TestNode>
+              rootItems={treeData}
+              treeService={service}
+              renderItem={(node) => <span>{node.name}</span>}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const items = document.querySelectorAll<HTMLDivElement>('shade-tree-item')
+        expect(items[0]?.tabIndex).toBe(-1)
+        expect(items[1]?.tabIndex).toBe(0)
+
+        service[Symbol.dispose]()
+      })
+    })
+
+    it('should sync focusedItem on item onfocus', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const treeData = createTreeData()
+        const service = createTestService()
+
+        service.rootItems.setValue(treeData)
+        service.updateFlattenedNodes()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Tree<TestNode>
+              rootItems={treeData}
+              treeService={service}
+              renderItem={(node) => <span>{node.name}</span>}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const items = document.querySelectorAll('shade-tree-item')
+        items[1]?.dispatchEvent(new FocusEvent('focus'))
+
+        expect(service.focusedItem.getValue()).toEqual(treeData[1])
+        expect(service.hasFocus.getValue()).toBe(true)
+
+        service[Symbol.dispose]()
+      })
+    })
+  })
+
   describe('keyboard navigation', () => {
-    it('should handle ArrowDown to move focus to next item', async () => {
+    it('should not handle ArrowDown (delegated to spatial navigation)', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const treeData = createTreeData()
@@ -529,7 +628,7 @@ describe('Tree', () => {
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
 
-        expect(service.focusedItem.getValue()).toEqual(treeData[1])
+        expect(service.focusedItem.getValue()).toEqual(treeData[0])
 
         service[Symbol.dispose]()
       })

package/src/components/tree/tree.tsx

@@ -5,6 +5,8 @@ import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { TreeService } from '../../services/tree-service.js'
 import { TreeItem } from './tree-item.js'
 
+let nextTreeId = 0
+
 export type TreeItemState = {
   isFocused: boolean
   isSelected: boolean
@@ -21,6 +23,13 @@ export type TreeProps<T> = {
   variant?: 'contained' | 'outlined'
   onItemActivate?: (item: T) => void
   onSelectionChange?: (selected: T[]) => void
+  /**
+   * Section name for spatial navigation scoping.
+   * Sets `data-nav-section` on the tree host so that SpatialNavigationService
+   * constrains arrow-key navigation within the tree.
+   * Auto-generated per instance when not provided.
+   */
+  navSection?: string
 } & PartialElement<HTMLDivElement>
 
 export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
@@ -31,7 +40,9 @@ export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Eleme
     width: '100%',
     overflow: 'auto',
   },
-  render: ({ props, useDisposable, useObservable, useHostProps }) => {
+  render: ({ props, useDisposable, useObservable, useHostProps, useState }) => {
+    const [navSectionId] = useState('navSectionId', String(nextTreeId++))
+
     useDisposable('keydown-handler', () => {
       const listener = (ev: KeyboardEvent) => {
         props.treeService.handleKeyDown(ev)
@@ -43,8 +54,8 @@ export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Eleme
           }
         }
       }
-      window.addEventListener('keydown', listener)
-      return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener) }
+      window.addEventListener('keydown', listener, true)
+      return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener, true) }
     })
 
     if (props.treeService.rootItems.getValue() !== props.rootItems) {
@@ -82,9 +93,16 @@ export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Eleme
     useHostProps({
       'data-variant': props.variant || undefined,
       'data-tree-instance-id': treeInstanceId.value,
+      'data-nav-section': props.navSection ?? `tree-${navSectionId}`,
       role: 'tree',
       'aria-multiselectable': 'true',
       onclick: () => props.treeService.hasFocus.setValue(true),
+      onfocusout: (ev: FocusEvent) => {
+        const hostEl = ev.currentTarget as HTMLElement
+        if (!ev.relatedTarget || !hostEl.contains(ev.relatedTarget as Node)) {
+          props.treeService.hasFocus.setValue(false)
+        }
+      },
     })
 
     const [flattenedNodes] = useObservable('flattenedNodes', props.treeService.flattenedNodes)

package/src/services/collection-service.spec.ts

@@ -206,8 +206,8 @@ describe('CollectionService', () => {
       })
     })
 
-    describe('ArrowUp key', () => {
-      it('Should move focus to previous entry', () => {
+    describe('Arrow keys', () => {
+      it('Should move focus to the previous entry on ArrowUp', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
@@ -222,22 +222,22 @@ describe('CollectionService', () => {
         })
       })
 
-      it('Should not go below index 0', () => {
+      it('Should not preventDefault ArrowUp at the first entry', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
           service.hasFocus.setValue(true)
           service.focusedEntry.setValue(testEntries[0])
 
-          service.handleKeyDown(createKeyboardEvent('ArrowUp'))
+          const ev = createKeyboardEvent('ArrowUp')
+          service.handleKeyDown(ev)
 
+          expect(ev.preventDefault).not.toHaveBeenCalled()
           expect(service.focusedEntry.getValue()).toBe(testEntries[0])
         })
       })
-    })
 
-    describe('ArrowDown key', () => {
-      it('Should move focus to next entry', () => {
+      it('Should move focus to the next entry on ArrowDown', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
@@ -252,60 +252,69 @@ describe('CollectionService', () => {
         })
       })
 
-      it('Should not exceed the last entry', () => {
+      it('Should not preventDefault ArrowDown at the last entry', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
           service.hasFocus.setValue(true)
           service.focusedEntry.setValue(testEntries[2])
 
-          service.handleKeyDown(createKeyboardEvent('ArrowDown'))
+          const ev = createKeyboardEvent('ArrowDown')
+          service.handleKeyDown(ev)
 
+          expect(ev.preventDefault).not.toHaveBeenCalled()
           expect(service.focusedEntry.getValue()).toBe(testEntries[2])
         })
       })
-    })
 
-    describe('Home key', () => {
-      it('Should focus the first entry', () => {
+      it('Should not handle arrow keys when focusedEntry is undefined', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
           service.hasFocus.setValue(true)
-          service.focusedEntry.setValue(testEntries[2])
+          service.focusedEntry.setValue(undefined)
 
-          service.handleKeyDown(createKeyboardEvent('Home'))
+          const evDown = createKeyboardEvent('ArrowDown')
+          service.handleKeyDown(evDown)
+          expect(evDown.preventDefault).not.toHaveBeenCalled()
 
-          expect(service.focusedEntry.getValue()).toBe(testEntries[0])
+          const evUp = createKeyboardEvent('ArrowUp')
+          service.handleKeyDown(evUp)
+          expect(evUp.preventDefault).not.toHaveBeenCalled()
         })
       })
     })
 
-    describe('End key', () => {
-      it('Should focus the last entry', () => {
+    describe('Home key', () => {
+      it('Should focus the first entry and preventDefault', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
           service.hasFocus.setValue(true)
-          service.focusedEntry.setValue(testEntries[0])
+          service.focusedEntry.setValue(testEntries[2])
 
-          service.handleKeyDown(createKeyboardEvent('End'))
+          const ev = createKeyboardEvent('Home')
+          service.handleKeyDown(ev)
 
-          expect(service.focusedEntry.getValue()).toBe(testEntries[2])
+          expect(ev.preventDefault).toHaveBeenCalled()
+          expect(service.focusedEntry.getValue()).toBe(testEntries[0])
         })
       })
     })
 
-    describe('Tab key', () => {
-      it('Should toggle hasFocus', () => {
+    describe('End key', () => {
+      it('Should focus the last entry and preventDefault', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
           service.hasFocus.setValue(true)
+          service.focusedEntry.setValue(testEntries[0])
 
-          service.handleKeyDown(createKeyboardEvent('Tab'))
+          const ev = createKeyboardEvent('End')
+          service.handleKeyDown(ev)
 
-          expect(service.hasFocus.getValue()).toBe(false)
+          expect(ev.preventDefault).toHaveBeenCalled()
+          expect(service.focusedEntry.getValue()).toBe(testEntries[2])
         })
       })
     })

package/src/services/collection-service.ts

@@ -62,6 +62,19 @@ export class CollectionService<T>
 
   public focusedEntry = new ObservableValue<T | undefined>(undefined)
 
+  /**
+   * Stores the focused entry captured on pointerdown, before the focus event
+   * can update focusedEntry. Used as the anchor for SHIFT+click range selection.
+   * Call {@link setFocusAnchor} from `onpointerdown` to snapshot the anchor
+   * before focus shifts.
+   */
+  private focusAnchor: T | undefined = undefined
+
+  /** Snapshot the current focused entry as the anchor for SHIFT+click range selection. */
+  public setFocusAnchor(): void {
+    this.focusAnchor = this.focusedEntry.getValue()
+  }
+
   public selection = new ObservableValue<T[]>([])
 
   public searchTerm = new ObservableValue('')
@@ -107,28 +120,36 @@ export class CollectionService<T>
           }
 
           break
-        case 'ArrowUp':
-          ev.preventDefault()
-          this.focusedEntry.setValue(entries[Math.max(0, entries.findIndex((e) => e === focusedEntry) - 1)])
+        case 'ArrowDown': {
+          if (focusedEntry !== undefined) {
+            const currentIndex = entries.indexOf(focusedEntry)
+            if (currentIndex >= 0 && currentIndex < entries.length - 1) {
+              ev.preventDefault()
+              this.focusedEntry.setValue(entries[currentIndex + 1])
+            }
+          }
           break
-        case 'ArrowDown':
-          ev.preventDefault()
-          this.focusedEntry.setValue(
-            entries[Math.min(entries.length - 1, entries.findIndex((e) => e === focusedEntry) + 1)],
-          )
+        }
+        case 'ArrowUp': {
+          if (focusedEntry !== undefined) {
+            const currentIndex = entries.indexOf(focusedEntry)
+            if (currentIndex > 0) {
+              ev.preventDefault()
+              this.focusedEntry.setValue(entries[currentIndex - 1])
+            }
+          }
           break
+        }
         case 'Home': {
+          ev.preventDefault()
           this.focusedEntry.setValue(entries[0])
           break
         }
         case 'End': {
+          ev.preventDefault()
           this.focusedEntry.setValue(entries[entries.length - 1])
           break
         }
-        case 'Tab': {
-          this.hasFocus.setValue(!hasFocus)
-          break
-        }
         case 'Escape': {
           this.searchTerm.setValue('')
           this.selection.setValue([])
@@ -152,7 +173,8 @@ export class CollectionService<T>
   public handleRowClick(entry: T, ev: MouseEvent) {
     this.emit('onRowClick', entry)
     const currentSelectionValue = this.selection.getValue()
-    const lastFocused = this.focusedEntry.getValue()
+    const lastFocused = this.focusAnchor ?? this.focusedEntry.getValue()
+    this.focusAnchor = undefined
     if (ev.ctrlKey) {
       if (currentSelectionValue.includes(entry)) {
         this.selection.setValue(currentSelectionValue.filter((s) => s !== entry))

package/src/services/css-variable-theme.spec.ts

@@ -35,6 +35,7 @@ describe('css-variable-theme', () => {
       expect(cssVariableTheme.action.selectedBackground).toBe('var(--shades-theme-action-selected-background)')
       expect(cssVariableTheme.action.activeBackground).toBe('var(--shades-theme-action-active-background)')
       expect(cssVariableTheme.action.focusRing).toBe('var(--shades-theme-action-focus-ring)')
+      expect(cssVariableTheme.action.focusOutline).toBe('var(--shades-theme-action-focus-outline)')
       expect(cssVariableTheme.action.disabledOpacity).toBe('var(--shades-theme-action-disabled-opacity)')
       expect(cssVariableTheme.action.backdrop).toBe('var(--shades-theme-action-backdrop)')
       expect(cssVariableTheme.action.subtleBorder).toBe('var(--shades-theme-action-subtle-border)')

package/src/services/css-variable-theme.ts

@@ -75,6 +75,7 @@ export const cssVariableTheme = {
     selectedBackground: 'var(--shades-theme-action-selected-background)',
     activeBackground: 'var(--shades-theme-action-active-background)',
     focusRing: 'var(--shades-theme-action-focus-ring)',
+    focusOutline: 'var(--shades-theme-action-focus-outline)',
     disabledOpacity: 'var(--shades-theme-action-disabled-opacity)',
     backdrop: 'var(--shades-theme-action-backdrop)',
     subtleBorder: 'var(--shades-theme-action-subtle-border)',
@@ -176,6 +177,30 @@ export const cssVariableTheme = {
 export const buildTransition = (...specs: Array<[property: string, duration: string, easing: string]>): string =>
   specs.map(([prop, dur, ease]) => `${prop} ${dur} ${ease}`).join(', ')
 
+const FOCUS_STYLES_ID = 'shades-focus-visible-styles'
+
+/**
+ * Injects global `:focus-visible` styles using the theme's `focusOutline` CSS variable.
+ * Ensures keyboard/spatial navigation focus is visible while mouse clicks produce no outline.
+ * Safe to call multiple times — the style element is only created once.
+ */
+export const injectFocusVisibleStyles = (): void => {
+  if (document.getElementById(FOCUS_STYLES_ID)) return
+
+  const style = document.createElement('style')
+  style.id = FOCUS_STYLES_ID
+  style.textContent = `
+:focus-visible {
+  outline: ${cssVariableTheme.action.focusOutline};
+  outline-offset: 2px;
+}
+:focus:not(:focus-visible) {
+  outline: none;
+}
+`
+  document.head.appendChild(style)
+}
+
 const extractVarName = (key: string): string => key.replace(/^var\(/, '').replace(/[,)].*/, '')
 
 export const setCssVariable = (key: string, value: string, root: HTMLElement) => {

package/src/services/list-service.spec.ts

@@ -1,5 +1,5 @@
 import { using } from '@furystack/utils'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { ListService } from './list-service.js'
 
 type TestItem = { id: number; name: string }
@@ -80,51 +80,33 @@ describe('ListService', () => {
       })
     })
 
-    it('should handle ArrowDown to move focus to next item', () => {
+    it('should not handle ArrowDown (delegated to spatial navigation)', () => {
       const { service, items } = createTestService()
       using(service, () => {
         service.hasFocus.setValue(true)
         service.focusedItem.setValue(items[0])
 
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-
-        expect(service.focusedItem.getValue()).toBe(items[1])
-      })
-    })
-
-    it('should not move past last item on ArrowDown', () => {
-      const { service, items } = createTestService()
-      using(service, () => {
-        service.hasFocus.setValue(true)
-        service.focusedItem.setValue(items[2])
-
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-
-        expect(service.focusedItem.getValue()).toBe(items[2])
-      })
-    })
-
-    it('should handle ArrowUp to move focus to previous item', () => {
-      const { service, items } = createTestService()
-      using(service, () => {
-        service.hasFocus.setValue(true)
-        service.focusedItem.setValue(items[1])
-
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+        const ev = new KeyboardEvent('keydown', { key: 'ArrowDown', cancelable: true })
+        const preventSpy = vi.spyOn(ev, 'preventDefault')
+        service.handleKeyDown(ev)
 
         expect(service.focusedItem.getValue()).toBe(items[0])
+        expect(preventSpy).not.toHaveBeenCalled()
       })
     })
 
-    it('should not move past first item on ArrowUp', () => {
+    it('should not handle ArrowUp (delegated to spatial navigation)', () => {
       const { service, items } = createTestService()
       using(service, () => {
         service.hasFocus.setValue(true)
-        service.focusedItem.setValue(items[0])
+        service.focusedItem.setValue(items[1])
 
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+        const ev = new KeyboardEvent('keydown', { key: 'ArrowUp', cancelable: true })
+        const preventSpy = vi.spyOn(ev, 'preventDefault')
+        service.handleKeyDown(ev)
 
-        expect(service.focusedItem.getValue()).toBe(items[0])
+        expect(service.focusedItem.getValue()).toBe(items[1])
+        expect(preventSpy).not.toHaveBeenCalled()
       })
     })
 
@@ -232,17 +214,6 @@ describe('ListService', () => {
       })
     })
 
-    it('should handle Tab to toggle focus', () => {
-      const { service } = createTestService()
-      using(service, () => {
-        service.hasFocus.setValue(true)
-
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'Tab' }))
-
-        expect(service.hasFocus.getValue()).toBe(false)
-      })
-    })
-
     it('should handle Escape to clear selection and search term', () => {
       const { service, items } = createTestService()
       using(service, () => {