@open-mercato/ui 0.6.3-develop.3838.1.7f2657a47c → 0.6.3-develop.3851.1.642df0a016

package/src/backend/__tests__/nav-utils.test.ts

@@ -129,4 +129,77 @@ describe('settings navigation helpers', () => {
 
     expect(entries.map((item) => item.href)).toContain('/backend/customer_accounts/users')
   })
+
+  // Regression for GH #2070: an employee without any `configs.*` grant must not
+  // see the system-status page in the sidebar (including settings sections),
+  // even when modules with adjacent prefixes are granted.
+  it('hides routes whose required features are not granted, including settings-context pages', async () => {
+    const employeeGrants = [
+      'sales.orders.view',
+      'sales.quotes.view',
+      'inbox_ops.proposals.view',
+    ]
+    const entries = await buildAdminNav(
+      [
+        {
+          id: 'sales',
+          backendRoutes: [
+            {
+              pattern: '/backend/sales/orders',
+              title: 'Orders',
+              requireFeatures: ['sales.orders.view'],
+            },
+            {
+              pattern: '/backend/sales/quotes',
+              title: 'Quotes',
+              requireFeatures: ['sales.quotes.view'],
+            },
+          ],
+        },
+        {
+          id: 'inbox_ops',
+          backendRoutes: [
+            {
+              pattern: '/backend/inbox-ops',
+              title: 'Proposals',
+              requireFeatures: ['inbox_ops.proposals.view'],
+            },
+          ],
+        },
+        {
+          id: 'configs',
+          backendRoutes: [
+            {
+              pattern: '/backend/config/system-status',
+              title: 'System status',
+              requireFeatures: ['configs.system_status.view'],
+              pageContext: 'settings',
+              group: 'System',
+              groupKey: 'settings.sections.system',
+            },
+          ],
+        },
+      ],
+      { auth: { roles: [] } },
+      undefined,
+      undefined,
+      {
+        checkFeatures: async (features: string[]) =>
+          features.filter((feature) => employeeGrants.includes(feature)),
+      },
+    )
+
+    const hrefs = entries.map((item) => item.href)
+    expect(hrefs).toContain('/backend/sales/orders')
+    expect(hrefs).toContain('/backend/sales/quotes')
+    expect(hrefs).toContain('/backend/inbox-ops')
+    expect(hrefs).not.toContain('/backend/config/system-status')
+
+    // The filtered settings entry must also be absent from any settings section.
+    const settingsSections = buildSettingsSections(entries, { system: 1 })
+    const allSettingsHrefs = settingsSections.flatMap((section) =>
+      section.items.map((item) => item.href),
+    )
+    expect(allSettingsHrefs).not.toContain('/backend/config/system-status')
+  })
 })

package/src/backend/inputs/ComboboxInput.tsx

@@ -1,8 +1,10 @@
 "use client"
 
 import * as React from 'react'
+import { X } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '../../primitives/button'
+import { IconButton } from '../../primitives/icon-button'
 
 export type ComboboxOption = {
   value: string
@@ -28,6 +30,8 @@ export type ComboboxInputProps = {
   autoFocus?: boolean
   disabled?: boolean
   allowCustomValues?: boolean
+  clearable?: boolean
+  clearLabel?: string
 }
 
 function normalizeOptions(input?: Array<string | ComboboxOption>): ComboboxOption[] {
@@ -72,10 +76,15 @@ export function ComboboxInput({
   autoFocus,
   disabled = false,
   allowCustomValues = true,
+  clearable = false,
+  clearLabel,
 }: ComboboxInputProps) {
   const t = useT()
   const resolvedPlaceholder = placeholder ?? t('ui.inputs.comboboxInput.placeholder', 'Type to search...')
   const loadingLabel = t('ui.inputs.comboboxInput.loading', 'Loading suggestions…')
+  const resolvedClearLabel = clearLabel ?? t('ui.inputs.comboboxInput.clear', 'Clear value')
+  const blurCloseDelayMs = 250
+  const blurCloseMaxDelayMs = 1000
   const [input, setInput] = React.useState('')
   const [asyncOptions, setAsyncOptions] = React.useState<ComboboxOption[]>([])
   const [resolvedOptions, setResolvedOptions] = React.useState<ComboboxOption[]>([])
@@ -84,6 +93,9 @@ export function ComboboxInput({
   const [showSuggestions, setShowSuggestions] = React.useState(false)
   const [selectedIndex, setSelectedIndex] = React.useState(-1)
   const inputRef = React.useRef<HTMLInputElement>(null)
+  const loadingRef = React.useRef(false)
+  const blurCloseTimerRef = React.useRef<number | null>(null)
+  const blurClosePendingRef = React.useRef(false)
   const suppressOpenOnFocusRef = React.useRef(Boolean(autoFocus && !disabled))
   const eagerFallbackLoadedValueRef = React.useRef<string | null>(null)
 
@@ -92,22 +104,18 @@ export function ComboboxInput({
     [seedOptions, suggestions]
   )
 
-  // Options whose label is genuinely known (not a self-mapping `value === label`
-  // placeholder). Used to decide whether eager resolution still needs to run.
-  const knownLabelValues = React.useMemo(() => {
-    const set = new Set<string>()
-    for (const option of [...staticOptions, ...asyncOptions, ...resolvedOptions]) {
-      if (option.label && option.label !== option.value) set.add(option.value)
+  // Single pass over all option sources to build both coverage sets at once.
+  // knownLabelValues: values with a genuine label (not a self-mapping placeholder) —
+  //   used to decide whether eager resolution still needs to run.
+  // coveredOptionValues: all values present in any source (even self-mapped).
+  const { knownLabelValues, coveredOptionValues } = React.useMemo(() => {
+    const known = new Set<string>()
+    const covered = new Set<string>()
+    for (const opt of [...staticOptions, ...asyncOptions, ...resolvedOptions]) {
+      covered.add(opt.value)
+      if (opt.label && opt.label !== opt.value) known.add(opt.value)
     }
-    return set
-  }, [staticOptions, asyncOptions, resolvedOptions])
-
-  const coveredOptionValues = React.useMemo(() => {
-    const set = new Set<string>()
-    for (const option of [...staticOptions, ...asyncOptions, ...resolvedOptions]) {
-      set.add(option.value)
-    }
-    return set
+    return { knownLabelValues: known, coveredOptionValues: covered }
   }, [staticOptions, asyncOptions, resolvedOptions])
 
   const optionMap = React.useMemo(() => {
@@ -139,6 +147,23 @@ export function ComboboxInput({
     return Array.from(optionMap.values())
   }, [optionMap])
 
+  React.useEffect(() => {
+    loadingRef.current = loading
+  }, [loading])
+
+  const clearBlurCloseTimer = React.useCallback(() => {
+    if (blurCloseTimerRef.current === null) return
+    window.clearTimeout(blurCloseTimerRef.current)
+    blurCloseTimerRef.current = null
+  }, [])
+
+  const resetBlurCloseState = React.useCallback(() => {
+    blurClosePendingRef.current = false
+    clearBlurCloseTimer()
+  }, [clearBlurCloseTimer])
+
+  React.useEffect(() => resetBlurCloseState, [resetBlurCloseState])
+
   const filteredSuggestions = React.useMemo(() => {
     const query = input.toLowerCase().trim()
     if (!query) return availableOptions
@@ -153,17 +178,20 @@ export function ComboboxInput({
     if (!loadSuggestions || !touched || disabled) return
     const query = input.trim()
     let cancelled = false
-    const handle = window.setTimeout(async () => {
+    const handle = window.setTimeout(() => {
       setLoading(true)
-      try {
-        const items = await loadSuggestions(query)
-        if (!cancelled) {
-          const normalized = normalizeOptions(items)
-          setAsyncOptions((prev) => areOptionsEqual(prev, normalized) ? prev : normalized)
-        }
-      } finally {
-        if (!cancelled) setLoading(false)
-      }
+      Promise.resolve()
+        .then(() => loadSuggestions(query))
+        .then((items) => {
+          if (!cancelled) {
+            const normalized = normalizeOptions(items)
+            setAsyncOptions((prev) => areOptionsEqual(prev, normalized) ? prev : normalized)
+          }
+        })
+        .catch(() => {})
+        .finally(() => {
+          if (!cancelled) setLoading(false)
+        })
     }, 200)
     return () => {
       cancelled = true
@@ -198,6 +226,8 @@ export function ComboboxInput({
     eagerFallbackLoadedValueRef.current = value
     // Fallback: pull the first page of async suggestions so a remount that lost
     // its option cache can still recover the label without user interaction.
+    // Note: if the loader is paginated and the value falls outside the first page,
+    // the fallback silently fails and the raw value remains visible.
     if (loadSuggestions) {
       setLoading(true)
       Promise.resolve()
@@ -211,7 +241,8 @@ export function ComboboxInput({
         .finally(() => { if (!cancelled) setLoading(false) })
     }
     return () => { cancelled = true }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // eslint-disable-next-line react-hooks/exhaustive-deps — resolveDescription intentionally excluded:
+  // including it would re-run the effect on every render when the prop is an inline function
   }, [value, disabled, knownLabelValues, coveredOptionValues, eagerResolveLabel, loadSuggestions])
 
   // Sync input with value when value changes externally and input is not focused.
@@ -225,6 +256,7 @@ export function ComboboxInput({
   const selectValue = React.useCallback(
     (nextValue: string) => {
       if (disabled) return
+      resetBlurCloseState()
       const trimmed = nextValue.trim()
       onChange(trimmed)
       const option = optionMap.get(trimmed)
@@ -232,7 +264,7 @@ export function ComboboxInput({
       setShowSuggestions(false)
       setSelectedIndex(-1)
     },
-    [disabled, onChange, optionMap]
+    [disabled, onChange, optionMap, resetBlurCloseState]
   )
 
   const findOptionForInput = React.useCallback(
@@ -251,6 +283,10 @@ export function ComboboxInput({
   const confirmSelection = React.useCallback(
     (raw: string) => {
       if (disabled) return
+      if (clearable && raw.trim() === '') {
+        selectValue('')
+        return
+      }
       const option = findOptionForInput(raw)
       if (option) {
         selectValue(option.value)
@@ -271,9 +307,41 @@ export function ComboboxInput({
       }
       selectValue(raw)
     },
-    [allowCustomValues, disabled, findOptionForInput, optionMap, selectValue, value]
+    [allowCustomValues, clearable, disabled, findOptionForInput, optionMap, selectValue, value]
   )
 
+  const handleClear = React.useCallback(() => {
+    if (disabled) return
+    selectValue('')
+    inputRef.current?.focus()
+  }, [disabled, selectValue])
+
+  const closeAfterBlur = React.useCallback(() => {
+    blurCloseTimerRef.current = null
+    if (disabled) return
+    blurClosePendingRef.current = false
+    confirmSelection(input)
+    setShowSuggestions(false)
+    setSelectedIndex(-1)
+  }, [confirmSelection, disabled, input])
+
+  const attemptBlurClose = React.useCallback(() => {
+    blurCloseTimerRef.current = null
+    if (disabled) return
+    if (loadingRef.current) {
+      blurCloseTimerRef.current = window.setTimeout(closeAfterBlur, blurCloseMaxDelayMs)
+      return
+    }
+    closeAfterBlur()
+  }, [blurCloseMaxDelayMs, closeAfterBlur, disabled])
+
+  React.useEffect(() => {
+    if (!blurClosePendingRef.current) return
+    if (loading) return
+    clearBlurCloseTimer()
+    closeAfterBlur()
+  }, [clearBlurCloseTimer, closeAfterBlur, loading])
+
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (disabled) return
@@ -305,6 +373,8 @@ export function ComboboxInput({
     [confirmSelection, disabled, filteredSuggestions, input, selectValue, selectedIndex, showSuggestions]
   )
 
+  const showClearButton = clearable && !disabled && (value !== '' || input !== '')
+
   return (
     <div className="relative w-full">
       {/* Use raw <input> here instead of the DS Input primitive: ComboboxInput's
@@ -314,7 +384,12 @@ export function ComboboxInput({
       <input
         ref={inputRef}
         type="text"
-        className="w-full h-9 rounded-md border border-input bg-background px-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:shadow-focus focus-visible:border-foreground disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed"
+        className={[
+          'w-full h-9 rounded-md border border-input bg-background px-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:shadow-focus focus-visible:border-foreground disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed',
+          showClearButton ? 'pr-9' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
         value={input}
         placeholder={resolvedPlaceholder}
         autoFocus={autoFocus}
@@ -326,6 +401,10 @@ export function ComboboxInput({
             suppressOpenOnFocusRef.current = false
             return
           }
+          resetBlurCloseState()
+          if (loadSuggestions && availableOptions.length === 0) {
+            setLoading(true)
+          }
           setShowSuggestions(true)
         }}
         onChange={(event) => {
@@ -336,14 +415,33 @@ export function ComboboxInput({
         }}
         onKeyDown={handleKeyDown}
         onBlur={() => {
-          // Delay to allow click on suggestions
-          setTimeout(() => {
-            if (disabled) return
-            confirmSelection(input)
-          }, 200)
+          // Delay closing so clicks on the popup can resolve first. If async
+          // suggestions are still loading, keep the dropdown open instead of
+          // closing before the first payload arrives.
+          blurClosePendingRef.current = true
+          clearBlurCloseTimer()
+          if (loadingRef.current) {
+            blurCloseTimerRef.current = window.setTimeout(closeAfterBlur, blurCloseMaxDelayMs)
+            return
+          }
+          blurCloseTimerRef.current = window.setTimeout(attemptBlurClose, blurCloseDelayMs)
         }}
       />
 
+      {showClearButton ? (
+        <IconButton
+          type="button"
+          variant="ghost"
+          size="xs"
+          aria-label={resolvedClearLabel}
+          className="absolute right-1 top-1/2 -translate-y-1/2"
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={handleClear}
+        >
+          <X className="size-3" />
+        </IconButton>
+      ) : null}
+
       {showSuggestions && !disabled && (loading || filteredSuggestions.length > 0) && (
         <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 ? (
@@ -363,7 +461,10 @@ export function ComboboxInput({
                     .filter(Boolean)
                     .join(' ')}
                   onMouseDown={(event) => event.preventDefault()}
-                  onClick={() => selectValue(option.value)}
+                  onClick={() => {
+                    resetBlurCloseState()
+                    selectValue(option.value)
+                  }}
                   onMouseEnter={() => setSelectedIndex(index)}
                 >
                   <span className="font-medium text-foreground">{option.label}</span>