portal-mojo 0.2.20 → 0.2.21

package/src/ui/image-editor/ImageEditor.tsx

@@ -1,3 +1,4 @@
+import { ComboBox } from '../ComboBox';
 import {
     useCallback, useEffect, useMemo, useRef, useState,
     type PointerEvent as ReactPointerEvent,
@@ -403,14 +404,12 @@ export function ImageEditor(props: ImageEditorProps) {
                     <span className="image-editor-value">{Math.round(cropBox.width)} × {Math.round(cropBox.height)} px{cropOptions.cropAndScale ? ` → ${cropOptions.cropAndScale.width} × ${cropOptions.cropAndScale.height}` : ''}</span>
                 </>}
                 {mode === 'filters' && <label className="image-editor-preset">Effect
-                    <select className="select" value={preset} disabled={disabled} onChange={(event) => {
-                        const next = event.target.value;
+                    <ComboBox allowCustom={false} maxSuggestions={Number.MAX_SAFE_INTEGER} value={String(preset)} disabled={disabled} onChange={(selectedValue) => {
+                        const next = String(selectedValue);
                         if (next in FILTER_PRESETS) setPreset(next as FilterPresetName);
                         else { console.warn(`ImageEditor: unknown filter preset ${JSON.stringify(next)} — falling back to Original.`); setPreset('none'); }
                         setDirty(true);
-                    }}>
-                        {Object.entries(FILTER_PRESETS).map(([key, value]) => <option key={key} value={key}>{value.name}</option>)}
-                    </select>
+                    }} options={[...(Object.entries(FILTER_PRESETS).map(([key, value]) => ({ value: String(key), label: String(value.name) })) ?? [])]} />
                 </label>}
                 <button type="button" className="btn btn-primary btn-compact image-editor-apply" disabled={disabled || (mode !== 'crop' && !dirty && !transformDirty(transform) && !filterDirty(filters, preset))} onClick={() => commit(mode, mode === 'crop')}>Apply</button>
             </div>

package/src/ui/schema-form-core.tsx

@@ -1,3 +1,4 @@
+import { ComboBox } from './ComboBox';
 import { useCallback, useEffect, useId, useRef, useState, type FormEvent } from 'react';
 import type { Field, FieldValue, FormData } from '../client/types';
 import { declaredFieldPatch, getPath, resolveShowWhen, validateFieldValue } from './form-autosave';
@@ -220,7 +221,7 @@ export function SchemaSelect({ field, value, invalid, disabled, id, describedBy,
     disabled?: boolean;
     id?: string;
     describedBy?: string;
-    focusTarget?: (node: HTMLSelectElement | null) => void;
+    focusTarget?: (node: HTMLInputElement | null) => void;
     onChange: (value: string) => void;
 }) {
     const options = field.options ?? [];
@@ -234,10 +235,7 @@ export function SchemaSelect({ field, value, invalid, disabled, id, describedBy,
     }
     const shown = known ? value : '';
     return (
-        <select ref={focusTarget} id={id} aria-invalid={invalid || undefined} aria-describedby={describedBy} disabled={disabled || field.disabled} className={`input${invalid ? ' input-invalid' : ''}`} value={shown} onChange={(event) => onChange(event.target.value)}>
-            {shown === '' && <option value="" disabled>{field.placeholder ?? 'Select…'}</option>}
-            {options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
-        </select>
+        <ComboBox allowCustom={false} maxSuggestions={Number.MAX_SAFE_INTEGER} inputRef={focusTarget} id={id} aria-invalid={invalid || undefined} aria-describedby={describedBy} disabled={disabled || field.disabled} value={String(shown)} onChange={(selectedValue) => onChange(String(selectedValue))} options={[...(shown === '' ? [({ value: "", label: String(field.placeholder ?? 'Select…'), disabled: true })] : []), ...(options.map((option) => ({ value: String(option.value), label: String(option.label) })) ?? [])]} />
     );
 }