@open-mercato/ui 0.6.8-develop.6925.1.cefa200fa4 → 0.6.8-develop.6931.1.4a1e1c786b

package/src/backend/injection/__tests__/useRegisteredComponent.remount.test.tsx

@@ -0,0 +1,96 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+import type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'
+import { ComponentOverrideProvider } from '../ComponentOverrideProvider'
+import { useRegisteredComponent } from '../useRegisteredComponent'
+
+const COMPONENT_ID = 'section:test.host.form'
+
+function Section({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
+
+function Host() {
+  const Resolved = useRegisteredComponent<{ children: React.ReactNode }>(COMPONENT_ID, Section)
+  return (
+    <Resolved>
+      <form>
+        <input id="email" name="email" defaultValue="" />
+      </form>
+    </Resolved>
+  )
+}
+
+/**
+ * `overrides` arrives as a brand-new array once the async override bundle
+ * resolves, exactly the way ComponentOverridesBootstrap hands it over after its
+ * dynamic import settles.
+ */
+function App({ overrides }: { overrides: ComponentOverride[] }) {
+  return (
+    <ComponentOverrideProvider overrides={overrides}>
+      <Host />
+    </ComponentOverrideProvider>
+  )
+}
+
+function readEmail(): HTMLInputElement {
+  return document.querySelector('#email') as HTMLInputElement
+}
+
+function typeEmail(value: string): HTMLInputElement {
+  const email = readEmail()
+  fireEvent.change(email, { target: { value } })
+  expect(email.value).toBe(value)
+  return email
+}
+
+describe('useRegisteredComponent — a late override registry must not discard host state', () => {
+  it('keeps typed input when the override bundle resolves with no override for this id', () => {
+    const { rerender } = render(<App overrides={[]} />)
+    const email = typeEmail('admin@acme.com')
+
+    // Same (empty) override set, fresh array identity — the registry revision bumps.
+    rerender(<App overrides={[]} />)
+
+    expect(readEmail()).toBe(email)
+    expect(readEmail().value).toBe('admin@acme.com')
+  })
+
+  it('keeps typed input when unrelated overrides register', () => {
+    const { rerender } = render(<App overrides={[]} />)
+    const email = typeEmail('admin@acme.com')
+
+    const unrelated: ComponentOverride[] = [{
+      target: { componentId: 'section:some.other.component' },
+      priority: 0,
+      metadata: { module: 'other' },
+      wrapper: (Original) => Original,
+    }]
+    rerender(<App overrides={unrelated} />)
+
+    expect(readEmail()).toBe(email)
+    expect(readEmail().value).toBe('admin@acme.com')
+  })
+
+  it('still applies a wrapper registered for this id', () => {
+    const withBanner: ComponentOverride[] = [{
+      target: { componentId: COMPONENT_ID },
+      priority: 0,
+      metadata: { module: 'other' },
+      wrapper: (Original) => {
+        const Wrapped = (props: Record<string, unknown>) => (
+          <div data-testid="wrapper-banner">{React.createElement(Original as React.ComponentType<Record<string, unknown>>, props)}</div>
+        )
+        return Wrapped as typeof Original
+      },
+    }]
+
+    const { getByTestId } = render(<App overrides={withBanner} />)
+
+    expect(getByTestId('wrapper-banner')).toBeTruthy()
+    expect(readEmail()).toBeTruthy()
+  })
+})

package/src/backend/injection/useRegisteredComponent.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import type { ComponentType } from 'react'
+import type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'
 import { getComponentEntry, getComponentOverrides } from '@open-mercato/shared/modules/widgets/component-registry'
 import { useOverrideRegistryRevision, useOverrideUserFeatures } from './ComponentOverrideProvider'
 import { createLogger } from '@open-mercato/shared/lib/logger'
@@ -31,46 +32,93 @@ class ReplacementErrorBoundary extends React.Component<
   }
 }
 
-export function useRegisteredComponent<TProps>(
+type Resolution<TProps> = {
+  original: ComponentType<TProps> | null
+  wrapped: ComponentType<TProps> | null
+  transforms: Array<(props: TProps) => TProps>
+  replacementOverride: ComponentOverride | null
+  replacementModule: string
+}
+
+function resolveComponent<TProps>(
   componentId: string,
-  fallback?: ComponentType<TProps>,
-): ComponentType<TProps> {
-  const userFeatures = useOverrideUserFeatures()
-  const overrideRevision = useOverrideRegistryRevision()
-  return React.useMemo(() => {
-    const entry = getComponentEntry(componentId)
-    const original = (entry?.component as ComponentType<TProps> | undefined) ?? fallback ?? null
-    if (!original) {
-      if (process.env.NODE_ENV !== 'production' && !fallback) {
-        logger.warn('Component is not registered', { componentId })
-      }
-      const Missing = () => null
-      return Missing as ComponentType<TProps>
-    }
-    const overrides = getComponentOverrides(componentId, userFeatures)
-    const replacementOverrides = overrides.filter((override) => 'replacement' in override)
-    if (process.env.NODE_ENV !== 'production' && replacementOverrides.length > 1) {
-      logger.warn('Multiple replacements registered; highest-priority replacement is applied', { componentId })
+  fallback: ComponentType<TProps> | undefined,
+  userFeatures: readonly string[],
+): Resolution<TProps> {
+  const entry = getComponentEntry(componentId)
+  const original = (entry?.component as ComponentType<TProps> | undefined) ?? fallback ?? null
+  if (!original) {
+    if (process.env.NODE_ENV !== 'production' && !fallback) {
+      logger.warn('Component is not registered', { componentId })
     }
+    return { original: null, wrapped: null, transforms: [], replacementOverride: null, replacementModule: 'unknown' }
+  }
 
-    let replacement: ComponentType<TProps> | null = null
-    let replacementOverride: (typeof overrides)[number] | null = null
-    const wrappers: Array<(Original: ComponentType<TProps>) => ComponentType<TProps>> = []
-    const transforms: Array<(props: TProps) => TProps> = []
+  const overrides = getComponentOverrides(componentId, userFeatures)
+  const replacementOverrides = overrides.filter((override) => 'replacement' in override)
+  if (process.env.NODE_ENV !== 'production' && replacementOverrides.length > 1) {
+    logger.warn('Multiple replacements registered; highest-priority replacement is applied', { componentId })
+  }
 
-    for (const override of overrides) {
-      if ('replacement' in override) {
-        replacement = override.replacement as ComponentType<TProps>
-        replacementOverride = override
-      }
-      if ('wrapper' in override) wrappers.push(override.wrapper as (Original: ComponentType<TProps>) => ComponentType<TProps>)
-      if ('propsTransform' in override) transforms.push(override.propsTransform as (props: TProps) => TProps)
+  let replacement: ComponentType<TProps> | null = null
+  let replacementOverride: ComponentOverride | null = null
+  const wrappers: Array<(Original: ComponentType<TProps>) => ComponentType<TProps>> = []
+  const transforms: Array<(props: TProps) => TProps> = []
+
+  for (const override of overrides) {
+    if ('replacement' in override) {
+      replacement = override.replacement as ComponentType<TProps>
+      replacementOverride = override
     }
+    if ('wrapper' in override) wrappers.push(override.wrapper as (Original: ComponentType<TProps>) => ComponentType<TProps>)
+    if ('propsTransform' in override) transforms.push(override.propsTransform as (props: TProps) => TProps)
+  }
+
+  const base = replacement ?? original
+  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => wrapper(acc), base)
+
+  return {
+    original,
+    wrapped,
+    transforms,
+    replacementOverride,
+    replacementModule: replacementOverride?.metadata?.module ?? 'unknown',
+  }
+}
+
+/**
+ * The returned component's identity must depend only on `componentId` and
+ * `fallback` — never on the override registry.
+ *
+ * Overrides arrive asynchronously: `ComponentOverridesBootstrap` dynamically
+ * imports the generated override module and hands the provider a fresh array,
+ * which bumps the registry revision some time after first paint. Resolving the
+ * component in a `useMemo` keyed on that revision handed callers a brand-new
+ * function on every bump, so React saw a different element type at that
+ * position and unmounted the whole subtree — discarding its DOM and state. On
+ * the login form that threw away credentials the user had already typed
+ * (#5037), and the same hazard applied to every host of a registered section.
+ *
+ * Resolution therefore happens *inside* a stable component. When the revision
+ * carries no override for this id, `wrapped` keeps its previous identity and
+ * React reconciles in place; only a genuine replacement or wrapper swaps the
+ * rendered type, where a remount is the correct behaviour.
+ */
+export function useRegisteredComponent<TProps>(
+  componentId: string,
+  fallback?: ComponentType<TProps>,
+): ComponentType<TProps> {
+  return React.useMemo(() => {
+    const Registered = (props: TProps) => {
+      const userFeatures = useOverrideUserFeatures()
+      const overrideRevision = useOverrideRegistryRevision()
+      const { original, wrapped, transforms, replacementOverride, replacementModule } = React.useMemo(
+        () => resolveComponent<TProps>(componentId, fallback, userFeatures),
+        [overrideRevision, userFeatures],
+      )
 
-    const base = replacement ?? original
-    const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => wrapper(acc), base)
+      if (!original || !wrapped) return null
 
-    const Resolved = (props: TProps) => {
       const transformed = transforms.reduce((current, transform) => transform(current), props)
       const Fallback = React.createElement(original as React.ComponentType<Record<string, unknown>>, transformed as Record<string, unknown>)
       if (
@@ -80,7 +128,7 @@ export function useRegisteredComponent<TProps>(
       ) {
         const validation = replacementOverride.propsSchema.safeParse(transformed)
         if (!validation.success) {
-          logger.error('Props schema validation failed for replacement', { componentId, module: replacementOverride.metadata?.module ?? 'unknown', issues: validation.error.format() })
+          logger.error('Props schema validation failed for replacement', { componentId, module: replacementModule, issues: validation.error.format() })
           return Fallback
         }
       }
@@ -88,7 +136,6 @@ export function useRegisteredComponent<TProps>(
         <ReplacementErrorBoundary
           fallback={Fallback}
           onError={(error) => {
-            const replacementModule = overrides.find((override) => 'replacement' in override)?.metadata?.module ?? 'unknown'
             logger.error('Component replacement failed', { componentId, module: replacementModule, err: error })
           }}
         >
@@ -97,9 +144,9 @@ export function useRegisteredComponent<TProps>(
       )
     }
 
-    Resolved.displayName = `RegisteredComponent(${componentId})`
-    return Resolved
-  }, [componentId, fallback, overrideRevision, userFeatures])
+    Registered.displayName = `RegisteredComponent(${componentId})`
+    return Registered
+  }, [componentId, fallback])
 }
 
 export default useRegisteredComponent

package/src/backend/inputs/ComboboxInput.tsx

@@ -92,6 +92,7 @@ export function ComboboxInput({
   const [touched, setTouched] = React.useState(false)
   const [showSuggestions, setShowSuggestions] = React.useState(false)
   const [selectedIndex, setSelectedIndex] = React.useState(-1)
+  const listboxId = React.useId()
   const inputRef = React.useRef<HTMLInputElement>(null)
   const loadingRef = React.useRef(false)
   const blurCloseTimerRef = React.useRef<number | null>(null)
@@ -365,7 +366,9 @@ export function ComboboxInput({
           confirmSelection(input)
         }
       } else if (event.key === 'Escape') {
+        if (!showSuggestions) return
         event.preventDefault()
+        event.stopPropagation()
         setShowSuggestions(false)
         setSelectedIndex(-1)
       }
@@ -373,7 +376,23 @@ export function ComboboxInput({
     [confirmSelection, disabled, filteredSuggestions, input, selectValue, selectedIndex, showSuggestions]
   )
 
+  const optionDomId = React.useCallback(
+    (index: number) => `${listboxId}-option-${index}`,
+    [listboxId],
+  )
+
+  React.useEffect(() => {
+    if (selectedIndex < 0 || !showSuggestions) return
+    const activeElement = typeof document !== 'undefined'
+      ? document.getElementById(optionDomId(selectedIndex))
+      : null
+    if (typeof activeElement?.scrollIntoView === 'function') {
+      activeElement.scrollIntoView({ block: 'nearest' })
+    }
+  }, [optionDomId, selectedIndex, showSuggestions])
+
   const showClearButton = clearable && !disabled && (value !== '' || input !== '')
+  const listboxVisible = showSuggestions && !disabled && (loading || filteredSuggestions.length > 0)
 
   return (
     <div className="relative w-full">
@@ -395,6 +414,11 @@ export function ComboboxInput({
         autoFocus={autoFocus}
         data-crud-focus-target=""
         disabled={disabled}
+        role="combobox"
+        aria-expanded={listboxVisible}
+        aria-controls={listboxId}
+        aria-autocomplete="list"
+        aria-activedescendant={listboxVisible && selectedIndex >= 0 ? optionDomId(selectedIndex) : undefined}
         onFocus={() => {
           setTouched(true)
           if (suppressOpenOnFocusRef.current) {
@@ -442,18 +466,21 @@ export function ComboboxInput({
         </IconButton>
       ) : null}
 
-      {showSuggestions && !disabled && (loading || filteredSuggestions.length > 0) && (
+      {listboxVisible && (
         <div className="absolute z-popover w-full mt-1 rounded-md border border-input bg-popover p-2 shadow-md max-h-48 sm:max-h-60 overflow-auto">
           {loading && touched ? (
             <div className="px-2 py-1.5 text-xs text-muted-foreground">{loadingLabel}</div>
           ) : (
-            <div className="flex flex-col gap-1">
+            <div id={listboxId} role="listbox" className="flex flex-col gap-1">
               {filteredSuggestions.map((option, index) => (
                 <Button
                   key={option.value}
+                  id={optionDomId(index)}
                   type="button"
                   variant="ghost"
                   size="sm"
+                  role="option"
+                  aria-selected={index === selectedIndex}
                   className={[
                     'w-full h-auto justify-start font-normal text-left flex flex-col items-start rounded-lg p-2',
                     index === selectedIndex ? 'bg-muted' : '',

package/src/backend/inputs/LookupSelect.tsx

@@ -86,6 +86,8 @@ export function LookupSelect({
   const [hasTyped, setHasTyped] = React.useState(defaultOpen)
   const [error, setError] = React.useState<string | null>(null)
   const [fetchKey, setFetchKey] = React.useState(0)
+  const [activeIndex, setActiveIndex] = React.useState(-1)
+  const listboxId = React.useId()
   const fetchItemsRef = React.useRef(fetchItems ?? fetchOptions)
   const setQueryRef = React.useRef(setQuery)
   const onReadyRef = React.useRef(onReady)
@@ -116,6 +118,73 @@ export function LookupSelect({
 
   const shouldSearch =
     defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0)
+
+  React.useEffect(() => {
+    setActiveIndex(-1)
+  }, [items])
+
+  const optionDomId = React.useCallback(
+    (index: number) => `${listboxId}-option-${index}`,
+    [listboxId],
+  )
+
+  const isInteractiveItem = React.useCallback(
+    (item: LookupSelectItem) => !item.disabled || value === item.id,
+    [value],
+  )
+
+  const moveActiveIndex = React.useCallback((direction: 1 | -1) => {
+    setActiveIndex((current) => {
+      if (!items.length) return -1
+      let next = current
+      for (let step = 0; step < items.length; step += 1) {
+        next = (next + direction + items.length) % items.length
+        if (isInteractiveItem(items[next])) return next
+      }
+      return current
+    })
+  }, [isInteractiveItem, items])
+
+  React.useEffect(() => {
+    if (activeIndex < 0) return
+    const activeElement = typeof document !== 'undefined'
+      ? document.getElementById(optionDomId(activeIndex))
+      : null
+    if (typeof activeElement?.scrollIntoView === 'function') {
+      activeElement.scrollIntoView({ block: 'nearest' })
+    }
+  }, [activeIndex, optionDomId])
+
+  const listboxVisible = shouldSearch && !disabled
+  const handleInputKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!listboxVisible) return
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      moveActiveIndex(1)
+      return
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      moveActiveIndex(-1)
+      return
+    }
+    if (event.key === 'Enter') {
+      if (activeIndex < 0 || activeIndex >= items.length) return
+      const item = items[activeIndex]
+      if (!isInteractiveItem(item)) return
+      event.preventDefault()
+      onChange(item.id)
+      setActiveIndex(-1)
+      return
+    }
+    if (event.key === 'Escape') {
+      if (query.length === 0 && activeIndex < 0) return
+      event.preventDefault()
+      event.stopPropagation()
+      setQuery('')
+      setActiveIndex(-1)
+    }
+  }, [activeIndex, items, isInteractiveItem, listboxVisible, moveActiveIndex, onChange, query])
   React.useEffect(() => {
     if (disabled) {
       setItems(options ?? [])
@@ -169,8 +238,14 @@ export function LookupSelect({
               setQuery(event.target.value)
               setHasTyped(true)
             }}
+            onKeyDown={handleInputKeyDown}
             placeholder={resolvedSearchPlaceholder}
             disabled={disabled}
+            role="combobox"
+            aria-expanded={listboxVisible}
+            aria-controls={listboxId}
+            aria-autocomplete="list"
+            aria-activedescendant={activeIndex >= 0 ? optionDomId(activeIndex) : undefined}
           />
         </div>
         {actionSlot ? <div className="sm:self-start">{actionSlot}</div> : null}
@@ -186,21 +261,28 @@ export function LookupSelect({
           {!loading && !loadingProp && !items.length ? (
             <p className="text-xs text-muted-foreground">{resolvedEmptyLabel}</p>
           ) : null}
-          <div className="flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5">
-            {items.map((item) => {
+          <div
+            id={listboxId}
+            role="listbox"
+            className="flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5"
+          >
+            {items.map((item, index) => {
               const isSelected = value === item.id
               const isInteractive = !item.disabled || isSelected
+              const isActive = index === activeIndex
               return (
                 <div
                   key={item.id}
+                  id={optionDomId(index)}
                   className={cn(
                     'group flex items-center gap-4 rounded-xl border p-4 transition-all duration-150 focus-visible:outline-none focus-visible:shadow-focus',
                     isInteractive ? 'cursor-pointer' : 'cursor-not-allowed opacity-60',
                     isSelected
                       ? 'border-brand-violet bg-brand-violet/5 shadow-sm'
-                      : 'border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm'
+                      : 'border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm',
+                    isActive && !isSelected ? 'border-foreground/20 bg-muted/30 shadow-sm' : null
                   )}
-                  role="button"
+                  role="option"
                   tabIndex={item.disabled ? -1 : 0}
                   onClick={() => {
                     if (!isInteractive) return
@@ -213,7 +295,7 @@ export function LookupSelect({
                       onChange(item.id)
                     }
                   }}
-                  aria-pressed={isSelected}
+                  aria-selected={isSelected}
                   aria-disabled={item.disabled && !isSelected ? true : undefined}
                   title={isSelected ? resolvedSelectedLabel : resolvedSelectLabel}
                 >

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

@@ -71,7 +71,7 @@ describe('ComboboxInput clearable behavior', () => {
       />
     )
 
-    const input = screen.getByRole('textbox') as HTMLInputElement
+    const input = screen.getByRole('combobox') as HTMLInputElement
     expect(input.value).toBe('Red')
 
     fireEvent.focus(input)
@@ -96,7 +96,7 @@ describe('ComboboxInput clearable behavior', () => {
       />
     )
 
-    const input = screen.getByRole('textbox') as HTMLInputElement
+    const input = screen.getByRole('combobox') as HTMLInputElement
     fireEvent.focus(input)
     fireEvent.change(input, { target: { value: '' } })
 
@@ -111,7 +111,7 @@ describe('ComboboxInput clearable behavior', () => {
     const onChange = jest.fn()
     render(<Harness initialValue="red" clearable onChange={onChange} />)
 
-    const input = screen.getByRole('textbox') as HTMLInputElement
+    const input = screen.getByRole('combobox') as HTMLInputElement
     expect(input.value).toBe('Red')
 
     const clearBtn = screen.getByRole('button', { name: /clear value/i })

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

@@ -86,3 +86,80 @@ describe('LookupSelect onReady stability', () => {
     expect(input.value).toBe('Mercato Fashion Online')
   })
 })
+
+describe('LookupSelect keyboard accessibility', () => {
+  const ITEMS = [
+    { id: 'plot-1', title: 'Fazenda Norte' },
+    { id: 'plot-2', title: 'Fazenda Sul' },
+  ]
+
+  function renderWithResults(onChange: (next: string | null) => void) {
+    const utils = render(
+      <LookupSelect
+        value={null}
+        onChange={onChange}
+        fetchItems={async () => ITEMS}
+        minQuery={2}
+      />,
+    )
+    return utils
+  }
+
+  it('exposes combobox/listbox/option semantics once results render', async () => {
+    const { container } = renderWithResults(() => {})
+    const input = getInput(container)
+    expect(input).toHaveAttribute('role', 'combobox')
+    expect(input).toHaveAttribute('aria-autocomplete', 'list')
+
+    fireEvent.change(input, { target: { value: 'Faz' } })
+    const options = await screen.findAllByRole('option')
+    expect(options).toHaveLength(2)
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+    expect(input).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('selects the highlighted result with ArrowDown + Enter', async () => {
+    const onChange = jest.fn()
+    const { container } = renderWithResults(onChange)
+    const input = getInput(container)
+
+    fireEvent.change(input, { target: { value: 'Faz' } })
+    await screen.findAllByRole('option')
+
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+    expect(input).toHaveAttribute('aria-activedescendant')
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onChange).toHaveBeenCalledWith('plot-1')
+  })
+
+  it('moves the highlight with repeated arrows and wraps', async () => {
+    const onChange = jest.fn()
+    const { container } = renderWithResults(onChange)
+    const input = getInput(container)
+
+    fireEvent.change(input, { target: { value: 'Faz' } })
+    await screen.findAllByRole('option')
+
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onChange).toHaveBeenCalledWith('plot-2')
+  })
+
+  it('clears the query with Escape instead of leaking it to the dialog', async () => {
+    const escapeSpy = jest.fn()
+    const { container } = render(
+      <div onKeyDown={escapeSpy}>
+        <LookupSelect value={null} onChange={() => {}} fetchItems={async () => ITEMS} minQuery={2} />
+      </div>,
+    )
+    const input = getInput(container)
+    fireEvent.change(input, { target: { value: 'Faz' } })
+    await screen.findAllByRole('option')
+
+    escapeSpy.mockClear()
+    fireEvent.keyDown(input, { key: 'Escape' })
+    expect(input.value).toBe('')
+    expect(escapeSpy).not.toHaveBeenCalled()
+  })
+})