@webiny/app-headless-cms 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

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

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NewReferencedEntryDialog = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+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 _Dialog = require("@webiny/ui/Dialog");
+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 _Button = require("@webiny/ui/Button");
+var _contentModels = require("../../../../../graphql/contentModels");
+var _hooks = require("../../../../../hooks");
+var _Dialog2 = require("./dialog/Dialog");
+var _templateObject, _templateObject2, _templateObject3;
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
+var EntryForm = function EntryForm(_ref) {
+  var onCreate = _ref.onCreate;
+  var _useContentEntry = (0, _useContentEntry3.useContentEntry)(),
+    setFormRef = _useContentEntry.setFormRef,
+    contentModel = _useContentEntry.contentModel;
+  return /*#__PURE__*/_react.default.createElement(_ModelProvider.ModelProvider, {
+    model: contentModel
+  }, /*#__PURE__*/_react.default.createElement(_ContentEntryForm.ContentEntryForm, {
+    onSubmit: function onSubmit(data) {
+      /**
+       * We know that data is CmsEditorContentEntry.
+       */
+      return onCreate(data);
+    },
+    onForm: function onForm(form) {
+      return setFormRef(form);
+    },
+    entry: {},
+    addEntryToListCache: false
+  }));
+};
+var DialogSaveButton = function DialogSaveButton() {
+  var _useContentEntry2 = (0, _useContentEntry3.useContentEntry)(),
+    form = _useContentEntry2.form;
+  var onClick = (0, _react.useCallback)(function (ev) {
+    (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return form.current.submit(ev);
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+  }, [form.current]);
+  return /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+    onClick: onClick
+  }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Create Entry"]))));
+};
+var NewReferencedEntryDialog = function NewReferencedEntryDialog(_ref3) {
+  var baseModel = _ref3.model,
+    onClose = _ref3.onClose,
+    onChange = _ref3.onChange;
+  var _useCms = (0, _hooks.useCms)(),
+    apolloClient = _useCms.apolloClient;
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    model = _useState2[0],
+    setModel = _useState2[1];
+  (0, _react.useEffect)(function () {
+    (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+      var response;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return apolloClient.query({
+              query: _contentModels.GET_CONTENT_MODEL,
+              variables: {
+                modelId: baseModel.modelId
+              }
+            });
+          case 2:
+            response = _context2.sent;
+            setModel(response.data.getContentModel.data);
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }))();
+  }, [baseModel.modelId]);
+  var onCreate = (0, _react.useCallback)(function (entry) {
+    var _entry$meta;
+    if (!model) {
+      onClose();
+      return;
+    }
+    onChange((0, _objectSpread2.default)((0, _objectSpread2.default)({}, entry), {}, {
+      /*
+       * Format data for AutoComplete.
+       */
+      published: ((_entry$meta = entry.meta) === null || _entry$meta === void 0 ? void 0 : _entry$meta.status) === "published",
+      modelId: model.modelId,
+      modelName: model.name
+    }));
+    onClose();
+  }, [onChange, model]);
+  if (!model) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_ContentEntriesContext.Provider, {
+    contentModel: model,
+    key: model.modelId,
+    insideDialog: true
+  }, /*#__PURE__*/_react.default.createElement(_ContentEntryContext.Provider, {
+    isNewEntry: function isNewEntry() {
+      return true;
+    },
+    getContentId: function getContentId() {
+      return null;
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Dialog2.FullWidthDialog, {
+    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)))));
+};
+exports.NewReferencedEntryDialog = NewReferencedEntryDialog;

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

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","EntryForm","onCreate","useContentEntry","setFormRef","contentModel","data","form","DialogSaveButton","onClick","useCallback","ev","current","submit","NewReferencedEntryDialog","baseModel","model","onClose","onChange","useCms","apolloClient","useState","undefined","setModel","useEffect","query","GET_CONTENT_MODEL","variables","modelId","response","getContentModel","entry","published","meta","status","modelName","name"],"sources":["NewReferencedEntryDialog.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { Provider as ContentEntryProvider } from \"~/admin/views/contentEntries/ContentEntry/ContentEntryContext\";\nimport { DialogActions, DialogCancel, DialogContent, DialogTitle } from \"@webiny/ui/Dialog\";\nimport { Provider as ContentEntriesProvider } from \"~/admin/views/contentEntries/ContentEntriesContext\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorContentEntry, CmsModel } from \"~/types\";\nimport { useContentEntry } from \"~/admin/views/contentEntries/hooks/useContentEntry\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider\";\nimport { ContentEntryForm } from \"~/admin/components/ContentEntryForm/ContentEntryForm\";\nimport { ButtonPrimary } from \"@webiny/ui/Button\";\nimport {\n    GET_CONTENT_MODEL,\n    GetCmsModelQueryResponse,\n    GetCmsModelQueryVariables\n} from \"~/admin/graphql/contentModels\";\nimport { useCms } from \"~/admin/hooks\";\nimport { FullWidthDialog } from \"./dialog/Dialog\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\ninterface EntryFormProps {\n    onCreate: (entry: CmsEditorContentEntry) => void;\n}\n\nconst EntryForm: React.VFC<EntryFormProps> = ({ onCreate }) => {\n    const { setFormRef, contentModel } = useContentEntry();\n\n    return (\n        <ModelProvider model={contentModel}>\n            <ContentEntryForm\n                onSubmit={data => {\n                    /**\n                     * We know that data is CmsEditorContentEntry.\n                     */\n                    return onCreate(data as unknown as CmsEditorContentEntry);\n                }}\n                onForm={form => setFormRef(form)}\n                entry={{}}\n                addEntryToListCache={false}\n            />\n        </ModelProvider>\n    );\n};\n\nconst DialogSaveButton: React.VFC = () => {\n    const { form } = useContentEntry();\n\n    const onClick = useCallback(\n        (ev: React.MouseEvent) => {\n            (async () => {\n                await form.current.submit(ev);\n            })();\n        },\n        [form.current]\n    );\n\n    return <ButtonPrimary onClick={onClick}>{t`Create Entry`}</ButtonPrimary>;\n};\n\ninterface Props {\n    model: Pick<CmsModel, \"modelId\">;\n    onClose: () => void;\n    onChange: (entry: any) => void;\n}\n\nexport const NewReferencedEntryDialog: React.VFC<Props> = ({\n    model: baseModel,\n    onClose,\n    onChange\n}) => {\n    const { apolloClient } = useCms();\n    const [model, setModel] = useState<CmsModel | undefined>(undefined);\n\n    useEffect(() => {\n        (async () => {\n            const response = await apolloClient.query<\n                GetCmsModelQueryResponse,\n                GetCmsModelQueryVariables\n            >({\n                query: GET_CONTENT_MODEL,\n                variables: {\n                    modelId: baseModel.modelId\n                }\n            });\n            setModel(response.data.getContentModel.data);\n        })();\n    }, [baseModel.modelId]);\n\n    const onCreate = useCallback(\n        (entry: CmsEditorContentEntry) => {\n            if (!model) {\n                onClose();\n                return;\n            }\n            onChange({\n                ...entry,\n                /*\n                 * Format data for AutoComplete.\n                 */\n                published: entry.meta?.status === \"published\",\n                modelId: model.modelId,\n                modelName: model.name\n            });\n            onClose();\n        },\n        [onChange, model]\n    );\n    if (!model) {\n        return null;\n    }\n\n    return (\n        <ContentEntriesProvider contentModel={model} key={model.modelId} insideDialog={true}>\n            <ContentEntryProvider isNewEntry={() => true} getContentId={() => null}>\n                <FullWidthDialog open={true} onClose={onClose}>\n                    <DialogTitle>{t`New {modelName} Entry`({ modelName: model.name })}</DialogTitle>\n                    <DialogContent>\n                        <EntryForm onCreate={onCreate} />\n                    </DialogContent>\n                    <DialogActions>\n                        <DialogCancel>{t`Cancel`}</DialogCancel>\n                        <DialogSaveButton />\n                    </DialogActions>\n                </FullWidthDialog>\n            </ContentEntryProvider>\n        </ContentEntriesProvider>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAKA;AACA;AAAkD;AAElD,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,mCAAmC,CAAC;AAMtD,IAAMC,SAAoC,GAAG,SAAvCA,SAAoC,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EACpD,uBAAqC,IAAAC,iCAAe,GAAE;IAA9CC,UAAU,oBAAVA,UAAU;IAAEC,YAAY,oBAAZA,YAAY;EAEhC,oBACI,6BAAC,4BAAa;IAAC,KAAK,EAAEA;EAAa,gBAC/B,6BAAC,kCAAgB;IACb,QAAQ,EAAE,kBAAAC,IAAI,EAAI;MACd;AACpB;AACA;MACoB,OAAOJ,QAAQ,CAACI,IAAI,CAAqC;IAC7D,CAAE;IACF,MAAM,EAAE,gBAAAC,IAAI;MAAA,OAAIH,UAAU,CAACG,IAAI,CAAC;IAAA,CAAC;IACjC,KAAK,EAAE,CAAC,CAAE;IACV,mBAAmB,EAAE;EAAM,EAC7B,CACU;AAExB,CAAC;AAED,IAAMC,gBAA2B,GAAG,SAA9BA,gBAA2B,GAAS;EACtC,wBAAiB,IAAAL,iCAAe,GAAE;IAA1BI,IAAI,qBAAJA,IAAI;EAEZ,IAAME,OAAO,GAAG,IAAAC,kBAAW,EACvB,UAACC,EAAoB,EAAK;IACtB,uFAAC;MAAA;QAAA;UAAA;YAAA;YAAA,OACSJ,IAAI,CAACK,OAAO,CAACC,MAAM,CAACF,EAAE,CAAC;UAAA;UAAA;YAAA;QAAA;MAAA;IAAA,CAChC,IAAG;EACR,CAAC,EACD,CAACJ,IAAI,CAACK,OAAO,CAAC,CACjB;EAED,oBAAO,6BAAC,qBAAa;IAAC,OAAO,EAAEH;EAAQ,GAAEX,CAAC,gGAA+B;AAC7E,CAAC;AAQM,IAAMgB,wBAA0C,GAAG,SAA7CA,wBAA0C,QAIjD;EAAA,IAHKC,SAAS,SAAhBC,KAAK;IACLC,OAAO,SAAPA,OAAO;IACPC,QAAQ,SAARA,QAAQ;EAER,cAAyB,IAAAC,aAAM,GAAE;IAAzBC,YAAY,WAAZA,YAAY;EACpB,gBAA0B,IAAAC,eAAQ,EAAuBC,SAAS,CAAC;IAAA;IAA5DN,KAAK;IAAEO,QAAQ;EAEtB,IAAAC,gBAAS,EAAC,YAAM;IACZ,uFAAC;MAAA;MAAA;QAAA;UAAA;YAAA;YAAA,OAC0BJ,YAAY,CAACK,KAAK,CAGvC;cACEA,KAAK,EAAEC,gCAAiB;cACxBC,SAAS,EAAE;gBACPC,OAAO,EAAEb,SAAS,CAACa;cACvB;YACJ,CAAC,CAAC;UAAA;YARIC,QAAQ;YASdN,QAAQ,CAACM,QAAQ,CAACvB,IAAI,CAACwB,eAAe,CAACxB,IAAI,CAAC;UAAC;UAAA;YAAA;QAAA;MAAA;IAAA,CAChD,IAAG;EACR,CAAC,EAAE,CAACS,SAAS,CAACa,OAAO,CAAC,CAAC;EAEvB,IAAM1B,QAAQ,GAAG,IAAAQ,kBAAW,EACxB,UAACqB,KAA4B,EAAK;IAAA;IAC9B,IAAI,CAACf,KAAK,EAAE;MACRC,OAAO,EAAE;MACT;IACJ;IACAC,QAAQ,6DACDa,KAAK;MACR;AAChB;AACA;MACgBC,SAAS,EAAE,gBAAAD,KAAK,CAACE,IAAI,gDAAV,YAAYC,MAAM,MAAK,WAAW;MAC7CN,OAAO,EAAEZ,KAAK,CAACY,OAAO;MACtBO,SAAS,EAAEnB,KAAK,CAACoB;IAAI,GACvB;IACFnB,OAAO,EAAE;EACb,CAAC,EACD,CAACC,QAAQ,EAAEF,KAAK,CAAC,CACpB;EACD,IAAI,CAACA,KAAK,EAAE;IACR,OAAO,IAAI;EACf;EAEA,oBACI,6BAAC,+BAAsB;IAAC,YAAY,EAAEA,KAAM;IAAC,GAAG,EAAEA,KAAK,CAACY,OAAQ;IAAC,YAAY,EAAE;EAAK,gBAChF,6BAAC,6BAAoB;IAAC,UAAU,EAAE;MAAA,OAAM,IAAI;IAAA,CAAC;IAAC,YAAY,EAAE;MAAA,OAAM,IAAI;IAAA;EAAC,gBACnE,6BAAC,wBAAe;IAAC,IAAI,EAAE,IAAK;IAAC,OAAO,EAAEX;EAAQ,gBAC1C,6BAAC,mBAAW,QAAEnB,CAAC,2GAAwB;IAAEqC,SAAS,EAAEnB,KAAK,CAACoB;EAAK,CAAC,CAAC,CAAe,eAChF,6BAAC,qBAAa,qBACV,6BAAC,SAAS;IAAC,QAAQ,EAAElC;EAAS,EAAG,CACrB,eAChB,6BAAC,qBAAa,qBACV,6BAAC,oBAAY,QAAEJ,CAAC,4FAAwB,eACxC,6BAAC,gBAAgB,OAAG,CACR,CACF,CACC,CACF;AAEjC,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/components/Options.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { CmsModel } from "../../../../../../types";
+interface Props {
+    models: CmsModel[];
+    onNewRecord: (modelId: string) => void;
+    onLinkExistingRecord: (modelId: string) => void;
+}
+export declare const Options: React.VFC<Props>;
+export {};

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

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Options = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _OptionsModelList = require("./options/OptionsModelList");
+var _link = require("./assets/link.svg");
+var _addCircle = require("./assets/add-circle.svg");
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1k00edo0",
+  label: "Container"
+})({
+  display: "flex",
+  flexDirection: "row",
+  width: "100%"
+});
+var NewRecord = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1k00edo1",
+  label: "NewRecord"
+})({
+  borderRight: "2px solid var(--mdc-theme-background)",
+  padding: "10px 15px",
+  display: "flex",
+  position: "relative",
+  alignItems: "center",
+  " > div ": {
+    display: "none"
+  },
+  ":hover > div": {
+    display: "block"
+  }
+});
+var NewRecordButton = /*#__PURE__*/(0, _styled.default)("button", {
+  target: "e1k00edo2",
+  label: "NewRecordButton"
+})({
+  background: "transparent",
+  border: "none",
+  color: "var(--mdc-theme-primary)",
+  padding: "2px 2px",
+  cursor: "pointer",
+  alignItems: "center",
+  display: "flex",
+  "> svg": {
+    color: "var(--mdc-theme-primary)",
+    width: "16px",
+    height: "16px",
+    marginRight: 10
+  }
+});
+var LinkExistingRecord = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1k00edo3",
+  label: "LinkExistingRecord"
+})({
+  padding: "10px 15px",
+  alignItems: "center",
+  display: "flex",
+  position: "relative",
+  " > div ": {
+    display: "none"
+  },
+  ":hover > div": {
+    display: "block"
+  }
+});
+var LinkExistingRecordButton = /*#__PURE__*/(0, _styled.default)("button", {
+  target: "e1k00edo4",
+  label: "LinkExistingRecordButton"
+})({
+  background: "transparent",
+  border: "none",
+  color: "var(--mdc-theme-primary)",
+  padding: "2px 5px",
+  cursor: "pointer",
+  alignItems: "center",
+  display: "flex",
+  "> svg": {
+    color: "var(--mdc-theme-primary)",
+    width: "16px",
+    height: "16px",
+    marginRight: 10
+  }
+});
+var Options = function Options(_ref) {
+  var models = _ref.models,
+    onNewRecord = _ref.onNewRecord,
+    onLinkExistingRecord = _ref.onLinkExistingRecord;
+  var hasMultipleModels = models.length > 1;
+  var onSingleNewRecord = (0, _react.useCallback)(function () {
+    if (models.length === 0 || hasMultipleModels) {
+      return;
+    }
+    onNewRecord(models[0].modelId);
+  }, [models]);
+  var onSingleExistingRecord = (0, _react.useCallback)(function () {
+    if (models.length === 0 || hasMultipleModels) {
+      return;
+    }
+    onLinkExistingRecord(models[0].modelId);
+  }, [models]);
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(NewRecord, null, /*#__PURE__*/_react.default.createElement(NewRecordButton, {
+    onClick: onSingleNewRecord
+  }, /*#__PURE__*/_react.default.createElement(_addCircle.ReactComponent, null), " create a new record"), /*#__PURE__*/_react.default.createElement(_OptionsModelList.OptionsModelList, {
+    onClick: onNewRecord,
+    models: models
+  })), /*#__PURE__*/_react.default.createElement(LinkExistingRecord, null, /*#__PURE__*/_react.default.createElement(LinkExistingRecordButton, {
+    onClick: onSingleExistingRecord
+  }, /*#__PURE__*/_react.default.createElement(_link.ReactComponent, null), " link an existing record"), /*#__PURE__*/_react.default.createElement(_OptionsModelList.OptionsModelList, {
+    onClick: onLinkExistingRecord,
+    models: models
+  })));
+};
+exports.Options = Options;

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

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","display","flexDirection","width","NewRecord","borderRight","padding","position","alignItems","NewRecordButton","background","border","color","cursor","height","marginRight","LinkExistingRecord","LinkExistingRecordButton","Options","models","onNewRecord","onLinkExistingRecord","hasMultipleModels","length","onSingleNewRecord","useCallback","modelId","onSingleExistingRecord"],"sources":["Options.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { CmsModel } from \"~/types\";\nimport { OptionsModelList } from \"~/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelList\";\nimport { ReactComponent as LinkIcon } from \"./assets/link.svg\";\nimport { ReactComponent as AddIcon } from \"./assets/add-circle.svg\";\n\nconst Container = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    width: \"100%\"\n});\nconst NewRecord = styled(\"div\")({\n    borderRight: \"2px solid var(--mdc-theme-background)\",\n    padding: \"10px 15px\",\n    display: \"flex\",\n    position: \"relative\",\n    alignItems: \"center\",\n    \" > div \": {\n        display: \"none\"\n    },\n    \":hover > div\": {\n        display: \"block\"\n    }\n});\nconst NewRecordButton = styled(\"button\")({\n    background: \"transparent\",\n    border: \"none\",\n    color: \"var(--mdc-theme-primary)\",\n    padding: \"2px 2px\",\n    cursor: \"pointer\",\n    alignItems: \"center\",\n    display: \"flex\",\n    \"> svg\": {\n        color: \"var(--mdc-theme-primary)\",\n        width: \"16px\",\n        height: \"16px\",\n        marginRight: 10\n    }\n});\nconst LinkExistingRecord = styled(\"div\")({\n    padding: \"10px 15px\",\n    alignItems: \"center\",\n    display: \"flex\",\n    position: \"relative\",\n    \" > div \": {\n        display: \"none\"\n    },\n    \":hover > div\": {\n        display: \"block\"\n    }\n});\nconst LinkExistingRecordButton = styled(\"button\")({\n    background: \"transparent\",\n    border: \"none\",\n    color: \"var(--mdc-theme-primary)\",\n    padding: \"2px 5px\",\n    cursor: \"pointer\",\n    alignItems: \"center\",\n    display: \"flex\",\n    \"> svg\": {\n        color: \"var(--mdc-theme-primary)\",\n        width: \"16px\",\n        height: \"16px\",\n        marginRight: 10\n    }\n});\n\ninterface Props {\n    models: CmsModel[];\n    onNewRecord: (modelId: string) => void;\n    onLinkExistingRecord: (modelId: string) => void;\n}\nexport const Options: React.VFC<Props> = ({ models, onNewRecord, onLinkExistingRecord }) => {\n    const hasMultipleModels = models.length > 1;\n    const onSingleNewRecord = useCallback(() => {\n        if (models.length === 0 || hasMultipleModels) {\n            return;\n        }\n        onNewRecord(models[0].modelId);\n    }, [models]);\n\n    const onSingleExistingRecord = useCallback(() => {\n        if (models.length === 0 || hasMultipleModels) {\n            return;\n        }\n        onLinkExistingRecord(models[0].modelId);\n    }, [models]);\n    return (\n        <Container>\n            <NewRecord>\n                <NewRecordButton onClick={onSingleNewRecord}>\n                    <AddIcon /> create a new record\n                </NewRecordButton>\n                <OptionsModelList onClick={onNewRecord} models={models} />\n            </NewRecord>\n            <LinkExistingRecord>\n                <LinkExistingRecordButton onClick={onSingleExistingRecord}>\n                    <LinkIcon /> link an existing record\n                </LinkExistingRecordButton>\n                <OptionsModelList onClick={onLinkExistingRecord} models={models} />\n            </LinkExistingRecord>\n        </Container>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/components/ReferencesDialog.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { CmsEditorFieldRendererProps } from "../../../../../../types";
+import { CmsReferenceValue } from "../../components/types";
+interface Props extends CmsEditorFieldRendererProps {
+    values?: CmsReferenceValue[] | null;
+    onDialogClose: () => void;
+    storeValues: (values: CmsReferenceValue[]) => void;
+    multiple: boolean;
+}
+export declare const ReferencesDialog: React.VFC<Props>;
+export {};

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

@@ -0,0 +1,183 @@
+"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.ReferencesDialog = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+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 Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "er576qx0",
+  label: "Container"
+})({
+  width: "100%",
+  boxSizing: "border-box",
+  padding: "20px"
+});
+var Content = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "er576qx1",
+  label: "Content"
+})({
+  display: "flex",
+  flex: "1",
+  flexDirection: "column",
+  position: "relative",
+  width: "100%",
+  minHeight: "100px",
+  boxSizing: "border-box",
+  padding: "20px 0 20px 20px",
+  backgroundColor: "var(--mdc-theme-background)",
+  border: "1px solid var(--mdc-theme-on-background)",
+  overflowX: "hidden"
+});
+var DialogContent = /*#__PURE__*/(0, _styled.default)(_Dialog.DialogContent, {
+  target: "er576qx2",
+  label: "DialogContent"
+})({
+  padding: "0 !important"
+});
+var isSelected = function isSelected(entryId, values) {
+  if (!entryId) {
+    return false;
+  }
+  return values.some(function (value) {
+    var _parseIdentifier = (0, _utils.parseIdentifier)(value.id),
+      valueEntryId = _parseIdentifier.id;
+    return entryId === valueEntryId;
+  });
+};
+var ReferencesDialog = function ReferencesDialog(props) {
+  var contentModel = props.contentModel,
+    onDialogClose = props.onDialogClose,
+    storeValues = props.storeValues,
+    initialValues = props.values,
+    multiple = props.multiple;
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var _useState = (0, _react.useState)(initialValues || []),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    values = _useState2[0],
+    setValues = _useState2[1];
+
+  /**
+   * On change needs to handle the adding or removing of a reference.
+   *
+   * This is for both single and multiple reference fields.
+   */
+  var onChange = (0, _react.useCallback)(function (reference) {
+    var _parseIdentifier2 = (0, _utils.parseIdentifier)(reference.id),
+      referenceEntryId = _parseIdentifier2.id;
+    /**
+     * Let's handle the single usage first as it is quite simple.
+     */
+    if (!multiple) {
+      var _values = (0, _slicedToArray2.default)(values, 1),
+        value = _values[0];
+      if (!(value !== null && value !== void 0 && value.id)) {
+        setValues([reference]);
+        return;
+      }
+      var _parseIdentifier3 = (0, _utils.parseIdentifier)(value.id),
+        valueEntryId = _parseIdentifier3.id;
+      if (referenceEntryId === valueEntryId) {
+        setValues([]);
+        return;
+      }
+      setValues([reference]);
+      return;
+    }
+    var newValues = values.filter(function (value) {
+      if (!(value !== null && value !== void 0 && value.id)) {
+        return false;
+      }
+      var _parseIdentifier4 = (0, _utils.parseIdentifier)(value.id),
+        valueEntryId = _parseIdentifier4.id;
+      return referenceEntryId !== valueEntryId;
+    });
+    if (newValues.length === values.length) {
+      setValues([].concat((0, _toConsumableArray2.default)(values), [reference]));
+      return;
+    }
+    setValues(newValues);
+  }, [setValues, values]);
+  var onDialogSave = (0, _react.useCallback)(function () {
+    storeValues(values);
+    onDialogClose();
+  }, [values]);
+  /**
+   * Searching and list of reference entries.
+   */
+  var _useEntries = (0, _useEntries2.useEntries)({
+      model: contentModel,
+      limit: 10
+    }),
+    entries = _useEntries.entries,
+    loading = _useEntries.loading,
+    error = _useEntries.error,
+    runSearch = _useEntries.runSearch,
+    loadMore = _useEntries.loadMore;
+  (0, _react.useEffect)(function () {
+    runSearch("");
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!error) {
+      return;
+    }
+    showSnackbar(error);
+  }, [error]);
+  var debouncedSearch = (0, _react.useRef)(null);
+  var onInput = (0, _react.useCallback)(function (ev) {
+    var value = (String(ev.target.value) || "").trim();
+    if (debouncedSearch.current) {
+      clearTimeout(debouncedSearch.current);
+      debouncedSearch.current = null;
+    }
+    /**
+     * We can safely cast as setTimeout really produces a number.
+     * There is an error while coding because Storm thinks this is NodeJS timeout.
+     */
+    debouncedSearch.current = setTimeout(function () {
+      runSearch(value);
+    }, 200);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dialog2.Dialog, {
+    open: true,
+    onClose: onDialogClose
+  }, /*#__PURE__*/_react.default.createElement(_DialogHeader.DialogHeader, {
+    model: contentModel,
+    onClose: onDialogClose
+  }), /*#__PURE__*/_react.default.createElement(DialogContent, null, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Search.Search, {
+    onInput: onInput
+  }), /*#__PURE__*/_react.default.createElement(Content, null, loading && /*#__PURE__*/_react.default.createElement(_Loader.AbsoluteLoader, null), /*#__PURE__*/_react.default.createElement(_Entries.Entries, {
+    entries: entries,
+    loadMore: loadMore
+  }, function (entry) {
+    return /*#__PURE__*/_react.default.createElement(_Entry.Entry, {
+      model: contentModel,
+      key: "reference-entry-".concat(entry.id),
+      entry: entry,
+      selected: isSelected(entry.entryId, values),
+      onChange: onChange
+    });
+  })))), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+    onClick: onDialogClose
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+    onClick: onDialogSave
+  }, "Save"))));
+};
+exports.ReferencesDialog = ReferencesDialog;

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

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","width","boxSizing","padding","Content","display","flex","flexDirection","position","minHeight","backgroundColor","border","overflowX","DialogContent","BaseDialogContent","isSelected","entryId","values","some","value","parseIdentifier","id","valueEntryId","ReferencesDialog","props","contentModel","onDialogClose","storeValues","initialValues","multiple","useSnackbar","showSnackbar","useState","setValues","onChange","useCallback","reference","referenceEntryId","newValues","filter","length","onDialogSave","useEntries","model","limit","entries","loading","error","runSearch","loadMore","useEffect","debouncedSearch","useRef","onInput","ev","String","target","trim","current","clearTimeout","setTimeout","entry"],"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 { CmsEditorFieldRendererProps } 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: \"100px\",\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 CmsEditorFieldRendererProps {\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/components/Search.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="web" />
+import React from "react";
+interface Props {
+    onInput: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export declare const Search: React.VFC<Props>;
+export {};

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Search = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _search = _interopRequireDefault(require("./assets/search.svg"));
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "el59n9e0",
+  label: "Container"
+})({
+  display: "flex",
+  width: "100%",
+  position: "relative",
+  height: "36px",
+  marginBottom: "16px",
+  padding: "5px 0",
+  border: "1px solid var(--mdc-theme-on-background)",
+  backgroundColor: "var(--mdc-theme-background)"
+});
+var Icon = /*#__PURE__*/(0, _styled.default)("img", {
+  target: "el59n9e1",
+  label: "Icon"
+})({
+  position: "absolute",
+  top: "12px",
+  left: "10px",
+  width: "24px",
+  height: "24px"
+});
+var Input = /*#__PURE__*/(0, _styled.default)("input", {
+  target: "el59n9e2",
+  label: "Input"
+})({
+  display: "block",
+  boxSizing: "border-box",
+  border: "none",
+  backgroundColor: "transparent",
+  width: "100%",
+  height: "100%",
+  fontSize: "14px",
+  lineHeight: "36px",
+  paddingLeft: "45px",
+  ":focus-visible": {
+    outline: "none"
+  }
+});
+var Search = function Search(_ref) {
+  var onInput = _ref.onInput;
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Icon, {
+    src: _search.default
+  }), /*#__PURE__*/_react.default.createElement(Input, {
+    placeholder: "Search entries",
+    onKeyUp: onInput
+  }));
+};
+exports.Search = Search;

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

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","display","width","position","height","marginBottom","padding","border","backgroundColor","Icon","top","left","Input","boxSizing","fontSize","lineHeight","paddingLeft","outline","Search","onInput","searchIcon"],"sources":["Search.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport searchIcon from \"./assets/search.svg\";\n\nconst Container = styled(\"div\")({\n    display: \"flex\",\n    width: \"100%\",\n    position: \"relative\",\n    height: \"36px\",\n    marginBottom: \"16px\",\n    padding: \"5px 0\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    backgroundColor: \"var(--mdc-theme-background)\"\n});\n\nconst Icon = styled(\"img\")({\n    position: \"absolute\",\n    top: \"12px\",\n    left: \"10px\",\n    width: \"24px\",\n    height: \"24px\"\n});\n\nconst Input = styled(\"input\")({\n    display: \"block\",\n    boxSizing: \"border-box\",\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    width: \"100%\",\n    height: \"100%\",\n    fontSize: \"14px\",\n    lineHeight: \"36px\",\n    paddingLeft: \"45px\",\n    \":focus-visible\": {\n        outline: \"none\"\n    }\n});\n\ninterface Props {\n    onInput: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\nexport const Search: React.VFC<Props> = ({ onInput }) => {\n    return (\n        <Container>\n            <Icon src={searchIcon} />\n            <Input placeholder={\"Search entries\"} onKeyUp={onInput} />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC5BC,OAAO,EAAE,MAAM;EACfC,KAAK,EAAE,MAAM;EACbC,QAAQ,EAAE,UAAU;EACpBC,MAAM,EAAE,MAAM;EACdC,YAAY,EAAE,MAAM;EACpBC,OAAO,EAAE,OAAO;EAChBC,MAAM,EAAE,0CAA0C;EAClDC,eAAe,EAAE;AACrB,CAAC,CAAC;AAEF,IAAMC,IAAI,oBAAGT,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACvBG,QAAQ,EAAE,UAAU;EACpBO,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,MAAM;EACZT,KAAK,EAAE,MAAM;EACbE,MAAM,EAAE;AACZ,CAAC,CAAC;AAEF,IAAMQ,KAAK,oBAAGZ,eAAM,EAAC,OAAO;EAAA;EAAA;AAAA,GAAE;EAC1BC,OAAO,EAAE,OAAO;EAChBY,SAAS,EAAE,YAAY;EACvBN,MAAM,EAAE,MAAM;EACdC,eAAe,EAAE,aAAa;EAC9BN,KAAK,EAAE,MAAM;EACbE,MAAM,EAAE,MAAM;EACdU,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,MAAM;EAClBC,WAAW,EAAE,MAAM;EACnB,gBAAgB,EAAE;IACdC,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAMK,IAAMC,MAAwB,GAAG,SAA3BA,MAAwB,OAAoB;EAAA,IAAdC,OAAO,QAAPA,OAAO;EAC9C,oBACI,6BAAC,SAAS,qBACN,6BAAC,IAAI;IAAC,GAAG,EAAEC;EAAW,EAAG,eACzB,6BAAC,KAAK;IAAC,WAAW,EAAE,gBAAiB;IAAC,OAAO,EAAED;EAAQ,EAAG,CAClD;AAEpB,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/components/assets/add-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M22.65 34h3v-8.3H34v-3h-8.35V14h-3v8.7H14v3h8.65ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 23.95q0-4.1 1.575-7.75 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24.05 4q4.1 0 7.75 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Zm.05-3q7.05 0 12-4.975T41 23.95q0-7.05-4.95-12T24 7q-7.05 0-12.025 4.95Q7 16.9 7 24q0 7.05 4.975 12.025Q16.95 41 24.05 41ZM24 24Z" fill="currentColor"/></svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/assets/down-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z" fill="currentColor"/></svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/assets/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M22.5 34H14q-4.15 0-7.075-2.925T4 24q0-4.15 2.925-7.075T14 14h8.5v3H14q-2.9 0-4.95 2.05Q7 21.1 7 24q0 2.9 2.05 4.95Q11.1 31 14 31h8.5Zm-6.25-8.5v-3h15.5v3ZM25.5 34v-3H34q2.9 0 4.95-2.05Q41 26.9 41 24q0-2.9-2.05-4.95Q36.9 17 34 17h-8.5v-3H34q4.15 0 7.075 2.925T44 24q0 4.15-2.925 7.075T34 34Z" fill="var(--mdc-theme-primary)" fill="currentColor"/></svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/assets/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" fill="#666"/></svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/dialog/Dialog.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const Dialog: import("@emotion/styled").StyledComponent<import("@webiny/ui/Dialog/Dialog").DialogProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    ref?: import("react").Ref<import("@webiny/ui/Dialog").Dialog> | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const FullWidthDialog: import("@emotion/styled").StyledComponent<import("@webiny/ui/Dialog/Dialog").DialogProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    ref?: import("react").Ref<import("@webiny/ui/Dialog").Dialog> | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;