@open-mercato/ui 0.5.1-develop.2949.009dcdd2d5 → 0.5.1-develop.2954.610bab2d08

package/src/backend/detail/ActivitiesSection.tsx

@@ -4,6 +4,13 @@ import * as React from 'react'
 import Link from 'next/link'
 import { ArrowUpRightSquare, Pencil, Plus, Trash2 } from 'lucide-react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
 import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
@@ -322,17 +329,21 @@ function ActivityForm({
           const currentValue =
             typeof value === 'string' && value.length ? value : normalizedEntityOptions[0]?.id ?? ''
           return (
-            <select
-              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              value={currentValue}
-              onChange={(event) => setValue(event.target.value)}
+            <Select
+              value={currentValue || undefined}
+              onValueChange={(next) => setValue(next ?? '')}
             >
-              {normalizedEntityOptions.map((option) => (
-                <option key={option.id} value={option.id}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {normalizedEntityOptions.map((option) => (
+                  <SelectItem key={option.id} value={option.id}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           )
         },
       } as CrudField)
@@ -347,20 +358,21 @@ function ActivityForm({
         component: ({ value, setValue }) => {
           const currentValue = typeof value === 'string' ? value : ''
           return (
-            <select
-              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              value={currentValue}
-              onChange={(event) => setValue(event.target.value)}
+            <Select
+              value={currentValue || undefined}
+              onValueChange={(next) => setValue(next ?? '')}
             >
-              <option value="">
-                {translate('fields.dealPlaceholder', 'No linked deal')}
-              </option>
-              {normalizedDealOptions.map((option) => (
-                <option key={option.id} value={option.id}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue placeholder={translate('fields.dealPlaceholder', 'No linked deal')} />
+              </SelectTrigger>
+              <SelectContent>
+                {normalizedDealOptions.map((option) => (
+                  <SelectItem key={option.id} value={option.id}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           )
         },
       } as CrudField)

package/src/backend/detail/AddressEditor.tsx

@@ -6,6 +6,13 @@ import { usePathname, useSearchParams } from 'next/navigation'
 import { Plus, Settings } from 'lucide-react'
 import { Button } from '../../primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import {
   Dialog,
   DialogContent,
@@ -232,24 +239,31 @@ export function AddressEditor<C = unknown>({
           aria-invalid={errors.name ? 'true' : undefined}
         />
         <div className="flex gap-2">
-          <select
-            className={inputClass('purpose')}
-            value={current.purpose}
-            onChange={(evt) => update('purpose', evt.target.value)}
+          <Select
+            value={current.purpose || undefined}
+            onValueChange={(next) => update('purpose', next ?? '')}
             disabled={disabled}
-            aria-invalid={errors.purpose ? 'true' : undefined}
           >
-            <option value="">
-              {addressTypesLoading
-                ? label('types.loading', 'Loading…')
-                : label('types.placeholder', 'Address type')}
-            </option>
-            {addressTypes.map((entry) => (
-              <option key={entry.value} value={entry.value}>
-                {entry.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger
+              className={errors.purpose ? 'border-destructive' : undefined}
+              aria-invalid={errors.purpose ? 'true' : undefined}
+            >
+              <SelectValue
+                placeholder={
+                  addressTypesLoading
+                    ? label('types.loading', 'Loading…')
+                    : label('types.placeholder', 'Address type')
+                }
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {addressTypes.map((entry) => (
+                <SelectItem key={entry.value} value={entry.value}>
+                  {entry.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
           {addressTypesAdapter?.create ? (
             <Dialog open={typeDialogOpen} onOpenChange={setTypeDialogOpen}>
               <DialogTrigger asChild>

package/src/backend/detail/InlineEditors.tsx

@@ -6,6 +6,13 @@ import { FileCode, Loader2, Mail, Pencil, Phone, X } from 'lucide-react'
 import type { PluggableList } from 'unified'
 import { PhoneNumberField } from '@open-mercato/ui/backend/inputs/PhoneNumberField'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Textarea } from '@open-mercato/ui/primitives/textarea'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
@@ -826,18 +833,21 @@ export function InlineSelectEditor({
               {renderEditor ? (
                 renderEditor({ value: draft, onChange: setDraft })
               ) : (
-                <select
-                  className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                  value={draft}
-                  onChange={(event) => setDraft(event.target.value)}
+                <Select
+                  value={draft || undefined}
+                  onValueChange={(next) => setDraft(next ?? '')}
                 >
-                  <option value="">{t('ui.detail.inline.select.placeholder', 'Not set')}</option>
-                  {options.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </select>
+                  <SelectTrigger>
+                    <SelectValue placeholder={t('ui.detail.inline.select.placeholder', 'Not set')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {options.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               )}
               <div className="flex items-center gap-2">
                 <Button type="button" size="sm" onClick={() => void handleSave()} disabled={saving}>

package/src/backend/detail/NotesSection.tsx

@@ -8,6 +8,13 @@ import type { IconOption } from '@open-mercato/core/modules/dictionaries/compone
 import { ArrowUpRightSquare, FileCode, Loader2, Palette, Pencil, Plus, Trash2 } from 'lucide-react'
 import { formatRelativeTime } from '@open-mercato/shared/lib/time'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { flash } from '../FlashMessages'
 import { SwitchableMarkdownInput } from '../inputs/SwitchableMarkdownInput'
 import { ErrorMessage } from './ErrorMessage'
@@ -1013,19 +1020,22 @@ function NotesSectionImpl<C = unknown>({
                     >
                       {label('fields.entity', 'Assign to customer')}
                     </label>
-                    <select
-                      id="note-entity-select"
-                      className="h-9 rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                      value={selectedEntityId}
-                      onChange={(event) => setSelectedEntityId(event.target.value)}
+                    <Select
+                      value={selectedEntityId || undefined}
+                      onValueChange={(next) => setSelectedEntityId(next ?? '')}
                       disabled={isSubmitting || isLoading || !normalizedEntityOptions.length}
                     >
-                      {normalizedEntityOptions.map((option) => (
-                        <option key={option.id} value={option.id}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </select>
+                      <SelectTrigger id="note-entity-select">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {normalizedEntityOptions.map((option) => (
+                          <SelectItem key={option.id} value={option.id}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </div>
                 ) : null}
                 {normalizedDealOptions.length ? (
@@ -1036,22 +1046,22 @@ function NotesSectionImpl<C = unknown>({
                     >
                       {label('fields.deal', 'Link to deal (optional)')}
                     </label>
-                    <select
-                      id="note-deal-select"
-                      className="h-9 rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                      value={selectedDealId}
-                      onChange={(event) => setSelectedDealId(event.target.value)}
+                    <Select
+                      value={selectedDealId || undefined}
+                      onValueChange={(next) => setSelectedDealId(next ?? '')}
                       disabled={isSubmitting || isLoading}
                     >
-                      <option value="">
-                        {label('fields.dealPlaceholder', 'No linked deal')}
-                      </option>
-                      {normalizedDealOptions.map((option) => (
-                        <option key={option.id} value={option.id}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </select>
+                      <SelectTrigger id="note-deal-select">
+                        <SelectValue placeholder={label('fields.dealPlaceholder', 'No linked deal')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {normalizedDealOptions.map((option) => (
+                          <SelectItem key={option.id} value={option.id}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </div>
                 ) : null}
               </div>

package/src/backend/filters/AdvancedFilterBuilder.tsx

@@ -3,6 +3,14 @@ import * as React from 'react'
 import { ChevronDown, Plus, Trash2, X } from 'lucide-react'
 import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
+import { Input } from '../../primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type {
   AdvancedFilterState,
@@ -114,30 +122,41 @@ function ConditionRow({
         )}
       </div>
 
-      <select
-        className="rounded border bg-background px-2 py-1.5 text-sm min-w-[140px]"
-        value={condition.field}
-        onChange={(e) => handleFieldChange(e.target.value)}
-        aria-label={t('ui.advancedFilter.selectField', 'Select field')}
+      <Select
+        value={condition.field || undefined}
+        onValueChange={(next) => handleFieldChange(next ?? '')}
       >
-        <option value="" disabled>{t('ui.advancedFilter.selectFieldPlaceholder', 'Select field...')}</option>
-        {fields.map((f) => (
-          <option key={f.key} value={f.key}>{f.label}</option>
-        ))}
-      </select>
+        <SelectTrigger
+          className="min-w-[140px]"
+          aria-label={t('ui.advancedFilter.selectField', 'Select field')}
+        >
+          <SelectValue placeholder={t('ui.advancedFilter.selectFieldPlaceholder', 'Select field...')} />
+        </SelectTrigger>
+        <SelectContent>
+          {fields.map((f) => (
+            <SelectItem key={f.key} value={f.key}>{f.label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
 
-      <select
-        className="rounded border bg-background px-2 py-1.5 text-sm min-w-[120px]"
+      <Select
         value={condition.operator}
-        onChange={(e) => onUpdate(condition.id, { operator: e.target.value as FilterOperator, value: '' })}
-        aria-label={t('ui.advancedFilter.selectOperator', 'Select operator')}
+        onValueChange={(next) => onUpdate(condition.id, { operator: next as FilterOperator, value: '' })}
       >
-        {operators.map((op) => (
-          <option key={op} value={op}>
-            {t(`ui.advancedFilter.operator.${op}`, OPERATOR_LABELS[op])}
-          </option>
-        ))}
-      </select>
+        <SelectTrigger
+          className="min-w-[120px]"
+          aria-label={t('ui.advancedFilter.selectOperator', 'Select operator')}
+        >
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {operators.map((op) => (
+            <SelectItem key={op} value={op}>
+              {t(`ui.advancedFilter.operator.${op}`, OPERATOR_LABELS[op])}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
 
       {!valueless ? (
         <ValueInput
@@ -180,17 +199,22 @@ function ValueInput({
 
   if (fieldType === 'select' && fieldDef?.options) {
     return (
-      <select
-        className="rounded border bg-background px-2 py-1.5 text-sm min-w-[140px]"
-        value={typeof value === 'string' ? value : ''}
-        onChange={(e) => onUpdate(condition.id, { value: e.target.value })}
-        aria-label={t('ui.advancedFilter.selectValue', 'Select value')}
+      <Select
+        value={typeof value === 'string' && value ? value : undefined}
+        onValueChange={(next) => onUpdate(condition.id, { value: next ?? '' })}
       >
-        <option value="" disabled>{t('ui.advancedFilter.selectValuePlaceholder', 'Select...')}</option>
-        {fieldDef.options.map((opt) => (
-          <option key={opt.value} value={opt.value}>{opt.label}</option>
-        ))}
-      </select>
+        <SelectTrigger
+          className="min-w-[140px]"
+          aria-label={t('ui.advancedFilter.selectValue', 'Select value')}
+        >
+          <SelectValue placeholder={t('ui.advancedFilter.selectValuePlaceholder', 'Select...')} />
+        </SelectTrigger>
+        <SelectContent>
+          {fieldDef.options.map((opt) => (
+            <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     )
   }
 
@@ -208,9 +232,10 @@ function ValueInput({
 
   if (fieldType === 'number') {
     return (
-      <input
+      <Input
         type="number"
-        className="rounded border bg-background px-2 py-1.5 text-sm w-[120px]"
+        size="sm"
+        className="w-[120px]"
         value={typeof value === 'number' ? value : typeof value === 'string' ? value : ''}
         onChange={(e) => onUpdate(condition.id, { value: e.target.value })}
         placeholder={t('ui.advancedFilter.numberPlaceholder', 'Value')}
@@ -220,9 +245,10 @@ function ValueInput({
   }
 
   return (
-    <input
+    <Input
       type="text"
-      className="rounded border bg-background px-2 py-1.5 text-sm min-w-[140px]"
+      size="sm"
+      className="min-w-[140px]"
       value={typeof value === 'string' ? value : ''}
       onChange={(e) => onUpdate(condition.id, { value: e.target.value })}
       placeholder={t('ui.advancedFilter.textPlaceholder', 'Value...')}

package/src/backend/injection/InjectedField.tsx

@@ -8,6 +8,13 @@ import { Input } from '../../primitives/input'
 import { Checkbox } from '../../primitives/checkbox'
 import { Textarea } from '../../primitives/textarea'
 import { Label } from '../../primitives/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select'
 import { Spinner } from '../../primitives/spinner'
 
 type InjectedFieldProps = {
@@ -53,20 +60,22 @@ function SelectField({
   return (
     <div className="space-y-2" data-crud-field-id={field.id}>
       <Label htmlFor={field.id}>{label}</Label>
-      <select
-        id={field.id}
-        className="flex h-9 w-full rounded-md border border-input bg-background pl-3 pr-8 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-        value={typeof value === 'string' ? value : ''}
+      <Select
+        value={typeof value === 'string' && value ? value : undefined}
+        onValueChange={(next) => onChange(field.id, next || undefined)}
         disabled={disabled || (options.length === 0 && !field.options?.length)}
-        onChange={(event) => onChange(field.id, event.target.value || undefined)}
       >
-        <option value="">{t('ui.filters.select.placeholder', 'Select...')}</option>
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.labelKey ? t(option.labelKey, option.label) : option.label}
-          </option>
-        ))}
-      </select>
+        <SelectTrigger id={field.id}>
+          <SelectValue placeholder={t('ui.filters.select.placeholder', 'Select...')} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.labelKey ? t(option.labelKey, option.label) : option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
       {optionsError ? (
         <div className="text-xs text-muted-foreground">{t('ui.forms.optionsUnavailable', 'Options unavailable')}</div>
       ) : null}

package/src/backend/inputs/ComboboxInput.tsx

@@ -208,6 +208,10 @@ export function ComboboxInput({
 
   return (
     <div className="relative w-full">
+      {/* Use raw <input> here instead of the DS Input primitive: ComboboxInput's
+          focus / suggestions-popup interplay relies on the trigger being a plain
+          input element. The DS wrapper introduces a <div> that desyncs autocomplete
+          on this specific surface. Keeps the rest of the form on Input primitive. */}
       <input
         ref={inputRef}
         type="text"

package/src/backend/inputs/EventSelect.tsx

@@ -4,6 +4,15 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { apiCall } from '../utils/apiCall'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select'
 
 /**
  * Event definition returned by the API
@@ -101,25 +110,29 @@ export function EventSelect({
   const isEmpty = !isLoading && filteredEvents.length === 0
 
   return (
-    <select
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      className={`h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className || ''}`}
+    <Select
+      value={value || undefined}
+      onValueChange={(next) => onChange(next ?? '')}
       disabled={disabled || isLoading}
     >
-      <option value="" disabled>
-        {isLoading ? 'Loading...' : isEmpty ? 'No events available' : placeholder}
-      </option>
-      {Object.entries(eventsByModule).map(([module, moduleEvents]) => (
-        <optgroup key={module} label={formatModuleName(module)}>
-          {moduleEvents.map(event => (
-            <option key={event.id} value={event.id}>
-              {event.label}
-            </option>
-          ))}
-        </optgroup>
-      ))}
-    </select>
+      <SelectTrigger size="lg" className={className}>
+        <SelectValue
+          placeholder={isLoading ? 'Loading...' : isEmpty ? 'No events available' : placeholder}
+        />
+      </SelectTrigger>
+      <SelectContent>
+        {Object.entries(eventsByModule).map(([module, moduleEvents]) => (
+          <SelectGroup key={module}>
+            <SelectLabel>{formatModuleName(module)}</SelectLabel>
+            {moduleEvents.map(event => (
+              <SelectItem key={event.id} value={event.id}>
+                {event.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
   )
 }
 

package/src/backend/inputs/PhoneNumberField.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { extractPhoneDigits, validatePhoneNumber } from '@open-mercato/shared/lib/phone'
+import { Input } from '../../primitives/input'
 
 export type PhoneDuplicateMatch = {
   id: string
@@ -136,9 +137,8 @@ export function PhoneNumberField({
 
   return (
     <div className="space-y-2">
-      <input
+      <Input
         type="tel"
-        className="w-full h-9 rounded border px-2 text-sm"
         value={local}
         onChange={handleChange}
         onBlur={handleBlur}

package/src/backend/inputs/TimeInput.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Input } from '../../primitives/input'
 
 export type TimeInputProps = {
   value?: string | null
@@ -107,16 +108,12 @@ export function TimeInput({
     [disabled, emitChange, hour, minuteStep]
   )
 
-  const inputClass = cn(
-    'w-14 h-9 rounded border text-center text-sm tabular-nums',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
-    disabled && 'bg-muted text-muted-foreground cursor-not-allowed',
-    'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed'
-  )
+  const wrapperClass = 'w-14'
+  const innerInputClass = 'text-center tabular-nums'
 
   return (
     <div className={cn('flex items-center gap-1', className)}>
-      <input
+      <Input
         type="number"
         min={0}
         max={23}
@@ -126,10 +123,11 @@ export function TimeInput({
         disabled={disabled}
         aria-label={hourLabel}
         data-crud-focus-target=""
-        className={inputClass}
+        className={wrapperClass}
+        inputClassName={innerInputClass}
       />
       <span className="text-sm font-medium select-none">:</span>
-      <input
+      <Input
         type="number"
         min={0}
         max={59}
@@ -139,7 +137,8 @@ export function TimeInput({
         onKeyDown={handleMinuteKeyDown}
         disabled={disabled}
         aria-label={minuteLabel}
-        className={inputClass}
+        className={wrapperClass}
+        inputClassName={innerInputClass}
       />
     </div>
   )