@webiny/app-headless-cms 6.4.5-beta.0 → 6.6.0-alpha.0

package/presentation/fieldRenderers/ref/autocomplete/single/RefSingleAutocompletePresenter.d.ts

@@ -0,0 +1,21 @@
+import { SearchContentEntriesUseCase } from "../../../../../features/contentEntry/searchContentEntries/abstractions.js";
+import { GetContentEntriesUseCase } from "../../../../../features/contentEntry/getContentEntries/abstractions.js";
+import type { CmsReferenceValue } from "../../../../../features/contentEntry/refTypes.js";
+import { RefSingleAutocompletePresenter as Abstraction, type IRefSingleAutocompleteInitConfig, type IRefSingleAutocompleteViewModel } from "./abstractions.js";
+declare class RefSingleAutocompletePresenterImpl implements Abstraction.Interface {
+    private base;
+    private resolved;
+    constructor(searchUseCase: SearchContentEntriesUseCase.Interface, getEntriesUseCase: GetContentEntriesUseCase.Interface);
+    get vm(): IRefSingleAutocompleteViewModel;
+    init(config: IRefSingleAutocompleteInitConfig): Promise<void>;
+    search(query: string): Promise<void>;
+    select(entryId: string): CmsReferenceValue | null;
+    clear(): void;
+    dispose(): void;
+    private resolve;
+    private findOption;
+}
+export declare const RefSingleAutocompletePresenter: typeof RefSingleAutocompletePresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./abstractions.js").IRefSingleAutocompletePresenter>;
+};
+export {};

package/presentation/fieldRenderers/ref/autocomplete/single/RefSingleAutocompletePresenter.js

@@ -0,0 +1,93 @@
+import { computed, makeAutoObservable, runInAction } from "mobx";
+import { SearchContentEntriesUseCase } from "../../../../../features/contentEntry/searchContentEntries/abstractions.js";
+import { GetContentEntriesUseCase } from "../../../../../features/contentEntry/getContentEntries/abstractions.js";
+import { BaseAutocompletePresenter } from "../BaseAutocompletePresenter.js";
+import { RefSingleAutocompletePresenter } from "./abstractions.js";
+class RefSingleAutocompletePresenterImpl {
+    constructor(searchUseCase, getEntriesUseCase){
+        this.resolved = null;
+        this.base = new BaseAutocompletePresenter(searchUseCase, getEntriesUseCase);
+        makeAutoObservable(this, {
+            vm: computed
+        });
+    }
+    get vm() {
+        const baseOptions = this.base.activeOptions;
+        const seen = new Set();
+        const merged = [];
+        if (this.resolved) {
+            seen.add(this.resolved.entryId);
+            merged.push({
+                label: this.resolved.name,
+                value: this.resolved.entryId
+            });
+        }
+        for (const opt of baseOptions)if (!seen.has(opt.entryId)) {
+            seen.add(opt.entryId);
+            merged.push({
+                label: opt.name,
+                value: opt.entryId
+            });
+        }
+        return {
+            loading: this.base.loading,
+            options: merged,
+            value: this.resolved ? this.resolved.entryId : void 0,
+            canReset: null !== this.resolved
+        };
+    }
+    async init(config) {
+        this.base.modelIds = config.modelIds;
+        await this.base.loadDefaults();
+        if (config.value) await this.resolve(config.value);
+    }
+    async search(query) {
+        await this.base.search(query);
+    }
+    select(entryId) {
+        this.base.clearSearch();
+        const opt = this.findOption(entryId);
+        if (!opt) return null;
+        this.resolved = opt;
+        return {
+            id: opt.id,
+            modelId: opt.modelId
+        };
+    }
+    clear() {
+        this.base.clearSearch();
+        this.resolved = null;
+    }
+    dispose() {}
+    async resolve(value) {
+        const options = await this.base.resolveEntries([
+            value
+        ]);
+        runInAction(()=>{
+            this.resolved = options[0] ?? null;
+        });
+    }
+    findOption(entryId) {
+        const sources = [
+            this.resolved ? [
+                this.resolved
+            ] : [],
+            this.base.searchOptions,
+            this.base.defaultOptions
+        ];
+        for (const source of sources){
+            const found = source.find((o)=>o.entryId === entryId);
+            if (found) return found;
+        }
+    }
+}
+const RefSingleAutocompletePresenter_RefSingleAutocompletePresenter = RefSingleAutocompletePresenter.createImplementation({
+    implementation: RefSingleAutocompletePresenterImpl,
+    dependencies: [
+        SearchContentEntriesUseCase,
+        GetContentEntriesUseCase
+    ]
+});
+export { RefSingleAutocompletePresenter_RefSingleAutocompletePresenter as RefSingleAutocompletePresenter };
+
+//# sourceMappingURL=RefSingleAutocompletePresenter.js.map

package/presentation/fieldRenderers/ref/autocomplete/single/RefSingleAutocompletePresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/ref/autocomplete/single/RefSingleAutocompletePresenter.js","sources":["../../../../../../src/presentation/fieldRenderers/ref/autocomplete/single/RefSingleAutocompletePresenter.ts"],"sourcesContent":["import { computed, makeAutoObservable, runInAction } from \"mobx\";\nimport { SearchContentEntriesUseCase } from \"~/features/contentEntry/searchContentEntries/abstractions.js\";\nimport { GetContentEntriesUseCase } from \"~/features/contentEntry/getContentEntries/abstractions.js\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport type { IRefEntryOption, IDropdownOption } from \"../abstractions.js\";\nimport { BaseAutocompletePresenter } from \"../BaseAutocompletePresenter.js\";\nimport {\n    RefSingleAutocompletePresenter as Abstraction,\n    type IRefSingleAutocompleteInitConfig,\n    type IRefSingleAutocompleteViewModel\n} from \"./abstractions.js\";\n\nclass RefSingleAutocompletePresenterImpl implements Abstraction.Interface {\n    private base: BaseAutocompletePresenter;\n    private resolved: IRefEntryOption | null = null;\n\n    constructor(\n        searchUseCase: SearchContentEntriesUseCase.Interface,\n        getEntriesUseCase: GetContentEntriesUseCase.Interface\n    ) {\n        this.base = new BaseAutocompletePresenter(searchUseCase, getEntriesUseCase);\n        makeAutoObservable(this, { vm: computed });\n    }\n\n    get vm(): IRefSingleAutocompleteViewModel {\n        const baseOptions = this.base.activeOptions;\n\n        const seen = new Set<string>();\n        const merged: IDropdownOption[] = [];\n\n        if (this.resolved) {\n            seen.add(this.resolved.entryId);\n            merged.push({ label: this.resolved.name, value: this.resolved.entryId });\n        }\n\n        for (const opt of baseOptions) {\n            if (!seen.has(opt.entryId)) {\n                seen.add(opt.entryId);\n                merged.push({ label: opt.name, value: opt.entryId });\n            }\n        }\n\n        return {\n            loading: this.base.loading,\n            options: merged,\n            value: this.resolved ? this.resolved.entryId : undefined,\n            canReset: this.resolved !== null\n        };\n    }\n\n    async init(config: IRefSingleAutocompleteInitConfig): Promise<void> {\n        this.base.modelIds = config.modelIds;\n        await this.base.loadDefaults();\n\n        if (config.value) {\n            await this.resolve(config.value);\n        }\n    }\n\n    async search(query: string): Promise<void> {\n        await this.base.search(query);\n    }\n\n    select(entryId: string): CmsReferenceValue | null {\n        this.base.clearSearch();\n\n        const opt = this.findOption(entryId);\n        if (!opt) {\n            return null;\n        }\n        this.resolved = opt;\n        return { id: opt.id, modelId: opt.modelId };\n    }\n\n    clear(): void {\n        this.base.clearSearch();\n        this.resolved = null;\n    }\n\n    dispose(): void {}\n\n    private async resolve(value: CmsReferenceValue): Promise<void> {\n        const options = await this.base.resolveEntries([value]);\n        runInAction(() => {\n            this.resolved = options[0] ?? null;\n        });\n    }\n\n    private findOption(entryId: string): IRefEntryOption | undefined {\n        const sources = [\n            this.resolved ? [this.resolved] : [],\n            this.base.searchOptions,\n            this.base.defaultOptions\n        ];\n        for (const source of sources) {\n            const found = source.find(o => o.entryId === entryId);\n            if (found) {\n                return found;\n            }\n        }\n        return undefined;\n    }\n}\n\nexport const RefSingleAutocompletePresenter = Abstraction.createImplementation({\n    implementation: RefSingleAutocompletePresenterImpl,\n    dependencies: [SearchContentEntriesUseCase, GetContentEntriesUseCase]\n});\n"],"names":["RefSingleAutocompletePresenterImpl","searchUseCase","getEntriesUseCase","BaseAutocompletePresenter","makeAutoObservable","computed","baseOptions","seen","Set","merged","opt","undefined","config","query","entryId","value","options","runInAction","sources","source","found","o","RefSingleAutocompletePresenter","Abstraction","SearchContentEntriesUseCase","GetContentEntriesUseCase"],"mappings":";;;;;AAYA,MAAMA;IAIF,YACIC,aAAoD,EACpDC,iBAAqD,CACvD;aALM,QAAQ,GAA2B;QAMvC,IAAI,CAAC,IAAI,GAAG,IAAIC,0BAA0BF,eAAeC;QACzDE,mBAAmB,IAAI,EAAE;YAAE,IAAIC;QAAS;IAC5C;IAEA,IAAI,KAAsC;QACtC,MAAMC,cAAc,IAAI,CAAC,IAAI,CAAC,aAAa;QAE3C,MAAMC,OAAO,IAAIC;QACjB,MAAMC,SAA4B,EAAE;QAEpC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACfF,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO;YAC9BE,OAAO,IAAI,CAAC;gBAAE,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI;gBAAE,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAC;QAC1E;QAEA,KAAK,MAAMC,OAAOJ,YACd,IAAI,CAACC,KAAK,GAAG,CAACG,IAAI,OAAO,GAAG;YACxBH,KAAK,GAAG,CAACG,IAAI,OAAO;YACpBD,OAAO,IAAI,CAAC;gBAAE,OAAOC,IAAI,IAAI;gBAAE,OAAOA,IAAI,OAAO;YAAC;QACtD;QAGJ,OAAO;YACH,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;YAC1B,SAASD;YACT,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAGE;YAC/C,UAAU,AAAkB,SAAlB,IAAI,CAAC,QAAQ;QAC3B;IACJ;IAEA,MAAM,KAAKC,MAAwC,EAAiB;QAChE,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAGA,OAAO,QAAQ;QACpC,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY;QAE5B,IAAIA,OAAO,KAAK,EACZ,MAAM,IAAI,CAAC,OAAO,CAACA,OAAO,KAAK;IAEvC;IAEA,MAAM,OAAOC,KAAa,EAAiB;QACvC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAACA;IAC3B;IAEA,OAAOC,OAAe,EAA4B;QAC9C,IAAI,CAAC,IAAI,CAAC,WAAW;QAErB,MAAMJ,MAAM,IAAI,CAAC,UAAU,CAACI;QAC5B,IAAI,CAACJ,KACD,OAAO;QAEX,IAAI,CAAC,QAAQ,GAAGA;QAChB,OAAO;YAAE,IAAIA,IAAI,EAAE;YAAE,SAASA,IAAI,OAAO;QAAC;IAC9C;IAEA,QAAc;QACV,IAAI,CAAC,IAAI,CAAC,WAAW;QACrB,IAAI,CAAC,QAAQ,GAAG;IACpB;IAEA,UAAgB,CAAC;IAEjB,MAAc,QAAQK,KAAwB,EAAiB;QAC3D,MAAMC,UAAU,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;YAACD;SAAM;QACtDE,YAAY;YACR,IAAI,CAAC,QAAQ,GAAGD,OAAO,CAAC,EAAE,IAAI;QAClC;IACJ;IAEQ,WAAWF,OAAe,EAA+B;QAC7D,MAAMI,UAAU;YACZ,IAAI,CAAC,QAAQ,GAAG;gBAAC,IAAI,CAAC,QAAQ;aAAC,GAAG,EAAE;YACpC,IAAI,CAAC,IAAI,CAAC,aAAa;YACvB,IAAI,CAAC,IAAI,CAAC,cAAc;SAC3B;QACD,KAAK,MAAMC,UAAUD,QAAS;YAC1B,MAAME,QAAQD,OAAO,IAAI,CAACE,CAAAA,IAAKA,EAAE,OAAO,KAAKP;YAC7C,IAAIM,OACA,OAAOA;QAEf;IAEJ;AACJ;AAEO,MAAME,gEAAiCC,+BAAAA,oBAAgC,CAAC;IAC3E,gBAAgBvB;IAChB,cAAc;QAACwB;QAA6BC;KAAyB;AACzE"}

package/presentation/fieldRenderers/ref/autocomplete/single/abstractions.d.ts

@@ -0,0 +1,24 @@
+import type { CmsReferenceValue } from "../../../../../features/contentEntry/refTypes.js";
+import type { IDropdownOption } from "../abstractions.js";
+export interface IRefSingleAutocompleteInitConfig {
+    modelIds: string[];
+    value?: CmsReferenceValue | null;
+}
+export interface IRefSingleAutocompleteViewModel {
+    loading: boolean;
+    options: IDropdownOption[];
+    value: string | undefined;
+    canReset: boolean;
+}
+export interface IRefSingleAutocompletePresenter {
+    readonly vm: IRefSingleAutocompleteViewModel;
+    init(config: IRefSingleAutocompleteInitConfig): Promise<void>;
+    search(query: string): Promise<void>;
+    select(entryId: string): CmsReferenceValue | null;
+    clear(): void;
+    dispose(): void;
+}
+export declare const RefSingleAutocompletePresenter: import("@webiny/di").Abstraction<IRefSingleAutocompletePresenter>;
+export declare namespace RefSingleAutocompletePresenter {
+    type Interface = IRefSingleAutocompletePresenter;
+}

package/presentation/fieldRenderers/ref/autocomplete/single/abstractions.js

@@ -0,0 +1,5 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const RefSingleAutocompletePresenter = createAbstraction("RefSingleAutocompletePresenter");
+export { RefSingleAutocompletePresenter };
+
+//# sourceMappingURL=abstractions.js.map

package/presentation/fieldRenderers/ref/autocomplete/single/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/ref/autocomplete/single/abstractions.js","sources":["../../../../../../src/presentation/fieldRenderers/ref/autocomplete/single/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport type { IDropdownOption } from \"../abstractions.js\";\n\nexport interface IRefSingleAutocompleteInitConfig {\n    modelIds: string[];\n    value?: CmsReferenceValue | null;\n}\n\nexport interface IRefSingleAutocompleteViewModel {\n    loading: boolean;\n    options: IDropdownOption[];\n    value: string | undefined;\n    canReset: boolean;\n}\n\nexport interface IRefSingleAutocompletePresenter {\n    readonly vm: IRefSingleAutocompleteViewModel;\n    init(config: IRefSingleAutocompleteInitConfig): Promise<void>;\n    search(query: string): Promise<void>;\n    select(entryId: string): CmsReferenceValue | null;\n    clear(): void;\n    dispose(): void;\n}\n\nexport const RefSingleAutocompletePresenter = createAbstraction<IRefSingleAutocompletePresenter>(\n    \"RefSingleAutocompletePresenter\"\n);\n\nexport namespace RefSingleAutocompletePresenter {\n    export type Interface = IRefSingleAutocompletePresenter;\n}\n"],"names":["RefSingleAutocompletePresenter","createAbstraction"],"mappings":";AAyBO,MAAMA,iCAAiCC,kBAC1C"}

package/presentation/fieldRenderers/ref/autocomplete/single/feature.d.ts

@@ -0,0 +1,3 @@
+export declare const RefSingleAutocompletePresenterFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    presenter: import("./abstractions.js").IRefSingleAutocompletePresenter;
+}, []>;

package/presentation/fieldRenderers/ref/autocomplete/single/feature.js

@@ -0,0 +1,17 @@
+import { createFeature } from "@webiny/feature/admin";
+import { RefSingleAutocompletePresenter } from "./abstractions.js";
+import { RefSingleAutocompletePresenter as external_RefSingleAutocompletePresenter_js_RefSingleAutocompletePresenter } from "./RefSingleAutocompletePresenter.js";
+const RefSingleAutocompletePresenterFeature = createFeature({
+    name: "CmsRefField/SingleAutocompletePresenter",
+    register (container) {
+        container.register(external_RefSingleAutocompletePresenter_js_RefSingleAutocompletePresenter).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(RefSingleAutocompletePresenter)
+        };
+    }
+});
+export { RefSingleAutocompletePresenterFeature };
+
+//# sourceMappingURL=feature.js.map

package/presentation/fieldRenderers/ref/autocomplete/single/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/ref/autocomplete/single/feature.js","sources":["../../../../../../src/presentation/fieldRenderers/ref/autocomplete/single/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { RefSingleAutocompletePresenter as Abstraction } from \"./abstractions.js\";\nimport { RefSingleAutocompletePresenter } from \"./RefSingleAutocompletePresenter.js\";\n\nexport const RefSingleAutocompletePresenterFeature = createFeature({\n    name: \"CmsRefField/SingleAutocompletePresenter\",\n    register(container) {\n        container.register(RefSingleAutocompletePresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(Abstraction)\n        };\n    }\n});\n"],"names":["RefSingleAutocompletePresenterFeature","createFeature","container","RefSingleAutocompletePresenter","Abstraction"],"mappings":";;;AAIO,MAAMA,wCAAwCC,cAAc;IAC/D,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC,2EAAgC,gBAAgB;IACvE;IACA,SAAQD,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACE;QACjC;IACJ;AACJ"}

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

@@ -0,0 +1,3 @@
+import type { CmsReferenceEntry } from "../../../../features/contentEntry/refTypes.js";
+import type { IRefEntryOption } from "./abstractions.js";
+export declare function toOption(entry: CmsReferenceEntry): IRefEntryOption;

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

@@ -0,0 +1,14 @@
+function toOption(entry) {
+    return {
+        id: entry.id,
+        entryId: entry.entryId,
+        modelId: entry.model.modelId,
+        modelName: entry.model.name,
+        name: entry.title,
+        status: entry.status,
+        published: null !== entry.published
+    };
+}
+export { toOption };
+
+//# sourceMappingURL=toOption.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/ref/autocomplete/toOption.js","sources":["../../../../../src/presentation/fieldRenderers/ref/autocomplete/toOption.ts"],"sourcesContent":["import type { CmsReferenceEntry } from \"~/features/contentEntry/refTypes.js\";\nimport type { IRefEntryOption } from \"./abstractions.js\";\n\nexport function toOption(entry: CmsReferenceEntry): IRefEntryOption {\n    return {\n        id: entry.id,\n        entryId: entry.entryId,\n        modelId: entry.model.modelId,\n        modelName: entry.model.name,\n        name: entry.title,\n        status: entry.status,\n        published: entry.published !== null\n    };\n}\n"],"names":["toOption","entry"],"mappings":"AAGO,SAASA,SAASC,KAAwB;IAC7C,OAAO;QACH,IAAIA,MAAM,EAAE;QACZ,SAASA,MAAM,OAAO;QACtB,SAASA,MAAM,KAAK,CAAC,OAAO;QAC5B,WAAWA,MAAM,KAAK,CAAC,IAAI;QAC3B,MAAMA,MAAM,KAAK;QACjB,QAAQA,MAAM,MAAM;QACpB,WAAWA,AAAoB,SAApBA,MAAM,SAAS;IAC9B;AACJ"}

package/presentation/fieldRenderers/ref/components/EntryCard.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import type { CmsReferenceEntry, CmsReferenceValue } from "../../../../features/contentEntry/refTypes.js";
+import type { CmsModel } from "../../../../types.js";
+interface DialogEntryCardProps {
+    model: CmsModel;
+    entry: CmsReferenceEntry;
+    selected: boolean;
+    disabled?: boolean;
+    onChange: (value: CmsReferenceValue) => void;
+    onRemove?: never;
+    onMoveUp?: never;
+    onMoveDown?: never;
+    index?: never;
+    placement?: string;
+}
+interface FieldEntryCardProps {
+    model: CmsModel;
+    entry: CmsReferenceEntry;
+    disabled?: boolean;
+    onRemove: (entryId: string) => void;
+    index: number;
+    onMoveUp?: (index: number, toTop: boolean) => void;
+    onMoveDown?: (index: number, toBottom: boolean) => void;
+    onChange?: never;
+    selected?: never;
+    placement?: string;
+}
+type EntryCardProps = DialogEntryCardProps | FieldEntryCardProps;
+export declare const EntryCard: (props: EntryCardProps) => React.JSX.Element;
+export {};

package/presentation/fieldRenderers/ref/components/EntryCard.js

@@ -0,0 +1,120 @@
+import react, { useCallback, useMemo } from "react";
+import { EntryImage } from "./EntryImage.js";
+import { Checkbox, DropdownMenu, IconButton, Tag, Text, TimeAgo, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as open_in_new_svg_ReactComponent } from "@webiny/icons/open_in_new.svg";
+import { ReactComponent as close_svg_ReactComponent } from "@webiny/icons/close.svg";
+import { ReactComponent as arrow_upward_svg_ReactComponent } from "@webiny/icons/arrow_upward.svg";
+import { ReactComponent as arrow_downward_svg_ReactComponent } from "@webiny/icons/arrow_downward.svg";
+import { useRouter } from "@webiny/app";
+import { Routes } from "../../../../routes.js";
+const EntryCard = (props)=>{
+    const { entry, onChange, onRemove, selected, index, placement, disabled = false } = props;
+    const onMoveUpClick = props.onMoveUp;
+    const onMoveDownClick = props.onMoveDown;
+    const { getLink } = useRouter();
+    const onSelect = useCallback(()=>{
+        if (onChange) onChange({
+            id: entry.id,
+            modelId: entry.model.modelId
+        });
+    }, [
+        onChange,
+        entry.id,
+        entry.model.modelId
+    ]);
+    const onMoveUp = useCallback((ev)=>{
+        if (onMoveUpClick && null != index) onMoveUpClick(index, ev.shiftKey);
+    }, [
+        onMoveUpClick,
+        index
+    ]);
+    const onMoveDown = useCallback((ev)=>{
+        if (onMoveDownClick && null != index) onMoveDownClick(index, ev.shiftKey);
+    }, [
+        onMoveDownClick,
+        index
+    ]);
+    const entryStatusLabel = entry.status.charAt(0).toUpperCase() + entry.status.slice(1);
+    const entryRevision = useMemo(()=>{
+        const extractedRevision = entry.id.split("#")[1] || "0001";
+        return "v" + Number(extractedRevision).toString();
+    }, [
+        entry.id
+    ]);
+    const folderId = entry.wbyAco_location?.folderId || "";
+    const link = getLink(Routes.ContentEntries.List, {
+        id: entry.id,
+        modelId: entry.model.modelId,
+        folderId
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        "data-selected": selected,
+        onClick: onSelect,
+        "data-role": "ref-field-entry",
+        className: cn("flex items-center justify-between gap-md w-full rounded-md bg-neutral-light p-sm-extra pr-lg hover:bg-neutral-dimmed border-md border-transparent data-[selected=true]:border-accent-dimmed", {
+            "hover:cursor-pointer": !!onChange
+        })
+    }, onChange && !disabled ? /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Checkbox, {
+        checked: selected,
+        onChange: ()=>{}
+    })) : null, /*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-[auto_1fr] items-start @lg:items-center gap-lg text-sm text-neutral-muted w-full min-w-0"
+    }, /*#__PURE__*/ react.createElement(EntryImage, {
+        title: entry.title,
+        src: entry.image
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col @lg:flex-row @lg:items-center @lg:justify-between gap-sm min-w-0"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "min-w-0"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "truncate"
+    }, entry.model.name), /*#__PURE__*/ react.createElement("div", {
+        title: entry.title,
+        className: "text-md text-neutral-primary font-semibold mb-sm text-ellipsis overflow-hidden whitespace-nowrap block"
+    }, entry.title), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("span", {
+        className: "w-[60px] inline-block"
+    }, "Created:"), /*#__PURE__*/ react.createElement("span", null, entry.createdBy.displayName, ",", " ", /*#__PURE__*/ react.createElement(TimeAgo, {
+        datetime: entry.createdOn
+    })))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm shrink-0"
+    }, /*#__PURE__*/ react.createElement(Tag, {
+        content: /*#__PURE__*/ react.createElement(react.Fragment, null, entryStatusLabel, "\xa0", /*#__PURE__*/ react.createElement(Text, {
+            size: "sm",
+            className: "text-neutral-muted"
+        }, "(", entryRevision, ")")),
+        variant: "neutral-base-outline"
+    }), disabled || "multiRef" !== placement ? null : /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-xs"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        disabled: !onMoveUpClick,
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null),
+        onClick: onMoveUp
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        disabled: !onMoveDownClick,
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null),
+        onClick: onMoveDown
+    })), disabled ? null : /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            size: "sm",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        })
+    }, /*#__PURE__*/ react.createElement(DropdownMenu.Link, {
+        icon: /*#__PURE__*/ react.createElement(open_in_new_svg_ReactComponent, null),
+        text: "Open in new tab",
+        to: link,
+        target: "_blank"
+    }), onRemove && /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        icon: /*#__PURE__*/ react.createElement(close_svg_ReactComponent, null),
+        text: "multiRef" === placement ? "Remove from list" : "Remove",
+        onClick: ()=>onRemove(entry.id)
+    }))))));
+};
+export { EntryCard };
+
+//# sourceMappingURL=EntryCard.js.map

package/presentation/fieldRenderers/ref/components/EntryCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/ref/components/EntryCard.js","sources":["../../../../../src/presentation/fieldRenderers/ref/components/EntryCard.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport type { CmsReferenceEntry, CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport type { CmsModel } from \"~/types.js\";\nimport { EntryImage } from \"./EntryImage.js\";\nimport { Tag, TimeAgo, Text, DropdownMenu, IconButton, Checkbox, cn } from \"@webiny/admin-ui\";\nimport { ReactComponent as MoreVertIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as OpenInNewIcon } from \"@webiny/icons/open_in_new.svg\";\nimport { ReactComponent as RemoveIcon } from \"@webiny/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport { useRouter } from \"@webiny/app\";\nimport { Routes } from \"~/routes.js\";\n\ninterface DialogEntryCardProps {\n    model: CmsModel;\n    entry: CmsReferenceEntry;\n    selected: boolean;\n    disabled?: boolean;\n    onChange: (value: CmsReferenceValue) => void;\n    onRemove?: never;\n    onMoveUp?: never;\n    onMoveDown?: never;\n    index?: never;\n    placement?: string;\n}\n\ninterface FieldEntryCardProps {\n    model: CmsModel;\n    entry: CmsReferenceEntry;\n    disabled?: boolean;\n    onRemove: (entryId: string) => void;\n    index: number;\n    onMoveUp?: (index: number, toTop: boolean) => void;\n    onMoveDown?: (index: number, toBottom: boolean) => void;\n    onChange?: never;\n    selected?: never;\n    placement?: string;\n}\n\ntype EntryCardProps = DialogEntryCardProps | FieldEntryCardProps;\n\nexport const EntryCard = (props: EntryCardProps) => {\n    const { entry, onChange, onRemove, selected, index, placement, disabled = false } = props;\n    const onMoveUpClick = props.onMoveUp;\n    const onMoveDownClick = props.onMoveDown;\n    const { getLink } = useRouter();\n\n    const onSelect = useCallback(() => {\n        if (onChange) {\n            onChange({ id: entry.id, modelId: entry.model.modelId });\n        }\n    }, [onChange, entry.id, entry.model.modelId]);\n\n    const onMoveUp = useCallback(\n        (ev: React.MouseEvent) => {\n            if (onMoveUpClick && index != null) {\n                onMoveUpClick(index, ev.shiftKey);\n            }\n        },\n        [onMoveUpClick, index]\n    );\n\n    const onMoveDown = useCallback(\n        (ev: React.MouseEvent) => {\n            if (onMoveDownClick && index != null) {\n                onMoveDownClick(index, ev.shiftKey);\n            }\n        },\n        [onMoveDownClick, index]\n    );\n\n    const entryStatusLabel = entry.status.charAt(0).toUpperCase() + entry.status.slice(1);\n\n    const entryRevision = useMemo(() => {\n        const extractedRevision = entry.id.split(\"#\")[1] || \"0001\";\n        return \"v\" + Number(extractedRevision).toString();\n    }, [entry.id]);\n\n    const folderId = entry.wbyAco_location?.folderId || \"\";\n\n    const link = getLink(Routes.ContentEntries.List, {\n        id: entry.id,\n        modelId: entry.model.modelId,\n        folderId\n    });\n\n    return (\n        <div\n            data-selected={selected}\n            onClick={onSelect}\n            data-role=\"ref-field-entry\"\n            className={cn(\n                \"flex items-center justify-between gap-md w-full rounded-md bg-neutral-light p-sm-extra pr-lg hover:bg-neutral-dimmed border-md border-transparent data-[selected=true]:border-accent-dimmed\",\n                { \"hover:cursor-pointer\": !!onChange }\n            )}\n        >\n            {onChange && !disabled ? (\n                <div>\n                    <Checkbox checked={selected} onChange={() => {}} />\n                </div>\n            ) : null}\n            <div\n                className={\n                    \"grid grid-cols-[auto_1fr] items-start @lg:items-center gap-lg text-sm text-neutral-muted w-full min-w-0\"\n                }\n            >\n                <EntryImage title={entry.title} src={entry.image} />\n                <div\n                    className={\n                        \"flex flex-col @lg:flex-row @lg:items-center @lg:justify-between gap-sm min-w-0\"\n                    }\n                >\n                    <div className={\"min-w-0\"}>\n                        <div className={\"truncate\"}>{entry.model.name}</div>\n                        <div\n                            title={entry.title}\n                            className={\n                                \"text-md text-neutral-primary font-semibold mb-sm text-ellipsis overflow-hidden whitespace-nowrap block\"\n                            }\n                        >\n                            {entry.title}\n                        </div>\n                        <div>\n                            <span className={\"w-[60px] inline-block\"}>Created:</span>\n                            <span>\n                                {entry.createdBy.displayName},{\" \"}\n                                <TimeAgo datetime={entry.createdOn} />\n                            </span>\n                        </div>\n                    </div>\n                    <div className={\"flex items-center gap-sm shrink-0\"}>\n                        <Tag\n                            content={\n                                <>\n                                    {entryStatusLabel}&nbsp;\n                                    <Text size={\"sm\"} className={\"text-neutral-muted\"}>\n                                        ({entryRevision})\n                                    </Text>\n                                </>\n                            }\n                            variant={\"neutral-base-outline\"}\n                        />\n                        {!disabled && placement === \"multiRef\" ? (\n                            <div className={\"flex gap-xs\"}>\n                                <IconButton\n                                    disabled={!onMoveUpClick}\n                                    variant={\"ghost\"}\n                                    size={\"sm\"}\n                                    icon={<ArrowUp />}\n                                    onClick={onMoveUp}\n                                />\n                                <IconButton\n                                    disabled={!onMoveDownClick}\n                                    variant={\"ghost\"}\n                                    size={\"sm\"}\n                                    icon={<ArrowDown />}\n                                    onClick={onMoveDown}\n                                />\n                            </div>\n                        ) : null}\n                        {!disabled ? (\n                            <DropdownMenu\n                                trigger={\n                                    <IconButton\n                                        variant={\"ghost\"}\n                                        size={\"sm\"}\n                                        icon={<MoreVertIcon />}\n                                    />\n                                }\n                            >\n                                <DropdownMenu.Link\n                                    icon={<OpenInNewIcon />}\n                                    text={\"Open in new tab\"}\n                                    to={link}\n                                    target={\"_blank\"}\n                                />\n                                {onRemove && (\n                                    <DropdownMenu.Item\n                                        icon={<RemoveIcon />}\n                                        text={\n                                            placement === \"multiRef\" ? \"Remove from list\" : \"Remove\"\n                                        }\n                                        onClick={() => onRemove(entry.id)}\n                                    />\n                                )}\n                            </DropdownMenu>\n                        ) : null}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["EntryCard","props","entry","onChange","onRemove","selected","index","placement","disabled","onMoveUpClick","onMoveDownClick","getLink","useRouter","onSelect","useCallback","onMoveUp","ev","onMoveDown","entryStatusLabel","entryRevision","useMemo","extractedRevision","Number","folderId","link","Routes","cn","Checkbox","EntryImage","TimeAgo","Tag","Text","IconButton","ArrowUp","ArrowDown","DropdownMenu","MoreVertIcon","OpenInNewIcon","RemoveIcon"],"mappings":"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"}

package/presentation/fieldRenderers/ref/components/EntryImage.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface EntryImageProps {
+    title: string;
+    src?: string | null;
+}
+export declare const EntryImage: ({ src, title }: EntryImageProps) => React.JSX.Element;
+export {};

package/presentation/fieldRenderers/ref/components/EntryImage.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/image.svg";
+const EntryImage = ({ src, title })=>/*#__PURE__*/ react.createElement("div", {
+        className: "size-[96px] rounded-lg overflow-hidden relative"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "size-full flex justify-center items-center bg-neutral-base"
+    }, src ? /*#__PURE__*/ react.createElement("img", {
+        src: src
+    }) : /*#__PURE__*/ react.createElement(Icon, {
+        label: title,
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        className: "w-[32px] h-[32px]",
+        color: "neutral-light"
+    })));
+export { EntryImage };
+
+//# sourceMappingURL=EntryImage.js.map

package/presentation/fieldRenderers/ref/components/EntryImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/ref/components/EntryImage.js","sources":["../../../../../src/presentation/fieldRenderers/ref/components/EntryImage.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as ImageIcon } from \"@webiny/icons/image.svg\";\n\ninterface EntryImageProps {\n    title: string;\n    src?: string | null;\n}\n\nexport const EntryImage = ({ src, title }: EntryImageProps) => {\n    return (\n        <div className={\"size-[96px] rounded-lg overflow-hidden relative\"}>\n            <div className={\"size-full flex justify-center items-center bg-neutral-base\"}>\n                {src ? (\n                    <img src={src} />\n                ) : (\n                    <Icon\n                        label={title}\n                        icon={<ImageIcon />}\n                        className={\"w-[32px] h-[32px]\"}\n                        color={\"neutral-light\"}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["EntryImage","src","title","Icon","ImageIcon"],"mappings":";;;AASO,MAAMA,aAAa,CAAC,EAAEC,GAAG,EAAEC,KAAK,EAAmB,GAC/C,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;OACXD,MAAM,WAANA,GACG,oBAAC;QAAI,KAAKA;uBAEV,oBAACE,MAAIA;QACD,OAAOD;QACP,oBAAM,oBAACE,gBAASA;QAChB,WAAW;QACX,OAAO"}

package/presentation/fieldRenderers/ref/components/EntryList.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { CmsReferenceEntry } from "../../../../features/contentEntry/refTypes.js";
+interface EntryListProps {
+    entries: CmsReferenceEntry[];
+    children: (entry: CmsReferenceEntry, index: number) => React.ReactNode;
+    loadMore: () => void;
+}
+export declare const EntryList: ({ entries, children, loadMore }: EntryListProps) => React.JSX.Element;
+export {};

package/presentation/fieldRenderers/ref/components/EntryList.js

@@ -0,0 +1,24 @@
+import react, { useCallback } from "react";
+import debounce from "lodash/debounce.js";
+import { ScrollArea } from "@webiny/admin-ui";
+const EntryList = ({ entries, children, loadMore })=>{
+    const loadMoreOnScroll = useCallback(debounce((position)=>{
+        if (position.top <= 0.9) return;
+        loadMore();
+    }, 500), [
+        entries,
+        loadMore
+    ]);
+    return /*#__PURE__*/ react.createElement(ScrollArea, {
+        className: "max-h-[404px] w-full flex flex-col gap-md",
+        "data-testid": "advanced-ref-field-entries",
+        onScroll: loadMoreOnScroll
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, entries.map((entry, index)=>/*#__PURE__*/ react.createElement("div", {
+            key: `entry-${entry.id}`
+        }, children(entry, index)))));
+};
+export { EntryList };
+
+//# sourceMappingURL=EntryList.js.map

package/presentation/fieldRenderers/ref/components/EntryList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/ref/components/EntryList.js","sources":["../../../../../src/presentation/fieldRenderers/ref/components/EntryList.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport debounce from \"lodash/debounce.js\";\nimport type { CmsReferenceEntry } from \"~/features/contentEntry/refTypes.js\";\nimport { ScrollArea } from \"@webiny/admin-ui\";\n\ninterface EntryListProps {\n    entries: CmsReferenceEntry[];\n    children: (entry: CmsReferenceEntry, index: number) => React.ReactNode;\n    loadMore: () => void;\n}\n\nexport const EntryList = ({ entries, children, loadMore }: EntryListProps) => {\n    const loadMoreOnScroll = useCallback(\n        debounce(position => {\n            if (position.top <= 0.9) {\n                return;\n            }\n            loadMore();\n        }, 500),\n        [entries, loadMore]\n    );\n\n    return (\n        <ScrollArea\n            className={\"max-h-[404px] w-full flex flex-col gap-md\"}\n            data-testid=\"advanced-ref-field-entries\"\n            onScroll={loadMoreOnScroll}\n        >\n            <div className={\"flex flex-col gap-md\"}>\n                {entries.map((entry, index) => {\n                    return <div key={`entry-${entry.id}`}>{children(entry, index)}</div>;\n                })}\n            </div>\n        </ScrollArea>\n    );\n};\n"],"names":["EntryList","entries","children","loadMore","loadMoreOnScroll","useCallback","debounce","position","ScrollArea","entry","index"],"mappings":";;;AAWO,MAAMA,YAAY,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAkB;IACrE,MAAMC,mBAAmBC,YACrBC,SAASC,CAAAA;QACL,IAAIA,SAAS,GAAG,IAAI,KAChB;QAEJJ;IACJ,GAAG,MACH;QAACF;QAASE;KAAS;IAGvB,OAAO,WAAP,GACI,oBAACK,YAAUA;QACP,WAAW;QACX,eAAY;QACZ,UAAUJ;qBAEV,oBAAC;QAAI,WAAW;OACXH,QAAQ,GAAG,CAAC,CAACQ,OAAOC,QACV,WAAP,GAAO,oBAAC;YAAI,KAAK,CAAC,MAAM,EAAED,MAAM,EAAE,EAAE;WAAGP,SAASO,OAAOC;AAK3E"}

package/presentation/fieldRenderers/ref/components/NewEntryDrawer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { CmsReferenceValue } from "../../../../features/contentEntry/refTypes.js";
+interface NewEntryDrawerProps {
+    modelId: string;
+    onClose: () => void;
+    onChange: (value: CmsReferenceValue) => void;
+}
+export declare const NewEntryDrawer: ({ modelId, onClose, onChange }: NewEntryDrawerProps) => React.JSX.Element;
+export {};

package/presentation/fieldRenderers/ref/components/NewEntryDrawer.js

@@ -0,0 +1,97 @@
+import react, { useCallback, useEffect, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { Drawer, OverlayLoader } from "@webiny/admin-ui";
+import { DialogsProvider, LeftPanel, RightPanel, SplitView } from "@webiny/app-admin";
+import { FormView } from "@webiny/app-admin/features/formModel/FormView.js";
+import { FoldersFeature } from "@webiny/app-aco/features/folders/feature.js";
+import { FolderTreePresenterFeature } from "@webiny/app-aco/presentation/folderTree/feature.js";
+import { FolderTree } from "@webiny/app-aco/presentation/folderTree/FolderTree.js";
+import { ContentEntryFeature } from "../../../../features/contentEntry/feature.js";
+import { CmsModelContext } from "../../../../features/contentEntry/CmsModelContext.js";
+import { ContentEntryFormPresenterFeature } from "../../../contentEntries/form/feature.js";
+import { NewEntryPresenterFeature } from "../newEntry/feature.js";
+import { GenericModelLoader } from "../../../contentEntries/views/GenericModelLoader.js";
+const NewEntryDrawer = ({ modelId, onClose, onChange })=>{
+    const parentContainer = useContainer();
+    const dialogContainer = useMemo(()=>{
+        const child = parentContainer.createChildContainer();
+        ContentEntryFeature.register(child);
+        child.register(CmsModelContext).inSingletonScope();
+        FoldersFeature.register(child, {
+            type: `cms:${modelId}`
+        });
+        FolderTreePresenterFeature.register(child);
+        ContentEntryFormPresenterFeature.register(child);
+        NewEntryPresenterFeature.register(child);
+        return child;
+    }, [
+        modelId
+    ]);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: dialogContainer
+    }, /*#__PURE__*/ react.createElement(DialogsProvider, null, /*#__PURE__*/ react.createElement(GenericModelLoader, {
+        modelId: modelId
+    }, (model)=>/*#__PURE__*/ react.createElement(NewEntryDrawerContent, {
+            model: model,
+            onClose: onClose,
+            onChange: onChange
+        }))));
+};
+const NewEntryDrawerContent = observer(({ model, onClose, onChange })=>{
+    const { presenter } = useFeature(NewEntryPresenterFeature);
+    useEffect(()=>{
+        presenter.init();
+        return ()=>presenter.dispose();
+    }, []);
+    const onSave = useCallback(async ()=>{
+        const saved = await presenter.form.saveRevision({
+            skipValidation: false
+        });
+        if (saved && presenter.form.vm.entry) {
+            onChange({
+                id: presenter.form.vm.entry.id,
+                modelId: model.modelId
+            });
+            onClose();
+        }
+    }, [
+        model.modelId
+    ]);
+    const vm = presenter.form.vm;
+    return /*#__PURE__*/ react.createElement(Drawer, {
+        open: true,
+        onClose: onClose,
+        width: 1000,
+        modal: true,
+        headerSeparator: true,
+        footerSeparator: true,
+        bodyPadding: false,
+        title: `New ${model.name} Entry`,
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Drawer.CancelButton, null), /*#__PURE__*/ react.createElement(Drawer.ConfirmButton, {
+            onClick: onSave,
+            text: "Create Entry"
+        }))
+    }, /*#__PURE__*/ react.createElement(SplitView, null, /*#__PURE__*/ react.createElement(LeftPanel, {
+        span: 3
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "px-sm-extra py-sm"
+    }, /*#__PURE__*/ react.createElement(FolderTree, {
+        vm: presenter.folders.vm,
+        actions: presenter.folders,
+        enableActions: true,
+        enableCreate: true
+    }))), /*#__PURE__*/ react.createElement(RightPanel, {
+        span: 9
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "p-md relative"
+    }, vm.loading ? /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Creating entry..."
+    }) : null, vm.form ? /*#__PURE__*/ react.createElement(FormView, {
+        name: "NewRefEntryForm",
+        form: vm.form
+    }) : null))));
+});
+export { NewEntryDrawer };
+
+//# sourceMappingURL=NewEntryDrawer.js.map

package/presentation/fieldRenderers/ref/components/NewEntryDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/ref/components/NewEntryDrawer.js","sources":["../../../../../src/presentation/fieldRenderers/ref/components/NewEntryDrawer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { Drawer, OverlayLoader } from \"@webiny/admin-ui\";\nimport { SplitView, LeftPanel, RightPanel, DialogsProvider } from \"@webiny/app-admin\";\nimport { FormView } from \"@webiny/app-admin/features/formModel/FormView.js\";\nimport { FoldersFeature } from \"@webiny/app-aco/features/folders/feature.js\";\nimport { FolderTreePresenterFeature } from \"@webiny/app-aco/presentation/folderTree/feature.js\";\nimport { FolderTree } from \"@webiny/app-aco/presentation/folderTree/FolderTree.js\";\nimport { ContentEntryFeature } from \"~/features/contentEntry/feature.js\";\nimport { CmsModelContext } from \"~/features/contentEntry/CmsModelContext.js\";\nimport { ContentEntryFormPresenterFeature } from \"~/presentation/contentEntries/form/feature.js\";\nimport { NewEntryPresenterFeature } from \"../newEntry/feature.js\";\nimport { GenericModelLoader } from \"~/presentation/contentEntries/views/GenericModelLoader.js\";\nimport type { CmsModel } from \"~/types.js\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\n\ninterface NewEntryDrawerProps {\n    modelId: string;\n    onClose: () => void;\n    onChange: (value: CmsReferenceValue) => void;\n}\n\nexport const NewEntryDrawer = ({ modelId, onClose, onChange }: NewEntryDrawerProps) => {\n    const parentContainer = useContainer();\n\n    const dialogContainer = useMemo(() => {\n        const child = parentContainer.createChildContainer();\n        ContentEntryFeature.register(child);\n        child.register(CmsModelContext).inSingletonScope();\n        FoldersFeature.register(child, { type: `cms:${modelId}` });\n        FolderTreePresenterFeature.register(child);\n        ContentEntryFormPresenterFeature.register(child);\n        NewEntryPresenterFeature.register(child);\n        return child;\n    }, [modelId]);\n\n    return (\n        <DiContainerProvider container={dialogContainer}>\n            <DialogsProvider>\n                <GenericModelLoader modelId={modelId}>\n                    {model => (\n                        <NewEntryDrawerContent\n                            model={model}\n                            onClose={onClose}\n                            onChange={onChange}\n                        />\n                    )}\n                </GenericModelLoader>\n            </DialogsProvider>\n        </DiContainerProvider>\n    );\n};\n\ninterface NewEntryDrawerContentProps {\n    model: CmsModel;\n    onClose: () => void;\n    onChange: (value: CmsReferenceValue) => void;\n}\n\nconst NewEntryDrawerContent = observer(\n    ({ model, onClose, onChange }: NewEntryDrawerContentProps) => {\n        const { presenter } = useFeature(NewEntryPresenterFeature);\n\n        useEffect(() => {\n            presenter.init();\n            return () => presenter.dispose();\n        }, []);\n\n        const onSave = useCallback(async () => {\n            const saved = await presenter.form.saveRevision({ skipValidation: false });\n            if (saved && presenter.form.vm.entry) {\n                onChange({\n                    id: presenter.form.vm.entry.id,\n                    modelId: model.modelId\n                });\n                onClose();\n            }\n        }, [model.modelId]);\n\n        const vm = presenter.form.vm;\n\n        return (\n            <Drawer\n                open={true}\n                onClose={onClose}\n                width={1000}\n                modal={true}\n                headerSeparator={true}\n                footerSeparator={true}\n                bodyPadding={false}\n                title={`New ${model.name} Entry`}\n                actions={\n                    <>\n                        <Drawer.CancelButton />\n                        <Drawer.ConfirmButton onClick={onSave} text=\"Create Entry\" />\n                    </>\n                }\n            >\n                <SplitView>\n                    <LeftPanel span={3}>\n                        <div className={\"px-sm-extra py-sm\"}>\n                            <FolderTree\n                                vm={presenter.folders.vm}\n                                actions={presenter.folders}\n                                enableActions={true}\n                                enableCreate={true}\n                            />\n                        </div>\n                    </LeftPanel>\n                    <RightPanel span={9}>\n                        <div className={\"p-md relative\"}>\n                            {vm.loading ? <OverlayLoader text={\"Creating entry...\"} /> : null}\n                            {vm.form ? <FormView name=\"NewRefEntryForm\" form={vm.form} /> : null}\n                        </div>\n                    </RightPanel>\n                </SplitView>\n            </Drawer>\n        );\n    }\n);\n"],"names":["NewEntryDrawer","modelId","onClose","onChange","parentContainer","useContainer","dialogContainer","useMemo","child","ContentEntryFeature","CmsModelContext","FoldersFeature","FolderTreePresenterFeature","ContentEntryFormPresenterFeature","NewEntryPresenterFeature","DiContainerProvider","DialogsProvider","GenericModelLoader","model","NewEntryDrawerContent","observer","presenter","useFeature","useEffect","onSave","useCallback","saved","vm","Drawer","SplitView","LeftPanel","FolderTree","RightPanel","OverlayLoader","FormView"],"mappings":";;;;;;;;;;;;;;AAuBO,MAAMA,iBAAiB,CAAC,EAAEC,OAAO,EAAEC,OAAO,EAAEC,QAAQ,EAAuB;IAC9E,MAAMC,kBAAkBC;IAExB,MAAMC,kBAAkBC,QAAQ;QAC5B,MAAMC,QAAQJ,gBAAgB,oBAAoB;QAClDK,oBAAoB,QAAQ,CAACD;QAC7BA,MAAM,QAAQ,CAACE,iBAAiB,gBAAgB;QAChDC,eAAe,QAAQ,CAACH,OAAO;YAAE,MAAM,CAAC,IAAI,EAAEP,SAAS;QAAC;QACxDW,2BAA2B,QAAQ,CAACJ;QACpCK,iCAAiC,QAAQ,CAACL;QAC1CM,yBAAyB,QAAQ,CAACN;QAClC,OAAOA;IACX,GAAG;QAACP;KAAQ;IAEZ,OAAO,WAAP,GACI,oBAACc,qBAAmBA;QAAC,WAAWT;qBAC5B,oBAACU,iBAAeA,MAAAA,WAAAA,GACZ,oBAACC,oBAAkBA;QAAC,SAAShB;OACxBiB,CAAAA,QAAAA,WAAAA,GACG,oBAACC,uBAAqBA;YAClB,OAAOD;YACP,SAAShB;YACT,UAAUC;;AAOtC;AAQA,MAAMgB,wBAAwBC,SAC1B,CAAC,EAAEF,KAAK,EAAEhB,OAAO,EAAEC,QAAQ,EAA8B;IACrD,MAAM,EAAEkB,SAAS,EAAE,GAAGC,WAAWR;IAEjCS,UAAU;QACNF,UAAU,IAAI;QACd,OAAO,IAAMA,UAAU,OAAO;IAClC,GAAG,EAAE;IAEL,MAAMG,SAASC,YAAY;QACvB,MAAMC,QAAQ,MAAML,UAAU,IAAI,CAAC,YAAY,CAAC;YAAE,gBAAgB;QAAM;QACxE,IAAIK,SAASL,UAAU,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;YAClClB,SAAS;gBACL,IAAIkB,UAAU,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;gBAC9B,SAASH,MAAM,OAAO;YAC1B;YACAhB;QACJ;IACJ,GAAG;QAACgB,MAAM,OAAO;KAAC;IAElB,MAAMS,KAAKN,UAAU,IAAI,CAAC,EAAE;IAE5B,OAAO,WAAP,GACI,oBAACO,QAAMA;QACH,MAAM;QACN,SAAS1B;QACT,OAAO;QACP,OAAO;QACP,iBAAiB;QACjB,iBAAiB;QACjB,aAAa;QACb,OAAO,CAAC,IAAI,EAAEgB,MAAM,IAAI,CAAC,MAAM,CAAC;QAChC,uBACI,wDACI,oBAACU,OAAO,YAAY,uBACpB,oBAACA,OAAO,aAAa;YAAC,SAASJ;YAAQ,MAAK;;qBAIpD,oBAACK,WAASA,MAAAA,WAAAA,GACN,oBAACC,WAASA;QAAC,MAAM;qBACb,oBAAC;QAAI,WAAW;qBACZ,oBAACC,YAAUA;QACP,IAAIV,UAAU,OAAO,CAAC,EAAE;QACxB,SAASA,UAAU,OAAO;QAC1B,eAAe;QACf,cAAc;wBAI1B,oBAACW,YAAUA;QAAC,MAAM;qBACd,oBAAC;QAAI,WAAW;OACXL,GAAG,OAAO,GAAG,WAAH,GAAG,oBAACM,eAAaA;QAAC,MAAM;SAA0B,MAC5DN,GAAG,IAAI,GAAG,WAAH,GAAG,oBAACO,UAAQA;QAAC,MAAK;QAAkB,MAAMP,GAAG,IAAI;SAAO;AAMxF"}

package/presentation/fieldRenderers/ref/components/RefFieldOptions.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { CmsModel } from "../../../../types.js";
+interface RefFieldOptionsProps {
+    models: CmsModel[];
+    onNewRecord: (modelId: string) => void;
+    onLinkExistingRecord: (modelId: string) => void;
+}
+export declare const RefFieldOptions: (({ models, onNewRecord, onLinkExistingRecord }: RefFieldOptionsProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};