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

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

@@ -1 +1 @@
-{"version":3,"file":"presentation/contentEntries/preview/PreviewDecorator.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewDecorator.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { createReactiveComponent } from \"@webiny/app-admin\";\nimport {\n    SplitView,\n    LeftPanel,\n    RightPanel\n} from \"@webiny/app-admin/components/SplitView/SplitView.js\";\nimport { usePreviewDomain } from \"@webiny/frontend-settings/exports/admin.js\";\nimport { ContentEntryFormContent } from \"~/presentation/contentEntries/views/layout/ContentEntryFormContent.js\";\nimport { useContentEntryFormPresenter } from \"~/presentation/contentEntries/form/useContentEntryFormPresenter.js\";\nimport { PreviewPane } from \"./PreviewPane.js\";\nimport { useLivePreviewPresenter } from \"./useLivePreviewPresenter.js\";\nimport { getPatternRefFieldIds, getRefValues, withRefValues } from \"./resolvePreviewUrl.js\";\n\nexport const PreviewDecorator = ContentEntryFormContent.createDecorator(Original => {\n    return createReactiveComponent(\n        (props: React.HTMLAttributes<HTMLDivElement> & { width?: string }) => {\n            const presenter = useContentEntryFormPresenter();\n            const livePreview = useLivePreviewPresenter();\n            const model = presenter.vm.model;\n            const previewPath = model?.settings?.previewPath as string | undefined;\n            const { previewDomain } = usePreviewDomain();\n\n            const form = presenter.vm.form;\n            const entry = presenter.vm.entry;\n            const formValues = form ? (form.getData() as Record<string, unknown>) : null;\n            const entryData = formValues ? { ...entry, values: formValues } : null;\n\n            const refFieldIds =\n                previewPath && model ? getPatternRefFieldIds(previewPath, model.fields) : [];\n            const refs = formValues ? getRefValues(formValues, refFieldIds) : [];\n            const refsKey = refs.map(ref => ref.id).join(\",\");\n\n            useEffect(() => {\n                if (refs.length > 0) {\n                    livePreview.loadRefValues(refs);\n                }\n            }, [refsKey]);\n\n            if (!previewPath) {\n                return <Original {...props} />;\n            }\n\n            // Only the preview URL gets the referenced values; the iframe receives the raw form data.\n            const urlEntryData = entryData\n                ? withRefValues(entryData, refFieldIds, livePreview.vm.refValues)\n                : null;\n\n            const entryId = entry?.id || \"new\";\n\n            return (\n                <SplitView namespace={\"cms-live-preview\"} className=\"h-full\">\n                    <LeftPanel span={5} minSize={20} className=\"bg-white overflow-y-auto\">\n                        <Original\n                            {...props}\n                            width={\"100%\"}\n                            className={\"!pt-0 [&>div]:!rounded-none\"}\n                        />\n                    </LeftPanel>\n                    <RightPanel\n                        span={7}\n                        minSize={20}\n                        className=\"overflow-hidden p-md\"\n                        style={{ overflowY: \"hidden\" }}\n                    >\n                        <PreviewPane\n                            domain={previewDomain}\n                            previewPath={previewPath}\n                            entryId={entryId}\n                            entryData={entryData}\n                            urlEntryData={urlEntryData}\n                        />\n                    </RightPanel>\n                </SplitView>\n            );\n        }\n    );\n});\n"],"names":["PreviewDecorator","ContentEntryFormContent","Original","createReactiveComponent","props","presenter","useContentEntryFormPresenter","livePreview","useLivePreviewPresenter","model","previewPath","previewDomain","usePreviewDomain","form","entry","formValues","entryData","refFieldIds","getPatternRefFieldIds","refs","getRefValues","refsKey","ref","useEffect","urlEntryData","withRefValues","entryId","SplitView","LeftPanel","RightPanel","PreviewPane"],"mappings":";;;;;;;;;AAcO,MAAMA,mBAAmBC,wBAAwB,eAAe,CAACC,CAAAA,WAC7DC,wBACH,CAACC;QACG,MAAMC,YAAYC;QAClB,MAAMC,cAAcC;QACpB,MAAMC,QAAQJ,UAAU,EAAE,CAAC,KAAK;QAChC,MAAMK,cAAcD,OAAO,UAAU;QACrC,MAAM,EAAEE,aAAa,EAAE,GAAGC;QAE1B,MAAMC,OAAOR,UAAU,EAAE,CAAC,IAAI;QAC9B,MAAMS,QAAQT,UAAU,EAAE,CAAC,KAAK;QAChC,MAAMU,aAAaF,OAAQA,KAAK,OAAO,KAAiC;QACxE,MAAMG,YAAYD,aAAa;YAAE,GAAGD,KAAK;YAAE,QAAQC;QAAW,IAAI;QAElE,MAAME,cACFP,eAAeD,QAAQS,sBAAsBR,aAAaD,MAAM,MAAM,IAAI,EAAE;QAChF,MAAMU,OAAOJ,aAAaK,aAAaL,YAAYE,eAAe,EAAE;QACpE,MAAMI,UAAUF,KAAK,GAAG,CAACG,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;QAE7CC,UAAU;YACN,IAAIJ,KAAK,MAAM,GAAG,GACdZ,YAAY,aAAa,CAACY;QAElC,GAAG;YAACE;SAAQ;QAEZ,IAAI,CAACX,aACD,OAAO,WAAP,GAAO,oBAACR,UAAaE;QAIzB,MAAMoB,eAAeR,YACfS,cAAcT,WAAWC,aAAaV,YAAY,EAAE,CAAC,SAAS,IAC9D;QAEN,MAAMmB,UAAUZ,OAAO,MAAM;QAE7B,OAAO,WAAP,GACI,oBAACa,WAASA;YAAC,WAAW;YAAoB,WAAU;yBAChD,oBAACC,WAASA;YAAC,MAAM;YAAG,SAAS;YAAI,WAAU;yBACvC,oBAAC1B,UAAAA;YACI,GAAGE,KAAK;YACT,OAAO;YACP,WAAW;2BAGnB,oBAACyB,YAAUA;YACP,MAAM;YACN,SAAS;YACT,WAAU;YACV,OAAO;gBAAE,WAAW;YAAS;yBAE7B,oBAACC,aAAWA;YACR,QAAQnB;YACR,aAAaD;YACb,SAASgB;YACT,WAAWV;YACX,cAAcQ;;IAKlC"}
+{"version":3,"file":"presentation/contentEntries/preview/PreviewDecorator.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewDecorator.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { createReactiveComponent } from \"@webiny/app-admin\";\nimport {\n    SplitView,\n    LeftPanel,\n    RightPanel\n} from \"@webiny/app-admin/components/SplitView/SplitView.js\";\nimport { usePreviewDomain } from \"@webiny/frontend-settings/exports/admin.js\";\nimport { ContentEntryFormContent } from \"~/presentation/contentEntries/views/layout/ContentEntryFormContent.js\";\nimport { useContentEntryFormPresenter } from \"~/presentation/contentEntries/form/useContentEntryFormPresenter.js\";\nimport { PreviewPane } from \"./PreviewPane.js\";\nimport { PreviewDomainStatus } from \"./PreviewDomainStatus.js\";\nimport { useLivePreviewPresenter } from \"./useLivePreviewPresenter.js\";\nimport { getPatternRefFieldIds, getRefValues, withRefValues } from \"./resolvePreviewUrl.js\";\n\nexport const PreviewDecorator = ContentEntryFormContent.createDecorator(Original => {\n    return createReactiveComponent(\n        (props: React.HTMLAttributes<HTMLDivElement> & { width?: string }) => {\n            const presenter = useContentEntryFormPresenter();\n            const livePreview = useLivePreviewPresenter();\n            const model = presenter.vm.model;\n            const previewPath = model?.settings?.previewPath as string | undefined;\n            const domain = usePreviewDomain();\n\n            const form = presenter.vm.form;\n            const entry = presenter.vm.entry;\n            const formValues = form ? (form.getData() as Record<string, unknown>) : null;\n            const entryData = formValues ? { ...entry, values: formValues } : null;\n\n            const refFieldIds =\n                previewPath && model ? getPatternRefFieldIds(previewPath, model.fields) : [];\n            const refs = formValues ? getRefValues(formValues, refFieldIds) : [];\n            const refsKey = refs.map(ref => ref.id).join(\",\");\n\n            useEffect(() => {\n                if (refs.length > 0) {\n                    livePreview.loadRefValues(refs);\n                }\n            }, [refsKey]);\n\n            if (!previewPath) {\n                return <Original {...props} />;\n            }\n\n            // Only the preview URL gets the referenced values; the iframe receives the raw form data.\n            const urlEntryData = entryData\n                ? withRefValues(entryData, refFieldIds, livePreview.vm.refValues)\n                : null;\n\n            const entryId = entry?.id || \"new\";\n\n            return (\n                <SplitView namespace={\"cms-live-preview\"} className=\"h-full\">\n                    <LeftPanel span={5} minSize={20} className=\"bg-white overflow-y-auto\">\n                        <Original\n                            {...props}\n                            width={\"100%\"}\n                            className={\"!pt-0 [&>div]:!rounded-none\"}\n                        />\n                    </LeftPanel>\n                    <RightPanel\n                        span={7}\n                        minSize={20}\n                        className=\"overflow-hidden p-md\"\n                        style={{ overflowY: \"hidden\" }}\n                    >\n                        {domain.previewDomain ? (\n                            <PreviewPane\n                                domain={domain.previewDomain}\n                                settingsDomain={domain.isOverridden ? domain.settingsDomain : null}\n                                onResetDomain={domain.unsetPreviewDomain}\n                                previewPath={previewPath}\n                                entryId={entryId}\n                                entryData={entryData}\n                                urlEntryData={urlEntryData}\n                            />\n                        ) : (\n                            <PreviewDomainStatus error={domain.error} onRetry={domain.retry} />\n                        )}\n                    </RightPanel>\n                </SplitView>\n            );\n        }\n    );\n});\n"],"names":["PreviewDecorator","ContentEntryFormContent","Original","createReactiveComponent","props","presenter","useContentEntryFormPresenter","livePreview","useLivePreviewPresenter","model","previewPath","domain","usePreviewDomain","form","entry","formValues","entryData","refFieldIds","getPatternRefFieldIds","refs","getRefValues","refsKey","ref","useEffect","urlEntryData","withRefValues","entryId","SplitView","LeftPanel","RightPanel","PreviewPane","PreviewDomainStatus"],"mappings":";;;;;;;;;;AAeO,MAAMA,mBAAmBC,wBAAwB,eAAe,CAACC,CAAAA,WAC7DC,wBACH,CAACC;QACG,MAAMC,YAAYC;QAClB,MAAMC,cAAcC;QACpB,MAAMC,QAAQJ,UAAU,EAAE,CAAC,KAAK;QAChC,MAAMK,cAAcD,OAAO,UAAU;QACrC,MAAME,SAASC;QAEf,MAAMC,OAAOR,UAAU,EAAE,CAAC,IAAI;QAC9B,MAAMS,QAAQT,UAAU,EAAE,CAAC,KAAK;QAChC,MAAMU,aAAaF,OAAQA,KAAK,OAAO,KAAiC;QACxE,MAAMG,YAAYD,aAAa;YAAE,GAAGD,KAAK;YAAE,QAAQC;QAAW,IAAI;QAElE,MAAME,cACFP,eAAeD,QAAQS,sBAAsBR,aAAaD,MAAM,MAAM,IAAI,EAAE;QAChF,MAAMU,OAAOJ,aAAaK,aAAaL,YAAYE,eAAe,EAAE;QACpE,MAAMI,UAAUF,KAAK,GAAG,CAACG,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;QAE7CC,UAAU;YACN,IAAIJ,KAAK,MAAM,GAAG,GACdZ,YAAY,aAAa,CAACY;QAElC,GAAG;YAACE;SAAQ;QAEZ,IAAI,CAACX,aACD,OAAO,WAAP,GAAO,oBAACR,UAAaE;QAIzB,MAAMoB,eAAeR,YACfS,cAAcT,WAAWC,aAAaV,YAAY,EAAE,CAAC,SAAS,IAC9D;QAEN,MAAMmB,UAAUZ,OAAO,MAAM;QAE7B,OAAO,WAAP,GACI,oBAACa,WAASA;YAAC,WAAW;YAAoB,WAAU;yBAChD,oBAACC,WAASA;YAAC,MAAM;YAAG,SAAS;YAAI,WAAU;yBACvC,oBAAC1B,UAAAA;YACI,GAAGE,KAAK;YACT,OAAO;YACP,WAAW;2BAGnB,oBAACyB,YAAUA;YACP,MAAM;YACN,SAAS;YACT,WAAU;YACV,OAAO;gBAAE,WAAW;YAAS;WAE5BlB,OAAO,aAAa,GAAG,WAAH,GACjB,oBAACmB,aAAWA;YACR,QAAQnB,OAAO,aAAa;YAC5B,gBAAgBA,OAAO,YAAY,GAAGA,OAAO,cAAc,GAAG;YAC9D,eAAeA,OAAO,kBAAkB;YACxC,aAAaD;YACb,SAASgB;YACT,WAAWV;YACX,cAAcQ;2BAGlB,oBAACO,qBAAmBA;YAAC,OAAOpB,OAAO,KAAK;YAAE,SAASA,OAAO,KAAK;;IAKnF"}

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

@@ -0,0 +1,10 @@
+import React from "react";
+interface PreviewDomainStatusProps {
+    error: string | null;
+    onRetry: () => void;
+}
+/**
+ * Shown in place of the preview while the Frontend Domain setting loads, or when it fails to load.
+ */
+export declare const PreviewDomainStatus: ({ error, onRetry }: PreviewDomainStatusProps) => React.JSX.Element;
+export {};

package/presentation/contentEntries/preview/PreviewDomainStatus.js

@@ -0,0 +1,19 @@
+import react from "react";
+import { Alert, OverlayLoader } from "@webiny/admin-ui";
+const PreviewDomainStatus = ({ error, onRetry })=>/*#__PURE__*/ react.createElement("div", {
+        className: "relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden fill-grid"
+    }, error ? /*#__PURE__*/ react.createElement("div", {
+        className: "p-md"
+    }, /*#__PURE__*/ react.createElement(Alert, {
+        type: "danger",
+        variant: "subtle",
+        actions: /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Retry",
+            onClick: onRetry
+        })
+    }, "Could not load the Frontend Domain setting, so the live preview cannot start. ", error)) : /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Loading preview settings..."
+    }));
+export { PreviewDomainStatus };
+
+//# sourceMappingURL=PreviewDomainStatus.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/PreviewDomainStatus.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewDomainStatus.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert, OverlayLoader } from \"@webiny/admin-ui\";\n\ninterface PreviewDomainStatusProps {\n    error: string | null;\n    onRetry: () => void;\n}\n\n/**\n * Shown in place of the preview while the Frontend Domain setting loads, or when it fails to load.\n */\nexport const PreviewDomainStatus = ({ error, onRetry }: PreviewDomainStatusProps) => {\n    return (\n        <div className=\"relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden fill-grid\">\n            {error ? (\n                <div className=\"p-md\">\n                    <Alert\n                        type={\"danger\"}\n                        variant={\"subtle\"}\n                        actions={<Alert.Action text={\"Retry\"} onClick={onRetry} />}\n                    >\n                        Could not load the Frontend Domain setting, so the live preview cannot\n                        start. {error}\n                    </Alert>\n                </div>\n            ) : (\n                <OverlayLoader text=\"Loading preview settings...\" />\n            )}\n        </div>\n    );\n};\n"],"names":["PreviewDomainStatus","error","onRetry","Alert","OverlayLoader"],"mappings":";;AAWO,MAAMA,sBAAsB,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAA4B,GACrE,WAAP,GACI,oBAAC;QAAI,WAAU;OACVD,QAAQ,WAARA,GACG,oBAAC;QAAI,WAAU;qBACX,oBAACE,OAAKA;QACF,MAAM;QACN,SAAS;QACT,uBAAS,oBAACA,MAAM,MAAM;YAAC,MAAM;YAAS,SAASD;;OAClD,kFAEWD,UAAAA,WAAAA,GAIhB,oBAACG,eAAaA;QAAC,MAAK"}

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

@@ -1,6 +1,11 @@
 import React from "react";
 interface PreviewPaneProps {
     domain: string;
+    /**
+     * The Frontend Domain setting, passed only when the user overrides it with their own preview domain.
+     */
+    settingsDomain: string | null;
+    onResetDomain: () => void;
     previewPath: string;
     entryId: string;
     entryData: Record<string, unknown> | null;
@@ -9,5 +14,5 @@ interface PreviewPaneProps {
      */
     urlEntryData: Record<string, unknown> | null;
 }
-export declare const PreviewPane: ({ domain, previewPath, entryId, entryData, urlEntryData }: PreviewPaneProps) => React.JSX.Element;
+export declare const PreviewPane: ({ domain, settingsDomain, onResetDomain, previewPath, entryId, entryData, urlEntryData }: PreviewPaneProps) => React.JSX.Element;
 export {};

package/presentation/contentEntries/preview/PreviewPane.js

@@ -1,32 +1,29 @@
 import react, { useCallback, useEffect, useRef, useState } from "react";
 import { MessageOrigin, Messenger } from "@webiny/cms-sdk/messenger";
 import { jsonPatch } from "@webiny/cms-sdk";
-import { IconButton, Input, OverlayLoader, SegmentedControl } from "@webiny/admin-ui";
+import { Alert, CopyButton, IconButton, OverlayLoader, SegmentedControl, Text, Tooltip, useToast } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/refresh.svg";
-import { ReactComponent as content_copy_svg_ReactComponent } from "@webiny/icons/content_copy.svg";
 import { ReactComponent as laptop_svg_ReactComponent } from "@webiny/icons/laptop.svg";
 import { ReactComponent as smartphone_svg_ReactComponent } from "@webiny/icons/smartphone.svg";
 import { ReactComponent as open_in_new_svg_ReactComponent } from "@webiny/icons/open_in_new.svg";
+import { PreviewDomainMenu } from "@webiny/frontend-settings/exports/admin.js";
 import { useLivePreviewPresenter } from "./useLivePreviewPresenter.js";
 import { buildDisplayUrl, buildEditorUrl } from "./resolvePreviewUrl.js";
-const PreviewPane = ({ domain, previewPath, entryId, entryData, urlEntryData })=>{
+const READY_TIMEOUT_MS = 20000;
+const PreviewPane = ({ domain, settingsDomain, onResetDomain, previewPath, entryId, entryData, urlEntryData })=>{
     const iframeRef = useRef(null);
     const messengerRef = useRef(null);
     const entryDataRef = useRef(entryData);
     const lastSentDataRef = useRef(null);
     const [ready, setReady] = useState(false);
     const [loading, setLoading] = useState(true);
+    const [timedOut, setTimedOut] = useState(false);
     const [iframeKey, setIframeKey] = useState(0);
     const [viewport, setViewport] = useState("desktop");
     const presenter = useLivePreviewPresenter();
+    const { showToast } = useToast();
     entryDataRef.current = entryData;
     const displayUrl = buildDisplayUrl(domain, previewPath, urlEntryData || {});
-    const [address, setAddress] = useState(displayUrl);
-    useEffect(()=>{
-        setAddress(displayUrl);
-    }, [
-        displayUrl
-    ]);
     const iframeSrc = (()=>{
         const editorPath = buildEditorUrl(domain, previewPath);
         const url = new URL(editorPath);
@@ -52,15 +49,21 @@ const PreviewPane = ({ domain, previewPath, entryId, entryData, urlEntryData })=
         const previewTarget = new MessageOrigin(()=>iframe.contentWindow, targetOrigin);
         const messenger = new Messenger(editorOrigin, previewTarget, "wb.editor.*");
         messengerRef.current = messenger;
+        setLoading(true);
+        setTimedOut(false);
+        const timeout = setTimeout(()=>setTimedOut(true), READY_TIMEOUT_MS);
         messenger.on("preview.ready", ()=>{
+            clearTimeout(timeout);
             setReady(true);
             setLoading(false);
+            setTimedOut(false);
             sendEntryData();
         });
         messenger.on("preview.component.register", (manifest)=>{
             presenter.addComponent(manifest);
         });
         return ()=>{
+            clearTimeout(timeout);
             messenger.dispose();
             messengerRef.current = null;
             lastSentDataRef.current = null;
@@ -102,11 +105,11 @@ const PreviewPane = ({ domain, previewPath, entryId, entryData, urlEntryData })=
         displayUrl,
         entryId
     ]);
-    const copyUrl = useCallback(()=>{
-        navigator.clipboard.writeText(getDraftUrl());
-    }, [
-        getDraftUrl
-    ]);
+    const confirmCopy = useCallback(()=>{
+        showToast({
+            title: "Preview link copied to clipboard!"
+        });
+    }, []);
     const openInNewTab = useCallback(()=>{
         window.open(getDraftUrl(), "_blank");
     }, [
@@ -115,34 +118,51 @@ const PreviewPane = ({ domain, previewPath, entryId, entryData, urlEntryData })=
     return /*#__PURE__*/ react.createElement("div", {
         className: "relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden"
     }, /*#__PURE__*/ react.createElement("div", {
-        className: "flex p-md items-center bg-white border-b border-neutral-dimmed"
+        className: "flex flex-row items-center gap-sm p-sm bg-neutral-base border-b-sm border-neutral-dimmed"
     }, /*#__PURE__*/ react.createElement("div", {
-        className: "w-full"
-    }, /*#__PURE__*/ react.createElement(Input, {
-        value: address,
-        onChange: setAddress,
-        readOnly: true,
-        size: "md",
-        variant: "secondary",
-        className: "bg-gray-100"
-    })), /*#__PURE__*/ react.createElement("div", {
-        className: "flex items-center gap-xxs ml-sm"
-    }, /*#__PURE__*/ react.createElement(IconButton, {
-        onClick: openInNewTab,
-        icon: /*#__PURE__*/ react.createElement(open_in_new_svg_ReactComponent, null),
-        variant: "ghost",
-        size: "md"
-    }), /*#__PURE__*/ react.createElement(IconButton, {
-        onClick: copyUrl,
-        icon: /*#__PURE__*/ react.createElement(content_copy_svg_ReactComponent, null),
-        variant: "ghost",
-        size: "sm"
-    }), /*#__PURE__*/ react.createElement(IconButton, {
-        onClick: reload,
-        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-        variant: "ghost",
-        size: "sm"
-    }), /*#__PURE__*/ react.createElement(SegmentedControl, {
+        className: "relative flex-auto min-w-0 h-[32px]"
+    }, /*#__PURE__*/ react.createElement("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"
+    }, /*#__PURE__*/ react.createElement(PreviewDomainMenu, {
+        className: "absolute left-0 top-0"
+    }), displayUrl), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute right-0 top-0 flex"
+    }, /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement(Text, {
+            size: "md"
+        }, "Refresh preview"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "md",
+            onClick: reload,
+            variant: "ghost"
+        })
+    }), /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement(Text, {
+            size: "md"
+        }, "Copy preview link"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(CopyButton, {
+            size: "md",
+            value: getDraftUrl(),
+            onCopy: confirmCopy,
+            variant: "ghost"
+        })
+    }), /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement(Text, {
+            size: "md"
+        }, "Preview entry in a new tab"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(open_in_new_svg_ReactComponent, null),
+            size: "md",
+            onClick: openInNewTab,
+            variant: "ghost"
+        })
+    }))), /*#__PURE__*/ react.createElement("div", {
+        className: "shrink-0"
+    }, /*#__PURE__*/ react.createElement(SegmentedControl, {
         value: viewport,
         onChange: (value)=>setViewport(value),
         items: [
@@ -157,9 +177,25 @@ const PreviewPane = ({ domain, previewPath, entryId, entryData, urlEntryData })=
                 icon: /*#__PURE__*/ react.createElement(smartphone_svg_ReactComponent, null)
             }
         ]
-    }))), /*#__PURE__*/ react.createElement("div", {
-        className: "block box-border h-full w-full overflow-auto fill-grid"
-    }, loading ? /*#__PURE__*/ react.createElement(OverlayLoader, {
+    }))), settingsDomain ? /*#__PURE__*/ react.createElement(Alert, {
+        type: "warning",
+        variant: "subtle",
+        className: "rounded-none",
+        actions: /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Use Frontend Domain",
+            onClick: onResetDomain
+        })
+    }, "Previewing on your custom domain ", domain, " instead of the Frontend Domain", " ", settingsDomain, ".") : null, loading && timedOut ? /*#__PURE__*/ react.createElement(Alert, {
+        type: "warning",
+        variant: "subtle",
+        className: "rounded-none",
+        actions: /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Reload",
+            onClick: reload
+        })
+    }, new URL(iframeSrc).origin, " is not responding to the live preview. Check that the frontend app is running at that address, that it initializes the Webiny SDK in editing mode, and that it allows this admin app as a referrer.") : null, /*#__PURE__*/ react.createElement("div", {
+        className: "relative block box-border h-full w-full overflow-auto fill-grid"
+    }, loading && !timedOut ? /*#__PURE__*/ react.createElement(OverlayLoader, {
         text: "Connecting to Live Preview..."
     }) : null, /*#__PURE__*/ react.createElement("div", {
         className: `mx-auto h-full transition-all duration-300 ${"mobile" === viewport ? "p-md" : ""}`,

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     * 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    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 [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(domain, previewPath, urlEntryData || {});\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","urlEntryData","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/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":"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"}
+{"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"}