portal-mojo 0.2.19 → 0.2.21

package/src/ui/ComboBox.tsx

@@ -18,7 +18,7 @@
 //   (web-mojo strict-equalled `data-value` strings against numbers).
 // - Popover is the sole outside-click/Escape owner. ComboBox owns only the
 //   meaning of each dismissal (settle outside, revert on Escape).
-import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState, type InputHTMLAttributes, type ReactNode, type Ref } from 'react';
 import { Popover } from './Popover';
 
 export type ComboValue = string | number;
@@ -28,11 +28,13 @@ export interface ComboOption {
     label: string;
     /** Muted second line in the dropdown (rendered while `showDescription`). */
     description?: string;
+    /** Visible but unavailable; cannot be committed by pointer, typing or keyboard. */
+    disabled?: boolean;
     /** Opaque payload handed back through onSelect — rule-builder hook. */
     meta?: Record<string, unknown>;
 }
 
-export interface ComboBoxProps {
+export interface ComboBoxProps extends Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'title' | 'autoFocus' | 'name'> {
     /** Committed value. The input DISPLAYS the matching option's label. */
     value?: ComboValue | null;
     /** Bare strings normalize to { value: s, label: s }. */
@@ -54,6 +56,7 @@ export interface ComboBoxProps {
     required?: boolean;
     id?: string;
     className?: string;
+    inputRef?: Ref<HTMLInputElement>;
 }
 
 function normalizeOptions(input: ReadonlyArray<ComboOption | string>): ComboOption[] {
@@ -66,6 +69,7 @@ function normalizeOptions(input: ReadonlyArray<ComboOption | string>): ComboOpti
         const opt: ComboOption = { value: raw.value, label: raw.label || String(raw.value) };
         if (raw.description) opt.description = raw.description;
         if (raw.meta) opt.meta = raw.meta;
+        if (raw.disabled) opt.disabled = true;
         out.push(opt);
     }
     return out;
@@ -115,6 +119,8 @@ export function ComboBox({
     required = false,
     id,
     className,
+    inputRef: externalInputRef,
+    ...inputAttributes
 }: ComboBoxProps) {
     // `draft` is the uncommitted typed text; null = not editing, display the
     // committed value's label. This split IS the one-pipeline fix.
@@ -123,6 +129,11 @@ export function ComboBox({
     const [highlight, setHighlight] = useState(-1);
     const wrapRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
+    const setInputRef = useCallback((node: HTMLInputElement | null) => {
+        inputRef.current = node;
+        if (typeof externalInputRef === 'function') return externalInputRef(node);
+        if (externalInputRef) externalInputRef.current = node;
+    }, [externalInputRef]);
     // Mirror of `draft`, nulled synchronously on commit/revert so the
     // mousedown-outside + blur pair can both call settle() without
     // double-committing (blur fires before React re-renders).
@@ -152,6 +163,9 @@ export function ComboBox({
     }
 
     const canOpen = !disabled && !readOnly;
+    useEffect(() => {
+        if (!canOpen) { draftRef.current = null; setDraft(null); setOpen(false); setHighlight(-1); }
+    }, [canOpen]);
     const displayValue = draft ?? (selected ? selected.label : value == null ? '' : String(value));
 
     const setDraftBoth = (d: string | null) => { draftRef.current = d; setDraft(d); };
@@ -159,12 +173,15 @@ export function ComboBox({
 
     // ── the ONE committed pipeline ───────────────────────────────────────
     const commitOption = (opt: ComboOption) => {
+        if (!canOpen || inputRef.current?.matches(':disabled')) return;
         setDraftBoth(null);
         close();
+        if (opt.disabled) return;
         if (opt.value !== value) onChange?.(opt.value, opt);
         onSelect?.(opt);
     };
     const commitCustom = (text: string) => {
+        if (!canOpen || inputRef.current?.matches(':disabled')) return;
         setDraftBoth(null);
         close();
         if (text !== (value == null ? '' : String(value))) onChange?.(text);
@@ -193,18 +210,27 @@ export function ComboBox({
         document.getElementById(`combo-opt-${uid}-${highlight}`)?.scrollIntoView({ block: 'nearest' });
     }, [highlight, uid]);
 
+    const moveHighlight = (direction: 1 | -1) => setHighlight((current) => {
+        let next = current < 0 && direction === -1 ? 0 : current;
+        for (let count = 0; count < visible.length; count++) {
+            next = (next + direction + visible.length) % visible.length;
+            if (!visible[next].disabled) return next;
+        }
+        return -1;
+    });
+
     const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         switch (e.key) {
             case 'ArrowDown':
                 if (!canOpen) break;
                 e.preventDefault();
                 if (!open) setOpen(true);
-                else if (visible.length > 0) setHighlight((h) => (h + 1) % visible.length);
+                else moveHighlight(1);
                 break;
             case 'ArrowUp':
                 if (!open) break;
                 e.preventDefault();
-                if (visible.length > 0) setHighlight((h) => (h <= 0 ? visible.length - 1 : h - 1));
+                moveHighlight(-1);
                 break;
             case 'Enter':
                 if (open && highlight >= 0 && highlight < visible.length) {
@@ -251,7 +277,8 @@ export function ComboBox({
         <div className={`combo${className ? ` ${className}` : ''}`} ref={wrapRef}>
             <div className="combo-input-wrap">
                 <input
-                    ref={inputRef}
+                    {...inputAttributes}
+                    ref={setInputRef}
                     id={id}
                     type="text"
                     className="input combo-input"
@@ -267,6 +294,7 @@ export function ComboBox({
                     readOnly={readOnly}
                     required={required}
                     onFocus={() => { if (canOpen) setOpen(true); }}
+                    onClick={() => { if (canOpen) setOpen(true); }}
                     onBlur={(e) => {
                         if (wrapRef.current && e.relatedTarget && wrapRef.current.contains(e.relatedTarget as Node)) return;
                         settle();
@@ -287,7 +315,8 @@ export function ComboBox({
                         type="button"
                         className="combo-toggle"
                         tabIndex={-1}
-                        aria-label="Toggle dropdown"
+                        aria-hidden="true"
+                        title="Show options"
                         onMouseDown={(e) => e.preventDefault() /* keep input focus */}
                         onClick={onToggle}
                     >
@@ -297,7 +326,7 @@ export function ComboBox({
             </div>
             <Popover
                 anchorRef={wrapRef}
-                open={open}
+                open={open && canOpen}
                 onClose={(reason) => reason === 'escape' ? revert() : settle()}
                 id={listId}
                 className="combo-pop"
@@ -316,9 +345,11 @@ export function ComboBox({
                                 id={optionId(i)}
                                 role="option"
                                 aria-selected={isSelected}
+                                data-value={opt.value}
+                                aria-disabled={opt.disabled || undefined}
                                 className={`combo-option${i === highlight ? ' combo-hot' : ''}${isSelected ? ' combo-selected' : ''}`}
                                 onMouseDown={(e) => e.preventDefault() /* option click must not blur-settle first */}
-                                onClick={() => commitOption(opt)}
+                                onClick={() => { if (!opt.disabled) commitOption(opt); }}
                             >
                                 <div className="combo-option-main">
                                     <div className="combo-option-label">{highlightLabel(opt.label, (draft ?? '').trim())}</div>

package/src/ui/FilterBar.tsx

@@ -1,3 +1,4 @@
+import { ComboBox } from './ComboBox';
 // FilterBar — web-mojo's filter UX: an "Add filter" menu listing every
 // available filter with a per-type icon and a check on the active ones, each
 // opening a type-appropriate dialog; applied filters become editable pills.
@@ -126,13 +127,10 @@ function FilterForm({ def, current, onDone }: {
                     ))}
                 </div>
             ) : def.type === 'select' || def.type === 'boolean' ? (
-                <select className="input" value={text} onChange={(e) => setText(e.target.value)} autoFocus>
-                    <option value="">Select…</option>
-                    {(def.type === 'boolean'
+                <ComboBox allowCustom={false} maxSuggestions={Number.MAX_SAFE_INTEGER} value={String(text)} onChange={(selectedValue) => setText(String(selectedValue))} autoFocus options={[({ value: "", label: "Select…" }), ...((def.type === 'boolean'
                         ? [{ value: 'true', label: def.trueLabel ?? 'True' }, { value: 'false', label: def.falseLabel ?? 'False' }]
                         : def.options ?? []
-                    ).map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
-                </select>
+                    ).map((o) => ({ value: String(o.value), label: String(o.label) })) ?? [])]} />
             ) : (
                 <input
                     className="input"

package/src/ui/ModelTable.tsx

@@ -1,3 +1,4 @@
+import { ComboBox } from './ComboBox';
 // ModelTable — schema-driven server table at web-mojo TableView fidelity
 // (ListView.js / TableView.js / TablePage.js port). No table library: sort,
 // filter, search and paging are all wire params django-mojo processes, so
@@ -986,14 +987,7 @@ function ModelTableView<T extends { id: RowId }>(props: ModelTableProps<T> & {
                     )}
                     <label className="page-size">
                         <span className="dim">Rows</span>
-                        <select
-                            className="input input-compact"
-                            value={p.size}
-                            onChange={(e) => p.setSize(Number(e.target.value))}
-                            aria-label="Rows per page"
-                        >
-                            {PAGE_SIZES.map((s) => <option key={s} value={s}>{s}</option>)}
-                        </select>
+                        <ComboBox allowCustom={false} maxSuggestions={Number.MAX_SAFE_INTEGER} value={String(p.size)} onChange={(selectedValue) => p.setSize(Number(String(selectedValue)))} aria-label="Rows per page" options={[...(PAGE_SIZES.map((s) => ({ value: String(s), label: String(s) })) ?? [])]} />
                     </label>
                 </div>
             </div>

package/src/ui/Popover.tsx

@@ -26,7 +26,7 @@
 // flagged autofocus, and we don't. Typing in an anchored input keeps
 // working; per-option focus retention (e.g. preventDefault on option
 // mousedown) belongs to the consuming control.
-import { useEffect, useLayoutEffect, useRef, type HTMLAttributes, type RefObject } from 'react';
+import { useLayoutEffect, useRef, type HTMLAttributes, type RefObject } from 'react';
 import { createPortal } from 'react-dom';
 
 export type PopoverPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
@@ -52,6 +52,7 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
 
 const PLACEMENTS: readonly PopoverPlacement[] = ['bottom-start', 'bottom-end', 'top-start', 'top-end'];
 const VIEWPORT_INSET = 8; // px breathing room at viewport edges (source parity)
+const openPopovers: HTMLDivElement[] = [];
 
 const SUPPORTS_POPOVER =
     typeof HTMLElement !== 'undefined' && 'showPopover' in HTMLElement.prototype;
@@ -71,7 +72,7 @@ export function Popover({
     // Latest-callback ref so an inline `onClose` doesn't churn the document
     // listeners (and their deferred attach) on every parent render.
     const onCloseRef = useRef(onClose);
-    useEffect(() => { onCloseRef.current = onClose; });
+    useLayoutEffect(() => { onCloseRef.current = onClose; });
 
     // ── Show + position ──────────────────────────────────────────────
     // Layout effect: promote to the top layer and position BEFORE paint, so
@@ -146,8 +147,11 @@ export function Popover({
     }, [open, placement, gap, anchorRef]);
 
     // ── Outside-mousedown + Escape ───────────────────────────────────
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (!open) return;
+        const popover = popRef.current;
+        if (!popover) return;
+        openPopovers.push(popover);
 
         const onDocDown = (event: MouseEvent) => {
             const target = event.target as Node;
@@ -159,7 +163,9 @@ export function Popover({
             onCloseRef.current('outside');
         };
         const onKey = (event: KeyboardEvent) => {
-            if (event.key !== 'Escape') return;
+            if (event.key !== 'Escape' || event.defaultPrevented || openPopovers.at(-1) !== popover) return;
+            const targetDialog = event.target instanceof popover.ownerDocument.defaultView!.Element ? event.target.closest('dialog') : null;
+            if (targetDialog && targetDialog !== anchorRef.current?.closest('dialog')) return;
             // Capture phase + preventDefault: when the anchor lives inside
             // an open <dialog>, the first Escape must close the popover
             // ONLY — preventing default stops the dialog's cancel/close
@@ -170,16 +176,18 @@ export function Popover({
             onCloseRef.current('escape');
         };
 
-        // Defer attach so the interaction that opened the popover can't
-        // immediately close it (source parity).
+        // Escape must be active in the opening frame, before native dialog
+        // cancellation. Only outside-click registration waits out the opener.
+        document.addEventListener('keydown', onKey, true);
         const timer = window.setTimeout(() => {
             document.addEventListener('mousedown', onDocDown, true);
-            document.addEventListener('keydown', onKey, true);
         }, 0);
         return () => {
             window.clearTimeout(timer);
             document.removeEventListener('mousedown', onDocDown, true);
             document.removeEventListener('keydown', onKey, true);
+            const index = openPopovers.indexOf(popover);
+            if (index !== -1) openPopovers.splice(index, 1);
         };
     }, [open, anchorRef]);
 

package/src/ui/date/TimePicker.tsx

@@ -1,3 +1,4 @@
+import { ComboBox } from '../ComboBox';
 // TimePicker — HH:MM time input with the stepper panel and optional IANA
 // timezone. Ported from web-mojo src/core/forms/inputs/TimePicker.js (648
 // lines, read in full) + the `.mojo-time-*` block of calendar.css.
@@ -25,7 +26,7 @@
 //
 // Timezone-picker SEAM: this component owns every bit of the zone's value and
 // serialization logic but renders the picker through `renderTimezoneSelect`.
-// Without that prop it falls back to a plain token-styled <select> built from
+// Without that prop it falls back to a searchable ComboBox built from
 // Intl.supportedValuesOf('timeZone'), so the feature is complete standalone.
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from 'react';
@@ -92,7 +93,7 @@ export interface TimePickerProps {
     timezones?: string[] | null;
     /** Default 'iso'. Unknown values warn + fall back. */
     outputFormat?: TimeOutputFormat;
-    /** Zone-picker slot. Absent → the built-in fallback <select>. */
+    /** Zone-picker slot. Absent → the built-in ComboBox. */
     renderTimezoneSelect?: (props: TimezoneSelectSlotProps) => ReactNode;
     /** Fires on COMMIT only, and only when the serialized value changed. */
     onChange?: (event: TimeChangeEvent) => void;
@@ -252,18 +253,7 @@ function FallbackTimezoneSelect({ value, onChange, timezones, disabled }: Timezo
     }, [known, value]);
 
     return (
-        <select
-            className="input mojo-time-tz-select"
-            aria-label="Timezone"
-            value={value ?? ''}
-            disabled={disabled}
-            onChange={(e) => onChange(e.currentTarget.value || null)}
-        >
-            <option value="">(no timezone)</option>
-            {/* A value the list doesn't carry still shows — never render nothing. */}
-            {!known && value ? <option value={value}>{value}</option> : null}
-            {zones.map((z) => <option key={z} value={z}>{z}</option>)}
-        </select>
+        <ComboBox allowCustom={false} maxSuggestions={Number.MAX_SAFE_INTEGER} className="mojo-time-tz-select" aria-label="Timezone" value={String(value ?? '')} disabled={disabled} onChange={(selectedValue) => onChange(String(selectedValue) || null)} options={[({ value: "", label: "(no timezone)" }), ...(!known && value ? [({ value: String(value), label: String(value) })] : []), ...(zones.map((z) => ({ value: String(z), label: String(z) })) ?? [])]} />
     );
 }
 

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) })) ?? [])]} />
     );
 }