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

package/admin/components/FieldEditor/EditFieldDialog/functions/getValue.d.ts

@@ -1,6 +1,8 @@
-declare const getValue: ({ bind, index, name }: {
-    bind: any;
-    index: any;
-    name: any;
-}) => any;
-export default getValue;
+import type { BindComponentRenderProp } from "@webiny/form";
+interface Params {
+    bind: BindComponentRenderProp;
+    index: number;
+    name: string;
+}
+export declare const getValue: (params: Params) => string[] | undefined;
+export {};

package/admin/components/FieldEditor/EditFieldDialog/functions/getValue.js

@@ -1,16 +1,15 @@
 import get from "lodash/get";
-
-var getValue = function getValue(_ref) {
-  var bind = _ref.bind,
-      index = _ref.index,
-      name = _ref.name;
-  var value = bind.value || [];
-
+export const getValue = params => {
+  const {
+    bind,
+    index,
+    name
+  } = params;
+  const value = bind.value || [];
   if (index >= 0) {
-    return get(value, "".concat(index, ".").concat(name));
+    return get(value, `${index}.${name}`);
   }
-
   return value;
 };
 
-export default getValue;
+//# sourceMappingURL=getValue.js.map

package/admin/components/FieldEditor/EditFieldDialog/functions/getValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["get","getValue","params","bind","index","name","value"],"sources":["getValue.ts"],"sourcesContent":["import get from \"lodash/get\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface Params {\n    bind: BindComponentRenderProp;\n    index: number;\n    name: string;\n}\n\nexport const getValue = (params: Params): string[] | undefined => {\n    const { bind, index, name } = params;\n    const value = bind.value || [];\n\n    if (index >= 0) {\n        return get(value, `${index}.${name}`);\n    }\n\n    return value;\n};\n"],"mappings":"AAAA,OAAOA,GAAG,MAAM,YAAY;AAS5B,OAAO,MAAMC,QAAQ,GAAIC,MAAc,IAA2B;EAC9D,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGH,MAAM;EACpC,MAAMI,KAAK,GAAGH,IAAI,CAACG,KAAK,IAAI,EAAE;EAE9B,IAAIF,KAAK,IAAI,CAAC,EAAE;IACZ,OAAOJ,GAAG,CAACM,KAAK,EAAE,GAAGF,KAAK,IAAIC,IAAI,EAAE,CAAC;EACzC;EAEA,OAAOC,KAAK;AAChB,CAAC","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/functions/setValue.d.ts

@@ -1,7 +1,9 @@
-declare const setValue: ({ value, bind, index, name }: {
-    value: any;
-    bind: any;
-    index: any;
-    name: any;
-}) => void;
-export default setValue;
+import type { BindComponentRenderProp } from "@webiny/form";
+interface Params {
+    value: string[];
+    bind: BindComponentRenderProp;
+    index: number;
+    name: string;
+}
+export declare const setValue: (params: Params) => void;
+export {};

package/admin/components/FieldEditor/EditFieldDialog/functions/setValue.js

@@ -1,21 +1,17 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import set from "lodash/set";
-
-var setValue = function setValue(_ref) {
-  var value = _ref.value,
-      bind = _ref.bind,
-      index = _ref.index,
-      name = _ref.name;
-
-  var newValue = _toConsumableArray(bind.value || []);
-
+import { set } from "dot-prop-immutable";
+export const setValue = params => {
+  const {
+    value,
+    bind,
+    index,
+    name
+  } = params;
+  const currentValue = [...(bind.value || [])];
   if (index >= 0) {
-    set(newValue, "".concat(index, ".").concat(name), value);
+    bind.onChange(set(currentValue, `${index}.${name}`, value));
   } else {
-    newValue = value;
+    bind.onChange(value);
   }
-
-  bind.onChange(newValue);
 };
 
-export default setValue;
+//# sourceMappingURL=setValue.js.map

package/admin/components/FieldEditor/EditFieldDialog/functions/setValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["set","setValue","params","value","bind","index","name","currentValue","onChange"],"sources":["setValue.ts"],"sourcesContent":["import { set } from \"dot-prop-immutable\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface Params {\n    value: string[];\n    bind: BindComponentRenderProp;\n    index: number;\n    name: string;\n}\n\nexport const setValue = (params: Params): void => {\n    const { value, bind, index, name } = params;\n    const currentValue = [...(bind.value || [])];\n    if (index >= 0) {\n        bind.onChange(set(currentValue, `${index}.${name}`, value));\n    } else {\n        bind.onChange(value);\n    }\n};\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,oBAAoB;AAUxC,OAAO,MAAMC,QAAQ,GAAIC,MAAc,IAAW;EAC9C,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGJ,MAAM;EAC3C,MAAMK,YAAY,GAAG,CAAC,IAAIH,IAAI,CAACD,KAAK,IAAI,EAAE,CAAC,CAAC;EAC5C,IAAIE,KAAK,IAAI,CAAC,EAAE;IACZD,IAAI,CAACI,QAAQ,CAACR,GAAG,CAACO,YAAY,EAAE,GAAGF,KAAK,IAAIC,IAAI,EAAE,EAAEH,KAAK,CAAC,CAAC;EAC/D,CAAC,MAAM;IACHC,IAAI,CAACI,QAAQ,CAACL,KAAK,CAAC;EACxB;AACJ,CAAC","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/getValidators.d.ts

@@ -0,0 +1,13 @@
+import type { CmsModelField, CmsEditorFieldTypePlugin, CmsModelFieldValidatorPlugin } from "../../../../types";
+import { CmsModelFieldValidatorConfigAdapter } from "../../../../utils/CmsModelFieldValidatorConfigAdapter";
+export interface Validator {
+    optional: boolean;
+    validator: CmsModelFieldValidatorPlugin["validator"];
+}
+export interface ValidationSection {
+    title?: string;
+    description?: string;
+    validators: CmsModelFieldValidatorConfigAdapter[];
+}
+export declare const getListValidators: (field: CmsModelField, fieldPlugin: CmsEditorFieldTypePlugin) => ValidationSection;
+export declare const getFieldValidators: (field: CmsModelField, fieldPlugin: CmsEditorFieldTypePlugin) => ValidationSection;

package/admin/components/FieldEditor/EditFieldDialog/getValidators.js

@@ -0,0 +1,73 @@
+import { plugins } from "@webiny/plugins";
+import { CmsModelFieldValidatorConfigAdapter } from "../../../../utils/CmsModelFieldValidatorConfigAdapter";
+const isValidatorDefinition = obj => {
+  return obj ? !Array.isArray(obj) : false;
+};
+const isValidatorDefinitionFactory = obj => {
+  return typeof obj === "function";
+};
+const getValidatorPlugin = name => {
+  const plugin = plugins.byType("cms-model-field-validator").find(plugin => plugin.validator.name === name);
+  if (!plugin) {
+    throw new Error(`Missing CMS field validator plugin "${name}"!`);
+  }
+  return plugin.validator;
+};
+const getValidatorConfigs = (field, validators) => {
+  const configs = [];
+  for (const validator of validators) {
+    let resolvedValidator;
+    if (typeof validator === "string") {
+      resolvedValidator = getValidatorPlugin(validator);
+    } else {
+      resolvedValidator = validator;
+    }
+    configs.push(new CmsModelFieldValidatorConfigAdapter(field, resolvedValidator));
+  }
+  return configs;
+};
+const getValidators = ({
+  field,
+  fieldPlugin,
+  key,
+  defaultValidators
+}) => {
+  let title = "";
+  let description = "";
+  let fieldValidators = fieldPlugin.field[key];
+  if (isValidatorDefinitionFactory(fieldValidators)) {
+    fieldValidators = fieldValidators(field);
+  }
+  let resolvedValidators;
+  if (isValidatorDefinition(fieldValidators)) {
+    title = fieldValidators.title || "";
+    description = fieldValidators.description || "";
+    resolvedValidators = fieldValidators.validators;
+  } else {
+    resolvedValidators = fieldValidators;
+  }
+  const validators = getValidatorConfigs(field, resolvedValidators || defaultValidators);
+  return {
+    title,
+    description,
+    validators
+  };
+};
+export const getListValidators = (field, fieldPlugin) => {
+  return getValidators({
+    field,
+    fieldPlugin,
+    key: "listValidators",
+    defaultValidators: ["minLength", "maxLength"]
+  });
+};
+export const getFieldValidators = (field, fieldPlugin) => {
+  return getValidators({
+    field,
+    fieldPlugin,
+    key: "validators",
+    defaultValidators: []
+  });
+};
+
+//# sourceMappingURL=getValidators.js.map

package/admin/components/FieldEditor/EditFieldDialog/getValidators.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["plugins","CmsModelFieldValidatorConfigAdapter","isValidatorDefinition","obj","Array","isArray","isValidatorDefinitionFactory","getValidatorPlugin","name","plugin","byType","find","validator","Error","getValidatorConfigs","field","validators","configs","resolvedValidator","push","getValidators","fieldPlugin","key","defaultValidators","title","description","fieldValidators","resolvedValidators","getListValidators","getFieldValidators"],"sources":["getValidators.ts"],"sourcesContent":["import { plugins } from \"@webiny/plugins\";\nimport type {\n    CmsModelField,\n    CmsEditorFieldTypePlugin,\n    CmsModelFieldValidatorPlugin,\n    CmsModelFieldValidatorsGroup,\n    CmsModelFieldValidatorConfig,\n    CmsModelFieldValidatorsFactory\n} from \"~/types\";\nimport { CmsModelFieldValidatorConfigAdapter } from \"~/utils/CmsModelFieldValidatorConfigAdapter\";\n\nexport interface Validator {\n    optional: boolean;\n    validator: CmsModelFieldValidatorPlugin[\"validator\"];\n}\n\nconst isValidatorDefinition = (obj: unknown): obj is CmsModelFieldValidatorsGroup => {\n    return obj ? !Array.isArray(obj) : false;\n};\n\nconst isValidatorDefinitionFactory = (obj: unknown): obj is CmsModelFieldValidatorsFactory => {\n    return typeof obj === \"function\";\n};\n\ninterface GetValidatorsParams {\n    field: CmsModelField;\n    fieldPlugin: CmsEditorFieldTypePlugin;\n    key: \"validators\" | \"listValidators\";\n    defaultValidators: string[];\n}\n\nexport interface ValidationSection {\n    title?: string;\n    description?: string;\n    validators: CmsModelFieldValidatorConfigAdapter[];\n}\n\nconst getValidatorPlugin = (name: string) => {\n    const plugin = plugins\n        .byType<CmsModelFieldValidatorPlugin>(\"cms-model-field-validator\")\n        .find(plugin => plugin.validator.name === name);\n\n    if (!plugin) {\n        throw new Error(`Missing CMS field validator plugin \"${name}\"!`);\n    }\n\n    return plugin.validator as CmsModelFieldValidatorConfig;\n};\n\nconst getValidatorConfigs = (\n    field: CmsModelField,\n    validators: Array<CmsModelFieldValidatorConfig | string>\n) => {\n    const configs: CmsModelFieldValidatorConfigAdapter[] = [];\n\n    for (const validator of validators) {\n        let resolvedValidator;\n        if (typeof validator === \"string\") {\n            resolvedValidator = getValidatorPlugin(validator);\n        } else {\n            resolvedValidator = validator;\n        }\n\n        configs.push(new CmsModelFieldValidatorConfigAdapter(field, resolvedValidator));\n    }\n\n    return configs;\n};\n\nconst getValidators = ({\n    field,\n    fieldPlugin,\n    key,\n    defaultValidators\n}: GetValidatorsParams): ValidationSection => {\n    let title = \"\";\n    let description = \"\";\n    let fieldValidators = fieldPlugin.field[key];\n\n    if (isValidatorDefinitionFactory(fieldValidators)) {\n        fieldValidators = fieldValidators(field);\n    }\n\n    let resolvedValidators: (string | CmsModelFieldValidatorConfig)[] | undefined;\n    if (isValidatorDefinition(fieldValidators)) {\n        title = fieldValidators.title || \"\";\n        description = fieldValidators.description || \"\";\n        resolvedValidators = fieldValidators.validators;\n    } else {\n        resolvedValidators = fieldValidators;\n    }\n\n    const validators = getValidatorConfigs(field, resolvedValidators || defaultValidators);\n\n    return {\n        title,\n        description,\n        validators\n    };\n};\n\nexport const getListValidators = (field: CmsModelField, fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators({\n        field,\n        fieldPlugin,\n        key: \"listValidators\",\n        defaultValidators: [\"minLength\", \"maxLength\"]\n    });\n};\n\nexport const getFieldValidators = (field: CmsModelField, fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators({\n        field,\n        fieldPlugin,\n        key: \"validators\",\n        defaultValidators: []\n    });\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,iBAAiB;AASzC,SAASC,mCAAmC;AAO5C,MAAMC,qBAAqB,GAAIC,GAAY,IAA0C;EACjF,OAAOA,GAAG,GAAG,CAACC,KAAK,CAACC,OAAO,CAACF,GAAG,CAAC,GAAG,KAAK;AAC5C,CAAC;AAED,MAAMG,4BAA4B,GAAIH,GAAY,IAA4C;EAC1F,OAAO,OAAOA,GAAG,KAAK,UAAU;AACpC,CAAC;AAeD,MAAMI,kBAAkB,GAAIC,IAAY,IAAK;EACzC,MAAMC,MAAM,GAAGT,OAAO,CACjBU,MAAM,CAA+B,2BAA2B,CAAC,CACjEC,IAAI,CAACF,MAAM,IAAIA,MAAM,CAACG,SAAS,CAACJ,IAAI,KAAKA,IAAI,CAAC;EAEnD,IAAI,CAACC,MAAM,EAAE;IACT,MAAM,IAAII,KAAK,CAAC,uCAAuCL,IAAI,IAAI,CAAC;EACpE;EAEA,OAAOC,MAAM,CAACG,SAAS;AAC3B,CAAC;AAED,MAAME,mBAAmB,GAAGA,CACxBC,KAAoB,EACpBC,UAAwD,KACvD;EACD,MAAMC,OAA8C,GAAG,EAAE;EAEzD,KAAK,MAAML,SAAS,IAAII,UAAU,EAAE;IAChC,IAAIE,iBAAiB;IACrB,IAAI,OAAON,SAAS,KAAK,QAAQ,EAAE;MAC/BM,iBAAiB,GAAGX,kBAAkB,CAACK,SAAS,CAAC;IACrD,CAAC,MAAM;MACHM,iBAAiB,GAAGN,SAAS;IACjC;IAEAK,OAAO,CAACE,IAAI,CAAC,IAAIlB,mCAAmC,CAACc,KAAK,EAAEG,iBAAiB,CAAC,CAAC;EACnF;EAEA,OAAOD,OAAO;AAClB,CAAC;AAED,MAAMG,aAAa,GAAGA,CAAC;EACnBL,KAAK;EACLM,WAAW;EACXC,GAAG;EACHC;AACiB,CAAC,KAAwB;EAC1C,IAAIC,KAAK,GAAG,EAAE;EACd,IAAIC,WAAW,GAAG,EAAE;EACpB,IAAIC,eAAe,GAAGL,WAAW,CAACN,KAAK,CAACO,GAAG,CAAC;EAE5C,IAAIhB,4BAA4B,CAACoB,eAAe,CAAC,EAAE;IAC/CA,eAAe,GAAGA,eAAe,CAACX,KAAK,CAAC;EAC5C;EAEA,IAAIY,kBAAyE;EAC7E,IAAIzB,qBAAqB,CAACwB,eAAe,CAAC,EAAE;IACxCF,KAAK,GAAGE,eAAe,CAACF,KAAK,IAAI,EAAE;IACnCC,WAAW,GAAGC,eAAe,CAACD,WAAW,IAAI,EAAE;IAC/CE,kBAAkB,GAAGD,eAAe,CAACV,UAAU;EACnD,CAAC,MAAM;IACHW,kBAAkB,GAAGD,eAAe;EACxC;EAEA,MAAMV,UAAU,GAAGF,mBAAmB,CAACC,KAAK,EAAEY,kBAAkB,IAAIJ,iBAAiB,CAAC;EAEtF,OAAO;IACHC,KAAK;IACLC,WAAW;IACXT;EACJ,CAAC;AACL,CAAC;AAED,OAAO,MAAMY,iBAAiB,GAAGA,CAACb,KAAoB,EAAEM,WAAqC,KAAK;EAC9F,OAAOD,aAAa,CAAC;IACjBL,KAAK;IACLM,WAAW;IACXC,GAAG,EAAE,gBAAgB;IACrBC,iBAAiB,EAAE,CAAC,WAAW,EAAE,WAAW;EAChD,CAAC,CAAC;AACN,CAAC;AAED,OAAO,MAAMM,kBAAkB,GAAGA,CAACd,KAAoB,EAAEM,WAAqC,KAAK;EAC/F,OAAOD,aAAa,CAAC;IACjBL,KAAK;IACLM,WAAW;IACXC,GAAG,EAAE,YAAY;IACjBC,iBAAiB,EAAE;EACvB,CAAC,CAAC;AACN,CAAC","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/useRendererPlugins.d.ts

@@ -0,0 +1,2 @@
+import type { CmsModelFieldRendererPlugin } from "@webiny/app-headless-cms-common/types";
+export declare const useRendererPlugins: () => import("@webiny/plugins/PluginsContainer").WithName<CmsModelFieldRendererPlugin>[];

package/admin/components/FieldEditor/EditFieldDialog/useRendererPlugins.js

@@ -0,0 +1,34 @@
+import { plugins } from "@webiny/plugins";
+import { useModel } from "../../ModelProvider";
+import { useModelField } from "../../ModelFieldProvider";
+
+/**
+ * We want the "hidden" renderer to always be the last one in the list.
+ * @param a
+ * @param b
+ */
+const hiddenLast = (a, b) => {
+  if (a.renderer.rendererName === "hidden") {
+    return 1;
+  }
+  if (b.renderer.rendererName === "hidden") {
+    return -1;
+  }
+  return 0;
+};
+export const useRendererPlugins = () => {
+  const {
+    model
+  } = useModel();
+  const {
+    field,
+    fieldPlugin
+  } = useModelField();
+  return plugins.byType("cms-editor-field-renderer").filter(item => item.renderer.canUse({
+    field,
+    fieldPlugin,
+    model
+  })).sort(hiddenLast);
+};
+
+//# sourceMappingURL=useRendererPlugins.js.map

package/admin/components/FieldEditor/EditFieldDialog/useRendererPlugins.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["plugins","useModel","useModelField","hiddenLast","a","b","renderer","rendererName","useRendererPlugins","model","field","fieldPlugin","byType","filter","item","canUse","sort"],"sources":["useRendererPlugins.ts"],"sourcesContent":["import { plugins } from \"@webiny/plugins\";\nimport type { CmsModelFieldRendererPlugin } from \"@webiny/app-headless-cms-common/types\";\nimport { useModel } from \"~/admin/components/ModelProvider\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider\";\n\n/**\n * We want the \"hidden\" renderer to always be the last one in the list.\n * @param a\n * @param b\n */\nconst hiddenLast = (a: CmsModelFieldRendererPlugin, b: CmsModelFieldRendererPlugin) => {\n    if (a.renderer.rendererName === \"hidden\") {\n        return 1;\n    }\n\n    if (b.renderer.rendererName === \"hidden\") {\n        return -1;\n    }\n\n    return 0;\n};\n\nexport const useRendererPlugins = () => {\n    const { model } = useModel();\n    const { field, fieldPlugin } = useModelField();\n\n    return plugins\n        .byType<CmsModelFieldRendererPlugin>(\"cms-editor-field-renderer\")\n        .filter(item => item.renderer.canUse({ field, fieldPlugin, model }))\n        .sort(hiddenLast);\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,iBAAiB;AAEzC,SAASC,QAAQ;AACjB,SAASC,aAAa;;AAEtB;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAGA,CAACC,CAA8B,EAAEC,CAA8B,KAAK;EACnF,IAAID,CAAC,CAACE,QAAQ,CAACC,YAAY,KAAK,QAAQ,EAAE;IACtC,OAAO,CAAC;EACZ;EAEA,IAAIF,CAAC,CAACC,QAAQ,CAACC,YAAY,KAAK,QAAQ,EAAE;IACtC,OAAO,CAAC,CAAC;EACb;EAEA,OAAO,CAAC;AACZ,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC;EAAM,CAAC,GAAGR,QAAQ,CAAC,CAAC;EAC5B,MAAM;IAAES,KAAK;IAAEC;EAAY,CAAC,GAAGT,aAAa,CAAC,CAAC;EAE9C,OAAOF,OAAO,CACTY,MAAM,CAA8B,2BAA2B,CAAC,CAChEC,MAAM,CAACC,IAAI,IAAIA,IAAI,CAACR,QAAQ,CAACS,MAAM,CAAC;IAAEL,KAAK;IAAEC,WAAW;IAAEF;EAAM,CAAC,CAAC,CAAC,CACnEO,IAAI,CAACb,UAAU,CAAC;AACzB,CAAC","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { CmsEditorField } from "../../../types";
-declare type EditFieldDialogProps = {
-    field: CmsEditorField;
-    onClose: Function;
-    onSubmit: (data: any) => void;
-};
-declare const EditFieldDialog: ({ field, onSubmit, ...props }: EditFieldDialogProps) => JSX.Element;
+import React from "react";
+import type { FormOnSubmit } from "@webiny/form";
+import type { CmsModelField } from "../../../types";
+interface EditFieldDialogProps {
+    onClose: () => void;
+    onSubmit: FormOnSubmit<CmsModelField>;
+}
+declare const EditFieldDialog: (props: EditFieldDialogProps) => React.JSX.Element;
 export default EditFieldDialog;

package/admin/components/FieldEditor/EditFieldDialog.js

@@ -1,231 +1,130 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _cloneDeep from "lodash/cloneDeep";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-var _excluded = ["field", "onSubmit"];
-import React, { useState, useEffect, useCallback } from "react";
-import { css } from "emotion";
-import { Dialog, DialogContent, DialogTitle, DialogActions, DialogButton } from "@webiny/ui/Dialog";
+import React, { useState } from "react";
+import cloneDeep from "lodash/cloneDeep";
+import { Dialog, Tabs } from "@webiny/admin-ui";
 import { Form } from "@webiny/form";
-import { Tabs, Tab } from "@webiny/ui/Tabs";
 import { i18n } from "@webiny/app/i18n";
-import { plugins } from "@webiny/plugins";
 import GeneralTab from "./EditFieldDialog/GeneralTab";
 import AppearanceTab from "./EditFieldDialog/AppearanceTab";
 import PredefinedValues from "./EditFieldDialog/PredefinedValues";
-import ValidatorsTab from "./EditFieldDialog/ValidatorsTab";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
-import { Elevation } from "@webiny/ui/Elevation";
-import { useFieldEditor } from "./useFieldEditor";
-var t = i18n.namespace("app-headless-cms/admin/components/editor");
-var dialogBody = /*#__PURE__*/css({
-  "&.webiny-ui-dialog__content": {
-    width: 875,
-    height: 450
-  }
-}, "label:dialogBody;");
-
-var getValidators = function getValidators(fieldPlugin, key) {
-  var defaultValidators = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return plugins.byType("cms-editor-field-validator").map(function (plugin) {
-    return plugin.validator;
-  }).map(function (validator) {
-    var allowedValidators = fieldPlugin.field[key] || defaultValidators;
-
-    if (allowedValidators.includes(validator.name)) {
-      return {
-        optional: true,
-        validator: validator
+import { ValidationTab } from "./EditFieldDialog/ValidationTab";
+import { useModelField, useModelEditor } from "../../hooks";
+import { ModelFieldProvider } from "../ModelFieldProvider";
+import { useRendererPlugins } from "./EditFieldDialog/useRendererPlugins";
+import { getFieldValidators } from "./EditFieldDialog/getValidators";
+const t = i18n.namespace("app-headless-cms/admin/components/editor");
+function setupState(field, contentModel) {
+  const clonedField = cloneDeep(field);
+  if (!clonedField.renderer || !clonedField.renderer.name) {
+    const [renderPlugin] = useRendererPlugins();
+    if (renderPlugin) {
+      clonedField.renderer = {
+        name: renderPlugin.renderer.rendererName
       };
-    } else if (allowedValidators.includes("!".concat(validator.name))) {
-      return {
-        optional: false,
-        validator: validator
-      };
-    }
-
-    return null;
-  }).filter(Boolean).sort(function (a, b) {
-    if (!a.optional && b.optional) {
-      return -1;
-    }
-
-    if (a.optional && !b.optional) {
-      return 1;
-    }
-
-    return 0;
-  });
-};
-
-var getListValidators = function getListValidators(fieldPlugin) {
-  return getValidators(fieldPlugin, "listValidators", ["minLength", "maxLength"]);
-};
-
-var getFieldValidators = function getFieldValidators(fieldPlugin) {
-  return getValidators(fieldPlugin, "validators");
-};
-
-var fieldEditorDialog = /*#__PURE__*/css({
-  width: "100vw",
-  height: "100vh",
-  ".mdc-dialog__surface": {
-    maxWidth: "100% !important",
-    maxHeight: "100% !important",
-    ".webiny-ui-dialog__content": {
-      maxWidth: "100% !important",
-      maxHeight: "100% !important",
-      width: "100vw",
-      height: "calc(100vh - 155px)",
-      paddingTop: "0 !important"
     }
   }
-}, "label:fieldEditorDialog;");
-
-var EditFieldDialog = function EditFieldDialog(_ref) {
-  var field = _ref.field,
-      onSubmit = _ref.onSubmit,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      current = _useState2[0],
-      setCurrent = _useState2[1];
-
-  var _useFieldEditor = useFieldEditor(),
-      getFieldPlugin = _useFieldEditor.getFieldPlugin;
-
-  useEffect(function () {
-    if (!field) {
-      return setCurrent(field);
-    }
-
-    var clonedField = _cloneDeep(field);
-
-    if (!clonedField.renderer || !clonedField.renderer.name) {
-      var _plugins$byType$filte = plugins.byType("cms-editor-field-renderer").filter(function (item) {
-        return item.renderer.canUse({
-          field: field
-        });
-      }),
-          _plugins$byType$filte2 = _slicedToArray(_plugins$byType$filte, 1),
-          renderPlugin = _plugins$byType$filte2[0];
-
-      if (renderPlugin) {
-        clonedField.renderer = {
-          name: renderPlugin.renderer.rendererName
+  return {
+    shadowField: clonedField,
+    isTitleField: contentModel.titleFieldId === field.fieldId
+  };
+}
+const EditFieldDialog = props => {
+  const {
+    field,
+    fieldPlugin
+  } = useModelField();
+  const {
+    data: contentModel,
+    setData: setContentModelData
+  } = useModelEditor();
+  const [{
+    shadowField,
+    isTitleField
+  }] = useState(setupState(field, contentModel));
+  const headerTitle = t`Field Settings - {fieldTypeLabel}`({
+    fieldTypeLabel: fieldPlugin.field.label
+  });
+  const onSubmit = (data, form) => {
+    /**
+     * In case title field `fieldId` changed, we need to update the title field on the model itself.
+     */
+    if (isTitleField && contentModel.titleFieldId !== data.fieldId) {
+      setContentModelData(prev => {
+        return {
+          ...prev,
+          titleFieldId: data.fieldId
         };
-      }
-    }
-
-    setCurrent(clonedField);
-  }, [field]);
-  var onClose = useCallback(function () {
-    setCurrent(null);
-    props.onClose();
-  }, undefined);
-  var render = null;
-  var headerTitle = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Field Settings"])));
-
-  if (current) {
-    var fieldPlugin = getFieldPlugin(current.type);
-
-    if (fieldPlugin) {
-      headerTitle = t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Field Settings - {fieldTypeLabel}"])))({
-        fieldTypeLabel: fieldPlugin.field.label
       });
     }
-
-    render = /*#__PURE__*/React.createElement(Form, {
-      data: current,
+    props.onSubmit(data, form);
+  };
+  return (
+    /*#__PURE__*/
+    /**
+     * We're using the `shadowField` as the new context, because we want all changes by form inputs
+     * to immediately be propagated to all dialog components.
+     */
+    React.createElement(Form, {
+      data: shadowField,
       onSubmit: onSubmit
-    }, function (form) {
-      var predefinedValuesTabEnabled = fieldPlugin.field.allowPredefinedValues && form.data.predefinedValues && form.data.predefinedValues.enabled;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogContent, {
-        className: dialogBody
-      }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
-        label: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["General"])))
-      }, /*#__PURE__*/React.createElement(GeneralTab, {
-        form: form,
-        field: form.data,
-        fieldPlugin: fieldPlugin
-      })), /*#__PURE__*/React.createElement(Tab, {
-        label: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Predefined Values"]))),
-        disabled: !predefinedValuesTabEnabled
-      }, predefinedValuesTabEnabled && /*#__PURE__*/React.createElement(PredefinedValues, {
-        form: form,
-        field: form.data,
-        fieldPlugin: fieldPlugin
-      })), form.data.multipleValues && /*#__PURE__*/React.createElement(Tab, {
-        label: "Validators",
-        "data-testid": "cms.editor.field.tabs.validators"
-      }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
-        span: 12
-      }, /*#__PURE__*/React.createElement(Typography, {
-        use: "headline5"
-      }, "List validators"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Typography, {
-        use: "body2"
-      }, "These validators are applied to the entire list of values.")), /*#__PURE__*/React.createElement(Cell, {
-        span: 12
-      }, /*#__PURE__*/React.createElement(Elevation, {
-        z: 2
-      }, /*#__PURE__*/React.createElement(ValidatorsTab, {
-        field: field,
-        name: "listValidation",
-        validators: getListValidators(fieldPlugin),
-        form: form
-      })))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
-        span: 12
-      }, /*#__PURE__*/React.createElement(Typography, {
-        use: "headline5"
-      }, "Individual value validators"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Typography, {
-        use: "body2"
-      }, "These validators are applied to each value in the list.")), /*#__PURE__*/React.createElement(Cell, {
-        span: 12
-      }, /*#__PURE__*/React.createElement(Elevation, {
-        z: 2
-      }, /*#__PURE__*/React.createElement(ValidatorsTab, {
-        field: current,
-        form: form,
-        name: "validation",
-        validators: getFieldValidators(fieldPlugin)
-      }))))), !form.data.multipleValues && Array.isArray(fieldPlugin.field.validators) && fieldPlugin.field.validators.length > 0 && /*#__PURE__*/React.createElement(Tab, {
-        label: "Validators",
-        "data-testid": "cms.editor.field.tabs.validators"
-      }, /*#__PURE__*/React.createElement(ValidatorsTab, {
-        field: current,
-        form: form,
-        name: "validation",
-        validators: getFieldValidators(fieldPlugin)
-      })), /*#__PURE__*/React.createElement(Tab, {
-        label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Appearance"])))
-      }, /*#__PURE__*/React.createElement(AppearanceTab, {
-        form: form,
-        field: form.data,
-        fieldPlugin: fieldPlugin
-      })))), /*#__PURE__*/React.createElement(DialogActions, {
-        style: {
-          justifyContent: "flex-end"
-        }
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DialogButton, {
-        onClick: onClose
-      }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Cancel"])))), /*#__PURE__*/React.createElement(DialogButton, {
-        onClick: form.submit
-      }, t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Save"])))))));
-    });
-  }
-
-  return /*#__PURE__*/React.createElement(Dialog, {
-    preventOutsideDismiss: true,
-    open: !!current,
-    onClose: onClose,
-    "data-testid": "cms-editor-edit-fields-dialog",
-    className: fieldEditorDialog
-  }, /*#__PURE__*/React.createElement(DialogTitle, null, headerTitle), render);
+    }, ({
+      data: shadowField,
+      submit
+    }) => {
+      const predefinedValuesTabEnabled = fieldPlugin.field.allowPredefinedValues && shadowField.predefinedValues && shadowField.predefinedValues.enabled;
+      const individualValidation = getFieldValidators(shadowField, fieldPlugin);
+      const showValidatorsTab = shadowField.multipleValues || individualValidation.validators.length > 0;
+      return /*#__PURE__*/React.createElement(Dialog, {
+        size: "full",
+        title: headerTitle,
+        open: true,
+        modal: true,
+        onClose: props.onClose,
+        bodyPadding: false,
+        actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelButton, {
+          text: t`Cancel`,
+          onClick: props.onClose,
+          "data-testid": "cms.editor.field.settings.cancel"
+        }), /*#__PURE__*/React.createElement(Dialog.ConfirmButton, {
+          text: t`Save Field`,
+          onClick: submit,
+          "data-testid": "cms.editor.field.settings.save"
+        })),
+        "data-testid": "cms-editor-edit-fields-dialog"
+      }, /*#__PURE__*/React.createElement(ModelFieldProvider, {
+        field: shadowField
+      }, /*#__PURE__*/React.createElement(Tabs, {
+        spacing: "lg",
+        size: "md",
+        separator: true,
+        tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
+          key: "general",
+          trigger: t`General`,
+          value: "general",
+          content: /*#__PURE__*/React.createElement(GeneralTab, null)
+        }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+          key: "predefined",
+          trigger: t`Predefined values`,
+          value: "predefined",
+          disabled: !predefinedValuesTabEnabled,
+          content: /*#__PURE__*/React.createElement(PredefinedValues, null)
+        }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+          key: "validations",
+          trigger: t`Validations`,
+          value: "validations",
+          content: /*#__PURE__*/React.createElement(ValidationTab, {
+            field: shadowField
+          }),
+          visible: showValidatorsTab
+        }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+          key: "appearance",
+          trigger: t`Appearance`,
+          value: "Appearance",
+          content: /*#__PURE__*/React.createElement(AppearanceTab, null)
+        })]
+      })));
+    })
+  );
 };
+export default EditFieldDialog;
 
-export default EditFieldDialog;
+//# sourceMappingURL=EditFieldDialog.js.map