@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

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

@@ -1,180 +1,160 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useApolloClient } from "../../../../hooks";
-import * as GQL from "./graphql";
-import { getOptions } from "./getOptions";
-
-function distinctBy(key, array) {
-  var keys = array.map(function (value) {
-    return value[key];
-  });
-  return array.filter(function (value, index) {
-    return keys.indexOf(value[key]) === index;
-  });
-}
-
-export var useReferences = function useReferences(_ref) {
-  var bind = _ref.bind,
-      field = _ref.field;
-  var allEntries = useRef([]);
-  var client = useApolloClient();
-
-  var _useState = useState(""),
-      _useState2 = _slicedToArray(_useState, 2),
-      search = _useState2[0],
-      setSearch = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      loading = _useState4[0],
-      setLoading = _useState4[1];
-
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      entries = _useState6[0],
-      setEntries = _useState6[1];
-
-  var _useState7 = useState([]),
-      _useState8 = _slicedToArray(_useState7, 2),
-      latestEntries = _useState8[0],
-      setLatestEntries = _useState8[1];
-
-  var _useState9 = useState([]),
-      _useState10 = _slicedToArray(_useState9, 2),
-      valueEntries = _useState10[0],
-      setValueEntries = _useState10[1];
-
-  var models = field.settings.models;
-  var modelsHash = models.join(",");
-  var values = bind.value ? bind.value : [];
-
-  var searchEntries = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _yield$client$query, data;
-
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (search) {
-                _context.next = 2;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 2:
-              setLoading(true);
-              _context.next = 5;
-              return client.query({
-                query: GQL.SEARCH_CONTENT_ENTRIES,
-                variables: {
-                  modelIds: models.map(function (m) {
-                    return m.modelId;
-                  }),
-                  query: search
-                }
-              });
-
-            case 5:
-              _yield$client$query = _context.sent;
-              data = _yield$client$query.data;
-              setLoading(false);
-              allEntries.current = distinctBy("id", [].concat(_toConsumableArray(allEntries.current), _toConsumableArray(data.content.data)));
-              setEntries(data.content.data);
-
-            case 10:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function searchEntries() {
-      return _ref2.apply(this, arguments);
+import { useApolloClient, useModelFieldGraphqlContext } from "../../../../hooks";
+import { SEARCH_CONTENT_ENTRIES, GET_CONTENT_ENTRIES } from "./graphql";
+import { convertReferenceEntriesToOptionCollection, convertReferenceEntryToOption } from "./helpers";
+export const useReferences = ({
+  bind,
+  field
+}) => {
+  const isMounted = useRef(true);
+  const allEntries = useRef({});
+  const client = useApolloClient();
+  const [search, setSearch] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [entries, setEntries] = useState({});
+  const [latestEntries, setLatestEntries] = useState([]);
+  const [valueEntries, setValueEntries] = useState([]);
+  const requestContext = useModelFieldGraphqlContext();
+  const models = field.settings ? field.settings.models || [] : [];
+  const modelsHash = models.join(",");
+  const values = bind.value ? bind.value : [];
+  const searchEntries = async () => {
+    if (!search) {
+      return;
+    }
+    setLoading(true);
+    const {
+      data
+    } = await client.query({
+      query: SEARCH_CONTENT_ENTRIES,
+      variables: {
+        modelIds: models.map(m => m.modelId),
+        query: search
+      },
+      context: requestContext
+    });
+    setLoading(false);
+    const collection = convertReferenceEntriesToOptionCollection(data.content.data);
+    allEntries.current = {
+      ...allEntries.current,
+      ...collection
     };
-  }();
-
-  useEffect(function () {
+    setEntries(collection);
+  };
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  useEffect(() => {
     searchEntries();
   }, [search]);
-  useEffect(function () {
+  useEffect(() => {
     client.query({
-      query: GQL.SEARCH_CONTENT_ENTRIES,
+      query: SEARCH_CONTENT_ENTRIES,
       variables: {
-        modelIds: models.map(function (m) {
-          return m.modelId;
-        }),
-        query: "__latest__",
+        modelIds: models.map(m => m.modelId),
         limit: 10
+      },
+      /**
+       * We cannot update this query response in cache after a reference entry being created/deleted,
+       * which result in cached response being stale, therefore, we're setting the fetchPolicy to "network-only" to by passing cache.
+       */
+      fetchPolicy: "network-only",
+      context: requestContext
+    }).then(({
+      data
+    }) => {
+      if (!isMounted.current) {
+        return;
       }
-    }).then(function (_ref3) {
-      var data = _ref3.data;
-      setLatestEntries(data.content.data);
-      allEntries.current = _toConsumableArray(data.content.data);
+      const collection = convertReferenceEntriesToOptionCollection(data.content.data);
+      setLatestEntries(Object.values(collection));
+      allEntries.current = {
+        ...collection
+      };
     });
   }, [modelsHash]);
-  useEffect(function () {
-    if (!values || !values.length) {
+  useEffect(() => {
+    if (!values || values.length == 0) {
       return;
     }
-
     setLoading(true);
     client.query({
-      query: GQL.GET_CONTENT_ENTRIES,
+      query: GET_CONTENT_ENTRIES,
       variables: {
-        entries: values
+        /**
+         * We need make sure nothing else other than modelId and id is passed to entries variable.
+         */
+        entries: values.map(value => {
+          return {
+            modelId: value.modelId,
+            id: value.id
+          };
+        })
+      },
+      context: requestContext
+    }).then(res => {
+      if (!isMounted.current) {
+        return;
       }
-    }).then(function (res) {
       setLoading(false);
-      var entries = res.data.content.data; // Calculate a couple of props for the Autocomplete component.
+      const latest = (res.data.latest.data || []).reduce((collection, item) => {
+        collection[item.entryId] = item;
+        return collection;
+      }, {});
+      const entries = (res.data.published.data || []).reduce((collection, item) => {
+        const entryId = item.entryId;
+        const existingItem = latest[entryId];
+        if (existingItem) {
+          collection[entryId] = {
+            ...existingItem,
+            published: {
+              id: item.id,
+              entryId: item.entryId,
+              title: item.title
+            }
+          };
+          return collection;
+        }
+        collection[entryId] = item;
+        return collection;
+      }, latest);
 
-      setValueEntries(entries.map(function (entry) {
-        return {
-          id: entry.id,
-          modelId: entry.model.modelId,
-          modelName: entry.model.name,
-          published: entry.status === "published",
-          name: entry.title
-        };
-      }));
+      // Calculate a couple of props for the Autocomplete component.
+      setValueEntries(Object.values(entries).map(convertReferenceEntryToOption));
     });
   }, []);
+
   /**
    * onChange callback will update internal component state using the previously loaded entries by IDs.
    * It will also format the value to store to the DB.
    */
-
-  var onChange = useCallback(function (values) {
+  const onChange = useCallback(values => {
     setSearch("");
-    setValueEntries(values); // Update parent form
+    setValueEntries(values);
 
-    bind.onChange(values.map(function (item) {
-      return {
-        modelId: item.modelId,
-        entryId: item.id
-      };
-    }));
-  }, []); // Format options for the Autocomplete component.
+    // Update parent form
+    bind.onChange(values.map(item => ({
+      modelId: item.modelId,
+      id: item.id
+    })));
+  }, []);
 
-  var options = useMemo(function () {
-    return getOptions(entries);
-  }, [entries]); // Format default options for the Autocomplete component.
+  // Format options for the Autocomplete component.
+  const options = useMemo(() => Object.values(entries), [entries]);
 
-  var defaultOptions = useMemo(function () {
-    return getOptions(latestEntries);
-  }, [latestEntries]);
+  // Format default options for the Autocomplete component.
+  const defaultOptions = useMemo(() => Object.values(latestEntries), [latestEntries]);
   return {
-    onChange: onChange,
-    loading: loading,
-    setSearch: setSearch,
+    onChange,
+    loading,
+    setSearch,
     // Selected entries
     entries: valueEntries,
     // Options to show when the autocomplete dropdown is visible
     options: search ? options : defaultOptions || []
   };
-};
+};
+
+//# sourceMappingURL=useReferences.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","useApolloClient","useModelFieldGraphqlContext","SEARCH_CONTENT_ENTRIES","GET_CONTENT_ENTRIES","convertReferenceEntriesToOptionCollection","convertReferenceEntryToOption","useReferences","bind","field","isMounted","allEntries","client","search","setSearch","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntries","setValueEntries","requestContext","models","settings","modelsHash","join","values","value","searchEntries","data","query","variables","modelIds","map","m","modelId","context","collection","content","current","limit","fetchPolicy","then","Object","length","id","res","latest","reduce","item","entryId","published","existingItem","title","onChange","options","defaultOptions"],"sources":["useReferences.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient, useModelFieldGraphqlContext } from \"~/admin/hooks\";\nimport type { CmsModelField, CmsModel } from \"~/types\";\nimport type {\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables,\n    CmsEntryGetListResponse,\n    CmsEntryGetListVariables,\n    CmsEntryGetEntryVariable\n} from \"./graphql\";\nimport { SEARCH_CONTENT_ENTRIES, GET_CONTENT_ENTRIES } from \"./graphql\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { CmsReferenceContentEntry, OptionItem, OptionItemCollection } from \"./types\";\nimport {\n    convertReferenceEntriesToOptionCollection,\n    convertReferenceEntryToOption\n} from \"~/admin/plugins/fieldRenderers/ref/components/helpers\";\n\ninterface UseReferencesParams {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\nexport const useReferences = ({ bind, field }: UseReferencesParams) => {\n    const isMounted = useRef(true);\n    const allEntries = useRef<OptionItemCollection>({});\n    const client = useApolloClient();\n    const [search, setSearch] = useState<string>(\"\");\n    const [loading, setLoading] = useState<boolean>(false);\n    const [entries, setEntries] = useState<OptionItemCollection>({});\n    const [latestEntries, setLatestEntries] = useState<OptionItem[]>([]);\n    const [valueEntries, setValueEntries] = useState<OptionItem[]>([]);\n    const requestContext = useModelFieldGraphqlContext();\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\"\n    >[];\n    const modelsHash = models.join(\",\");\n    const values: CmsEntryGetEntryVariable[] = bind.value ? bind.value : [];\n\n    const searchEntries = async (): Promise<void> => {\n        if (!search) {\n            return;\n        }\n\n        setLoading(true);\n        const { data } = await client.query<\n            CmsEntrySearchQueryResponse,\n            CmsEntrySearchQueryVariables\n        >({\n            query: SEARCH_CONTENT_ENTRIES,\n            variables: {\n                modelIds: models.map(m => m.modelId),\n                query: search\n            },\n            context: requestContext\n        });\n        setLoading(false);\n\n        const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n\n        allEntries.current = {\n            ...allEntries.current,\n            ...collection\n        };\n\n        setEntries(collection);\n    };\n\n    useEffect(() => {\n        return () => {\n            isMounted.current = false;\n        };\n    }, []);\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        client\n            .query<CmsEntrySearchQueryResponse, CmsEntrySearchQueryVariables>({\n                query: SEARCH_CONTENT_ENTRIES,\n                variables: {\n                    modelIds: models.map(m => m.modelId),\n                    limit: 10\n                },\n                /**\n                 * We cannot update this query response in cache after a reference entry being created/deleted,\n                 * which result in cached response being stale, therefore, we're setting the fetchPolicy to \"network-only\" to by passing cache.\n                 */\n                fetchPolicy: \"network-only\",\n                context: requestContext\n            })\n            .then(({ data }) => {\n                if (!isMounted.current) {\n                    return;\n                }\n\n                const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n                setLatestEntries(Object.values(collection));\n                allEntries.current = {\n                    ...collection\n                };\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!values || values.length == 0) {\n            return;\n        }\n\n        setLoading(true);\n\n        client\n            .query<CmsEntryGetListResponse, CmsEntryGetListVariables>({\n                query: GET_CONTENT_ENTRIES,\n                variables: {\n                    /**\n                     * We need make sure nothing else other than modelId and id is passed to entries variable.\n                     */\n                    entries: values.map(value => {\n                        return {\n                            modelId: value.modelId,\n                            id: value.id\n                        };\n                    })\n                },\n                context: requestContext\n            })\n            .then(res => {\n                if (!isMounted.current) {\n                    return;\n                }\n\n                setLoading(false);\n\n                const latest = (res.data.latest.data || []).reduce((collection, item) => {\n                    collection[item.entryId] = item;\n                    return collection;\n                }, {} as Record<string, CmsReferenceContentEntry>);\n\n                const entries = (res.data.published.data || []).reduce((collection, item) => {\n                    const entryId = item.entryId;\n                    const existingItem = latest[entryId];\n                    if (existingItem) {\n                        collection[entryId] = {\n                            ...existingItem,\n                            published: {\n                                id: item.id,\n                                entryId: item.entryId,\n                                title: item.title\n                            }\n                        };\n                        return collection;\n                    }\n                    collection[entryId] = item;\n                    return collection;\n                }, latest);\n\n                // Calculate a couple of props for the Autocomplete component.\n                setValueEntries(Object.values(entries).map(convertReferenceEntryToOption));\n            });\n    }, []);\n\n    /**\n     * onChange callback will update internal component state using the previously loaded entries by IDs.\n     * It will also format the value to store to the DB.\n     */\n    const onChange = useCallback((values: OptionItem[]): void => {\n        setSearch(\"\");\n        setValueEntries(values);\n\n        // Update parent form\n        bind.onChange(\n            values.map(item => ({\n                modelId: item.modelId,\n                id: item.id\n            }))\n        );\n    }, []);\n\n    // Format options for the Autocomplete component.\n    const options = useMemo(() => Object.values(entries), [entries]);\n\n    // Format default options for the Autocomplete component.\n    const defaultOptions = useMemo(() => Object.values(latestEntries), [latestEntries]);\n\n    return {\n        onChange,\n        loading,\n        setSearch,\n        // Selected entries\n        entries: valueEntries,\n        // Options to show when the autocomplete dropdown is visible\n        options: search ? options : defaultOptions || []\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntry.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { CmsModelField } from "../../../../../types";
+interface UseNewRefEntryParams {
+    field: CmsModelField;
+}
+interface UseNewRefEntry {
+    renderNewEntryModal: boolean;
+    refModelId: string;
+    helpText: React.ReactElement;
+}
+export declare const useNewRefEntry: ({ field }: UseNewRefEntryParams) => UseNewRefEntry;
+export {};

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntry.js

@@ -0,0 +1,53 @@
+import React from "react";
+import MissingEntryHelpText, { ReferenceMultipleModelsHelpText } from "../components/MissingEntryHelpText";
+import { useContentEntries } from "../../../../views/contentEntries/hooks/useContentEntries";
+export const useNewRefEntry = ({
+  field
+}) => {
+  const models = (field.settings && field.settings.models ? field.settings.models : null) || [];
+  const [{
+    modelId: refModelId
+  }] = models;
+  const referenceMultipleModels = models.length > 1;
+  let contentEntriesContext = null;
+  try {
+    contentEntriesContext = useContentEntries();
+  } catch {
+    // Means there's no `ContentEntriesContextProvider`, so we must be in model editor "preview".
+  }
+
+  /**
+   * We don't wrap the "ContentEntryForm" with "ContentEntriesContextProvider"
+   * when rendering it inside content model editor's preview tab.
+   *
+   * And we also don't want to have new ref field Dialog in the preview tab.
+   * Therefore, we check for "contentEntriesContext" to know that we're inside preview tab.
+   */
+  const renderedInPreviewTab = contentEntriesContext === null;
+  let renderNewEntryModal = false;
+  if (renderedInPreviewTab) {
+    renderNewEntryModal = false;
+  } else if (referenceMultipleModels) {
+    renderNewEntryModal = false;
+  } else if (contentEntriesContext) {
+    renderNewEntryModal = !contentEntriesContext.insideDialog;
+  }
+  /**
+   * Set "helpText" value.
+   */
+  let helpText;
+  if (referenceMultipleModels) {
+    helpText = /*#__PURE__*/React.createElement(ReferenceMultipleModelsHelpText, null);
+  } else {
+    helpText = /*#__PURE__*/React.createElement(MissingEntryHelpText, {
+      refModelId: refModelId
+    });
+  }
+  return {
+    renderNewEntryModal,
+    refModelId,
+    helpText
+  };
+};
+
+//# sourceMappingURL=useNewRefEntry.js.map

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","MissingEntryHelpText","ReferenceMultipleModelsHelpText","useContentEntries","useNewRefEntry","field","models","settings","modelId","refModelId","referenceMultipleModels","length","contentEntriesContext","renderedInPreviewTab","renderNewEntryModal","insideDialog","helpText","createElement"],"sources":["useNewRefEntry.tsx"],"sourcesContent":["import React from \"react\";\nimport type { CmsModelField } from \"~/types\";\nimport MissingEntryHelpText, {\n    ReferenceMultipleModelsHelpText\n} from \"../components/MissingEntryHelpText\";\nimport { useContentEntries } from \"~/admin/views/contentEntries/hooks/useContentEntries\";\n\ninterface UseNewRefEntryParams {\n    field: CmsModelField;\n}\n\ninterface UseNewRefEntry {\n    renderNewEntryModal: boolean;\n    refModelId: string;\n    helpText: React.ReactElement;\n}\n\nexport const useNewRefEntry = ({ field }: UseNewRefEntryParams): UseNewRefEntry => {\n    const models = (field.settings && field.settings.models ? field.settings.models : null) || [];\n    const [{ modelId: refModelId }] = models;\n    const referenceMultipleModels = models.length > 1;\n\n    let contentEntriesContext = null;\n    try {\n        contentEntriesContext = useContentEntries();\n    } catch {\n        // Means there's no `ContentEntriesContextProvider`, so we must be in model editor \"preview\".\n    }\n\n    /**\n     * We don't wrap the \"ContentEntryForm\" with \"ContentEntriesContextProvider\"\n     * when rendering it inside content model editor's preview tab.\n     *\n     * And we also don't want to have new ref field Dialog in the preview tab.\n     * Therefore, we check for \"contentEntriesContext\" to know that we're inside preview tab.\n     */\n    const renderedInPreviewTab = contentEntriesContext === null;\n\n    let renderNewEntryModal = false;\n\n    if (renderedInPreviewTab) {\n        renderNewEntryModal = false;\n    } else if (referenceMultipleModels) {\n        renderNewEntryModal = false;\n    } else if (contentEntriesContext) {\n        renderNewEntryModal = !contentEntriesContext.insideDialog;\n    }\n    /**\n     * Set \"helpText\" value.\n     */\n    let helpText;\n    if (referenceMultipleModels) {\n        helpText = <ReferenceMultipleModelsHelpText />;\n    } else {\n        helpText = <MissingEntryHelpText refModelId={refModelId} />;\n    }\n\n    return {\n        renderNewEntryModal,\n        refModelId,\n        helpText\n    };\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,oBAAoB,IACvBC,+BAA+B;AAEnC,SAASC,iBAAiB;AAY1B,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAAEC;AAA4B,CAAC,KAAqB;EAC/E,MAAMC,MAAM,GAAG,CAACD,KAAK,CAACE,QAAQ,IAAIF,KAAK,CAACE,QAAQ,CAACD,MAAM,GAAGD,KAAK,CAACE,QAAQ,CAACD,MAAM,GAAG,IAAI,KAAK,EAAE;EAC7F,MAAM,CAAC;IAAEE,OAAO,EAAEC;EAAW,CAAC,CAAC,GAAGH,MAAM;EACxC,MAAMI,uBAAuB,GAAGJ,MAAM,CAACK,MAAM,GAAG,CAAC;EAEjD,IAAIC,qBAAqB,GAAG,IAAI;EAChC,IAAI;IACAA,qBAAqB,GAAGT,iBAAiB,CAAC,CAAC;EAC/C,CAAC,CAAC,MAAM;IACJ;EAAA;;EAGJ;AACJ;AACA;AACA;AACA;AACA;AACA;EACI,MAAMU,oBAAoB,GAAGD,qBAAqB,KAAK,IAAI;EAE3D,IAAIE,mBAAmB,GAAG,KAAK;EAE/B,IAAID,oBAAoB,EAAE;IACtBC,mBAAmB,GAAG,KAAK;EAC/B,CAAC,MAAM,IAAIJ,uBAAuB,EAAE;IAChCI,mBAAmB,GAAG,KAAK;EAC/B,CAAC,MAAM,IAAIF,qBAAqB,EAAE;IAC9BE,mBAAmB,GAAG,CAACF,qBAAqB,CAACG,YAAY;EAC7D;EACA;AACJ;AACA;EACI,IAAIC,QAAQ;EACZ,IAAIN,uBAAuB,EAAE;IACzBM,QAAQ,gBAAGhB,KAAA,CAAAiB,aAAA,CAACf,+BAA+B,MAAE,CAAC;EAClD,CAAC,MAAM;IACHc,QAAQ,gBAAGhB,KAAA,CAAAiB,aAAA,CAAChB,oBAAoB;MAACQ,UAAU,EAAEA;IAAW,CAAE,CAAC;EAC/D;EAEA,OAAO;IACHK,mBAAmB;IACnBL,UAAU;IACVO;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/ref/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("../../../../types").CmsEditorFieldRendererPlugin[];
+declare const _default: import("@webiny/app-headless-cms-common/types").CmsModelFieldRendererPlugin[];
 export default _default;

package/admin/plugins/fieldRenderers/ref/index.js

@@ -1,3 +1,7 @@
 import refInput from "./refInput";
 import refInputs from "./refInputs";
-export default [refInput, refInputs];
+import { createAdvancedRefRenderer } from "./advanced";
+import { createSimpleRefRenderer } from "./simple";
+export default [...createAdvancedRefRenderer(), refInput, refInputs, ...createSimpleRefRenderer()];
+
+//# sourceMappingURL=index.js.map

package/admin/plugins/fieldRenderers/ref/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["refInput","refInputs","createAdvancedRefRenderer","createSimpleRefRenderer"],"sources":["index.ts"],"sourcesContent":["import refInput from \"./refInput\";\nimport refInputs from \"./refInputs\";\nimport { createAdvancedRefRenderer } from \"./advanced\";\nimport { createSimpleRefRenderer } from \"./simple\";\n\nexport default [...createAdvancedRefRenderer(), refInput, refInputs, ...createSimpleRefRenderer()];\n"],"mappings":"AAAA,OAAOA,QAAQ;AACf,OAAOC,SAAS;AAChB,SAASC,yBAAyB;AAClC,SAASC,uBAAuB;AAEhC,eAAe,CAAC,GAAGD,yBAAyB,CAAC,CAAC,EAAEF,QAAQ,EAAEC,SAAS,EAAE,GAAGE,uBAAuB,CAAC,CAAC,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/ref/refInput.d.ts

@@ -1,3 +1,3 @@
-import { CmsEditorFieldRendererPlugin } from "../../../../types";
-declare const plugin: CmsEditorFieldRendererPlugin;
+import type { CmsModelFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsModelFieldRendererPlugin;
 export default plugin;

package/admin/plugins/fieldRenderers/ref/refInput.js

@@ -1,30 +1,27 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
 import React from "react";
 import { i18n } from "@webiny/app/i18n";
 import ContentEntriesAutocomplete from "./components/ContentEntriesAutocomplete";
-var t = i18n.ns("app-headless-cms/admin/fields/ref");
-var plugin = {
+const t = i18n.ns("app-headless-cms/admin/fields/ref");
+const plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-ref",
   renderer: {
     rendererName: "ref-input",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Reference Input"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders an auto-complete input, allowing selection of a single value."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
+    name: t`Reference Input`,
+    description: t`Renders an auto-complete input, allowing selection of a single value.`,
+    canUse({
+      field
+    }) {
       return field.type === "ref" && !field.multipleValues;
     },
-    render: function render(props) {
-      var Bind = props.getBind();
-      return /*#__PURE__*/React.createElement(Bind, null, function (bind) {
-        return /*#__PURE__*/React.createElement(ContentEntriesAutocomplete, Object.assign({}, props, {
-          bind: bind
-        }));
-      });
+    render(props) {
+      const Bind = props.getBind();
+      return /*#__PURE__*/React.createElement(Bind, null, bind => /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(ContentEntriesAutocomplete, Object.assign({}, props, {
+        bind: bind
+      }))));
     }
   }
 };
-export default plugin;
+export default plugin;
+
+//# sourceMappingURL=refInput.js.map

package/admin/plugins/fieldRenderers/ref/refInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","i18n","ContentEntriesAutocomplete","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","props","Bind","getBind","createElement","bind","ValidationContainer","Object","assign"],"sources":["refInput.tsx"],"sourcesContent":["import React from \"react\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport ContentEntriesAutocomplete from \"./components/ContentEntriesAutocomplete\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-ref\",\n    renderer: {\n        rendererName: \"ref-input\",\n        name: t`Reference Input`,\n        description: t`Renders an auto-complete input, allowing selection of a single value.`,\n        canUse({ field }) {\n            return field.type === \"ref\" && !field.multipleValues;\n        },\n        render(props) {\n            const Bind = props.getBind();\n\n            return (\n                <Bind>\n                    {bind => (\n                        <Bind.ValidationContainer>\n                            <ContentEntriesAutocomplete {...props} bind={bind} />\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,OAAOC,0BAA0B;AAEjC,MAAMC,CAAC,GAAGF,IAAI,CAACG,EAAE,CAAC,mCAAmC,CAAC;AAEtD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,+BAA+B;EACrCC,QAAQ,EAAE;IACNC,YAAY,EAAE,WAAW;IACzBF,IAAI,EAAEJ,CAAC,iBAAiB;IACxBO,WAAW,EAAEP,CAAC,uEAAuE;IACrFQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OAAOA,KAAK,CAACN,IAAI,KAAK,KAAK,IAAI,CAACM,KAAK,CAACC,cAAc;IACxD,CAAC;IACDC,MAAMA,CAACC,KAAK,EAAE;MACV,MAAMC,IAAI,GAAGD,KAAK,CAACE,OAAO,CAAC,CAAC;MAE5B,oBACIjB,KAAA,CAAAkB,aAAA,CAACF,IAAI,QACAG,IAAI,iBACDnB,KAAA,CAAAkB,aAAA,CAACF,IAAI,CAACI,mBAAmB,qBACrBpB,KAAA,CAAAkB,aAAA,CAAChB,0BAA0B,EAAAmB,MAAA,CAAAC,MAAA,KAAKP,KAAK;QAAEI,IAAI,EAAEA;MAAK,EAAE,CAC9B,CAE5B,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAed,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/ref/refInputs.d.ts

@@ -1,3 +1,3 @@
-import { CmsEditorFieldRendererPlugin } from "../../../../types";
-declare const plugin: CmsEditorFieldRendererPlugin;
+import type { CmsModelFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsModelFieldRendererPlugin;
 export default plugin;

package/admin/plugins/fieldRenderers/ref/refInputs.js

@@ -1,37 +1,34 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
 import React from "react";
-import ContentEntriesMultiAutocomplete from "./components/ContentEntriesMultiAutoComplete";
 import { i18n } from "@webiny/app/i18n";
-var t = i18n.ns("app-headless-cms/admin/fields/ref");
-
-var getKey = function getKey(field, bind) {
-  return bind.form.data.id + "." + field.fieldId;
+import { useForm } from "@webiny/form";
+import ContentEntriesMultiAutocomplete from "./components/ContentEntriesMultiAutoComplete";
+const t = i18n.ns("app-headless-cms/admin/fields/ref");
+const getKey = (field, id) => {
+  return (id || "unknown") + "." + field.fieldId;
 };
-
-var plugin = {
+const plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-ref-inputs",
   renderer: {
     rendererName: "ref-inputs",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Reference Inputs"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders an auto-complete input, allowing selection of multiple values."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
-      return field.type === "ref" && field.multipleValues;
+    name: t`Reference Inputs`,
+    description: t`Renders an auto-complete input, allowing selection of multiple values.`,
+    canUse({
+      field
+    }) {
+      return field.type === "ref" && !!field.multipleValues;
     },
-    render: function render(props) {
-      var Bind = props.getBind();
-      return /*#__PURE__*/React.createElement(Bind, null, function (bind) {
-        return /*#__PURE__*/React.createElement(ContentEntriesMultiAutocomplete, Object.assign({
-          key: getKey(props.field, bind)
-        }, props, {
-          bind: bind
-        }));
-      });
+    render(props) {
+      const Bind = props.getBind();
+      const form = useForm();
+      return /*#__PURE__*/React.createElement(Bind, null, bind => /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(ContentEntriesMultiAutocomplete, Object.assign({
+        key: getKey(props.field, form.data.id)
+      }, props, {
+        bind: bind
+      }))));
     }
   }
 };
-export default plugin;
+export default plugin;
+
+//# sourceMappingURL=refInputs.js.map

package/admin/plugins/fieldRenderers/ref/refInputs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","i18n","useForm","ContentEntriesMultiAutocomplete","t","ns","getKey","field","id","fieldId","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","render","props","Bind","getBind","form","createElement","bind","ValidationContainer","Object","assign","key","data"],"sources":["refInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useForm } from \"@webiny/form\";\nimport type { CmsModelField, CmsModelFieldRendererPlugin } from \"~/types\";\nimport ContentEntriesMultiAutocomplete from \"./components/ContentEntriesMultiAutoComplete\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst getKey = (field: CmsModelField, id: string | undefined): string => {\n    return (id || \"unknown\") + \".\" + field.fieldId;\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-ref-inputs\",\n    renderer: {\n        rendererName: \"ref-inputs\",\n        name: t`Reference Inputs`,\n        description: t`Renders an auto-complete input, allowing selection of multiple values.`,\n        canUse({ field }) {\n            return field.type === \"ref\" && !!field.multipleValues;\n        },\n        render(props) {\n            const Bind = props.getBind();\n            const form = useForm();\n\n            return (\n                <Bind>\n                    {bind => (\n                        <Bind.ValidationContainer>\n                            <ContentEntriesMultiAutocomplete\n                                key={getKey(props.field, form.data.id)}\n                                {...props}\n                                bind={bind}\n                            />\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,OAAO,QAAQ,cAAc;AAEtC,OAAOC,+BAA+B;AAEtC,MAAMC,CAAC,GAAGH,IAAI,CAACI,EAAE,CAAC,mCAAmC,CAAC;AAEtD,MAAMC,MAAM,GAAGA,CAACC,KAAoB,EAAEC,EAAsB,KAAa;EACrE,OAAO,CAACA,EAAE,IAAI,SAAS,IAAI,GAAG,GAAGD,KAAK,CAACE,OAAO;AAClD,CAAC;AAED,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,sCAAsC;EAC5CC,QAAQ,EAAE;IACNC,YAAY,EAAE,YAAY;IAC1BF,IAAI,EAAER,CAAC,kBAAkB;IACzBW,WAAW,EAAEX,CAAC,wEAAwE;IACtFY,MAAMA,CAAC;MAAET;IAAM,CAAC,EAAE;MACd,OAAOA,KAAK,CAACI,IAAI,KAAK,KAAK,IAAI,CAAC,CAACJ,KAAK,CAACU,cAAc;IACzD,CAAC;IACDC,MAAMA,CAACC,KAAK,EAAE;MACV,MAAMC,IAAI,GAAGD,KAAK,CAACE,OAAO,CAAC,CAAC;MAC5B,MAAMC,IAAI,GAAGpB,OAAO,CAAC,CAAC;MAEtB,oBACIF,KAAA,CAAAuB,aAAA,CAACH,IAAI,QACAI,IAAI,iBACDxB,KAAA,CAAAuB,aAAA,CAACH,IAAI,CAACK,mBAAmB,qBACrBzB,KAAA,CAAAuB,aAAA,CAACpB,+BAA+B,EAAAuB,MAAA,CAAAC,MAAA;QAC5BC,GAAG,EAAEtB,MAAM,CAACa,KAAK,CAACZ,KAAK,EAAEe,IAAI,CAACO,IAAI,CAACrB,EAAE;MAAE,GACnCW,KAAK;QACTK,IAAI,EAAEA;MAAK,EACd,CACqB,CAE5B,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAed,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/ref/simple/components/Loader.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Loader: () => React.JSX.Element;

package/admin/plugins/fieldRenderers/ref/simple/components/Loader.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+export const Loader = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: "180px"
+    },
+    className: "wby-relative"
+  }, /*#__PURE__*/React.createElement(OverlayLoader, {
+    size: "md",
+    text: "Loading entries..."
+  }));
+};
+
+//# sourceMappingURL=Loader.js.map

package/admin/plugins/fieldRenderers/ref/simple/components/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","OverlayLoader","Loader","createElement","style","height","className","size","text"],"sources":["Loader.tsx"],"sourcesContent":["import React from \"react\";\nimport { OverlayLoader } from \"@webiny/admin-ui\";\n\nexport const Loader = () => {\n    return (\n        <div style={{ height: \"180px\" }} className={\"wby-relative\"}>\n            <OverlayLoader size={\"md\"} text={\"Loading entries...\"} />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,OAAO,MAAMC,MAAM,GAAGA,CAAA,KAAM;EACxB,oBACIF,KAAA,CAAAG,aAAA;IAAKC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAQ,CAAE;IAACC,SAAS,EAAE;EAAe,gBACvDN,KAAA,CAAAG,aAAA,CAACF,aAAa;IAACM,IAAI,EAAE,IAAK;IAACC,IAAI,EAAE;EAAqB,CAAE,CACvD,CAAC;AAEd,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/ref/simple/components/SimpleMultipleRenderer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { BindComponentRenderProp, CmsModelField } from "../../../../../../types";
+import type { CmsReferenceValue } from "../../components/types";
+interface SimpleMultipleRendererProps {
+    bind: BindComponentRenderProp<CmsReferenceValue[] | undefined | null>;
+    field: CmsModelField;
+}
+export declare const SimpleMultipleRenderer: (props: SimpleMultipleRendererProps) => React.JSX.Element;
+export {};