@open-mercato/ui 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2964.d5ac4a6ebb

package/src/backend/JsonBuilder.tsx

@@ -3,6 +3,14 @@
 import * as React from '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 { Plus, Trash2, ChevronRight, ChevronDown, Code, LayoutList } from 'lucide-react'
 
 function cn(...classes: (string | undefined | null | false)[]) {
@@ -239,47 +247,57 @@ function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNod
                 <div className="flex-1 flex gap-2 items-center flex-wrap">
 
                     {!readOnly && (
-                        <select
+                        <Select
                             value={type}
-                            onChange={(e) => handleTypeChange(e.target.value as JsonNodeType)}
-                            className="text-xs border rounded px-1 py-0.5 bg-muted text-foreground focus-visible:ring-1 focus-visible:ring-ring"
+                            onValueChange={(next) => handleTypeChange(next as JsonNodeType)}
                         >
-                            <option value="string">String</option>
-                            <option value="number">Number</option>
-                            <option value="boolean">Boolean</option>
-                            <option value="object">Object</option>
-                            <option value="array">Array</option>
-                            <option value="null">Null</option>
-                        </select>
+                            <SelectTrigger size="sm" className="w-auto min-w-[6rem]">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="string">String</SelectItem>
+                                <SelectItem value="number">Number</SelectItem>
+                                <SelectItem value="boolean">Boolean</SelectItem>
+                                <SelectItem value="object">Object</SelectItem>
+                                <SelectItem value="array">Array</SelectItem>
+                                <SelectItem value="null">Null</SelectItem>
+                            </SelectContent>
+                        </Select>
                     )}
 
                     {type === 'string' && (
-                        <input
-                            className="flex-1 min-w-0 sm:min-w-[120px] text-sm border rounded px-2 py-0.5 focus-visible:outline-none focus-visible:border-ring"
+                        <Input
+                            size="sm"
+                            className="flex-1 min-w-0 sm:min-w-[120px]"
                             value={data}
                             onChange={e => onChange(e.target.value)}
                             disabled={readOnly}
                         />
                     )}
                     {type === 'number' && (
-                        <input
+                        <Input
                             type="number"
-                            className="flex-1 w-full sm:w-[100px] text-sm border rounded px-2 py-0.5 focus-visible:outline-none focus-visible:border-ring"
+                            size="sm"
+                            className="flex-1 w-full sm:w-[100px]"
                             value={data}
                             onChange={e => onChange(parseFloat(e.target.value) || 0)}
                             disabled={readOnly}
                         />
                     )}
                     {type === 'boolean' && (
-                        <select
-                            className="flex-1 w-full sm:w-[100px] text-sm border rounded px-2 py-0.5 focus-visible:outline-none focus-visible:border-ring"
+                        <Select
                             value={String(data)}
-                            onChange={e => onChange(e.target.value === 'true')}
+                            onValueChange={(next) => onChange(next === 'true')}
                             disabled={readOnly}
                         >
-                            <option value="true">true</option>
-                            <option value="false">false</option>
-                        </select>
+                            <SelectTrigger size="sm" className="flex-1 w-full sm:w-[100px]">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="true">true</SelectItem>
+                                <SelectItem value="false">false</SelectItem>
+                            </SelectContent>
+                        </Select>
                     )}
                     {type === 'null' && <span className="text-xs text-muted-foreground">null</span>}
                     {isContainer && (

package/src/backend/__tests__/FieldDefinitionsEditor.test.tsx

@@ -5,6 +5,20 @@ import { fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 import { FieldDefinitionsEditor, type FieldDefinition } from '../custom-fields/FieldDefinitionsEditor'
 
+// Radix Select uses pointer capture / scrollIntoView APIs that jsdom doesn't implement.
+// Polyfill them so tests can interact with Radix-based comboboxes.
+if (typeof window !== 'undefined') {
+  if (!Element.prototype.hasPointerCapture) {
+    Element.prototype.hasPointerCapture = () => false
+  }
+  if (!Element.prototype.releasePointerCapture) {
+    Element.prototype.releasePointerCapture = () => undefined
+  }
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => undefined
+  }
+}
+
 describe('FieldDefinitionsEditor', () => {
   it('assigns a field to a fieldset without triggering a render-time parent update warning', () => {
     const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
@@ -36,15 +50,18 @@ describe('FieldDefinitionsEditor', () => {
         />,
       )
 
-      const assignFieldsetSelect = screen.getAllByRole('combobox').find((element) => {
-        if (!(element instanceof HTMLSelectElement)) return false
-        const optionLabels = Array.from(element.options).map((option) => option.text)
-        return optionLabels.includes('Unassigned') && optionLabels.includes('New fieldset')
+      const assignFieldsetTrigger = screen.getAllByRole('combobox').find((element) => {
+        return element.textContent?.trim() === 'Unassigned'
       })
 
-      expect(assignFieldsetSelect).toBeDefined()
+      expect(assignFieldsetTrigger).toBeDefined()
+
+      fireEvent.pointerDown(assignFieldsetTrigger!, { button: 0, ctrlKey: false })
+      fireEvent.click(assignFieldsetTrigger!)
 
-      fireEvent.change(assignFieldsetSelect as HTMLSelectElement, { target: { value: 'fieldset_1' } })
+      const option = screen.getByRole('option', { name: 'New fieldset' })
+      fireEvent.pointerDown(option)
+      fireEvent.click(option)
 
       expect(handleDefinitionChange).toHaveBeenCalledWith(0, expect.objectContaining({
         key: 'buying_role',

package/src/backend/columns/ColumnChooserPanel.tsx

@@ -4,6 +4,7 @@ import { Search, GripVertical, X, ChevronRight } from 'lucide-react'
 import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
 import { Switch } from '../../primitives/switch'
+import { Input } from '../../primitives/input'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import {
   DndContext,
@@ -167,16 +168,14 @@ export function ColumnChooserSection({
   return (
     <div className="flex flex-col">
       <div className="px-4 py-3 border-t">
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-          <input
-            type="text"
-            className="w-full rounded border bg-background pl-8 pr-2 py-2 text-sm"
-            placeholder={t('ui.columnChooser.search', 'Search columns...')}
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </div>
+        <Input
+          type="text"
+          size="sm"
+          leftIcon={<Search />}
+          placeholder={t('ui.columnChooser.search', 'Search columns...')}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
       </div>
 
       <div>

package/src/backend/custom-fields/FieldDefinitionsEditor.tsx

@@ -4,6 +4,13 @@ import * as React from 'react'
 import { Cog, GripVertical, Languages, Pencil, Plus, Trash2, X } from 'lucide-react'
 import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select'
 import { CUSTOM_FIELD_KINDS } from '@open-mercato/shared/modules/entities/kinds'
 import { FieldRegistry } from '../fields/registry'
 import { slugify } from '@open-mercato/shared/lib/slugify'
@@ -289,18 +296,21 @@ export function FieldDefinitionsEditor({
         <div className="rounded border bg-card p-3 space-y-3">
           <div className="flex flex-wrap items-center gap-2">
             <label className="text-xs font-medium text-muted-foreground">Fieldset</label>
-            <select
-              className="border rounded px-2 py-1 text-sm"
-              value={resolvedActiveFieldset ?? ''}
-              onChange={(event) => handleActiveFieldsetChange(event.target.value)}
+            <Select
+              value={resolvedActiveFieldset || undefined}
+              onValueChange={(value) => handleActiveFieldsetChange(value ?? '')}
             >
-              <option value="">Unassigned fields</option>
-              {fieldsets.map((fs) => (
-                <option key={fs.code} value={fs.code}>
-                  {fs.label || fs.code}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger size="sm" className="w-auto min-w-[10rem]">
+                <SelectValue placeholder="Unassigned fields" />
+              </SelectTrigger>
+              <SelectContent>
+                {fieldsets.map((fs) => (
+                  <SelectItem key={fs.code} value={fs.code}>
+                    {fs.label || fs.code}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
             <Button
               variant="outline"
               size="sm"
@@ -339,22 +349,25 @@ export function FieldDefinitionsEditor({
               </div>
               <div>
                 <label className="text-xs">Icon</label>
-                <select
-                  className="border rounded w-full px-2 py-1 text-sm"
-                  value={activeFieldsetConfig.icon ?? ''}
-                  onChange={(event) =>
+                <Select
+                  value={activeFieldsetConfig.icon || undefined}
+                  onValueChange={(value) =>
                     handleFieldsetPatch(activeFieldsetConfig.code, {
-                      icon: event.target.value || undefined,
+                      icon: value || undefined,
                     })
                   }
                 >
-                  <option value="">Default</option>
-                  {FIELDSET_ICON_OPTIONS.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </select>
+                  <SelectTrigger size="sm">
+                    <SelectValue placeholder="Default" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {FIELDSET_ICON_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               </div>
               <div>
                 <label className="text-xs">Description</label>
@@ -756,17 +769,21 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
         </div>
         <div className="md:col-span-6">
           <label className="text-xs">Kind</label>
-          <select
-            className={`rounded w-full px-2 py-1 text-sm ${error?.kind ? 'border-red-500 border' : 'border'}`}
-            value={local.kind}
-            onChange={(event) => { apply({ kind: event.target.value }, true) }}
+          <Select
+            value={local.kind || undefined}
+            onValueChange={(value) => { apply({ kind: value ?? '' }, true) }}
           >
-            {kindOptions.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger className={error?.kind ? 'border-destructive' : undefined}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {kindOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
           {error?.kind ? <div className="text-xs text-red-600 mt-1">{error.kind}</div> : null}
       </div>
     </div>
@@ -775,18 +792,21 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
         <div className="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
           <div>
             <label className="text-xs">Assign to fieldset</label>
-            <select
-              className="border rounded w-full px-2 py-1 text-sm"
-              value={currentFieldsetValue}
-              onChange={(event) => handleFieldsetSelect(event.target.value)}
+            <Select
+              value={currentFieldsetValue || undefined}
+              onValueChange={(value) => handleFieldsetSelect(value ?? '')}
             >
-              <option value="">Unassigned</option>
-              {(fieldsets || []).map((fs) => (
-                <option key={fs.code} value={fs.code}>
-                  {fs.label || fs.code}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue placeholder="Unassigned" />
+              </SelectTrigger>
+              <SelectContent>
+                {(fieldsets || []).map((fs) => (
+                  <SelectItem key={fs.code} value={fs.code}>
+                    {fs.label || fs.code}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
           {currentFieldsetValue ? (
             <div>
@@ -794,18 +814,21 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                 <label className="text-xs">Group</label>
               </div>
               <div className="flex items-center gap-2 mt-1">
-                <select
-                  className="flex-1 border rounded px-2 py-1 text-sm"
-                  value={currentGroup?.code ?? ''}
-                  onChange={(event) => handleGroupSelect(event.target.value)}
+                <Select
+                  value={currentGroup?.code || undefined}
+                  onValueChange={(value) => handleGroupSelect(value ?? '')}
                 >
-                  <option value="">No group</option>
-                  {groupOptions.map((group) => (
-                    <option key={group.code} value={group.code}>
-                      {group.title || group.code}
-                    </option>
-                  ))}
-                </select>
+                  <SelectTrigger className="flex-1">
+                    <SelectValue placeholder="No group" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {groupOptions.map((group) => (
+                      <SelectItem key={group.code} value={group.code}>
+                        {group.title || group.code}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
                 <IconButton
                   variant="outline"
                   className="text-muted-foreground"
@@ -852,16 +875,19 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
           <>
             <div>
               <label className="text-xs">Editor</label>
-              <select
-                className="border rounded w-full px-2 py-1 text-sm"
-                value={typeof local.configJson?.editor === 'string' ? local.configJson.editor : ''}
-                onChange={(event) => { apply({ configJson: { ...(local.configJson || {}), editor: event.target.value || undefined } }, true) }}
+              <Select
+                value={typeof local.configJson?.editor === 'string' && local.configJson.editor ? local.configJson.editor : undefined}
+                onValueChange={(value) => { apply({ configJson: { ...(local.configJson || {}), editor: value || undefined } }, true) }}
               >
-                <option value="">Default</option>
-                <option value="markdown">Markdown (UIW)</option>
-                <option value="simpleMarkdown">Simple Markdown</option>
-                <option value="htmlRichText">HTML Rich Text</option>
-              </select>
+                <SelectTrigger>
+                  <SelectValue placeholder="Default" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="markdown">Markdown (UIW)</SelectItem>
+                  <SelectItem value="simpleMarkdown">Simple Markdown</SelectItem>
+                  <SelectItem value="htmlRichText">HTML Rich Text</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
             {local.kind === 'text' && (
               <>
@@ -873,20 +899,23 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                 {!!local.configJson?.multi && (
                   <div className="md:col-span-2">
                     <label className="text-xs">Multi-select input style</label>
-                    <select
-                      className="border rounded w-full px-2 py-1 text-sm"
+                    <Select
                       value={local.configJson?.input === 'listbox' ? 'listbox' : 'default'}
-                      onChange={(event) => {
-                        const { value } = event.target
+                      onValueChange={(value) => {
                         const nextConfig = { ...(local.configJson || {}) }
                         if (value === 'listbox') nextConfig.input = 'listbox'
                         else delete nextConfig.input
                         apply({ configJson: nextConfig }, true)
                       }}
                     >
-                      <option value="default">Default</option>
-                      <option value="listbox">Listbox (searchable)</option>
-                    </select>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="default">Default</SelectItem>
+                        <SelectItem value="listbox">Listbox (searchable)</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                 )}
               </>
@@ -1022,11 +1051,10 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
           {(Array.isArray(local.configJson?.validation) ? local.configJson!.validation : []).map((rule: any, index: number) => (
             <div key={index} className="grid grid-cols-1 md:grid-cols-12 gap-2 items-center">
               <div className="md:col-span-3">
-                <select
-                  className="border rounded w-full px-2 py-1 text-sm"
+                <Select
                   value={rule?.rule || 'required'}
-                  onChange={(event) => {
-                    const nextRule = event.target.value
+                  onValueChange={(value) => {
+                    const nextRule = value
                     apply((current) => {
                       const list = Array.isArray(current.configJson?.validation) ? [...current.configJson.validation] : []
                       const existing = (list[index] as any) || {}
@@ -1035,18 +1063,23 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                     }, true)
                   }}
                 >
-                  <option value="required">required</option>
-                  <option value="date">date</option>
-                  <option value="integer">integer</option>
-                  <option value="float">float</option>
-                  <option value="lt">lt</option>
-                  <option value="lte">lte</option>
-                  <option value="gt">gt</option>
-                  <option value="gte">gte</option>
-                  <option value="eq">eq</option>
-                  <option value="ne">ne</option>
-                  <option value="regex">regex</option>
-                </select>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="required">required</SelectItem>
+                    <SelectItem value="date">date</SelectItem>
+                    <SelectItem value="integer">integer</SelectItem>
+                    <SelectItem value="float">float</SelectItem>
+                    <SelectItem value="lt">lt</SelectItem>
+                    <SelectItem value="lte">lte</SelectItem>
+                    <SelectItem value="gt">gt</SelectItem>
+                    <SelectItem value="gte">gte</SelectItem>
+                    <SelectItem value="eq">eq</SelectItem>
+                    <SelectItem value="ne">ne</SelectItem>
+                    <SelectItem value="regex">regex</SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
               <div className="md:col-span-4">
                 <input

package/src/backend/date-range/DateRangeSelect.tsx

@@ -2,6 +2,13 @@
 
 import * as React from 'react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select'
 import { DATE_RANGE_OPTIONS, type DateRangePreset } from './dateRanges'
 
 export type DateRangeSelectProps = {
@@ -31,18 +38,18 @@ export function DateRangeSelect({
           {label}
         </label>
       )}
-      <select
-        id={id}
-        className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-        value={value}
-        onChange={(e) => onChange(e.target.value as DateRangePreset)}
-      >
-        {DATE_RANGE_OPTIONS.map((option) => (
-          <option key={option.value} value={option.value}>
-            {t(option.labelKey, option.value.replace(/_/g, ' '))}
-          </option>
-        ))}
-      </select>
+      <Select value={value} onValueChange={(next) => onChange(next as DateRangePreset)}>
+        <SelectTrigger id={id} size="sm">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {DATE_RANGE_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {t(option.labelKey, option.value.replace(/_/g, ' '))}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   )
 }

package/src/backend/date-range/InlineDateRangeSelect.tsx

@@ -2,6 +2,13 @@
 
 import * as React from 'react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select'
 import { DATE_RANGE_OPTIONS, type DateRangePreset } from './dateRanges'
 
 export type InlineDateRangeSelectProps = {
@@ -23,29 +30,18 @@ export function InlineDateRangeSelect({
     : value.replace(/_/g, ' ')
 
   return (
-    <div className={`relative inline-flex items-center ${className}`}>
-      <select
-        className="appearance-none rounded-md border border-border bg-background px-2 py-0.5 pr-6 text-xs text-foreground hover:border-primary/50 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-pointer"
-        value={value}
-        onChange={(e) => onChange(e.target.value as DateRangePreset)}
-        title={displayLabel}
-      >
+    <Select value={value} onValueChange={(next) => onChange(next as DateRangePreset)}>
+      <SelectTrigger size="sm" className={className} title={displayLabel}>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
         {DATE_RANGE_OPTIONS.map((option) => (
-          <option key={option.value} value={option.value}>
+          <SelectItem key={option.value} value={option.value}>
             {t(option.labelKey, option.value.replace(/_/g, ' '))}
-          </option>
+          </SelectItem>
         ))}
-      </select>
-      <svg
-        className="pointer-events-none absolute right-1.5 h-3 w-3 text-muted-foreground"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        strokeWidth={2}
-      >
-        <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-      </svg>
-    </div>
+      </SelectContent>
+    </Select>
   )
 }