@servicetitan/dte-unlayer 0.141.0 → 0.143.0

package/dist/display-conditions/lookupOptionsController.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/display-conditions/lookupOptionsController.ts"],"sourcesContent":["/**\n * Host <-> editor contract for \"data-model lookup source\" dropdown options.\n *\n * A schema field can be tagged (in the template-type editor) with\n * `options.fieldLookupSource`. When such a field is selected in the conditional\n * UI, the editor does NOT own the option data — it asks the HOST for it over the\n * EventTarget bus below and renders whatever the host returns.\n *\n * Transport mirrors the existing `displayConditionController` EventBus pattern.\n *\n * Event names (host <-> editor):\n *   - \"dte-unlayer:lookup-options-request\"   (editor -> host)\n *   - \"dte-unlayer:lookup-options-response\"  (host -> editor)\n *\n * The host-side resolver is intentionally NOT implemented in this package. The\n * host listens via `onLookupOptionsRequest` and replies via\n * `emitLookupOptionsResponse`.\n */\n\n/** The single dropdown option shape used end-to-end. */\nexport interface LookupOption {\n    /** Human-readable label shown in the dropdown. */\n    label: string;\n    /** Stable value baked into the stored condition. */\n    key: string;\n}\n\n/** editor -> host */\nexport interface LookupOptionsRequest {\n    /** Correlates a response to its originating request. */\n    requestId: string;\n    /** The selected field's `options.fieldLookupSource`. */\n    sourceKey: string;\n    /** Reserved for searchable sources (e.g. \"city\"); omitted for now. */\n    query?: string;\n}\n\n/** host -> editor */\nexport interface LookupOptionsResponse {\n    requestId: string;\n    options: LookupOption[];\n}\n\nexport const LOOKUP_OPTIONS_REQUEST_EVENT = 'dte-unlayer:lookup-options-request';\nexport const LOOKUP_OPTIONS_RESPONSE_EVENT = 'dte-unlayer:lookup-options-response';\n\n/**\n * Searchable sources require the host to query an API per typed query. These are\n * skipped for now and fall back to the free-text input.\n */\nexport const SEARCHABLE_LOOKUP_SOURCES = ['city'] as const;\n\nexport const isSearchableLookupSource = (sourceKey: string | undefined): boolean =>\n    !!sourceKey && (SEARCHABLE_LOOKUP_SOURCES as readonly string[]).includes(sourceKey);\n\nconst lookupOptionsEvents = new EventTarget();\n\n/** editor -> host: ask the host to resolve options for a lookup source. */\nexport const emitLookupOptionsRequest = (request: LookupOptionsRequest) => {\n    lookupOptionsEvents.dispatchEvent(\n        new CustomEvent<LookupOptionsRequest>(LOOKUP_OPTIONS_REQUEST_EVENT, { detail: request }),\n    );\n};\n\n/** host side: listen for editor requests. Returns an unsubscribe function. */\nexport const onLookupOptionsRequest = (listener: (request: LookupOptionsRequest) => void) => {\n    const handler = (event: Event) => {\n        const detail = (event as CustomEvent<LookupOptionsRequest>).detail;\n        if (!detail) {\n            return;\n        }\n        listener(detail);\n    };\n\n    lookupOptionsEvents.addEventListener(LOOKUP_OPTIONS_REQUEST_EVENT, handler);\n\n    return () => {\n        lookupOptionsEvents.removeEventListener(LOOKUP_OPTIONS_REQUEST_EVENT, handler);\n    };\n};\n\n/** host -> editor: deliver resolved options back to the editor. */\nexport const emitLookupOptionsResponse = (response: LookupOptionsResponse) => {\n    lookupOptionsEvents.dispatchEvent(\n        new CustomEvent<LookupOptionsResponse>(LOOKUP_OPTIONS_RESPONSE_EVENT, { detail: response }),\n    );\n};\n\n/** editor side: listen for host responses. Returns an unsubscribe function. */\nexport const onLookupOptionsResponse = (listener: (response: LookupOptionsResponse) => void) => {\n    const handler = (event: Event) => {\n        const detail = (event as CustomEvent<LookupOptionsResponse>).detail;\n        if (!detail) {\n            return;\n        }\n        listener(detail);\n    };\n\n    lookupOptionsEvents.addEventListener(LOOKUP_OPTIONS_RESPONSE_EVENT, handler);\n\n    return () => {\n        lookupOptionsEvents.removeEventListener(LOOKUP_OPTIONS_RESPONSE_EVENT, handler);\n    };\n};\n"],"names":["LOOKUP_OPTIONS_REQUEST_EVENT","LOOKUP_OPTIONS_RESPONSE_EVENT","SEARCHABLE_LOOKUP_SOURCES","isSearchableLookupSource","sourceKey","includes","lookupOptionsEvents","EventTarget","emitLookupOptionsRequest","request","dispatchEvent","CustomEvent","detail","onLookupOptionsRequest","listener","handler","event","addEventListener","removeEventListener","emitLookupOptionsResponse","response","onLookupOptionsResponse"],"mappings":"AAAA;;;;;;;;;;;;;;;;;CAiBC,GAED,sDAAsD,GAwBtD,OAAO,MAAMA,+BAA+B,qCAAqC;AACjF,OAAO,MAAMC,gCAAgC,sCAAsC;AAEnF;;;CAGC,GACD,OAAO,MAAMC,4BAA4B;IAAC;CAAO,CAAU;AAE3D,OAAO,MAAMC,2BAA2B,CAACC,YACrC,CAAC,CAACA,aAAa,AAACF,0BAAgDG,QAAQ,CAACD,WAAW;AAExF,MAAME,sBAAsB,IAAIC;AAEhC,yEAAyE,GACzE,OAAO,MAAMC,2BAA2B,CAACC;IACrCH,oBAAoBI,aAAa,CAC7B,IAAIC,YAAkCX,8BAA8B;QAAEY,QAAQH;IAAQ;AAE9F,EAAE;AAEF,4EAA4E,GAC5E,OAAO,MAAMI,yBAAyB,CAACC;IACnC,MAAMC,UAAU,CAACC;QACb,MAAMJ,SAAS,AAACI,MAA4CJ,MAAM;QAClE,IAAI,CAACA,QAAQ;YACT;QACJ;QACAE,SAASF;IACb;IAEAN,oBAAoBW,gBAAgB,CAACjB,8BAA8Be;IAEnE,OAAO;QACHT,oBAAoBY,mBAAmB,CAAClB,8BAA8Be;IAC1E;AACJ,EAAE;AAEF,iEAAiE,GACjE,OAAO,MAAMI,4BAA4B,CAACC;IACtCd,oBAAoBI,aAAa,CAC7B,IAAIC,YAAmCV,+BAA+B;QAAEW,QAAQQ;IAAS;AAEjG,EAAE;AAEF,6EAA6E,GAC7E,OAAO,MAAMC,0BAA0B,CAACP;IACpC,MAAMC,UAAU,CAACC;QACb,MAAMJ,SAAS,AAACI,MAA6CJ,MAAM;QACnE,IAAI,CAACA,QAAQ;YACT;QACJ;QACAE,SAASF;IACb;IAEAN,oBAAoBW,gBAAgB,CAAChB,+BAA+Bc;IAEpE,OAAO;QACHT,oBAAoBY,mBAAmB,CAACjB,+BAA+Bc;IAC3E;AACJ,EAAE"}
+{"version":3,"sources":["../../src/display-conditions/lookupOptionsController.ts"],"sourcesContent":["/**\n * Host <-> editor contract for \"data-model lookup source\" dropdown options.\n *\n * A schema field can be tagged (in the template-type editor) with\n * `options.fieldLookupSource`. When such a field is selected in the conditional\n * UI, the editor does NOT own the option data — it asks the HOST for it over the\n * EventTarget bus below and renders whatever the host returns.\n *\n * Two host-driven modes are supported (the host decides, the editor adapts):\n *   1. Full-list source (e.g. \"state\", \"jobType\"): the host returns every option\n *      on the first request and omits `searchable`. The editor caches that list\n *      and filters it LOCALLY as the user types — no further requests are sent.\n *   2. Searchable source (e.g. \"city\"): the list is too large to send at once.\n *      The host returns `searchable: true` (typically with an empty list on the\n *      first, query-less request). The editor then re-requests with the typed\n *      `query` on each keystroke and the host returns a fresh, server-filtered\n *      list per query.\n *\n * Transport mirrors the existing `displayConditionController` EventBus pattern.\n *\n * Event names (host <-> editor):\n *   - \"dte-unlayer:lookup-options-request\"   (editor -> host)\n *   - \"dte-unlayer:lookup-options-response\"  (host -> editor)\n *\n * The host-side resolver is intentionally NOT implemented in this package. The\n * host listens via `onLookupOptionsRequest` and replies via\n * `emitLookupOptionsResponse`.\n */\n\n/** The single dropdown option shape used end-to-end. */\nexport interface LookupOption {\n    /** Human-readable label shown in the dropdown. */\n    label: string;\n    /** Stable value baked into the stored condition. */\n    key: string;\n}\n\n/** editor -> host */\nexport interface LookupOptionsRequest {\n    /** Correlates a response to its originating request. */\n    requestId: string;\n    /** The selected field's `options.fieldLookupSource`. */\n    sourceKey: string;\n    /**\n     * The text the user has typed. Sent on each (debounced) keystroke once the\n     * host has declared the source `searchable`. Empty/omitted on the first\n     * request, where the host decides whether the source is searchable.\n     */\n    query?: string;\n    /**\n     * Resolve mode: the editor is asking the host to return the option(s) for\n     * these EXACT stored keys (not a text search). Used on open to turn a saved\n     * searchable value (a bare key) back into a human-readable label. When\n     * present the host should match by key and ignore `query`.\n     */\n    keys?: string[];\n}\n\n/** host -> editor */\nexport interface LookupOptionsResponse {\n    requestId: string;\n    options: LookupOption[];\n    /**\n     * Set to `true` by the host when the source must be searched per query\n     * (server-side). When omitted/false the editor treats `options` as the\n     * complete list and switches to local filtering. Only read from the first\n     * (query-less) response for a given source.\n     */\n    searchable?: boolean;\n}\n\nexport const LOOKUP_OPTIONS_REQUEST_EVENT = 'dte-unlayer:lookup-options-request';\nexport const LOOKUP_OPTIONS_RESPONSE_EVENT = 'dte-unlayer:lookup-options-response';\n\nconst lookupOptionsEvents = new EventTarget();\n\n/** editor -> host: ask the host to resolve options for a lookup source. */\nexport const emitLookupOptionsRequest = (request: LookupOptionsRequest) => {\n    lookupOptionsEvents.dispatchEvent(\n        new CustomEvent<LookupOptionsRequest>(LOOKUP_OPTIONS_REQUEST_EVENT, { detail: request }),\n    );\n};\n\n/** host side: listen for editor requests. Returns an unsubscribe function. */\nexport const onLookupOptionsRequest = (listener: (request: LookupOptionsRequest) => void) => {\n    const handler = (event: Event) => {\n        const detail = (event as CustomEvent<LookupOptionsRequest>).detail;\n        if (!detail) {\n            return;\n        }\n        listener(detail);\n    };\n\n    lookupOptionsEvents.addEventListener(LOOKUP_OPTIONS_REQUEST_EVENT, handler);\n\n    return () => {\n        lookupOptionsEvents.removeEventListener(LOOKUP_OPTIONS_REQUEST_EVENT, handler);\n    };\n};\n\n/** host -> editor: deliver resolved options back to the editor. */\nexport const emitLookupOptionsResponse = (response: LookupOptionsResponse) => {\n    lookupOptionsEvents.dispatchEvent(\n        new CustomEvent<LookupOptionsResponse>(LOOKUP_OPTIONS_RESPONSE_EVENT, { detail: response }),\n    );\n};\n\n/** editor side: listen for host responses. Returns an unsubscribe function. */\nexport const onLookupOptionsResponse = (listener: (response: LookupOptionsResponse) => void) => {\n    const handler = (event: Event) => {\n        const detail = (event as CustomEvent<LookupOptionsResponse>).detail;\n        if (!detail) {\n            return;\n        }\n        listener(detail);\n    };\n\n    lookupOptionsEvents.addEventListener(LOOKUP_OPTIONS_RESPONSE_EVENT, handler);\n\n    return () => {\n        lookupOptionsEvents.removeEventListener(LOOKUP_OPTIONS_RESPONSE_EVENT, handler);\n    };\n};\n"],"names":["LOOKUP_OPTIONS_REQUEST_EVENT","LOOKUP_OPTIONS_RESPONSE_EVENT","lookupOptionsEvents","EventTarget","emitLookupOptionsRequest","request","dispatchEvent","CustomEvent","detail","onLookupOptionsRequest","listener","handler","event","addEventListener","removeEventListener","emitLookupOptionsResponse","response","onLookupOptionsResponse"],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GAED,sDAAsD,GA0CtD,OAAO,MAAMA,+BAA+B,qCAAqC;AACjF,OAAO,MAAMC,gCAAgC,sCAAsC;AAEnF,MAAMC,sBAAsB,IAAIC;AAEhC,yEAAyE,GACzE,OAAO,MAAMC,2BAA2B,CAACC;IACrCH,oBAAoBI,aAAa,CAC7B,IAAIC,YAAkCP,8BAA8B;QAAEQ,QAAQH;IAAQ;AAE9F,EAAE;AAEF,4EAA4E,GAC5E,OAAO,MAAMI,yBAAyB,CAACC;IACnC,MAAMC,UAAU,CAACC;QACb,MAAMJ,SAAS,AAACI,MAA4CJ,MAAM;QAClE,IAAI,CAACA,QAAQ;YACT;QACJ;QACAE,SAASF;IACb;IAEAN,oBAAoBW,gBAAgB,CAACb,8BAA8BW;IAEnE,OAAO;QACHT,oBAAoBY,mBAAmB,CAACd,8BAA8BW;IAC1E;AACJ,EAAE;AAEF,iEAAiE,GACjE,OAAO,MAAMI,4BAA4B,CAACC;IACtCd,oBAAoBI,aAAa,CAC7B,IAAIC,YAAmCN,+BAA+B;QAAEO,QAAQQ;IAAS;AAEjG,EAAE;AAEF,6EAA6E,GAC7E,OAAO,MAAMC,0BAA0B,CAACP;IACpC,MAAMC,UAAU,CAACC;QACb,MAAMJ,SAAS,AAACI,MAA6CJ,MAAM;QACnE,IAAI,CAACA,QAAQ;YACT;QACJ;QACAE,SAASF;IACb;IAEAN,oBAAoBW,gBAAgB,CAACZ,+BAA+BU;IAEpE,OAAO;QACHT,oBAAoBY,mBAAmB,CAACb,+BAA+BU;IAC3E;AACJ,EAAE"}

package/dist/display-conditions/useLookupOptions.d.ts

@@ -1,21 +1,37 @@
 import { LookupOption } from './lookupOptionsController';
 /**
- * - `idle`     -> no lookup source (or searchable source): use free-text input.
- * - `loading`  -> request in flight: show a disabled/loading value control.
- * - `ready`    -> host returned options: render the dropdown.
- * - `fallback` -> empty/error/timeout: fall back to free-text so the user is never blocked.
+ * - `idle`       -> no lookup source: use free-text input.
+ * - `loading`    -> initial request in flight: show a disabled/loading value control.
+ * - `static`     -> host returned a full list: render a locally-filtered dropdown.
+ * - `searchable` -> host wants per-query search: render an async dropdown driven by `loadOptions`.
+ * - `fallback`   -> empty/error/timeout: fall back to free-text so the user is never blocked.
  */
-export type LookupOptionsStatus = 'idle' | 'loading' | 'ready' | 'fallback';
+export type LookupOptionsStatus = 'idle' | 'loading' | 'static' | 'searchable' | 'fallback';
 interface UseLookupOptionsResult {
     status: LookupOptionsStatus;
+    /** Full option list for `static` sources; empty for `searchable`/`idle`/`fallback`. */
     options: LookupOption[];
+    /**
+     * Per-query resolver for `searchable` sources. Emits a request with the typed
+     * `query` and resolves with the host's fresh list (or `[]` on timeout). Wire
+     * this into an async dropdown (e.g. Anvil2 `SelectField`'s `loadOptions`).
+     */
+    loadOptions: (query: string) => Promise<LookupOption[]>;
+    /**
+     * Resolve the option(s) for already-stored keys (exact match, not a text
+     * search). Used on open to turn a saved searchable value back into its
+     * human-readable label. Resolves with `[]` on timeout.
+     */
+    resolveOptions: (keys: string[]) => Promise<LookupOption[]>;
 }
 /**
  * Requests host-resolved dropdown options for a field's `fieldLookupSource`.
  *
- * Re-runs whenever `sourceKey` changes, ignores stale responses whose requestId
- * does not match the latest request, and cleans up its listener/timeout on
- * unmount or source change.
+ * Fires a single query-less request whenever `sourceKey` changes. The host's
+ * response decides the mode: a full list (`static`, filtered locally) or a
+ * searchable source (`searchable`, driven by `loadOptions` per keystroke).
+ * Stale responses (mismatched requestId) are ignored and the listener/timeout
+ * are cleaned up on unmount or source change.
  */
 export declare const useLookupOptions: (sourceKey: string | undefined) => UseLookupOptionsResult;
 export {};

package/dist/display-conditions/useLookupOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLookupOptions.d.ts","sourceRoot":"","sources":["../../src/display-conditions/useLookupOptions.ts"],"names":[],"mappings":"AAEA,OAAO,EAGH,YAAY,EAEf,MAAM,2BAA2B,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAK5E,UAAU,sBAAsB;IAC5B,MAAM,EAAE,mBAAmB,CAAC;IAC5B,OAAO,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,WAAW,MAAM,GAAG,SAAS,KAAG,sBAmDhE,CAAC"}
+{"version":3,"file":"useLookupOptions.d.ts","sourceRoot":"","sources":["../../src/display-conditions/useLookupOptions.ts"],"names":[],"mappings":"AAEA,OAAO,EAEH,YAAY,EAEf,MAAM,2BAA2B,CAAC;AAEnC;;;;;;GAMG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,CAAC;AAK5F,UAAU,sBAAsB;IAC5B,MAAM,EAAE,mBAAmB,CAAC;IAC5B,uFAAuF;IACvF,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB;;;;OAIG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;IACxD;;;;OAIG;IACH,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;CAC/D;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,GAAI,WAAW,MAAM,GAAG,SAAS,KAAG,sBAmGhE,CAAC"}

package/dist/display-conditions/useLookupOptions.js

@@ -1,20 +1,24 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { generateId } from './constants';
-import { emitLookupOptionsRequest, isSearchableLookupSource, onLookupOptionsResponse } from './lookupOptionsController';
+import { emitLookupOptionsRequest, onLookupOptionsResponse } from './lookupOptionsController';
 /** Time to wait for the host before falling back to free-text input. */ const LOOKUP_OPTIONS_TIMEOUT_MS = 10000;
 /**
  * Requests host-resolved dropdown options for a field's `fieldLookupSource`.
  *
- * Re-runs whenever `sourceKey` changes, ignores stale responses whose requestId
- * does not match the latest request, and cleans up its listener/timeout on
- * unmount or source change.
+ * Fires a single query-less request whenever `sourceKey` changes. The host's
+ * response decides the mode: a full list (`static`, filtered locally) or a
+ * searchable source (`searchable`, driven by `loadOptions` per keystroke).
+ * Stale responses (mismatched requestId) are ignored and the listener/timeout
+ * are cleaned up on unmount or source change.
  */ export const useLookupOptions = (sourceKey)=>{
     const [status, setStatus] = useState('idle');
     const [options, setOptions] = useState([]);
     const latestRequestIdRef = useRef(null);
+    const sourceKeyRef = useRef(sourceKey);
     useEffect(()=>{
-        // No source, or a searchable source we intentionally skip for now.
-        if (!sourceKey || isSearchableLookupSource(sourceKey)) {
+        sourceKeyRef.current = sourceKey;
+        const normalizedSourceKey = sourceKey === null || sourceKey === void 0 ? void 0 : sourceKey.trim();
+        if (!normalizedSourceKey) {
             latestRequestIdRef.current = null;
             setStatus('idle');
             setOptions([]);
@@ -37,9 +41,14 @@ import { emitLookupOptionsRequest, isSearchableLookupSource, onLookupOptionsResp
                 return;
             }
             clearTimeout(timeoutId);
+            if (response.searchable) {
+                setOptions([]);
+                setStatus('searchable');
+                return;
+            }
             if (response.options.length > 0) {
                 setOptions(response.options);
-                setStatus('ready');
+                setStatus('static');
             } else {
                 setOptions([]);
                 setStatus('fallback');
@@ -47,7 +56,7 @@ import { emitLookupOptionsRequest, isSearchableLookupSource, onLookupOptionsResp
         });
         emitLookupOptionsRequest({
             requestId,
-            sourceKey
+            sourceKey: normalizedSourceKey
         });
         return ()=>{
             clearTimeout(timeoutId);
@@ -56,9 +65,53 @@ import { emitLookupOptionsRequest, isSearchableLookupSource, onLookupOptionsResp
     }, [
         sourceKey
     ]);
+    const requestOptions = useCallback((payload)=>{
+        var _sourceKeyRef_current;
+        const normalizedSourceKey = (_sourceKeyRef_current = sourceKeyRef.current) === null || _sourceKeyRef_current === void 0 ? void 0 : _sourceKeyRef_current.trim();
+        if (!normalizedSourceKey) {
+            return Promise.resolve([]);
+        }
+        return new Promise((resolve)=>{
+            const requestId = generateId();
+            let settled = false;
+            const finish = (result)=>{
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                clearTimeout(timeoutId);
+                unsubscribe();
+                resolve(result);
+            };
+            const timeoutId = setTimeout(()=>finish([]), LOOKUP_OPTIONS_TIMEOUT_MS);
+            const unsubscribe = onLookupOptionsResponse((response)=>{
+                if (response.requestId !== requestId) {
+                    return;
+                }
+                finish(response.options);
+            });
+            emitLookupOptionsRequest({
+                requestId,
+                sourceKey: normalizedSourceKey,
+                ...payload
+            });
+        });
+    }, []);
+    const loadOptions = useCallback((query)=>requestOptions({
+            query
+        }), [
+        requestOptions
+    ]);
+    const resolveOptions = useCallback((keys)=>requestOptions({
+            keys
+        }), [
+        requestOptions
+    ]);
     return {
         status,
-        options
+        options,
+        loadOptions,
+        resolveOptions
     };
 };
 

package/dist/display-conditions/useLookupOptions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/display-conditions/useLookupOptions.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { generateId } from './constants';\nimport {\n    emitLookupOptionsRequest,\n    isSearchableLookupSource,\n    LookupOption,\n    onLookupOptionsResponse,\n} from './lookupOptionsController';\n\n/**\n * - `idle`     -> no lookup source (or searchable source): use free-text input.\n * - `loading`  -> request in flight: show a disabled/loading value control.\n * - `ready`    -> host returned options: render the dropdown.\n * - `fallback` -> empty/error/timeout: fall back to free-text so the user is never blocked.\n */\nexport type LookupOptionsStatus = 'idle' | 'loading' | 'ready' | 'fallback';\n\n/** Time to wait for the host before falling back to free-text input. */\nconst LOOKUP_OPTIONS_TIMEOUT_MS = 10_000;\n\ninterface UseLookupOptionsResult {\n    status: LookupOptionsStatus;\n    options: LookupOption[];\n}\n\n/**\n * Requests host-resolved dropdown options for a field's `fieldLookupSource`.\n *\n * Re-runs whenever `sourceKey` changes, ignores stale responses whose requestId\n * does not match the latest request, and cleans up its listener/timeout on\n * unmount or source change.\n */\nexport const useLookupOptions = (sourceKey: string | undefined): UseLookupOptionsResult => {\n    const [status, setStatus] = useState<LookupOptionsStatus>('idle');\n    const [options, setOptions] = useState<LookupOption[]>([]);\n    const latestRequestIdRef = useRef<string | null>(null);\n\n    useEffect(() => {\n        // No source, or a searchable source we intentionally skip for now.\n        if (!sourceKey || isSearchableLookupSource(sourceKey)) {\n            latestRequestIdRef.current = null;\n            setStatus('idle');\n            setOptions([]);\n            return;\n        }\n\n        const requestId = generateId();\n        latestRequestIdRef.current = requestId;\n        setStatus('loading');\n        setOptions([]);\n\n        const timeoutId = setTimeout(() => {\n            if (latestRequestIdRef.current !== requestId) {\n                return;\n            }\n            setStatus('fallback');\n            setOptions([]);\n        }, LOOKUP_OPTIONS_TIMEOUT_MS);\n\n        const unsubscribe = onLookupOptionsResponse(response => {\n            // Ignore stale responses (different request, or superseded selection).\n            if (response.requestId !== requestId || latestRequestIdRef.current !== requestId) {\n                return;\n            }\n            clearTimeout(timeoutId);\n            if (response.options.length > 0) {\n                setOptions(response.options);\n                setStatus('ready');\n            } else {\n                setOptions([]);\n                setStatus('fallback');\n            }\n        });\n\n        emitLookupOptionsRequest({ requestId, sourceKey });\n\n        return () => {\n            clearTimeout(timeoutId);\n            unsubscribe();\n        };\n    }, [sourceKey]);\n\n    return { status, options };\n};\n"],"names":["useEffect","useRef","useState","generateId","emitLookupOptionsRequest","isSearchableLookupSource","onLookupOptionsResponse","LOOKUP_OPTIONS_TIMEOUT_MS","useLookupOptions","sourceKey","status","setStatus","options","setOptions","latestRequestIdRef","current","requestId","timeoutId","setTimeout","unsubscribe","response","clearTimeout","length"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACpD,SAASC,UAAU,QAAQ,cAAc;AACzC,SACIC,wBAAwB,EACxBC,wBAAwB,EAExBC,uBAAuB,QACpB,4BAA4B;AAUnC,sEAAsE,GACtE,MAAMC,4BAA4B;AAOlC;;;;;;CAMC,GACD,OAAO,MAAMC,mBAAmB,CAACC;IAC7B,MAAM,CAACC,QAAQC,UAAU,GAAGT,SAA8B;IAC1D,MAAM,CAACU,SAASC,WAAW,GAAGX,SAAyB,EAAE;IACzD,MAAMY,qBAAqBb,OAAsB;IAEjDD,UAAU;QACN,mEAAmE;QACnE,IAAI,CAACS,aAAaJ,yBAAyBI,YAAY;YACnDK,mBAAmBC,OAAO,GAAG;YAC7BJ,UAAU;YACVE,WAAW,EAAE;YACb;QACJ;QAEA,MAAMG,YAAYb;QAClBW,mBAAmBC,OAAO,GAAGC;QAC7BL,UAAU;QACVE,WAAW,EAAE;QAEb,MAAMI,YAAYC,WAAW;YACzB,IAAIJ,mBAAmBC,OAAO,KAAKC,WAAW;gBAC1C;YACJ;YACAL,UAAU;YACVE,WAAW,EAAE;QACjB,GAAGN;QAEH,MAAMY,cAAcb,wBAAwBc,CAAAA;YACxC,uEAAuE;YACvE,IAAIA,SAASJ,SAAS,KAAKA,aAAaF,mBAAmBC,OAAO,KAAKC,WAAW;gBAC9E;YACJ;YACAK,aAAaJ;YACb,IAAIG,SAASR,OAAO,CAACU,MAAM,GAAG,GAAG;gBAC7BT,WAAWO,SAASR,OAAO;gBAC3BD,UAAU;YACd,OAAO;gBACHE,WAAW,EAAE;gBACbF,UAAU;YACd;QACJ;QAEAP,yBAAyB;YAAEY;YAAWP;QAAU;QAEhD,OAAO;YACHY,aAAaJ;YACbE;QACJ;IACJ,GAAG;QAACV;KAAU;IAEd,OAAO;QAAEC;QAAQE;IAAQ;AAC7B,EAAE"}
+{"version":3,"sources":["../../src/display-conditions/useLookupOptions.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { generateId } from './constants';\nimport {\n    emitLookupOptionsRequest,\n    LookupOption,\n    onLookupOptionsResponse,\n} from './lookupOptionsController';\n\n/**\n * - `idle`       -> no lookup source: use free-text input.\n * - `loading`    -> initial request in flight: show a disabled/loading value control.\n * - `static`     -> host returned a full list: render a locally-filtered dropdown.\n * - `searchable` -> host wants per-query search: render an async dropdown driven by `loadOptions`.\n * - `fallback`   -> empty/error/timeout: fall back to free-text so the user is never blocked.\n */\nexport type LookupOptionsStatus = 'idle' | 'loading' | 'static' | 'searchable' | 'fallback';\n\n/** Time to wait for the host before falling back to free-text input. */\nconst LOOKUP_OPTIONS_TIMEOUT_MS = 10_000;\n\ninterface UseLookupOptionsResult {\n    status: LookupOptionsStatus;\n    /** Full option list for `static` sources; empty for `searchable`/`idle`/`fallback`. */\n    options: LookupOption[];\n    /**\n     * Per-query resolver for `searchable` sources. Emits a request with the typed\n     * `query` and resolves with the host's fresh list (or `[]` on timeout). Wire\n     * this into an async dropdown (e.g. Anvil2 `SelectField`'s `loadOptions`).\n     */\n    loadOptions: (query: string) => Promise<LookupOption[]>;\n    /**\n     * Resolve the option(s) for already-stored keys (exact match, not a text\n     * search). Used on open to turn a saved searchable value back into its\n     * human-readable label. Resolves with `[]` on timeout.\n     */\n    resolveOptions: (keys: string[]) => Promise<LookupOption[]>;\n}\n\n/**\n * Requests host-resolved dropdown options for a field's `fieldLookupSource`.\n *\n * Fires a single query-less request whenever `sourceKey` changes. The host's\n * response decides the mode: a full list (`static`, filtered locally) or a\n * searchable source (`searchable`, driven by `loadOptions` per keystroke).\n * Stale responses (mismatched requestId) are ignored and the listener/timeout\n * are cleaned up on unmount or source change.\n */\nexport const useLookupOptions = (sourceKey: string | undefined): UseLookupOptionsResult => {\n    const [status, setStatus] = useState<LookupOptionsStatus>('idle');\n    const [options, setOptions] = useState<LookupOption[]>([]);\n    const latestRequestIdRef = useRef<string | null>(null);\n    const sourceKeyRef = useRef<string | undefined>(sourceKey);\n\n    useEffect(() => {\n        sourceKeyRef.current = sourceKey;\n        const normalizedSourceKey = sourceKey?.trim();\n\n        if (!normalizedSourceKey) {\n            latestRequestIdRef.current = null;\n            setStatus('idle');\n            setOptions([]);\n            return;\n        }\n\n        const requestId = generateId();\n        latestRequestIdRef.current = requestId;\n        setStatus('loading');\n        setOptions([]);\n\n        const timeoutId = setTimeout(() => {\n            if (latestRequestIdRef.current !== requestId) {\n                return;\n            }\n            setStatus('fallback');\n            setOptions([]);\n        }, LOOKUP_OPTIONS_TIMEOUT_MS);\n\n        const unsubscribe = onLookupOptionsResponse(response => {\n            // Ignore stale responses (different request, or superseded selection).\n            if (response.requestId !== requestId || latestRequestIdRef.current !== requestId) {\n                return;\n            }\n            clearTimeout(timeoutId);\n            if (response.searchable) {\n                setOptions([]);\n                setStatus('searchable');\n                return;\n            }\n            if (response.options.length > 0) {\n                setOptions(response.options);\n                setStatus('static');\n            } else {\n                setOptions([]);\n                setStatus('fallback');\n            }\n        });\n\n        emitLookupOptionsRequest({ requestId, sourceKey: normalizedSourceKey });\n\n        return () => {\n            clearTimeout(timeoutId);\n            unsubscribe();\n        };\n    }, [sourceKey]);\n\n    const requestOptions = useCallback((payload: { query?: string; keys?: string[] }) => {\n        const normalizedSourceKey = sourceKeyRef.current?.trim();\n        if (!normalizedSourceKey) {\n            return Promise.resolve<LookupOption[]>([]);\n        }\n\n        return new Promise<LookupOption[]>(resolve => {\n            const requestId = generateId();\n            let settled = false;\n\n            const finish = (result: LookupOption[]) => {\n                if (settled) {\n                    return;\n                }\n                settled = true;\n                clearTimeout(timeoutId);\n                unsubscribe();\n                resolve(result);\n            };\n\n            const timeoutId = setTimeout(() => finish([]), LOOKUP_OPTIONS_TIMEOUT_MS);\n\n            const unsubscribe = onLookupOptionsResponse(response => {\n                if (response.requestId !== requestId) {\n                    return;\n                }\n                finish(response.options);\n            });\n\n            emitLookupOptionsRequest({ requestId, sourceKey: normalizedSourceKey, ...payload });\n        });\n    }, []);\n\n    const loadOptions = useCallback((query: string) => requestOptions({ query }), [requestOptions]);\n\n    const resolveOptions = useCallback(\n        (keys: string[]) => requestOptions({ keys }),\n        [requestOptions],\n    );\n\n    return { status, options, loadOptions, resolveOptions };\n};\n"],"names":["useCallback","useEffect","useRef","useState","generateId","emitLookupOptionsRequest","onLookupOptionsResponse","LOOKUP_OPTIONS_TIMEOUT_MS","useLookupOptions","sourceKey","status","setStatus","options","setOptions","latestRequestIdRef","sourceKeyRef","current","normalizedSourceKey","trim","requestId","timeoutId","setTimeout","unsubscribe","response","clearTimeout","searchable","length","requestOptions","payload","Promise","resolve","settled","finish","result","loadOptions","query","resolveOptions","keys"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACjE,SAASC,UAAU,QAAQ,cAAc;AACzC,SACIC,wBAAwB,EAExBC,uBAAuB,QACpB,4BAA4B;AAWnC,sEAAsE,GACtE,MAAMC,4BAA4B;AAoBlC;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAAmB,CAACC;IAC7B,MAAM,CAACC,QAAQC,UAAU,GAAGR,SAA8B;IAC1D,MAAM,CAACS,SAASC,WAAW,GAAGV,SAAyB,EAAE;IACzD,MAAMW,qBAAqBZ,OAAsB;IACjD,MAAMa,eAAeb,OAA2BO;IAEhDR,UAAU;QACNc,aAAaC,OAAO,GAAGP;QACvB,MAAMQ,sBAAsBR,sBAAAA,gCAAAA,UAAWS,IAAI;QAE3C,IAAI,CAACD,qBAAqB;YACtBH,mBAAmBE,OAAO,GAAG;YAC7BL,UAAU;YACVE,WAAW,EAAE;YACb;QACJ;QAEA,MAAMM,YAAYf;QAClBU,mBAAmBE,OAAO,GAAGG;QAC7BR,UAAU;QACVE,WAAW,EAAE;QAEb,MAAMO,YAAYC,WAAW;YACzB,IAAIP,mBAAmBE,OAAO,KAAKG,WAAW;gBAC1C;YACJ;YACAR,UAAU;YACVE,WAAW,EAAE;QACjB,GAAGN;QAEH,MAAMe,cAAchB,wBAAwBiB,CAAAA;YACxC,uEAAuE;YACvE,IAAIA,SAASJ,SAAS,KAAKA,aAAaL,mBAAmBE,OAAO,KAAKG,WAAW;gBAC9E;YACJ;YACAK,aAAaJ;YACb,IAAIG,SAASE,UAAU,EAAE;gBACrBZ,WAAW,EAAE;gBACbF,UAAU;gBACV;YACJ;YACA,IAAIY,SAASX,OAAO,CAACc,MAAM,GAAG,GAAG;gBAC7Bb,WAAWU,SAASX,OAAO;gBAC3BD,UAAU;YACd,OAAO;gBACHE,WAAW,EAAE;gBACbF,UAAU;YACd;QACJ;QAEAN,yBAAyB;YAAEc;YAAWV,WAAWQ;QAAoB;QAErE,OAAO;YACHO,aAAaJ;YACbE;QACJ;IACJ,GAAG;QAACb;KAAU;IAEd,MAAMkB,iBAAiB3B,YAAY,CAAC4B;YACJb;QAA5B,MAAME,uBAAsBF,wBAAAA,aAAaC,OAAO,cAApBD,4CAAAA,sBAAsBG,IAAI;QACtD,IAAI,CAACD,qBAAqB;YACtB,OAAOY,QAAQC,OAAO,CAAiB,EAAE;QAC7C;QAEA,OAAO,IAAID,QAAwBC,CAAAA;YAC/B,MAAMX,YAAYf;YAClB,IAAI2B,UAAU;YAEd,MAAMC,SAAS,CAACC;gBACZ,IAAIF,SAAS;oBACT;gBACJ;gBACAA,UAAU;gBACVP,aAAaJ;gBACbE;gBACAQ,QAAQG;YACZ;YAEA,MAAMb,YAAYC,WAAW,IAAMW,OAAO,EAAE,GAAGzB;YAE/C,MAAMe,cAAchB,wBAAwBiB,CAAAA;gBACxC,IAAIA,SAASJ,SAAS,KAAKA,WAAW;oBAClC;gBACJ;gBACAa,OAAOT,SAASX,OAAO;YAC3B;YAEAP,yBAAyB;gBAAEc;gBAAWV,WAAWQ;gBAAqB,GAAGW,OAAO;YAAC;QACrF;IACJ,GAAG,EAAE;IAEL,MAAMM,cAAclC,YAAY,CAACmC,QAAkBR,eAAe;YAAEQ;QAAM,IAAI;QAACR;KAAe;IAE9F,MAAMS,iBAAiBpC,YACnB,CAACqC,OAAmBV,eAAe;YAAEU;QAAK,IAC1C;QAACV;KAAe;IAGpB,OAAO;QAAEjB;QAAQE;QAASsB;QAAaE;IAAe;AAC1D,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-unlayer",
-  "version": "0.141.0",
+  "version": "0.143.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",

package/src/display-conditions/ConditionRow.tsx

@@ -1,11 +1,10 @@
-import { Button, Chip, Combobox, Flex, TextField } from '@servicetitan/anvil2';
+import { Button, Chip, Combobox, Flex } from '@servicetitan/anvil2';
 import TrashIcon from '@servicetitan/anvil2/assets/icons/material/round/delete.svg';
 import { useEffect, useMemo, useState } from 'react';
 import { FormInfo, parseFormFieldKey } from '../shared/forms';
-import type { LookupOption } from './lookupOptionsController';
+import { LookupValueControl } from './LookupValueControl';
 import { NUMBER_OPERATORS, SingleCondition, STRING_OPERATORS, VALUE_LESS_OPERATORS } from './types';
 import type { DataPointOption, FormFieldOption } from './types';
-import { useLookupOptions } from './useLookupOptions';
 
 export interface ConditionRowProps {
     canRemove: boolean;
@@ -29,21 +28,6 @@ interface SourceOption {
     value: string;
 }
 
-function sanitizeNumericInput(raw: string): string {
-    // Allow only a single leading minus and one decimal separator.
-    let value = raw.replaceAll(/[^0-9.-]/g, '');
-    const isNegative = value.startsWith('-');
-    value = value.replaceAll('-', '');
-    if (isNegative) {
-        value = `-${value}`;
-    }
-    const firstDot = value.indexOf('.');
-    if (firstDot >= 0) {
-        value = `${value.slice(0, firstDot + 1)}${value.slice(firstDot + 1).replaceAll('.', '')}`;
-    }
-    return value;
-}
-
 export function ConditionRow({
     canRemove,
     condition,
@@ -112,15 +96,6 @@ export function ConditionRow({
 
     const isValueLess = VALUE_LESS_OPERATORS.includes(condition.operator);
 
-    // Value-less operators (is empty / is not empty) need no value, so skip the host lookup.
-    const { options: lookupOptions, status: lookupStatus } = useLookupOptions(
-        isValueLess ? undefined : selectedDataPoint?.lookupSource,
-    );
-    const selectedLookupOption = useMemo(
-        () => lookupOptions.find(opt => opt.key === condition.value) ?? null,
-        [lookupOptions, condition.value],
-    );
-
     const operatorItems: OperatorOption[] = useMemo(
         () =>
             fieldType === 'number'
@@ -134,73 +109,6 @@ export function ConditionRow({
         [operatorItems, condition.operator],
     );
 
-    const handleValueChange = (raw: string) => {
-        const value = fieldType === 'number' ? sanitizeNumericInput(raw) : raw;
-        onChange({ ...condition, value });
-    };
-
-    const renderValueControl = () => {
-        if (lookupStatus === 'loading') {
-            return (
-                <TextField
-                    disabled
-                    label="Value"
-                    size="small"
-                    value=""
-                    placeholder=""
-                    style={{ width: '100%' }}
-                    aria-label="Value"
-                />
-            );
-        }
-
-        if (lookupStatus === 'ready') {
-            return (
-                <Combobox
-                    itemToKey={(item: LookupOption | null) => item?.key ?? ''}
-                    itemToString={(item: LookupOption | null) => item?.label ?? ''}
-                    items={lookupOptions}
-                    selectedItem={selectedLookupOption}
-                    onChange={(item: LookupOption | null) =>
-                        onChange({ ...condition, value: item?.key ?? '' })
-                    }
-                    filterOptions={{ keys: ['label'] }}
-                >
-                    <Combobox.SearchField
-                        label="Value"
-                        placeholder="Search value..."
-                        size="small"
-                    />
-                    <Combobox.Content>
-                        {({ items }: { items: LookupOption[] }) => (
-                            <Combobox.List>
-                                {items.map((item, i) => (
-                                    <Combobox.Item index={i} item={item} key={item.key}>
-                                        {item.label}
-                                    </Combobox.Item>
-                                ))}
-                            </Combobox.List>
-                        )}
-                    </Combobox.Content>
-                </Combobox>
-            );
-        }
-
-        // idle / fallback (empty/error/timeout) -> never block the user.
-        return (
-            <TextField
-                label="Value"
-                size="small"
-                value={condition.value}
-                onChange={e => handleValueChange(e.target.value)}
-                placeholder={fieldType === 'number' ? 'e.g. 1.5' : 'Enter value...'}
-                style={{ width: '100%' }}
-                aria-label="Value"
-                {...(fieldType === 'number' && { inputMode: 'decimal' })}
-            />
-        );
-    };
-
     const handleDataPointChange = (item: DataPointOption | null) => {
         const nextIsNumber = item?.fieldType === 'number';
         const nextOperatorItems = nextIsNumber ? NUMBER_OPERATORS : STRING_OPERATORS;
@@ -311,8 +219,10 @@ export function ConditionRow({
                 >
                     <Chip label="IF" size="small" />
                 </div>
-                <div style={{ flex: '2 1 240px', minWidth: 200 }}>
+                <Flex flex={1} style={{ minWidth: 160 }}>
                     <Combobox.Select
+                        flex={1}
+                        style={{ width: '100%' }}
                         disableClearSelection
                         itemToKey={(item: DataPointOption | null) => item?.fullKey ?? ''}
                         itemToString={(item: DataPointOption | null) => item?.title ?? ''}
@@ -339,9 +249,11 @@ export function ConditionRow({
                             )}
                         </Combobox.Content>
                     </Combobox.Select>
-                </div>
-                <div style={{ flex: '1 1 180px', minWidth: 150 }}>
+                </Flex>
+                <Flex flex={1} style={{ minWidth: 160 }}>
                     <Combobox.Select
+                        flex={1}
+                        style={{ width: '100%' }}
                         disableClearSelection
                         itemToKey={(item: OperatorOption | null) => item?.value ?? ''}
                         itemToString={(item: OperatorOption | null) => item?.label ?? ''}
@@ -372,9 +284,16 @@ export function ConditionRow({
                             )}
                         </Combobox.Content>
                     </Combobox.Select>
-                </div>
+                </Flex>
                 {!isValueLess && (
-                    <div style={{ flex: '1 1 180px', minWidth: 150 }}>{renderValueControl()}</div>
+                    <Flex flex={1} style={{ minWidth: 160 }}>
+                        <LookupValueControl
+                            value={condition.value}
+                            fieldType={fieldType}
+                            lookupSource={selectedDataPoint?.lookupSource}
+                            onChange={value => onChange({ ...condition, value })}
+                        />
+                    </Flex>
                 )}
                 {canRemove && (
                     <div

package/src/display-conditions/LookupValueControl.tsx

@@ -0,0 +1,175 @@
+import { TextField } from '@servicetitan/anvil2';
+import { SelectField, SelectFieldOption, SelectFieldSync } from '@servicetitan/anvil2/beta';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { LookupOption } from './lookupOptionsController';
+import { useLookupOptions } from './useLookupOptions';
+
+export interface LookupValueControlProps {
+    value: string;
+    fieldType: 'number' | 'string';
+    /** The selected data point's `options.fieldLookupSource`; empty -> free-text input. */
+    lookupSource?: string;
+    onChange: (value: string) => void;
+}
+
+const toOption = (option: LookupOption): SelectFieldOption => ({
+    id: option.key,
+    label: option.label,
+});
+
+const sanitizeNumericInput = (raw: string): string => {
+    let value = raw.replaceAll(/[^0-9.-]/g, '');
+    const isNegative = value.startsWith('-');
+    value = value.replaceAll('-', '');
+    if (isNegative) {
+        value = `-${value}`;
+    }
+    const firstDot = value.indexOf('.');
+    if (firstDot >= 0) {
+        value = `${value.slice(0, firstDot + 1)}${value.slice(firstDot + 1).replaceAll('.', '')}`;
+    }
+    return value;
+};
+
+/**
+ * Renders the value control for a single condition based on the field's lookup source:
+ *  - `static`     -> full list returned by the host, filtered locally (`SelectFieldSync`).
+ *  - `searchable` -> host searches per typed query (`SelectField` + `loadOptions`).
+ *  - `idle`/`fallback`/`loading` -> free-text input (never block the user).
+ *
+ * Unlayer persists conditions as a Nunjucks string, so a saved searchable value
+ * has no stored label — we display the saved key as the label until the user
+ * re-searches and re-selects.
+ */
+export function LookupValueControl({
+    fieldType,
+    lookupSource,
+    onChange,
+    value,
+}: Readonly<LookupValueControlProps>) {
+    const { loadOptions, options, resolveOptions, status } = useLookupOptions(lookupSource);
+
+    const staticSelected = useMemo<SelectFieldOption | null>(
+        () => options.filter(option => option.key === value).map(toOption)[0] ?? null,
+        [options, value],
+    );
+
+    const [searchableSelected, setSearchableSelected] = useState<SelectFieldOption | null>(
+        value ? { id: value, label: value } : null,
+    );
+
+    // Tracks the key we've already turned into a human-readable label so we don't re-resolve it.
+    const resolvedKeyRef = useRef<string | null>(null);
+
+    useEffect(() => {
+        setSearchableSelected(prev => {
+            if (!value) {
+                return null;
+            }
+            if (prev?.id === value) {
+                return prev;
+            }
+            return { id: value, label: value };
+        });
+    }, [value]);
+
+    // On open (or when a saved searchable value appears), ask the host to resolve key -> label.
+    useEffect(() => {
+        if (status !== 'searchable' || !value) {
+            resolvedKeyRef.current = null;
+            return;
+        }
+        if (resolvedKeyRef.current === value) {
+            return;
+        }
+
+        let cancelled = false;
+        resolveOptions([value]).then(result => {
+            if (cancelled) {
+                return;
+            }
+            const match = result.find(option => option.key === value);
+            if (match) {
+                resolvedKeyRef.current = value;
+                setSearchableSelected({ id: match.key, label: match.label });
+            }
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [status, value, resolveOptions]);
+
+    const handleLoadOptions = useCallback(
+        async (query: string) => {
+            const result = await loadOptions(query);
+            return result.map(toOption);
+        },
+        [loadOptions],
+    );
+
+    if (status === 'loading') {
+        return (
+            <TextField
+                label="Value"
+                size="small"
+                flex={1}
+                disabled
+                value=""
+                placeholder=""
+                aria-label="Value"
+            />
+        );
+    }
+
+    if (status === 'static') {
+        return (
+            <SelectFieldSync
+                flex={1}
+                size="small"
+                label="Value"
+                placeholder="Search value..."
+                options={options.map(toOption)}
+                value={staticSelected}
+                onSelectedOptionChange={option => onChange(option ? String(option.id) : '')}
+            />
+        );
+    }
+
+    if (status === 'searchable') {
+        return (
+            <SelectField
+                flex={1}
+                size="small"
+                label="Value"
+                placeholder="Type to search..."
+                initialLoad="open"
+                loadOptions={handleLoadOptions}
+                value={searchableSelected}
+                onSelectedOptionChange={option => {
+                    resolvedKeyRef.current = option ? String(option.id) : null;
+                    setSearchableSelected(option);
+                    onChange(option ? String(option.id) : '');
+                }}
+            />
+        );
+    }
+
+    // idle / fallback (no source, empty, error, or timeout) -> free text.
+    const handleTextChange = (raw: string) => {
+        onChange(fieldType === 'number' ? sanitizeNumericInput(raw) : raw);
+    };
+
+    return (
+        <TextField
+            label="Value"
+            size="small"
+            flex={1}
+            value={value}
+            onChange={e => handleTextChange(e.target.value)}
+            placeholder={fieldType === 'number' ? 'e.g. 1.5' : 'Enter value...'}
+            aria-label="Value"
+            {...(fieldType === 'number' && { inputMode: 'decimal' })}
+        />
+    );
+}

package/src/display-conditions/lookupOptionsController.ts

@@ -6,6 +6,16 @@
  * UI, the editor does NOT own the option data — it asks the HOST for it over the
  * EventTarget bus below and renders whatever the host returns.
  *
+ * Two host-driven modes are supported (the host decides, the editor adapts):
+ *   1. Full-list source (e.g. "state", "jobType"): the host returns every option
+ *      on the first request and omits `searchable`. The editor caches that list
+ *      and filters it LOCALLY as the user types — no further requests are sent.
+ *   2. Searchable source (e.g. "city"): the list is too large to send at once.
+ *      The host returns `searchable: true` (typically with an empty list on the
+ *      first, query-less request). The editor then re-requests with the typed
+ *      `query` on each keystroke and the host returns a fresh, server-filtered
+ *      list per query.
+ *
  * Transport mirrors the existing `displayConditionController` EventBus pattern.
  *
  * Event names (host <-> editor):
@@ -31,28 +41,37 @@ export interface LookupOptionsRequest {
     requestId: string;
     /** The selected field's `options.fieldLookupSource`. */
     sourceKey: string;
-    /** Reserved for searchable sources (e.g. "city"); omitted for now. */
+    /**
+     * The text the user has typed. Sent on each (debounced) keystroke once the
+     * host has declared the source `searchable`. Empty/omitted on the first
+     * request, where the host decides whether the source is searchable.
+     */
     query?: string;
+    /**
+     * Resolve mode: the editor is asking the host to return the option(s) for
+     * these EXACT stored keys (not a text search). Used on open to turn a saved
+     * searchable value (a bare key) back into a human-readable label. When
+     * present the host should match by key and ignore `query`.
+     */
+    keys?: string[];
 }
 
 /** host -> editor */
 export interface LookupOptionsResponse {
     requestId: string;
     options: LookupOption[];
+    /**
+     * Set to `true` by the host when the source must be searched per query
+     * (server-side). When omitted/false the editor treats `options` as the
+     * complete list and switches to local filtering. Only read from the first
+     * (query-less) response for a given source.
+     */
+    searchable?: boolean;
 }
 
 export const LOOKUP_OPTIONS_REQUEST_EVENT = 'dte-unlayer:lookup-options-request';
 export const LOOKUP_OPTIONS_RESPONSE_EVENT = 'dte-unlayer:lookup-options-response';
 
-/**
- * Searchable sources require the host to query an API per typed query. These are
- * skipped for now and fall back to the free-text input.
- */
-export const SEARCHABLE_LOOKUP_SOURCES = ['city'] as const;
-
-export const isSearchableLookupSource = (sourceKey: string | undefined): boolean =>
-    !!sourceKey && (SEARCHABLE_LOOKUP_SOURCES as readonly string[]).includes(sourceKey);
-
 const lookupOptionsEvents = new EventTarget();
 
 /** editor -> host: ask the host to resolve options for a lookup source. */