@webiny/app-headless-cms 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/presentation/fieldRenderers/CmsIconPickerRenderer.js

@@ -0,0 +1,16 @@
+import react from "react";
+import { createFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { IconPicker } from "../../admin/components/IconPicker.js";
+const CmsIconPickerRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement(IconPicker, {
+        label: field.label,
+        description: field.description,
+        value: field.value,
+        onChange: (value)=>{
+            if (null === value) return void field.onChange(null);
+            if ("string" == typeof value) return void field.onChange(value);
+            field.onChange(value.name);
+        }
+    }));
+export { CmsIconPickerRenderer };
+
+//# sourceMappingURL=CmsIconPickerRenderer.js.map

package/presentation/fieldRenderers/CmsIconPickerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/CmsIconPickerRenderer.js","sources":["../../../src/presentation/fieldRenderers/CmsIconPickerRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport { IconPicker } from \"~/admin/components/IconPicker.js\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        cmsIconPicker: { fieldType: \"text\"; settings: undefined };\n    }\n}\n\nexport const CmsIconPickerRenderer = createFieldRenderer<\"cmsIconPicker\">(({ field }) => {\n    return (\n        <IconPicker\n            label={field.label}\n            description={field.description}\n            value={field.value as string | null}\n            onChange={value => {\n                if (value === null) {\n                    field.onChange(null);\n                    return;\n                }\n\n                if (typeof value === \"string\") {\n                    field.onChange(value);\n                    return;\n                }\n\n                field.onChange(value.name);\n            }}\n        />\n    );\n});\n"],"names":["CmsIconPickerRenderer","createFieldRenderer","field","IconPicker","value"],"mappings":";;;AAUO,MAAMA,wBAAwBC,oBAAqC,CAAC,EAAEC,KAAK,EAAE,GACzE,WAAP,GACI,oBAACC,YAAUA;QACP,OAAOD,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,OAAOA,MAAM,KAAK;QAClB,UAAUE,CAAAA;YACN,IAAIA,AAAU,SAAVA,OAAgB,YAChBF,MAAM,QAAQ,CAAC;YAInB,IAAI,AAAiB,YAAjB,OAAOE,OAAoB,YAC3BF,MAAM,QAAQ,CAACE;YAInBF,MAAM,QAAQ,CAACE,MAAM,IAAI;QAC7B"}

package/presentation/fieldRenderers/abstractions.d.ts

@@ -0,0 +1,22 @@
+import { FormModel, FormModelFactory } from "@webiny/app-admin";
+import type { CmsModel, CmsModelField } from "../../types.js";
+export interface ICmsFieldRendererFormBuilder {
+    fields(fn: (fields: FormModelFactory.FieldBuilderRegistry) => Record<string, FormModelFactory.FieldBuilder>): void;
+    layout(fn: (layout: FormModelFactory.LayoutBuilder) => FormModel.LayoutNodeBuilder[]): void;
+}
+export interface ICmsFieldRenderer {
+    readonly rendererName: string;
+    readonly formRenderer: string;
+    readonly name: string;
+    readonly description: string;
+    canUse(context: {
+        field: CmsModelField;
+        model: CmsModel;
+    }): boolean;
+    buildSettingsForm?(form: ICmsFieldRendererFormBuilder): void;
+}
+export declare const CmsFieldRenderer: import("@webiny/di").Abstraction<ICmsFieldRenderer>;
+export declare namespace CmsFieldRenderer {
+    type Interface = ICmsFieldRenderer;
+    type FormBuilder = ICmsFieldRendererFormBuilder;
+}

package/presentation/fieldRenderers/abstractions.js

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

package/presentation/fieldRenderers/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/abstractions.js","sources":["../../../src/presentation/fieldRenderers/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport { FormModel, FormModelFactory } from \"@webiny/app-admin\";\nimport type { CmsModel, CmsModelField } from \"~/types.js\";\n\nexport interface ICmsFieldRendererFormBuilder {\n    fields(\n        fn: (\n            fields: FormModelFactory.FieldBuilderRegistry\n        ) => Record<string, FormModelFactory.FieldBuilder>\n    ): void;\n    layout(fn: (layout: FormModelFactory.LayoutBuilder) => FormModel.LayoutNodeBuilder[]): void;\n}\n\nexport interface ICmsFieldRenderer {\n    readonly rendererName: string;\n    readonly formRenderer: string;\n    readonly name: string;\n    readonly description: string;\n    canUse(context: { field: CmsModelField; model: CmsModel }): boolean;\n    buildSettingsForm?(form: ICmsFieldRendererFormBuilder): void;\n}\n\nexport const CmsFieldRenderer = createAbstraction<ICmsFieldRenderer>(\"CmsFieldRenderer\");\n\nexport namespace CmsFieldRenderer {\n    export type Interface = ICmsFieldRenderer;\n    export type FormBuilder = ICmsFieldRendererFormBuilder;\n}\n"],"names":["CmsFieldRenderer","createAbstraction"],"mappings":";AAsBO,MAAMA,mBAAmBC,kBAAqC"}

package/presentation/fieldRenderers/feature.d.ts

@@ -0,0 +1 @@
+export declare const CmsFieldRendererFeature: import("@webiny/feature/admin").FeatureDefinition<any, []>;

package/presentation/fieldRenderers/feature.js

@@ -0,0 +1,37 @@
+import { createFeature } from "@webiny/feature/admin";
+import { BooleanSwitchRenderer, CheckboxesRenderer, DateTimeInputRenderer, DateTimeInputsRenderer, DynamicZoneRenderer, HiddenRenderer, LexicalTextInputRenderer, LexicalTextInputsRenderer, LongTextRenderer, LongTextsRenderer, NumberInputRenderer, NumberInputsRenderer, ObjectAccordionMultipleRenderer, ObjectAccordionRenderer, ObjectsAccordionRenderer, PassthroughRenderer, RadioButtonsRenderer, RefDetailedMultipleRenderer, RefDetailedSingleRenderer, RefInputRenderer, RefInputsRenderer, RefSimpleMultipleRenderer, RefSimpleSingleRenderer, SelectBoxRenderer, TagsRenderer, TextInputRenderer, TextInputsRenderer } from "../fieldTypes/renderers/index.js";
+const CmsFieldRendererFeature = createFeature({
+    name: "CmsFieldRenderers",
+    register (container) {
+        container.register(TextInputRenderer);
+        container.register(TextInputsRenderer);
+        container.register(TagsRenderer);
+        container.register(LongTextRenderer);
+        container.register(LongTextsRenderer);
+        container.register(NumberInputRenderer);
+        container.register(NumberInputsRenderer);
+        container.register(BooleanSwitchRenderer);
+        container.register(DateTimeInputRenderer);
+        container.register(DateTimeInputsRenderer);
+        container.register(SelectBoxRenderer);
+        container.register(RadioButtonsRenderer);
+        container.register(CheckboxesRenderer);
+        container.register(HiddenRenderer);
+        container.register(PassthroughRenderer);
+        container.register(LexicalTextInputRenderer);
+        container.register(LexicalTextInputsRenderer);
+        container.register(ObjectAccordionRenderer);
+        container.register(ObjectsAccordionRenderer);
+        container.register(ObjectAccordionMultipleRenderer);
+        container.register(DynamicZoneRenderer);
+        container.register(RefInputRenderer);
+        container.register(RefInputsRenderer);
+        container.register(RefSimpleSingleRenderer);
+        container.register(RefSimpleMultipleRenderer);
+        container.register(RefDetailedSingleRenderer);
+        container.register(RefDetailedMultipleRenderer);
+    }
+});
+export { CmsFieldRendererFeature };
+
+//# sourceMappingURL=feature.js.map

package/presentation/fieldRenderers/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/feature.js","sources":["../../../src/presentation/fieldRenderers/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport {\n    TextInputRenderer,\n    TextInputsRenderer,\n    TagsRenderer,\n    LongTextRenderer,\n    LongTextsRenderer,\n    NumberInputRenderer,\n    NumberInputsRenderer,\n    BooleanSwitchRenderer,\n    DateTimeInputRenderer,\n    DateTimeInputsRenderer,\n    SelectBoxRenderer,\n    RadioButtonsRenderer,\n    CheckboxesRenderer,\n    HiddenRenderer,\n    PassthroughRenderer,\n    LexicalTextInputRenderer,\n    LexicalTextInputsRenderer,\n    ObjectAccordionRenderer,\n    ObjectsAccordionRenderer,\n    ObjectAccordionMultipleRenderer,\n    DynamicZoneRenderer,\n    RefInputRenderer,\n    RefInputsRenderer,\n    RefSimpleSingleRenderer,\n    RefSimpleMultipleRenderer,\n    RefDetailedSingleRenderer,\n    RefDetailedMultipleRenderer\n} from \"../fieldTypes/renderers/index.js\";\n\nexport const CmsFieldRendererFeature = createFeature({\n    name: \"CmsFieldRenderers\",\n    register(container) {\n        container.register(TextInputRenderer);\n        container.register(TextInputsRenderer);\n        container.register(TagsRenderer);\n        container.register(LongTextRenderer);\n        container.register(LongTextsRenderer);\n        container.register(NumberInputRenderer);\n        container.register(NumberInputsRenderer);\n        container.register(BooleanSwitchRenderer);\n        container.register(DateTimeInputRenderer);\n        container.register(DateTimeInputsRenderer);\n        container.register(SelectBoxRenderer);\n        container.register(RadioButtonsRenderer);\n        container.register(CheckboxesRenderer);\n        container.register(HiddenRenderer);\n        container.register(PassthroughRenderer);\n        container.register(LexicalTextInputRenderer);\n        container.register(LexicalTextInputsRenderer);\n        container.register(ObjectAccordionRenderer);\n        container.register(ObjectsAccordionRenderer);\n        container.register(ObjectAccordionMultipleRenderer);\n        container.register(DynamicZoneRenderer);\n        container.register(RefInputRenderer);\n        container.register(RefInputsRenderer);\n        container.register(RefSimpleSingleRenderer);\n        container.register(RefSimpleMultipleRenderer);\n        container.register(RefDetailedSingleRenderer);\n        container.register(RefDetailedMultipleRenderer);\n    }\n});\n"],"names":["CmsFieldRendererFeature","createFeature","container","TextInputRenderer","TextInputsRenderer","TagsRenderer","LongTextRenderer","LongTextsRenderer","NumberInputRenderer","NumberInputsRenderer","BooleanSwitchRenderer","DateTimeInputRenderer","DateTimeInputsRenderer","SelectBoxRenderer","RadioButtonsRenderer","CheckboxesRenderer","HiddenRenderer","PassthroughRenderer","LexicalTextInputRenderer","LexicalTextInputsRenderer","ObjectAccordionRenderer","ObjectsAccordionRenderer","ObjectAccordionMultipleRenderer","DynamicZoneRenderer","RefInputRenderer","RefInputsRenderer","RefSimpleSingleRenderer","RefSimpleMultipleRenderer","RefDetailedSingleRenderer","RefDetailedMultipleRenderer"],"mappings":";;AA+BO,MAAMA,0BAA0BC,cAAc;IACjD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC;QACnBD,UAAU,QAAQ,CAACE;QACnBF,UAAU,QAAQ,CAACG;QACnBH,UAAU,QAAQ,CAACI;QACnBJ,UAAU,QAAQ,CAACK;QACnBL,UAAU,QAAQ,CAACM;QACnBN,UAAU,QAAQ,CAACO;QACnBP,UAAU,QAAQ,CAACQ;QACnBR,UAAU,QAAQ,CAACS;QACnBT,UAAU,QAAQ,CAACU;QACnBV,UAAU,QAAQ,CAACW;QACnBX,UAAU,QAAQ,CAACY;QACnBZ,UAAU,QAAQ,CAACa;QACnBb,UAAU,QAAQ,CAACc;QACnBd,UAAU,QAAQ,CAACe;QACnBf,UAAU,QAAQ,CAACgB;QACnBhB,UAAU,QAAQ,CAACiB;QACnBjB,UAAU,QAAQ,CAACkB;QACnBlB,UAAU,QAAQ,CAACmB;QACnBnB,UAAU,QAAQ,CAACoB;QACnBpB,UAAU,QAAQ,CAACqB;QACnBrB,UAAU,QAAQ,CAACsB;QACnBtB,UAAU,QAAQ,CAACuB;QACnBvB,UAAU,QAAQ,CAACwB;QACnBxB,UAAU,QAAQ,CAACyB;QACnBzB,UAAU,QAAQ,CAAC0B;QACnB1B,UAAU,QAAQ,CAAC2B;IACvB;AACJ"}

package/presentation/fieldRenderers/ref/CmsRefDetailedMultipleRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { IFieldVM } from "@webiny/app-admin/features/formModel/abstractions.js";
+import type { RefFieldRendererSettings } from "./types.js";
+declare module "@webiny/app-admin/features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        refDetailedMultiple: {
+            fieldType: "ref";
+            settings: RefFieldRendererSettings;
+        };
+    }
+}
+export declare const CmsRefDetailedMultipleRenderer: React.ComponentType<{
+    field: IFieldVM;
+}>;

package/presentation/fieldRenderers/ref/CmsRefDetailedMultipleRenderer.js

@@ -0,0 +1,176 @@
+import react, { useCallback, useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { createFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { FormComponentErrorMessage, FormComponentLabel } from "@webiny/admin-ui";
+import { RefDetailedPresenterFeature } from "./detailed/feature.js";
+import { EntryCard } from "./components/EntryCard.js";
+import { EntryList } from "./components/EntryList.js";
+import { RefFieldOptions } from "./components/RefFieldOptions.js";
+import { ReferencesDialog } from "./components/ReferencesDialog.js";
+import { NewEntryDrawer } from "./components/NewEntryDrawer.js";
+import { EditEntryDrawer } from "./components/EditEntryDrawer.js";
+import { parseIdentifier } from "@webiny/utils";
+const CmsRefDetailedMultipleRenderer = createFieldRenderer(({ field })=>{
+    const parentContainer = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = parentContainer.createChildContainer();
+        RefDetailedPresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, /*#__PURE__*/ react.createElement(RefDetailedMultipleInner, {
+        field: field
+    }));
+});
+const RefDetailedMultipleInner = observer(({ field })=>{
+    const { presenter } = useFeature(RefDetailedPresenterFeature);
+    const [selectDialogModel, setSelectDialogModel] = useState(null);
+    const [newEntryModelId, setNewEntryModelId] = useState(null);
+    const [editEntry, setEditEntry] = useState(null);
+    const settings = field.rendererSettings;
+    const modelIds = (settings.models || []).map((m)=>m.modelId);
+    const values = Array.isArray(field.value) ? field.value : [];
+    useEffect(()=>{
+        presenter.init({
+            modelIds,
+            multiSelect: true
+        });
+        if (values.length > 0) presenter.resolveValues(values);
+    }, []);
+    const onRemove = useCallback((id)=>{
+        const { id: entryId } = parseIdentifier(id);
+        const newValues = values.filter((v)=>{
+            const { id: vEntryId } = parseIdentifier(v.id);
+            return vEntryId !== entryId;
+        });
+        field.onChange(newValues.length > 0 ? newValues : null);
+    }, [
+        values
+    ]);
+    const onMoveUp = useCallback((index, toTop)=>{
+        if (0 === values.length) return;
+        const newValues = [
+            ...values
+        ];
+        if (toTop) {
+            const [item] = newValues.splice(index, 1);
+            newValues.unshift(item);
+        } else {
+            const temp = newValues[index - 1];
+            newValues[index - 1] = newValues[index];
+            newValues[index] = temp;
+        }
+        field.onChange(newValues);
+    }, [
+        values
+    ]);
+    const onMoveDown = useCallback((index, toBottom)=>{
+        if (0 === values.length) return;
+        const newValues = [
+            ...values
+        ];
+        if (toBottom) {
+            const [item] = newValues.splice(index, 1);
+            newValues.push(item);
+        } else {
+            const temp = newValues[index + 1];
+            newValues[index + 1] = newValues[index];
+            newValues[index] = temp;
+        }
+        field.onChange(newValues);
+    }, [
+        values
+    ]);
+    const onNewRecord = useCallback((modelId)=>{
+        setNewEntryModelId(modelId);
+    }, []);
+    const onExistingRecord = useCallback((modelId)=>{
+        const model = presenter.vm.models.find((m)=>m.modelId === modelId);
+        if (model) setSelectDialogModel(model);
+    }, [
+        presenter.vm.models
+    ]);
+    const onDialogSave = useCallback((selectedValues, entries)=>{
+        presenter.addEntries(entries);
+        field.onChange(selectedValues.length > 0 ? selectedValues : null);
+    }, []);
+    const { validation } = field;
+    const invalid = false === validation.isValid;
+    const disabled = field.disabled;
+    const entryMap = new Map(presenter.vm.entries.map((e)=>[
+            e.entryId,
+            e
+        ]));
+    const orderedEntries = values.map((v)=>{
+        const entryId = v.id.split("#")[0];
+        return entryMap.get(entryId);
+    }).filter((e)=>null != e);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "@container"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-between"
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: field.label,
+        hint: field.help,
+        invalid: invalid,
+        disabled: disabled
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "webiny_ref-field-container"
+    }, /*#__PURE__*/ react.createElement(EntryList, {
+        entries: orderedEntries,
+        loadMore: ()=>presenter.loadMore()
+    }, (entry, index)=>{
+        const isFirst = 0 === index;
+        const isLast = index >= values.length - 1;
+        const model = presenter.vm.models.find((m)=>m.modelId === entry.model.modelId);
+        if (!model) return null;
+        return /*#__PURE__*/ react.createElement(EntryCard, {
+            disabled: disabled,
+            model: model,
+            placement: "multiRef",
+            index: index,
+            entry: entry,
+            onRemove: onRemove,
+            onEdit: setEditEntry,
+            onMoveUp: isFirst ? void 0 : onMoveUp,
+            onMoveDown: isLast ? void 0 : onMoveDown
+        });
+    })), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validation.message,
+        invalid: invalid,
+        disabled: disabled
+    }), values.length > 0 && /*#__PURE__*/ react.createElement("div", {
+        className: "mb-md"
+    }), !disabled && /*#__PURE__*/ react.createElement(RefFieldOptions, {
+        models: presenter.vm.models,
+        onNewRecord: onNewRecord,
+        onLinkExistingRecord: onExistingRecord
+    }), selectDialogModel && /*#__PURE__*/ react.createElement(ReferencesDialog, {
+        model: selectDialogModel,
+        values: values,
+        multiple: true,
+        onSave: onDialogSave,
+        onClose: ()=>setSelectDialogModel(null)
+    }), newEntryModelId && /*#__PURE__*/ react.createElement(NewEntryDrawer, {
+        modelId: newEntryModelId,
+        onClose: ()=>setNewEntryModelId(null),
+        onChange: (ref)=>{
+            field.onChange(values.concat([
+                ref
+            ]).length > 0 ? values.concat([
+                ref
+            ]) : null);
+            setNewEntryModelId(null);
+        }
+    }), editEntry && /*#__PURE__*/ react.createElement(EditEntryDrawer, {
+        modelId: editEntry.model.modelId,
+        entryId: editEntry.id,
+        onClose: ()=>setEditEntry(null),
+        onSaved: (patch)=>presenter.patchEntry(patch)
+    }));
+});
+export { CmsRefDetailedMultipleRenderer };
+
+//# sourceMappingURL=CmsRefDetailedMultipleRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/ref/CmsRefDetailedMultipleRenderer.js","sources":["../../../../src/presentation/fieldRenderers/ref/CmsRefDetailedMultipleRenderer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } 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 { FormComponentErrorMessage, FormComponentLabel } from \"@webiny/admin-ui\";\nimport type { CmsModel } from \"~/types.js\";\nimport type { CmsReferenceEntry, CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport type { RefFieldRendererSettings } from \"./types.js\";\nimport { RefDetailedPresenterFeature } from \"./detailed/feature.js\";\nimport { EntryCard } from \"./components/EntryCard.js\";\nimport { EntryList } from \"./components/EntryList.js\";\nimport { RefFieldOptions } from \"./components/RefFieldOptions.js\";\nimport { ReferencesDialog } from \"./components/ReferencesDialog.js\";\nimport { NewEntryDrawer } from \"./components/NewEntryDrawer.js\";\nimport { EditEntryDrawer } from \"./components/EditEntryDrawer.js\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        refDetailedMultiple: { fieldType: \"ref\"; settings: RefFieldRendererSettings };\n    }\n}\n\nexport const CmsRefDetailedMultipleRenderer = createFieldRenderer<\"refDetailedMultiple\">(\n    ({ field }) => {\n        const parentContainer = useContainer();\n\n        const scopedContainer = useMemo(() => {\n            const child = parentContainer.createChildContainer();\n            RefDetailedPresenterFeature.register(child);\n            return child;\n        }, []);\n\n        return (\n            <DiContainerProvider container={scopedContainer}>\n                <RefDetailedMultipleInner field={field} />\n            </DiContainerProvider>\n        );\n    }\n);\n\ninterface InnerFieldProps {\n    field: IFieldVM & { rendererSettings: RefFieldRendererSettings };\n}\n\nconst RefDetailedMultipleInner = observer(({ field }: InnerFieldProps) => {\n    const { presenter } = useFeature(RefDetailedPresenterFeature);\n\n    const [selectDialogModel, setSelectDialogModel] = useState<CmsModel | null>(null);\n    const [newEntryModelId, setNewEntryModelId] = useState<string | null>(null);\n    const [editEntry, setEditEntry] = useState<CmsReferenceEntry | null>(null);\n\n    const settings = field.rendererSettings;\n    const modelIds = (settings.models || []).map(m => m.modelId);\n\n    const values: CmsReferenceValue[] = Array.isArray(field.value) ? field.value : [];\n\n    useEffect(() => {\n        presenter.init({ modelIds, multiSelect: true });\n        if (values.length > 0) {\n            presenter.resolveValues(values);\n        }\n    }, []);\n\n    const onRemove = useCallback(\n        (id: string) => {\n            const { id: entryId } = parseIdentifier(id);\n            const newValues = values.filter(v => {\n                const { id: vEntryId } = parseIdentifier(v.id);\n                return vEntryId !== entryId;\n            });\n            field.onChange(newValues.length > 0 ? newValues : null);\n        },\n        [values]\n    );\n\n    const onMoveUp = useCallback(\n        (index: number, toTop?: boolean) => {\n            if (values.length === 0) {\n                return;\n            }\n            const newValues = [...values];\n            if (toTop) {\n                const [item] = newValues.splice(index, 1);\n                newValues.unshift(item);\n            } else {\n                const temp = newValues[index - 1];\n                newValues[index - 1] = newValues[index];\n                newValues[index] = temp;\n            }\n            field.onChange(newValues);\n        },\n        [values]\n    );\n\n    const onMoveDown = useCallback(\n        (index: number, toBottom?: boolean) => {\n            if (values.length === 0) {\n                return;\n            }\n            const newValues = [...values];\n            if (toBottom) {\n                const [item] = newValues.splice(index, 1);\n                newValues.push(item);\n            } else {\n                const temp = newValues[index + 1];\n                newValues[index + 1] = newValues[index];\n                newValues[index] = temp;\n            }\n            field.onChange(newValues);\n        },\n        [values]\n    );\n\n    const onNewRecord = useCallback((modelId: string) => {\n        setNewEntryModelId(modelId);\n    }, []);\n\n    const onExistingRecord = useCallback(\n        (modelId: string) => {\n            const model = presenter.vm.models.find(m => m.modelId === modelId);\n            if (model) {\n                setSelectDialogModel(model);\n            }\n        },\n        [presenter.vm.models]\n    );\n\n    const onDialogSave = useCallback(\n        (selectedValues: CmsReferenceValue[], entries: CmsReferenceEntry[]) => {\n            presenter.addEntries(entries);\n            field.onChange(selectedValues.length > 0 ? selectedValues : null);\n        },\n        []\n    );\n\n    const { validation } = field;\n    const invalid = validation.isValid === false;\n    const disabled = field.disabled;\n\n    const entryMap = new Map(presenter.vm.entries.map(e => [e.entryId, e]));\n    const orderedEntries = values\n        .map(v => {\n            const entryId = v.id.split(\"#\")[0];\n            return entryMap.get(entryId);\n        })\n        .filter((e): e is CmsReferenceEntry => e != null);\n\n    return (\n        <div className={\"@container\"}>\n            <div className={\"flex items-center justify-between\"}>\n                <FormComponentLabel\n                    text={field.label}\n                    hint={field.help}\n                    invalid={invalid}\n                    disabled={disabled}\n                />\n            </div>\n            <div className={\"webiny_ref-field-container\"}>\n                <EntryList entries={orderedEntries} loadMore={() => presenter.loadMore()}>\n                    {(entry, index) => {\n                        const isFirst = index === 0;\n                        const isLast = index >= values.length - 1;\n                        const model = presenter.vm.models.find(\n                            m => m.modelId === entry.model.modelId\n                        );\n                        if (!model) {\n                            return null;\n                        }\n                        return (\n                            <EntryCard\n                                disabled={disabled}\n                                model={model}\n                                placement=\"multiRef\"\n                                index={index}\n                                entry={entry}\n                                onRemove={onRemove}\n                                onEdit={setEditEntry}\n                                onMoveUp={!isFirst ? onMoveUp : undefined}\n                                onMoveDown={!isLast ? onMoveDown : undefined}\n                            />\n                        );\n                    }}\n                </EntryList>\n            </div>\n            <FormComponentErrorMessage\n                text={validation.message}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            {values.length > 0 && <div className=\"mb-md\" />}\n            {!disabled && (\n                <RefFieldOptions\n                    models={presenter.vm.models}\n                    onNewRecord={onNewRecord}\n                    onLinkExistingRecord={onExistingRecord}\n                />\n            )}\n            {selectDialogModel && (\n                <ReferencesDialog\n                    model={selectDialogModel}\n                    values={values}\n                    multiple={true}\n                    onSave={onDialogSave}\n                    onClose={() => setSelectDialogModel(null)}\n                />\n            )}\n            {newEntryModelId && (\n                <NewEntryDrawer\n                    modelId={newEntryModelId}\n                    onClose={() => setNewEntryModelId(null)}\n                    onChange={ref => {\n                        field.onChange(\n                            values.concat([ref]).length > 0 ? values.concat([ref]) : null\n                        );\n                        setNewEntryModelId(null);\n                    }}\n                />\n            )}\n            {editEntry && (\n                <EditEntryDrawer\n                    modelId={editEntry.model.modelId}\n                    entryId={editEntry.id}\n                    onClose={() => setEditEntry(null)}\n                    onSaved={patch => presenter.patchEntry(patch)}\n                />\n            )}\n        </div>\n    );\n});\n"],"names":["CmsRefDetailedMultipleRenderer","createFieldRenderer","field","parentContainer","useContainer","scopedContainer","useMemo","child","RefDetailedPresenterFeature","DiContainerProvider","RefDetailedMultipleInner","observer","presenter","useFeature","selectDialogModel","setSelectDialogModel","useState","newEntryModelId","setNewEntryModelId","editEntry","setEditEntry","settings","modelIds","m","values","Array","useEffect","onRemove","useCallback","id","entryId","parseIdentifier","newValues","v","vEntryId","onMoveUp","index","toTop","item","temp","onMoveDown","toBottom","onNewRecord","modelId","onExistingRecord","model","onDialogSave","selectedValues","entries","validation","invalid","disabled","entryMap","Map","e","orderedEntries","FormComponentLabel","EntryList","entry","isFirst","isLast","EntryCard","undefined","FormComponentErrorMessage","RefFieldOptions","ReferencesDialog","NewEntryDrawer","ref","EditEntryDrawer","patch"],"mappings":"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"}

package/presentation/fieldRenderers/ref/CmsRefDetailedSingleRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { IFieldVM } from "@webiny/app-admin/features/formModel/abstractions.js";
+import type { RefFieldRendererSettings } from "./types.js";
+declare module "@webiny/app-admin/features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        refDetailedSingle: {
+            fieldType: "ref";
+            settings: RefFieldRendererSettings;
+        };
+    }
+}
+export declare const CmsRefDetailedSingleRenderer: React.ComponentType<{
+    field: IFieldVM;
+}>;

package/presentation/fieldRenderers/ref/CmsRefDetailedSingleRenderer.js

@@ -0,0 +1,125 @@
+import react, { useCallback, useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { createFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { FormComponentErrorMessage, FormComponentLabel, OverlayLoader } from "@webiny/admin-ui";
+import { RefDetailedPresenterFeature } from "./detailed/feature.js";
+import { EntryCard } from "./components/EntryCard.js";
+import { RefFieldOptions } from "./components/RefFieldOptions.js";
+import { ReferencesDialog } from "./components/ReferencesDialog.js";
+import { NewEntryDrawer } from "./components/NewEntryDrawer.js";
+import { EditEntryDrawer } from "./components/EditEntryDrawer.js";
+const CmsRefDetailedSingleRenderer = createFieldRenderer(({ field })=>{
+    const parentContainer = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = parentContainer.createChildContainer();
+        RefDetailedPresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, /*#__PURE__*/ react.createElement(RefDetailedSingleInner, {
+        field: field
+    }));
+});
+const RefDetailedSingleInner = observer(({ field })=>{
+    const { presenter } = useFeature(RefDetailedPresenterFeature);
+    const [selectDialogModel, setSelectDialogModel] = useState(null);
+    const [newEntryModelId, setNewEntryModelId] = useState(null);
+    const [editEntry, setEditEntry] = useState(null);
+    const settings = field.rendererSettings;
+    const modelIds = (settings.models || []).map((m)=>m.modelId);
+    useEffect(()=>{
+        presenter.init({
+            modelIds,
+            multiSelect: false
+        });
+    }, []);
+    const value = field.value;
+    useEffect(()=>{
+        if (value) presenter.resolveValues([
+            value
+        ]);
+        else presenter.resolveValues([]);
+    }, [
+        value?.id
+    ]);
+    const onRemove = useCallback(()=>{
+        field.onChange(null);
+    }, []);
+    const onNewRecord = useCallback((modelId)=>{
+        setNewEntryModelId(modelId);
+    }, []);
+    const onExistingRecord = useCallback((modelId)=>{
+        const model = presenter.vm.models.find((m)=>m.modelId === modelId);
+        if (model) setSelectDialogModel(model);
+    }, [
+        presenter.vm.models
+    ]);
+    const onDialogSave = useCallback((values, entries)=>{
+        presenter.addEntries(entries);
+        if (0 === values.length) field.onChange(null);
+        else field.onChange(values[0]);
+    }, []);
+    const { validation } = field;
+    const invalid = false === validation.isValid;
+    const disabled = field.disabled;
+    const entry = presenter.vm.entries[0];
+    const models = presenter.vm.models;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "@container"
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: field.label,
+        hint: field.help,
+        invalid: invalid,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "webiny_ref-field-container"
+    }, presenter.vm.loading && /*#__PURE__*/ react.createElement(OverlayLoader, {
+        size: "md"
+    }), entry && /*#__PURE__*/ react.createElement(EntryCard, {
+        model: presenter.vm.models.find((m)=>m.modelId === entry.model.modelId) || {
+            modelId: entry.model.modelId,
+            name: entry.model.name
+        },
+        placement: "singleRefField",
+        index: 0,
+        entry: entry,
+        onRemove: onRemove,
+        onEdit: setEditEntry,
+        disabled: disabled
+    })), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validation.message,
+        invalid: invalid,
+        disabled: disabled
+    }), entry && /*#__PURE__*/ react.createElement("div", {
+        className: "mb-md"
+    }), !disabled && /*#__PURE__*/ react.createElement(RefFieldOptions, {
+        models: models,
+        onNewRecord: onNewRecord,
+        onLinkExistingRecord: onExistingRecord
+    }), selectDialogModel && /*#__PURE__*/ react.createElement(ReferencesDialog, {
+        model: selectDialogModel,
+        values: value ? [
+            value
+        ] : [],
+        multiple: false,
+        onSave: onDialogSave,
+        onClose: ()=>setSelectDialogModel(null)
+    }), newEntryModelId && /*#__PURE__*/ react.createElement(NewEntryDrawer, {
+        modelId: newEntryModelId,
+        onClose: ()=>setNewEntryModelId(null),
+        onChange: (ref)=>{
+            field.onChange(ref);
+            setNewEntryModelId(null);
+        }
+    }), editEntry && /*#__PURE__*/ react.createElement(EditEntryDrawer, {
+        modelId: editEntry.model.modelId,
+        entryId: editEntry.id,
+        onClose: ()=>setEditEntry(null),
+        onSaved: (patch)=>presenter.patchEntry(patch)
+    }));
+});
+export { CmsRefDetailedSingleRenderer };
+
+//# sourceMappingURL=CmsRefDetailedSingleRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/ref/CmsRefDetailedSingleRenderer.js","sources":["../../../../src/presentation/fieldRenderers/ref/CmsRefDetailedSingleRenderer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } 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 { FormComponentErrorMessage, FormComponentLabel, OverlayLoader } from \"@webiny/admin-ui\";\nimport type { CmsModel } from \"~/types.js\";\nimport type { CmsReferenceEntry, CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport type { RefFieldRendererSettings } from \"./types.js\";\nimport { RefDetailedPresenterFeature } from \"./detailed/feature.js\";\nimport { EntryCard } from \"./components/EntryCard.js\";\nimport { RefFieldOptions } from \"./components/RefFieldOptions.js\";\nimport { ReferencesDialog } from \"./components/ReferencesDialog.js\";\nimport { NewEntryDrawer } from \"./components/NewEntryDrawer.js\";\nimport { EditEntryDrawer } from \"./components/EditEntryDrawer.js\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        refDetailedSingle: { fieldType: \"ref\"; settings: RefFieldRendererSettings };\n    }\n}\n\nexport const CmsRefDetailedSingleRenderer = createFieldRenderer<\"refDetailedSingle\">(\n    ({ field }) => {\n        const parentContainer = useContainer();\n\n        const scopedContainer = useMemo(() => {\n            const child = parentContainer.createChildContainer();\n            RefDetailedPresenterFeature.register(child);\n            return child;\n        }, []);\n\n        return (\n            <DiContainerProvider container={scopedContainer}>\n                <RefDetailedSingleInner field={field} />\n            </DiContainerProvider>\n        );\n    }\n);\n\ninterface InnerFieldProps {\n    field: IFieldVM & { rendererSettings: RefFieldRendererSettings };\n}\n\nconst RefDetailedSingleInner = observer(({ field }: InnerFieldProps) => {\n    const { presenter } = useFeature(RefDetailedPresenterFeature);\n\n    const [selectDialogModel, setSelectDialogModel] = useState<CmsModel | null>(null);\n    const [newEntryModelId, setNewEntryModelId] = useState<string | null>(null);\n    const [editEntry, setEditEntry] = useState<CmsReferenceEntry | null>(null);\n\n    const settings = field.rendererSettings;\n    const modelIds = (settings.models || []).map(m => m.modelId);\n\n    useEffect(() => {\n        presenter.init({ modelIds, multiSelect: false });\n    }, []);\n\n    const value = field.value as CmsReferenceValue | null;\n\n    useEffect(() => {\n        if (value) {\n            presenter.resolveValues([value]);\n        } else {\n            presenter.resolveValues([]);\n        }\n    }, [value?.id]);\n\n    const onRemove = useCallback(() => {\n        field.onChange(null);\n    }, []);\n\n    const onNewRecord = useCallback((modelId: string) => {\n        setNewEntryModelId(modelId);\n    }, []);\n\n    const onExistingRecord = useCallback(\n        (modelId: string) => {\n            const model = presenter.vm.models.find(m => m.modelId === modelId);\n            if (model) {\n                setSelectDialogModel(model);\n            }\n        },\n        [presenter.vm.models]\n    );\n\n    const onDialogSave = useCallback(\n        (values: CmsReferenceValue[], entries: CmsReferenceEntry[]) => {\n            presenter.addEntries(entries);\n            if (values.length === 0) {\n                field.onChange(null);\n            } else {\n                field.onChange(values[0]);\n            }\n        },\n        []\n    );\n\n    const { validation } = field;\n    const invalid = validation.isValid === false;\n    const disabled = field.disabled;\n    const entry = presenter.vm.entries[0];\n    const models = presenter.vm.models;\n\n    return (\n        <div className={\"@container\"}>\n            <FormComponentLabel\n                text={field.label}\n                hint={field.help}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <div className={\"webiny_ref-field-container\"}>\n                {presenter.vm.loading && <OverlayLoader size={\"md\"} />}\n                {entry && (\n                    <EntryCard\n                        model={\n                            presenter.vm.models.find(m => m.modelId === entry.model.modelId) ||\n                            ({\n                                modelId: entry.model.modelId,\n                                name: entry.model.name\n                            } as CmsModel)\n                        }\n                        placement=\"singleRefField\"\n                        index={0}\n                        entry={entry}\n                        onRemove={onRemove}\n                        onEdit={setEditEntry}\n                        disabled={disabled}\n                    />\n                )}\n            </div>\n            <FormComponentErrorMessage\n                text={validation.message}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            {entry && <div className=\"mb-md\" />}\n            {!disabled && (\n                <RefFieldOptions\n                    models={models}\n                    onNewRecord={onNewRecord}\n                    onLinkExistingRecord={onExistingRecord}\n                />\n            )}\n            {selectDialogModel && (\n                <ReferencesDialog\n                    model={selectDialogModel}\n                    values={value ? [value] : []}\n                    multiple={false}\n                    onSave={onDialogSave}\n                    onClose={() => setSelectDialogModel(null)}\n                />\n            )}\n            {newEntryModelId && (\n                <NewEntryDrawer\n                    modelId={newEntryModelId}\n                    onClose={() => setNewEntryModelId(null)}\n                    onChange={ref => {\n                        field.onChange(ref);\n                        setNewEntryModelId(null);\n                    }}\n                />\n            )}\n            {editEntry && (\n                <EditEntryDrawer\n                    modelId={editEntry.model.modelId}\n                    entryId={editEntry.id}\n                    onClose={() => setEditEntry(null)}\n                    onSaved={patch => presenter.patchEntry(patch)}\n                />\n            )}\n        </div>\n    );\n});\n"],"names":["CmsRefDetailedSingleRenderer","createFieldRenderer","field","parentContainer","useContainer","scopedContainer","useMemo","child","RefDetailedPresenterFeature","DiContainerProvider","RefDetailedSingleInner","observer","presenter","useFeature","selectDialogModel","setSelectDialogModel","useState","newEntryModelId","setNewEntryModelId","editEntry","setEditEntry","settings","modelIds","m","useEffect","value","onRemove","useCallback","onNewRecord","modelId","onExistingRecord","model","onDialogSave","values","entries","validation","invalid","disabled","entry","models","FormComponentLabel","OverlayLoader","EntryCard","FormComponentErrorMessage","RefFieldOptions","ReferencesDialog","NewEntryDrawer","ref","EditEntryDrawer","patch"],"mappings":"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"}

package/presentation/fieldRenderers/ref/CmsRefInputRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { IFieldVM } from "@webiny/app-admin/features/formModel/abstractions.js";
+import type { RefFieldRendererSettings } from "./types.js";
+declare module "@webiny/app-admin/features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        refInput: {
+            fieldType: "ref";
+            settings: RefFieldRendererSettings;
+        };
+    }
+}
+export declare const CmsRefInputRenderer: React.ComponentType<{
+    field: IFieldVM;
+}>;

package/presentation/fieldRenderers/ref/CmsRefInputRenderer.js

@@ -0,0 +1,61 @@
+import react, { useEffect, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { createFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { AutoComplete } from "@webiny/admin-ui";
+import { RefSingleAutocompletePresenterFeature } from "./autocomplete/single/feature.js";
+const CmsRefInputRenderer = createFieldRenderer(({ field })=>{
+    const parentContainer = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = parentContainer.createChildContainer();
+        RefSingleAutocompletePresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, /*#__PURE__*/ react.createElement(RefInputInner, {
+        field: field
+    }));
+});
+const RefInputInner = observer(({ field })=>{
+    const { presenter } = useFeature(RefSingleAutocompletePresenterFeature);
+    const settings = field.rendererSettings;
+    const modelIds = (settings.models || []).map((m)=>m.modelId);
+    const value = field.value;
+    useEffect(()=>{
+        presenter.init({
+            modelIds,
+            value
+        });
+    }, []);
+    const vm = presenter.vm;
+    return /*#__PURE__*/ react.createElement(AutoComplete, {
+        label: field.label,
+        description: field.description,
+        note: field.note,
+        hint: field.help,
+        disabled: field.disabled,
+        loading: vm.loading,
+        value: vm.value,
+        options: vm.options,
+        validation: field.validation,
+        onValueSearch: (query)=>presenter.search(query),
+        onValueChange: (selectedEntryId)=>{
+            if (!selectedEntryId) {
+                presenter.clear();
+                field.onChange(null);
+                return;
+            }
+            const ref = presenter.select(selectedEntryId);
+            if (ref) field.onChange(ref);
+        },
+        onValueReset: ()=>{
+            presenter.clear();
+            field.onChange(null);
+        },
+        displayResetAction: vm.canReset
+    });
+});
+export { CmsRefInputRenderer };
+
+//# sourceMappingURL=CmsRefInputRenderer.js.map

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

@@ -0,0 +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"}

package/presentation/fieldRenderers/ref/CmsRefInputsRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { IFieldVM } from "@webiny/app-admin/features/formModel/abstractions.js";
+import type { RefFieldRendererSettings } from "./types.js";
+declare module "@webiny/app-admin/features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        refInputs: {
+            fieldType: "ref";
+            settings: RefFieldRendererSettings;
+        };
+    }
+}
+export declare const CmsRefInputsRenderer: React.ComponentType<{
+    field: IFieldVM;
+}>;