@webiny/app-headless-cms 5.24.0 → 5.25.0-beta.2

package/HeadlessCMS.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { ApolloClient } from "apollo-client";
+interface CreateApolloClientParams {
+    uri: string;
+}
 interface CreateApolloClient {
-    (params: {
-        uri: string;
-    }): ApolloClient<any>;
+    (params: CreateApolloClientParams): ApolloClient<any>;
 }
 export interface HeadlessCMSProps {
     createApolloClient: CreateApolloClient;

package/HeadlessCMS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["HeadlessCMS.tsx"],"names":["React","Fragment","memo","plugins","Plugins","Provider","CmsProvider","CmsMenuLoader","apiInformation","createHeadlessCMSProvider","createApolloClient","Component","HeadlessCMSProvider","children","HeadlessCMSExtension","register","HeadlessCMS"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,EAA0BC,IAA1B,QAAsC,OAAtC;AACA,SAASC,OAAT,QAAwB,iBAAxB;AACA,SAASC,OAAT,EAAkBC,QAAlB,QAAkC,mBAAlC;AAEA,SAASC,WAAT;AACA,SAASC,aAAT;AACA,OAAOC,cAAP;;AAEA,IAAMC,yBAAyB,GAC3B,SADEA,yBACF,CAACC,kBAAD;AAAA,SACA,UAACC,SAAD,EAAmC;AAC/B,WAAO,SAASC,mBAAT,OAA2C;AAAA,UAAZC,QAAY,QAAZA,QAAY;AAC9C,0BACI,oBAAC,WAAD;AAAa,QAAA,kBAAkB,EAAEH;AAAjC,sBACI,oBAAC,SAAD,QAAYG,QAAZ,CADJ,CADJ;AAKH,KAND;AAOH,GATD;AAAA,CADJ;;AAuBA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,QAA8C;AAAA,MAA3CJ,kBAA2C,SAA3CA,kBAA2C;AACvEP,EAAAA,OAAO,CAACY,QAAR,CAAiBP,cAAjB;AAEA,sBACI,oBAAC,QAAD,qBACI,oBAAC,QAAD;AAAU,IAAA,GAAG,EAAEC,yBAAyB,CAACC,kBAAD;AAAxC,IADJ,eAEI,oBAAC,OAAD,qBACI,oBAAC,aAAD,OADJ,CAFJ,CADJ;AAQH,CAXD;;AAaA,OAAO,IAAMM,WAAW,gBAAGd,IAAI,CAACY,oBAAD,CAAxB","sourcesContent":["import React, { Fragment, memo } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Plugins, Provider } from \"@webiny/app-admin\";\nimport { ApolloClient } from \"apollo-client\";\nimport { CmsProvider } from \"./admin/contexts/Cms\";\nimport { CmsMenuLoader } from \"~/admin/menus/CmsMenuLoader\";\nimport apiInformation from \"./admin/plugins/apiInformation\";\n\nconst createHeadlessCMSProvider =\n    (createApolloClient: CreateApolloClient) =>\n    (Component: React.FC): React.FC => {\n        return function HeadlessCMSProvider({ children }) {\n            return (\n                <CmsProvider createApolloClient={createApolloClient}>\n                    <Component>{children}</Component>\n                </CmsProvider>\n            );\n        };\n    };\n\ninterface CreateApolloClientParams {\n    uri: string;\n}\ninterface CreateApolloClient {\n    (params: CreateApolloClientParams): ApolloClient<any>;\n}\n\nexport interface HeadlessCMSProps {\n    createApolloClient: CreateApolloClient;\n}\n\nconst HeadlessCMSExtension = ({ createApolloClient }: HeadlessCMSProps) => {\n    plugins.register(apiInformation);\n\n    return (\n        <Fragment>\n            <Provider hoc={createHeadlessCMSProvider(createApolloClient)} />\n            <Plugins>\n                <CmsMenuLoader />\n            </Plugins>\n        </Fragment>\n    );\n};\n\nexport const HeadlessCMS = memo(HeadlessCMSExtension);\n"]}

package/admin/components/ContentEntryForm/ContentEntryForm.js

@@ -2,11 +2,11 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["onForm"];
 import React, { useCallback, useEffect, useRef } from "react";
+import RenderFieldElement from "./RenderFieldElement";
 import styled from "@emotion/styled";
 import { Form } from "@webiny/form";
 import { plugins } from "@webiny/plugins";
 import { CircularProgress } from "@webiny/ui/Progress";
-import RenderFieldElement from "./RenderFieldElement";
 import { useContentEntryForm } from "./useContentEntryForm";
 import { Fields } from "./Fields";
 var FormWrapper = /*#__PURE__*/styled("div", {
@@ -31,13 +31,21 @@ export var ContentEntryForm = function ContentEntryForm(_ref) {
 
   var ref = useRef(null);
   useEffect(function () {
-    typeof onForm === "function" && onForm(ref.current);
+    if (typeof onForm !== "function" || !ref.current) {
+      return;
+    }
+
+    onForm(ref.current);
   }, []);
   var formRenderer = plugins.byType("cms-content-form-renderer").find(function (pl) {
     return pl.modelId === contentModel.modelId;
   });
   var renderCustomLayout = useCallback(function (formRenderProps) {
     var fields = contentModel.fields.reduce(function (acc, field) {
+      /**
+       * TODO @ts-refactor
+       * Figure out type for Bind.
+       */
       acc[field.fieldId] = /*#__PURE__*/React.createElement(RenderFieldElement, {
         field: field,
         Bind: formRenderProps.Bind,
@@ -45,9 +53,20 @@ export var ContentEntryForm = function ContentEntryForm(_ref) {
       });
       return acc;
     }, {});
+
+    if (!formRenderer) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, "Missing form renderer for modelId \"".concat(contentModel.modelId, "\"."));
+    }
+
     return formRenderer.render(_objectSpread(_objectSpread({}, formRenderProps), {}, {
       contentModel: contentModel,
-      fields: fields
+      fields: fields,
+
+      /**
+       * TODO @ts-refactor
+       * Figure out type for Bind.
+       */
+      Bind: formRenderProps.Bind
     }));
   }, [formRenderer]);
   return /*#__PURE__*/React.createElement(Form, {
@@ -61,8 +80,10 @@ export var ContentEntryForm = function ContentEntryForm(_ref) {
       "data-testid": "cms-content-form"
     }, loading && /*#__PURE__*/React.createElement(CircularProgress, null), formRenderer ? renderCustomLayout(formProps) : /*#__PURE__*/React.createElement(Fields, Object.assign({
       contentModel: contentModel,
-      fields: contentModel.fields,
-      layout: contentModel.layout
-    }, formProps)));
+      fields: contentModel.fields || [],
+      layout: contentModel.layout || []
+    }, formProps, {
+      Bind: formProps.Bind
+    })));
   });
 };

package/admin/components/ContentEntryForm/ContentEntryForm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ContentEntryForm.tsx"],"names":["React","useCallback","useEffect","useRef","RenderFieldElement","styled","Form","plugins","CircularProgress","useContentEntryForm","Fields","FormWrapper","height","overflow","ContentEntryForm","onForm","props","contentModel","loading","data","onChange","onSubmit","invalidFields","ref","current","formRenderer","byType","find","pl","modelId","renderCustomLayout","formRenderProps","fields","reduce","acc","field","fieldId","Bind","render","formProps","layout"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport styled from \"@emotion/styled\";\nimport { Form } from \"@webiny/form\";\nimport { FormAPI, FormRenderPropParams } from \"@webiny/form/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { CmsContentFormRendererPlugin } from \"~/types\";\nimport { useContentEntryForm, UseContentEntryFormParams } from \"./useContentEntryForm\";\nimport { Fields } from \"./Fields\";\n\nconst FormWrapper = styled(\"div\")({\n    height: \"calc(100vh - 260px)\",\n    overflow: \"auto\"\n});\n\ninterface ContentEntryFormProps extends UseContentEntryFormParams {\n    onForm?: (form: FormAPI) => void;\n}\n\nexport const ContentEntryForm: React.FC<ContentEntryFormProps> = ({ onForm, ...props }) => {\n    const { contentModel } = props;\n    const { loading, data, onChange, onSubmit, invalidFields } = useContentEntryForm(props);\n\n    const ref = useRef<FormAPI | null>(null);\n\n    useEffect(() => {\n        if (typeof onForm !== \"function\" || !ref.current) {\n            return;\n        }\n        onForm(ref.current);\n    }, []);\n\n    const formRenderer = plugins\n        .byType<CmsContentFormRendererPlugin>(\"cms-content-form-renderer\")\n        .find(pl => pl.modelId === contentModel.modelId);\n\n    const renderCustomLayout = useCallback(\n        (formRenderProps: FormRenderPropParams) => {\n            const fields = contentModel.fields.reduce((acc, field) => {\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                acc[field.fieldId] = (\n                    <RenderFieldElement\n                        field={field}\n                        Bind={formRenderProps.Bind as any}\n                        contentModel={contentModel}\n                    />\n                );\n\n                return acc;\n            }, {} as Record<string, React.ReactElement>);\n            if (!formRenderer) {\n                return <>{`Missing form renderer for modelId \"${contentModel.modelId}\".`}</>;\n            }\n            return formRenderer.render({\n                ...formRenderProps,\n                contentModel,\n                fields,\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                Bind: formRenderProps.Bind as any\n            });\n        },\n        [formRenderer]\n    );\n\n    return (\n        <Form\n            onChange={onChange}\n            onSubmit={onSubmit}\n            data={data}\n            ref={ref}\n            invalidFields={invalidFields}\n        >\n            {formProps => (\n                <FormWrapper data-testid={\"cms-content-form\"}>\n                    {loading && <CircularProgress />}\n                    {formRenderer ? (\n                        renderCustomLayout(formProps)\n                    ) : (\n                        <Fields\n                            contentModel={contentModel}\n                            fields={contentModel.fields || []}\n                            layout={contentModel.layout || []}\n                            {...formProps}\n                            Bind={formProps.Bind as any}\n                        />\n                    )}\n                </FormWrapper>\n            )}\n        </Form>\n    );\n};\n"]}

package/admin/components/ContentEntryForm/ContentEntryFormPreview.js

@@ -19,6 +19,10 @@ export var ContentEntryFormPreview = function ContentEntryFormPreview(props) {
   });
   var renderCustomLayout = useCallback(function (formRenderProps) {
     var fields = contentModel.fields.reduce(function (acc, field) {
+      /**
+       * TODO @ts-refactor
+       * Figure out type for Bind.
+       */
       acc[field.fieldId] = /*#__PURE__*/React.createElement(RenderFieldElement, {
         field: field,
         Bind: formRenderProps.Bind,
@@ -26,7 +30,17 @@ export var ContentEntryFormPreview = function ContentEntryFormPreview(props) {
       });
       return acc;
     }, {});
+
+    if (!formRenderer) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, "Missing form renderer for modelId \"".concat(contentModel.modelId, "\"."));
+    }
+
     return formRenderer.render(_objectSpread(_objectSpread({}, formRenderProps), {}, {
+      /**
+       * TODO @ts-refactor
+       * Figure out type for Bind.
+       */
+      Bind: formRenderProps.Bind,
       contentModel: contentModel,
       fields: fields
     }));
@@ -37,7 +51,9 @@ export var ContentEntryFormPreview = function ContentEntryFormPreview(props) {
     }, formRenderer ? renderCustomLayout(formProps) : /*#__PURE__*/React.createElement(Fields, Object.assign({
       contentModel: contentModel,
       fields: contentModel.fields,
-      layout: contentModel.layout
-    }, formProps)));
+      layout: contentModel.layout || []
+    }, formProps, {
+      Bind: formProps.Bind
+    })));
   });
 };

package/admin/components/ContentEntryForm/ContentEntryFormPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ContentEntryFormPreview.tsx"],"names":["React","useCallback","styled","Form","plugins","RenderFieldElement","Fields","FormWrapper","height","overflow","ContentEntryFormPreview","props","contentModel","formRenderer","byType","find","pl","modelId","renderCustomLayout","formRenderProps","fields","reduce","acc","field","fieldId","Bind","render","formProps","layout"],"mappings":";AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,IAAT,QAA2C,cAA3C;AACA,SAASC,OAAT,QAAwB,iBAAxB;AACA,OAAOC,kBAAP;AAEA,SAASC,MAAT;AAEA,IAAMC,WAAW,gBAAGL,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AAC9BM,EAAAA,MAAM,EAAE,qBADsB;AAE9BC,EAAAA,QAAQ,EAAE;AAFoB,CAAjB,CAAjB;AASA,OAAO,IAAMC,uBAAwC,GAAG,SAA3CA,uBAA2C,CAAAC,KAAK,EAAI;AAC7D,MAAQC,YAAR,GAAyBD,KAAzB,CAAQC,YAAR;AAEA,MAAMC,YAAY,GAAGT,OAAO,CACvBU,MADgB,CACqB,2BADrB,EAEhBC,IAFgB,CAEX,UAAAC,EAAE;AAAA,WAAIA,EAAE,CAACC,OAAH,KAAeL,YAAY,CAACK,OAAhC;AAAA,GAFS,CAArB;AAIA,MAAMC,kBAAkB,GAAGjB,WAAW,CAClC,UAACkB,eAAD,EAA2C;AACvC,QAAMC,MAAM,GAAGR,YAAY,CAACQ,MAAb,CAAoBC,MAApB,CAA2B,UAACC,GAAD,EAAMC,KAAN,EAAgB;AACtD;AAChB;AACA;AACA;AACgBD,MAAAA,GAAG,CAACC,KAAK,CAACC,OAAP,CAAH,gBACI,oBAAC,kBAAD;AACI,QAAA,KAAK,EAAED,KADX;AAEI,QAAA,IAAI,EAAEJ,eAAe,CAACM,IAF1B;AAGI,QAAA,YAAY,EAAEb;AAHlB,QADJ;AAQA,aAAOU,GAAP;AACH,KAdc,EAcZ,EAdY,CAAf;;AAeA,QAAI,CAACT,YAAL,EAAmB;AACf,0BAAO,wFAAyCD,YAAY,CAACK,OAAtD,SAAP;AACH;;AACD,WAAOJ,YAAY,CAACa,MAAb,iCACAP,eADA;AAEH;AAChB;AACA;AACA;AACgBM,MAAAA,IAAI,EAAEN,eAAe,CAACM,IANnB;AAOHb,MAAAA,YAAY,EAAZA,YAPG;AAQHQ,MAAAA,MAAM,EAANA;AARG,OAAP;AAUH,GA9BiC,EA+BlC,CAACP,YAAD,EAAeD,YAAY,CAACQ,MAA5B,CA/BkC,CAAtC;AAkCA,sBACI,oBAAC,IAAD,QACK,UAAAO,SAAS;AAAA,wBACN,oBAAC,WAAD;AAAa,qBAAa;AAA1B,OACKd,YAAY,GACTK,kBAAkB,CAACS,SAAD,CADT,gBAGT,oBAAC,MAAD;AACI,MAAA,YAAY,EAAEf,YADlB;AAEI,MAAA,MAAM,EAAEA,YAAY,CAACQ,MAFzB;AAGI,MAAA,MAAM,EAAER,YAAY,CAACgB,MAAb,IAAuB;AAHnC,OAIQD,SAJR;AAKI,MAAA,IAAI,EAAEA,SAAS,CAACF;AALpB,OAJR,CADM;AAAA,GADd,CADJ;AAmBH,CA5DM","sourcesContent":["import React, { useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Form, FormRenderPropParams } from \"@webiny/form\";\nimport { plugins } from \"@webiny/plugins\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport { CmsContentFormRendererPlugin, CmsEditorContentModel } from \"~/types\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\n\nconst FormWrapper = styled(\"div\")({\n    height: \"calc(100vh - 260px)\",\n    overflow: \"auto\"\n});\n\ninterface Props {\n    contentModel: CmsEditorContentModel;\n}\n\nexport const ContentEntryFormPreview: React.FC<Props> = props => {\n    const { contentModel } = props;\n\n    const formRenderer = plugins\n        .byType<CmsContentFormRendererPlugin>(\"cms-content-form-renderer\")\n        .find(pl => pl.modelId === contentModel.modelId);\n\n    const renderCustomLayout = useCallback(\n        (formRenderProps: FormRenderPropParams) => {\n            const fields = contentModel.fields.reduce((acc, field) => {\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                acc[field.fieldId] = (\n                    <RenderFieldElement\n                        field={field}\n                        Bind={formRenderProps.Bind as any}\n                        contentModel={contentModel}\n                    />\n                );\n\n                return acc;\n            }, {} as Record<string, React.ReactElement>);\n            if (!formRenderer) {\n                return <>{`Missing form renderer for modelId \"${contentModel.modelId}\".`}</>;\n            }\n            return formRenderer.render({\n                ...formRenderProps,\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                Bind: formRenderProps.Bind as any,\n                contentModel,\n                fields\n            });\n        },\n        [formRenderer, contentModel.fields]\n    );\n\n    return (\n        <Form>\n            {formProps => (\n                <FormWrapper data-testid={\"cms-content-form\"}>\n                    {formRenderer ? (\n                        renderCustomLayout(formProps)\n                    ) : (\n                        <Fields\n                            contentModel={contentModel}\n                            fields={contentModel.fields}\n                            layout={contentModel.layout || []}\n                            {...formProps}\n                            Bind={formProps.Bind as any}\n                        />\n                    )}\n                </FormWrapper>\n            )}\n        </Form>\n    );\n};\n"]}

package/admin/components/ContentEntryForm/Fields.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import { BindComponent } from "@webiny/form";
-import { CmsEditorContentModel, CmsEditorField, CmsEditorFieldsLayout } from "../../../types";
+import { CmsEditorContentModel, CmsEditorField, CmsEditorFieldsLayout, BindComponent } from "../../../types";
 interface FieldsProps {
     Bind: BindComponent;
     contentModel: CmsEditorContentModel;

package/admin/components/ContentEntryForm/Fields.js

@@ -5,7 +5,7 @@ import RenderFieldElement from "./RenderFieldElement";
 var getFieldById = function getFieldById(fields, id) {
   return fields.find(function (field) {
     return field.id === id;
-  });
+  }) || null;
 };
 
 export var Fields = function Fields(_ref) {

package/admin/components/ContentEntryForm/Fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Fields.tsx"],"names":["React","Cell","Grid","RenderFieldElement","getFieldById","fields","id","find","field","Fields","Bind","layout","contentModel","gridClassName","map","row","rowIndex","fieldId","Math","floor","length"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,iBAA3B;AACA,OAAOC,kBAAP;;AAgBA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,MAAD,EAA2BC,EAA3B,EAAiE;AAClF,SAAOD,MAAM,CAACE,IAAP,CAAY,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,EAAN,KAAaA,EAAjB;AAAA,GAAjB,KAAyC,IAAhD;AACH,CAFD;;AAIA,OAAO,IAAMG,MAA6B,GAAG,SAAhCA,MAAgC,OAMvC;AAAA,MALFC,IAKE,QALFA,IAKE;AAAA,MAJFL,MAIE,QAJFA,MAIE;AAAA,MAHFM,MAGE,QAHFA,MAGE;AAAA,MAFFC,YAEE,QAFFA,YAEE;AAAA,MADFC,aACE,QADFA,aACE;AACF,sBACI,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAEA;AAAjB,KACKF,MAAM,CAACG,GAAP,CAAW,UAACC,GAAD,EAAMC,QAAN;AAAA,wBACR,oBAAC,KAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,EAAEA;AAArB,OACKD,GAAG,CAACD,GAAJ,CAAQ,UAAAG,OAAO;AAAA,0BACZ,oBAAC,IAAD;AAAM,QAAA,IAAI,EAAEC,IAAI,CAACC,KAAL,CAAW,KAAKJ,GAAG,CAACK,MAApB,CAAZ;AAAyC,QAAA,GAAG,EAAEH;AAA9C,sBACI,oBAAC,kBAAD;AACI,QAAA,KAAK,EAAEb,YAAY,CAACC,MAAD,EAASY,OAAT,CADvB;AAEI,QAAA,IAAI,EAAEP,IAFV;AAGI,QAAA,YAAY,EAAEE;AAHlB,QADJ,CADY;AAAA,KAAf,CADL,CADQ;AAAA,GAAX,CADL,CADJ;AAiBH,CAxBM","sourcesContent":["import React from \"react\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport {\n    CmsEditorContentModel,\n    CmsEditorField,\n    CmsEditorFieldsLayout,\n    BindComponent\n} from \"~/types\";\n\ninterface FieldsProps {\n    Bind: BindComponent;\n    contentModel: CmsEditorContentModel;\n    fields: CmsEditorField[];\n    layout: CmsEditorFieldsLayout;\n    gridClassName?: string;\n}\n\nconst getFieldById = (fields: CmsEditorField[], id: string): CmsEditorField | null => {\n    return fields.find(field => field.id === id) || null;\n};\n\nexport const Fields: React.FC<FieldsProps> = ({\n    Bind,\n    fields,\n    layout,\n    contentModel,\n    gridClassName\n}) => {\n    return (\n        <Grid className={gridClassName}>\n            {layout.map((row, rowIndex) => (\n                <React.Fragment key={rowIndex}>\n                    {row.map(fieldId => (\n                        <Cell span={Math.floor(12 / row.length)} key={fieldId}>\n                            <RenderFieldElement\n                                field={getFieldById(fields, fieldId) as CmsEditorField}\n                                Bind={Bind}\n                                contentModel={contentModel}\n                            />\n                        </Cell>\n                    ))}\n                </React.Fragment>\n            ))}\n        </Grid>\n    );\n};\n"]}

package/admin/components/ContentEntryForm/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Label.tsx"],"names":["React","css","classNames","Typography","style","label","marginBottom","Label","children"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,UAAT,QAA2B,uBAA3B;AAEA,IAAMC,KAAK,GAAG;AACVC,EAAAA,KAAK,eAAEJ,GAAG,CAAC;AACPK,IAAAA,YAAY,EAAE;AADP,GAAD;AADA,CAAd;;AAMA,IAAMC,KAAe,GAAG,SAAlBA,KAAkB;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,sBACpB;AACI,IAAA,SAAS,EAAEN,UAAU,CACjB,mEADiB,EAEjBE,KAAK,CAACC,KAFW;AADzB,kBAMI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAE;AAAjB,KAA+BG,QAA/B,CANJ,CADoB;AAAA,CAAxB;;AAWA,eAAeD,KAAf","sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nconst style = {\n    label: css({\n        marginBottom: \"5px !important\"\n    })\n};\n\nconst Label: React.FC = ({ children }) => (\n    <div\n        className={classNames(\n            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n            style.label\n        )}\n    >\n        <Typography use={\"subtitle2\"}>{children}</Typography>\n    </div>\n);\n\nexport default Label;\n"]}

package/admin/components/ContentEntryForm/RenderFieldElement.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import { CmsEditorField, CmsEditorContentModel } from "../../../types";
-import { BindComponent } from "@webiny/form";
+import { CmsEditorField, CmsEditorContentModel, BindComponent } from "../../../types";
 interface RenderFieldElementProps {
     field: CmsEditorField;
     Bind: BindComponent;

package/admin/components/ContentEntryForm/RenderFieldElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["RenderFieldElement.tsx"],"names":["React","get","i18n","Label","useBind","useRenderPlugins","t","ns","RenderFieldElement","props","renderPlugins","field","Bind","contentModel","getBind","renderPlugin","find","plugin","renderer","rendererName","fieldName","fieldId","render"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,GAAP,MAAgB,YAAhB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,OAAOC,KAAP;AACA,SAASC,OAAT;AACA,SAASC,gBAAT;AAEA,IAAMC,CAAC,GAAGJ,IAAI,CAACK,EAAL,CAAQ,gDAAR,CAAV;;AAOA,IAAMC,kBAAqD,GAAG,SAAxDA,kBAAwD,CAAAC,KAAK,EAAI;AACnE,MAAMC,aAAa,GAAGL,gBAAgB,EAAtC;AACA,MAAQM,KAAR,GAAsCF,KAAtC,CAAQE,KAAR;AAAA,MAAeC,IAAf,GAAsCH,KAAtC,CAAeG,IAAf;AAAA,MAAqBC,YAArB,GAAsCJ,KAAtC,CAAqBI,YAArB;AACA,MAAMC,OAAO,GAAGV,OAAO,CAAC;AAAEQ,IAAAA,IAAI,EAAJA,IAAF;AAAQD,IAAAA,KAAK,EAALA;AAAR,GAAD,CAAvB;AAEA,MAAMI,YAAY,GAAGL,aAAa,CAACM,IAAd,CACjB,UAAAC,MAAM;AAAA,WAAIA,MAAM,CAACC,QAAP,CAAgBC,YAAhB,KAAiClB,GAAG,CAACU,KAAD,EAAQ,eAAR,CAAxC;AAAA,GADW,CAArB;;AAIA,MAAI,CAACI,YAAL,EAAmB;AACf,WAAOT,CAAC,kIAAD,CAA+D;AAClEc,MAAAA,SAAS,eAAE,oCAAST,KAAK,CAACU,OAAf;AADuD,KAA/D,CAAP;AAGH;;AAED,SAAON,YAAY,CAACG,QAAb,CAAsBI,MAAtB,CAA6B;AAAEX,IAAAA,KAAK,EAALA,KAAF;AAASG,IAAAA,OAAO,EAAPA,OAAT;AAAkBX,IAAAA,KAAK,EAALA,KAAlB;AAAyBU,IAAAA,YAAY,EAAZA;AAAzB,GAA7B,CAAP;AACH,CAhBD;;AAkBA,eAAeL,kBAAf","sourcesContent":["import React from \"react\";\nimport { CmsEditorField, CmsEditorContentModel, BindComponent } from \"~/types\";\nimport get from \"lodash/get\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport Label from \"./Label\";\nimport { useBind } from \"./useBind\";\nimport { useRenderPlugins } from \"./useRenderPlugins\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/content-form\");\n\ninterface RenderFieldElementProps {\n    field: CmsEditorField;\n    Bind: BindComponent;\n    contentModel: CmsEditorContentModel;\n}\nconst RenderFieldElement: React.FC<RenderFieldElementProps> = props => {\n    const renderPlugins = useRenderPlugins();\n    const { field, Bind, contentModel } = props;\n    const getBind = useBind({ Bind, field });\n\n    const renderPlugin = renderPlugins.find(\n        plugin => plugin.renderer.rendererName === get(field, \"renderer.name\")\n    );\n\n    if (!renderPlugin) {\n        return t`Cannot render \"{fieldName}\" field - field renderer missing.`({\n            fieldName: <strong>{field.fieldId}</strong>\n        });\n    }\n\n    return renderPlugin.renderer.render({ field, getBind, Label, contentModel });\n};\n\nexport default RenderFieldElement;\n"]}

package/admin/components/ContentEntryForm/functions/createValidators.d.ts

@@ -1,2 +1,3 @@
 import { CmsEditorFieldValidator } from "../../../../types";
-export declare const createValidators: (validation: CmsEditorFieldValidator[]) => ((value: string | string[]) => Promise<void>)[];
+import { Validator } from "@webiny/validation/types";
+export declare const createValidators: (validation: CmsEditorFieldValidator[]) => Validator[];

package/admin/components/ContentEntryForm/functions/createValidators.js

@@ -3,16 +3,16 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { plugins } from "@webiny/plugins";
 export var createValidators = function createValidators(validation) {
   var validatorPlugins = plugins.byType("cms-model-field-validator");
-  return validation.map(function (item) {
+  return validation.reduce(function (collection, item) {
     var validatorPlugin = validatorPlugins.find(function (plugin) {
       return plugin.validator.name === item.name;
     });
 
     if (!validatorPlugin || typeof validatorPlugin.validator.validate !== "function") {
-      return null;
+      return collection;
     }
 
-    return /*#__PURE__*/function () {
+    var validator = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
         var isInvalid, result;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -50,9 +50,12 @@ export var createValidators = function createValidators(validation) {
         }, _callee, null, [[0, 7]]);
       }));
 
-      return function (_x) {
+      return function validator(_x) {
         return _ref.apply(this, arguments);
       };
     }();
-  }).filter(Boolean);
+
+    collection.push(validator);
+    return collection;
+  }, []);
 };

package/admin/components/ContentEntryForm/functions/createValidators.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["createValidators.ts"],"names":["plugins","createValidators","validation","validatorPlugins","byType","reduce","collection","item","validatorPlugin","find","plugin","validator","name","validate","value","result","isInvalid","Error","message","push"],"mappings":";;AAAA,SAASA,OAAT,QAAwB,iBAAxB;AAIA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,UAAD,EAAwD;AACpF,MAAMC,gBAAgB,GAAGH,OAAO,CAACI,MAAR,CACrB,2BADqB,CAAzB;AAIA,SAAOF,UAAU,CAACG,MAAX,CAAkB,UAACC,UAAD,EAAaC,IAAb,EAAsB;AAC3C,QAAMC,eAAe,GAAGL,gBAAgB,CAACM,IAAjB,CACpB,UAAAC,MAAM;AAAA,aAAIA,MAAM,CAACC,SAAP,CAAiBC,IAAjB,KAA0BL,IAAI,CAACK,IAAnC;AAAA,KADc,CAAxB;;AAIA,QAAI,CAACJ,eAAD,IAAoB,OAAOA,eAAe,CAACG,SAAhB,CAA0BE,QAAjC,KAA8C,UAAtE,EAAkF;AAC9E,aAAOP,UAAP;AACH;;AAED,QAAMK,SAAS;AAAA,0EAAG,iBAAOG,KAAP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAGWN,eAAe,CAACG,SAAhB,CAA0BE,QAA1B,CAAmCC,KAAnC,EAA0CP,IAA1C,CAHX;;AAAA;AAGJQ,gBAAAA,MAHI;AAIVC,gBAAAA,SAAS,GAAGD,MAAM,KAAK,KAAvB;AAJU;AAAA;;AAAA;AAAA;AAAA;AAMVC,gBAAAA,SAAS,GAAG,IAAZ;;AANU;AAAA,qBASVA,SATU;AAAA;AAAA;AAAA;;AAAA,sBAUJ,IAAIC,KAAJ,CAAUV,IAAI,CAACW,OAAL,IAAgB,gBAA1B,CAVI;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAH;;AAAA,sBAATP,SAAS;AAAA;AAAA;AAAA,OAAf;;AAaAL,IAAAA,UAAU,CAACa,IAAX,CAAgBR,SAAhB;AACA,WAAOL,UAAP;AACH,GAxBM,EAwBJ,EAxBI,CAAP;AAyBH,CA9BM","sourcesContent":["import { plugins } from \"@webiny/plugins\";\nimport { CmsEditorFieldValidator, CmsModelFieldValidatorPlugin } from \"~/types\";\nimport { Validator } from \"@webiny/validation/types\";\n\nexport const createValidators = (validation: CmsEditorFieldValidator[]): Validator[] => {\n    const validatorPlugins = plugins.byType<CmsModelFieldValidatorPlugin>(\n        \"cms-model-field-validator\"\n    );\n\n    return validation.reduce((collection, item) => {\n        const validatorPlugin = validatorPlugins.find(\n            plugin => plugin.validator.name === item.name\n        );\n\n        if (!validatorPlugin || typeof validatorPlugin.validator.validate !== \"function\") {\n            return collection;\n        }\n\n        const validator = async (value: string | string[]) => {\n            let isInvalid;\n            try {\n                const result = await validatorPlugin.validator.validate(value, item);\n                isInvalid = result === false;\n            } catch (e) {\n                isInvalid = true;\n            }\n\n            if (isInvalid) {\n                throw new Error(item.message || \"Invalid value.\");\n            }\n        };\n        collection.push(validator);\n        return collection;\n    }, [] as Validator[]);\n};\n"]}

package/admin/components/ContentEntryForm/functions/getValue.d.ts

@@ -1,8 +1,9 @@
 import { CmsEditorField } from "../../../../types";
-interface Params {
-    bind: any;
+import { BindComponentRenderProp } from "@webiny/form";
+interface GetValueParams {
+    bind: BindComponentRenderProp;
     field: Pick<CmsEditorField, "multipleValues">;
     index: number;
 }
-export declare const getValue: (params: Params) => string;
+export declare const getValue: (params: GetValueParams) => string;
 export {};

package/admin/components/ContentEntryForm/functions/getValue.js

@@ -1,4 +1,3 @@
-// TODO @ts-refactor figure out correct bind types and remove any
 export var getValue = function getValue(params) {
   var bind = params.bind,
       field = params.field,

package/admin/components/ContentEntryForm/functions/getValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getValue.ts"],"names":["getValue","params","bind","field","index","value","multipleValues","Array","isArray"],"mappings":"AAQA,OAAO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,MAAD,EAAoC;AACxD,MAAQC,IAAR,GAA+BD,MAA/B,CAAQC,IAAR;AAAA,MAAcC,KAAd,GAA+BF,MAA/B,CAAcE,KAAd;AAAA,MAAqBC,KAArB,GAA+BH,MAA/B,CAAqBG,KAArB;AACA,MAAIC,KAAK,GAAGH,IAAI,CAACG,KAAL,IAAc,IAA1B;;AAEA,MAAIF,KAAK,CAACG,cAAV,EAA0B;AACtB,QAAI,CAACC,KAAK,CAACC,OAAN,CAAcH,KAAd,CAAL,EAA2B;AACvBA,MAAAA,KAAK,GAAG,EAAR;AACH;;AAED,QAAID,KAAK,IAAI,CAAb,EAAgB;AACZ,aAAOC,KAAK,CAACD,KAAD,CAAL,IAAgB,IAAvB;AACH;;AAED,WAAOC,KAAP;AACH;;AAED,SAAOA,KAAP;AACH,CAjBM","sourcesContent":["import { CmsEditorField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface GetValueParams {\n    bind: BindComponentRenderProp;\n    field: Pick<CmsEditorField, \"multipleValues\">;\n    index: number;\n}\nexport const getValue = (params: GetValueParams): string => {\n    const { bind, field, index } = params;\n    let value = bind.value || null;\n\n    if (field.multipleValues) {\n        if (!Array.isArray(value)) {\n            value = [];\n        }\n\n        if (index >= 0) {\n            return value[index] || null;\n        }\n\n        return value;\n    }\n\n    return value;\n};\n"]}

package/admin/components/ContentEntryForm/functions/setValue.d.ts

@@ -1,9 +1,10 @@
 import { CmsEditorField } from "../../../../types";
-interface Params {
+import { BindComponentRenderProp } from "@webiny/form";
+interface setValueParams {
     value: string[];
-    bind: any;
+    bind: BindComponentRenderProp;
     field: Pick<CmsEditorField, "multipleValues">;
     index: number;
 }
-export declare const setValue: (params: Params) => void;
+export declare const setValue: (params: setValueParams) => void;
 export {};

package/admin/components/ContentEntryForm/functions/setValue.js

@@ -1,5 +1,4 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-// TODO @ts-refactor figure out correct bind types and remove any
 export var setValue = function setValue(params) {
   var value = params.value,
       bind = params.bind,

package/admin/components/ContentEntryForm/functions/setValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["setValue.ts"],"names":["setValue","params","value","bind","field","index","newValue","multipleValues","onChange"],"mappings":";AASA,OAAO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,MAAD,EAAkC;AACtD,MAAQC,KAAR,GAAsCD,MAAtC,CAAQC,KAAR;AAAA,MAAeC,IAAf,GAAsCF,MAAtC,CAAeE,IAAf;AAAA,MAAqBC,KAArB,GAAsCH,MAAtC,CAAqBG,KAArB;AAAA,MAA4BC,KAA5B,GAAsCJ,MAAtC,CAA4BI,KAA5B;AACA,MAAIC,QAAQ,GAAGF,KAAK,CAACG,cAAN,sBAA4BJ,IAAI,CAACD,KAAL,IAAc,EAA1C,IAAiDC,IAAI,CAACD,KAArE;;AAEA,MAAIE,KAAK,CAACG,cAAV,EAA0B;AACtB,QAAIF,KAAK,IAAI,CAAb,EAAgB;AACZC,MAAAA,QAAQ,CAACD,KAAD,CAAR,GAAkBH,KAAlB;AACH,KAFD,MAEO;AACHI,MAAAA,QAAQ,GAAGJ,KAAX;AACH;AACJ,GAND,MAMO;AACHI,IAAAA,QAAQ,GAAGJ,KAAX;AACH;;AAEDC,EAAAA,IAAI,CAACK,QAAL,CAAcF,QAAd;AACH,CAfM","sourcesContent":["import { CmsEditorField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface setValueParams {\n    value: string[];\n    bind: BindComponentRenderProp;\n    field: Pick<CmsEditorField, \"multipleValues\">;\n    index: number;\n}\nexport const setValue = (params: setValueParams): void => {\n    const { value, bind, field, index } = params;\n    let newValue = field.multipleValues ? [...(bind.value || [])] : bind.value;\n\n    if (field.multipleValues) {\n        if (index >= 0) {\n            newValue[index] = value;\n        } else {\n            newValue = value;\n        }\n    } else {\n        newValue = value;\n    }\n\n    bind.onChange(newValue);\n};\n"]}

package/admin/components/ContentEntryForm/useBind.d.ts

@@ -1,14 +1,10 @@
-import { BindComponent as BaseBindComponent } from "@webiny/form";
-import { CmsEditorField } from "../../../types";
-interface BindComponent extends BaseBindComponent {
-    parentName?: string;
-}
+import { BindComponent, CmsEditorField } from "../../../types";
 interface UseBindProps {
     field: CmsEditorField;
     Bind: BindComponent;
 }
 export interface GetBindCallable {
-    (index?: number): any;
+    (index?: number): BindComponent;
 }
-export declare function useBind({ Bind: ParentBind, field }: UseBindProps): (index?: any) => any;
+export declare function useBind({ Bind: ParentBind, field }: UseBindProps): (index?: any) => BindComponent;
 export {};

package/admin/components/ContentEntryForm/useBind.js

@@ -29,6 +29,12 @@ export function useBind(_ref) {
     var defaultValue = field.multipleValues ? [] : undefined;
     var isMultipleValues = index === -1 && field.multipleValues;
     var inputValidators = isMultipleValues ? listValidators : validators;
+    /**
+     * TODO @ts-refactor
+     *
+     * TS is complaining about validators property because UseBindParams.validators cannot be single validator??????
+     */
+    // @ts-ignore
 
     memoizedBindComponents.current[name] = function UseBind(params) {
       var childName = params.name,

package/admin/components/ContentEntryForm/useBind.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useBind.tsx"],"names":["React","useRef","useCallback","cloneElement","createValidators","useBind","ParentBind","Bind","field","memoizedBindComponents","index","parentName","name","fieldId","undefined","filter","v","join","current","validators","validation","listValidators","listValidation","defaultValue","multipleValues","isMultipleValues","inputValidators","UseBind","params","childName","childValidators","children","bind","props","appendValue","newValue","onChange","value","prependValue","appendValues","newValues","removeValue","slice","form","validateInput"],"mappings":"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","sourcesContent":["/**\n * Figure out correct types for this and packages/app-headless-cms/src/admin/plugins/fieldRenderers/DynamicSection.tsx files\n * TODO @ts-refactor\n */\nimport React, { useRef, useCallback, cloneElement } from \"react\";\nimport { createValidators } from \"./functions/createValidators\";\nimport { BindComponent, CmsEditorField } from \"~/types\";\nimport { Validator } from \"@webiny/validation/types\";\n\ninterface UseBindProps {\n    field: CmsEditorField;\n    Bind: BindComponent;\n}\n\ninterface UseBindParams {\n    name?: string;\n    validators?: Validator[];\n    children?: any;\n}\n\nexport interface GetBindCallable {\n    (index?: number): BindComponent;\n}\n\nexport function useBind({ Bind: ParentBind, field }: UseBindProps) {\n    const memoizedBindComponents = useRef<Record<string, BindComponent>>({});\n\n    return useCallback(\n        (index = -1) => {\n            const { parentName } = ParentBind;\n            // If there's a parent name assigned to the given Bind component, we need to include it in the new field \"name\".\n            // This allows us to have nested fields (like \"object\" field with nested properties)\n            const name = [parentName, field.fieldId, index >= 0 ? index : undefined]\n                .filter(v => v !== undefined)\n                .join(\".\");\n\n            if (memoizedBindComponents.current[name]) {\n                return memoizedBindComponents.current[name];\n            }\n\n            const validators = createValidators(field.validation || []);\n            const listValidators = createValidators(field.listValidation || []);\n            const defaultValue: string[] | undefined = field.multipleValues ? [] : undefined;\n            const isMultipleValues = index === -1 && field.multipleValues;\n            const inputValidators = isMultipleValues ? listValidators : validators;\n            /**\n             * TODO @ts-refactor\n             *\n             * TS is complaining about validators property because UseBindParams.validators cannot be single validator??????\n             */\n            // @ts-ignore\n            memoizedBindComponents.current[name] = function UseBind(params: UseBindParams) {\n                const { name: childName, validators: childValidators, children } = params;\n                return (\n                    <ParentBind\n                        name={childName || name}\n                        validators={childValidators || inputValidators}\n                        defaultValue={index === -1 ? defaultValue : null}\n                    >\n                        {bind => {\n                            // Multiple-values functions below.\n                            const props = { ...bind };\n                            if (field.multipleValues && index === -1) {\n                                props.appendValue = (newValue: string) => {\n                                    bind.onChange([...bind.value, newValue]);\n                                };\n                                props.prependValue = (newValue: string) => {\n                                    bind.onChange([newValue, ...bind.value]);\n                                };\n                                props.appendValues = (newValues: string[]) => {\n                                    bind.onChange([...bind.value, ...newValues]);\n                                };\n\n                                props.removeValue = (index: number) => {\n                                    if (index < 0) {\n                                        return;\n                                    }\n                                    let value = bind.value;\n                                    value = [...value.slice(0, index), ...value.slice(index + 1)];\n\n                                    bind.onChange(value);\n\n                                    // To make sure the field is still valid, we must trigger validation.\n                                    bind.form.validateInput(field.fieldId);\n                                };\n                            }\n\n                            if (typeof children === \"function\") {\n                                return children(props);\n                            }\n\n                            return cloneElement(children, props);\n                        }}\n                    </ParentBind>\n                );\n            };\n\n            // We need to keep track of current field name, to support nested fields.\n            memoizedBindComponents.current[name].parentName = name;\n\n            return memoizedBindComponents.current[name];\n        },\n        [field.fieldId]\n    );\n}\n"]}

package/admin/components/ContentEntryForm/useContentEntryForm.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
 import { FormOnSubmit } from "@webiny/form";
-import { CmsEditorContentModel, CmsEditorFieldRendererPlugin } from "../../../types";
+import { CmsEditorContentEntry, CmsEditorContentModel, CmsEditorFieldRendererPlugin } from "../../../types";
 interface UseContentEntryForm {
     data: Record<string, any>;
     loading: boolean;
@@ -12,9 +12,7 @@ interface UseContentEntryForm {
 }
 export interface UseContentEntryFormParams {
     contentModel: CmsEditorContentModel;
-    entry?: {
-        [key: string]: any;
-    };
+    entry: Partial<CmsEditorContentEntry>;
     onChange?: FormOnSubmit;
     onSubmit?: FormOnSubmit;
     addEntryToListCache: boolean;

package/admin/components/ContentEntryForm/useContentEntryForm.js

@@ -107,7 +107,9 @@ export function useContentEntryForm(params) {
 
   var createContent = useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
-      var response, _response$data$conten, error, entry;
+      var _response$data;
+
+      var response, _ref3, error, entry;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -119,16 +121,25 @@ export function useContentEntryForm(params) {
                 variables: {
                   data: data
                 },
-                update: function update(cache, _ref2) {
-                  var data = _ref2.data;
-                  var _data$content = data.content,
-                      entry = _data$content.data,
-                      error = _data$content.error;
+                update: function update(cache, response) {
+                  if (!response.data) {
+                    showSnackbar("Missing response data in Create Entry.");
+                    return;
+                  }
+
+                  var data = response.data;
+
+                  var _ref2 = data.content || {},
+                      entry = _ref2.data,
+                      error = _ref2.error;
 
                   if (error) {
                     showSnackbar(error.message);
                     setInvalidFieldValues(error.data);
                     return;
+                  } else if (!entry) {
+                    showSnackbar("Missing entry data in update callback on Create Entry Response.");
+                    return;
                   }
 
                   resetInvalidFieldValues();
@@ -142,10 +153,10 @@ export function useContentEntryForm(params) {
             case 3:
               response = _context.sent;
               setLoading(false);
-              _response$data$conten = response.data.content, error = _response$data$conten.error, entry = _response$data$conten.data;
+              _ref3 = ((_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.content) || {}, error = _ref3.error, entry = _ref3.data;
 
               if (!error) {
-                _context.next = 10;
+                _context.next = 12;
                 break;
               }
 
@@ -153,7 +164,16 @@ export function useContentEntryForm(params) {
               setInvalidFieldValues(error.data);
               return _context.abrupt("return", null);
 
-            case 10:
+            case 12:
+              if (entry) {
+                _context.next = 15;
+                break;
+              }
+
+              showSnackbar("Missing entry data in Create Entry Response.");
+              return _context.abrupt("return", null);
+
+            case 15:
               resetInvalidFieldValues();
               showSnackbar("".concat(contentModel.name, " entry created successfully!"));
 
@@ -165,7 +185,7 @@ export function useContentEntryForm(params) {
 
               return _context.abrupt("return", entry);
 
-            case 14:
+            case 19:
             case "end":
               return _context.stop();
           }
@@ -178,7 +198,7 @@ export function useContentEntryForm(params) {
     };
   }(), [contentModel.modelId, listQueryVariables, params.onSubmit, params.addEntryToListCache]);
   var updateContent = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(revision, data) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(revision, data) {
       var response, error, entry;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
@@ -196,10 +216,20 @@ export function useContentEntryForm(params) {
             case 3:
               response = _context2.sent;
               setLoading(false);
+
+              if (response.data) {
+                _context2.next = 8;
+                break;
+              }
+
+              showSnackbar("Missing response data on Update Entry Response.");
+              return _context2.abrupt("return");
+
+            case 8:
               error = response.data.content.error;
 
               if (!error) {
-                _context2.next = 10;
+                _context2.next = 13;
                 break;
               }
 
@@ -207,13 +237,13 @@ export function useContentEntryForm(params) {
               setInvalidFieldValues(error.data);
               return _context2.abrupt("return", null);
 
-            case 10:
+            case 13:
               resetInvalidFieldValues();
               showSnackbar("Content saved successfully.");
               entry = response.data.content.data;
               return _context2.abrupt("return", entry);
 
-            case 14:
+            case 17:
             case "end":
               return _context2.stop();
           }
@@ -222,11 +252,11 @@ export function useContentEntryForm(params) {
     }));
 
     return function (_x2, _x3) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }(), [contentModel.modelId]);
   var createContentFrom = useCallback( /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(revision, formData) {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(revision, formData) {
       var response, _response$data$conten2, data, error;
 
       return _regeneratorRuntime.wrap(function _callee3$(_context3) {
@@ -240,16 +270,23 @@ export function useContentEntryForm(params) {
                   revision: revision,
                   data: formData
                 },
-                update: function update(cache, _ref5) {
-                  var data = _ref5.data;
-                  var _data$content2 = data.content,
-                      newRevision = _data$content2.data,
-                      error = _data$content2.error;
+                update: function update(cache, response) {
+                  if (!response.data) {
+                    showSnackbar("Missing data in update callback on Create From Entry Response.");
+                    return;
+                  }
+
+                  var _response$data$conten = response.data.content,
+                      newRevision = _response$data$conten.data,
+                      error = _response$data$conten.error;
 
                   if (error) {
                     showSnackbar(error.message);
                     setInvalidFieldValues(error.data);
                     return;
+                  } else if (!newRevision) {
+                    showSnackbar("Missing entry data in update callback on Create From Entry.");
+                    return;
                   }
 
                   resetInvalidFieldValues();
@@ -263,10 +300,20 @@ export function useContentEntryForm(params) {
             case 3:
               response = _context3.sent;
               setLoading(false);
+
+              if (response.data) {
+                _context3.next = 8;
+                break;
+              }
+
+              showSnackbar("Missing response data on Create From Entry Mutation.");
+              return _context3.abrupt("return");
+
+            case 8:
               _response$data$conten2 = response.data.content, data = _response$data$conten2.data, error = _response$data$conten2.error;
 
               if (!error) {
-                _context3.next = 10;
+                _context3.next = 13;
                 break;
               }
 
@@ -274,11 +321,11 @@ export function useContentEntryForm(params) {
               setInvalidFieldValues(error.data);
               return _context3.abrupt("return", null);
 
-            case 10:
+            case 13:
               resetInvalidFieldValues();
               return _context3.abrupt("return", data);
 
-            case 12:
+            case 15:
             case "end":
               return _context3.stop();
           }
@@ -287,7 +334,7 @@ export function useContentEntryForm(params) {
     }));
 
     return function (_x4, _x5) {
-      return _ref4.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }(), [contentModel.modelId, listQueryVariables]);
 
@@ -432,7 +479,9 @@ export function useContentEntryForm(params) {
     data: entry && entry.id ? entry : getDefaultValues(),
     loading: loading,
     setLoading: setLoading,
-    onChange: params.onChange,
+    onChange: params.onChange || function () {
+      return void 0;
+    },
     onSubmit: onSubmit,
     invalidFields: invalidFields,
     renderPlugins: renderPlugins