@webiny/app-headless-cms 6.5.0-beta.8 → 6.5.0

package/presentation/contentEntries/preview/PreviewPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/contentEntries/preview/PreviewPane.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewPane.tsx"],"sourcesContent":["import React, { useRef, useEffect, useCallback, useState } from \"react\";\nimport { Messenger, MessageOrigin } from \"@webiny/cms-sdk/messenger\";\nimport { jsonPatch } from \"@webiny/cms-sdk\";\nimport { IconButton, Input, OverlayLoader, SegmentedControl } from \"@webiny/admin-ui\";\nimport { ReactComponent as RefreshIcon } from \"@webiny/icons/refresh.svg\";\nimport { ReactComponent as ContentCopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as LaptopIcon } from \"@webiny/icons/laptop.svg\";\nimport { ReactComponent as SmartphoneIcon } from \"@webiny/icons/smartphone.svg\";\nimport { ReactComponent as OpenInNewIcon } from \"@webiny/icons/open_in_new.svg\";\nimport { useLivePreviewPresenter } from \"./useLivePreviewPresenter.js\";\nimport { buildEditorUrl, buildDisplayUrl } from \"./resolvePreviewUrl.js\";\n\ninterface PreviewPaneProps {\n    domain: string;\n    previewPath: string;\n    entryId: string;\n    entryData: Record<string, unknown> | null;\n}\n\ntype ViewportMode = \"desktop\" | \"mobile\";\n\nexport const PreviewPane = ({ domain, previewPath, entryId, entryData }: PreviewPaneProps) => {\n    const iframeRef = useRef<HTMLIFrameElement | null>(null);\n    const messengerRef = useRef<Messenger | null>(null);\n    const entryDataRef = useRef(entryData);\n    const lastSentDataRef = useRef<Record<string, unknown> | null>(null);\n    const [ready, setReady] = useState(false);\n    const [loading, setLoading] = useState(true);\n    const [iframeKey, setIframeKey] = useState(0);\n    const [viewport, setViewport] = useState<ViewportMode>(\"desktop\");\n    const presenter = useLivePreviewPresenter();\n\n    entryDataRef.current = entryData;\n\n    const displayUrl = buildDisplayUrl(\n        domain,\n        previewPath,\n        (entryData as Record<string, unknown>) || {}\n    );\n\n    const [address, setAddress] = useState(displayUrl);\n\n    useEffect(() => {\n        setAddress(displayUrl);\n    }, [displayUrl]);\n\n    const iframeSrc = (() => {\n        const editorPath = buildEditorUrl(domain, previewPath);\n        const url = new URL(editorPath);\n        url.searchParams.set(\"wb.editing\", \"true\");\n        url.searchParams.set(\"wb.type\", \"entry\");\n        url.searchParams.set(\"wb.id\", entryId);\n        url.searchParams.set(\"wb.path\", url.pathname);\n        url.searchParams.set(\"wb.referrer\", window.location.origin);\n        return url.toString();\n    })();\n\n    const sendEntryData = useCallback(() => {\n        const data = entryDataRef.current;\n        if (!data || !messengerRef.current) {\n            return;\n        }\n\n        const serialized = JSON.parse(JSON.stringify(data));\n        messengerRef.current.send(\"document.set\", serialized);\n        lastSentDataRef.current = serialized;\n    }, []);\n\n    useEffect(() => {\n        const iframe = iframeRef.current;\n        if (!iframe || !iframe.contentWindow) {\n            return;\n        }\n\n        const targetOrigin = new URL(iframe.src).origin;\n        const editorOrigin = new MessageOrigin(() => window, window.location.origin);\n        const previewTarget = new MessageOrigin(() => iframe.contentWindow!, targetOrigin);\n\n        const messenger = new Messenger(editorOrigin, previewTarget, \"wb.editor.*\");\n        messengerRef.current = messenger;\n\n        messenger.on(\"preview.ready\", () => {\n            setReady(true);\n            setLoading(false);\n            sendEntryData();\n        });\n\n        messenger.on(\n            \"preview.component.register\",\n            (manifest: { name: string; label: string; description: string }) => {\n                presenter.addComponent(manifest);\n            }\n        );\n\n        return () => {\n            messenger.dispose();\n            messengerRef.current = null;\n            lastSentDataRef.current = null;\n            setReady(false);\n        };\n    }, [iframeSrc, presenter, iframeKey, sendEntryData]);\n\n    useEffect(() => {\n        if (!ready || !entryData || !messengerRef.current) {\n            return;\n        }\n\n        const current = JSON.parse(JSON.stringify(entryData));\n        const previous = lastSentDataRef.current;\n\n        if (previous) {\n            const patch = jsonPatch.compare(previous, current);\n            if (patch.length > 0) {\n                messengerRef.current.send(\"document.patch\", patch);\n            }\n        } else {\n            messengerRef.current.send(\"document.set\", current);\n        }\n\n        lastSentDataRef.current = current;\n    }, [ready, entryData]);\n\n    const reload = useCallback(() => {\n        setLoading(true);\n        setReady(false);\n        lastSentDataRef.current = null;\n        setIframeKey(prev => prev + 1);\n    }, []);\n\n    const getDraftUrl = useCallback(() => {\n        const url = new URL(displayUrl);\n        url.searchParams.set(\"wb.type\", \"entry\");\n        url.searchParams.set(\"wb.path\", url.pathname);\n        url.searchParams.set(\"wb.preview\", \"true\");\n        url.searchParams.set(\"wb.id\", entryId);\n        return url.toString();\n    }, [displayUrl, entryId]);\n\n    const copyUrl = useCallback(() => {\n        navigator.clipboard.writeText(getDraftUrl());\n    }, [getDraftUrl]);\n\n    const openInNewTab = useCallback(() => {\n        window.open(getDraftUrl(), \"_blank\");\n    }, [getDraftUrl]);\n\n    return (\n        <div className=\"relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden\">\n            <div className=\"flex p-md items-center bg-white border-b border-neutral-dimmed\">\n                <div className=\"w-full\">\n                    <Input\n                        value={address}\n                        onChange={setAddress}\n                        readOnly\n                        size=\"md\"\n                        variant={\"secondary\"}\n                        className=\"bg-gray-100\"\n                    />\n                </div>\n\n                <div className=\"flex items-center gap-xxs ml-sm\">\n                    <IconButton\n                        onClick={openInNewTab}\n                        icon={<OpenInNewIcon />}\n                        variant=\"ghost\"\n                        size=\"md\"\n                    />\n                    <IconButton\n                        onClick={copyUrl}\n                        icon={<ContentCopyIcon />}\n                        variant=\"ghost\"\n                        size=\"sm\"\n                    />\n                    <IconButton onClick={reload} icon={<RefreshIcon />} variant=\"ghost\" size=\"sm\" />\n                    <SegmentedControl\n                        value={viewport}\n                        onChange={(value: string) => setViewport(value as ViewportMode)}\n                        items={[\n                            { value: \"desktop\", label: \"\", icon: <LaptopIcon /> },\n                            { value: \"mobile\", label: \"\", icon: <SmartphoneIcon /> }\n                        ]}\n                    />\n                </div>\n            </div>\n\n            <div className=\"block box-border h-full w-full overflow-auto fill-grid\">\n                {loading ? <OverlayLoader text=\"Connecting to Live Preview...\" /> : null}\n                <div\n                    className={`mx-auto h-full transition-all duration-300 ${viewport === \"mobile\" ? \"p-md\" : \"\"}`}\n                    style={{ width: viewport === \"mobile\" ? \"375px\" : \"100%\" }}\n                >\n                    <iframe\n                        key={iframeKey}\n                        ref={iframeRef}\n                        src={iframeSrc}\n                        width=\"100%\"\n                        height=\"100%\"\n                        className=\"h-full\"\n                        sandbox=\"allow-same-origin allow-scripts allow-forms\"\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["PreviewPane","domain","previewPath","entryId","entryData","iframeRef","useRef","messengerRef","entryDataRef","lastSentDataRef","ready","setReady","useState","loading","setLoading","iframeKey","setIframeKey","viewport","setViewport","presenter","useLivePreviewPresenter","displayUrl","buildDisplayUrl","address","setAddress","useEffect","iframeSrc","editorPath","buildEditorUrl","url","URL","window","sendEntryData","useCallback","data","serialized","JSON","iframe","targetOrigin","editorOrigin","MessageOrigin","previewTarget","messenger","Messenger","manifest","current","previous","patch","jsonPatch","reload","prev","getDraftUrl","copyUrl","navigator","openInNewTab","Input","IconButton","OpenInNewIcon","ContentCopyIcon","RefreshIcon","SegmentedControl","value","LaptopIcon","SmartphoneIcon","OverlayLoader"],"mappings":"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"}
+{"version":3,"file":"presentation/contentEntries/preview/PreviewPane.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewPane.tsx"],"sourcesContent":["import React, { useRef, useEffect, useCallback, useState } from \"react\";\nimport { Messenger, MessageOrigin } from \"@webiny/cms-sdk/messenger\";\nimport { jsonPatch } from \"@webiny/cms-sdk\";\nimport {\n    Alert,\n    CopyButton,\n    IconButton,\n    OverlayLoader,\n    SegmentedControl,\n    Text,\n    Tooltip,\n    useToast\n} from \"@webiny/admin-ui\";\nimport { ReactComponent as RefreshIcon } from \"@webiny/icons/refresh.svg\";\nimport { ReactComponent as LaptopIcon } from \"@webiny/icons/laptop.svg\";\nimport { ReactComponent as SmartphoneIcon } from \"@webiny/icons/smartphone.svg\";\nimport { ReactComponent as OpenInNewIcon } from \"@webiny/icons/open_in_new.svg\";\nimport { PreviewDomainMenu } from \"@webiny/frontend-settings/exports/admin.js\";\nimport { useLivePreviewPresenter } from \"./useLivePreviewPresenter.js\";\nimport { buildEditorUrl, buildDisplayUrl } from \"./resolvePreviewUrl.js\";\n\n/**\n * How long to wait for the frontend to report it is ready before showing troubleshooting hints.\n */\nconst READY_TIMEOUT_MS = 20_000;\n\ninterface PreviewPaneProps {\n    domain: string;\n    /**\n     * The Frontend Domain setting, passed only when the user overrides it with their own preview domain.\n     */\n    settingsDomain: string | null;\n    onResetDomain: () => void;\n    previewPath: string;\n    entryId: string;\n    entryData: Record<string, unknown> | null;\n    /**\n     * Entry data used to resolve the preview path, with referenced entries' values filled in.\n     */\n    urlEntryData: Record<string, unknown> | null;\n}\n\ntype ViewportMode = \"desktop\" | \"mobile\";\n\nexport const PreviewPane = ({\n    domain,\n    settingsDomain,\n    onResetDomain,\n    previewPath,\n    entryId,\n    entryData,\n    urlEntryData\n}: PreviewPaneProps) => {\n    const iframeRef = useRef<HTMLIFrameElement | null>(null);\n    const messengerRef = useRef<Messenger | null>(null);\n    const entryDataRef = useRef(entryData);\n    const lastSentDataRef = useRef<Record<string, unknown> | null>(null);\n    const [ready, setReady] = useState(false);\n    const [loading, setLoading] = useState(true);\n    const [timedOut, setTimedOut] = useState(false);\n    const [iframeKey, setIframeKey] = useState(0);\n    const [viewport, setViewport] = useState<ViewportMode>(\"desktop\");\n    const presenter = useLivePreviewPresenter();\n    const { showToast } = useToast();\n\n    entryDataRef.current = entryData;\n\n    const displayUrl = buildDisplayUrl(domain, previewPath, urlEntryData || {});\n\n    const iframeSrc = (() => {\n        const editorPath = buildEditorUrl(domain, previewPath);\n        const url = new URL(editorPath);\n        url.searchParams.set(\"wb.editing\", \"true\");\n        url.searchParams.set(\"wb.type\", \"entry\");\n        url.searchParams.set(\"wb.id\", entryId);\n        url.searchParams.set(\"wb.path\", url.pathname);\n        url.searchParams.set(\"wb.referrer\", window.location.origin);\n        return url.toString();\n    })();\n\n    const sendEntryData = useCallback(() => {\n        const data = entryDataRef.current;\n        if (!data || !messengerRef.current) {\n            return;\n        }\n\n        const serialized = JSON.parse(JSON.stringify(data));\n        messengerRef.current.send(\"document.set\", serialized);\n        lastSentDataRef.current = serialized;\n    }, []);\n\n    useEffect(() => {\n        const iframe = iframeRef.current;\n        if (!iframe || !iframe.contentWindow) {\n            return;\n        }\n\n        const targetOrigin = new URL(iframe.src).origin;\n        const editorOrigin = new MessageOrigin(() => window, window.location.origin);\n        const previewTarget = new MessageOrigin(() => iframe.contentWindow!, targetOrigin);\n\n        const messenger = new Messenger(editorOrigin, previewTarget, \"wb.editor.*\");\n        messengerRef.current = messenger;\n\n        setLoading(true);\n        setTimedOut(false);\n        const timeout = setTimeout(() => setTimedOut(true), READY_TIMEOUT_MS);\n\n        messenger.on(\"preview.ready\", () => {\n            clearTimeout(timeout);\n            setReady(true);\n            setLoading(false);\n            setTimedOut(false);\n            sendEntryData();\n        });\n\n        messenger.on(\n            \"preview.component.register\",\n            (manifest: { name: string; label: string; description: string }) => {\n                presenter.addComponent(manifest);\n            }\n        );\n\n        return () => {\n            clearTimeout(timeout);\n            messenger.dispose();\n            messengerRef.current = null;\n            lastSentDataRef.current = null;\n            setReady(false);\n        };\n    }, [iframeSrc, presenter, iframeKey, sendEntryData]);\n\n    useEffect(() => {\n        if (!ready || !entryData || !messengerRef.current) {\n            return;\n        }\n\n        const current = JSON.parse(JSON.stringify(entryData));\n        const previous = lastSentDataRef.current;\n\n        if (previous) {\n            const patch = jsonPatch.compare(previous, current);\n            if (patch.length > 0) {\n                messengerRef.current.send(\"document.patch\", patch);\n            }\n        } else {\n            messengerRef.current.send(\"document.set\", current);\n        }\n\n        lastSentDataRef.current = current;\n    }, [ready, entryData]);\n\n    const reload = useCallback(() => {\n        setLoading(true);\n        setReady(false);\n        lastSentDataRef.current = null;\n        setIframeKey(prev => prev + 1);\n    }, []);\n\n    const getDraftUrl = useCallback(() => {\n        const url = new URL(displayUrl);\n        url.searchParams.set(\"wb.type\", \"entry\");\n        url.searchParams.set(\"wb.path\", url.pathname);\n        url.searchParams.set(\"wb.preview\", \"true\");\n        url.searchParams.set(\"wb.id\", entryId);\n        return url.toString();\n    }, [displayUrl, entryId]);\n\n    const confirmCopy = useCallback(() => {\n        showToast({ title: \"Preview link copied to clipboard!\" });\n    }, []);\n\n    const openInNewTab = useCallback(() => {\n        window.open(getDraftUrl(), \"_blank\");\n    }, [getDraftUrl]);\n\n    return (\n        <div className=\"relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden\">\n            <div className=\"flex flex-row items-center gap-sm p-sm bg-neutral-base border-b-sm border-neutral-dimmed\">\n                <div className=\"relative flex-auto min-w-0 h-[32px]\">\n                    <div className=\"w-full absolute -top-px py-xs-plus pl-xl pr-[112px] border-sm text-md truncate cursor-not-allowed rounded-md border-neutral-subtle bg-neutral-disabled text-neutral-disabled\">\n                        <PreviewDomainMenu className={\"absolute left-0 top-0\"} />\n                        {displayUrl}\n                    </div>\n                    <div className=\"absolute right-0 top-0 flex\">\n                        <Tooltip\n                            content={<Text size=\"md\">Refresh preview</Text>}\n                            side=\"bottom\"\n                            trigger={\n                                <IconButton\n                                    icon={<RefreshIcon />}\n                                    size=\"md\"\n                                    onClick={reload}\n                                    variant={\"ghost\"}\n                                />\n                            }\n                        />\n                        <Tooltip\n                            content={<Text size=\"md\">Copy preview link</Text>}\n                            side=\"bottom\"\n                            trigger={\n                                <CopyButton\n                                    size=\"md\"\n                                    value={getDraftUrl()}\n                                    onCopy={confirmCopy}\n                                    variant={\"ghost\"}\n                                />\n                            }\n                        />\n                        <Tooltip\n                            content={<Text size=\"md\">Preview entry in a new tab</Text>}\n                            side=\"bottom\"\n                            trigger={\n                                <IconButton\n                                    icon={<OpenInNewIcon />}\n                                    size=\"md\"\n                                    onClick={openInNewTab}\n                                    variant={\"ghost\"}\n                                />\n                            }\n                        />\n                    </div>\n                </div>\n                <div className=\"shrink-0\">\n                    <SegmentedControl\n                        value={viewport}\n                        onChange={(value: string) => setViewport(value as ViewportMode)}\n                        items={[\n                            { value: \"desktop\", label: \"\", icon: <LaptopIcon /> },\n                            { value: \"mobile\", label: \"\", icon: <SmartphoneIcon /> }\n                        ]}\n                    />\n                </div>\n            </div>\n\n            {settingsDomain ? (\n                <Alert\n                    type={\"warning\"}\n                    variant={\"subtle\"}\n                    className={\"rounded-none\"}\n                    actions={<Alert.Action text={\"Use Frontend Domain\"} onClick={onResetDomain} />}\n                >\n                    Previewing on your custom domain {domain} instead of the Frontend Domain{\" \"}\n                    {settingsDomain}.\n                </Alert>\n            ) : null}\n\n            {loading && timedOut ? (\n                <Alert\n                    type={\"warning\"}\n                    variant={\"subtle\"}\n                    className={\"rounded-none\"}\n                    actions={<Alert.Action text={\"Reload\"} onClick={reload} />}\n                >\n                    {new URL(iframeSrc).origin} is not responding to the live preview. Check that\n                    the frontend app is running at that address, that it initializes the Webiny SDK\n                    in editing mode, and that it allows this admin app as a referrer.\n                </Alert>\n            ) : null}\n\n            <div className=\"relative block box-border h-full w-full overflow-auto fill-grid\">\n                {loading && !timedOut ? (\n                    <OverlayLoader text=\"Connecting to Live Preview...\" />\n                ) : null}\n                <div\n                    className={`mx-auto h-full transition-all duration-300 ${viewport === \"mobile\" ? \"p-md\" : \"\"}`}\n                    style={{ width: viewport === \"mobile\" ? \"375px\" : \"100%\" }}\n                >\n                    <iframe\n                        key={iframeKey}\n                        ref={iframeRef}\n                        src={iframeSrc}\n                        width=\"100%\"\n                        height=\"100%\"\n                        className=\"h-full\"\n                        sandbox=\"allow-same-origin allow-scripts allow-forms\"\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["READY_TIMEOUT_MS","PreviewPane","domain","settingsDomain","onResetDomain","previewPath","entryId","entryData","urlEntryData","iframeRef","useRef","messengerRef","entryDataRef","lastSentDataRef","ready","setReady","useState","loading","setLoading","timedOut","setTimedOut","iframeKey","setIframeKey","viewport","setViewport","presenter","useLivePreviewPresenter","showToast","useToast","displayUrl","buildDisplayUrl","iframeSrc","editorPath","buildEditorUrl","url","URL","window","sendEntryData","useCallback","data","serialized","JSON","useEffect","iframe","targetOrigin","editorOrigin","MessageOrigin","previewTarget","messenger","Messenger","timeout","setTimeout","clearTimeout","manifest","current","previous","patch","jsonPatch","reload","prev","getDraftUrl","confirmCopy","openInNewTab","PreviewDomainMenu","Tooltip","Text","IconButton","RefreshIcon","CopyButton","OpenInNewIcon","SegmentedControl","value","LaptopIcon","SmartphoneIcon","Alert","OverlayLoader"],"mappings":"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"}

package/presentation/contentEntries/preview/abstractions.d.ts

@@ -1,3 +1,5 @@
+import type { CmsReferenceValue } from "../../../features/contentEntry/refTypes.js";
+import type { RefValuesMap } from "./resolvePreviewUrl.js";
 export interface PreviewComponent {
     name: string;
     label: string;
@@ -6,9 +8,15 @@ export interface PreviewComponent {
 export interface ILivePreviewPresenter {
     vm: {
         components: PreviewComponent[];
+        refValues: RefValuesMap;
     };
     addComponent(component: PreviewComponent): void;
     clearComponents(): void;
+    /**
+     * Loads referenced entries that the preview path reads through, e.g. `{values.location.slug}`.
+     * Each ref is requested once; results land in `vm.refValues`.
+     */
+    loadRefValues(refs: CmsReferenceValue[]): void;
 }
 export declare const LivePreviewPresenter: import("@webiny/di").Abstraction<ILivePreviewPresenter>;
 export declare namespace LivePreviewPresenter {

package/presentation/contentEntries/preview/abstractions.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/contentEntries/preview/abstractions.js","sources":["../../../../src/presentation/contentEntries/preview/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\n\nexport interface PreviewComponent {\n    name: string;\n    label: string;\n    description: string;\n}\n\nexport interface ILivePreviewPresenter {\n    vm: {\n        components: PreviewComponent[];\n    };\n    addComponent(component: PreviewComponent): void;\n    clearComponents(): void;\n}\n\nexport const LivePreviewPresenter = createAbstraction<ILivePreviewPresenter>(\n    \"CmsContentEntries/LivePreviewPresenter\"\n);\n\nexport namespace LivePreviewPresenter {\n    export type Interface = ILivePreviewPresenter;\n}\n"],"names":["LivePreviewPresenter","createAbstraction"],"mappings":";AAgBO,MAAMA,uBAAuBC,kBAChC"}
+{"version":3,"file":"presentation/contentEntries/preview/abstractions.js","sources":["../../../../src/presentation/contentEntries/preview/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport type { RefValuesMap } from \"./resolvePreviewUrl.js\";\n\nexport interface PreviewComponent {\n    name: string;\n    label: string;\n    description: string;\n}\n\nexport interface ILivePreviewPresenter {\n    vm: {\n        components: PreviewComponent[];\n        refValues: RefValuesMap;\n    };\n    addComponent(component: PreviewComponent): void;\n    clearComponents(): void;\n    /**\n     * Loads referenced entries that the preview path reads through, e.g. `{values.location.slug}`.\n     * Each ref is requested once; results land in `vm.refValues`.\n     */\n    loadRefValues(refs: CmsReferenceValue[]): void;\n}\n\nexport const LivePreviewPresenter = createAbstraction<ILivePreviewPresenter>(\n    \"CmsContentEntries/LivePreviewPresenter\"\n);\n\nexport namespace LivePreviewPresenter {\n    export type Interface = ILivePreviewPresenter;\n}\n"],"names":["LivePreviewPresenter","createAbstraction"],"mappings":";AAwBO,MAAMA,uBAAuBC,kBAChC"}

package/presentation/contentEntries/preview/resolvePreviewUrl.d.ts

@@ -1,4 +1,25 @@
+import type { CmsModelField } from "../../../types.js";
+import type { CmsReferenceValue } from "../../../features/contentEntry/refTypes.js";
 type EntryData = Record<string, unknown>;
+/**
+ * Values of loaded referenced entries, keyed by the ref `id`.
+ * `null` marks a ref that failed to load, so it isn't requested again.
+ */
+export type RefValuesMap = Record<string, Record<string, unknown> | null>;
+/**
+ * Returns the ids of ref fields that the pattern reads through,
+ * e.g. `location` for `/{values.location.slug}/{values.slug}`.
+ */
+export declare function getPatternRefFieldIds(pattern: string, fields: Pick<CmsModelField, "fieldId" | "type">[]): string[];
+/**
+ * Collects the ref values held by the given fields, for both single and multiple-value fields.
+ */
+export declare function getRefValues(values: EntryData, refFieldIds: string[]): CmsReferenceValue[];
+/**
+ * Spreads loaded referenced entry values into the ref values, so `{values.location.slug}`
+ * resolves against the referenced entry. Refs that aren't loaded yet are left as they are.
+ */
+export declare function withRefValues(entry: EntryData, refFieldIds: string[], refValues: RefValuesMap): EntryData;
 export declare function resolveSlugPattern(pattern: string, entry: EntryData): string;
 export declare function buildEditorUrl(domain: string, previewPath: string): string;
 export declare function buildDisplayUrl(domain: string, path: string, entry: EntryData): string;

package/presentation/contentEntries/preview/resolvePreviewUrl.js

@@ -1,3 +1,52 @@
+function isRefValue(value) {
+    if (!value || "object" != typeof value) return false;
+    const ref = value;
+    return "string" == typeof ref.id && "string" == typeof ref.modelId;
+}
+function getPatternRefFieldIds(pattern, fields) {
+    const refFieldIds = new Set(fields.filter((f)=>"ref" === f.type).map((f)=>f.fieldId));
+    const result = new Set();
+    for (const [, path] of pattern.matchAll(/\{([^}]+)\}/g)){
+        const [root, fieldId, ...rest] = path.split(".");
+        if ("values" === root && rest.length > 0 && refFieldIds.has(fieldId)) result.add(fieldId);
+    }
+    return [
+        ...result
+    ];
+}
+function getRefValues(values, refFieldIds) {
+    const refs = [];
+    for (const fieldId of refFieldIds){
+        const value = values[fieldId];
+        const items = Array.isArray(value) ? value : [
+            value
+        ];
+        refs.push(...items.filter(isRefValue));
+    }
+    return refs;
+}
+function withRefValues(entry, refFieldIds, refValues) {
+    const values = entry.values;
+    if (!values || 0 === refFieldIds.length) return entry;
+    const expand = (value)=>{
+        if (!isRefValue(value) || !refValues[value.id]) return value;
+        return {
+            ...refValues[value.id],
+            ...value
+        };
+    };
+    const expanded = {
+        ...values
+    };
+    for (const fieldId of refFieldIds){
+        const value = values[fieldId];
+        expanded[fieldId] = Array.isArray(value) ? value.map(expand) : expand(value);
+    }
+    return {
+        ...entry,
+        values: expanded
+    };
+}
 function getNestedValue(obj, path) {
     const parts = path.split(".");
     let current = obj;
@@ -27,6 +76,6 @@ function buildDisplayUrl(domain, path, entry) {
     const normalizedPath = resolvedPath.startsWith("/") ? resolvedPath : `/${resolvedPath}`;
     return `${base}${normalizedPath}`;
 }
-export { buildDisplayUrl, buildEditorUrl, resolveSlugPattern };
+export { buildDisplayUrl, buildEditorUrl, getPatternRefFieldIds, getRefValues, resolveSlugPattern, withRefValues };
 
 //# sourceMappingURL=resolvePreviewUrl.js.map

package/presentation/contentEntries/preview/resolvePreviewUrl.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/contentEntries/preview/resolvePreviewUrl.js","sources":["../../../../src/presentation/contentEntries/preview/resolvePreviewUrl.ts"],"sourcesContent":["type EntryData = Record<string, unknown>;\n\nfunction getNestedValue(obj: EntryData, path: string): unknown {\n    const parts = path.split(\".\");\n    let current: unknown = obj;\n    for (const part of parts) {\n        if (current === null || current === undefined || typeof current !== \"object\") {\n            return undefined;\n        }\n        current = (current as Record<string, unknown>)[part];\n    }\n    return current;\n}\n\nexport function resolveSlugPattern(pattern: string, entry: EntryData): string {\n    return pattern.replace(/\\{([^}]+)\\}/g, (_match, path: string) => {\n        const value = getNestedValue(entry, path);\n        if (value !== null && value !== undefined && value !== \"\") {\n            return String(value);\n        }\n        return \"new\";\n    });\n}\n\nexport function buildEditorUrl(domain: string, previewPath: string): string {\n    const base = domain.endsWith(\"/\") ? domain.slice(0, -1) : domain;\n    const bracketIndex = previewPath.indexOf(\"{\");\n    const staticPrefix = bracketIndex >= 0 ? previewPath.substring(0, bracketIndex) : previewPath;\n    const trimmed = staticPrefix.endsWith(\"/\") ? staticPrefix.slice(0, -1) : staticPrefix;\n    return `${base}${trimmed}/preview`;\n}\n\nexport function buildDisplayUrl(domain: string, path: string, entry: EntryData): string {\n    const base = domain.endsWith(\"/\") ? domain.slice(0, -1) : domain;\n    const resolvedPath = resolveSlugPattern(path, entry);\n    const normalizedPath = resolvedPath.startsWith(\"/\") ? resolvedPath : `/${resolvedPath}`;\n    return `${base}${normalizedPath}`;\n}\n"],"names":["getNestedValue","obj","path","parts","current","part","resolveSlugPattern","pattern","entry","_match","value","String","buildEditorUrl","domain","previewPath","base","bracketIndex","staticPrefix","trimmed","buildDisplayUrl","resolvedPath","normalizedPath"],"mappings":"AAEA,SAASA,eAAeC,GAAc,EAAEC,IAAY;IAChD,MAAMC,QAAQD,KAAK,KAAK,CAAC;IACzB,IAAIE,UAAmBH;IACvB,KAAK,MAAMI,QAAQF,MAAO;QACtB,IAAIC,QAAAA,WAA6C,AAAmB,YAAnB,OAAOA,SACpD;QAEJA,UAAWA,OAAmC,CAACC,KAAK;IACxD;IACA,OAAOD;AACX;AAEO,SAASE,mBAAmBC,OAAe,EAAEC,KAAgB;IAChE,OAAOD,QAAQ,OAAO,CAAC,gBAAgB,CAACE,QAAQP;QAC5C,MAAMQ,QAAQV,eAAeQ,OAAON;QACpC,IAAIQ,QAAAA,SAAyCA,AAAU,OAAVA,OACzC,OAAOC,OAAOD;QAElB,OAAO;IACX;AACJ;AAEO,SAASE,eAAeC,MAAc,EAAEC,WAAmB;IAC9D,MAAMC,OAAOF,OAAO,QAAQ,CAAC,OAAOA,OAAO,KAAK,CAAC,GAAG,MAAMA;IAC1D,MAAMG,eAAeF,YAAY,OAAO,CAAC;IACzC,MAAMG,eAAeD,gBAAgB,IAAIF,YAAY,SAAS,CAAC,GAAGE,gBAAgBF;IAClF,MAAMI,UAAUD,aAAa,QAAQ,CAAC,OAAOA,aAAa,KAAK,CAAC,GAAG,MAAMA;IACzE,OAAO,GAAGF,OAAOG,QAAQ,QAAQ,CAAC;AACtC;AAEO,SAASC,gBAAgBN,MAAc,EAAEX,IAAY,EAAEM,KAAgB;IAC1E,MAAMO,OAAOF,OAAO,QAAQ,CAAC,OAAOA,OAAO,KAAK,CAAC,GAAG,MAAMA;IAC1D,MAAMO,eAAed,mBAAmBJ,MAAMM;IAC9C,MAAMa,iBAAiBD,aAAa,UAAU,CAAC,OAAOA,eAAe,CAAC,CAAC,EAAEA,cAAc;IACvF,OAAO,GAAGL,OAAOM,gBAAgB;AACrC"}
+{"version":3,"file":"presentation/contentEntries/preview/resolvePreviewUrl.js","sources":["../../../../src/presentation/contentEntries/preview/resolvePreviewUrl.ts"],"sourcesContent":["import type { CmsModelField } from \"~/types.js\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\n\ntype EntryData = Record<string, unknown>;\n\n/**\n * Values of loaded referenced entries, keyed by the ref `id`.\n * `null` marks a ref that failed to load, so it isn't requested again.\n */\nexport type RefValuesMap = Record<string, Record<string, unknown> | null>;\n\nfunction isRefValue(value: unknown): value is CmsReferenceValue {\n    if (!value || typeof value !== \"object\") {\n        return false;\n    }\n    const ref = value as Partial<CmsReferenceValue>;\n    return typeof ref.id === \"string\" && typeof ref.modelId === \"string\";\n}\n\n/**\n * Returns the ids of ref fields that the pattern reads through,\n * e.g. `location` for `/{values.location.slug}/{values.slug}`.\n */\nexport function getPatternRefFieldIds(\n    pattern: string,\n    fields: Pick<CmsModelField, \"fieldId\" | \"type\">[]\n): string[] {\n    const refFieldIds = new Set(fields.filter(f => f.type === \"ref\").map(f => f.fieldId));\n    const result = new Set<string>();\n    for (const [, path] of pattern.matchAll(/\\{([^}]+)\\}/g)) {\n        const [root, fieldId, ...rest] = path.split(\".\");\n        if (root === \"values\" && rest.length > 0 && refFieldIds.has(fieldId)) {\n            result.add(fieldId);\n        }\n    }\n    return [...result];\n}\n\n/**\n * Collects the ref values held by the given fields, for both single and multiple-value fields.\n */\nexport function getRefValues(values: EntryData, refFieldIds: string[]): CmsReferenceValue[] {\n    const refs: CmsReferenceValue[] = [];\n    for (const fieldId of refFieldIds) {\n        const value = values[fieldId];\n        const items = Array.isArray(value) ? value : [value];\n        refs.push(...items.filter(isRefValue));\n    }\n    return refs;\n}\n\n/**\n * Spreads loaded referenced entry values into the ref values, so `{values.location.slug}`\n * resolves against the referenced entry. Refs that aren't loaded yet are left as they are.\n */\nexport function withRefValues(\n    entry: EntryData,\n    refFieldIds: string[],\n    refValues: RefValuesMap\n): EntryData {\n    const values = entry.values as EntryData | undefined;\n    if (!values || refFieldIds.length === 0) {\n        return entry;\n    }\n\n    const expand = (value: unknown) => {\n        if (!isRefValue(value) || !refValues[value.id]) {\n            return value;\n        }\n        return { ...refValues[value.id], ...value };\n    };\n\n    const expanded = { ...values };\n    for (const fieldId of refFieldIds) {\n        const value = values[fieldId];\n        expanded[fieldId] = Array.isArray(value) ? value.map(expand) : expand(value);\n    }\n    return { ...entry, values: expanded };\n}\n\nfunction getNestedValue(obj: EntryData, path: string): unknown {\n    const parts = path.split(\".\");\n    let current: unknown = obj;\n    for (const part of parts) {\n        if (current === null || current === undefined || typeof current !== \"object\") {\n            return undefined;\n        }\n        current = (current as Record<string, unknown>)[part];\n    }\n    return current;\n}\n\nexport function resolveSlugPattern(pattern: string, entry: EntryData): string {\n    return pattern.replace(/\\{([^}]+)\\}/g, (_match, path: string) => {\n        const value = getNestedValue(entry, path);\n        if (value !== null && value !== undefined && value !== \"\") {\n            return String(value);\n        }\n        return \"new\";\n    });\n}\n\nexport function buildEditorUrl(domain: string, previewPath: string): string {\n    const base = domain.endsWith(\"/\") ? domain.slice(0, -1) : domain;\n    const bracketIndex = previewPath.indexOf(\"{\");\n    const staticPrefix = bracketIndex >= 0 ? previewPath.substring(0, bracketIndex) : previewPath;\n    const trimmed = staticPrefix.endsWith(\"/\") ? staticPrefix.slice(0, -1) : staticPrefix;\n    return `${base}${trimmed}/preview`;\n}\n\nexport function buildDisplayUrl(domain: string, path: string, entry: EntryData): string {\n    const base = domain.endsWith(\"/\") ? domain.slice(0, -1) : domain;\n    const resolvedPath = resolveSlugPattern(path, entry);\n    const normalizedPath = resolvedPath.startsWith(\"/\") ? resolvedPath : `/${resolvedPath}`;\n    return `${base}${normalizedPath}`;\n}\n"],"names":["isRefValue","value","ref","getPatternRefFieldIds","pattern","fields","refFieldIds","Set","f","result","path","root","fieldId","rest","getRefValues","values","refs","items","Array","withRefValues","entry","refValues","expand","expanded","getNestedValue","obj","parts","current","part","resolveSlugPattern","_match","String","buildEditorUrl","domain","previewPath","base","bracketIndex","staticPrefix","trimmed","buildDisplayUrl","resolvedPath","normalizedPath"],"mappings":"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"}

package/presentation/contentEntries/preview/resolvePreviewUrl.test.d.ts

@@ -0,0 +1 @@
+export {};

package/presentation/contentEntries/preview/resolvePreviewUrl.test.js

@@ -0,0 +1,127 @@
+import { describe, expect, it } from "vitest";
+import { buildDisplayUrl, buildEditorUrl, getPatternRefFieldIds, getRefValues, resolveSlugPattern, withRefValues } from "./resolvePreviewUrl.js";
+const fields = [
+    {
+        fieldId: "slug",
+        type: "text"
+    },
+    {
+        fieldId: "location",
+        type: "ref"
+    },
+    {
+        fieldId: "tags",
+        type: "ref"
+    }
+];
+const resolvePreviewUrl_test_location = {
+    id: "loc1#0001",
+    modelId: "location"
+};
+describe("resolvePreviewUrl", ()=>{
+    it("should resolve plain values and fall back to `new` for missing ones", ()=>{
+        expect(resolveSlugPattern("/articles/{values.slug}", {
+            values: {
+                slug: "hello"
+            }
+        })).toBe("/articles/hello");
+        expect(resolveSlugPattern("/articles/{values.slug}", {
+            values: {}
+        })).toBe("/articles/new");
+    });
+    it("should build the iframe url from the static prefix only", ()=>{
+        expect(buildEditorUrl("https://site.com/", "/articles/{values.slug}")).toBe("https://site.com/articles/preview");
+        expect(buildEditorUrl("https://site.com", "/{values.location.slug}/{values.slug}")).toBe("https://site.com/preview");
+    });
+    it("should find ref fields the pattern reads through", ()=>{
+        expect(getPatternRefFieldIds("/{values.location.slug}/{values.slug}/{values.tags}", fields)).toEqual([
+            "location"
+        ]);
+        expect(getPatternRefFieldIds("/articles/{values.slug}", fields)).toEqual([]);
+    });
+    it("should collect ref values from single and multiple-value fields", ()=>{
+        const tag = {
+            id: "tag1#0001",
+            modelId: "tag"
+        };
+        expect(getRefValues({
+            location: resolvePreviewUrl_test_location,
+            tags: [
+                tag,
+                null
+            ],
+            slug: "x"
+        }, [
+            "location",
+            "tags"
+        ])).toEqual([
+            resolvePreviewUrl_test_location,
+            tag
+        ]);
+        expect(getRefValues({
+            location: null
+        }, [
+            "location"
+        ])).toEqual([]);
+    });
+    it("should resolve a ref field value once the referenced entry is loaded", ()=>{
+        const entry = {
+            id: "page1#0001",
+            values: {
+                slug: "climbing",
+                location: resolvePreviewUrl_test_location
+            }
+        };
+        const pattern = "/{values.location.slug}/{values.slug}";
+        const notLoaded = withRefValues(entry, [
+            "location"
+        ], {});
+        expect(buildDisplayUrl("https://site.com", pattern, notLoaded)).toBe("https://site.com/new/climbing");
+        const loaded = withRefValues(entry, [
+            "location"
+        ], {
+            [resolvePreviewUrl_test_location.id]: {
+                slug: "baker",
+                id: "should-not-win"
+            }
+        });
+        expect(buildDisplayUrl("https://site.com", pattern, loaded)).toBe("https://site.com/baker/climbing");
+        expect(loaded.values.location.id).toBe(resolvePreviewUrl_test_location.id);
+    });
+    it("should support indexing into multiple-value ref fields", ()=>{
+        const tag = {
+            id: "tag1#0001",
+            modelId: "tag"
+        };
+        const entry = {
+            values: {
+                tags: [
+                    tag
+                ]
+            }
+        };
+        const resolved = withRefValues(entry, [
+            "tags"
+        ], {
+            [tag.id]: {
+                slug: "news"
+            }
+        });
+        expect(resolveSlugPattern("/{values.tags.0.slug}", resolved)).toBe("/news");
+    });
+    it("should leave the entry untouched when there are no ref fields to fill in", ()=>{
+        const entry = {
+            values: {
+                slug: "x",
+                location: resolvePreviewUrl_test_location
+            }
+        };
+        expect(withRefValues(entry, [], {
+            [resolvePreviewUrl_test_location.id]: {
+                slug: "baker"
+            }
+        })).toBe(entry);
+    });
+});
+
+//# sourceMappingURL=resolvePreviewUrl.test.js.map

package/presentation/contentEntries/preview/resolvePreviewUrl.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/resolvePreviewUrl.test.js","sources":["../../../../src/presentation/contentEntries/preview/resolvePreviewUrl.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport {\n    buildDisplayUrl,\n    buildEditorUrl,\n    getPatternRefFieldIds,\n    getRefValues,\n    resolveSlugPattern,\n    withRefValues\n} from \"./resolvePreviewUrl.js\";\n\nconst fields = [\n    { fieldId: \"slug\", type: \"text\" },\n    { fieldId: \"location\", type: \"ref\" },\n    { fieldId: \"tags\", type: \"ref\" }\n];\n\nconst location = { id: \"loc1#0001\", modelId: \"location\" };\n\ndescribe(\"resolvePreviewUrl\", () => {\n    it(\"should resolve plain values and fall back to `new` for missing ones\", () => {\n        expect(resolveSlugPattern(\"/articles/{values.slug}\", { values: { slug: \"hello\" } })).toBe(\n            \"/articles/hello\"\n        );\n        expect(resolveSlugPattern(\"/articles/{values.slug}\", { values: {} })).toBe(\"/articles/new\");\n    });\n\n    it(\"should build the iframe url from the static prefix only\", () => {\n        expect(buildEditorUrl(\"https://site.com/\", \"/articles/{values.slug}\")).toBe(\n            \"https://site.com/articles/preview\"\n        );\n        expect(buildEditorUrl(\"https://site.com\", \"/{values.location.slug}/{values.slug}\")).toBe(\n            \"https://site.com/preview\"\n        );\n    });\n\n    it(\"should find ref fields the pattern reads through\", () => {\n        expect(\n            getPatternRefFieldIds(\"/{values.location.slug}/{values.slug}/{values.tags}\", fields)\n        ).toEqual([\"location\"]);\n        expect(getPatternRefFieldIds(\"/articles/{values.slug}\", fields)).toEqual([]);\n    });\n\n    it(\"should collect ref values from single and multiple-value fields\", () => {\n        const tag = { id: \"tag1#0001\", modelId: \"tag\" };\n        expect(\n            getRefValues({ location, tags: [tag, null], slug: \"x\" }, [\"location\", \"tags\"])\n        ).toEqual([location, tag]);\n        expect(getRefValues({ location: null }, [\"location\"])).toEqual([]);\n    });\n\n    it(\"should resolve a ref field value once the referenced entry is loaded\", () => {\n        const entry = { id: \"page1#0001\", values: { slug: \"climbing\", location } };\n        const pattern = \"/{values.location.slug}/{values.slug}\";\n\n        const notLoaded = withRefValues(entry, [\"location\"], {});\n        expect(buildDisplayUrl(\"https://site.com\", pattern, notLoaded)).toBe(\n            \"https://site.com/new/climbing\"\n        );\n\n        const loaded = withRefValues(entry, [\"location\"], {\n            [location.id]: { slug: \"baker\", id: \"should-not-win\" }\n        });\n        expect(buildDisplayUrl(\"https://site.com\", pattern, loaded)).toBe(\n            \"https://site.com/baker/climbing\"\n        );\n        expect((loaded.values as any).location.id).toBe(location.id);\n    });\n\n    it(\"should support indexing into multiple-value ref fields\", () => {\n        const tag = { id: \"tag1#0001\", modelId: \"tag\" };\n        const entry = { values: { tags: [tag] } };\n        const resolved = withRefValues(entry, [\"tags\"], { [tag.id]: { slug: \"news\" } });\n        expect(resolveSlugPattern(\"/{values.tags.0.slug}\", resolved)).toBe(\"/news\");\n    });\n\n    it(\"should leave the entry untouched when there are no ref fields to fill in\", () => {\n        const entry = { values: { slug: \"x\", location } };\n        expect(withRefValues(entry, [], { [location.id]: { slug: \"baker\" } })).toBe(entry);\n    });\n});\n"],"names":["fields","location","describe","it","expect","resolveSlugPattern","buildEditorUrl","getPatternRefFieldIds","tag","getRefValues","entry","pattern","notLoaded","withRefValues","buildDisplayUrl","loaded","resolved"],"mappings":";;AAUA,MAAMA,SAAS;IACX;QAAE,SAAS;QAAQ,MAAM;IAAO;IAChC;QAAE,SAAS;QAAY,MAAM;IAAM;IACnC;QAAE,SAAS;QAAQ,MAAM;IAAM;CAClC;AAED,MAAMC,kCAAW;IAAE,IAAI;IAAa,SAAS;AAAW;AAExDC,SAAS,qBAAqB;IAC1BC,GAAG,uEAAuE;QACtEC,OAAOC,mBAAmB,2BAA2B;YAAE,QAAQ;gBAAE,MAAM;YAAQ;QAAE,IAAI,IAAI,CACrF;QAEJD,OAAOC,mBAAmB,2BAA2B;YAAE,QAAQ,CAAC;QAAE,IAAI,IAAI,CAAC;IAC/E;IAEAF,GAAG,2DAA2D;QAC1DC,OAAOE,eAAe,qBAAqB,4BAA4B,IAAI,CACvE;QAEJF,OAAOE,eAAe,oBAAoB,0CAA0C,IAAI,CACpF;IAER;IAEAH,GAAG,oDAAoD;QACnDC,OACIG,sBAAsB,uDAAuDP,SAC/E,OAAO,CAAC;YAAC;SAAW;QACtBI,OAAOG,sBAAsB,2BAA2BP,SAAS,OAAO,CAAC,EAAE;IAC/E;IAEAG,GAAG,mEAAmE;QAClE,MAAMK,MAAM;YAAE,IAAI;YAAa,SAAS;QAAM;QAC9CJ,OACIK,aAAa;YAAER,UAAAA;YAAU,MAAM;gBAACO;gBAAK;aAAK;YAAE,MAAM;QAAI,GAAG;YAAC;YAAY;SAAO,GAC/E,OAAO,CAAC;YAACP;YAAUO;SAAI;QACzBJ,OAAOK,aAAa;YAAE,UAAU;QAAK,GAAG;YAAC;SAAW,GAAG,OAAO,CAAC,EAAE;IACrE;IAEAN,GAAG,wEAAwE;QACvE,MAAMO,QAAQ;YAAE,IAAI;YAAc,QAAQ;gBAAE,MAAM;gBAAYT,UAAAA;YAAS;QAAE;QACzE,MAAMU,UAAU;QAEhB,MAAMC,YAAYC,cAAcH,OAAO;YAAC;SAAW,EAAE,CAAC;QACtDN,OAAOU,gBAAgB,oBAAoBH,SAASC,YAAY,IAAI,CAChE;QAGJ,MAAMG,SAASF,cAAcH,OAAO;YAAC;SAAW,EAAE;YAC9C,CAACT,gCAAS,EAAE,CAAC,EAAE;gBAAE,MAAM;gBAAS,IAAI;YAAiB;QACzD;QACAG,OAAOU,gBAAgB,oBAAoBH,SAASI,SAAS,IAAI,CAC7D;QAEJX,OAAQW,OAAO,MAAM,CAAS,QAAQ,CAAC,EAAE,EAAE,IAAI,CAACd,gCAAS,EAAE;IAC/D;IAEAE,GAAG,0DAA0D;QACzD,MAAMK,MAAM;YAAE,IAAI;YAAa,SAAS;QAAM;QAC9C,MAAME,QAAQ;YAAE,QAAQ;gBAAE,MAAM;oBAACF;iBAAI;YAAC;QAAE;QACxC,MAAMQ,WAAWH,cAAcH,OAAO;YAAC;SAAO,EAAE;YAAE,CAACF,IAAI,EAAE,CAAC,EAAE;gBAAE,MAAM;YAAO;QAAE;QAC7EJ,OAAOC,mBAAmB,yBAAyBW,WAAW,IAAI,CAAC;IACvE;IAEAb,GAAG,4EAA4E;QAC3E,MAAMO,QAAQ;YAAE,QAAQ;gBAAE,MAAM;gBAAKT,UAAAA;YAAS;QAAE;QAChDG,OAAOS,cAAcH,OAAO,EAAE,EAAE;YAAE,CAACT,gCAAS,EAAE,CAAC,EAAE;gBAAE,MAAM;YAAQ;QAAE,IAAI,IAAI,CAACS;IAChF;AACJ"}

package/presentation/contentEntries/views/ContentEntryFormView.js

@@ -28,6 +28,7 @@ const ContentEntryFormView = observer(()=>{
     const showWizard = hasWizard && null === vm.form;
     useEffect(()=>{
         if ("new" === entryId) {
+            formPresenter.setFolderId(listPresenter.folders.vm.currentFolderId);
             if (!newEntryWizard) formPresenter.newEntry();
         } else if (entryId) {
             formPresenter.loadRevision(entryId);

package/presentation/contentEntries/views/ContentEntryFormView.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/contentEntries/views/ContentEntryFormView.js","sources":["../../../../src/presentation/contentEntries/views/ContentEntryFormView.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { Helmet } from \"react-helmet\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature, useRouter } from \"@webiny/app\";\nimport { Buttons, useDialogs, useRoute } from \"@webiny/app-admin\";\nimport { HeaderBar, Heading, Icon, IconButton, OverlayLoader, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as BackIcon } from \"@webiny/icons/arrow_back.svg\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { useContentEntryEditorConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { Routes } from \"~/routes.js\";\nimport {\n    Container,\n    ScrollArea,\n    ContentEntryFormContent,\n    ContentEntryForm\n} from \"./layout/index.js\";\nimport { RevisionsListFeature } from \"../revisionsList/feature.js\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\nimport { useContentEntryFormPresenter } from \"~/presentation/contentEntries/form/useContentEntryFormPresenter.js\";\nimport { RevisionDrawer } from \"./RevisionDrawer.js\";\nimport { OlderRevisionAlert } from \"./OlderRevisionAlert.js\";\n\nexport const ContentEntryFormView = observer(() => {\n    const listPresenter = useContentEntriesPresenter();\n    const formPresenter = useContentEntryFormPresenter();\n    const { presenter: revisionsPresenter } = useFeature(RevisionsListFeature);\n    const { newEntryWizard, width } = useContentEntryEditorConfig();\n    const router = useRouter();\n    const dialogs = useDialogs();\n    const { route } = useRoute(Routes.ContentEntries.List);\n\n    const entryId = listPresenter.vm.selectedEntryId;\n    const { vm } = formPresenter;\n\n    const hasWizard = entryId === \"new\" && newEntryWizard !== null;\n    const showWizard = hasWizard && vm.form === null;\n\n    useEffect(() => {\n        if (entryId === \"new\") {\n            if (!newEntryWizard) {\n                formPresenter.newEntry();\n            }\n        } else if (entryId) {\n            formPresenter.loadRevision(entryId);\n            revisionsPresenter.init(entryId);\n        }\n\n        return () => {\n            formPresenter.reset();\n            revisionsPresenter.dispose();\n        };\n    }, [entryId]);\n\n    useEffect(() => {\n        return router.addTransitionGuard({\n            guard: () => formPresenter.vm.isDirty,\n            onBlocked: () => {\n                dialogs.showDialog({\n                    title: \"Confirm Navigation\",\n                    content:\n                        \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\",\n                    acceptLabel: \"Yes!\",\n                    cancelLabel: \"No, stay here.\",\n                    onAccept: () => {\n                        // We must reset the form to prevent the guard from kicking in again.\n                        formPresenter.reset();\n                        router.confirmTransition();\n                    },\n                    onClose: () => router.cancelTransition()\n                });\n            }\n        });\n    }, []);\n\n    const handleBack = () => {\n        const { modelId, folderId } = route.params;\n        router.goToRoute(Routes.ContentEntries.List, { modelId, folderId });\n    };\n\n    return (\n        <Container>\n            <Helmet title={vm.entry?.meta?.title || listPresenter.vm.model.name} />\n            <HeaderBar\n                start={\n                    <EntryFormHeaderLeft\n                        onBack={handleBack}\n                        title={vm.entry?.meta?.title || `New ${listPresenter.vm.model.name}`}\n                        isNewEntry={vm.isNewEntry}\n                        modelName={listPresenter.vm.model.name}\n                        status={vm.entry?.meta?.status ?? null}\n                    />\n                }\n                end={<EntryFormHeaderRight />}\n            />\n            <ScrollArea>\n                {vm.loading ? <OverlayLoader text={vm.loading} /> : null}\n                <OlderRevisionAlert />\n                {showWizard ? (\n                    newEntryWizard\n                ) : (\n                    <ContentEntryFormContent width={width}>\n                        <div className={\"bg-neutral-base rounded-lg p-lg\"}>\n                            <ContentEntryForm />\n                        </div>\n                    </ContentEntryFormContent>\n                )}\n            </ScrollArea>\n            <RevisionDrawer />\n        </Container>\n    );\n});\n\ninterface EntryFormHeaderLeftProps {\n    onBack: () => void;\n    title: string;\n    isNewEntry: boolean;\n    modelName: string;\n    status: string | null;\n}\n\nconst EntryFormHeaderLeft = ({\n    onBack,\n    title,\n    isNewEntry,\n    modelName,\n    status\n}: EntryFormHeaderLeftProps) => {\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <IconButton variant={\"ghost\"} onClick={onBack} icon={<BackIcon />} />\n            <Heading level={5} className={`text-neutral-primary${isNewEntry ? \" opacity-50\" : \"\"}`}>\n                {title}\n            </Heading>\n            <Tooltip\n                content={`Model: ${modelName}${status ? ` - Status: ${status}` : \"\"}`}\n                trigger={\n                    <Icon icon={<InfoIcon />} label={\"Info\"} size={\"sm\"} color={\"neutral-light\"} />\n                }\n            />\n        </div>\n    );\n};\n\nconst EntryFormHeaderRight = observer(() => {\n    const presenter = useContentEntryFormPresenter();\n    const { buttonActions } = useContentEntryEditorConfig();\n\n    const { canSave, canPublish, canUnpublish, canDelete } = presenter.vm;\n\n    if (!canSave && !canPublish && !canUnpublish && !canDelete) {\n        return <div />;\n    }\n\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <Buttons actions={buttonActions} />\n        </div>\n    );\n});\n"],"names":["ContentEntryFormView","observer","listPresenter","useContentEntriesPresenter","formPresenter","useContentEntryFormPresenter","revisionsPresenter","useFeature","RevisionsListFeature","newEntryWizard","width","useContentEntryEditorConfig","router","useRouter","dialogs","useDialogs","route","useRoute","Routes","entryId","vm","hasWizard","showWizard","useEffect","handleBack","modelId","folderId","Container","Helmet","HeaderBar","EntryFormHeaderLeft","EntryFormHeaderRight","ScrollArea","OverlayLoader","OlderRevisionAlert","ContentEntryFormContent","ContentEntryForm","RevisionDrawer","onBack","title","isNewEntry","modelName","status","IconButton","BackIcon","Heading","Tooltip","Icon","InfoIcon","presenter","buttonActions","canSave","canPublish","canUnpublish","canDelete","Buttons"],"mappings":";;;;;;;;;;;;;;;;AAsBO,MAAMA,uBAAuBC,SAAS;IACzC,MAAMC,gBAAgBC;IACtB,MAAMC,gBAAgBC;IACtB,MAAM,EAAE,WAAWC,kBAAkB,EAAE,GAAGC,WAAWC;IACrD,MAAM,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGC;IAClC,MAAMC,SAASC;IACf,MAAMC,UAAUC;IAChB,MAAM,EAAEC,KAAK,EAAE,GAAGC,SAASC,OAAO,cAAc,CAAC,IAAI;IAErD,MAAMC,UAAUjB,cAAc,EAAE,CAAC,eAAe;IAChD,MAAM,EAAEkB,EAAE,EAAE,GAAGhB;IAEf,MAAMiB,YAAYF,AAAY,UAAZA,WAAqBV,AAAmB,SAAnBA;IACvC,MAAMa,aAAaD,aAAaD,AAAY,SAAZA,GAAG,IAAI;IAEvCG,UAAU;QACN,IAAIJ,AAAY,UAAZA,SACA;YAAA,IAAI,CAACV,gBACDL,cAAc,QAAQ;QAC1B,OACG,IAAIe,SAAS;YAChBf,cAAc,YAAY,CAACe;YAC3Bb,mBAAmB,IAAI,CAACa;QAC5B;QAEA,OAAO;YACHf,cAAc,KAAK;YACnBE,mBAAmB,OAAO;QAC9B;IACJ,GAAG;QAACa;KAAQ;IAEZI,UAAU,IACCX,OAAO,kBAAkB,CAAC;YAC7B,OAAO,IAAMR,cAAc,EAAE,CAAC,OAAO;YACrC,WAAW;gBACPU,QAAQ,UAAU,CAAC;oBACf,OAAO;oBACP,SACI;oBACJ,aAAa;oBACb,aAAa;oBACb,UAAU;wBAENV,cAAc,KAAK;wBACnBQ,OAAO,iBAAiB;oBAC5B;oBACA,SAAS,IAAMA,OAAO,gBAAgB;gBAC1C;YACJ;QACJ,IACD,EAAE;IAEL,MAAMY,aAAa;QACf,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGV,MAAM,MAAM;QAC1CJ,OAAO,SAAS,CAACM,OAAO,cAAc,CAAC,IAAI,EAAE;YAAEO;YAASC;QAAS;IACrE;IAEA,OAAO,WAAP,GACI,oBAACC,WAASA,MAAAA,WAAAA,GACN,oBAACC,QAAMA;QAAC,OAAOR,GAAG,KAAK,EAAE,MAAM,SAASlB,cAAc,EAAE,CAAC,KAAK,CAAC,IAAI;sBACnE,oBAAC2B,WAASA;QACN,qBACI,oBAACC,qBAAmBA;YAChB,QAAQN;YACR,OAAOJ,GAAG,KAAK,EAAE,MAAM,SAAS,CAAC,IAAI,EAAElB,cAAc,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE;YACpE,YAAYkB,GAAG,UAAU;YACzB,WAAWlB,cAAc,EAAE,CAAC,KAAK,CAAC,IAAI;YACtC,QAAQkB,GAAG,KAAK,EAAE,MAAM,UAAU;;QAG1C,mBAAK,oBAACW,sBAAoBA;sBAE9B,oBAACC,YAAUA,MACNZ,GAAG,OAAO,GAAG,WAAH,GAAG,oBAACa,eAAaA;QAAC,MAAMb,GAAG,OAAO;SAAO,oBACpD,oBAACc,oBAAkBA,OAClBZ,aACGb,iBAAAA,WAAAA,GAEA,oBAAC0B,yBAAuBA;QAAC,OAAOzB;qBAC5B,oBAAC;QAAI,WAAW;qBACZ,oBAAC0B,kBAAgBA,UAAAA,WAAAA,GAKjC,oBAACC,gBAAcA;AAG3B;AAUA,MAAMP,sBAAsB,CAAC,EACzBQ,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,MAAM,EACiB,GAChB,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,YAAUA;QAAC,SAAS;QAAS,SAASL;QAAQ,oBAAM,oBAACM,gBAAQA;sBAC9D,oBAACC,SAAOA;QAAC,OAAO;QAAG,WAAW,CAAC,oBAAoB,EAAEL,aAAa,gBAAgB,IAAI;OACjFD,QAAAA,WAAAA,GAEL,oBAACO,SAAOA;QACJ,SAAS,CAAC,OAAO,EAAEL,YAAYC,SAAS,CAAC,WAAW,EAAEA,QAAQ,GAAG,IAAI;QACrE,uBACI,oBAACK,MAAIA;YAAC,oBAAM,oBAACC,yBAAQA;YAAK,OAAO;YAAQ,MAAM;YAAM,OAAO;;;AAOhF,MAAMjB,uBAAuB9B,SAAS;IAClC,MAAMgD,YAAY5C;IAClB,MAAM,EAAE6C,aAAa,EAAE,GAAGvC;IAE1B,MAAM,EAAEwC,OAAO,EAAEC,UAAU,EAAEC,YAAY,EAAEC,SAAS,EAAE,GAAGL,UAAU,EAAE;IAErE,IAAI,CAACE,WAAW,CAACC,cAAc,CAACC,gBAAgB,CAACC,WAC7C,OAAO,WAAP,GAAO,oBAAC;IAGZ,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,SAAOA;QAAC,SAASL;;AAG9B"}
+{"version":3,"file":"presentation/contentEntries/views/ContentEntryFormView.js","sources":["../../../../src/presentation/contentEntries/views/ContentEntryFormView.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { Helmet } from \"react-helmet\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature, useRouter } from \"@webiny/app\";\nimport { Buttons, useDialogs, useRoute } from \"@webiny/app-admin\";\nimport { HeaderBar, Heading, Icon, IconButton, OverlayLoader, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as BackIcon } from \"@webiny/icons/arrow_back.svg\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { useContentEntryEditorConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { Routes } from \"~/routes.js\";\nimport {\n    Container,\n    ScrollArea,\n    ContentEntryFormContent,\n    ContentEntryForm\n} from \"./layout/index.js\";\nimport { RevisionsListFeature } from \"../revisionsList/feature.js\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\nimport { useContentEntryFormPresenter } from \"~/presentation/contentEntries/form/useContentEntryFormPresenter.js\";\nimport { RevisionDrawer } from \"./RevisionDrawer.js\";\nimport { OlderRevisionAlert } from \"./OlderRevisionAlert.js\";\n\nexport const ContentEntryFormView = observer(() => {\n    const listPresenter = useContentEntriesPresenter();\n    const formPresenter = useContentEntryFormPresenter();\n    const { presenter: revisionsPresenter } = useFeature(RevisionsListFeature);\n    const { newEntryWizard, width } = useContentEntryEditorConfig();\n    const router = useRouter();\n    const dialogs = useDialogs();\n    const { route } = useRoute(Routes.ContentEntries.List);\n\n    const entryId = listPresenter.vm.selectedEntryId;\n    const { vm } = formPresenter;\n\n    const hasWizard = entryId === \"new\" && newEntryWizard !== null;\n    const showWizard = hasWizard && vm.form === null;\n\n    useEffect(() => {\n        if (entryId === \"new\") {\n            // Wizards start the entry later, so the folder is set for them too.\n            formPresenter.setFolderId(listPresenter.folders.vm.currentFolderId);\n            if (!newEntryWizard) {\n                formPresenter.newEntry();\n            }\n        } else if (entryId) {\n            formPresenter.loadRevision(entryId);\n            revisionsPresenter.init(entryId);\n        }\n\n        return () => {\n            formPresenter.reset();\n            revisionsPresenter.dispose();\n        };\n    }, [entryId]);\n\n    useEffect(() => {\n        return router.addTransitionGuard({\n            guard: () => formPresenter.vm.isDirty,\n            onBlocked: () => {\n                dialogs.showDialog({\n                    title: \"Confirm Navigation\",\n                    content:\n                        \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\",\n                    acceptLabel: \"Yes!\",\n                    cancelLabel: \"No, stay here.\",\n                    onAccept: () => {\n                        // We must reset the form to prevent the guard from kicking in again.\n                        formPresenter.reset();\n                        router.confirmTransition();\n                    },\n                    onClose: () => router.cancelTransition()\n                });\n            }\n        });\n    }, []);\n\n    const handleBack = () => {\n        const { modelId, folderId } = route.params;\n        router.goToRoute(Routes.ContentEntries.List, { modelId, folderId });\n    };\n\n    return (\n        <Container>\n            <Helmet title={vm.entry?.meta?.title || listPresenter.vm.model.name} />\n            <HeaderBar\n                start={\n                    <EntryFormHeaderLeft\n                        onBack={handleBack}\n                        title={vm.entry?.meta?.title || `New ${listPresenter.vm.model.name}`}\n                        isNewEntry={vm.isNewEntry}\n                        modelName={listPresenter.vm.model.name}\n                        status={vm.entry?.meta?.status ?? null}\n                    />\n                }\n                end={<EntryFormHeaderRight />}\n            />\n            <ScrollArea>\n                {vm.loading ? <OverlayLoader text={vm.loading} /> : null}\n                <OlderRevisionAlert />\n                {showWizard ? (\n                    newEntryWizard\n                ) : (\n                    <ContentEntryFormContent width={width}>\n                        <div className={\"bg-neutral-base rounded-lg p-lg\"}>\n                            <ContentEntryForm />\n                        </div>\n                    </ContentEntryFormContent>\n                )}\n            </ScrollArea>\n            <RevisionDrawer />\n        </Container>\n    );\n});\n\ninterface EntryFormHeaderLeftProps {\n    onBack: () => void;\n    title: string;\n    isNewEntry: boolean;\n    modelName: string;\n    status: string | null;\n}\n\nconst EntryFormHeaderLeft = ({\n    onBack,\n    title,\n    isNewEntry,\n    modelName,\n    status\n}: EntryFormHeaderLeftProps) => {\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <IconButton variant={\"ghost\"} onClick={onBack} icon={<BackIcon />} />\n            <Heading level={5} className={`text-neutral-primary${isNewEntry ? \" opacity-50\" : \"\"}`}>\n                {title}\n            </Heading>\n            <Tooltip\n                content={`Model: ${modelName}${status ? ` - Status: ${status}` : \"\"}`}\n                trigger={\n                    <Icon icon={<InfoIcon />} label={\"Info\"} size={\"sm\"} color={\"neutral-light\"} />\n                }\n            />\n        </div>\n    );\n};\n\nconst EntryFormHeaderRight = observer(() => {\n    const presenter = useContentEntryFormPresenter();\n    const { buttonActions } = useContentEntryEditorConfig();\n\n    const { canSave, canPublish, canUnpublish, canDelete } = presenter.vm;\n\n    if (!canSave && !canPublish && !canUnpublish && !canDelete) {\n        return <div />;\n    }\n\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <Buttons actions={buttonActions} />\n        </div>\n    );\n});\n"],"names":["ContentEntryFormView","observer","listPresenter","useContentEntriesPresenter","formPresenter","useContentEntryFormPresenter","revisionsPresenter","useFeature","RevisionsListFeature","newEntryWizard","width","useContentEntryEditorConfig","router","useRouter","dialogs","useDialogs","route","useRoute","Routes","entryId","vm","hasWizard","showWizard","useEffect","handleBack","modelId","folderId","Container","Helmet","HeaderBar","EntryFormHeaderLeft","EntryFormHeaderRight","ScrollArea","OverlayLoader","OlderRevisionAlert","ContentEntryFormContent","ContentEntryForm","RevisionDrawer","onBack","title","isNewEntry","modelName","status","IconButton","BackIcon","Heading","Tooltip","Icon","InfoIcon","presenter","buttonActions","canSave","canPublish","canUnpublish","canDelete","Buttons"],"mappings":"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"}

package/presentation/fieldRenderers/ref/CmsRefInputRenderer.js

@@ -39,6 +39,7 @@ const RefInputInner = observer(({ field })=>{
         value: vm.value,
         options: vm.options,
         validation: field.validation,
+        shouldFilter: false,
         onValueSearch: (query)=>presenter.search(query),
         onValueChange: (selectedEntryId)=>{
             if (!selectedEntryId) {

package/presentation/fieldRenderers/ref/CmsRefInputRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/fieldRenderers/ref/CmsRefInputRenderer.js","sources":["../../../../src/presentation/fieldRenderers/ref/CmsRefInputRenderer.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { createFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport type { IFieldVM } from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { AutoComplete } from \"@webiny/admin-ui\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport type { RefFieldRendererSettings } from \"./types.js\";\nimport { RefSingleAutocompletePresenterFeature } from \"./autocomplete/single/feature.js\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        refInput: { fieldType: \"ref\"; settings: RefFieldRendererSettings };\n    }\n}\n\nexport const CmsRefInputRenderer = createFieldRenderer<\"refInput\">(({ field }) => {\n    const parentContainer = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = parentContainer.createChildContainer();\n        RefSingleAutocompletePresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <RefInputInner field={field} />\n        </DiContainerProvider>\n    );\n});\n\ninterface InnerFieldProps {\n    field: IFieldVM & { rendererSettings: RefFieldRendererSettings };\n}\n\nconst RefInputInner = observer(({ field }: InnerFieldProps) => {\n    const { presenter } = useFeature(RefSingleAutocompletePresenterFeature);\n\n    const settings = field.rendererSettings;\n    const modelIds = (settings.models || []).map(m => m.modelId);\n    const value = field.value as CmsReferenceValue | null;\n\n    useEffect(() => {\n        presenter.init({ modelIds, value });\n    }, []);\n\n    const vm = presenter.vm;\n\n    return (\n        <AutoComplete\n            label={field.label}\n            description={field.description}\n            note={field.note}\n            hint={field.help}\n            disabled={field.disabled}\n            loading={vm.loading}\n            value={vm.value}\n            options={vm.options}\n            validation={field.validation}\n            onValueSearch={query => presenter.search(query)}\n            onValueChange={selectedEntryId => {\n                if (!selectedEntryId) {\n                    presenter.clear();\n                    field.onChange(null);\n                    return;\n                }\n                const ref = presenter.select(selectedEntryId);\n                if (ref) {\n                    field.onChange(ref);\n                }\n            }}\n            onValueReset={() => {\n                presenter.clear();\n                field.onChange(null);\n            }}\n            displayResetAction={vm.canReset}\n        />\n    );\n});\n"],"names":["CmsRefInputRenderer","createFieldRenderer","field","parentContainer","useContainer","scopedContainer","useMemo","child","RefSingleAutocompletePresenterFeature","DiContainerProvider","RefInputInner","observer","presenter","useFeature","settings","modelIds","m","value","useEffect","vm","AutoComplete","query","selectedEntryId","ref"],"mappings":";;;;;;AAgBO,MAAMA,sBAAsBC,oBAAgC,CAAC,EAAEC,KAAK,EAAE;IACzE,MAAMC,kBAAkBC;IAExB,MAAMC,kBAAkBC,QAAQ;QAC5B,MAAMC,QAAQJ,gBAAgB,oBAAoB;QAClDK,sCAAsC,QAAQ,CAACD;QAC/C,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACE,qBAAmBA;QAAC,WAAWJ;qBAC5B,oBAACK,eAAaA;QAAC,OAAOR;;AAGlC;AAMA,MAAMQ,gBAAgBC,SAAS,CAAC,EAAET,KAAK,EAAmB;IACtD,MAAM,EAAEU,SAAS,EAAE,GAAGC,WAAWL;IAEjC,MAAMM,WAAWZ,MAAM,gBAAgB;IACvC,MAAMa,WAAYD,AAAAA,CAAAA,SAAS,MAAM,IAAI,EAAC,EAAG,GAAG,CAACE,CAAAA,IAAKA,EAAE,OAAO;IAC3D,MAAMC,QAAQf,MAAM,KAAK;IAEzBgB,UAAU;QACNN,UAAU,IAAI,CAAC;YAAEG;YAAUE;QAAM;IACrC,GAAG,EAAE;IAEL,MAAME,KAAKP,UAAU,EAAE;IAEvB,OAAO,WAAP,GACI,oBAACQ,cAAYA;QACT,OAAOlB,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,SAASiB,GAAG,OAAO;QACnB,OAAOA,GAAG,KAAK;QACf,SAASA,GAAG,OAAO;QACnB,YAAYjB,MAAM,UAAU;QAC5B,eAAemB,CAAAA,QAAST,UAAU,MAAM,CAACS;QACzC,eAAeC,CAAAA;YACX,IAAI,CAACA,iBAAiB;gBAClBV,UAAU,KAAK;gBACfV,MAAM,QAAQ,CAAC;gBACf;YACJ;YACA,MAAMqB,MAAMX,UAAU,MAAM,CAACU;YAC7B,IAAIC,KACArB,MAAM,QAAQ,CAACqB;QAEvB;QACA,cAAc;YACVX,UAAU,KAAK;YACfV,MAAM,QAAQ,CAAC;QACnB;QACA,oBAAoBiB,GAAG,QAAQ;;AAG3C"}
+{"version":3,"file":"presentation/fieldRenderers/ref/CmsRefInputRenderer.js","sources":["../../../../src/presentation/fieldRenderers/ref/CmsRefInputRenderer.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { createFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport type { IFieldVM } from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { AutoComplete } from \"@webiny/admin-ui\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport type { RefFieldRendererSettings } from \"./types.js\";\nimport { RefSingleAutocompletePresenterFeature } from \"./autocomplete/single/feature.js\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        refInput: { fieldType: \"ref\"; settings: RefFieldRendererSettings };\n    }\n}\n\nexport const CmsRefInputRenderer = createFieldRenderer<\"refInput\">(({ field }) => {\n    const parentContainer = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = parentContainer.createChildContainer();\n        RefSingleAutocompletePresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <RefInputInner field={field} />\n        </DiContainerProvider>\n    );\n});\n\ninterface InnerFieldProps {\n    field: IFieldVM & { rendererSettings: RefFieldRendererSettings };\n}\n\nconst RefInputInner = observer(({ field }: InnerFieldProps) => {\n    const { presenter } = useFeature(RefSingleAutocompletePresenterFeature);\n\n    const settings = field.rendererSettings;\n    const modelIds = (settings.models || []).map(m => m.modelId);\n    const value = field.value as CmsReferenceValue | null;\n\n    useEffect(() => {\n        presenter.init({ modelIds, value });\n    }, []);\n\n    const vm = presenter.vm;\n\n    return (\n        <AutoComplete\n            label={field.label}\n            description={field.description}\n            note={field.note}\n            hint={field.help}\n            disabled={field.disabled}\n            loading={vm.loading}\n            value={vm.value}\n            options={vm.options}\n            validation={field.validation}\n            shouldFilter={false}\n            onValueSearch={query => presenter.search(query)}\n            onValueChange={selectedEntryId => {\n                if (!selectedEntryId) {\n                    presenter.clear();\n                    field.onChange(null);\n                    return;\n                }\n                const ref = presenter.select(selectedEntryId);\n                if (ref) {\n                    field.onChange(ref);\n                }\n            }}\n            onValueReset={() => {\n                presenter.clear();\n                field.onChange(null);\n            }}\n            displayResetAction={vm.canReset}\n        />\n    );\n});\n"],"names":["CmsRefInputRenderer","createFieldRenderer","field","parentContainer","useContainer","scopedContainer","useMemo","child","RefSingleAutocompletePresenterFeature","DiContainerProvider","RefInputInner","observer","presenter","useFeature","settings","modelIds","m","value","useEffect","vm","AutoComplete","query","selectedEntryId","ref"],"mappings":";;;;;;AAgBO,MAAMA,sBAAsBC,oBAAgC,CAAC,EAAEC,KAAK,EAAE;IACzE,MAAMC,kBAAkBC;IAExB,MAAMC,kBAAkBC,QAAQ;QAC5B,MAAMC,QAAQJ,gBAAgB,oBAAoB;QAClDK,sCAAsC,QAAQ,CAACD;QAC/C,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACE,qBAAmBA;QAAC,WAAWJ;qBAC5B,oBAACK,eAAaA;QAAC,OAAOR;;AAGlC;AAMA,MAAMQ,gBAAgBC,SAAS,CAAC,EAAET,KAAK,EAAmB;IACtD,MAAM,EAAEU,SAAS,EAAE,GAAGC,WAAWL;IAEjC,MAAMM,WAAWZ,MAAM,gBAAgB;IACvC,MAAMa,WAAYD,AAAAA,CAAAA,SAAS,MAAM,IAAI,EAAC,EAAG,GAAG,CAACE,CAAAA,IAAKA,EAAE,OAAO;IAC3D,MAAMC,QAAQf,MAAM,KAAK;IAEzBgB,UAAU;QACNN,UAAU,IAAI,CAAC;YAAEG;YAAUE;QAAM;IACrC,GAAG,EAAE;IAEL,MAAME,KAAKP,UAAU,EAAE;IAEvB,OAAO,WAAP,GACI,oBAACQ,cAAYA;QACT,OAAOlB,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,SAASiB,GAAG,OAAO;QACnB,OAAOA,GAAG,KAAK;QACf,SAASA,GAAG,OAAO;QACnB,YAAYjB,MAAM,UAAU;QAC5B,cAAc;QACd,eAAemB,CAAAA,QAAST,UAAU,MAAM,CAACS;QACzC,eAAeC,CAAAA;YACX,IAAI,CAACA,iBAAiB;gBAClBV,UAAU,KAAK;gBACfV,MAAM,QAAQ,CAAC;gBACf;YACJ;YACA,MAAMqB,MAAMX,UAAU,MAAM,CAACU;YAC7B,IAAIC,KACArB,MAAM,QAAQ,CAACqB;QAEvB;QACA,cAAc;YACVX,UAAU,KAAK;YACfV,MAAM,QAAQ,CAAC;QACnB;QACA,oBAAoBiB,GAAG,QAAQ;;AAG3C"}

package/presentation/fieldRenderers/ref/CmsRefInputsRenderer.js

@@ -40,6 +40,7 @@ const RefInputsInner = observer(({ field })=>{
         options: vm.options,
         uniqueValues: true,
         validation: field.validation,
+        shouldFilter: false,
         onValueSearch: (query)=>presenter.search(query),
         onValuesChange: (entryIds)=>{
             const refs = presenter.select(entryIds);

package/presentation/fieldRenderers/ref/CmsRefInputsRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/fieldRenderers/ref/CmsRefInputsRenderer.js","sources":["../../../../src/presentation/fieldRenderers/ref/CmsRefInputsRenderer.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { createFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport type { IFieldVM } from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { MultiAutoComplete } from \"@webiny/admin-ui\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport type { RefFieldRendererSettings } from \"./types.js\";\nimport { RefMultiAutocompletePresenterFeature } from \"./autocomplete/multi/feature.js\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        refInputs: { fieldType: \"ref\"; settings: RefFieldRendererSettings };\n    }\n}\n\nexport const CmsRefInputsRenderer = createFieldRenderer<\"refInputs\">(({ field }) => {\n    const parentContainer = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = parentContainer.createChildContainer();\n        RefMultiAutocompletePresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <RefInputsInner field={field} />\n        </DiContainerProvider>\n    );\n});\n\ninterface InnerFieldProps {\n    field: IFieldVM & { rendererSettings: RefFieldRendererSettings };\n}\n\nconst RefInputsInner = observer(({ field }: InnerFieldProps) => {\n    const { presenter } = useFeature(RefMultiAutocompletePresenterFeature);\n\n    const settings = field.rendererSettings;\n    const modelIds = (settings.models || []).map(m => m.modelId);\n    const values: CmsReferenceValue[] = Array.isArray(field.value) ? field.value : [];\n\n    useEffect(() => {\n        presenter.init({ modelIds, values });\n    }, []);\n\n    const vm = presenter.vm;\n\n    return (\n        <MultiAutoComplete\n            label={field.label}\n            description={field.description}\n            note={field.note}\n            hint={field.help}\n            disabled={field.disabled}\n            loading={vm.loading}\n            values={vm.values}\n            options={vm.options}\n            uniqueValues\n            validation={field.validation}\n            onValueSearch={query => presenter.search(query)}\n            onValuesChange={entryIds => {\n                const refs = presenter.select(entryIds);\n                field.onChange(refs.length > 0 ? refs : null);\n            }}\n            onValuesReset={() => {\n                presenter.clear();\n                field.onChange(null);\n            }}\n        />\n    );\n});\n"],"names":["CmsRefInputsRenderer","createFieldRenderer","field","parentContainer","useContainer","scopedContainer","useMemo","child","RefMultiAutocompletePresenterFeature","DiContainerProvider","RefInputsInner","observer","presenter","useFeature","settings","modelIds","m","values","Array","useEffect","vm","MultiAutoComplete","query","entryIds","refs"],"mappings":";;;;;;AAgBO,MAAMA,uBAAuBC,oBAAiC,CAAC,EAAEC,KAAK,EAAE;IAC3E,MAAMC,kBAAkBC;IAExB,MAAMC,kBAAkBC,QAAQ;QAC5B,MAAMC,QAAQJ,gBAAgB,oBAAoB;QAClDK,qCAAqC,QAAQ,CAACD;QAC9C,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACE,qBAAmBA;QAAC,WAAWJ;qBAC5B,oBAACK,gBAAcA;QAAC,OAAOR;;AAGnC;AAMA,MAAMQ,iBAAiBC,SAAS,CAAC,EAAET,KAAK,EAAmB;IACvD,MAAM,EAAEU,SAAS,EAAE,GAAGC,WAAWL;IAEjC,MAAMM,WAAWZ,MAAM,gBAAgB;IACvC,MAAMa,WAAYD,AAAAA,CAAAA,SAAS,MAAM,IAAI,EAAC,EAAG,GAAG,CAACE,CAAAA,IAAKA,EAAE,OAAO;IAC3D,MAAMC,SAA8BC,MAAM,OAAO,CAAChB,MAAM,KAAK,IAAIA,MAAM,KAAK,GAAG,EAAE;IAEjFiB,UAAU;QACNP,UAAU,IAAI,CAAC;YAAEG;YAAUE;QAAO;IACtC,GAAG,EAAE;IAEL,MAAMG,KAAKR,UAAU,EAAE;IAEvB,OAAO,WAAP,GACI,oBAACS,mBAAiBA;QACd,OAAOnB,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,SAASkB,GAAG,OAAO;QACnB,QAAQA,GAAG,MAAM;QACjB,SAASA,GAAG,OAAO;QACnB;QACA,YAAYlB,MAAM,UAAU;QAC5B,eAAeoB,CAAAA,QAASV,UAAU,MAAM,CAACU;QACzC,gBAAgBC,CAAAA;YACZ,MAAMC,OAAOZ,UAAU,MAAM,CAACW;YAC9BrB,MAAM,QAAQ,CAACsB,KAAK,MAAM,GAAG,IAAIA,OAAO;QAC5C;QACA,eAAe;YACXZ,UAAU,KAAK;YACfV,MAAM,QAAQ,CAAC;QACnB;;AAGZ"}
+{"version":3,"file":"presentation/fieldRenderers/ref/CmsRefInputsRenderer.js","sources":["../../../../src/presentation/fieldRenderers/ref/CmsRefInputsRenderer.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { createFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport type { IFieldVM } from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { MultiAutoComplete } from \"@webiny/admin-ui\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport type { RefFieldRendererSettings } from \"./types.js\";\nimport { RefMultiAutocompletePresenterFeature } from \"./autocomplete/multi/feature.js\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        refInputs: { fieldType: \"ref\"; settings: RefFieldRendererSettings };\n    }\n}\n\nexport const CmsRefInputsRenderer = createFieldRenderer<\"refInputs\">(({ field }) => {\n    const parentContainer = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = parentContainer.createChildContainer();\n        RefMultiAutocompletePresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <RefInputsInner field={field} />\n        </DiContainerProvider>\n    );\n});\n\ninterface InnerFieldProps {\n    field: IFieldVM & { rendererSettings: RefFieldRendererSettings };\n}\n\nconst RefInputsInner = observer(({ field }: InnerFieldProps) => {\n    const { presenter } = useFeature(RefMultiAutocompletePresenterFeature);\n\n    const settings = field.rendererSettings;\n    const modelIds = (settings.models || []).map(m => m.modelId);\n    const values: CmsReferenceValue[] = Array.isArray(field.value) ? field.value : [];\n\n    useEffect(() => {\n        presenter.init({ modelIds, values });\n    }, []);\n\n    const vm = presenter.vm;\n\n    return (\n        <MultiAutoComplete\n            label={field.label}\n            description={field.description}\n            note={field.note}\n            hint={field.help}\n            disabled={field.disabled}\n            loading={vm.loading}\n            values={vm.values}\n            options={vm.options}\n            uniqueValues\n            validation={field.validation}\n            shouldFilter={false}\n            onValueSearch={query => presenter.search(query)}\n            onValuesChange={entryIds => {\n                const refs = presenter.select(entryIds);\n                field.onChange(refs.length > 0 ? refs : null);\n            }}\n            onValuesReset={() => {\n                presenter.clear();\n                field.onChange(null);\n            }}\n        />\n    );\n});\n"],"names":["CmsRefInputsRenderer","createFieldRenderer","field","parentContainer","useContainer","scopedContainer","useMemo","child","RefMultiAutocompletePresenterFeature","DiContainerProvider","RefInputsInner","observer","presenter","useFeature","settings","modelIds","m","values","Array","useEffect","vm","MultiAutoComplete","query","entryIds","refs"],"mappings":";;;;;;AAgBO,MAAMA,uBAAuBC,oBAAiC,CAAC,EAAEC,KAAK,EAAE;IAC3E,MAAMC,kBAAkBC;IAExB,MAAMC,kBAAkBC,QAAQ;QAC5B,MAAMC,QAAQJ,gBAAgB,oBAAoB;QAClDK,qCAAqC,QAAQ,CAACD;QAC9C,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACE,qBAAmBA;QAAC,WAAWJ;qBAC5B,oBAACK,gBAAcA;QAAC,OAAOR;;AAGnC;AAMA,MAAMQ,iBAAiBC,SAAS,CAAC,EAAET,KAAK,EAAmB;IACvD,MAAM,EAAEU,SAAS,EAAE,GAAGC,WAAWL;IAEjC,MAAMM,WAAWZ,MAAM,gBAAgB;IACvC,MAAMa,WAAYD,AAAAA,CAAAA,SAAS,MAAM,IAAI,EAAC,EAAG,GAAG,CAACE,CAAAA,IAAKA,EAAE,OAAO;IAC3D,MAAMC,SAA8BC,MAAM,OAAO,CAAChB,MAAM,KAAK,IAAIA,MAAM,KAAK,GAAG,EAAE;IAEjFiB,UAAU;QACNP,UAAU,IAAI,CAAC;YAAEG;YAAUE;QAAO;IACtC,GAAG,EAAE;IAEL,MAAMG,KAAKR,UAAU,EAAE;IAEvB,OAAO,WAAP,GACI,oBAACS,mBAAiBA;QACd,OAAOnB,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,SAASkB,GAAG,OAAO;QACnB,QAAQA,GAAG,MAAM;QACjB,SAASA,GAAG,OAAO;QACnB;QACA,YAAYlB,MAAM,UAAU;QAC5B,cAAc;QACd,eAAeoB,CAAAA,QAASV,UAAU,MAAM,CAACU;QACzC,gBAAgBC,CAAAA;YACZ,MAAMC,OAAOZ,UAAU,MAAM,CAACW;YAC9BrB,MAAM,QAAQ,CAACsB,KAAK,MAAM,GAAG,IAAIA,OAAO;QAC5C;QACA,eAAe;YACXZ,UAAU,KAAK;YACfV,MAAM,QAAQ,CAAC;QACnB;;AAGZ"}

package/presentation/fieldRenderers/ref/autocomplete/BaseAutocompletePresenter.d.ts

@@ -9,6 +9,7 @@ export declare class BaseAutocompletePresenter {
     searchOptions: IRefEntryOption[];
     modelIds: string[];
     searchQuery: string;
+    private lastSearchId;
     constructor(searchUseCase: SearchContentEntriesUseCase.Interface, getEntriesUseCase: GetContentEntriesUseCase.Interface);
     get activeOptions(): IRefEntryOption[];
     search(query: string): Promise<void>;

package/presentation/fieldRenderers/ref/autocomplete/BaseAutocompletePresenter.js

@@ -9,18 +9,22 @@ class BaseAutocompletePresenter {
         this.searchOptions = [];
         this.modelIds = [];
         this.searchQuery = "";
+        this.lastSearchId = 0;
         makeAutoObservable(this, {
             searchUseCase: false,
-            getEntriesUseCase: false
+            getEntriesUseCase: false,
+            lastSearchId: false
         });
     }
     get activeOptions() {
         return this.searchQuery ? this.searchOptions : this.defaultOptions;
     }
     async search(query) {
+        const searchId = ++this.lastSearchId;
         this.searchQuery = query;
         if (!query) {
             this.searchOptions = [];
+            this.loading = false;
             return;
         }
         this.loading = true;
@@ -30,11 +34,12 @@ class BaseAutocompletePresenter {
                 query,
                 limit: 10
             });
+            if (searchId !== this.lastSearchId) return;
             runInAction(()=>{
                 this.searchOptions = result.data.map(toOption);
             });
         } finally{
-            runInAction(()=>{
+            if (searchId === this.lastSearchId) runInAction(()=>{
                 this.loading = false;
             });
         }
@@ -77,6 +82,7 @@ class BaseAutocompletePresenter {
         }
     }
     clearSearch() {
+        this.lastSearchId++;
         this.searchQuery = "";
         this.searchOptions = [];
     }

package/presentation/fieldRenderers/ref/autocomplete/BaseAutocompletePresenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/fieldRenderers/ref/autocomplete/BaseAutocompletePresenter.js","sources":["../../../../../src/presentation/fieldRenderers/ref/autocomplete/BaseAutocompletePresenter.ts"],"sourcesContent":["import { makeAutoObservable, runInAction } from \"mobx\";\nimport type { SearchContentEntriesUseCase } from \"~/features/contentEntry/searchContentEntries/abstractions.js\";\nimport type { GetContentEntriesUseCase } from \"~/features/contentEntry/getContentEntries/abstractions.js\";\nimport type { IRefEntryOption } from \"./abstractions.js\";\nimport { toOption } from \"./toOption.js\";\n\nexport class BaseAutocompletePresenter {\n    loading = false;\n    defaultOptions: IRefEntryOption[] = [];\n    searchOptions: IRefEntryOption[] = [];\n    modelIds: string[] = [];\n    searchQuery = \"\";\n\n    constructor(\n        private searchUseCase: SearchContentEntriesUseCase.Interface,\n        private getEntriesUseCase: GetContentEntriesUseCase.Interface\n    ) {\n        makeAutoObservable<BaseAutocompletePresenter, \"searchUseCase\" | \"getEntriesUseCase\">(this, {\n            searchUseCase: false,\n            getEntriesUseCase: false\n        });\n    }\n\n    get activeOptions(): IRefEntryOption[] {\n        return this.searchQuery ? this.searchOptions : this.defaultOptions;\n    }\n\n    async search(query: string): Promise<void> {\n        this.searchQuery = query;\n        if (!query) {\n            this.searchOptions = [];\n            return;\n        }\n\n        this.loading = true;\n        try {\n            const result = await this.searchUseCase.execute({\n                modelIds: this.modelIds,\n                query,\n                limit: 10\n            });\n            runInAction(() => {\n                this.searchOptions = result.data.map(toOption);\n            });\n        } finally {\n            runInAction(() => {\n                this.loading = false;\n            });\n        }\n    }\n\n    async loadDefaults(): Promise<void> {\n        this.loading = true;\n        try {\n            const result = await this.searchUseCase.execute({\n                modelIds: this.modelIds,\n                limit: 10\n            });\n            runInAction(() => {\n                this.defaultOptions = result.data.map(toOption);\n            });\n        } finally {\n            runInAction(() => {\n                this.loading = false;\n            });\n        }\n    }\n\n    async resolveEntries(values: { id: string; modelId: string }[]): Promise<IRefEntryOption[]> {\n        this.loading = true;\n        try {\n            const result = await this.getEntriesUseCase.execute({\n                entries: values.map(v => ({ id: v.id, modelId: v.modelId }))\n            });\n            const options = result.latest.map(toOption);\n            runInAction(() => {\n                this.loading = false;\n            });\n            return options;\n        } catch (e) {\n            runInAction(() => {\n                this.loading = false;\n            });\n            throw e;\n        }\n    }\n\n    clearSearch(): void {\n        this.searchQuery = \"\";\n        this.searchOptions = [];\n    }\n}\n"],"names":["BaseAutocompletePresenter","searchUseCase","getEntriesUseCase","makeAutoObservable","query","result","runInAction","toOption","values","v","options","e"],"mappings":";;AAMO,MAAMA;IAOT,YACYC,aAAoD,EACpDC,iBAAqD,CAC/D;aAFUD,aAAa,GAAbA;aACAC,iBAAiB,GAAjBA;aARZ,OAAO,GAAG;aACV,cAAc,GAAsB,EAAE;aACtC,aAAa,GAAsB,EAAE;aACrC,QAAQ,GAAa,EAAE;aACvB,WAAW,GAAG;QAMVC,mBAAqF,IAAI,EAAE;YACvF,eAAe;YACf,mBAAmB;QACvB;IACJ;IAEA,IAAI,gBAAmC;QACnC,OAAO,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc;IACtE;IAEA,MAAM,OAAOC,KAAa,EAAiB;QACvC,IAAI,CAAC,WAAW,GAAGA;QACnB,IAAI,CAACA,OAAO;YACR,IAAI,CAAC,aAAa,GAAG,EAAE;YACvB;QACJ;QAEA,IAAI,CAAC,OAAO,GAAG;QACf,IAAI;YACA,MAAMC,SAAS,MAAM,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;gBAC5C,UAAU,IAAI,CAAC,QAAQ;gBACvBD;gBACA,OAAO;YACX;YACAE,YAAY;gBACR,IAAI,CAAC,aAAa,GAAGD,OAAO,IAAI,CAAC,GAAG,CAACE;YACzC;QACJ,SAAU;YACND,YAAY;gBACR,IAAI,CAAC,OAAO,GAAG;YACnB;QACJ;IACJ;IAEA,MAAM,eAA8B;QAChC,IAAI,CAAC,OAAO,GAAG;QACf,IAAI;YACA,MAAMD,SAAS,MAAM,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;gBAC5C,UAAU,IAAI,CAAC,QAAQ;gBACvB,OAAO;YACX;YACAC,YAAY;gBACR,IAAI,CAAC,cAAc,GAAGD,OAAO,IAAI,CAAC,GAAG,CAACE;YAC1C;QACJ,SAAU;YACND,YAAY;gBACR,IAAI,CAAC,OAAO,GAAG;YACnB;QACJ;IACJ;IAEA,MAAM,eAAeE,MAAyC,EAA8B;QACxF,IAAI,CAAC,OAAO,GAAG;QACf,IAAI;YACA,MAAMH,SAAS,MAAM,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC;gBAChD,SAASG,OAAO,GAAG,CAACC,CAAAA,IAAM;wBAAE,IAAIA,EAAE,EAAE;wBAAE,SAASA,EAAE,OAAO;oBAAC;YAC7D;YACA,MAAMC,UAAUL,OAAO,MAAM,CAAC,GAAG,CAACE;YAClCD,YAAY;gBACR,IAAI,CAAC,OAAO,GAAG;YACnB;YACA,OAAOI;QACX,EAAE,OAAOC,GAAG;YACRL,YAAY;gBACR,IAAI,CAAC,OAAO,GAAG;YACnB;YACA,MAAMK;QACV;IACJ;IAEA,cAAoB;QAChB,IAAI,CAAC,WAAW,GAAG;QACnB,IAAI,CAAC,aAAa,GAAG,EAAE;IAC3B;AACJ"}
+{"version":3,"file":"presentation/fieldRenderers/ref/autocomplete/BaseAutocompletePresenter.js","sources":["../../../../../src/presentation/fieldRenderers/ref/autocomplete/BaseAutocompletePresenter.ts"],"sourcesContent":["import { makeAutoObservable, runInAction } from \"mobx\";\nimport type { SearchContentEntriesUseCase } from \"~/features/contentEntry/searchContentEntries/abstractions.js\";\nimport type { GetContentEntriesUseCase } from \"~/features/contentEntry/getContentEntries/abstractions.js\";\nimport type { IRefEntryOption } from \"./abstractions.js\";\nimport { toOption } from \"./toOption.js\";\n\nexport class BaseAutocompletePresenter {\n    loading = false;\n    defaultOptions: IRefEntryOption[] = [];\n    searchOptions: IRefEntryOption[] = [];\n    modelIds: string[] = [];\n    searchQuery = \"\";\n    private lastSearchId = 0;\n\n    constructor(\n        private searchUseCase: SearchContentEntriesUseCase.Interface,\n        private getEntriesUseCase: GetContentEntriesUseCase.Interface\n    ) {\n        makeAutoObservable<\n            BaseAutocompletePresenter,\n            \"searchUseCase\" | \"getEntriesUseCase\" | \"lastSearchId\"\n        >(this, {\n            searchUseCase: false,\n            getEntriesUseCase: false,\n            lastSearchId: false\n        });\n    }\n\n    get activeOptions(): IRefEntryOption[] {\n        return this.searchQuery ? this.searchOptions : this.defaultOptions;\n    }\n\n    async search(query: string): Promise<void> {\n        // Every keystroke starts a search, and responses can arrive out of order.\n        // Only the latest search may write its results, or an older, shorter query overwrites them.\n        const searchId = ++this.lastSearchId;\n        this.searchQuery = query;\n        if (!query) {\n            this.searchOptions = [];\n            this.loading = false;\n            return;\n        }\n\n        this.loading = true;\n        try {\n            const result = await this.searchUseCase.execute({\n                modelIds: this.modelIds,\n                query,\n                limit: 10\n            });\n            if (searchId !== this.lastSearchId) {\n                return;\n            }\n            runInAction(() => {\n                this.searchOptions = result.data.map(toOption);\n            });\n        } finally {\n            if (searchId === this.lastSearchId) {\n                runInAction(() => {\n                    this.loading = false;\n                });\n            }\n        }\n    }\n\n    async loadDefaults(): Promise<void> {\n        this.loading = true;\n        try {\n            const result = await this.searchUseCase.execute({\n                modelIds: this.modelIds,\n                limit: 10\n            });\n            runInAction(() => {\n                this.defaultOptions = result.data.map(toOption);\n            });\n        } finally {\n            runInAction(() => {\n                this.loading = false;\n            });\n        }\n    }\n\n    async resolveEntries(values: { id: string; modelId: string }[]): Promise<IRefEntryOption[]> {\n        this.loading = true;\n        try {\n            const result = await this.getEntriesUseCase.execute({\n                entries: values.map(v => ({ id: v.id, modelId: v.modelId }))\n            });\n            const options = result.latest.map(toOption);\n            runInAction(() => {\n                this.loading = false;\n            });\n            return options;\n        } catch (e) {\n            runInAction(() => {\n                this.loading = false;\n            });\n            throw e;\n        }\n    }\n\n    clearSearch(): void {\n        this.lastSearchId++;\n        this.searchQuery = \"\";\n        this.searchOptions = [];\n    }\n}\n"],"names":["BaseAutocompletePresenter","searchUseCase","getEntriesUseCase","makeAutoObservable","query","searchId","result","runInAction","toOption","values","v","options","e"],"mappings":";;AAMO,MAAMA;IAQT,YACYC,aAAoD,EACpDC,iBAAqD,CAC/D;aAFUD,aAAa,GAAbA;aACAC,iBAAiB,GAAjBA;aATZ,OAAO,GAAG;aACV,cAAc,GAAsB,EAAE;aACtC,aAAa,GAAsB,EAAE;aACrC,QAAQ,GAAa,EAAE;aACvB,WAAW,GAAG;aACN,YAAY,GAAG;QAMnBC,mBAGE,IAAI,EAAE;YACJ,eAAe;YACf,mBAAmB;YACnB,cAAc;QAClB;IACJ;IAEA,IAAI,gBAAmC;QACnC,OAAO,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc;IACtE;IAEA,MAAM,OAAOC,KAAa,EAAiB;QAGvC,MAAMC,WAAW,EAAE,IAAI,CAAC,YAAY;QACpC,IAAI,CAAC,WAAW,GAAGD;QACnB,IAAI,CAACA,OAAO;YACR,IAAI,CAAC,aAAa,GAAG,EAAE;YACvB,IAAI,CAAC,OAAO,GAAG;YACf;QACJ;QAEA,IAAI,CAAC,OAAO,GAAG;QACf,IAAI;YACA,MAAME,SAAS,MAAM,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;gBAC5C,UAAU,IAAI,CAAC,QAAQ;gBACvBF;gBACA,OAAO;YACX;YACA,IAAIC,aAAa,IAAI,CAAC,YAAY,EAC9B;YAEJE,YAAY;gBACR,IAAI,CAAC,aAAa,GAAGD,OAAO,IAAI,CAAC,GAAG,CAACE;YACzC;QACJ,SAAU;YACN,IAAIH,aAAa,IAAI,CAAC,YAAY,EAC9BE,YAAY;gBACR,IAAI,CAAC,OAAO,GAAG;YACnB;QAER;IACJ;IAEA,MAAM,eAA8B;QAChC,IAAI,CAAC,OAAO,GAAG;QACf,IAAI;YACA,MAAMD,SAAS,MAAM,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;gBAC5C,UAAU,IAAI,CAAC,QAAQ;gBACvB,OAAO;YACX;YACAC,YAAY;gBACR,IAAI,CAAC,cAAc,GAAGD,OAAO,IAAI,CAAC,GAAG,CAACE;YAC1C;QACJ,SAAU;YACND,YAAY;gBACR,IAAI,CAAC,OAAO,GAAG;YACnB;QACJ;IACJ;IAEA,MAAM,eAAeE,MAAyC,EAA8B;QACxF,IAAI,CAAC,OAAO,GAAG;QACf,IAAI;YACA,MAAMH,SAAS,MAAM,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC;gBAChD,SAASG,OAAO,GAAG,CAACC,CAAAA,IAAM;wBAAE,IAAIA,EAAE,EAAE;wBAAE,SAASA,EAAE,OAAO;oBAAC;YAC7D;YACA,MAAMC,UAAUL,OAAO,MAAM,CAAC,GAAG,CAACE;YAClCD,YAAY;gBACR,IAAI,CAAC,OAAO,GAAG;YACnB;YACA,OAAOI;QACX,EAAE,OAAOC,GAAG;YACRL,YAAY;gBACR,IAAI,CAAC,OAAO,GAAG;YACnB;YACA,MAAMK;QACV;IACJ;IAEA,cAAoB;QAChB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,WAAW,GAAG;QACnB,IAAI,CAAC,aAAa,GAAG,EAAE;IAC3B;AACJ"}

package/presentation/fieldRenderers/ref/autocomplete/RefAutocompletePresenters.test.d.ts

@@ -0,0 +1 @@
+export {};