@open-mercato/ui 0.8.1-develop.7296.1.2111d779db → 0.9.0

package/src/backend/icons/lucideRegistry.generated.tsx

@@ -9,6 +9,7 @@ import {
   AlertCircle,
   AlertOctagon,
   AlertTriangle,
+  AlignLeft,
   Apple,
   Archive,
   AtSign,
@@ -73,9 +74,12 @@ import {
   GitPullRequestArrow,
   Globe,
   GraduationCap,
+  Grid3x3,
   Hammer,
   Hand,
   Handshake,
+  Hash,
+  Heading,
   Headphones,
   Heart,
   HelpCircle,
@@ -90,6 +94,7 @@ import {
   Link,
   List,
   ListChecks,
+  ListOrdered,
   ListX,
   Loader,
   Loader2,
@@ -110,9 +115,11 @@ import {
   PackagePlus,
   PackageSearch,
   PackageX,
+  Paperclip,
   PauseCircle,
   PencilLine,
   PenLine,
+  PenTool,
   Percent,
   Phone,
   PhoneCall,
@@ -126,7 +133,9 @@ import {
   Repeat2,
   Reply,
   RotateCcw,
+  Rows,
   Ruler,
+  Search,
   Send,
   Settings,
   Shapes,
@@ -138,6 +147,7 @@ import {
   ShoppingCart,
   Shuffle,
   Sliders,
+  SlidersHorizontal,
   Smartphone,
   Snowflake,
   Sparkles,
@@ -149,11 +159,14 @@ import {
   ThumbsUp,
   Ticket,
   Timer,
+  ToggleLeft,
+  ToggleRight,
   Trash2,
   TrendingUp,
   TriangleAlert,
   Trophy,
   Truck,
+  Type,
   Undo,
   Undo2,
   Unlock,
@@ -181,6 +194,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'alert-circle': AlertCircle,
   'alert-octagon': AlertOctagon,
   'alert-triangle': AlertTriangle,
+  'align-left': AlignLeft,
   'apple': Apple,
   'archive': Archive,
   'at-sign': AtSign,
@@ -245,9 +259,12 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'git-pull-request-arrow': GitPullRequestArrow,
   'globe': Globe,
   'graduation-cap': GraduationCap,
+  'grid-3x3': Grid3x3,
   'hammer': Hammer,
   'hand': Hand,
   'handshake': Handshake,
+  'hash': Hash,
+  'heading': Heading,
   'headphones': Headphones,
   'heart': Heart,
   'help-circle': HelpCircle,
@@ -262,6 +279,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'link': Link,
   'list': List,
   'list-checks': ListChecks,
+  'list-ordered': ListOrdered,
   'list-x': ListX,
   'loader': Loader,
   'loader-2': Loader2,
@@ -282,8 +300,10 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'package-plus': PackagePlus,
   'package-search': PackageSearch,
   'package-x': PackageX,
+  'paperclip': Paperclip,
   'pause-circle': PauseCircle,
   'pen-line': PenLine,
+  'pen-tool': PenTool,
   'pencil-line': PencilLine,
   'percent': Percent,
   'phone': Phone,
@@ -298,7 +318,9 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'repeat-2': Repeat2,
   'reply': Reply,
   'rotate-ccw': RotateCcw,
+  'rows': Rows,
   'ruler': Ruler,
+  'search': Search,
   'send': Send,
   'settings': Settings,
   'shapes': Shapes,
@@ -310,6 +332,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'shopping-cart': ShoppingCart,
   'shuffle': Shuffle,
   'sliders': Sliders,
+  'sliders-horizontal': SlidersHorizontal,
   'smartphone': Smartphone,
   'snowflake': Snowflake,
   'sparkles': Sparkles,
@@ -321,11 +344,14 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'thumbs-up': ThumbsUp,
   'ticket': Ticket,
   'timer': Timer,
+  'toggle-left': ToggleLeft,
+  'toggle-right': ToggleRight,
   'trash-2': Trash2,
   'trending-up': TrendingUp,
   'triangle-alert': TriangleAlert,
   'trophy': Trophy,
   'truck': Truck,
+  'type': Type,
   'undo': Undo,
   'undo-2': Undo2,
   'unlock': Unlock,

package/src/backend/injection/__tests__/eventBridge.test.tsx

@@ -1,5 +1,6 @@
 /** @jest-environment jsdom */
 import { act, renderHook } from '@testing-library/react'
+import { emitOrganizationScopeChanged } from '@open-mercato/shared/lib/frontend/organizationEvents'
 import { useEventBridge } from '../eventBridge'
 
 class EventSourceMock {
@@ -9,8 +10,14 @@ class EventSourceMock {
   onmessage: ((event: MessageEvent) => void) | null = null
   onerror: ((event: Event) => void) | null = null
   close = jest.fn()
+  readonly url: string
+  readonly options: EventSourceInit | undefined
+  readonly cookiesAtCreation: string
 
-  constructor() {
+  constructor(url: string | URL, options?: EventSourceInit) {
+    this.url = String(url)
+    this.options = options
+    this.cookiesAtCreation = document.cookie
     EventSourceMock.instances.push(this)
   }
 }
@@ -81,4 +88,43 @@ describe('useEventBridge connection lifecycle', () => {
     expect(EventSourceMock.instances).toHaveLength(2)
     unmount()
   })
+
+  it('reconnects immediately with current cookies when organization scope changes', () => {
+    document.cookie = 'om_selected_org=org-before; path=/'
+    const { unmount } = renderHook(() => useEventBridge())
+    const firstSource = EventSourceMock.instances[0]
+    act(() => firstSource.onopen?.(new Event('open')))
+
+    document.cookie = 'om_selected_org=org-after; path=/'
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-after', tenantId: 'tenant-1' })
+    })
+
+    expect(firstSource.close).toHaveBeenCalledTimes(1)
+    expect(EventSourceMock.instances).toHaveLength(2)
+    const replacementSource = EventSourceMock.instances[1]
+    expect(replacementSource.url).toBe('/api/events/stream')
+    expect(replacementSource.options).toEqual({ withCredentials: true })
+    expect(replacementSource.cookiesAtCreation).toContain('om_selected_org=org-after')
+    act(() => firstSource.onerror?.(new Event('error')))
+    expect(replacementSource.close).not.toHaveBeenCalled()
+    expect(EventSourceMock.instances).toHaveLength(2)
+    unmount()
+  })
+
+  it('keeps the open stream when the scope signal does not change the scope cookies', () => {
+    document.cookie = 'om_selected_org=org-same; path=/'
+    document.cookie = 'om_selected_tenant=tenant-1; path=/'
+    const { unmount } = renderHook(() => useEventBridge())
+    const source = EventSourceMock.instances[0]
+    act(() => source.onopen?.(new Event('open')))
+
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-same', tenantId: 'tenant-1' })
+    })
+
+    expect(source.close).not.toHaveBeenCalled()
+    expect(EventSourceMock.instances).toHaveLength(1)
+    unmount()
+  })
 })

package/src/backend/injection/eventBridge.ts

@@ -1,6 +1,7 @@
 "use client"
 import { useEffect, useRef } from 'react'
 import type { AppEventPayload } from '@open-mercato/shared/modules/widgets/injection'
+import { subscribeOrganizationScopeChanged } from '@open-mercato/shared/lib/frontend/organizationEvents'
 import { APP_EVENT_DOM_NAME } from './useAppEvent'
 import { createLogger } from '@open-mercato/shared/lib/logger'
 
@@ -12,6 +13,21 @@ const RECONNECT_BASE_MS = 1_000
 const RECONNECT_MAX_MS = 30_000
 const DEDUP_WINDOW_MS = 500
 const BRIDGE_RECONNECTED_EVENT_ID = 'om:bridge:reconnected'
+const SCOPE_COOKIE_NAMES = ['om_selected_org', 'om_selected_tenant'] as const
+
+function readScopeCookieSignature(): string {
+  if (typeof document === 'undefined') return ''
+  const values = new Map<string, string>()
+  for (const part of document.cookie.split(';')) {
+    const separatorIndex = part.indexOf('=')
+    if (separatorIndex < 0) continue
+    const name = part.slice(0, separatorIndex).trim()
+    if ((SCOPE_COOKIE_NAMES as readonly string[]).includes(name)) {
+      values.set(name, part.slice(separatorIndex + 1).trim())
+    }
+  }
+  return SCOPE_COOKIE_NAMES.map((name) => `${name}=${values.get(name) ?? ''}`).join(';')
+}
 
 type EventBridgeReadyWindow = { __omEventBridgeReady?: boolean }
 
@@ -41,6 +57,7 @@ export function useEventBridge(): void {
   const recentEvents = useRef<Map<string, number>>(new Map())
   const hasEverConnected = useRef(false)
   const reconnectPending = useRef(false)
+  const connectedScopeSignature = useRef<string | null>(null)
 
   useEffect(() => {
     let mounted = true
@@ -80,8 +97,10 @@ export function useEventBridge(): void {
       try {
         const source = new EventSource(SSE_ENDPOINT, { withCredentials: true })
         sourceRef.current = source
+        connectedScopeSignature.current = readScopeCookieSignature()
 
         source.onopen = () => {
+          if (sourceRef.current !== source) return
           const shouldEmitReconnect = hasEverConnected.current && reconnectPending.current
           hasEverConnected.current = true
           reconnectPending.current = false
@@ -103,6 +122,7 @@ export function useEventBridge(): void {
         }
 
         source.onmessage = (event) => {
+          if (sourceRef.current !== source) return
           resetHeartbeatTimer()
           if (!event.data || event.data === ':heartbeat') return
 
@@ -121,6 +141,7 @@ export function useEventBridge(): void {
         }
 
         source.onerror = () => {
+          if (sourceRef.current !== source) return
           if (hasEverConnected.current) {
             reconnectPending.current = true
           }
@@ -173,12 +194,26 @@ export function useEventBridge(): void {
       connect()
     }
 
+    function handleOrganizationScopeChange() {
+      if (sourceRef.current && connectedScopeSignature.current === readScopeCookieSignature()) return
+      if (hasEverConnected.current) reconnectPending.current = true
+      disconnect()
+      if (reconnectTimer.current) {
+        clearTimeout(reconnectTimer.current)
+        reconnectTimer.current = null
+      }
+      reconnectAttempts.current = 0
+      connect()
+    }
+
     document.addEventListener('visibilitychange', handleVisibilityChange)
+    const unsubscribeOrganizationScope = subscribeOrganizationScopeChanged(handleOrganizationScopeChange)
     connect()
 
     return () => {
       mounted = false
       document.removeEventListener('visibilitychange', handleVisibilityChange)
+      unsubscribeOrganizationScope()
       disconnect()
       if (reconnectTimer.current) {
         clearTimeout(reconnectTimer.current)

package/src/backend/inputs/LookupSelect.tsx

@@ -44,6 +44,16 @@ type LookupSelectProps = {
   defaultOpen?: boolean
 }
 
+function keepSelectedItem(
+  result: LookupSelectItem[],
+  selected: LookupSelectItem | null,
+  value: string | null,
+): LookupSelectItem[] {
+  if (!value || !selected || selected.id !== value) return result
+  if (result.some((item) => item.id === value)) return result
+  return [selected, ...result]
+}
+
 export function LookupSelect({
   value,
   onChange,
@@ -97,11 +107,17 @@ export function LookupSelect({
   const setQueryRef = React.useRef(setQuery)
   const onReadyRef = React.useRef(onReady)
   const optionsWasArrayRef = React.useRef(Array.isArray(options))
+  const valueRef = React.useRef(value)
+  const selectedItemRef = React.useRef<LookupSelectItem | null>(null)
 
   React.useEffect(() => {
     fetchItemsRef.current = fetchItems ?? fetchOptions
   }, [fetchItems, fetchOptions])
 
+  React.useEffect(() => {
+    valueRef.current = value
+  }, [value])
+
   React.useEffect(() => {
     onReadyRef.current = onReady
   }, [onReady])
@@ -215,10 +231,19 @@ export function LookupSelect({
       const requestId = Date.now()
       const fetcher = fetchItemsRef.current
       const loader = fetcher ?? (() => Promise.resolve(options ?? []))
-      loader(query.trim())
+      const trimmedQuery = query.trim()
+      loader(trimmedQuery)
         .then((result) => {
           if (cancelled) return
-          setItems(result)
+          // A set `value` opens the list with an empty query, and that browse
+          // fetch returns an arbitrary first page. Without this the stored
+          // selection vanished from the list whenever it fell outside that page,
+          // while the form still held its id. A typed query stays a pure search.
+          setItems(
+            trimmedQuery
+              ? result
+              : keepSelectedItem(result, selectedItemRef.current, valueRef.current),
+          )
         })
         .catch((err) => {
           if (cancelled) return
@@ -240,11 +265,15 @@ export function LookupSelect({
 
   React.useEffect(() => {
     if (!value) {
+      selectedItemRef.current = null
       setSelectedItem(null)
       return
     }
     const match = items.find((item) => item.id === value)
-    if (match) setSelectedItem(match)
+    if (match) {
+      selectedItemRef.current = match
+      setSelectedItem(match)
+    }
   }, [items, value])
 
   /*

package/src/backend/inputs/PhoneNumberField.tsx

@@ -725,7 +725,7 @@ export function PhoneNumberField({
           </SelectTrigger>
           <SelectContent align="start">
             {countryOptions.map(({ country: c, label }) => (
-              <SelectItem key={`${c.iso2}-${c.dialCode}`} value={c.iso2}>
+              <SelectItem key={`${c.iso2}-${c.dialCode}`} value={c.iso2} textValue={label}>
                 <SelectItemLeading>
                   <span className="text-base leading-none">{c.flag}</span>
                 </SelectItemLeading>

package/src/backend/inputs/TagsInput.tsx

@@ -67,6 +67,8 @@ export function TagsInput({
   const [asyncOptions, setAsyncOptions] = React.useState<TagsInputOption[]>([])
   const [loading, setLoading] = React.useState(false)
   const [touched, setTouched] = React.useState(false)
+  const [suggestionsDismissed, setSuggestionsDismissed] = React.useState(false)
+  const inputRef = React.useRef<HTMLInputElement>(null)
   const suppressBlurCommitRef = React.useRef(false)
   const suppressSuggestionsOnFocusRef = React.useRef(Boolean(autoFocus && suppressInitialSuggestionsOnFocus && !disabled))
   const valueRef = React.useRef(value)
@@ -141,6 +143,21 @@ export function TagsInput({
     }
   }, [disabled, input, loadSuggestions, touched])
 
+  const suggestionsOpen = !suggestionsDismissed
+    && ((loading && touched) || (!loading && filteredSuggestions.length > 0))
+
+  React.useEffect(() => {
+    if (!suggestionsOpen) return
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || event.target !== inputRef.current) return
+      event.preventDefault()
+      event.stopPropagation()
+      setSuggestionsDismissed(true)
+    }
+    window.addEventListener('keydown', handleEscape, { capture: true })
+    return () => window.removeEventListener('keydown', handleEscape, { capture: true })
+  }, [suggestionsOpen])
+
   const addValue = React.useCallback(
     (nextValue: string) => {
       if (disabled) return
@@ -226,6 +243,7 @@ export function TagsInput({
           )
         })}
         <input
+          ref={inputRef}
           className="flex-1 min-w-[80px] sm:min-w-[120px] border-0 py-1 text-sm outline-none disabled:bg-transparent"
           value={input}
           placeholder={placeholder || t('ui.inputs.tagsInput.placeholder', 'Add tag and press Enter')}
@@ -239,13 +257,16 @@ export function TagsInput({
             }
             if (showSuggestionsOnFocus) {
               setTouched(true)
+              setSuggestionsDismissed(false)
             }
           }}
           onMouseDown={() => {
             setTouched(true)
+            setSuggestionsDismissed(false)
           }}
           onChange={(event) => {
             setTouched(true)
+            setSuggestionsDismissed(false)
             setInput(event.target.value)
           }}
           onKeyDown={(event) => {
@@ -269,10 +290,10 @@ export function TagsInput({
             setInput('')
           }}
         />
-        {loading && touched ? (
-          <div className="basis-full mt-1 text-xs text-muted-foreground">Loading suggestions…</div>
+        {suggestionsOpen && loading && touched ? (
+          <div className="basis-full mt-1 text-xs text-muted-foreground">{t('ui.inputs.tagsInput.loading', 'Loading suggestions…')}</div>
         ) : null}
-        {!loading && filteredSuggestions.length ? (
+        {suggestionsOpen && !loading && filteredSuggestions.length ? (
           <div className="basis-full mt-1 flex flex-col gap-1">
             {filteredSuggestions.map((option) => (
               <Button

package/src/backend/inputs/__tests__/LookupSelect.test.tsx

@@ -5,7 +5,7 @@ jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
 }))
 
 import * as React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { LookupSelect } from '../LookupSelect'
 
 function getInput(container: HTMLElement): HTMLInputElement {
@@ -308,6 +308,171 @@ describe('LookupSelect selected value display', () => {
   })
 })
 
+// A set `value` opens the list and fires a browse fetch with an empty query. Its
+// result used to replace the items outright, so an edit form hydrated with
+// `value={storedId}` + `options={[storedOption]}` lost the stored selection from
+// the list whenever the record fell outside that arbitrary first page — the form
+// still held the id, but nothing on screen was marked as chosen.
+describe('LookupSelect keeps the selection across browse fetches', () => {
+  const STORED = { id: 'contractor-99', title: 'Stored Contractor' }
+  const FIRST_PAGE = [
+    { id: 'contractor-1', title: 'Alpha' },
+    { id: 'contractor-2', title: 'Beta' },
+  ]
+
+  it('keeps a hydrated selection that is missing from the first page', async () => {
+    const fetchItems = jest.fn(async () => FIRST_PAGE)
+    render(
+      <LookupSelect
+        value={STORED.id}
+        onChange={() => {}}
+        options={[STORED]}
+        fetchItems={fetchItems}
+      />,
+    )
+
+    await screen.findByText('Alpha')
+    expect(fetchItems).toHaveBeenCalledWith('')
+    expect(screen.getByRole('option', { selected: true })).toHaveTextContent(STORED.title)
+    expect(screen.getAllByRole('option')).toHaveLength(3)
+  })
+
+  it('uses the fetched copy and adds no duplicate when the page contains the selection', async () => {
+    const fetchItems = jest.fn(async () => [
+      ...FIRST_PAGE,
+      { id: STORED.id, title: 'Stored Contractor (renamed)' },
+    ])
+    render(
+      <LookupSelect
+        value={STORED.id}
+        onChange={() => {}}
+        options={[STORED]}
+        fetchItems={fetchItems}
+      />,
+    )
+
+    await screen.findByText('Alpha')
+    expect(screen.getAllByRole('option')).toHaveLength(3)
+    expect(screen.getByRole('option', { selected: true })).toHaveTextContent('Stored Contractor (renamed)')
+  })
+
+  it('does not inject the selection into the results of a typed search', async () => {
+    const fetchItems = jest.fn(async (query: string) => (query ? [FIRST_PAGE[0]] : FIRST_PAGE))
+    const { container } = render(
+      <LookupSelect
+        value={STORED.id}
+        onChange={() => {}}
+        options={[STORED]}
+        fetchItems={fetchItems}
+      />,
+    )
+    await screen.findByText('Beta')
+
+    fireEvent.change(getInput(container), { target: { value: 'Alp' } })
+    await waitFor(() => expect(screen.queryByText('Beta')).toBeNull())
+
+    expect(screen.getAllByRole('option')).toHaveLength(1)
+    expect(screen.getByRole('option')).toHaveTextContent('Alpha')
+  })
+
+  it('restores the selection once the typed query is cleared again', async () => {
+    const fetchItems = jest.fn(async (query: string) => (query ? [FIRST_PAGE[0]] : FIRST_PAGE))
+    const { container } = render(
+      <LookupSelect
+        value={STORED.id}
+        onChange={() => {}}
+        options={[STORED]}
+        fetchItems={fetchItems}
+      />,
+    )
+    const input = getInput(container)
+    await screen.findByText('Beta')
+
+    fireEvent.change(input, { target: { value: 'Alp' } })
+    await waitFor(() => expect(screen.queryByText('Beta')).toBeNull())
+    fireEvent.change(input, { target: { value: '' } })
+
+    await screen.findByText('Beta')
+    expect(screen.getByRole('option', { selected: true })).toHaveTextContent(STORED.title)
+  })
+
+  it('keeps a selection picked from a search when the list goes back to browsing', async () => {
+    const fetchItems = jest.fn(async (query: string) => (query ? [STORED] : FIRST_PAGE))
+    function Harness() {
+      const [value, setValue] = React.useState<string | null>(null)
+      return <LookupSelect value={value} onChange={setValue} fetchItems={fetchItems} />
+    }
+    const { container } = render(<Harness />)
+    const input = getInput(container)
+
+    fireEvent.change(input, { target: { value: 'Stored' } })
+    fireEvent.click(await screen.findByRole('option'))
+    fireEvent.change(input, { target: { value: '' } })
+
+    await screen.findByText('Alpha')
+    expect(screen.getByRole('option', { selected: true })).toHaveTextContent(STORED.title)
+  })
+
+  it('keeps a known selection listed when the browse fetch comes back empty', async () => {
+    const fetchItems = jest.fn(async (query: string) => (query ? [STORED] : []))
+    function Harness() {
+      const [value, setValue] = React.useState<string | null>(null)
+      return <LookupSelect value={value} onChange={setValue} fetchItems={fetchItems} />
+    }
+    const { container } = render(<Harness />)
+    const input = getInput(container)
+
+    fireEvent.change(input, { target: { value: 'Stored' } })
+    fireEvent.click(await screen.findByRole('option'))
+    fireEvent.change(input, { target: { value: '' } })
+
+    await waitFor(() => expect(fetchItems).toHaveBeenLastCalledWith(''))
+    await waitFor(() => expect(screen.queryByText('Searching…')).toBeNull())
+    expect(screen.getByRole('option', { selected: true })).toHaveTextContent(STORED.title)
+    expect(screen.getAllByRole('option')).toHaveLength(1)
+    expect(screen.getByRole('button', { name: 'Clear selection' })).toBeInTheDocument()
+  })
+
+  it('never re-adds a previous selection after the value moves on', async () => {
+    const fetchItems = jest.fn(async (query: string) => (query ? [FIRST_PAGE[0]] : FIRST_PAGE))
+    const view = render(
+      <LookupSelect
+        value={STORED.id}
+        onChange={() => {}}
+        options={[STORED]}
+        fetchItems={fetchItems}
+      />,
+    )
+    await screen.findByText('Beta')
+
+    view.rerender(
+      <LookupSelect
+        value="contractor-unknown"
+        onChange={() => {}}
+        options={[STORED]}
+        fetchItems={fetchItems}
+      />,
+    )
+    const input = getInput(view.container)
+    fireEvent.change(input, { target: { value: 'Alp' } })
+    await waitFor(() => expect(screen.queryByText('Beta')).toBeNull())
+    fireEvent.change(input, { target: { value: '' } })
+
+    await screen.findByText('Beta')
+    expect(screen.queryByText(STORED.title)).toBeNull()
+    expect(screen.queryByRole('option', { selected: true })).toBeNull()
+  })
+
+  it('leaves the browse results untouched when nothing is selected', async () => {
+    render(
+      <LookupSelect value={null} onChange={() => {}} fetchItems={async () => FIRST_PAGE} minQuery={0} />,
+    )
+
+    expect(await screen.findAllByRole('option')).toHaveLength(2)
+    expect(screen.queryByRole('option', { selected: true })).toBeNull()
+  })
+})
+
 // `disabled` used to gate only the search box, so a caller that locked the
 // control still shipped a live option list: the selected card kept its click and
 // Enter/Space handlers, "Clear selection" stayed reachable, and the action slot

package/src/backend/inputs/__tests__/PhoneNumberField.typeahead.test.tsx

@@ -0,0 +1,43 @@
+/** @jest-environment jsdom */
+
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+  useOptionalLocale: () => undefined,
+}))
+
+jest.mock('../../../primitives/select', () => {
+  const React = jest.requireActual('react')
+  return {
+    Select: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    SelectTrigger: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    SelectContent: ({ children }: { children: React.ReactNode }) => <ul>{children}</ul>,
+    SelectItemLeading: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
+    SelectItem: ({ children, value, textValue }: { children: React.ReactNode; value: string; textValue?: string }) => (
+      <li data-testid="country-option" data-value={value} data-text-value={textValue ?? ''}>
+        {children}
+      </li>
+    ),
+  }
+})
+
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import { PHONE_COUNTRIES, PhoneNumberField } from '../PhoneNumberField'
+
+describe('PhoneNumberField country typeahead', () => {
+  it('uses the country name as the searchable text of each option', () => {
+    render(<PhoneNumberField value={undefined} onValueChange={() => undefined} />)
+
+    const options = screen.getAllByTestId('country-option')
+    expect(options).toHaveLength(PHONE_COUNTRIES.length)
+
+    const poland = options.find((option) => option.getAttribute('data-value') === 'PL')
+    expect(poland?.getAttribute('data-text-value')).toMatch(/^Pol/)
+
+    for (const option of options) {
+      const textValue = option.getAttribute('data-text-value') ?? ''
+      expect(textValue).not.toBe('')
+      expect(textValue).not.toMatch(/^[\u{1F1E6}-\u{1F1FF}+]/u)
+    }
+  })
+})