@webiny/app-headless-cms 5.37.2-beta.0 → 5.37.2-beta.2

package/admin/plugins/fieldRenderers/ref/advanced/components/ReferencesDialog.js

@@ -10,17 +10,17 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _DialogHeader = require("./dialog/DialogHeader");
 var _Search = require("./Search");
 var _Entry = require("./Entry");
 var _Dialog = require("../../../../../components/Dialog");
 var _Button = require("@webiny/ui/Button");
 var _appAdmin = require("@webiny/app-admin");
 var _utils = require("@webiny/utils");
-var _Dialog2 = require("./dialog/Dialog");
 var _Loader = require("./Loader");
 var _useEntries2 = require("../hooks/useEntries");
 var _Entries = require("./Entries");
+var _Dialog2 = require("../../components/dialog/Dialog");
+var _DialogHeader = require("../../components/dialog/DialogHeader");
 var Container = /*#__PURE__*/(0, _styled.default)("div", {
   target: "er576qx0",
   label: "Container"

package/admin/plugins/fieldRenderers/ref/advanced/components/ReferencesDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_styled","_interopRequireDefault","_DialogHeader","_Search","_Entry","_Dialog","_Button","_appAdmin","_utils","_Dialog2","_Loader","_useEntries2","_Entries","Container","styled","target","label","width","boxSizing","padding","Content","display","flex","flexDirection","position","minHeight","backgroundColor","border","overflowX","DialogContent","BaseDialogContent","isSelected","entryId","values","some","value","_parseIdentifier","parseIdentifier","id","valueEntryId","ReferencesDialog","props","contentModel","onDialogClose","storeValues","initialValues","multiple","_useSnackbar","useSnackbar","showSnackbar","_useState","useState","_useState2","_slicedToArray2","default","setValues","onChange","useCallback","reference","_parseIdentifier2","referenceEntryId","_values","_parseIdentifier3","newValues","filter","_parseIdentifier4","length","concat","_toConsumableArray2","onDialogSave","_useEntries","useEntries","model","limit","entries","loading","error","runSearch","loadMore","useEffect","debouncedSearch","useRef","onInput","ev","String","trim","current","clearTimeout","setTimeout","createElement","Fragment","Dialog","open","onClose","DialogHeader","Search","AbsoluteLoader","Entries","entry","Entry","key","selected","DialogActions","ButtonDefault","onClick","ButtonPrimary","exports"],"sources":["ReferencesDialog.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DialogHeader } from \"./dialog/DialogHeader\";\nimport { Search } from \"./Search\";\nimport { Entry } from \"./Entry\";\nimport { DialogActions, DialogContent as BaseDialogContent } from \"~/admin/components/Dialog\";\nimport { CmsModelFieldRendererProps } from \"~/types\";\nimport { CmsReferenceValue } from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport { Dialog } from \"./dialog/Dialog\";\nimport { AbsoluteLoader } from \"~/admin/plugins/fieldRenderers/ref/advanced/components/Loader\";\nimport { useEntries } from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries\";\nimport { Entries } from \"./Entries\";\n\nconst Container = styled(\"div\")({\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    padding: \"20px\"\n});\n\nconst Content = styled(\"div\")({\n    display: \"flex\",\n    flex: \"1\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    width: \"100%\",\n    minHeight: \"20px\",\n    boxSizing: \"border-box\",\n    padding: \"20px 0 20px 20px\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    overflowX: \"hidden\"\n});\n\nconst DialogContent = styled(BaseDialogContent)({\n    padding: \"0 !important\"\n});\n\nconst isSelected = (entryId: string, values: CmsReferenceValue[]) => {\n    if (!entryId) {\n        return false;\n    }\n    return values.some(value => {\n        const { id: valueEntryId } = parseIdentifier(value.id);\n        return entryId === valueEntryId;\n    });\n};\n\ninterface Props extends CmsModelFieldRendererProps {\n    values?: CmsReferenceValue[] | null;\n    onDialogClose: () => void;\n    storeValues: (values: CmsReferenceValue[]) => void;\n    multiple: boolean;\n}\n\nexport const ReferencesDialog: React.VFC<Props> = props => {\n    const { contentModel, onDialogClose, storeValues, values: initialValues, multiple } = props;\n    const { showSnackbar } = useSnackbar();\n\n    const [values, setValues] = useState<CmsReferenceValue[]>(initialValues || []);\n\n    /**\n     * On change needs to handle the adding or removing of a reference.\n     *\n     * This is for both single and multiple reference fields.\n     */\n    const onChange = useCallback(\n        (reference: CmsReferenceValue) => {\n            const { id: referenceEntryId } = parseIdentifier(reference.id);\n            /**\n             * Let's handle the single usage first as it is quite simple.\n             */\n            if (!multiple) {\n                const [value] = values;\n                if (!value?.id) {\n                    setValues([reference]);\n                    return;\n                }\n                const { id: valueEntryId } = parseIdentifier(value.id);\n                if (referenceEntryId === valueEntryId) {\n                    setValues([]);\n                    return;\n                }\n                setValues([reference]);\n                return;\n            }\n\n            const newValues = values.filter(value => {\n                if (!value?.id) {\n                    return false;\n                }\n                const { id: valueEntryId } = parseIdentifier(value.id);\n                return referenceEntryId !== valueEntryId;\n            });\n            if (newValues.length === values.length) {\n                setValues([...values, reference]);\n                return;\n            }\n            setValues(newValues);\n        },\n        [setValues, values]\n    );\n\n    const onDialogSave = useCallback(() => {\n        storeValues(values);\n        onDialogClose();\n    }, [values]);\n    /**\n     * Searching and list of reference entries.\n     */\n    const { entries, loading, error, runSearch, loadMore } = useEntries({\n        model: contentModel,\n        limit: 10\n    });\n\n    useEffect(() => {\n        runSearch(\"\");\n    }, []);\n\n    useEffect(() => {\n        if (!error) {\n            return;\n        }\n        showSnackbar(error);\n    }, [error]);\n\n    const debouncedSearch = useRef<number | null>(null);\n\n    const onInput = useCallback(ev => {\n        const value = (String(ev.target.value) || \"\").trim();\n        if (debouncedSearch.current) {\n            clearTimeout(debouncedSearch.current);\n            debouncedSearch.current = null;\n        }\n        /**\n         * We can safely cast as setTimeout really produces a number.\n         * There is an error while coding because Storm thinks this is NodeJS timeout.\n         */\n        debouncedSearch.current = setTimeout(() => {\n            runSearch(value);\n        }, 200) as unknown as number;\n    }, []);\n\n    return (\n        <>\n            <Dialog open={true} onClose={onDialogClose}>\n                <DialogHeader model={contentModel} onClose={onDialogClose} />\n                <DialogContent>\n                    <Container>\n                        <Search onInput={onInput} />\n                        <Content>\n                            {loading && <AbsoluteLoader />}\n                            <Entries entries={entries} loadMore={loadMore}>\n                                {entry => {\n                                    return (\n                                        <Entry\n                                            model={contentModel}\n                                            key={`reference-entry-${entry.id}`}\n                                            entry={entry}\n                                            selected={isSelected(entry.entryId, values)}\n                                            onChange={onChange}\n                                        />\n                                    );\n                                }}\n                            </Entries>\n                        </Content>\n                    </Container>\n                </DialogContent>\n                <DialogActions>\n                    <ButtonDefault onClick={onDialogClose}>Cancel</ButtonDefault>\n                    <ButtonPrimary onClick={onDialogSave}>Save</ButtonPrimary>\n                </DialogActions>\n            </Dialog>\n        </>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_styled","_interopRequireDefault","_Search","_Entry","_Dialog","_Button","_appAdmin","_utils","_Loader","_useEntries2","_Entries","_Dialog2","_DialogHeader","Container","styled","target","label","width","boxSizing","padding","Content","display","flex","flexDirection","position","minHeight","backgroundColor","border","overflowX","DialogContent","BaseDialogContent","isSelected","entryId","values","some","value","_parseIdentifier","parseIdentifier","id","valueEntryId","ReferencesDialog","props","contentModel","onDialogClose","storeValues","initialValues","multiple","_useSnackbar","useSnackbar","showSnackbar","_useState","useState","_useState2","_slicedToArray2","default","setValues","onChange","useCallback","reference","_parseIdentifier2","referenceEntryId","_values","_parseIdentifier3","newValues","filter","_parseIdentifier4","length","concat","_toConsumableArray2","onDialogSave","_useEntries","useEntries","model","limit","entries","loading","error","runSearch","loadMore","useEffect","debouncedSearch","useRef","onInput","ev","String","trim","current","clearTimeout","setTimeout","createElement","Fragment","Dialog","open","onClose","DialogHeader","Search","AbsoluteLoader","Entries","entry","Entry","key","selected","DialogActions","ButtonDefault","onClick","ButtonPrimary","exports"],"sources":["ReferencesDialog.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Search } from \"./Search\";\nimport { Entry } from \"./Entry\";\nimport { DialogActions, DialogContent as BaseDialogContent } from \"~/admin/components/Dialog\";\nimport { CmsModelFieldRendererProps } from \"~/types\";\nimport { CmsReferenceValue } from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport { AbsoluteLoader } from \"~/admin/plugins/fieldRenderers/ref/advanced/components/Loader\";\nimport { useEntries } from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries\";\nimport { Entries } from \"./Entries\";\nimport { Dialog } from \"~/admin/plugins/fieldRenderers/ref/components/dialog/Dialog\";\nimport { DialogHeader } from \"~/admin/plugins/fieldRenderers/ref/components/dialog/DialogHeader\";\n\nconst Container = styled(\"div\")({\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    padding: \"20px\"\n});\n\nconst Content = styled(\"div\")({\n    display: \"flex\",\n    flex: \"1\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    width: \"100%\",\n    minHeight: \"20px\",\n    boxSizing: \"border-box\",\n    padding: \"20px 0 20px 20px\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    overflowX: \"hidden\"\n});\n\nconst DialogContent = styled(BaseDialogContent)({\n    padding: \"0 !important\"\n});\n\nconst isSelected = (entryId: string, values: CmsReferenceValue[]) => {\n    if (!entryId) {\n        return false;\n    }\n    return values.some(value => {\n        const { id: valueEntryId } = parseIdentifier(value.id);\n        return entryId === valueEntryId;\n    });\n};\n\ninterface Props extends CmsModelFieldRendererProps {\n    values?: CmsReferenceValue[] | null;\n    onDialogClose: () => void;\n    storeValues: (values: CmsReferenceValue[]) => void;\n    multiple: boolean;\n}\n\nexport const ReferencesDialog: React.VFC<Props> = props => {\n    const { contentModel, onDialogClose, storeValues, values: initialValues, multiple } = props;\n    const { showSnackbar } = useSnackbar();\n\n    const [values, setValues] = useState<CmsReferenceValue[]>(initialValues || []);\n\n    /**\n     * On change needs to handle the adding or removing of a reference.\n     *\n     * This is for both single and multiple reference fields.\n     */\n    const onChange = useCallback(\n        (reference: CmsReferenceValue) => {\n            const { id: referenceEntryId } = parseIdentifier(reference.id);\n            /**\n             * Let's handle the single usage first as it is quite simple.\n             */\n            if (!multiple) {\n                const [value] = values;\n                if (!value?.id) {\n                    setValues([reference]);\n                    return;\n                }\n                const { id: valueEntryId } = parseIdentifier(value.id);\n                if (referenceEntryId === valueEntryId) {\n                    setValues([]);\n                    return;\n                }\n                setValues([reference]);\n                return;\n            }\n\n            const newValues = values.filter(value => {\n                if (!value?.id) {\n                    return false;\n                }\n                const { id: valueEntryId } = parseIdentifier(value.id);\n                return referenceEntryId !== valueEntryId;\n            });\n            if (newValues.length === values.length) {\n                setValues([...values, reference]);\n                return;\n            }\n            setValues(newValues);\n        },\n        [setValues, values]\n    );\n\n    const onDialogSave = useCallback(() => {\n        storeValues(values);\n        onDialogClose();\n    }, [values]);\n    /**\n     * Searching and list of reference entries.\n     */\n    const { entries, loading, error, runSearch, loadMore } = useEntries({\n        model: contentModel,\n        limit: 10\n    });\n\n    useEffect(() => {\n        runSearch(\"\");\n    }, []);\n\n    useEffect(() => {\n        if (!error) {\n            return;\n        }\n        showSnackbar(error);\n    }, [error]);\n\n    const debouncedSearch = useRef<number | null>(null);\n\n    const onInput = useCallback(ev => {\n        const value = (String(ev.target.value) || \"\").trim();\n        if (debouncedSearch.current) {\n            clearTimeout(debouncedSearch.current);\n            debouncedSearch.current = null;\n        }\n        /**\n         * We can safely cast as setTimeout really produces a number.\n         * There is an error while coding because Storm thinks this is NodeJS timeout.\n         */\n        debouncedSearch.current = setTimeout(() => {\n            runSearch(value);\n        }, 200) as unknown as number;\n    }, []);\n\n    return (\n        <>\n            <Dialog open={true} onClose={onDialogClose}>\n                <DialogHeader model={contentModel} onClose={onDialogClose} />\n                <DialogContent>\n                    <Container>\n                        <Search onInput={onInput} />\n                        <Content>\n                            {loading && <AbsoluteLoader />}\n                            <Entries entries={entries} loadMore={loadMore}>\n                                {entry => {\n                                    return (\n                                        <Entry\n                                            model={contentModel}\n                                            key={`reference-entry-${entry.id}`}\n                                            entry={entry}\n                                            selected={isSelected(entry.entryId, values)}\n                                            onChange={onChange}\n                                        />\n                                    );\n                                }}\n                            </Entries>\n                        </Content>\n                    </Container>\n                </DialogContent>\n                <DialogActions>\n                    <ButtonDefault onClick={onDialogClose}>Cancel</ButtonDefault>\n                    <ButtonPrimary onClick={onDialogSave}>Save</ButtonPrimary>\n                </DialogActions>\n            </Dialog>\n        </>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/detailedReferenceRenderer.d.ts

@@ -1,2 +1,2 @@
-import { CmsEditorFieldRendererPlugin } from "../../../../../types";
-export declare const createAdvancedSingleRenderer: () => CmsEditorFieldRendererPlugin;
+import { CmsModelFieldRendererPlugin } from "../../../../../types";
+export declare const createAdvancedSingleRenderer: () => CmsModelFieldRendererPlugin;

package/admin/plugins/fieldRenderers/ref/advanced/detailedReferenceRenderer.js

@@ -9,7 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _i18n = require("@webiny/app/i18n");
 var _AdvancedSingleReferenceField = require("./components/AdvancedSingleReferenceField");
-var _useNewRefEntryDialog = require("../hooks/useNewRefEntryDialog");
 var _templateObject, _templateObject2;
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
 var createAdvancedSingleRenderer = function createAdvancedSingleRenderer() {
@@ -31,13 +30,13 @@ var createAdvancedSingleRenderer = function createAdvancedSingleRenderer() {
           contentModel = props.contentModel;
         var Bind = getBind();
         return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
-          return /*#__PURE__*/_react.default.createElement(_useNewRefEntryDialog.NewRefEntryDialogContextProvider, null, /*#__PURE__*/_react.default.createElement(_AdvancedSingleReferenceField.AdvancedSingleReferenceField, {
+          return /*#__PURE__*/_react.default.createElement(_AdvancedSingleReferenceField.AdvancedSingleReferenceField, {
             field: field,
             getBind: getBind,
             bind: bind,
             Label: Label,
             contentModel: contentModel
-          }));
+          });
         });
       }
     }

package/admin/plugins/fieldRenderers/ref/advanced/detailedReferenceRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_i18n","_AdvancedSingleReferenceField","_useNewRefEntryDialog","_templateObject","_templateObject2","t","i18n","ns","createAdvancedSingleRenderer","type","name","renderer","rendererName","_taggedTemplateLiteral2","default","description","canUse","_ref","field","multipleValues","render","props","getBind","Label","contentModel","Bind","createElement","bind","NewRefEntryDialogContextProvider","AdvancedSingleReferenceField","exports"],"sources":["detailedReferenceRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { AdvancedSingleReferenceField } from \"./components/AdvancedSingleReferenceField\";\nimport { NewRefEntryDialogContextProvider } from \"~/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntryDialog\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nexport const createAdvancedSingleRenderer = (): CmsEditorFieldRendererPlugin => {\n    return {\n        type: \"cms-editor-field-renderer\",\n        name: \"cms-editor-field-renderer-ref-single-advanced\",\n        renderer: {\n            rendererName: \"ref-advanced-single\",\n            name: t`Detailed view with modal search`,\n            description: t`Renders a preview card of the selected record and the user searches through records using a modal window.`,\n            canUse({ field }) {\n                return field.type === \"ref\" && !field.multipleValues;\n            },\n            render: props => {\n                const { field, getBind, Label, contentModel } = props;\n\n                const Bind = getBind();\n                return (\n                    <Bind>\n                        {bind => {\n                            return (\n                                <NewRefEntryDialogContextProvider>\n                                    <AdvancedSingleReferenceField\n                                        field={field}\n                                        getBind={getBind}\n                                        bind={bind}\n                                        Label={Label}\n                                        contentModel={contentModel}\n                                    />\n                                </NewRefEntryDialogContextProvider>\n                            );\n                        }}\n                    </Bind>\n                );\n            }\n        }\n    };\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,6BAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AAAiH,IAAAI,eAAA,EAAAC,gBAAA;AAEjH,IAAMC,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,mCAAmC,CAAC;AAE/C,IAAMC,4BAA4B,GAAG,SAA/BA,4BAA4BA,CAAA,EAAuC;EAC5E,OAAO;IACHC,IAAI,EAAE,2BAA2B;IACjCC,IAAI,EAAE,+CAA+C;IACrDC,QAAQ,EAAE;MACNC,YAAY,EAAE,qBAAqB;MACnCF,IAAI,EAAEL,CAAC,CAAAF,eAAA,KAAAA,eAAA,OAAAU,uBAAA,CAAAC,OAAA,wCAAiC;MACxCC,WAAW,EAAEV,CAAC,CAAAD,gBAAA,KAAAA,gBAAA,OAAAS,uBAAA,CAAAC,OAAA,kHAA2G;MACzHE,MAAM,WAAAA,OAAAC,IAAA,EAAY;QAAA,IAATC,KAAK,GAAAD,IAAA,CAALC,KAAK;QACV,OAAOA,KAAK,CAACT,IAAI,KAAK,KAAK,IAAI,CAACS,KAAK,CAACC,cAAc;MACxD,CAAC;MACDC,MAAM,EAAE,SAAAA,OAAAC,KAAK,EAAI;QACb,IAAQH,KAAK,GAAmCG,KAAK,CAA7CH,KAAK;UAAEI,OAAO,GAA0BD,KAAK,CAAtCC,OAAO;UAAEC,KAAK,GAAmBF,KAAK,CAA7BE,KAAK;UAAEC,YAAY,GAAKH,KAAK,CAAtBG,YAAY;QAE3C,IAAMC,IAAI,GAAGH,OAAO,CAAC,CAAC;QACtB,oBACIzB,MAAA,CAAAiB,OAAA,CAAAY,aAAA,CAACD,IAAI,QACA,UAAAE,IAAI,EAAI;UACL,oBACI9B,MAAA,CAAAiB,OAAA,CAAAY,aAAA,CAACxB,qBAAA,CAAA0B,gCAAgC,qBAC7B/B,MAAA,CAAAiB,OAAA,CAAAY,aAAA,CAACzB,6BAAA,CAAA4B,4BAA4B;YACzBX,KAAK,EAAEA,KAAM;YACbI,OAAO,EAAEA,OAAQ;YACjBK,IAAI,EAAEA,IAAK;YACXJ,KAAK,EAAEA,KAAM;YACbC,YAAY,EAAEA;UAAa,CAC9B,CAC6B,CAAC;QAE3C,CACE,CAAC;MAEf;IACJ;EACJ,CAAC;AACL,CAAC;AAACM,OAAA,CAAAtB,4BAAA,GAAAA,4BAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_i18n","_AdvancedSingleReferenceField","_templateObject","_templateObject2","t","i18n","ns","createAdvancedSingleRenderer","type","name","renderer","rendererName","_taggedTemplateLiteral2","default","description","canUse","_ref","field","multipleValues","render","props","getBind","Label","contentModel","Bind","createElement","bind","AdvancedSingleReferenceField","exports"],"sources":["detailedReferenceRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsModelFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { AdvancedSingleReferenceField } from \"./components/AdvancedSingleReferenceField\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nexport const createAdvancedSingleRenderer = (): CmsModelFieldRendererPlugin => {\n    return {\n        type: \"cms-editor-field-renderer\",\n        name: \"cms-editor-field-renderer-ref-single-advanced\",\n        renderer: {\n            rendererName: \"ref-advanced-single\",\n            name: t`Detailed view with modal search`,\n            description: t`Renders a preview card of the selected record and the user searches through records using a modal window.`,\n            canUse({ field }) {\n                return field.type === \"ref\" && !field.multipleValues;\n            },\n            render: props => {\n                const { field, getBind, Label, contentModel } = props;\n\n                const Bind = getBind();\n                return (\n                    <Bind>\n                        {bind => {\n                            return (\n                                <AdvancedSingleReferenceField\n                                    field={field}\n                                    getBind={getBind}\n                                    bind={bind}\n                                    Label={Label}\n                                    contentModel={contentModel}\n                                />\n                            );\n                        }}\n                    </Bind>\n                );\n            }\n        }\n    };\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,6BAAA,GAAAF,OAAA;AAAyF,IAAAG,eAAA,EAAAC,gBAAA;AAEzF,IAAMC,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,mCAAmC,CAAC;AAE/C,IAAMC,4BAA4B,GAAG,SAA/BA,4BAA4BA,CAAA,EAAsC;EAC3E,OAAO;IACHC,IAAI,EAAE,2BAA2B;IACjCC,IAAI,EAAE,+CAA+C;IACrDC,QAAQ,EAAE;MACNC,YAAY,EAAE,qBAAqB;MACnCF,IAAI,EAAEL,CAAC,CAAAF,eAAA,KAAAA,eAAA,OAAAU,uBAAA,CAAAC,OAAA,wCAAiC;MACxCC,WAAW,EAAEV,CAAC,CAAAD,gBAAA,KAAAA,gBAAA,OAAAS,uBAAA,CAAAC,OAAA,kHAA2G;MACzHE,MAAM,WAAAA,OAAAC,IAAA,EAAY;QAAA,IAATC,KAAK,GAAAD,IAAA,CAALC,KAAK;QACV,OAAOA,KAAK,CAACT,IAAI,KAAK,KAAK,IAAI,CAACS,KAAK,CAACC,cAAc;MACxD,CAAC;MACDC,MAAM,EAAE,SAAAA,OAAAC,KAAK,EAAI;QACb,IAAQH,KAAK,GAAmCG,KAAK,CAA7CH,KAAK;UAAEI,OAAO,GAA0BD,KAAK,CAAtCC,OAAO;UAAEC,KAAK,GAAmBF,KAAK,CAA7BE,KAAK;UAAEC,YAAY,GAAKH,KAAK,CAAtBG,YAAY;QAE3C,IAAMC,IAAI,GAAGH,OAAO,CAAC,CAAC;QACtB,oBACIxB,MAAA,CAAAgB,OAAA,CAAAY,aAAA,CAACD,IAAI,QACA,UAAAE,IAAI,EAAI;UACL,oBACI7B,MAAA,CAAAgB,OAAA,CAAAY,aAAA,CAACxB,6BAAA,CAAA0B,4BAA4B;YACzBV,KAAK,EAAEA,KAAM;YACbI,OAAO,EAAEA,OAAQ;YACjBK,IAAI,EAAEA,IAAK;YACXJ,KAAK,EAAEA,KAAM;YACbC,YAAY,EAAEA;UAAa,CAC9B,CAAC;QAEV,CACE,CAAC;MAEf;IACJ;EACJ,CAAC;AACL,CAAC;AAACK,OAAA,CAAArB,4BAAA,GAAAA,4BAAA"}

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _NewRefEntryFormDialog = _interopRequireWildcard(require("./NewRefEntryFormDialog"));
+var _NewEntryButton = require("./NewEntryButton");
 var _AutoComplete = require("@webiny/ui/AutoComplete");
 var _i18n = require("@webiny/app/i18n");
 var _reactRouter = require("@webiny/react-router");
@@ -19,6 +20,8 @@ var _renderItem = require("./renderItem");
 var _createEntryUrl = require("./createEntryUrl");
 var _EntryStatus = require("./EntryStatus");
 var _utils = require("@webiny/utils");
+var _hooks = require("../../../../hooks");
+var _NewReferencedEntryDialog = require("./NewReferencedEntryDialog");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
 var unpublishedLabel = t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry."])));
@@ -36,6 +39,12 @@ var getItemOption = function getItemOption(options, id) {
 var ContentEntriesAutocomplete = function ContentEntriesAutocomplete(_ref) {
   var bind = _ref.bind,
     field = _ref.field;
+  var _useModels = (0, _hooks.useModels)(),
+    models = _useModels.models;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showNewEntryModal = _useState2[0],
+    setShowNewEntryModal = _useState2[1];
   var _useReference = (0, _useReference2.useReference)({
       bind: bind,
       field: field
@@ -67,22 +76,25 @@ var ContentEntriesAutocomplete = function ContentEntriesAutocomplete(_ref) {
     renderNewEntryModal = _useNewRefEntry.renderNewEntryModal,
     refModelId = _useNewRefEntry.refModelId,
     helpText = _useNewRefEntry.helpText;
+  var model = models.find(function (model) {
+    return model.modelId === refModelId;
+  });
   var item = getItemOption(options, bind.value ? bind.value.id : null);
+
   /*
    * Wrap AutoComplete input in NewRefEntry modal.
    */
   if (renderNewEntryModal) {
-    return /*#__PURE__*/_react.default.createElement(_NewRefEntryFormDialog.default, {
-      modelId: refModelId,
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showNewEntryModal && model ? /*#__PURE__*/_react.default.createElement(_NewReferencedEntryDialog.NewReferencedEntryDialog, {
+      onClose: function onClose() {
+        return setShowNewEntryModal(false);
+      },
+      model: model,
       onChange: function onChange(entry) {
-        /**
-         * TODO @ts-refactor @ashutosh
-         * Need to figure out correct types.
-         */
-        // @ts-ignore
+        /* TODO: The `any` argument is wrong, and needs revision. */
         return _onChange(entry, entry);
       }
-    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, Object.assign({}, bind, {
+    }) : null, /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, Object.assign({}, bind, {
       renderItem: _renderItem.renderItem,
       onChange: _onChange,
       loading: loading,
@@ -96,7 +108,11 @@ var ContentEntriesAutocomplete = function ContentEntriesAutocomplete(_ref) {
       onInput: (0, _debounce.default)(function (search) {
         return setSearch(search);
       }, 250),
-      noResultFound: /*#__PURE__*/_react.default.createElement(_NewRefEntryFormDialog.NewEntryButton, null)
+      noResultFound: /*#__PURE__*/_react.default.createElement(_NewEntryButton.NewEntryButton, {
+        onClick: function onClick() {
+          return setShowNewEntryModal(true);
+        }
+      })
     })));
   }
   return /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, Object.assign({}, bind, {

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_debounce","_NewRefEntryFormDialog","_interopRequireWildcard","_AutoComplete","_i18n","_reactRouter","_useNewRefEntry2","_useReference2","_renderItem","_createEntryUrl","_EntryStatus","_utils","_templateObject","_templateObject2","_templateObject3","_templateObject4","t","i18n","ns","unpublishedLabel","_taggedTemplateLiteral2","default","publishedLabel","getItemOption","options","id","length","_parseIdentifier","parseIdentifier","entryId","find","item","ContentEntriesAutocomplete","_ref","bind","field","_useReference","useReference","setSearch","value","loading","onChange","entryInfo","published","link","createEntryUrl","publishItLink","createElement","Link","to","here","_useNewRefEntry","useNewRefEntry","renderNewEntryModal","refModelId","helpText","modelId","entry","AutoComplete","Object","assign","renderItem","undefined","label","concat","description","Fragment","EntryStatus","onInput","debounce","search","noResultFound","NewEntryButton","_default","exports"],"sources":["ContentEntriesAutocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport debounce from \"lodash/debounce\";\nimport NewRefEntryFormDialog, { NewEntryButton } from \"./NewRefEntryFormDialog\";\nimport { AutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Link } from \"@webiny/react-router\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry\";\nimport { useReference } from \"./useReference\";\nimport { renderItem } from \"./renderItem\";\nimport { createEntryUrl } from \"./createEntryUrl\";\nimport { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem } from \"./types\";\nimport { EntryStatus } from \"./EntryStatus\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst unpublishedLabel = t`Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry.`;\nconst publishedLabel = t`Selected content entry is published. You can view it {here}.`;\n\nconst getItemOption = (options: OptionItem[], id?: string | null): OptionItem | null => {\n    if (!id || !options || options.length === 0) {\n        return null;\n    }\n    const { id: entryId } = parseIdentifier(id);\n    return options.find(item => item.entryId === entryId) || null;\n};\n\ninterface ContentEntriesAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\nconst ContentEntriesAutocomplete: React.FC<ContentEntriesAutocompleteProps> = ({ bind, field }) => {\n    const { options, setSearch, value, loading, onChange } = useReference({\n        bind,\n        field\n    });\n\n    let entryInfo: string | null = null;\n    if (value && !value.published) {\n        const link = createEntryUrl(value);\n        entryInfo = unpublishedLabel({ publishItLink: <Link to={link}>{t`publish it`}</Link> });\n    } else if (value) {\n        const link = createEntryUrl(value);\n        entryInfo = publishedLabel({\n            here: <Link to={link}>{t`here`}</Link>\n        });\n    }\n    const { renderNewEntryModal, refModelId, helpText } = useNewRefEntry({ field });\n\n    const item = getItemOption(options, bind.value ? bind.value.id : null);\n    /*\n     * Wrap AutoComplete input in NewRefEntry modal.\n     */\n    if (renderNewEntryModal) {\n        return (\n            <NewRefEntryFormDialog\n                modelId={refModelId}\n                onChange={entry => {\n                    /**\n                     * TODO @ts-refactor @ashutosh\n                     * Need to figure out correct types.\n                     */\n                    // @ts-ignore\n                    return onChange(entry, entry);\n                }}\n            >\n                <AutoComplete\n                    {...bind}\n                    renderItem={renderItem}\n                    onChange={onChange}\n                    loading={loading}\n                    value={value || undefined}\n                    options={options}\n                    label={field.label}\n                    data-testid={`fr.input.autocomplete.${field.label}`}\n                    description={\n                        <>\n                            {field.helpText}\n                            <EntryStatus item={item}>{entryInfo}</EntryStatus>\n                        </>\n                    }\n                    onInput={debounce(search => setSearch(search), 250)}\n                    noResultFound={<NewEntryButton />}\n                />\n            </NewRefEntryFormDialog>\n        );\n    }\n\n    return (\n        <AutoComplete\n            {...bind}\n            renderItem={renderItem}\n            onChange={onChange}\n            loading={loading}\n            value={value || undefined}\n            options={options}\n            label={field.label}\n            description={\n                <>\n                    {field.helpText}\n                    <EntryStatus item={item}>{entryInfo}</EntryStatus>\n                </>\n            }\n            onInput={debounce(search => setSearch(search), 250)}\n            noResultFound={helpText}\n        />\n    );\n};\n\nexport default ContentEntriesAutocomplete;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_debounce","_interopRequireDefault","_NewEntryButton","_AutoComplete","_i18n","_reactRouter","_useNewRefEntry2","_useReference2","_renderItem","_createEntryUrl","_EntryStatus","_utils","_hooks","_NewReferencedEntryDialog","_templateObject","_templateObject2","_templateObject3","_templateObject4","t","i18n","ns","unpublishedLabel","_taggedTemplateLiteral2","default","publishedLabel","getItemOption","options","id","length","_parseIdentifier","parseIdentifier","entryId","find","item","ContentEntriesAutocomplete","_ref","bind","field","_useModels","useModels","models","_useState","useState","_useState2","_slicedToArray2","showNewEntryModal","setShowNewEntryModal","_useReference","useReference","setSearch","value","loading","onChange","entryInfo","published","link","createEntryUrl","publishItLink","createElement","Link","to","here","_useNewRefEntry","useNewRefEntry","renderNewEntryModal","refModelId","helpText","model","modelId","Fragment","NewReferencedEntryDialog","onClose","entry","AutoComplete","Object","assign","renderItem","undefined","label","concat","description","EntryStatus","onInput","debounce","search","noResultFound","NewEntryButton","onClick","_default","exports"],"sources":["ContentEntriesAutocomplete.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport debounce from \"lodash/debounce\";\nimport { NewEntryButton } from \"./NewEntryButton\";\nimport { AutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Link } from \"@webiny/react-router\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry\";\nimport { useReference } from \"./useReference\";\nimport { renderItem } from \"./renderItem\";\nimport { createEntryUrl } from \"./createEntryUrl\";\nimport { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem } from \"./types\";\nimport { EntryStatus } from \"./EntryStatus\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport { useModels } from \"~/admin/hooks\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst unpublishedLabel = t`Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry.`;\nconst publishedLabel = t`Selected content entry is published. You can view it {here}.`;\n\nconst getItemOption = (options: OptionItem[], id?: string | null): OptionItem | null => {\n    if (!id || !options || options.length === 0) {\n        return null;\n    }\n    const { id: entryId } = parseIdentifier(id);\n    return options.find(item => item.entryId === entryId) || null;\n};\n\ninterface ContentEntriesAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\nconst ContentEntriesAutocomplete: React.FC<ContentEntriesAutocompleteProps> = ({ bind, field }) => {\n    const { models } = useModels();\n    const [showNewEntryModal, setShowNewEntryModal] = useState(false);\n    const { options, setSearch, value, loading, onChange } = useReference({\n        bind,\n        field\n    });\n\n    let entryInfo: string | null = null;\n    if (value && !value.published) {\n        const link = createEntryUrl(value);\n        entryInfo = unpublishedLabel({ publishItLink: <Link to={link}>{t`publish it`}</Link> });\n    } else if (value) {\n        const link = createEntryUrl(value);\n        entryInfo = publishedLabel({\n            here: <Link to={link}>{t`here`}</Link>\n        });\n    }\n    const { renderNewEntryModal, refModelId, helpText } = useNewRefEntry({ field });\n    const model = models.find(model => model.modelId === refModelId);\n\n    const item = getItemOption(options, bind.value ? bind.value.id : null);\n\n    /*\n     * Wrap AutoComplete input in NewRefEntry modal.\n     */\n    if (renderNewEntryModal) {\n        return (\n            <>\n                {showNewEntryModal && model ? (\n                    <NewReferencedEntryDialog\n                        onClose={() => setShowNewEntryModal(false)}\n                        model={model}\n                        onChange={entry => {\n                            /* TODO: The `any` argument is wrong, and needs revision. */\n                            return onChange(entry, entry as any);\n                        }}\n                    />\n                ) : null}\n\n                <AutoComplete\n                    {...bind}\n                    renderItem={renderItem}\n                    onChange={onChange}\n                    loading={loading}\n                    value={value || undefined}\n                    options={options}\n                    label={field.label}\n                    data-testid={`fr.input.autocomplete.${field.label}`}\n                    description={\n                        <>\n                            {field.helpText}\n                            <EntryStatus item={item}>{entryInfo}</EntryStatus>\n                        </>\n                    }\n                    onInput={debounce(search => setSearch(search), 250)}\n                    noResultFound={<NewEntryButton onClick={() => setShowNewEntryModal(true)} />}\n                />\n            </>\n        );\n    }\n\n    return (\n        <AutoComplete\n            {...bind}\n            renderItem={renderItem}\n            onChange={onChange}\n            loading={loading}\n            value={value || undefined}\n            options={options}\n            label={field.label}\n            description={\n                <>\n                    {field.helpText}\n                    <EntryStatus item={item}>{entryInfo}</EntryStatus>\n                </>\n            }\n            onInput={debounce(search => setSearch(search), 250)}\n            noResultFound={helpText}\n        />\n    );\n};\n\nexport default ContentEntriesAutocomplete;\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesMultiAutoComplete.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
@@ -15,14 +16,22 @@ var _reactRouter = require("@webiny/react-router");
 var _i18n = require("@webiny/app/i18n");
 var _useReferences2 = require("./useReferences");
 var _renderItem = require("./renderItem");
-var _NewRefEntryFormDialog = _interopRequireWildcard(require("./NewRefEntryFormDialog"));
+var _NewEntryButton = require("./NewEntryButton");
 var _useNewRefEntry2 = require("../hooks/useNewRefEntry");
+var _hooks = require("../../../../hooks");
+var _NewReferencedEntryDialog = require("./NewReferencedEntryDialog");
 var _templateObject;
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
 var warn = t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Before publishing the main content entry, make sure you publish the following referenced entries: {entries}"])));
 var ContentEntriesMultiAutocomplete = function ContentEntriesMultiAutocomplete(_ref) {
   var bind = _ref.bind,
     field = _ref.field;
+  var _useModels = (0, _hooks.useModels)(),
+    models = _useModels.models;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showNewEntryModal = _useState2[0],
+    setShowNewEntryModal = _useState2[1];
   var _useReferences = (0, _useReferences2.useReferences)({
       bind: bind,
       field: field
@@ -60,19 +69,24 @@ var ContentEntriesMultiAutocomplete = function ContentEntriesMultiAutocomplete(_
       entries: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, warning.map(entryWarning))
     });
   }
-  var refEntryOnChange = (0, _react.useCallback)(
-  // TODO @ts-refactor figure out which type is this
-  function (value) {
+  var refEntryOnChange = (0, _react.useCallback)(function (value) {
     /**
      * Append new selected entry at the end of existing entries.
      */
     onChange([].concat((0, _toConsumableArray2.default)(entries), [value]));
+    setShowNewEntryModal(false);
   }, [onChange, entries]);
+  var model = models.find(function (model) {
+    return model.modelId === refModelId;
+  });
   if (renderNewEntryModal) {
-    return /*#__PURE__*/_react.default.createElement(_NewRefEntryFormDialog.default, {
-      modelId: refModelId,
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showNewEntryModal && model ? /*#__PURE__*/_react.default.createElement(_NewReferencedEntryDialog.NewReferencedEntryDialog, {
+      onClose: function onClose() {
+        return setShowNewEntryModal(false);
+      },
+      model: model,
       onChange: refEntryOnChange
-    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, Object.assign({}, bind, {
+    }) : null, /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, Object.assign({}, bind, {
       renderItem: _renderItem.renderItem,
       renderListItemLabel: _renderItem.renderItem,
       renderListItemOptions: _renderItem.renderListItemOptions,
@@ -84,7 +98,11 @@ var ContentEntriesMultiAutocomplete = function ContentEntriesMultiAutocomplete(_
       label: field.label,
       onInput: (0, _debounce.default)(setSearch, 250),
       description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, field.helpText, warning),
-      noResultFound: /*#__PURE__*/_react.default.createElement(_NewRefEntryFormDialog.NewEntryButton, null)
+      noResultFound: /*#__PURE__*/_react.default.createElement(_NewEntryButton.NewEntryButton, {
+        onClick: function onClick() {
+          return setShowNewEntryModal(true);
+        }
+      })
     })));
   }
   return /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, Object.assign({}, bind, {

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesMultiAutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_debounce","_interopRequireDefault","_AutoComplete","_reactRouter","_i18n","_useReferences2","_renderItem","_NewRefEntryFormDialog","_useNewRefEntry2","_templateObject","t","i18n","ns","warn","_taggedTemplateLiteral2","default","ContentEntriesMultiAutocomplete","_ref","bind","field","_useReferences","useReferences","options","setSearch","entries","loading","onChange","_useNewRefEntry","useNewRefEntry","renderNewEntryModal","refModelId","helpText","entryWarning","entry","index","id","modelId","name","published","createElement","Fragment","key","Link","to","concat","encodeURIComponent","warning","filter","item","length","map","refEntryOnChange","useCallback","value","_toConsumableArray2","MultiAutoComplete","Object","assign","renderItem","renderListItemLabel","renderListItemOptions","useMultipleSelectionList","label","onInput","debounce","description","noResultFound","NewEntryButton","_default","exports"],"sources":["ContentEntriesMultiAutoComplete.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport debounce from \"lodash/debounce\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Link } from \"@webiny/react-router\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useReferences } from \"./useReferences\";\nimport { renderItem, renderListItemOptions } from \"./renderItem\";\nimport NewRefEntryFormDialog, { NewEntryButton } from \"./NewRefEntryFormDialog\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry\";\nimport { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem } from \"./types\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst warn = t`Before publishing the main content entry, make sure you publish the following referenced entries: {entries}`;\n\ninterface ContentEntriesMultiAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\nconst ContentEntriesMultiAutocomplete: React.FC<ContentEntriesMultiAutocompleteProps> = ({\n    bind,\n    field\n}) => {\n    const { options, setSearch, entries, loading, onChange } = useReferences({ bind, field });\n\n    const { renderNewEntryModal, refModelId, helpText } = useNewRefEntry({ field });\n\n    const entryWarning = (entry: OptionItem, index: number): React.ReactElement | null => {\n        const { id, modelId, name, published } = entry;\n        if (published) {\n            return null;\n        }\n        return (\n            <React.Fragment key={id}>\n                {index > 0 && \", \"}\n                <Link to={`/cms/content-entries/${modelId}?id=${encodeURIComponent(id)}`}>\n                    {name}\n                </Link>\n            </React.Fragment>\n        );\n    };\n\n    let warning = entries.filter(item => !item.published);\n    if (warning.length > 0) {\n        warning = warn({\n            entries: <>{warning.map(entryWarning)}</>\n        });\n    }\n\n    const refEntryOnChange = useCallback(\n        // TODO @ts-refactor figure out which type is this\n        value => {\n            /**\n             * Append new selected entry at the end of existing entries.\n             */\n            onChange([...entries, value]);\n        },\n        [onChange, entries]\n    );\n\n    if (renderNewEntryModal) {\n        return (\n            <NewRefEntryFormDialog modelId={refModelId} onChange={refEntryOnChange}>\n                <MultiAutoComplete\n                    {...bind}\n                    renderItem={renderItem}\n                    renderListItemLabel={renderItem}\n                    renderListItemOptions={renderListItemOptions}\n                    useMultipleSelectionList\n                    onChange={onChange}\n                    loading={loading}\n                    value={entries}\n                    options={options}\n                    label={field.label}\n                    onInput={debounce(setSearch, 250)}\n                    description={\n                        <>\n                            {field.helpText}\n                            {warning}\n                        </>\n                    }\n                    noResultFound={<NewEntryButton />}\n                />\n            </NewRefEntryFormDialog>\n        );\n    }\n\n    return (\n        <MultiAutoComplete\n            {...bind}\n            renderItem={renderItem}\n            renderListItemLabel={renderItem}\n            renderListItemOptions={renderListItemOptions}\n            useMultipleSelectionList\n            onChange={onChange}\n            loading={loading}\n            value={entries}\n            options={options}\n            label={field.label}\n            onInput={debounce(setSearch, 250)}\n            description={\n                <>\n                    {field.helpText}\n                    {warning}\n                </>\n            }\n            noResultFound={helpText}\n        />\n    );\n};\n\nexport default ContentEntriesMultiAutocomplete;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_debounce","_interopRequireDefault","_AutoComplete","_reactRouter","_i18n","_useReferences2","_renderItem","_NewEntryButton","_useNewRefEntry2","_hooks","_NewReferencedEntryDialog","_templateObject","t","i18n","ns","warn","_taggedTemplateLiteral2","default","ContentEntriesMultiAutocomplete","_ref","bind","field","_useModels","useModels","models","_useState","useState","_useState2","_slicedToArray2","showNewEntryModal","setShowNewEntryModal","_useReferences","useReferences","options","setSearch","entries","loading","onChange","_useNewRefEntry","useNewRefEntry","renderNewEntryModal","refModelId","helpText","entryWarning","entry","index","id","modelId","name","published","createElement","Fragment","key","Link","to","concat","encodeURIComponent","warning","filter","item","length","map","refEntryOnChange","useCallback","value","_toConsumableArray2","model","find","NewReferencedEntryDialog","onClose","MultiAutoComplete","Object","assign","renderItem","renderListItemLabel","renderListItemOptions","useMultipleSelectionList","label","onInput","debounce","description","noResultFound","NewEntryButton","onClick","_default","exports"],"sources":["ContentEntriesMultiAutoComplete.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport debounce from \"lodash/debounce\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Link } from \"@webiny/react-router\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useReferences } from \"./useReferences\";\nimport { renderItem, renderListItemOptions } from \"./renderItem\";\nimport { NewEntryButton } from \"./NewEntryButton\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry\";\nimport { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem } from \"./types\";\nimport { useModels } from \"~/admin/hooks\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst warn = t`Before publishing the main content entry, make sure you publish the following referenced entries: {entries}`;\n\ninterface ContentEntriesMultiAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\nconst ContentEntriesMultiAutocomplete: React.FC<ContentEntriesMultiAutocompleteProps> = ({\n    bind,\n    field\n}) => {\n    const { models } = useModels();\n    const [showNewEntryModal, setShowNewEntryModal] = useState(false);\n    const { options, setSearch, entries, loading, onChange } = useReferences({ bind, field });\n\n    const { renderNewEntryModal, refModelId, helpText } = useNewRefEntry({ field });\n\n    const entryWarning = (entry: OptionItem, index: number): React.ReactElement | null => {\n        const { id, modelId, name, published } = entry;\n        if (published) {\n            return null;\n        }\n        return (\n            <React.Fragment key={id}>\n                {index > 0 && \", \"}\n                <Link to={`/cms/content-entries/${modelId}?id=${encodeURIComponent(id)}`}>\n                    {name}\n                </Link>\n            </React.Fragment>\n        );\n    };\n\n    let warning = entries.filter(item => !item.published);\n    if (warning.length > 0) {\n        warning = warn({\n            entries: <>{warning.map(entryWarning)}</>\n        });\n    }\n\n    const refEntryOnChange = useCallback(\n        value => {\n            /**\n             * Append new selected entry at the end of existing entries.\n             */\n            onChange([...entries, value]);\n            setShowNewEntryModal(false);\n        },\n        [onChange, entries]\n    );\n\n    const model = models.find(model => model.modelId === refModelId);\n\n    if (renderNewEntryModal) {\n        return (\n            <>\n                {showNewEntryModal && model ? (\n                    <NewReferencedEntryDialog\n                        onClose={() => setShowNewEntryModal(false)}\n                        model={model}\n                        onChange={refEntryOnChange}\n                    />\n                ) : null}\n                <MultiAutoComplete\n                    {...bind}\n                    renderItem={renderItem}\n                    renderListItemLabel={renderItem}\n                    renderListItemOptions={renderListItemOptions}\n                    useMultipleSelectionList\n                    onChange={onChange}\n                    loading={loading}\n                    value={entries}\n                    options={options}\n                    label={field.label}\n                    onInput={debounce(setSearch, 250)}\n                    description={\n                        <>\n                            {field.helpText}\n                            {warning}\n                        </>\n                    }\n                    noResultFound={<NewEntryButton onClick={() => setShowNewEntryModal(true)} />}\n                />\n            </>\n        );\n    }\n\n    return (\n        <MultiAutoComplete\n            {...bind}\n            renderItem={renderItem}\n            renderListItemLabel={renderItem}\n            renderListItemOptions={renderListItemOptions}\n            useMultipleSelectionList\n            onChange={onChange}\n            loading={loading}\n            value={entries}\n            options={options}\n            label={field.label}\n            onInput={debounce(setSearch, 250)}\n            description={\n                <>\n                    {field.helpText}\n                    {warning}\n                </>\n            }\n            noResultFound={helpText}\n        />\n    );\n};\n\nexport default ContentEntriesMultiAutocomplete;\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/components/NewEntryButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const NewEntryButton: ({ onClick }: {
+    onClick: () => void;
+}) => JSX.Element;

package/admin/plugins/fieldRenderers/ref/components/NewEntryButton.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NewEntryButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Button = require("@webiny/ui/Button");
+var _add18px = require("@webiny/app-admin/assets/icons/add-18px.svg");
+var DefaultButton = /*#__PURE__*/(0, _styled.default)(_Button.ButtonDefault, {
+  label: "DefaultButton",
+  target: "e6jb90q0"
+})("margin-left:32px;");
+var NewEntryButton = function NewEntryButton(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/_react.default.createElement(DefaultButton, {
+    small: true,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
+    icon: /*#__PURE__*/_react.default.createElement(_add18px.ReactComponent, null)
+  }), "New Entry");
+};
+exports.NewEntryButton = NewEntryButton;

package/admin/plugins/fieldRenderers/ref/components/NewEntryButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_styled","_Button","_add18px","DefaultButton","styled","ButtonDefault","label","target","NewEntryButton","_ref","onClick","default","createElement","small","ButtonIcon","icon","ReactComponent","exports"],"sources":["NewEntryButton.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { ButtonDefault, ButtonIcon } from \"@webiny/ui/Button\";\nimport { ReactComponent as AddIcon } from \"@webiny/app-admin/assets/icons/add-18px.svg\";\n\nconst DefaultButton = styled(ButtonDefault)`\n    margin-left: 32px;\n`;\n\nexport const NewEntryButton = ({ onClick }: { onClick: () => void }) => {\n    return (\n        <DefaultButton small={true} onClick={onClick}>\n            <ButtonIcon icon={<AddIcon />} />\n            New Entry\n        </DefaultButton>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAEA,IAAMI,aAAa,oBAAGC,eAAM,EAACC,qBAAa;EAAAC,KAAA;EAAAC,MAAA;AAAA,uBAEzC;AAEM,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAAC,IAAA,EAA6C;EAAA,IAAvCC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACpC,oBACIb,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACT,aAAa;IAACU,KAAK,EAAE,IAAK;IAACH,OAAO,EAAEA;EAAQ,gBACzCb,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACX,OAAA,CAAAa,UAAU;IAACC,IAAI,eAAElB,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACV,QAAA,CAAAc,cAAO,MAAE;EAAE,CAAE,CAAC,aAEtB,CAAC;AAExB,CAAC;AAACC,OAAA,CAAAT,cAAA,GAAAA,cAAA"}

package/admin/plugins/fieldRenderers/ref/{advanced/components → components}/NewReferencedEntryDialog.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CmsModel } from "../../../../../../types";
+import { CmsModel } from "../../../../../types";
 interface Props {
     model: Pick<CmsModel, "modelId">;
     onClose: () => void;

package/admin/plugins/fieldRenderers/ref/{advanced/components → components}/NewReferencedEntryDialog.js

@@ -12,31 +12,66 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
-var _ContentEntryContext = require("../../../../../views/contentEntries/ContentEntry/ContentEntryContext");
+var _ContentEntryContext = require("../../../../views/contentEntries/ContentEntry/ContentEntryContext");
+var _folders = require("@webiny/app-aco/contexts/folders");
 var _Dialog = require("@webiny/ui/Dialog");
-var _ContentEntriesContext = require("../../../../../views/contentEntries/ContentEntriesContext");
+var _ContentEntriesContext = require("../../../../views/contentEntries/ContentEntriesContext");
 var _i18n = require("@webiny/app/i18n");
-var _useContentEntry3 = require("../../../../../views/contentEntries/hooks/useContentEntry");
-var _ModelProvider = require("../../../../../components/ModelProvider");
-var _ContentEntryForm = require("../../../../../components/ContentEntryForm/ContentEntryForm");
+var _useContentEntry3 = require("../../../../views/contentEntries/hooks/useContentEntry");
+var _ModelProvider = require("../../../../components/ModelProvider");
+var _ContentEntryForm = require("../../../../components/ContentEntryForm/ContentEntryForm");
 var _Button = require("@webiny/ui/Button");
-var _contentModels = require("../../../../../graphql/contentModels");
-var _hooks = require("../../../../../hooks");
+var _contentModels = require("../../../../graphql/contentModels");
+var _hooks = require("../../../../hooks");
 var _Dialog2 = require("./dialog/Dialog");
+var _navigateFolder = require("@webiny/app-aco/contexts/navigateFolder");
+var _appAco = require("@webiny/app-aco");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Elevation = require("@webiny/ui/Elevation");
+var _SplitView = require("@webiny/app-admin/components/SplitView");
 var _templateObject, _templateObject2, _templateObject3;
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
+var RenderBlock = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "RenderBlock",
+  target: "e1x4hn7a0"
+})("position:relative;background-color:var(--mdc-theme-background);padding:25px;overflow:scroll;");
+var PaddedLeftPanel = /*#__PURE__*/(0, _styled.default)(_SplitView.LeftPanel, {
+  label: "PaddedLeftPanel",
+  target: "e1x4hn7a1"
+})("padding:10px 10px 0;");
+var ModalRightPanel = /*#__PURE__*/(0, _styled.default)(_SplitView.RightPanel, {
+  label: "ModalRightPanel",
+  target: "e1x4hn7a2"
+})("> div{height:auto;}webiny-form-container > div{height:auto;}");
+var ModalFullWidthDialog = /*#__PURE__*/(0, _styled.default)(_Dialog2.FullWidthDialog, {
+  label: "ModalFullWidthDialog",
+  target: "e1x4hn7a3"
+})(".webiny-ui-dialog__content{height:100%;> div{max-height:inherit;height:inherit;.mdc-layout-grid__inner{height:100%;max-height:inherit;.webiny-split-view__left-panel,.webiny-split-view__right-panel{height:inherit;max-height:inherit;overflow:scroll;}}}}");
 var EntryForm = function EntryForm(_ref) {
   var onCreate = _ref.onCreate;
   var _useContentEntry = (0, _useContentEntry3.useContentEntry)(),
     setFormRef = _useContentEntry.setFormRef,
     contentModel = _useContentEntry.contentModel;
+  var _useNavigateFolder = (0, _appAco.useNavigateFolder)(),
+    currentFolderId = _useNavigateFolder.currentFolderId,
+    navigateToFolder = _useNavigateFolder.navigateToFolder;
   return /*#__PURE__*/_react.default.createElement(_ModelProvider.ModelProvider, {
     model: contentModel
+  }, /*#__PURE__*/_react.default.createElement(_SplitView.SplitView, null, /*#__PURE__*/_react.default.createElement(PaddedLeftPanel, {
+    span: 3
+  }, /*#__PURE__*/_react.default.createElement(_appAco.FolderTree, {
+    focusedFolderId: currentFolderId,
+    onFolderClick: function onFolderClick(data) {
+      return navigateToFolder(data.id);
+    },
+    enableActions: true,
+    enableCreate: true
+  })), /*#__PURE__*/_react.default.createElement(ModalRightPanel, {
+    span: 9
+  }, /*#__PURE__*/_react.default.createElement(RenderBlock, null, /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
+    z: 2
   }, /*#__PURE__*/_react.default.createElement(_ContentEntryForm.ContentEntryForm, {
     onSubmit: function onSubmit(data) {
-      /**
-       * We know that data is CmsContentEntry.
-       */
       return onCreate(data);
     },
     onForm: function onForm(form) {
@@ -44,7 +79,7 @@ var EntryForm = function EntryForm(_ref) {
     },
     entry: {},
     addEntryToListCache: false
-  }));
+  }))))));
 };
 var DialogSaveButton = function DialogSaveButton() {
   var _useContentEntry2 = (0, _useContentEntry3.useContentEntry)(),
@@ -123,6 +158,10 @@ var NewReferencedEntryDialog = function NewReferencedEntryDialog(_ref3) {
     contentModel: model,
     key: model.modelId,
     insideDialog: true
+  }, /*#__PURE__*/_react.default.createElement(_folders.FoldersProvider, {
+    type: "cms:".concat(model.modelId)
+  }, /*#__PURE__*/_react.default.createElement(NavigateFolderProvider, {
+    modelId: model.modelId
   }, /*#__PURE__*/_react.default.createElement(_ContentEntryContext.ContentEntryProvider, {
     isNewEntry: function isNewEntry() {
       return true;
@@ -130,13 +169,36 @@ var NewReferencedEntryDialog = function NewReferencedEntryDialog(_ref3) {
     getContentId: function getContentId() {
       return null;
     }
-  }, /*#__PURE__*/_react.default.createElement(_Dialog2.FullWidthDialog, {
+  }, /*#__PURE__*/_react.default.createElement(ModalFullWidthDialog, {
     open: true,
     onClose: onClose
   }, /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["New {modelName} Entry"])))({
     modelName: model.name
   })), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, /*#__PURE__*/_react.default.createElement(EntryForm, {
     onCreate: onCreate
-  })), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogCancel, null, t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Cancel"])))), /*#__PURE__*/_react.default.createElement(DialogSaveButton, null)))));
+  })), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogCancel, null, t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Cancel"])))), /*#__PURE__*/_react.default.createElement(DialogSaveButton, null)))))));
 };
-exports.NewReferencedEntryDialog = NewReferencedEntryDialog;
+exports.NewReferencedEntryDialog = NewReferencedEntryDialog;
+var NavigateFolderProvider = function NavigateFolderProvider(_ref5) {
+  var modelId = _ref5.modelId,
+    children = _ref5.children;
+  var _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    folderId = _useState4[0],
+    setFolderId = _useState4[1];
+  var navigateToFolder = (0, _react.useCallback)(function (folderId) {
+    setFolderId(folderId);
+  }, []);
+  var navigateToListHome = (0, _react.useCallback)(function () {
+    setFolderId(undefined);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_navigateFolder.NavigateFolderProvider, {
+    folderId: folderId,
+    createStorageKey: function createStorageKey() {
+      return "cms:".concat(modelId, ":create");
+    },
+    navigateToFolder: navigateToFolder,
+    navigateToLatestFolder: navigateToFolder,
+    navigateToListHome: navigateToListHome
+  }, children);
+};