@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

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

@@ -1,19 +1,16 @@
 /// <reference types="react" />
-declare type ValueEntry = {
-    id: string;
-    modelId: string;
-    modelName: string;
-    published: boolean;
-    name: string;
-};
-export declare const useReferences: ({ bind, field }: {
-    bind: any;
-    field: any;
-}) => {
-    onChange: (values: any) => void;
+import { CmsModelField } from "../../../../../types";
+import { BindComponentRenderProp } from "@webiny/form";
+import { OptionItem } from "./types";
+interface UseReferencesParams {
+    bind: BindComponentRenderProp;
+    field: CmsModelField;
+}
+export declare const useReferences: ({ bind, field }: UseReferencesParams) => {
+    onChange: (values: OptionItem[]) => void;
     loading: boolean;
     setSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
-    entries: ValueEntry[];
-    options: any[];
+    entries: OptionItem[];
+    options: OptionItem[];
 };
 export {};

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

@@ -1,172 +1,193 @@
-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) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReferences = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _hooks = require("../../../../hooks");
+var _graphql = require("./graphql");
+var _helpers = require("./helpers");
+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;
+    field = _ref.field;
+  var isMounted = (0, _react.useRef)(true);
+  var allEntries = (0, _react.useRef)({});
+  var client = (0, _hooks.useApolloClient)();
+  var _useState = (0, _react.useState)(""),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    search = _useState2[0],
+    setSearch = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    entries = _useState6[0],
+    setEntries = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    latestEntries = _useState8[0],
+    setLatestEntries = _useState8[1];
+  var _useState9 = (0, _react.useState)([]),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    valueEntries = _useState10[0],
+    setValueEntries = _useState10[1];
+  var models = field.settings ? 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;
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var _yield$client$query, data, collection;
+      return (0, _regeneratorRuntime2.default)().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: _graphql.SEARCH_CONTENT_ENTRIES,
+              variables: {
+                modelIds: models.map(function (m) {
+                  return m.modelId;
+                }),
+                query: search
               }
-
-              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();
-          }
+            });
+          case 5:
+            _yield$client$query = _context.sent;
+            data = _yield$client$query.data;
+            setLoading(false);
+            collection = (0, _helpers.convertReferenceEntriesToOptionCollection)(data.content.data);
+            allEntries.current = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, allEntries.current), collection);
+            setEntries(collection);
+          case 11:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));
-
     return function searchEntries() {
       return _ref2.apply(this, arguments);
     };
   }();
-
-  useEffect(function () {
+  (0, _react.useEffect)(function () {
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
     searchEntries();
   }, [search]);
-  useEffect(function () {
+  (0, _react.useEffect)(function () {
     client.query({
-      query: GQL.SEARCH_CONTENT_ENTRIES,
+      query: _graphql.SEARCH_CONTENT_ENTRIES,
       variables: {
         modelIds: models.map(function (m) {
           return m.modelId;
         }),
-        query: "__latest__",
         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"
     }).then(function (_ref3) {
       var data = _ref3.data;
-      setLatestEntries(data.content.data);
-      allEntries.current = _toConsumableArray(data.content.data);
+      if (!isMounted.current) {
+        return;
+      }
+      var collection = (0, _helpers.convertReferenceEntriesToOptionCollection)(data.content.data);
+      setLatestEntries(Object.values(collection));
+      allEntries.current = (0, _objectSpread2.default)({}, collection);
     });
   }, [modelsHash]);
-  useEffect(function () {
-    if (!values || !values.length) {
+  (0, _react.useEffect)(function () {
+    if (!values || values.length == 0) {
       return;
     }
-
     setLoading(true);
     client.query({
-      query: GQL.GET_CONTENT_ENTRIES,
+      query: _graphql.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(function (value) {
+          return {
+            modelId: value.modelId,
+            id: value.id
+          };
+        })
       }
     }).then(function (res) {
+      if (!isMounted.current) {
+        return;
+      }
       setLoading(false);
-      var entries = res.data.content.data; // Calculate a couple of props for the Autocomplete component.
+      var latest = (res.data.latest.data || []).reduce(function (collection, item) {
+        collection[item.entryId] = item;
+        return collection;
+      }, {});
+      var entries = (res.data.published.data || []).reduce(function (collection, item) {
+        var entryId = item.entryId;
+        var existingItem = latest[entryId];
+        if (existingItem) {
+          collection[entryId] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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(_helpers.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) {
+  var onChange = (0, _react.useCallback)(function (values) {
     setSearch("");
-    setValueEntries(values); // Update parent form
+    setValueEntries(values);
 
+    // Update parent form
     bind.onChange(values.map(function (item) {
       return {
         modelId: item.modelId,
-        entryId: item.id
+        id: item.id
       };
     }));
-  }, []); // Format options for the Autocomplete component.
+  }, []);
 
-  var options = useMemo(function () {
-    return getOptions(entries);
-  }, [entries]); // Format default options for the Autocomplete component.
+  // Format options for the Autocomplete component.
+  var options = (0, _react.useMemo)(function () {
+    return Object.values(entries);
+  }, [entries]);
 
-  var defaultOptions = useMemo(function () {
-    return getOptions(latestEntries);
+  // Format default options for the Autocomplete component.
+  var defaultOptions = (0, _react.useMemo)(function () {
+    return Object.values(latestEntries);
   }, [latestEntries]);
   return {
     onChange: onChange,
@@ -177,4 +198,5 @@ export var useReferences = function useReferences(_ref) {
     // Options to show when the autocomplete dropdown is visible
     options: search ? options : defaultOptions || []
   };
-};
+};
+exports.useReferences = useReferences;

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

@@ -0,0 +1 @@
+{"version":3,"names":["useReferences","bind","field","isMounted","useRef","allEntries","client","useApolloClient","useState","search","setSearch","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntries","setValueEntries","models","settings","modelsHash","join","values","value","searchEntries","query","SEARCH_CONTENT_ENTRIES","variables","modelIds","map","m","modelId","data","collection","convertReferenceEntriesToOptionCollection","content","current","useEffect","limit","fetchPolicy","then","Object","length","GET_CONTENT_ENTRIES","id","res","latest","reduce","item","entryId","published","existingItem","title","convertReferenceEntryToOption","onChange","useCallback","options","useMemo","defaultOptions"],"sources":["useReferences.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient } from \"~/admin/hooks\";\nimport { CmsModelField, CmsModel } from \"~/types\";\nimport {\n    SEARCH_CONTENT_ENTRIES,\n    GET_CONTENT_ENTRIES,\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables,\n    CmsEntryGetListResponse,\n    CmsEntryGetListVariables,\n    CmsEntryGetEntryVariable\n} from \"./graphql\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { 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\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        });\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            })\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            })\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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"}

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { 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,59 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNewRefEntry = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _MissingEntryHelpText = _interopRequireWildcard(require("../components/MissingEntryHelpText"));
+var _useContentEntries = require("../../../../views/contentEntries/hooks/useContentEntries");
+var useNewRefEntry = function useNewRefEntry(_ref) {
+  var field = _ref.field;
+  var models = (field.settings && field.settings.models ? field.settings.models : null) || [];
+  var _models = (0, _slicedToArray2.default)(models, 1),
+    refModelId = _models[0].modelId;
+  var referenceMultipleModels = models.length > 1;
+  var contentEntriesContext = null;
+  try {
+    contentEntriesContext = (0, _useContentEntries.useContentEntries)();
+  } catch (_unused) {
+    // 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.
+   */
+  var renderedInPreviewTab = contentEntriesContext === null;
+  var renderNewEntryModal = false;
+  if (renderedInPreviewTab) {
+    renderNewEntryModal = false;
+  } else if (referenceMultipleModels) {
+    renderNewEntryModal = false;
+  } else if (contentEntriesContext) {
+    renderNewEntryModal = !contentEntriesContext.insideDialog;
+  }
+  /**
+   * Set "helpText" value.
+   */
+  var helpText;
+  if (referenceMultipleModels) {
+    helpText = /*#__PURE__*/_react.default.createElement(_MissingEntryHelpText.ReferenceMultipleModelsHelpText, null);
+  } else {
+    helpText = /*#__PURE__*/_react.default.createElement(_MissingEntryHelpText.default, {
+      refModelId: refModelId
+    });
+  }
+  return {
+    renderNewEntryModal: renderNewEntryModal,
+    refModelId: refModelId,
+    helpText: helpText
+  };
+};
+exports.useNewRefEntry = useNewRefEntry;

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

@@ -0,0 +1 @@
+{"version":3,"names":["useNewRefEntry","field","models","settings","refModelId","modelId","referenceMultipleModels","length","contentEntriesContext","useContentEntries","renderedInPreviewTab","renderNewEntryModal","insideDialog","helpText"],"sources":["useNewRefEntry.tsx"],"sourcesContent":["import React from \"react\";\nimport { 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;AAEA;AAGA;AAYO,IAAMA,cAAc,GAAG,SAAjBA,cAAc,OAAwD;EAAA,IAAlDC,KAAK,QAALA,KAAK;EAClC,IAAMC,MAAM,GAAG,CAACD,KAAK,CAACE,QAAQ,IAAIF,KAAK,CAACE,QAAQ,CAACD,MAAM,GAAGD,KAAK,CAACE,QAAQ,CAACD,MAAM,GAAG,IAAI,KAAK,EAAE;EAC7F,2CAAkCA,MAAM;IAAtBE,UAAU,cAAnBC,OAAO;EAChB,IAAMC,uBAAuB,GAAGJ,MAAM,CAACK,MAAM,GAAG,CAAC;EAEjD,IAAIC,qBAAqB,GAAG,IAAI;EAChC,IAAI;IACAA,qBAAqB,GAAG,IAAAC,oCAAiB,GAAE;EAC/C,CAAC,CAAC,gBAAM;IACJ;EAAA;;EAGJ;AACJ;AACA;AACA;AACA;AACA;AACA;EACI,IAAMC,oBAAoB,GAAGF,qBAAqB,KAAK,IAAI;EAE3D,IAAIG,mBAAmB,GAAG,KAAK;EAE/B,IAAID,oBAAoB,EAAE;IACtBC,mBAAmB,GAAG,KAAK;EAC/B,CAAC,MAAM,IAAIL,uBAAuB,EAAE;IAChCK,mBAAmB,GAAG,KAAK;EAC/B,CAAC,MAAM,IAAIH,qBAAqB,EAAE;IAC9BG,mBAAmB,GAAG,CAACH,qBAAqB,CAACI,YAAY;EAC7D;EACA;AACJ;AACA;EACI,IAAIC,QAAQ;EACZ,IAAIP,uBAAuB,EAAE;IACzBO,QAAQ,gBAAG,6BAAC,qDAA+B,OAAG;EAClD,CAAC,MAAM;IACHA,QAAQ,gBAAG,6BAAC,6BAAoB;MAAC,UAAU,EAAET;IAAW,EAAG;EAC/D;EAEA,OAAO;IACHO,mBAAmB,EAAnBA,mBAAmB;IACnBP,UAAU,EAAVA,UAAU;IACVS,QAAQ,EAARA;EACJ,CAAC;AACL,CAAC;AAAC"}

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

@@ -0,0 +1,8 @@
+import React from "react";
+export interface NewRefEntryDialogContextValue {
+    open: boolean;
+    setOpen: (value: boolean) => void;
+}
+export declare const NewRefEntryDialogContext: React.Context<NewRefEntryDialogContextValue>;
+export declare const NewRefEntryDialogContextProvider: React.FC;
+export declare const useNewRefEntryDialog: () => NewRefEntryDialogContextValue;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNewRefEntryDialog = exports.NewRefEntryDialogContextProvider = exports.NewRefEntryDialogContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var NewRefEntryDialogContext = /*#__PURE__*/(0, _react.createContext)({
+  open: false,
+  setOpen: function setOpen() {
+    return void 0;
+  }
+});
+exports.NewRefEntryDialogContext = NewRefEntryDialogContext;
+var NewRefEntryDialogContextProvider = function NewRefEntryDialogContextProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(NewRefEntryDialogContext.Provider, {
+    value: {
+      open: open,
+      setOpen: setOpen
+    }
+  }, children);
+};
+exports.NewRefEntryDialogContextProvider = NewRefEntryDialogContextProvider;
+var useNewRefEntryDialog = function useNewRefEntryDialog() {
+  var _useContext = (0, _react.useContext)(NewRefEntryDialogContext),
+    open = _useContext.open,
+    setOpen = _useContext.setOpen;
+  return {
+    open: open,
+    setOpen: setOpen
+  };
+};
+exports.useNewRefEntryDialog = useNewRefEntryDialog;

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

@@ -0,0 +1 @@
+{"version":3,"names":["NewRefEntryDialogContext","createContext","open","setOpen","NewRefEntryDialogContextProvider","children","useState","useNewRefEntryDialog","useContext"],"sources":["useNewRefEntryDialog.tsx"],"sourcesContent":["import React, { createContext, useContext, useState } from \"react\";\n\nexport interface NewRefEntryDialogContextValue {\n    open: boolean;\n    setOpen: (value: boolean) => void;\n}\n\nexport const NewRefEntryDialogContext = createContext<NewRefEntryDialogContextValue>({\n    open: false,\n    setOpen: () => {\n        return void 0;\n    }\n});\n\nexport const NewRefEntryDialogContextProvider: React.FC = ({ children }) => {\n    const [open, setOpen] = useState<boolean>(false);\n\n    return (\n        <NewRefEntryDialogContext.Provider\n            value={{\n                open,\n                setOpen\n            }}\n        >\n            {children}\n        </NewRefEntryDialogContext.Provider>\n    );\n};\n\nexport const useNewRefEntryDialog = (): NewRefEntryDialogContextValue => {\n    const { open, setOpen } = useContext(NewRefEntryDialogContext);\n    return {\n        open,\n        setOpen\n    };\n};\n"],"mappings":";;;;;;;;;AAAA;AAOO,IAAMA,wBAAwB,gBAAG,IAAAC,oBAAa,EAAgC;EACjFC,IAAI,EAAE,KAAK;EACXC,OAAO,EAAE,mBAAM;IACX,OAAO,KAAK,CAAC;EACjB;AACJ,CAAC,CAAC;AAAC;AAEI,IAAMC,gCAA0C,GAAG,SAA7CA,gCAA0C,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EACjE,gBAAwB,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAzCJ,IAAI;IAAEC,OAAO;EAEpB,oBACI,6BAAC,wBAAwB,CAAC,QAAQ;IAC9B,KAAK,EAAE;MACHD,IAAI,EAAJA,IAAI;MACJC,OAAO,EAAPA;IACJ;EAAE,GAEDE,QAAQ,CACuB;AAE5C,CAAC;AAAC;AAEK,IAAME,oBAAoB,GAAG,SAAvBA,oBAAoB,GAAwC;EACrE,kBAA0B,IAAAC,iBAAU,EAACR,wBAAwB,CAAC;IAAtDE,IAAI,eAAJA,IAAI;IAAEC,OAAO,eAAPA,OAAO;EACrB,OAAO;IACHD,IAAI,EAAJA,IAAI;IACJC,OAAO,EAAPA;EACJ,CAAC;AACL,CAAC;AAAC"}

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

@@ -1,3 +1,11 @@
-import refInput from "./refInput";
-import refInputs from "./refInputs";
-export default [refInput, refInputs];
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _refInput = _interopRequireDefault(require("./refInput"));
+var _refInputs = _interopRequireDefault(require("./refInputs"));
+var _default = [_refInput.default, _refInputs.default];
+exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"names":["refInput","refInputs"],"sources":["index.ts"],"sourcesContent":["import refInput from \"./refInput\";\nimport refInputs from \"./refInputs\";\n\nexport default [refInput, refInputs];\n"],"mappings":";;;;;;;AAAA;AACA;AAAoC,eAErB,CAACA,iBAAQ,EAAEC,kBAAS,CAAC;AAAA"}

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

@@ -1,30 +1,37 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _i18n = require("@webiny/app/i18n");
+var _ContentEntriesAutocomplete = _interopRequireDefault(require("./components/ContentEntriesAutocomplete"));
+var _useNewRefEntryDialog = require("./hooks/useNewRefEntryDialog");
 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 t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
 var 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."]))),
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Reference Input"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders an auto-complete input, allowing selection of a single value."]))),
     canUse: function canUse(_ref) {
       var field = _ref.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, {
+      return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
+        return /*#__PURE__*/_react.default.createElement(_useNewRefEntryDialog.NewRefEntryDialogContextProvider, null, /*#__PURE__*/_react.default.createElement(_ContentEntriesAutocomplete.default, Object.assign({}, props, {
           bind: bind
-        }));
+        })));
       });
     }
   }
 };
-export default plugin;
+var _default = plugin;
+exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","props","Bind","getBind","bind"],"sources":["refInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport ContentEntriesAutocomplete from \"./components/ContentEntriesAutocomplete\";\nimport { NewRefEntryDialogContextProvider } from \"./hooks/useNewRefEntryDialog\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\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            return (\n                <Bind>\n                    {bind => (\n                        <NewRefEntryDialogContextProvider>\n                            <ContentEntriesAutocomplete {...props} bind={bind} />\n                        </NewRefEntryDialogContextProvider>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAAgF;AAEhF,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,mCAAmC,CAAC;AAEtD,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,+BAA+B;EACrCC,QAAQ,EAAE;IACNC,YAAY,EAAE,WAAW;IACzBF,IAAI,EAAEL,CAAC,kGAAiB;IACxBQ,WAAW,EAAER,CAAC,0JAAuE;IACrFS,MAAM,wBAAY;MAAA,IAATC,KAAK,QAALA,KAAK;MACV,OAAOA,KAAK,CAACN,IAAI,KAAK,KAAK,IAAI,CAACM,KAAK,CAACC,cAAc;IACxD,CAAC;IACDC,MAAM,kBAACC,KAAK,EAAE;MACV,IAAMC,IAAI,GAAGD,KAAK,CAACE,OAAO,EAAE;MAC5B,oBACI,6BAAC,IAAI,QACA,UAAAC,IAAI;QAAA,oBACD,6BAAC,sDAAgC,qBAC7B,6BAAC,mCAA0B,oBAAKH,KAAK;UAAE,IAAI,EAAEG;QAAK,GAAG,CACtB;MAAA,CACtC,CACE;IAEf;EACJ;AACJ,CAAC;AAAC,eAEab,MAAM;AAAA"}