@webiny/app-headless-cms 5.33.2 → 5.33.3-beta.0

package/admin/components/ContentEntryForm/ContentEntryForm.js

@@ -63,13 +63,14 @@ var isDifferent = function isDifferent(value, compare) {
 var ContentEntryForm = function ContentEntryForm(_ref) {
   var onForm = _ref.onForm,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var formElementRef = (0, _react.useRef)(null);
   var contentModel = props.contentModel;
 
   var _useContentEntryForm = (0, _useContentEntryForm2.useContentEntryForm)(props),
       loading = _useContentEntryForm.loading,
       initialData = _useContentEntryForm.data,
-      _onChange = _useContentEntryForm.onChange,
-      _onSubmit = _useContentEntryForm.onSubmit,
+      onChange = _useContentEntryForm.onChange,
+      onSubmit = _useContentEntryForm.onSubmit,
       invalidFields = _useContentEntryForm.invalidFields;
 
   var _React$useState = _react.default.useState(false),
@@ -100,6 +101,13 @@ var ContentEntryForm = function ContentEntryForm(_ref) {
 
     onForm(ref.current);
   }, []);
+  (0, _react.useEffect)(function () {
+    if (!formElementRef.current) {
+      return;
+    }
+
+    formElementRef.current.scrollTo(0, 0);
+  }, [initialData.id, formElementRef.current]);
 
   var formRenderer = _plugins.plugins.byType("cms-content-form-renderer").find(function (pl) {
     return pl.modelId === contentModel.modelId;
@@ -134,33 +142,37 @@ var ContentEntryForm = function ContentEntryForm(_ref) {
       Bind: formRenderProps.Bind
     }));
   }, [formRenderer]);
+  var onFormSubmit = (0, _react.useCallback)(function (data, form) {
+    setIsDirty(false);
+    return onSubmit(data, form);
+  }, [onSubmit]);
+  var onFormInvalid = (0, _react.useCallback)(function () {
+    setIsDirty(true);
+    showSnackbar("You have fields that did not pass the validation. Please check the form.");
+  }, []);
+  var onFormChange = (0, _react.useCallback)(function (data, form) {
+    var different = isDifferent(data, initialData);
+
+    if (isDirty !== different) {
+      setIsDirty(different);
+    }
+
+    return onChange(data, form);
+  }, [onChange, initialData]);
   return /*#__PURE__*/_react.default.createElement(_form.Form, {
-    onChange: function onChange(data, form) {
-      var different = isDifferent(data, initialData);
-
-      if (isDirty !== different) {
-        setIsDirty(different);
-      }
-
-      return _onChange(data, form);
-    },
-    onSubmit: function onSubmit(data, form) {
-      setIsDirty(false);
-      return _onSubmit(data, form);
-    },
+    onChange: onFormChange,
+    onSubmit: onFormSubmit,
     data: initialData,
     ref: ref,
     invalidFields: invalidFields,
-    onInvalid: function onInvalid() {
-      setIsDirty(true);
-      showSnackbar("You have fields that did not pass the validation. Please check the form.");
-    }
+    onInvalid: onFormInvalid
   }, function (formProps) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouter.Prompt, {
       when: isDirty,
       message: "There are some unsaved changes! Are you sure you want to navigate away and discard all changes?"
     }), /*#__PURE__*/_react.default.createElement(FormWrapper, {
-      "data-testid": "cms-content-form"
+      "data-testid": "cms-content-form",
+      ref: formElementRef
     }, loading && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, null), formRenderer ? renderCustomLayout(formProps) : /*#__PURE__*/_react.default.createElement(_Fields.Fields, Object.assign({
       contentModel: contentModel,
       fields: contentModel.fields || [],

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

@@ -1 +1 @@
-{"version":3,"names":["FormWrapper","styled","height","overflow","omitTypename","key","value","undefined","stringify","JSON","isDifferent","compare","ContentEntryForm","onForm","props","contentModel","useContentEntryForm","loading","initialData","data","onChange","onSubmit","invalidFields","React","useState","isDirty","setIsDirty","useEffect","useSnackbar","showSnackbar","ref","useRef","current","formRenderer","plugins","byType","find","pl","modelId","renderCustomLayout","useCallback","formRenderProps","fields","reduce","acc","field","fieldId","Bind","render","form","different","formProps","layout"],"sources":["ContentEntryForm.tsx"],"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\";\nimport { Prompt } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin\";\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\nfunction omitTypename(key: string, value: string): string | undefined {\n    return key === \"__typename\" ? undefined : value;\n}\n\nconst stringify = (value: any): string => {\n    return JSON.stringify(value || {}, omitTypename);\n};\n\nconst isDifferent = (value: any, compare: any): boolean => {\n    if (!value && !compare) {\n        return false;\n    }\n    return stringify(value) !== stringify(compare);\n};\n\nexport const ContentEntryForm: React.FC<ContentEntryFormProps> = ({ onForm, ...props }) => {\n    const { contentModel } = props;\n    const {\n        loading,\n        data: initialData,\n        onChange,\n        onSubmit,\n        invalidFields\n    } = useContentEntryForm(props);\n\n    const [isDirty, setIsDirty] = React.useState<boolean>(false);\n    /**\n     * Reset isDirty when the loaded data changes.\n     */\n    useEffect(() => {\n        if (!isDirty) {\n            return;\n        }\n        setIsDirty(false);\n    }, [initialData]);\n\n    const { showSnackbar } = useSnackbar();\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={(data, form) => {\n                const different = isDifferent(data, initialData);\n                if (isDirty !== different) {\n                    setIsDirty(different);\n                }\n                return onChange(data, form);\n            }}\n            onSubmit={(data, form) => {\n                setIsDirty(false);\n                return onSubmit(data, form);\n            }}\n            data={initialData}\n            ref={ref}\n            invalidFields={invalidFields}\n            onInvalid={() => {\n                setIsDirty(true);\n                showSnackbar(\n                    \"You have fields that did not pass the validation. Please check the form.\"\n                );\n            }}\n        >\n            {formProps => {\n                return (\n                    <>\n                        <Prompt\n                            when={isDirty}\n                            message={\n                                \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\"\n                            }\n                        />\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                );\n            }}\n        </Form>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["FormWrapper","styled","height","overflow","omitTypename","key","value","undefined","stringify","JSON","isDifferent","compare","ContentEntryForm","onForm","props","formElementRef","useRef","contentModel","useContentEntryForm","loading","initialData","data","onChange","onSubmit","invalidFields","React","useState","isDirty","setIsDirty","useEffect","useSnackbar","showSnackbar","ref","current","scrollTo","id","formRenderer","plugins","byType","find","pl","modelId","renderCustomLayout","useCallback","formRenderProps","fields","reduce","acc","field","fieldId","Bind","render","onFormSubmit","form","onFormInvalid","onFormChange","different","formProps","layout"],"sources":["ContentEntryForm.tsx"],"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\";\nimport { Prompt } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin\";\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\nfunction omitTypename(key: string, value: string): string | undefined {\n    return key === \"__typename\" ? undefined : value;\n}\n\nconst stringify = (value: any): string => {\n    return JSON.stringify(value || {}, omitTypename);\n};\n\nconst isDifferent = (value: any, compare: any): boolean => {\n    if (!value && !compare) {\n        return false;\n    }\n    return stringify(value) !== stringify(compare);\n};\n\nexport const ContentEntryForm: React.FC<ContentEntryFormProps> = ({ onForm, ...props }) => {\n    const formElementRef = useRef<HTMLDivElement>(null);\n    const { contentModel } = props;\n    const {\n        loading,\n        data: initialData,\n        onChange,\n        onSubmit,\n        invalidFields\n    } = useContentEntryForm(props);\n\n    const [isDirty, setIsDirty] = React.useState<boolean>(false);\n    /**\n     * Reset isDirty when the loaded data changes.\n     */\n    useEffect(() => {\n        if (!isDirty) {\n            return;\n        }\n        setIsDirty(false);\n    }, [initialData]);\n\n    const { showSnackbar } = useSnackbar();\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    useEffect(() => {\n        if (!formElementRef.current) {\n            return;\n        }\n\n        formElementRef.current.scrollTo(0, 0);\n    }, [initialData.id, formElementRef.current]);\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    const onFormSubmit = useCallback(\n        (data, form) => {\n            setIsDirty(false);\n            return onSubmit(data, form);\n        },\n        [onSubmit]\n    );\n\n    const onFormInvalid = useCallback(() => {\n        setIsDirty(true);\n        showSnackbar(\"You have fields that did not pass the validation. Please check the form.\");\n    }, []);\n\n    const onFormChange = useCallback(\n        (data, form) => {\n            const different = isDifferent(data, initialData);\n            if (isDirty !== different) {\n                setIsDirty(different);\n            }\n            return onChange(data, form);\n        },\n        [onChange, initialData]\n    );\n\n    return (\n        <Form\n            onChange={onFormChange}\n            onSubmit={onFormSubmit}\n            data={initialData}\n            ref={ref}\n            invalidFields={invalidFields}\n            onInvalid={onFormInvalid}\n        >\n            {formProps => {\n                return (\n                    <>\n                        <Prompt\n                            when={isDirty}\n                            message={\n                                \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\"\n                            }\n                        />\n                        <FormWrapper data-testid={\"cms-content-form\"} ref={formElementRef}>\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                );\n            }}\n        </Form>\n    );\n};\n"],"mappings":"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"}

package/admin/components/FieldEditor/Field.js

@@ -53,7 +53,7 @@ var _useFieldEditor2 = require("./useFieldEditor");
 
 var _appAdmin = require("@webiny/app-admin");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 var t = _i18n.i18n.ns("app-headless-cms/admin/components/editor/field");
 
@@ -66,8 +66,12 @@ var FieldContainer = /*#__PURE__*/(0, _styled.default)("div", {
   justifyContent: "space-between",
   alignItems: "center"
 });
+var LowerCase = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "LowerCase",
+  target: "erv8xml1"
+})("text-transform:lowercase;");
 var Info = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "erv8xml1",
+  target: "erv8xml2",
   label: "Info"
 })({
   display: "flex",
@@ -78,7 +82,7 @@ var Info = /*#__PURE__*/(0, _styled.default)("div", {
   }
 });
 var Actions = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "erv8xml2",
+  target: "erv8xml3",
   label: "Actions"
 })({
   display: "flex",
@@ -122,7 +126,8 @@ var Field = function Field(props) {
       data = _useContentModelEdito.data;
 
   var _useFieldEditor = (0, _useFieldEditor2.useFieldEditor)(),
-      getFieldPlugin = _useFieldEditor.getFieldPlugin;
+      getFieldPlugin = _useFieldEditor.getFieldPlugin,
+      getFieldRendererPlugin = _useFieldEditor.getFieldRendererPlugin;
 
   var _useConfirmationDialo = (0, _appAdmin.useConfirmationDialog)({
     title: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Warning - You are trying to delete a locked field!"]))),
@@ -185,12 +190,14 @@ var Field = function Field(props) {
     return null;
   }
 
+  var rendererPlugin = getFieldRendererPlugin(field.renderer.name);
   var isTitleField = data && field.fieldId === data.titleFieldId && !parent;
+  var info = [rendererPlugin === null || rendererPlugin === void 0 ? void 0 : rendererPlugin.renderer.name, field.multipleValues ? "multiple values" : null, isTitleField ? "entry title" : null].filter(Boolean).join(", ");
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "subtitle1"
   }, field.label), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "caption"
-  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "(", t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["multiple values"]))), ")"), isTitleField && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "(", t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["entry title"]))), ")"))), /*#__PURE__*/_react.default.createElement(Actions, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(LowerCase, null, "(", info, ")"))), /*#__PURE__*/_react.default.createElement(Actions, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     "data-testid": "cms.editor.edit-field",
     icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
     onClick: function onClick() {
@@ -210,11 +217,11 @@ var Field = function Field(props) {
     onClick: setAsTitle
   }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     icon: /*#__PURE__*/_react.default.createElement(_title24px.ReactComponent, null)
-  })), t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["Use as title"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
+  })), t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Use as title"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
     onClick: onDelete
   }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, null)
-  })), t(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))))), /*#__PURE__*/_react.default.createElement("div", {
+  })), t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "field-extra"
   }, fieldPlugin.field.render && fieldPlugin.field.render({
     field: field,

package/admin/components/FieldEditor/Field.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","FieldContainer","styled","display","flexDirection","justifyContent","alignItems","Info","flex","lineHeight","Actions","menuStyles","css","width","right","left","opacity","pointerEvents","allowedTitleFieldTypes","isFieldAllowedToBeTitle","field","parent","multipleValues","includes","type","Field","props","onEdit","useSnackbar","showSnackbar","useContentModelEditor","setData","data","useFieldEditor","getFieldPlugin","useConfirmationDialog","title","message","showConfirmation","lockedFields","isLocked","some","lockedField","fieldId","storageId","onDelete","useCallback","setAsTitle","titleFieldId","response","error","fieldPlugin","editorFieldOptionPlugins","plugins","byType","isTitleField","label","map","pl","React","cloneElement","render","key","name","memo"],"sources":["Field.tsx"],"sourcesContent":["import React, { Fragment, useCallback } from \"react\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as EditIcon } from \"~/admin/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"~/admin/icons/title-24px.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"~/admin/icons/more_vert.svg\";\nimport { Menu, MenuItem } from \"@webiny/ui/Menu\";\nimport { plugins } from \"@webiny/plugins\";\nimport { CmsEditorField, CmsEditorFieldOptionPlugin } from \"~/types\";\nimport { ListItemGraphic } from \"@webiny/ui/List\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst FieldContainer = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\"\n});\n\nconst Info = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\",\n    \"> *\": {\n        flex: \"1 100%\",\n        lineHeight: \"150%\"\n    }\n});\n\nconst Actions = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"right\",\n    \"> *\": {\n        flex: \"1 100%\"\n    }\n});\n\nconst menuStyles = css({\n    width: 220,\n    right: -105,\n    left: \"auto !important\",\n    \".disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (field: CmsEditorField, parent?: CmsEditorField) => {\n    if (field.multipleValues || parent) {\n        return false;\n    } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n        return false;\n    }\n    return true;\n};\n\nexport interface FieldProps {\n    field: CmsEditorField;\n    onDelete: (field: CmsEditorField) => void;\n    onEdit: (field: CmsEditorField) => void;\n    parent?: CmsEditorField;\n}\nconst Field: React.FC<FieldProps> = props => {\n    const { field, onEdit, parent } = props;\n    const { showSnackbar } = useSnackbar();\n    const { setData, data } = useContentModelEditor();\n    const { getFieldPlugin } = useFieldEditor();\n\n    const { showConfirmation } = useConfirmationDialog({\n        title: t`Warning - You are trying to delete a locked field!`,\n        message: (\n            <>\n                <p>{t`You are about to delete a field which is used in the data storage`}</p>\n                <p>{t`All data in that field will be lost and there is no going back!`}</p>\n                <p>&nbsp;</p>\n                <p>{t`Are you sure you want to continue?`}</p>\n            </>\n        )\n    });\n    const lockedFields = data ? data.lockedFields || [] : [];\n    const isLocked = lockedFields.some(lockedField => lockedField.fieldId === field.storageId);\n\n    const onDelete = useCallback(() => {\n        if (!isLocked) {\n            props.onDelete(field);\n            return;\n        }\n        showConfirmation(() => {\n            props.onDelete(field);\n        });\n    }, [field.fieldId, lockedFields]);\n\n    const setAsTitle = useCallback(async (): Promise<void> => {\n        const response = await setData(data => {\n            return { ...data, titleFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Title field set successfully.`);\n    }, [field.fieldId, setData]);\n\n    const fieldPlugin = getFieldPlugin(field.type);\n    const editorFieldOptionPlugins =\n        plugins.byType<CmsEditorFieldOptionPlugin>(\"cms-editor-field-option\");\n\n    if (!fieldPlugin) {\n        return null;\n    }\n\n    const isTitleField = data && field.fieldId === data.titleFieldId && !parent;\n\n    return (\n        <Fragment>\n            <FieldContainer>\n                <Info>\n                    <Typography use={\"subtitle1\"}>{field.label}</Typography>\n                    <Typography use={\"caption\"}>\n                        {fieldPlugin.field.label}{\" \"}\n                        {field.multipleValues && <>({t`multiple values`})</>}\n                        {isTitleField && <>({t`entry title`})</>}\n                    </Typography>\n                </Info>\n                <Actions>\n                    <IconButton\n                        data-testid={\"cms.editor.edit-field\"}\n                        icon={<EditIcon />}\n                        onClick={() => onEdit(field)}\n                    />\n                    <Menu\n                        className={menuStyles}\n                        handle={<IconButton icon={<MoreVerticalIcon />} />}\n                    >\n                        {editorFieldOptionPlugins.map(pl =>\n                            React.cloneElement(pl.render(), { key: pl.name })\n                        )}\n                        {/* We only allow this action for top-level fields. */}\n                        <MenuItem\n                            disabled={!isFieldAllowedToBeTitle(field, parent)}\n                            onClick={setAsTitle}\n                        >\n                            <ListItemGraphic>\n                                <Icon icon={<TitleIcon />} />\n                            </ListItemGraphic>\n                            {t`Use as title`}\n                        </MenuItem>\n                        <MenuItem onClick={onDelete}>\n                            <ListItemGraphic>\n                                <Icon icon={<DeleteIcon />} />\n                            </ListItemGraphic>\n                            {t`Delete`}\n                        </MenuItem>\n                    </Menu>\n                </Actions>\n            </FieldContainer>\n            <div className={\"field-extra\"}>\n                {fieldPlugin.field.render && fieldPlugin.field.render({ field, data, setData })}\n            </div>\n        </Fragment>\n    );\n};\n\nexport default React.memo(Field);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,gDAAR,CAAV;;AAEA,IAAMC,cAAc,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACjCC,OAAO,EAAE,MADwB;EAEjCC,aAAa,EAAE,KAFkB;EAGjCC,cAAc,EAAE,eAHiB;EAIjCC,UAAU,EAAE;AAJqB,CAAjB,CAApB;AAOA,IAAMC,IAAI,oBAAGL,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACvBC,OAAO,EAAE,MADc;EAEvBC,aAAa,EAAE,QAFQ;EAGvB,OAAO;IACHI,IAAI,EAAE,QADH;IAEHC,UAAU,EAAE;EAFT;AAHgB,CAAjB,CAAV;AASA,IAAMC,OAAO,oBAAGR,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC1BC,OAAO,EAAE,MADiB;EAE1BC,aAAa,EAAE,KAFW;EAG1BE,UAAU,EAAE,OAHc;EAI1B,OAAO;IACHE,IAAI,EAAE;EADH;AAJmB,CAAjB,CAAb;AASA,IAAMG,UAAU,gBAAG,IAAAC,YAAA,EAAI;EACnBC,KAAK,EAAE,GADY;EAEnBC,KAAK,EAAE,CAAC,GAFW;EAGnBC,IAAI,EAAE,iBAHa;EAInB,aAAa;IACTC,OAAO,EAAE,GADA;IAETC,aAAa,EAAE;EAFN;AAJM,CAAJ,sBAAnB;AAUA,IAAMC,sBAAgC,GAAG,CAAC,MAAD,EAAS,QAAT,CAAzC;;AAEA,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,KAAD,EAAwBC,MAAxB,EAAoD;EAChF,IAAID,KAAK,CAACE,cAAN,IAAwBD,MAA5B,EAAoC;IAChC,OAAO,KAAP;EACH,CAFD,MAEO,IAAIH,sBAAsB,CAACK,QAAvB,CAAgCH,KAAK,CAACI,IAAtC,MAAgD,KAApD,EAA2D;IAC9D,OAAO,KAAP;EACH;;EACD,OAAO,IAAP;AACH,CAPD;;AAeA,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B,CAAAC,KAAK,EAAI;EACzC,IAAQN,KAAR,GAAkCM,KAAlC,CAAQN,KAAR;EAAA,IAAeO,MAAf,GAAkCD,KAAlC,CAAeC,MAAf;EAAA,IAAuBN,MAAvB,GAAkCK,KAAlC,CAAuBL,MAAvB;;EACA,mBAAyB,IAAAO,yBAAA,GAAzB;EAAA,IAAQC,YAAR,gBAAQA,YAAR;;EACA,4BAA0B,IAAAC,4CAAA,GAA1B;EAAA,IAAQC,OAAR,yBAAQA,OAAR;EAAA,IAAiBC,IAAjB,yBAAiBA,IAAjB;;EACA,sBAA2B,IAAAC,+BAAA,GAA3B;EAAA,IAAQC,cAAR,mBAAQA,cAAR;;EAEA,4BAA6B,IAAAC,+BAAA,EAAsB;IAC/CC,KAAK,EAAEtC,CAAF,qIAD0C;IAE/CuC,OAAO,eACH,yEACI,wCAAIvC,CAAJ,uJADJ,eAEI,wCAAIA,CAAJ,qJAFJ,eAGI,+CAHJ,eAII,wCAAIA,CAAJ,wHAJJ;EAH2C,CAAtB,CAA7B;EAAA,IAAQwC,gBAAR,yBAAQA,gBAAR;;EAWA,IAAMC,YAAY,GAAGP,IAAI,GAAGA,IAAI,CAACO,YAAL,IAAqB,EAAxB,GAA6B,EAAtD;EACA,IAAMC,QAAQ,GAAGD,YAAY,CAACE,IAAb,CAAkB,UAAAC,WAAW;IAAA,OAAIA,WAAW,CAACC,OAAZ,KAAwBvB,KAAK,CAACwB,SAAlC;EAAA,CAA7B,CAAjB;EAEA,IAAMC,QAAQ,GAAG,IAAAC,kBAAA,EAAY,YAAM;IAC/B,IAAI,CAACN,QAAL,EAAe;MACXd,KAAK,CAACmB,QAAN,CAAezB,KAAf;MACA;IACH;;IACDkB,gBAAgB,CAAC,YAAM;MACnBZ,KAAK,CAACmB,QAAN,CAAezB,KAAf;IACH,CAFe,CAAhB;EAGH,CARgB,EAQd,CAACA,KAAK,CAACuB,OAAP,EAAgBJ,YAAhB,CARc,CAAjB;EAUA,IAAMQ,UAAU,GAAG,IAAAD,kBAAA,uGAAY;IAAA;IAAA;MAAA;QAAA;UAAA;YAAA;YAAA,OACJf,OAAO,CAAC,UAAAC,IAAI,EAAI;cACnC,mEAAYA,IAAZ;gBAAkBgB,YAAY,EAAE5B,KAAK,CAACuB;cAAtC;YACH,CAF6B,CADH;;UAAA;YACrBM,QADqB;;YAAA,MAKvBA,QAAQ,IAAIA,QAAQ,CAACC,KALE;cAAA;cAAA;YAAA;;YAAA,iCAMhBrB,YAAY,CAACoB,QAAQ,CAACC,KAAT,CAAeb,OAAhB,CANI;;UAAA;YAS3BR,YAAY,CAAC/B,CAAD,mHAAZ;;UAT2B;UAAA;YAAA;QAAA;MAAA;IAAA;EAAA,CAAZ,IAUhB,CAACsB,KAAK,CAACuB,OAAP,EAAgBZ,OAAhB,CAVgB,CAAnB;EAYA,IAAMoB,WAAW,GAAGjB,cAAc,CAACd,KAAK,CAACI,IAAP,CAAlC;;EACA,IAAM4B,wBAAwB,GAC1BC,gBAAA,CAAQC,MAAR,CAA2C,yBAA3C,CADJ;;EAGA,IAAI,CAACH,WAAL,EAAkB;IACd,OAAO,IAAP;EACH;;EAED,IAAMI,YAAY,GAAGvB,IAAI,IAAIZ,KAAK,CAACuB,OAAN,KAAkBX,IAAI,CAACgB,YAA/B,IAA+C,CAAC3B,MAArE;EAEA,oBACI,6BAAC,eAAD,qBACI,6BAAC,cAAD,qBACI,6BAAC,IAAD,qBACI,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,GAA+BD,KAAK,CAACoC,KAArC,CADJ,eAEI,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,GACKL,WAAW,CAAC/B,KAAZ,CAAkBoC,KADvB,EAC8B,GAD9B,EAEKpC,KAAK,CAACE,cAAN,iBAAwB,iEAAIxB,CAAJ,0GAF7B,EAGKyD,YAAY,iBAAI,iEAAIzD,CAAJ,sGAHrB,CAFJ,CADJ,eASI,6BAAC,OAAD,qBACI,6BAAC,kBAAD;IACI,eAAa,uBADjB;IAEI,IAAI,eAAE,6BAAC,oBAAD,OAFV;IAGI,OAAO,EAAE;MAAA,OAAM6B,MAAM,CAACP,KAAD,CAAZ;IAAA;EAHb,EADJ,eAMI,6BAAC,UAAD;IACI,SAAS,EAAET,UADf;IAEI,MAAM,eAAE,6BAAC,kBAAD;MAAY,IAAI,eAAE,6BAAC,yBAAD;IAAlB;EAFZ,GAIKyC,wBAAwB,CAACK,GAAzB,CAA6B,UAAAC,EAAE;IAAA,oBAC5BC,cAAA,CAAMC,YAAN,CAAmBF,EAAE,CAACG,MAAH,EAAnB,EAAgC;MAAEC,GAAG,EAAEJ,EAAE,CAACK;IAAV,CAAhC,CAD4B;EAAA,CAA/B,CAJL,eAQI,6BAAC,cAAD;IACI,QAAQ,EAAE,CAAC5C,uBAAuB,CAACC,KAAD,EAAQC,MAAR,CADtC;IAEI,OAAO,EAAE0B;EAFb,gBAII,6BAAC,qBAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,yBAAD;EAAZ,EADJ,CAJJ,EAOKjD,CAPL,kGARJ,eAiBI,6BAAC,cAAD;IAAU,OAAO,EAAE+C;EAAnB,gBACI,6BAAC,qBAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,sBAAD;EAAZ,EADJ,CADJ,EAIK/C,CAJL,4FAjBJ,CANJ,CATJ,CADJ,eA0CI;IAAK,SAAS,EAAE;EAAhB,GACKqD,WAAW,CAAC/B,KAAZ,CAAkByC,MAAlB,IAA4BV,WAAW,CAAC/B,KAAZ,CAAkByC,MAAlB,CAAyB;IAAEzC,KAAK,EAALA,KAAF;IAASY,IAAI,EAAJA,IAAT;IAAeD,OAAO,EAAPA;EAAf,CAAzB,CADjC,CA1CJ,CADJ;AAgDH,CApGD;;4BAsGe4B,cAAA,CAAMK,IAAN,CAAWvC,KAAX,C"}
+{"version":3,"names":["t","i18n","ns","FieldContainer","styled","display","flexDirection","justifyContent","alignItems","LowerCase","Info","flex","lineHeight","Actions","menuStyles","css","width","right","left","opacity","pointerEvents","allowedTitleFieldTypes","isFieldAllowedToBeTitle","field","parent","multipleValues","includes","type","Field","props","onEdit","useSnackbar","showSnackbar","useContentModelEditor","setData","data","useFieldEditor","getFieldPlugin","getFieldRendererPlugin","useConfirmationDialog","title","message","showConfirmation","lockedFields","isLocked","some","lockedField","fieldId","storageId","onDelete","useCallback","setAsTitle","titleFieldId","response","error","fieldPlugin","editorFieldOptionPlugins","plugins","byType","rendererPlugin","renderer","name","isTitleField","info","filter","Boolean","join","label","map","pl","React","cloneElement","render","key","memo"],"sources":["Field.tsx"],"sourcesContent":["import React, { Fragment, useCallback } from \"react\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as EditIcon } from \"~/admin/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"~/admin/icons/title-24px.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"~/admin/icons/more_vert.svg\";\nimport { Menu, MenuItem } from \"@webiny/ui/Menu\";\nimport { plugins } from \"@webiny/plugins\";\nimport { CmsEditorField, CmsEditorFieldOptionPlugin } from \"~/types\";\nimport { ListItemGraphic } from \"@webiny/ui/List\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst FieldContainer = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\"\n});\n\nconst LowerCase = styled.span`\n    text-transform: lowercase;\n`;\n\nconst Info = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\",\n    \"> *\": {\n        flex: \"1 100%\",\n        lineHeight: \"150%\"\n    }\n});\n\nconst Actions = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"right\",\n    \"> *\": {\n        flex: \"1 100%\"\n    }\n});\n\nconst menuStyles = css({\n    width: 220,\n    right: -105,\n    left: \"auto !important\",\n    \".disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (field: CmsEditorField, parent?: CmsEditorField) => {\n    if (field.multipleValues || parent) {\n        return false;\n    } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n        return false;\n    }\n    return true;\n};\n\nexport interface FieldProps {\n    field: CmsEditorField;\n    onDelete: (field: CmsEditorField) => void;\n    onEdit: (field: CmsEditorField) => void;\n    parent?: CmsEditorField;\n}\nconst Field: React.FC<FieldProps> = props => {\n    const { field, onEdit, parent } = props;\n    const { showSnackbar } = useSnackbar();\n    const { setData, data } = useContentModelEditor();\n    const { getFieldPlugin, getFieldRendererPlugin } = useFieldEditor();\n\n    const { showConfirmation } = useConfirmationDialog({\n        title: t`Warning - You are trying to delete a locked field!`,\n        message: (\n            <>\n                <p>{t`You are about to delete a field which is used in the data storage`}</p>\n                <p>{t`All data in that field will be lost and there is no going back!`}</p>\n                <p>&nbsp;</p>\n                <p>{t`Are you sure you want to continue?`}</p>\n            </>\n        )\n    });\n    const lockedFields = data ? data.lockedFields || [] : [];\n    const isLocked = lockedFields.some(lockedField => lockedField.fieldId === field.storageId);\n\n    const onDelete = useCallback(() => {\n        if (!isLocked) {\n            props.onDelete(field);\n            return;\n        }\n        showConfirmation(() => {\n            props.onDelete(field);\n        });\n    }, [field.fieldId, lockedFields]);\n\n    const setAsTitle = useCallback(async (): Promise<void> => {\n        const response = await setData(data => {\n            return { ...data, titleFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Title field set successfully.`);\n    }, [field.fieldId, setData]);\n\n    const fieldPlugin = getFieldPlugin(field.type);\n    const editorFieldOptionPlugins =\n        plugins.byType<CmsEditorFieldOptionPlugin>(\"cms-editor-field-option\");\n\n    if (!fieldPlugin) {\n        return null;\n    }\n\n    const rendererPlugin = getFieldRendererPlugin(field.renderer.name);\n    const isTitleField = data && field.fieldId === data.titleFieldId && !parent;\n\n    const info = [\n        rendererPlugin?.renderer.name,\n        field.multipleValues ? \"multiple values\" : null,\n        isTitleField ? \"entry title\" : null\n    ]\n        .filter(Boolean)\n        .join(\", \");\n\n    return (\n        <Fragment>\n            <FieldContainer>\n                <Info>\n                    <Typography use={\"subtitle1\"}>{field.label}</Typography>\n                    <Typography use={\"caption\"}>\n                        {fieldPlugin.field.label} {field.multipleValues && <></>}\n                        <LowerCase>({info})</LowerCase>\n                    </Typography>\n                </Info>\n                <Actions>\n                    <IconButton\n                        data-testid={\"cms.editor.edit-field\"}\n                        icon={<EditIcon />}\n                        onClick={() => onEdit(field)}\n                    />\n                    <Menu\n                        className={menuStyles}\n                        handle={<IconButton icon={<MoreVerticalIcon />} />}\n                    >\n                        {editorFieldOptionPlugins.map(pl =>\n                            React.cloneElement(pl.render(), { key: pl.name })\n                        )}\n                        {/* We only allow this action for top-level fields. */}\n                        <MenuItem\n                            disabled={!isFieldAllowedToBeTitle(field, parent)}\n                            onClick={setAsTitle}\n                        >\n                            <ListItemGraphic>\n                                <Icon icon={<TitleIcon />} />\n                            </ListItemGraphic>\n                            {t`Use as title`}\n                        </MenuItem>\n                        <MenuItem onClick={onDelete}>\n                            <ListItemGraphic>\n                                <Icon icon={<DeleteIcon />} />\n                            </ListItemGraphic>\n                            {t`Delete`}\n                        </MenuItem>\n                    </Menu>\n                </Actions>\n            </FieldContainer>\n            <div className={\"field-extra\"}>\n                {fieldPlugin.field.render && fieldPlugin.field.render({ field, data, setData })}\n            </div>\n        </Fragment>\n    );\n};\n\nexport default React.memo(Field);\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { CmsEditorField, CmsEditorFieldId, CmsEditorFieldsLayout, CmsEditorFieldTypePlugin, FieldLayoutPosition } from "../../../types";
+import { CmsEditorField, CmsEditorFieldId, CmsEditorFieldRendererPlugin, CmsEditorFieldsLayout, CmsEditorFieldTypePlugin, FieldLayoutPosition } from "../../../types";
 import { FieldEditorProps } from "./FieldEditor";
 import { DragObjectWithType, DragSourceMonitor } from "react-dnd";
 interface DropTarget {
@@ -42,6 +42,9 @@ interface GetFieldPluginCallable {
 interface GetFieldCallable {
     (query: GetFieldParams): CmsEditorField | undefined;
 }
+interface GetFieldRendererCallable {
+    (rendererName: string): CmsEditorFieldRendererPlugin | undefined;
+}
 interface OnFieldDropCallable {
     (source: Partial<DragSource>, target: DropTarget): void;
 }
@@ -77,6 +80,7 @@ export interface FieldEditorContextValue {
     getFieldsInLayout: GetFieldsInLayoutCallable;
     getFieldPlugin: GetFieldPluginCallable;
     getField: GetFieldCallable;
+    getFieldRendererPlugin: GetFieldRendererCallable;
     editField: (field: CmsEditorField | null) => void;
     field: CmsEditorField | null;
     parent?: CmsEditorField;

package/admin/components/FieldEditor/FieldEditorContext.js

@@ -229,6 +229,12 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
       return plugin.field.type === type;
     });
   };
+
+  var getFieldRendererPlugin = function getFieldRendererPlugin(name) {
+    return _plugins.plugins.byType("cms-editor-field-renderer").find(function (plugin) {
+      return plugin.renderer.rendererName === name;
+    });
+  };
   /**
    * Checks if field of given type already exists in the list of fields.
    */
@@ -386,6 +392,7 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
     depth: depth,
     getFieldsInLayout: getFieldsInLayout,
     getFieldPlugin: getFieldPlugin,
+    getFieldRendererPlugin: getFieldRendererPlugin,
     getField: getField,
     editField: editField,
     field: state.field,

package/admin/components/FieldEditor/FieldEditorContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["FieldEditorContext","React","createContext","field","maxGenerateIdIterations","generateFieldId","layout","id","generateAlphaNumericLowerCaseId","iteration","includes","Error","FieldEditorProvider","parent","fields","onChange","children","depth","editor","useFieldEditor","useState","dropTarget","row","index","state","setState","useDeepCompareEffect","editField","useCallback","onDropTarget","fieldId","onFieldDrop","source","pos","type","fieldType","parentId","forEach","insertField","position","undefined","moveRow","moveField","plugin","getFieldPlugin","createField","onEndDrag","monitor","didDrop","getDropResult","removeFields","deleteField","getFieldsInLayout","filter","arr","length","map","getField","Boolean","plugins","byType","find","query","key","flat","fieldPlugin","prev","next","concat","utils","data","destination","updateField","i","dot","set","noConflict","isVisible","item","sameParent","draggedFields","push","some","f","join","value"],"sources":["FieldEditorContext.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport dot from \"dot-prop-immutable\";\nimport useDeepCompareEffect from \"use-deep-compare-effect\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldId,\n    CmsEditorFieldsLayout,\n    CmsEditorFieldTypePlugin,\n    FieldLayoutPosition\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport * as utils from \"./utils\";\nimport { FieldEditorProps } from \"./FieldEditor\";\nimport { DragObjectWithType, DragSourceMonitor } from \"react-dnd\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\n\ninterface DropTarget {\n    row: number;\n    index: number | null;\n}\n\ninterface Position {\n    row: number;\n    index: number;\n}\n\nexport interface DragSource extends DragObjectWithType {\n    parent?: string;\n    pos?: Partial<Position>;\n    type: \"row\" | \"field\" | \"newField\";\n    fieldType?: string;\n    field?: CmsEditorField | null;\n    fields?: CmsEditorField[];\n}\n\n/**\n * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types\n */\ninterface GetFieldParams {\n    id?: string;\n    fieldId?: string;\n}\ninterface InsertFieldParams {\n    field: CmsEditorField;\n    position: FieldLayoutPosition;\n}\ninterface MoveFieldParams {\n    field: CmsEditorFieldId | CmsEditorField;\n    position: FieldLayoutPosition;\n}\ninterface GetFieldsInLayoutCallable {\n    (): CmsEditorField[][];\n}\ninterface GetFieldPluginCallable {\n    (type: string): CmsEditorFieldTypePlugin | undefined;\n}\ninterface GetFieldCallable {\n    (query: GetFieldParams): CmsEditorField | undefined;\n}\ninterface OnFieldDropCallable {\n    (source: Partial<DragSource>, target: DropTarget): void;\n}\ninterface InsertFieldCallable {\n    (params: InsertFieldParams): void;\n}\ninterface MoveFieldCallable {\n    (params: MoveFieldParams): void;\n}\ninterface OnEndDragCallable {\n    (item: DragSource, monitor: DragSourceMonitor): void;\n}\ninterface MoveRowCallable {\n    (source: number, destination: number): void;\n}\ninterface UpdateFieldCallable {\n    (field: Pick<CmsEditorField, \"id\">): void;\n}\ninterface DeleteFieldCallable {\n    (field: Pick<CmsEditorField, \"id\">): void;\n}\ninterface IsVisibleCallable {\n    (item: DragSource): boolean;\n}\ninterface NoConflictCallable {\n    (cb?: IsVisibleCallable): (item: DragSource) => boolean;\n}\nexport interface FieldEditorContextValue {\n    fields: CmsEditorField[][];\n    noConflict: NoConflictCallable;\n    layout: CmsEditorFieldsLayout;\n    onChange?: (data: any) => void;\n    getFieldsInLayout: GetFieldsInLayoutCallable;\n    getFieldPlugin: GetFieldPluginCallable;\n    getField: GetFieldCallable;\n    editField: (field: CmsEditorField | null) => void;\n    field: CmsEditorField | null;\n    parent?: CmsEditorField;\n    depth: number;\n    dropTarget: DropTarget;\n    onFieldDrop: OnFieldDropCallable;\n    onEndDrag: OnEndDragCallable;\n    insertField: InsertFieldCallable;\n    moveField: MoveFieldCallable;\n    moveRow: MoveRowCallable;\n    updateField: UpdateFieldCallable;\n    deleteField: DeleteFieldCallable;\n}\n\ninterface FieldEditorProviderProps extends FieldEditorProps {\n    children: React.ReactElement;\n}\n\nexport const FieldEditorContext = React.createContext<FieldEditorContextValue>(\n    /**\n     * Safe to cast.\n     */\n    {\n        field: null\n    } as unknown as FieldEditorContextValue\n);\n/**\n * We try to generate the random id string but with the check that it does not exist already.\n * Chances that the same string exists are quite small, but let's check it anyway.\n *\n * In most cases, there will be no iterations anyway...\n */\nconst maxGenerateIdIterations = 100;\nconst generateFieldId = (layout: string[]): string => {\n    let id = generateAlphaNumericLowerCaseId(8);\n\n    let iteration = 0;\n    while (layout.includes(id) && iteration < maxGenerateIdIterations) {\n        id = generateAlphaNumericLowerCaseId(8);\n        iteration++;\n    }\n    if (iteration >= maxGenerateIdIterations) {\n        throw new Error(`Could not generate field ID in ${maxGenerateIdIterations} iterations.`);\n    }\n    return id;\n};\n\ninterface State {\n    layout: CmsEditorFieldsLayout;\n    fields: CmsEditorField[];\n    field: CmsEditorField | null;\n    dropTarget: DropTarget;\n}\nexport const FieldEditorProvider: React.FC<FieldEditorProviderProps> = ({\n    parent,\n    fields,\n    layout,\n    onChange,\n    children\n}) => {\n    // We need to determine depth of this provider so we can render drop zones with correct z-indexes.\n    let depth = 0;\n    try {\n        const editor = useFieldEditor();\n        depth = editor.depth + 1;\n    } catch {\n        // There's no parent provider, so this is the top-level one.\n    }\n\n    const [state, setState] = useState<State>({\n        layout,\n        fields,\n        field: null,\n        dropTarget: {\n            row: -1,\n            index: null\n        }\n    });\n\n    useDeepCompareEffect(() => {\n        onChange({ fields: state.fields, layout: state.layout });\n    }, [state.fields, state.layout]);\n\n    const editField = useCallback((field: CmsEditorField | null) => {\n        setState(state => ({ ...state, field }));\n    }, []);\n\n    const onDropTarget = {\n        dropTarget: parent ? parent.fieldId : null\n    };\n\n    const onFieldDrop = useCallback<OnFieldDropCallable>((source, dropTarget) => {\n        const { pos, type, fieldType, field, fields = [] } = source;\n\n        const parentId = parent ? parent.fieldId : null;\n\n        if (type === \"row\") {\n            if (parentId !== source.parent) {\n                // We're dragging an existing row from another fieldset\n                fields.forEach((field, index) => {\n                    insertField({\n                        field,\n                        position: {\n                            row: dropTarget.row,\n                            index: index === 0 ? null : index\n                        }\n                    });\n                });\n            } else if (pos && pos.row !== undefined) {\n                // We're dragging a row within the same fieldset\n                moveRow(pos.row, dropTarget.row);\n            }\n\n            return onDropTarget;\n        }\n\n        // If source pos is set, we are moving an existing field.\n        if (pos) {\n            if (!field) {\n                return onDropTarget;\n            }\n            if (parentId !== source.parent) {\n                // We're dragging an existing field from another fieldset\n                insertField({ field, position: dropTarget });\n            } else {\n                // We're dragging a field within the same fieldset\n                moveField({ field, position: dropTarget });\n            }\n            return onDropTarget;\n        }\n\n        if (!fieldType) {\n            return null;\n        }\n        const plugin = getFieldPlugin(fieldType);\n        if (!plugin) {\n            return null;\n        }\n        /**\n         * TODO @ts-refactor figure out better type for this.\n         */\n        editField(plugin.field.createField() as CmsEditorField);\n        setState(state => ({\n            ...state,\n            dropTarget\n        }));\n        return null;\n    }, []);\n\n    const onEndDrag: OnEndDragCallable = ({ type, field, fields }, monitor) => {\n        if (!monitor.didDrop()) {\n            return;\n        }\n\n        // Check if we dropped outside of the source fieldset, and if yes, remove the field from the original parent.\n        const { dropTarget } = monitor.getDropResult();\n        const parentId = parent ? parent.fieldId : null;\n        if (dropTarget === parentId) {\n            return;\n        }\n\n        const removeFields = type === \"row\" ? fields || [] : field ? [field] : [];\n        removeFields.forEach(field => deleteField(field));\n    };\n\n    const getFieldsInLayout: GetFieldsInLayoutCallable = () => {\n        // Replace every field ID with actual field object.\n        return state.layout\n            .filter(arr => arr.length)\n            .map(row => {\n                return row\n                    .map(id => {\n                        return getField({ id });\n                    })\n                    .filter(Boolean);\n            })\n            .filter(row => {\n                return row.length > 0;\n            }) as CmsEditorField[][];\n    };\n\n    /**\n     * Return field plugin.\n     */\n    const getFieldPlugin: GetFieldPluginCallable = type => {\n        return plugins\n            .byType<CmsEditorFieldTypePlugin>(\"cms-editor-field-type\")\n            .find(plugin => plugin.field.type === type);\n    };\n\n    /**\n     * Checks if field of given type already exists in the list of fields.\n     */\n    const getField: GetFieldCallable = query => {\n        return state.fields.find(field => {\n            for (const key in query) {\n                if (!(key in field)) {\n                    return false;\n                }\n                // TODO @ts-refactor figure if there is a way to fix this.\n                // @ts-ignore\n                if (field[key] !== query[key]) {\n                    return false;\n                }\n            }\n\n            return true;\n        });\n    };\n\n    /**\n     * Inserts a new field into the target position.\n     */\n    const insertField: InsertFieldCallable = ({ field, position }) => {\n        if (!field.id) {\n            field.id = generateFieldId(layout.flat());\n        }\n\n        if (!field.type) {\n            throw new Error(`Field \"type\" missing.`);\n        }\n\n        const fieldPlugin = getFieldPlugin(field.type);\n        if (!fieldPlugin) {\n            throw new Error(`Invalid field \"type\".`);\n        }\n\n        setState(prev => {\n            const next: State = {\n                ...prev,\n                fields: (prev.fields || []).concat(field)\n            };\n\n            // Move field to position where it was dropped.\n            return utils.moveField({ field, position, data: next });\n        });\n    };\n\n    /**\n     * Moves field to the given target position.\n     */\n    const moveField: MoveFieldCallable = ({ field, position }) => {\n        setState(data => {\n            return utils.moveField<State>({ field, position, data });\n        });\n    };\n\n    /**\n     * Moves row to a destination row.\n     */\n    const moveRow: MoveRowCallable = (source, destination) => {\n        setState(data => {\n            return utils.moveRow({ data, source, destination });\n        });\n    };\n\n    /**\n     * Updates field.\n     */\n    const updateField: UpdateFieldCallable = field => {\n        setState(data => {\n            for (let i = 0; i < data.fields.length; i++) {\n                if (data.fields[i].id === field.id) {\n                    return dot.set(data, `fields.${i}`, field);\n                }\n            }\n            return data;\n        });\n    };\n\n    /**\n     * Deletes a field (both from the list of field and the layout).\n     */\n    const deleteField: DeleteFieldCallable = field => {\n        setState(data => {\n            return utils.deleteField({ field, data });\n        });\n    };\n\n    const noConflict: NoConflictCallable = useCallback(\n        (isVisible?: IsVisibleCallable) => item => {\n            const sameParent = item.parent === onDropTarget.dropTarget;\n            const draggedFields: string[] = [];\n            switch (item.type) {\n                case \"row\":\n                    (item.fields || []).forEach(field => draggedFields.push(field.fieldId));\n                    break;\n                case \"field\":\n                    if (!item.field) {\n                        break;\n                    }\n                    draggedFields.push(item.field.fieldId);\n                    break;\n                default:\n                    break;\n            }\n\n            if (\n                draggedFields.length &&\n                !sameParent &&\n                fields.some(field => draggedFields.includes(field.fieldId))\n            ) {\n                return false;\n            }\n\n            return typeof isVisible === \"function\" ? isVisible(item) : true;\n        },\n        [fields.map(f => f.fieldId).join(\".\")]\n    );\n\n    const value = {\n        parent,\n        depth,\n        getFieldsInLayout,\n        getFieldPlugin,\n        getField,\n        editField,\n        field: state.field,\n        dropTarget: state.dropTarget,\n        onFieldDrop,\n        onEndDrag,\n        insertField,\n        moveField,\n        moveRow,\n        updateField,\n        deleteField,\n        fields: getFieldsInLayout(),\n        noConflict,\n        layout: state.layout\n    };\n\n    return <FieldEditorContext.Provider value={value}>{children}</FieldEditorContext.Provider>;\n};\n"],"mappings":"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"}
+{"version":3,"names":["FieldEditorContext","React","createContext","field","maxGenerateIdIterations","generateFieldId","layout","id","generateAlphaNumericLowerCaseId","iteration","includes","Error","FieldEditorProvider","parent","fields","onChange","children","depth","editor","useFieldEditor","useState","dropTarget","row","index","state","setState","useDeepCompareEffect","editField","useCallback","onDropTarget","fieldId","onFieldDrop","source","pos","type","fieldType","parentId","forEach","insertField","position","undefined","moveRow","moveField","plugin","getFieldPlugin","createField","onEndDrag","monitor","didDrop","getDropResult","removeFields","deleteField","getFieldsInLayout","filter","arr","length","map","getField","Boolean","plugins","byType","find","getFieldRendererPlugin","name","renderer","rendererName","query","key","flat","fieldPlugin","prev","next","concat","utils","data","destination","updateField","i","dot","set","noConflict","isVisible","item","sameParent","draggedFields","push","some","f","join","value"],"sources":["FieldEditorContext.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport dot from \"dot-prop-immutable\";\nimport useDeepCompareEffect from \"use-deep-compare-effect\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldId,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldsLayout,\n    CmsEditorFieldTypePlugin,\n    FieldLayoutPosition\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport * as utils from \"./utils\";\nimport { FieldEditorProps } from \"./FieldEditor\";\nimport { DragObjectWithType, DragSourceMonitor } from \"react-dnd\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\n\ninterface DropTarget {\n    row: number;\n    index: number | null;\n}\n\ninterface Position {\n    row: number;\n    index: number;\n}\n\nexport interface DragSource extends DragObjectWithType {\n    parent?: string;\n    pos?: Partial<Position>;\n    type: \"row\" | \"field\" | \"newField\";\n    fieldType?: string;\n    field?: CmsEditorField | null;\n    fields?: CmsEditorField[];\n}\n\n/**\n * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types\n */\ninterface GetFieldParams {\n    id?: string;\n    fieldId?: string;\n}\ninterface InsertFieldParams {\n    field: CmsEditorField;\n    position: FieldLayoutPosition;\n}\ninterface MoveFieldParams {\n    field: CmsEditorFieldId | CmsEditorField;\n    position: FieldLayoutPosition;\n}\ninterface GetFieldsInLayoutCallable {\n    (): CmsEditorField[][];\n}\ninterface GetFieldPluginCallable {\n    (type: string): CmsEditorFieldTypePlugin | undefined;\n}\ninterface GetFieldCallable {\n    (query: GetFieldParams): CmsEditorField | undefined;\n}\ninterface GetFieldRendererCallable {\n    (rendererName: string): CmsEditorFieldRendererPlugin | undefined;\n}\ninterface OnFieldDropCallable {\n    (source: Partial<DragSource>, target: DropTarget): void;\n}\ninterface InsertFieldCallable {\n    (params: InsertFieldParams): void;\n}\ninterface MoveFieldCallable {\n    (params: MoveFieldParams): void;\n}\ninterface OnEndDragCallable {\n    (item: DragSource, monitor: DragSourceMonitor): void;\n}\ninterface MoveRowCallable {\n    (source: number, destination: number): void;\n}\ninterface UpdateFieldCallable {\n    (field: Pick<CmsEditorField, \"id\">): void;\n}\ninterface DeleteFieldCallable {\n    (field: Pick<CmsEditorField, \"id\">): void;\n}\ninterface IsVisibleCallable {\n    (item: DragSource): boolean;\n}\ninterface NoConflictCallable {\n    (cb?: IsVisibleCallable): (item: DragSource) => boolean;\n}\nexport interface FieldEditorContextValue {\n    fields: CmsEditorField[][];\n    noConflict: NoConflictCallable;\n    layout: CmsEditorFieldsLayout;\n    onChange?: (data: any) => void;\n    getFieldsInLayout: GetFieldsInLayoutCallable;\n    getFieldPlugin: GetFieldPluginCallable;\n    getField: GetFieldCallable;\n    getFieldRendererPlugin: GetFieldRendererCallable;\n    editField: (field: CmsEditorField | null) => void;\n    field: CmsEditorField | null;\n    parent?: CmsEditorField;\n    depth: number;\n    dropTarget: DropTarget;\n    onFieldDrop: OnFieldDropCallable;\n    onEndDrag: OnEndDragCallable;\n    insertField: InsertFieldCallable;\n    moveField: MoveFieldCallable;\n    moveRow: MoveRowCallable;\n    updateField: UpdateFieldCallable;\n    deleteField: DeleteFieldCallable;\n}\n\ninterface FieldEditorProviderProps extends FieldEditorProps {\n    children: React.ReactElement;\n}\n\nexport const FieldEditorContext = React.createContext<FieldEditorContextValue>(\n    /**\n     * Safe to cast.\n     */\n    {\n        field: null\n    } as unknown as FieldEditorContextValue\n);\n/**\n * We try to generate the random id string but with the check that it does not exist already.\n * Chances that the same string exists are quite small, but let's check it anyway.\n *\n * In most cases, there will be no iterations anyway...\n */\nconst maxGenerateIdIterations = 100;\nconst generateFieldId = (layout: string[]): string => {\n    let id = generateAlphaNumericLowerCaseId(8);\n\n    let iteration = 0;\n    while (layout.includes(id) && iteration < maxGenerateIdIterations) {\n        id = generateAlphaNumericLowerCaseId(8);\n        iteration++;\n    }\n    if (iteration >= maxGenerateIdIterations) {\n        throw new Error(`Could not generate field ID in ${maxGenerateIdIterations} iterations.`);\n    }\n    return id;\n};\n\ninterface State {\n    layout: CmsEditorFieldsLayout;\n    fields: CmsEditorField[];\n    field: CmsEditorField | null;\n    dropTarget: DropTarget;\n}\nexport const FieldEditorProvider: React.FC<FieldEditorProviderProps> = ({\n    parent,\n    fields,\n    layout,\n    onChange,\n    children\n}) => {\n    // We need to determine depth of this provider so we can render drop zones with correct z-indexes.\n    let depth = 0;\n    try {\n        const editor = useFieldEditor();\n        depth = editor.depth + 1;\n    } catch {\n        // There's no parent provider, so this is the top-level one.\n    }\n\n    const [state, setState] = useState<State>({\n        layout,\n        fields,\n        field: null,\n        dropTarget: {\n            row: -1,\n            index: null\n        }\n    });\n\n    useDeepCompareEffect(() => {\n        onChange({ fields: state.fields, layout: state.layout });\n    }, [state.fields, state.layout]);\n\n    const editField = useCallback((field: CmsEditorField | null) => {\n        setState(state => ({ ...state, field }));\n    }, []);\n\n    const onDropTarget = {\n        dropTarget: parent ? parent.fieldId : null\n    };\n\n    const onFieldDrop = useCallback<OnFieldDropCallable>((source, dropTarget) => {\n        const { pos, type, fieldType, field, fields = [] } = source;\n\n        const parentId = parent ? parent.fieldId : null;\n\n        if (type === \"row\") {\n            if (parentId !== source.parent) {\n                // We're dragging an existing row from another fieldset\n                fields.forEach((field, index) => {\n                    insertField({\n                        field,\n                        position: {\n                            row: dropTarget.row,\n                            index: index === 0 ? null : index\n                        }\n                    });\n                });\n            } else if (pos && pos.row !== undefined) {\n                // We're dragging a row within the same fieldset\n                moveRow(pos.row, dropTarget.row);\n            }\n\n            return onDropTarget;\n        }\n\n        // If source pos is set, we are moving an existing field.\n        if (pos) {\n            if (!field) {\n                return onDropTarget;\n            }\n            if (parentId !== source.parent) {\n                // We're dragging an existing field from another fieldset\n                insertField({ field, position: dropTarget });\n            } else {\n                // We're dragging a field within the same fieldset\n                moveField({ field, position: dropTarget });\n            }\n            return onDropTarget;\n        }\n\n        if (!fieldType) {\n            return null;\n        }\n        const plugin = getFieldPlugin(fieldType);\n        if (!plugin) {\n            return null;\n        }\n        /**\n         * TODO @ts-refactor figure out better type for this.\n         */\n        editField(plugin.field.createField() as CmsEditorField);\n        setState(state => ({\n            ...state,\n            dropTarget\n        }));\n        return null;\n    }, []);\n\n    const onEndDrag: OnEndDragCallable = ({ type, field, fields }, monitor) => {\n        if (!monitor.didDrop()) {\n            return;\n        }\n\n        // Check if we dropped outside of the source fieldset, and if yes, remove the field from the original parent.\n        const { dropTarget } = monitor.getDropResult();\n        const parentId = parent ? parent.fieldId : null;\n        if (dropTarget === parentId) {\n            return;\n        }\n\n        const removeFields = type === \"row\" ? fields || [] : field ? [field] : [];\n        removeFields.forEach(field => deleteField(field));\n    };\n\n    const getFieldsInLayout: GetFieldsInLayoutCallable = () => {\n        // Replace every field ID with actual field object.\n        return state.layout\n            .filter(arr => arr.length)\n            .map(row => {\n                return row\n                    .map(id => {\n                        return getField({ id });\n                    })\n                    .filter(Boolean);\n            })\n            .filter(row => {\n                return row.length > 0;\n            }) as CmsEditorField[][];\n    };\n\n    /**\n     * Return field plugin.\n     */\n    const getFieldPlugin: GetFieldPluginCallable = type => {\n        return plugins\n            .byType<CmsEditorFieldTypePlugin>(\"cms-editor-field-type\")\n            .find(plugin => plugin.field.type === type);\n    };\n\n    const getFieldRendererPlugin: GetFieldRendererCallable = name => {\n        return plugins\n            .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n            .find(plugin => plugin.renderer.rendererName === name);\n    };\n\n    /**\n     * Checks if field of given type already exists in the list of fields.\n     */\n    const getField: GetFieldCallable = query => {\n        return state.fields.find(field => {\n            for (const key in query) {\n                if (!(key in field)) {\n                    return false;\n                }\n                // TODO @ts-refactor figure if there is a way to fix this.\n                // @ts-ignore\n                if (field[key] !== query[key]) {\n                    return false;\n                }\n            }\n\n            return true;\n        });\n    };\n\n    /**\n     * Inserts a new field into the target position.\n     */\n    const insertField: InsertFieldCallable = ({ field, position }) => {\n        if (!field.id) {\n            field.id = generateFieldId(layout.flat());\n        }\n\n        if (!field.type) {\n            throw new Error(`Field \"type\" missing.`);\n        }\n\n        const fieldPlugin = getFieldPlugin(field.type);\n        if (!fieldPlugin) {\n            throw new Error(`Invalid field \"type\".`);\n        }\n\n        setState(prev => {\n            const next: State = {\n                ...prev,\n                fields: (prev.fields || []).concat(field)\n            };\n\n            // Move field to position where it was dropped.\n            return utils.moveField({ field, position, data: next });\n        });\n    };\n\n    /**\n     * Moves field to the given target position.\n     */\n    const moveField: MoveFieldCallable = ({ field, position }) => {\n        setState(data => {\n            return utils.moveField<State>({ field, position, data });\n        });\n    };\n\n    /**\n     * Moves row to a destination row.\n     */\n    const moveRow: MoveRowCallable = (source, destination) => {\n        setState(data => {\n            return utils.moveRow({ data, source, destination });\n        });\n    };\n\n    /**\n     * Updates field.\n     */\n    const updateField: UpdateFieldCallable = field => {\n        setState(data => {\n            for (let i = 0; i < data.fields.length; i++) {\n                if (data.fields[i].id === field.id) {\n                    return dot.set(data, `fields.${i}`, field);\n                }\n            }\n            return data;\n        });\n    };\n\n    /**\n     * Deletes a field (both from the list of field and the layout).\n     */\n    const deleteField: DeleteFieldCallable = field => {\n        setState(data => {\n            return utils.deleteField({ field, data });\n        });\n    };\n\n    const noConflict: NoConflictCallable = useCallback(\n        (isVisible?: IsVisibleCallable) => item => {\n            const sameParent = item.parent === onDropTarget.dropTarget;\n            const draggedFields: string[] = [];\n            switch (item.type) {\n                case \"row\":\n                    (item.fields || []).forEach(field => draggedFields.push(field.fieldId));\n                    break;\n                case \"field\":\n                    if (!item.field) {\n                        break;\n                    }\n                    draggedFields.push(item.field.fieldId);\n                    break;\n                default:\n                    break;\n            }\n\n            if (\n                draggedFields.length &&\n                !sameParent &&\n                fields.some(field => draggedFields.includes(field.fieldId))\n            ) {\n                return false;\n            }\n\n            return typeof isVisible === \"function\" ? isVisible(item) : true;\n        },\n        [fields.map(f => f.fieldId).join(\".\")]\n    );\n\n    const value: FieldEditorContextValue = {\n        parent,\n        depth,\n        getFieldsInLayout,\n        getFieldPlugin,\n        getFieldRendererPlugin,\n        getField,\n        editField,\n        field: state.field,\n        dropTarget: state.dropTarget,\n        onFieldDrop,\n        onEndDrag,\n        insertField,\n        moveField,\n        moveRow,\n        updateField,\n        deleteField,\n        fields: getFieldsInLayout(),\n        noConflict,\n        layout: state.layout\n    };\n\n    return <FieldEditorContext.Provider value={value}>{children}</FieldEditorContext.Provider>;\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/number/numberInputs.js

@@ -44,7 +44,6 @@ var plugin = {
           onChange: function onChange(value) {
             return bind.index.onChange(value);
           },
-          autoFocus: true,
           onEnter: function onEnter() {
             return bind.field.appendValue("");
           },

package/admin/plugins/fieldRenderers/number/numberInputs.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","props","bind","index","value","onChange","appendValue","number","icon","onClick","removeValue"],"sources":["numberInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport DynamicSection from \"../DynamicSection\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number-inputs\",\n    renderer: {\n        rendererName: \"number-inputs\",\n        name: t`Number Inputs`,\n        description: t`Renders a simple list of number inputs.`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" &&\n                !!field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => (\n                        <Input\n                            {...bind.index}\n                            onChange={value => {\n                                return bind.index.onChange(value);\n                            }}\n                            autoFocus\n                            onEnter={() => bind.field.appendValue(\"\")}\n                            label={t`Value {number}`({ number: index + 1 })}\n                            type=\"number\"\n                            trailingIcon={\n                                index > 0 && {\n                                    icon: <DeleteIcon />,\n                                    onClick: () => bind.field.removeValue(index)\n                                }\n                            }\n                        />\n                    )}\n                </DynamicSection>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,yCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,eADR;IAENF,IAAI,EAAEL,CAAF,gGAFE;IAGNQ,WAAW,EAAER,CAAF,4HAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OACIA,KAAK,CAACN,IAAN,KAAe,QAAf,IACA,CAAC,CAACM,KAAK,CAACC,cADR,IAEA,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAHL;IAKH,CAVK;IAWNG,MAXM,kBAWCC,KAXD,EAWQ;MACV,oBACI,6BAAC,uBAAD,EAAoBA,KAApB,EACK;QAAA,IAAGC,IAAH,SAAGA,IAAH;QAAA,IAASC,KAAT,SAASA,KAAT;QAAA,oBACG,6BAAC,YAAD,oBACQD,IAAI,CAACC,KADb;UAEI,QAAQ,EAAE,kBAAAC,KAAK,EAAI;YACf,OAAOF,IAAI,CAACC,KAAL,CAAWE,QAAX,CAAoBD,KAApB,CAAP;UACH,CAJL;UAKI,SAAS,MALb;UAMI,OAAO,EAAE;YAAA,OAAMF,IAAI,CAACL,KAAL,CAAWS,WAAX,CAAuB,EAAvB,CAAN;UAAA,CANb;UAOI,KAAK,EAAEnB,CAAC,mGAAD,CAAkB;YAAEoB,MAAM,EAAEJ,KAAK,GAAG;UAAlB,CAAlB,CAPX;UAQI,IAAI,EAAC,QART;UASI,YAAY,EACRA,KAAK,GAAG,CAAR,IAAa;YACTK,IAAI,eAAE,6BAAC,qBAAD,OADG;YAETC,OAAO,EAAE;cAAA,OAAMP,IAAI,CAACL,KAAL,CAAWa,WAAX,CAAuBP,KAAvB,CAAN;YAAA;UAFA;QAVrB,GADH;MAAA,CADL,CADJ;IAsBH;EAlCK;AAH+B,CAA7C;eAyCeb,M"}
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","props","bind","index","value","onChange","appendValue","number","icon","onClick","removeValue"],"sources":["numberInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport DynamicSection from \"../DynamicSection\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number-inputs\",\n    renderer: {\n        rendererName: \"number-inputs\",\n        name: t`Number Inputs`,\n        description: t`Renders a simple list of number inputs.`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" &&\n                !!field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => (\n                        <Input\n                            {...bind.index}\n                            onChange={value => {\n                                return bind.index.onChange(value);\n                            }}\n                            onEnter={() => bind.field.appendValue(\"\")}\n                            label={t`Value {number}`({ number: index + 1 })}\n                            type=\"number\"\n                            trailingIcon={\n                                index > 0 && {\n                                    icon: <DeleteIcon />,\n                                    onClick: () => bind.field.removeValue(index)\n                                }\n                            }\n                        />\n                    )}\n                </DynamicSection>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,yCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,eADR;IAENF,IAAI,EAAEL,CAAF,gGAFE;IAGNQ,WAAW,EAAER,CAAF,4HAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OACIA,KAAK,CAACN,IAAN,KAAe,QAAf,IACA,CAAC,CAACM,KAAK,CAACC,cADR,IAEA,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAHL;IAKH,CAVK;IAWNG,MAXM,kBAWCC,KAXD,EAWQ;MACV,oBACI,6BAAC,uBAAD,EAAoBA,KAApB,EACK;QAAA,IAAGC,IAAH,SAAGA,IAAH;QAAA,IAASC,KAAT,SAASA,KAAT;QAAA,oBACG,6BAAC,YAAD,oBACQD,IAAI,CAACC,KADb;UAEI,QAAQ,EAAE,kBAAAC,KAAK,EAAI;YACf,OAAOF,IAAI,CAACC,KAAL,CAAWE,QAAX,CAAoBD,KAApB,CAAP;UACH,CAJL;UAKI,OAAO,EAAE;YAAA,OAAMF,IAAI,CAACL,KAAL,CAAWS,WAAX,CAAuB,EAAvB,CAAN;UAAA,CALb;UAMI,KAAK,EAAEnB,CAAC,mGAAD,CAAkB;YAAEoB,MAAM,EAAEJ,KAAK,GAAG;UAAlB,CAAlB,CANX;UAOI,IAAI,EAAC,QAPT;UAQI,YAAY,EACRA,KAAK,GAAG,CAAR,IAAa;YACTK,IAAI,eAAE,6BAAC,qBAAD,OADG;YAETC,OAAO,EAAE;cAAA,OAAMP,IAAI,CAACL,KAAL,CAAWa,WAAX,CAAuBP,KAAvB,CAAN;YAAA;UAFA;QATrB,GADH;MAAA,CADL,CADJ;IAqBH;EAjCK;AAH+B,CAA7C;eAwCeb,M"}

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

@@ -7,9 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _singleObject = _interopRequireDefault(require("./singleObject"));
+var _singleObjectInline = _interopRequireDefault(require("./singleObjectInline"));
+
+var _singleObjectAccordion = _interopRequireDefault(require("./singleObjectAccordion"));
 
 var _multipleObjects = _interopRequireDefault(require("./multipleObjects"));
 
-var _default = [_singleObject.default, _multipleObjects.default];
+var _multipleObjectsAccordion = _interopRequireDefault(require("./multipleObjectsAccordion"));
+
+var _default = [_singleObjectInline.default, _singleObjectAccordion.default, _multipleObjects.default, _multipleObjectsAccordion.default];
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"names":["singleObject","multipleObjects"],"sources":["index.ts"],"sourcesContent":["import singleObject from \"./singleObject\";\nimport multipleObjects from \"./multipleObjects\";\n\nexport default [singleObject, multipleObjects];\n"],"mappings":";;;;;;;;;AAAA;;AACA;;eAEe,CAACA,qBAAD,EAAeC,wBAAf,C"}
+{"version":3,"names":["singleObjectInline","singleObjectAccordion","multipleObjects","multipleObjectsAccordion"],"sources":["index.ts"],"sourcesContent":["import singleObjectInline from \"./singleObjectInline\";\nimport singleObjectAccordion from \"./singleObjectAccordion\";\nimport multipleObjects from \"./multipleObjects\";\nimport multipleObjectsAccordion from \"./multipleObjectsAccordion\";\n\nexport default [\n    singleObjectInline,\n    singleObjectAccordion,\n    multipleObjects,\n    multipleObjectsAccordion\n];\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;eAEe,CACXA,2BADW,EAEXC,8BAFW,EAGXC,wBAHW,EAIXC,iCAJW,C"}

package/admin/plugins/fieldRenderers/object/multipleObjects.js

@@ -53,24 +53,29 @@ var Actions = function Actions(_ref) {
   var setHighlightIndex = _ref.setHighlightIndex,
       bind = _ref.bind,
       index = _ref.index;
+  var _bind$field = bind.field,
+      moveValueDown = _bind$field.moveValueDown,
+      moveValueUp = _bind$field.moveValueUp;
+  var onDown = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    moveValueDown(index);
+    setHighlightIndex(function (map) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
+    });
+  }, [moveValueDown, index]);
+  var onUp = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    moveValueUp(index);
+    setHighlightIndex(function (map) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
+    });
+  }, [moveValueUp, index]);
   return index > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_down.ReactComponent, null),
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      bind.field.moveValueDown(index);
-      setHighlightIndex(function (map) {
-        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
-      });
-    }
+    onClick: onDown
   }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_up.ReactComponent, null),
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      bind.field.moveValueUp(index);
-      setHighlightIndex(function (map) {
-        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
-      });
-    }
+    onClick: onUp
   }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null),
     onClick: function onClick() {
@@ -133,11 +138,11 @@ var plugin = {
   name: "cms-editor-field-renderer-objects",
   renderer: {
     rendererName: "objects",
-    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Objects"]))),
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Inline Form"]))),
     description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders a set of fields."]))),
     canUse: function canUse(_ref3) {
       var field = _ref3.field;
-      return field.type === "object" && !!field.multipleValues;
+      return field.type === "object" && Boolean(field.multipleValues);
     },
     render: function render(props) {
       return /*#__PURE__*/_react.default.createElement(ObjectsRenderer, props);

package/admin/plugins/fieldRenderers/object/multipleObjects.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","Actions","setHighlightIndex","bind","index","e","stopPropagation","field","moveValueDown","map","generateAlphaNumericLowerCaseId","moveValueUp","removeValue","ObjectsRenderer","props","useState","highlightMap","contentModel","value","dynamicSectionTitleStyle","label","length","helpText","dynamicSectionGridStyle","Bind","fieldsWrapperStyle","settings","fields","layout","fieldsGridStyle","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","render"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction, useState } from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport {\n    BindComponentRenderProp,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldRendererProps\n} from \"~/types\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"./arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"./arrow_drop_down.svg\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport {\n    fieldsWrapperStyle,\n    dynamicSectionTitleStyle,\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"./StyledComponents\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\ninterface ActionsProps {\n    setHighlightIndex: Dispatch<SetStateAction<{ [key: number]: string }>>;\n    index: number;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n}\n\nconst Actions: React.FC<ActionsProps> = ({ setHighlightIndex, bind, index }) => {\n    return index > 0 ? (\n        <>\n            <IconButton\n                icon={<ArrowDown />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueDown(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n                }}\n            />\n            <IconButton\n                icon={<ArrowUp />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueUp(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n                }}\n            />\n\n            <IconButton icon={<DeleteIcon />} onClick={() => bind.field.removeValue(index)} />\n        </>\n    ) : null;\n};\n\nconst ObjectsRenderer: React.FC<CmsEditorFieldRendererProps> = props => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const { field, contentModel } = props;\n\n    return (\n        <DynamicSection\n            {...props}\n            emptyValue={{}}\n            showLabel={false}\n            renderTitle={value => (\n                <Cell span={12} className={dynamicSectionTitleStyle}>\n                    <Typography use={\"headline5\"}>\n                        {`${field.label} ${value.length ? `(${value.length})` : \"\"}`}\n                    </Typography>\n                    {field.helpText && <FormElementMessage>{field.helpText}</FormElementMessage>}\n                </Cell>\n            )}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => (\n                <ObjectItem>\n                    {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                    <Accordion\n                        title={`${props.field.label} #${index + 1}`}\n                        action={\n                            <Actions\n                                setHighlightIndex={setHighlightIndex}\n                                index={index}\n                                bind={bind}\n                            />\n                        }\n                        // Open first Accordion by default\n                        defaultValue={index === 0}\n                    >\n                        <Cell span={12} className={fieldsWrapperStyle}>\n                            <Fields\n                                Bind={Bind}\n                                {...bind.index}\n                                contentModel={contentModel}\n                                fields={(field.settings || {}).fields || []}\n                                layout={(field.settings || {}).layout || []}\n                                gridClassName={fieldsGridStyle}\n                            />\n                        </Cell>\n                    </Accordion>\n                </ObjectItem>\n            )}\n        </DynamicSection>\n    );\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Objects`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !!field.multipleValues;\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAQA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAWA,IAAMC,OAA+B,GAAG,SAAlCA,OAAkC,OAAwC;EAAA,IAArCC,iBAAqC,QAArCA,iBAAqC;EAAA,IAAlBC,IAAkB,QAAlBA,IAAkB;EAAA,IAAZC,KAAY,QAAZA,KAAY;EAC5E,OAAOA,KAAK,GAAG,CAAR,gBACH,yEACI,6BAAC,kBAAD;IACI,IAAI,eAAE,6BAAC,+BAAD,OADV;IAEI,OAAO,EAAE,iBAAAC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAF;MACAH,IAAI,CAACI,KAAL,CAAWC,aAAX,CAAyBJ,KAAzB;MACAF,iBAAiB,CAAC,UAAAO,GAAG;QAAA,mEACdA,GADc,yCAEhBL,KAAK,GAAG,CAFQ,EAEJ,IAAAM,sCAAA,EAAgC,EAAhC,CAFI;MAAA,CAAJ,CAAjB;IAIH;EATL,EADJ,eAYI,6BAAC,kBAAD;IACI,IAAI,eAAE,6BAAC,6BAAD,OADV;IAEI,OAAO,EAAE,iBAAAL,CAAC,EAAI;MACVA,CAAC,CAACC,eAAF;MACAH,IAAI,CAACI,KAAL,CAAWI,WAAX,CAAuBP,KAAvB;MACAF,iBAAiB,CAAC,UAAAO,GAAG;QAAA,mEACdA,GADc,yCAEhBL,KAAK,GAAG,CAFQ,EAEJ,IAAAM,sCAAA,EAAgC,EAAhC,CAFI;MAAA,CAAJ,CAAjB;IAIH;EATL,EAZJ,eAwBI,6BAAC,kBAAD;IAAY,IAAI,eAAE,6BAAC,qBAAD,OAAlB;IAAkC,OAAO,EAAE;MAAA,OAAMP,IAAI,CAACI,KAAL,CAAWK,WAAX,CAAuBR,KAAvB,CAAN;IAAA;EAA3C,EAxBJ,CADG,GA2BH,IA3BJ;AA4BH,CA7BD;;AA+BA,IAAMS,eAAsD,GAAG,SAAzDA,eAAyD,CAAAC,KAAK,EAAI;EACpE,gBAA0C,IAAAC,eAAA,EAAoC,EAApC,CAA1C;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBd,iBAArB;;EACA,IAAQK,KAAR,GAAgCO,KAAhC,CAAQP,KAAR;EAAA,IAAeU,YAAf,GAAgCH,KAAhC,CAAeG,YAAf;EAEA,oBACI,6BAAC,uBAAD,oBACQH,KADR;IAEI,UAAU,EAAE,EAFhB;IAGI,SAAS,EAAE,KAHf;IAII,WAAW,EAAE,qBAAAI,KAAK;MAAA,oBACd,6BAAC,UAAD;QAAM,IAAI,EAAE,EAAZ;QAAgB,SAAS,EAAEC;MAA3B,gBACI,6BAAC,sBAAD;QAAY,GAAG,EAAE;MAAjB,aACQZ,KAAK,CAACa,KADd,cACuBF,KAAK,CAACG,MAAN,cAAmBH,KAAK,CAACG,MAAzB,SAAqC,EAD5D,EADJ,EAIKd,KAAK,CAACe,QAAN,iBAAkB,6BAAC,sCAAD,QAAqBf,KAAK,CAACe,QAA3B,CAJvB,CADc;IAAA,CAJtB;IAYI,aAAa,EAAEC;EAZnB,IAcK;IAAA,IAAGC,IAAH,SAAGA,IAAH;IAAA,IAASrB,IAAT,SAASA,IAAT;IAAA,IAAeC,KAAf,SAAeA,KAAf;IAAA,oBACG,6BAAC,4BAAD,QACKY,YAAY,CAACZ,KAAD,CAAZ,gBAAsB,6BAAC,+BAAD;MAAe,GAAG,EAAEY,YAAY,CAACZ,KAAD;IAAhC,EAAtB,GAAoE,IADzE,eAEI,6BAAC,kBAAD;MACI,KAAK,YAAKU,KAAK,CAACP,KAAN,CAAYa,KAAjB,eAA2BhB,KAAK,GAAG,CAAnC,CADT;MAEI,MAAM,eACF,6BAAC,OAAD;QACI,iBAAiB,EAAEF,iBADvB;QAEI,KAAK,EAAEE,KAFX;QAGI,IAAI,EAAED;MAHV,EAHR,CASI;MATJ;MAUI,YAAY,EAAEC,KAAK,KAAK;IAV5B,gBAYI,6BAAC,UAAD;MAAM,IAAI,EAAE,EAAZ;MAAgB,SAAS,EAAEqB;IAA3B,gBACI,6BAAC,cAAD;MACI,IAAI,EAAED;IADV,GAEQrB,IAAI,CAACC,KAFb;MAGI,YAAY,EAAEa,YAHlB;MAII,MAAM,EAAE,CAACV,KAAK,CAACmB,QAAN,IAAkB,EAAnB,EAAuBC,MAAvB,IAAiC,EAJ7C;MAKI,MAAM,EAAE,CAACpB,KAAK,CAACmB,QAAN,IAAkB,EAAnB,EAAuBE,MAAvB,IAAiC,EAL7C;MAMI,aAAa,EAAEC;IANnB,GADJ,CAZJ,CAFJ,CADH;EAAA,CAdL,CADJ;AA6CH,CAjDD;;AAmDA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,mCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,SADR;IAENF,IAAI,EAAElC,CAAF,0FAFE;IAGNqC,WAAW,EAAErC,CAAF,6GAHL;IAINsC,MAJM,yBAIY;MAAA,IAAT7B,KAAS,SAATA,KAAS;MACd,OAAOA,KAAK,CAACwB,IAAN,KAAe,QAAf,IAA2B,CAAC,CAACxB,KAAK,CAAC8B,cAA1C;IACH,CANK;IAONC,MAPM,kBAOCxB,KAPD,EAOQ;MACV,oBAAO,6BAAC,eAAD,EAAqBA,KAArB,CAAP;IACH;EATK;AAH+B,CAA7C;eAgBegB,M"}
+{"version":3,"names":["t","i18n","ns","Actions","setHighlightIndex","bind","index","field","moveValueDown","moveValueUp","onDown","useCallback","e","stopPropagation","map","generateAlphaNumericLowerCaseId","onUp","removeValue","ObjectsRenderer","props","useState","highlightMap","contentModel","value","dynamicSectionTitleStyle","label","length","helpText","dynamicSectionGridStyle","Bind","fieldsWrapperStyle","settings","fields","layout","fieldsGridStyle","plugin","type","name","renderer","rendererName","description","canUse","Boolean","multipleValues","render"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction, useState, useCallback } from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport {\n    BindComponentRenderProp,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldRendererProps\n} from \"~/types\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"./arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"./arrow_drop_down.svg\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport {\n    fieldsWrapperStyle,\n    dynamicSectionTitleStyle,\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"./StyledComponents\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\ninterface ActionsProps {\n    setHighlightIndex: Dispatch<SetStateAction<{ [key: number]: string }>>;\n    index: number;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n}\n\nconst Actions: React.FC<ActionsProps> = ({ setHighlightIndex, bind, index }) => {\n    const { moveValueDown, moveValueUp } = bind.field;\n\n    const onDown = useCallback(\n        e => {\n            e.stopPropagation();\n            moveValueDown(index);\n            setHighlightIndex(map => ({\n                ...map,\n                [index + 1]: generateAlphaNumericLowerCaseId(12)\n            }));\n        },\n        [moveValueDown, index]\n    );\n\n    const onUp = useCallback(\n        e => {\n            e.stopPropagation();\n            moveValueUp(index);\n            setHighlightIndex(map => ({\n                ...map,\n                [index - 1]: generateAlphaNumericLowerCaseId(12)\n            }));\n        },\n        [moveValueUp, index]\n    );\n\n    return index > 0 ? (\n        <>\n            <IconButton icon={<ArrowDown />} onClick={onDown} />\n            <IconButton icon={<ArrowUp />} onClick={onUp} />\n            <IconButton icon={<DeleteIcon />} onClick={() => bind.field.removeValue(index)} />\n        </>\n    ) : null;\n};\n\nconst ObjectsRenderer: React.FC<CmsEditorFieldRendererProps> = props => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const { field, contentModel } = props;\n\n    return (\n        <DynamicSection\n            {...props}\n            emptyValue={{}}\n            showLabel={false}\n            renderTitle={value => (\n                <Cell span={12} className={dynamicSectionTitleStyle}>\n                    <Typography use={\"headline5\"}>\n                        {`${field.label} ${value.length ? `(${value.length})` : \"\"}`}\n                    </Typography>\n                    {field.helpText && <FormElementMessage>{field.helpText}</FormElementMessage>}\n                </Cell>\n            )}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => (\n                <ObjectItem>\n                    {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                    <Accordion\n                        title={`${props.field.label} #${index + 1}`}\n                        action={\n                            <Actions\n                                setHighlightIndex={setHighlightIndex}\n                                index={index}\n                                bind={bind}\n                            />\n                        }\n                        // Open first Accordion by default\n                        defaultValue={index === 0}\n                    >\n                        <Cell span={12} className={fieldsWrapperStyle}>\n                            <Fields\n                                Bind={Bind}\n                                {...bind.index}\n                                contentModel={contentModel}\n                                fields={(field.settings || {}).fields || []}\n                                layout={(field.settings || {}).layout || []}\n                                gridClassName={fieldsGridStyle}\n                            />\n                        </Cell>\n                    </Accordion>\n                </ObjectItem>\n            )}\n        </DynamicSection>\n    );\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Inline Form`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && Boolean(field.multipleValues);\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.js

@@ -0,0 +1,146 @@
+"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.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _i18n = require("@webiny/app/i18n");
+
+var _Button = require("@webiny/ui/Button");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _Accordion = require("@webiny/ui/Accordion");
+
+var _DynamicSection = _interopRequireDefault(require("../DynamicSection"));
+
+var _Fields = require("../../../components/ContentEntryForm/Fields");
+
+var _close = require("../../../icons/close.svg");
+
+var _arrow_drop_up = require("./arrow_drop_up.svg");
+
+var _arrow_drop_down = require("./arrow_drop_down.svg");
+
+var _Accordion2 = _interopRequireDefault(require("../Accordion"));
+
+var _StyledComponents = require("./StyledComponents");
+
+var _utils = require("@webiny/utils");
+
+var _templateObject, _templateObject2;
+
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
+
+var Actions = function Actions(_ref) {
+  var setHighlightIndex = _ref.setHighlightIndex,
+      bind = _ref.bind,
+      index = _ref.index;
+  var _bind$field = bind.field,
+      moveValueDown = _bind$field.moveValueDown,
+      moveValueUp = _bind$field.moveValueUp;
+  var onDown = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    moveValueDown(index);
+    setHighlightIndex(function (map) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
+    });
+  }, [moveValueDown, index]);
+  var onUp = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    moveValueUp(index);
+    setHighlightIndex(function (map) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
+    });
+  }, [moveValueUp, index]);
+  return index > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_down.ReactComponent, null),
+    onClick: onDown
+  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_up.ReactComponent, null),
+    onClick: onUp
+  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null),
+    onClick: function onClick() {
+      return bind.field.removeValue(index);
+    }
+  })) : null;
+};
+
+var ObjectsRenderer = function ObjectsRenderer(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      highlightMap = _useState2[0],
+      setHighlightIndex = _useState2[1];
+
+  var field = props.field,
+      contentModel = props.contentModel;
+  return /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+    title: field.label,
+    description: field.helpText
+  }, /*#__PURE__*/_react.default.createElement(_DynamicSection.default, Object.assign({}, props, {
+    emptyValue: {},
+    showLabel: false,
+    gridClassName: _StyledComponents.dynamicSectionGridStyle
+  }), function (_ref2) {
+    var Bind = _ref2.Bind,
+        bind = _ref2.bind,
+        index = _ref2.index;
+    return /*#__PURE__*/_react.default.createElement(_StyledComponents.ObjectItem, null, highlightMap[index] ? /*#__PURE__*/_react.default.createElement(_StyledComponents.ItemHighLight, {
+      key: highlightMap[index]
+    }) : null, /*#__PURE__*/_react.default.createElement(_Accordion2.default, {
+      title: "".concat(props.field.label, " #").concat(index + 1),
+      action: /*#__PURE__*/_react.default.createElement(Actions, {
+        setHighlightIndex: setHighlightIndex,
+        index: index,
+        bind: bind
+      }) // Open first Accordion by default
+      ,
+      defaultValue: index === 0
+    }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+      span: 12,
+      className: _StyledComponents.fieldsWrapperStyle
+    }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, Object.assign({
+      Bind: Bind
+    }, bind.index, {
+      contentModel: contentModel,
+      fields: (field.settings || {}).fields || [],
+      layout: (field.settings || {}).layout || [],
+      gridClassName: _StyledComponents.fieldsGridStyle
+    })))));
+  })));
+};
+
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-objects-accordion",
+  renderer: {
+    rendererName: "objects-accordion",
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Accordion"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders fields within an accordion."]))),
+    canUse: function canUse(_ref3) {
+      var field = _ref3.field;
+      return field.type === "object" && Boolean(field.multipleValues);
+    },
+    render: function render(props) {
+      return /*#__PURE__*/_react.default.createElement(ObjectsRenderer, props);
+    }
+  }
+};
+var _default = plugin;
+exports.default = _default;

package/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","Actions","setHighlightIndex","bind","index","field","moveValueDown","moveValueUp","onDown","useCallback","e","stopPropagation","map","generateAlphaNumericLowerCaseId","onUp","removeValue","ObjectsRenderer","props","useState","highlightMap","contentModel","label","helpText","dynamicSectionGridStyle","Bind","fieldsWrapperStyle","settings","fields","layout","fieldsGridStyle","plugin","type","name","renderer","rendererName","description","canUse","Boolean","multipleValues","render"],"sources":["multipleObjectsAccordion.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction, useState, useCallback } from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { Accordion as RootAccordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport {\n    BindComponentRenderProp,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldRendererProps\n} from \"~/types\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"./arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"./arrow_drop_down.svg\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport {\n    fieldsWrapperStyle,\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"./StyledComponents\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\ninterface ActionsProps {\n    setHighlightIndex: Dispatch<SetStateAction<{ [key: number]: string }>>;\n    index: number;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n}\n\nconst Actions: React.FC<ActionsProps> = ({ setHighlightIndex, bind, index }) => {\n    const { moveValueDown, moveValueUp } = bind.field;\n\n    const onDown = useCallback(\n        e => {\n            e.stopPropagation();\n            moveValueDown(index);\n            setHighlightIndex(map => ({\n                ...map,\n                [index + 1]: generateAlphaNumericLowerCaseId(12)\n            }));\n        },\n        [moveValueDown, index]\n    );\n\n    const onUp = useCallback(\n        e => {\n            e.stopPropagation();\n            moveValueUp(index);\n            setHighlightIndex(map => ({\n                ...map,\n                [index - 1]: generateAlphaNumericLowerCaseId(12)\n            }));\n        },\n        [moveValueUp, index]\n    );\n\n    return index > 0 ? (\n        <>\n            <IconButton icon={<ArrowDown />} onClick={onDown} />\n            <IconButton icon={<ArrowUp />} onClick={onUp} />\n            <IconButton icon={<DeleteIcon />} onClick={() => bind.field.removeValue(index)} />\n        </>\n    ) : null;\n};\n\nconst ObjectsRenderer: React.FC<CmsEditorFieldRendererProps> = props => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const { field, contentModel } = props;\n\n    return (\n        <RootAccordion>\n            <AccordionItem title={field.label} description={field.helpText}>\n                <DynamicSection\n                    {...props}\n                    emptyValue={{}}\n                    showLabel={false}\n                    gridClassName={dynamicSectionGridStyle}\n                >\n                    {({ Bind, bind, index }) => (\n                        <ObjectItem>\n                            {highlightMap[index] ? (\n                                <ItemHighLight key={highlightMap[index]} />\n                            ) : null}\n                            <Accordion\n                                title={`${props.field.label} #${index + 1}`}\n                                action={\n                                    <Actions\n                                        setHighlightIndex={setHighlightIndex}\n                                        index={index}\n                                        bind={bind}\n                                    />\n                                }\n                                // Open first Accordion by default\n                                defaultValue={index === 0}\n                            >\n                                <Cell span={12} className={fieldsWrapperStyle}>\n                                    <Fields\n                                        Bind={Bind}\n                                        {...bind.index}\n                                        contentModel={contentModel}\n                                        fields={(field.settings || {}).fields || []}\n                                        layout={(field.settings || {}).layout || []}\n                                        gridClassName={fieldsGridStyle}\n                                    />\n                                </Cell>\n                            </Accordion>\n                        </ObjectItem>\n                    )}\n                </DynamicSection>\n            </AccordionItem>\n        </RootAccordion>\n    );\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects-accordion\",\n    renderer: {\n        rendererName: \"objects-accordion\",\n        name: t`Accordion`,\n        description: t`Renders fields within an accordion.`,\n        canUse({ field }) {\n            return field.type === \"object\" && Boolean(field.multipleValues);\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/object/singleObjectAccordion.d.ts

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

package/admin/plugins/fieldRenderers/object/singleObjectAccordion.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _i18n = require("@webiny/app/i18n");
+
+var _Fields = require("../../../components/ContentEntryForm/Fields");
+
+var _Accordion = require("@webiny/ui/Accordion");
+
+var _templateObject, _templateObject2;
+
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
+
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-object-accordion",
+  renderer: {
+    rendererName: "object-accordion",
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Accordion"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders fields within an accordion."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return field.type === "object" && !field.multipleValues;
+    },
+    render: function render(_ref2) {
+      var field = _ref2.field,
+          getBind = _ref2.getBind,
+          contentModel = _ref2.contentModel;
+      var Bind = getBind();
+      var settings = field.settings || {};
+      return /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+        title: field.label,
+        description: field.helpText
+      }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+        Bind: Bind,
+        contentModel: contentModel,
+        fields: settings.fields || [],
+        layout: settings.layout || []
+      })));
+    }
+  }
+};
+var _default = plugin;
+exports.default = _default;

package/admin/plugins/fieldRenderers/object/singleObjectAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","contentModel","Bind","settings","label","helpText","fields","layout"],"sources":["singleObjectAccordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-object-accordion\",\n    renderer: {\n        rendererName: \"object-accordion\",\n        name: t`Accordion`,\n        description: t`Renders fields within an accordion.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !field.multipleValues;\n        },\n        render({ field, getBind, contentModel }) {\n            const Bind = getBind();\n\n            const settings = field.settings || {};\n\n            return (\n                <Accordion>\n                    <AccordionItem title={field.label} description={field.helpText}>\n                        <Fields\n                            Bind={Bind}\n                            contentModel={contentModel}\n                            fields={settings.fields || []}\n                            layout={settings.layout || []}\n                        />\n                    </AccordionItem>\n                </Accordion>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,4CAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,kBADR;IAENF,IAAI,EAAEL,CAAF,4FAFE;IAGNQ,WAAW,EAAER,CAAF,wHAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACN,IAAN,KAAe,QAAf,IAA2B,CAACM,KAAK,CAACC,cAAzC;IACH,CANK;IAONC,MAPM,yBAOmC;MAAA,IAAhCF,KAAgC,SAAhCA,KAAgC;MAAA,IAAzBG,OAAyB,SAAzBA,OAAyB;MAAA,IAAhBC,YAAgB,SAAhBA,YAAgB;MACrC,IAAMC,IAAI,GAAGF,OAAO,EAApB;MAEA,IAAMG,QAAQ,GAAGN,KAAK,CAACM,QAAN,IAAkB,EAAnC;MAEA,oBACI,6BAAC,oBAAD,qBACI,6BAAC,wBAAD;QAAe,KAAK,EAAEN,KAAK,CAACO,KAA5B;QAAmC,WAAW,EAAEP,KAAK,CAACQ;MAAtD,gBACI,6BAAC,cAAD;QACI,IAAI,EAAEH,IADV;QAEI,YAAY,EAAED,YAFlB;QAGI,MAAM,EAAEE,QAAQ,CAACG,MAAT,IAAmB,EAH/B;QAII,MAAM,EAAEH,QAAQ,CAACI,MAAT,IAAmB;MAJ/B,EADJ,CADJ,CADJ;IAYH;EAxBK;AAH+B,CAA7C;eA+BejB,M"}

package/admin/plugins/fieldRenderers/object/singleObjectInline.d.ts

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

package/admin/plugins/fieldRenderers/object/{singleObject.js → singleObjectInline.js}

@@ -32,7 +32,7 @@ var plugin = {
   name: "cms-editor-field-renderer-object",
   renderer: {
     rendererName: "object",
-    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Object"]))),
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Inline Form"]))),
     description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders a set of fields."]))),
     canUse: function canUse(_ref) {
       var field = _ref.field;

package/admin/plugins/fieldRenderers/object/singleObjectInline.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","contentModel","Bind","settings","label","helpText","fieldsWrapperStyle","fields","layout"],"sources":["singleObjectInline.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { SimpleFormHeader } from \"@webiny/app-admin/components/SimpleForm\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { fieldsWrapperStyle } from \"./StyledComponents\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-object\",\n    renderer: {\n        rendererName: \"object\",\n        name: t`Inline Form`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !field.multipleValues;\n        },\n        render({ field, getBind, contentModel }) {\n            const Bind = getBind();\n\n            const settings = field.settings || {};\n\n            return (\n                <Grid>\n                    <Cell span={12}>\n                        <SimpleFormHeader title={field.label} />\n                        {field.helpText && (\n                            <FormElementMessage>{field.helpText}</FormElementMessage>\n                        )}\n                    </Cell>\n                    <Cell span={12} className={fieldsWrapperStyle}>\n                        <Fields\n                            Bind={Bind}\n                            contentModel={contentModel}\n                            fields={settings.fields || []}\n                            layout={settings.layout || []}\n                        />\n                    </Cell>\n                </Grid>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,kCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,QADR;IAENF,IAAI,EAAEL,CAAF,8FAFE;IAGNQ,WAAW,EAAER,CAAF,6GAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACN,IAAN,KAAe,QAAf,IAA2B,CAACM,KAAK,CAACC,cAAzC;IACH,CANK;IAONC,MAPM,yBAOmC;MAAA,IAAhCF,KAAgC,SAAhCA,KAAgC;MAAA,IAAzBG,OAAyB,SAAzBA,OAAyB;MAAA,IAAhBC,YAAgB,SAAhBA,YAAgB;MACrC,IAAMC,IAAI,GAAGF,OAAO,EAApB;MAEA,IAAMG,QAAQ,GAAGN,KAAK,CAACM,QAAN,IAAkB,EAAnC;MAEA,oBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,4BAAD;QAAkB,KAAK,EAAEN,KAAK,CAACO;MAA/B,EADJ,EAEKP,KAAK,CAACQ,QAAN,iBACG,6BAAC,sCAAD,QAAqBR,KAAK,CAACQ,QAA3B,CAHR,CADJ,eAOI,6BAAC,UAAD;QAAM,IAAI,EAAE,EAAZ;QAAgB,SAAS,EAAEC;MAA3B,gBACI,6BAAC,cAAD;QACI,IAAI,EAAEJ,IADV;QAEI,YAAY,EAAED,YAFlB;QAGI,MAAM,EAAEE,QAAQ,CAACI,MAAT,IAAmB,EAH/B;QAII,MAAM,EAAEJ,QAAQ,CAACK,MAAT,IAAmB;MAJ/B,EADJ,CAPJ,CADJ;IAkBH;EA9BK;AAH+B,CAA7C;eAqCelB,M"}

package/admin/plugins/fieldRenderers/text/textInputs.js

@@ -41,7 +41,6 @@ var plugin = {
         var bind = _ref2.bind,
             index = _ref2.index;
         return /*#__PURE__*/_react.default.createElement(_Input.Input, Object.assign({}, bind.index, {
-          autoFocus: true,
           onEnter: function onEnter() {
             return bind.field.appendValue("");
           },

package/admin/plugins/fieldRenderers/text/textInputs.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","props","bind","index","appendValue","number","icon","onClick","removeValue"],"sources":["textInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Input } from \"@webiny/ui/Input\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-text-inputs\",\n    renderer: {\n        rendererName: \"text-inputs\",\n        name: t`Text Inputs`,\n        description: t`Renders a simple list of text inputs.`,\n        canUse({ field }) {\n            return (\n                field.type === \"text\" &&\n                !!field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => (\n                        <Input\n                            {...bind.index}\n                            autoFocus\n                            onEnter={() => bind.field.appendValue(\"\")}\n                            label={t`Value {number}`({ number: index + 1 })}\n                            trailingIcon={\n                                index > 0 && {\n                                    icon: <DeleteIcon />,\n                                    onClick: () => bind.field.removeValue(index)\n                                }\n                            }\n                        />\n                    )}\n                </DynamicSection>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,uCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,aADR;IAENF,IAAI,EAAEL,CAAF,8FAFE;IAGNQ,WAAW,EAAER,CAAF,0HAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OACIA,KAAK,CAACN,IAAN,KAAe,MAAf,IACA,CAAC,CAACM,KAAK,CAACC,cADR,IAEA,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAHL;IAKH,CAVK;IAWNG,MAXM,kBAWCC,KAXD,EAWQ;MACV,oBACI,6BAAC,uBAAD,EAAoBA,KAApB,EACK;QAAA,IAAGC,IAAH,SAAGA,IAAH;QAAA,IAASC,KAAT,SAASA,KAAT;QAAA,oBACG,6BAAC,YAAD,oBACQD,IAAI,CAACC,KADb;UAEI,SAAS,MAFb;UAGI,OAAO,EAAE;YAAA,OAAMD,IAAI,CAACL,KAAL,CAAWO,WAAX,CAAuB,EAAvB,CAAN;UAAA,CAHb;UAII,KAAK,EAAEjB,CAAC,mGAAD,CAAkB;YAAEkB,MAAM,EAAEF,KAAK,GAAG;UAAlB,CAAlB,CAJX;UAKI,YAAY,EACRA,KAAK,GAAG,CAAR,IAAa;YACTG,IAAI,eAAE,6BAAC,qBAAD,OADG;YAETC,OAAO,EAAE;cAAA,OAAML,IAAI,CAACL,KAAL,CAAWW,WAAX,CAAuBL,KAAvB,CAAN;YAAA;UAFA;QANrB,GADH;MAAA,CADL,CADJ;IAkBH;EA9BK;AAH+B,CAA7C;eAqCeb,M"}
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","props","bind","index","appendValue","number","icon","onClick","removeValue"],"sources":["textInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Input } from \"@webiny/ui/Input\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-text-inputs\",\n    renderer: {\n        rendererName: \"text-inputs\",\n        name: t`Text Inputs`,\n        description: t`Renders a simple list of text inputs.`,\n        canUse({ field }) {\n            return (\n                field.type === \"text\" &&\n                !!field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => (\n                        <Input\n                            {...bind.index}\n                            onEnter={() => bind.field.appendValue(\"\")}\n                            label={t`Value {number}`({ number: index + 1 })}\n                            trailingIcon={\n                                index > 0 && {\n                                    icon: <DeleteIcon />,\n                                    onClick: () => bind.field.removeValue(index)\n                                }\n                            }\n                        />\n                    )}\n                </DynamicSection>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,uCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,aADR;IAENF,IAAI,EAAEL,CAAF,8FAFE;IAGNQ,WAAW,EAAER,CAAF,0HAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OACIA,KAAK,CAACN,IAAN,KAAe,MAAf,IACA,CAAC,CAACM,KAAK,CAACC,cADR,IAEA,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAHL;IAKH,CAVK;IAWNG,MAXM,kBAWCC,KAXD,EAWQ;MACV,oBACI,6BAAC,uBAAD,EAAoBA,KAApB,EACK;QAAA,IAAGC,IAAH,SAAGA,IAAH;QAAA,IAASC,KAAT,SAASA,KAAT;QAAA,oBACG,6BAAC,YAAD,oBACQD,IAAI,CAACC,KADb;UAEI,OAAO,EAAE;YAAA,OAAMD,IAAI,CAACL,KAAL,CAAWO,WAAX,CAAuB,EAAvB,CAAN;UAAA,CAFb;UAGI,KAAK,EAAEjB,CAAC,mGAAD,CAAkB;YAAEkB,MAAM,EAAEF,KAAK,GAAG;UAAlB,CAAlB,CAHX;UAII,YAAY,EACRA,KAAK,GAAG,CAAR,IAAa;YACTG,IAAI,eAAE,6BAAC,qBAAD,OADG;YAETC,OAAO,EAAE;cAAA,OAAML,IAAI,CAACL,KAAL,CAAWW,WAAX,CAAuBL,KAAvB,CAAN;YAAA;UAFA;QALrB,GADH;MAAA,CADL,CADJ;IAiBH;EA7BK;AAH+B,CAA7C;eAoCeb,M"}

package/admin/plugins/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const _default: () => (import("../../types").CmsEditorFormSettingsPlugin | import("../../types").CmsIconsPlugin | import("@webiny/app-admin/types").AdminInstallationPlugin | import("@webiny/app-admin/types").AdminAppPermissionRendererPlugin | import("../../types").CmsFieldValueTransformer[] | import("@webiny/app").ApolloCacheObjectIdPlugin<import("@webiny/app/plugins/ApolloCacheObjectIdPlugin").ApolloCacheObject> | import("@webiny/app/types").RoutePlugin[] | import("../../types").CmsContentDetailsPlugin[] | {
+declare const _default: () => (import("../../types").CmsEditorFormSettingsPlugin | import("../../types").CmsIconsPlugin | import("../../types").CmsFieldValueTransformer[] | import("@webiny/app").ApolloCacheObjectIdPlugin<import("@webiny/app/plugins/ApolloCacheObjectIdPlugin").ApolloCacheObject> | import("@webiny/app/types").RoutePlugin[] | import("@webiny/app-admin/types").AdminInstallationPlugin | import("@webiny/app-admin/types").AdminAppPermissionRendererPlugin | import("../../types").CmsContentDetailsPlugin[] | {
     name: string;
     type: string;
     render(): JSX.Element;

package/admin/views/contentModels/ContentModelsDataList.js

@@ -270,9 +270,9 @@ var ContentModelsDataList = function ContentModelsDataList(_ref) {
         key: contentModel.modelId,
         className: listItemMinHeight
       }, /*#__PURE__*/_react.default.createElement(UIL.ListItemText, null, contentModel.name, /*#__PURE__*/_react.default.createElement(UIL.ListItemTextSecondary, null, t(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["Last modified: {time}."])))({
-        time: /*#__PURE__*/_react.default.createElement(_timeagoReact.default, {
+        time: contentModel.savedOn ? /*#__PURE__*/_react.default.createElement(_timeagoReact.default, {
           datetime: contentModel.savedOn
-        })
+        }) : "N/A"
       }))), /*#__PURE__*/_react.default.createElement(UIL.ListItemMeta, {
         className: rightAlign
       }, /*#__PURE__*/_react.default.createElement(UIL.ListActions, null, canEdit(contentModel, "cms.contentModel") && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {

package/admin/views/contentModels/ContentModelsDataList.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","namespace","SORTERS","label","sorters","rightAlign","css","alignItems","justifyContent","listItemMinHeight","minHeight","ContentModelsDataList","canCreate","onCreate","onClone","useState","filter","setFilter","sort","setSort","useRouter","history","client","useApolloClient","useSnackbar","showSnackbar","useConfirmationDialog","dataTestId","showConfirmation","useQuery","GQL","LIST_CONTENT_MODELS","data","loading","usePermission","canDelete","canEdit","filterData","useCallback","name","toLowerCase","includes","sortData","list","deserializeSorters","sortField","sortOrderBy","orderBy","models","get","deleteRecord","item","mutate","mutation","DELETE_CONTENT_MODEL","variables","modelId","update","cache","error","deleteContentModel","message","title","removeModelFromListCache","removeModelFromGroupCache","removeModelFromCache","editRecord","contentModel","push","viewContentEntries","contentModelsDataListModalOverlay","useMemo","map","filteredData","contentModels","disableViewContent","fields","length","time","savedOn","plugin"],"sources":["ContentModelsDataList.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\n/**\n * Package timeago-react does not have types.\n */\n// @ts-ignore\nimport TimeAgo from \"timeago-react\";\nimport { css } from \"emotion\";\nimport get from \"lodash/get\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { DeleteIcon, EditIcon } from \"@webiny/ui/List/DataList/icons\";\nimport { ReactComponent as ViewListIcon } from \"../../icons/view_list.svg\";\nimport { ReactComponent as CloneIcon } from \"../../icons/clone.svg\";\nimport { useApolloClient, useQuery } from \"../../hooks\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport * as UIL from \"@webiny/ui/List\";\nimport { ButtonIcon, ButtonSecondary, IconButton } from \"@webiny/ui/Button\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useConfirmationDialog } from \"@webiny/app-admin/hooks/useConfirmationDialog\";\nimport { removeModelFromGroupCache, removeModelFromListCache, removeModelFromCache } from \"./cache\";\nimport * as GQL from \"../../viewsGraphql\";\nimport { ReactComponent as AddIcon } from \"@webiny/app-admin/assets/icons/add-18px.svg\";\nimport SearchUI from \"@webiny/app-admin/components/SearchUI\";\nimport { deserializeSorters } from \"../utils\";\nimport orderBy from \"lodash/orderBy\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Select } from \"@webiny/ui/Select\";\nimport { ReactComponent as FilterIcon } from \"@webiny/app-admin/assets/icons/filter-24px.svg\";\nimport { CmsEditorContentModel, CmsModel } from \"~/types\";\nimport {\n    DeleteCmsModelMutationResponse,\n    DeleteCmsModelMutationVariables,\n    ListCmsModelsQueryResponse\n} from \"../../viewsGraphql\";\nimport usePermission from \"~/admin/hooks/usePermission\";\n\nconst t = i18n.namespace(\"FormsApp.ContentModelsDataList\");\n\ninterface Sorter {\n    label: string;\n    sorters: string;\n}\nconst SORTERS: Sorter[] = [\n    {\n        label: t`Newest to oldest`,\n        sorters: \"savedOn_DESC\"\n    },\n    {\n        label: t`Oldest to newest`,\n        sorters: \"savedOn_ASC\"\n    },\n    {\n        label: t`Name A-Z`,\n        sorters: \"name_ASC\"\n    },\n    {\n        label: t`Name Z-A`,\n        sorters: \"name_DESC\"\n    }\n];\n\nconst rightAlign = css({\n    alignItems: \"flex-end !important\",\n    justifyContent: \"center !important\"\n});\n\nconst listItemMinHeight = css({\n    minHeight: \"66px !important\"\n});\n\ninterface ContentModelsDataListProps {\n    canCreate: boolean;\n    onCreate: () => void;\n    onClone: (contentModel: CmsEditorContentModel) => void;\n}\nconst ContentModelsDataList: React.FC<ContentModelsDataListProps> = ({\n    canCreate,\n    onCreate,\n    onClone\n}) => {\n    const [filter, setFilter] = useState<string>(\"\");\n    const [sort, setSort] = useState<string>(SORTERS[0].sorters);\n    const { history } = useRouter();\n    const client = useApolloClient();\n    const { showSnackbar } = useSnackbar();\n    const { showConfirmation } = useConfirmationDialog({\n        dataTestId: \"cms-delete-content-model-dialog\"\n    });\n    const { data, loading } = useQuery<ListCmsModelsQueryResponse>(GQL.LIST_CONTENT_MODELS);\n    const { canDelete, canEdit } = usePermission();\n\n    const filterData = useCallback(\n        ({ name }: Pick<CmsModel, \"name\">): boolean => {\n            return name.toLowerCase().includes(filter);\n        },\n        [filter]\n    );\n\n    const sortData = useCallback(\n        (list: CmsModel[]): CmsModel[] => {\n            if (!sort) {\n                return list;\n            }\n            const [sortField, sortOrderBy] = deserializeSorters(sort);\n            return orderBy(list, [sortField], [sortOrderBy]);\n        },\n        [sort]\n    );\n\n    const models: CmsModel[] = loading ? [] : get(data, \"listContentModels.data\", []);\n\n    const deleteRecord = async (item: CmsModel): Promise<void> => {\n        showConfirmation(async () => {\n            await client.mutate<DeleteCmsModelMutationResponse, DeleteCmsModelMutationVariables>({\n                mutation: GQL.DELETE_CONTENT_MODEL,\n                variables: { modelId: item.modelId },\n                update(cache, { data }) {\n                    if (!data) {\n                        showSnackbar(\"Missing data on Delete Content Model Mutation Response.\");\n                        return;\n                    }\n                    const { error } = data.deleteContentModel;\n\n                    if (error) {\n                        showSnackbar(error.message, {\n                            title: t`Something unexpected happened.`\n                        });\n                        return;\n                    }\n\n                    removeModelFromListCache(cache, item);\n                    removeModelFromGroupCache(cache, item);\n                    removeModelFromCache(client, item);\n\n                    showSnackbar(\n                        t`Content model {name} deleted successfully!.`({ name: item.name })\n                    );\n                }\n            });\n        });\n    };\n\n    const editRecord = (contentModel: CmsModel): void => {\n        history.push(\"/cms/content-models/\" + contentModel.modelId);\n    };\n\n    const viewContentEntries = useCallback(contentModel => {\n        return () => history.push(\"/cms/content-entries/\" + contentModel.modelId);\n    }, []);\n\n    const contentModelsDataListModalOverlay = useMemo(\n        () => (\n            <UIL.DataListModalOverlay>\n                <Grid>\n                    <Cell span={12}>\n                        <Select\n                            value={sort}\n                            onChange={setSort}\n                            label={t`Sort by`}\n                            description={\"Sort content models by\"}\n                        >\n                            {SORTERS.map(({ label, sorters }) => {\n                                return (\n                                    <option key={label} value={sorters}>\n                                        {label}\n                                    </option>\n                                );\n                            })}\n                        </Select>\n                    </Cell>\n                </Grid>\n            </UIL.DataListModalOverlay>\n        ),\n        [sort]\n    );\n\n    const filteredData = filter === \"\" ? models : models.filter(filterData);\n    const contentModels = sortData(filteredData);\n\n    return (\n        <UIL.DataList\n            loading={loading}\n            data={contentModels}\n            title={t`Content Models`}\n            actions={\n                canCreate ? (\n                    <ButtonSecondary data-testid=\"new-record-button\" onClick={onCreate}>\n                        <ButtonIcon icon={<AddIcon />} /> {t`New Model`}\n                    </ButtonSecondary>\n                ) : null\n            }\n            search={\n                <SearchUI\n                    value={filter}\n                    onChange={setFilter}\n                    inputPlaceholder={t`Search content models`}\n                />\n            }\n            modalOverlay={contentModelsDataListModalOverlay}\n            modalOverlayAction={\n                <UIL.DataListModalOverlayAction\n                    icon={<FilterIcon />}\n                    data-testid={\"default-data-list.filter\"}\n                />\n            }\n        >\n            {({ data = [] }: { data: CmsModel[] }) => (\n                <UIL.List data-testid=\"default-data-list\">\n                    {data.map(contentModel => {\n                        const disableViewContent = contentModel.fields.length === 0;\n                        const message = disableViewContent\n                            ? \"To view the content, you first need to add a field and save the model\"\n                            : \"View content\";\n                        return (\n                            <UIL.ListItem key={contentModel.modelId} className={listItemMinHeight}>\n                                <UIL.ListItemText>\n                                    {contentModel.name}\n                                    <UIL.ListItemTextSecondary>\n                                        {t`Last modified: {time}.`({\n                                            time: <TimeAgo datetime={contentModel.savedOn} />\n                                        })}\n                                    </UIL.ListItemTextSecondary>\n                                </UIL.ListItemText>\n                                <UIL.ListItemMeta className={rightAlign}>\n                                    <UIL.ListActions>\n                                        {canEdit(contentModel, \"cms.contentModel\") && (\n                                            <>\n                                                <Tooltip\n                                                    content={t`{message}`({ message })}\n                                                    placement={\"top\"}\n                                                >\n                                                    <IconButton\n                                                        data-testid={\n                                                            \"cms-view-content-model-button\"\n                                                        }\n                                                        icon={<ViewListIcon />}\n                                                        label={t`View entries`}\n                                                        onClick={viewContentEntries(contentModel)}\n                                                        disabled={disableViewContent}\n                                                    />\n                                                </Tooltip>\n                                                {contentModel.plugin ? (\n                                                    <Tooltip\n                                                        content={t`Content model is registered via a plugin.`}\n                                                        placement={\"top\"}\n                                                    >\n                                                        <EditIcon\n                                                            disabled\n                                                            data-testid={\n                                                                \"cms-edit-content-model-button\"\n                                                            }\n                                                        />\n                                                    </Tooltip>\n                                                ) : (\n                                                    <Tooltip\n                                                        content={t`Edit content model`}\n                                                        placement={\"top\"}\n                                                    >\n                                                        <EditIcon\n                                                            onClick={() => editRecord(contentModel)}\n                                                            data-testid={\n                                                                \"cms-edit-content-model-button\"\n                                                            }\n                                                        />\n                                                    </Tooltip>\n                                                )}\n                                            </>\n                                        )}\n\n                                        <Tooltip content={\"Clone content model\"} placement={\"top\"}>\n                                            <IconButton\n                                                data-testid={\"cms-clone-content-model-button\"}\n                                                icon={<CloneIcon />}\n                                                label={t`View entries`}\n                                                onClick={() => onClone(contentModel)}\n                                            />\n                                        </Tooltip>\n\n                                        {canDelete(contentModel, \"cms.contentModel\") &&\n                                        contentModel.plugin ? (\n                                            <Tooltip\n                                                content={t`Content model is registered via a plugin.`}\n                                                placement={\"top\"}\n                                            >\n                                                <DeleteIcon\n                                                    disabled\n                                                    data-testid={\"cms-delete-content-model-button\"}\n                                                />\n                                            </Tooltip>\n                                        ) : (\n                                            <Tooltip\n                                                content={t`Delete content model`}\n                                                placement={\"top\"}\n                                            >\n                                                <DeleteIcon\n                                                    onClick={() => deleteRecord(contentModel)}\n                                                    data-testid={\"cms-delete-content-model-button\"}\n                                                />\n                                            </Tooltip>\n                                        )}\n                                    </UIL.ListActions>\n                                </UIL.ListItemMeta>\n                            </UIL.ListItem>\n                        );\n                    })}\n                </UIL.List>\n            )}\n        </UIL.DataList>\n    );\n};\n\nexport default ContentModelsDataList;\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","namespace","SORTERS","label","sorters","rightAlign","css","alignItems","justifyContent","listItemMinHeight","minHeight","ContentModelsDataList","canCreate","onCreate","onClone","useState","filter","setFilter","sort","setSort","useRouter","history","client","useApolloClient","useSnackbar","showSnackbar","useConfirmationDialog","dataTestId","showConfirmation","useQuery","GQL","LIST_CONTENT_MODELS","data","loading","usePermission","canDelete","canEdit","filterData","useCallback","name","toLowerCase","includes","sortData","list","deserializeSorters","sortField","sortOrderBy","orderBy","models","get","deleteRecord","item","mutate","mutation","DELETE_CONTENT_MODEL","variables","modelId","update","cache","error","deleteContentModel","message","title","removeModelFromListCache","removeModelFromGroupCache","removeModelFromCache","editRecord","contentModel","push","viewContentEntries","contentModelsDataListModalOverlay","useMemo","map","filteredData","contentModels","disableViewContent","fields","length","time","savedOn","plugin"],"sources":["ContentModelsDataList.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\n/**\n * Package timeago-react does not have types.\n */\n// @ts-ignore\nimport TimeAgo from \"timeago-react\";\nimport { css } from \"emotion\";\nimport get from \"lodash/get\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { DeleteIcon, EditIcon } from \"@webiny/ui/List/DataList/icons\";\nimport { ReactComponent as ViewListIcon } from \"../../icons/view_list.svg\";\nimport { ReactComponent as CloneIcon } from \"../../icons/clone.svg\";\nimport { useApolloClient, useQuery } from \"../../hooks\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport * as UIL from \"@webiny/ui/List\";\nimport { ButtonIcon, ButtonSecondary, IconButton } from \"@webiny/ui/Button\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useConfirmationDialog } from \"@webiny/app-admin/hooks/useConfirmationDialog\";\nimport { removeModelFromGroupCache, removeModelFromListCache, removeModelFromCache } from \"./cache\";\nimport * as GQL from \"../../viewsGraphql\";\nimport { ReactComponent as AddIcon } from \"@webiny/app-admin/assets/icons/add-18px.svg\";\nimport SearchUI from \"@webiny/app-admin/components/SearchUI\";\nimport { deserializeSorters } from \"../utils\";\nimport orderBy from \"lodash/orderBy\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Select } from \"@webiny/ui/Select\";\nimport { ReactComponent as FilterIcon } from \"@webiny/app-admin/assets/icons/filter-24px.svg\";\nimport { CmsEditorContentModel, CmsModel } from \"~/types\";\nimport {\n    DeleteCmsModelMutationResponse,\n    DeleteCmsModelMutationVariables,\n    ListCmsModelsQueryResponse\n} from \"../../viewsGraphql\";\nimport usePermission from \"~/admin/hooks/usePermission\";\n\nconst t = i18n.namespace(\"FormsApp.ContentModelsDataList\");\n\ninterface Sorter {\n    label: string;\n    sorters: string;\n}\nconst SORTERS: Sorter[] = [\n    {\n        label: t`Newest to oldest`,\n        sorters: \"savedOn_DESC\"\n    },\n    {\n        label: t`Oldest to newest`,\n        sorters: \"savedOn_ASC\"\n    },\n    {\n        label: t`Name A-Z`,\n        sorters: \"name_ASC\"\n    },\n    {\n        label: t`Name Z-A`,\n        sorters: \"name_DESC\"\n    }\n];\n\nconst rightAlign = css({\n    alignItems: \"flex-end !important\",\n    justifyContent: \"center !important\"\n});\n\nconst listItemMinHeight = css({\n    minHeight: \"66px !important\"\n});\n\ninterface ContentModelsDataListProps {\n    canCreate: boolean;\n    onCreate: () => void;\n    onClone: (contentModel: CmsEditorContentModel) => void;\n}\nconst ContentModelsDataList: React.FC<ContentModelsDataListProps> = ({\n    canCreate,\n    onCreate,\n    onClone\n}) => {\n    const [filter, setFilter] = useState<string>(\"\");\n    const [sort, setSort] = useState<string>(SORTERS[0].sorters);\n    const { history } = useRouter();\n    const client = useApolloClient();\n    const { showSnackbar } = useSnackbar();\n    const { showConfirmation } = useConfirmationDialog({\n        dataTestId: \"cms-delete-content-model-dialog\"\n    });\n    const { data, loading } = useQuery<ListCmsModelsQueryResponse>(GQL.LIST_CONTENT_MODELS);\n    const { canDelete, canEdit } = usePermission();\n\n    const filterData = useCallback(\n        ({ name }: Pick<CmsModel, \"name\">): boolean => {\n            return name.toLowerCase().includes(filter);\n        },\n        [filter]\n    );\n\n    const sortData = useCallback(\n        (list: CmsModel[]): CmsModel[] => {\n            if (!sort) {\n                return list;\n            }\n            const [sortField, sortOrderBy] = deserializeSorters(sort);\n            return orderBy(list, [sortField], [sortOrderBy]);\n        },\n        [sort]\n    );\n\n    const models: CmsModel[] = loading ? [] : get(data, \"listContentModels.data\", []);\n\n    const deleteRecord = async (item: CmsModel): Promise<void> => {\n        showConfirmation(async () => {\n            await client.mutate<DeleteCmsModelMutationResponse, DeleteCmsModelMutationVariables>({\n                mutation: GQL.DELETE_CONTENT_MODEL,\n                variables: { modelId: item.modelId },\n                update(cache, { data }) {\n                    if (!data) {\n                        showSnackbar(\"Missing data on Delete Content Model Mutation Response.\");\n                        return;\n                    }\n                    const { error } = data.deleteContentModel;\n\n                    if (error) {\n                        showSnackbar(error.message, {\n                            title: t`Something unexpected happened.`\n                        });\n                        return;\n                    }\n\n                    removeModelFromListCache(cache, item);\n                    removeModelFromGroupCache(cache, item);\n                    removeModelFromCache(client, item);\n\n                    showSnackbar(\n                        t`Content model {name} deleted successfully!.`({ name: item.name })\n                    );\n                }\n            });\n        });\n    };\n\n    const editRecord = (contentModel: CmsModel): void => {\n        history.push(\"/cms/content-models/\" + contentModel.modelId);\n    };\n\n    const viewContentEntries = useCallback(contentModel => {\n        return () => history.push(\"/cms/content-entries/\" + contentModel.modelId);\n    }, []);\n\n    const contentModelsDataListModalOverlay = useMemo(\n        () => (\n            <UIL.DataListModalOverlay>\n                <Grid>\n                    <Cell span={12}>\n                        <Select\n                            value={sort}\n                            onChange={setSort}\n                            label={t`Sort by`}\n                            description={\"Sort content models by\"}\n                        >\n                            {SORTERS.map(({ label, sorters }) => {\n                                return (\n                                    <option key={label} value={sorters}>\n                                        {label}\n                                    </option>\n                                );\n                            })}\n                        </Select>\n                    </Cell>\n                </Grid>\n            </UIL.DataListModalOverlay>\n        ),\n        [sort]\n    );\n\n    const filteredData = filter === \"\" ? models : models.filter(filterData);\n    const contentModels = sortData(filteredData);\n\n    return (\n        <UIL.DataList\n            loading={loading}\n            data={contentModels}\n            title={t`Content Models`}\n            actions={\n                canCreate ? (\n                    <ButtonSecondary data-testid=\"new-record-button\" onClick={onCreate}>\n                        <ButtonIcon icon={<AddIcon />} /> {t`New Model`}\n                    </ButtonSecondary>\n                ) : null\n            }\n            search={\n                <SearchUI\n                    value={filter}\n                    onChange={setFilter}\n                    inputPlaceholder={t`Search content models`}\n                />\n            }\n            modalOverlay={contentModelsDataListModalOverlay}\n            modalOverlayAction={\n                <UIL.DataListModalOverlayAction\n                    icon={<FilterIcon />}\n                    data-testid={\"default-data-list.filter\"}\n                />\n            }\n        >\n            {({ data = [] }: { data: CmsModel[] }) => (\n                <UIL.List data-testid=\"default-data-list\">\n                    {data.map(contentModel => {\n                        const disableViewContent = contentModel.fields.length === 0;\n                        const message = disableViewContent\n                            ? \"To view the content, you first need to add a field and save the model\"\n                            : \"View content\";\n                        return (\n                            <UIL.ListItem key={contentModel.modelId} className={listItemMinHeight}>\n                                <UIL.ListItemText>\n                                    {contentModel.name}\n                                    <UIL.ListItemTextSecondary>\n                                        {t`Last modified: {time}.`({\n                                            time: contentModel.savedOn ? (\n                                                <TimeAgo datetime={contentModel.savedOn} />\n                                            ) : (\n                                                \"N/A\"\n                                            )\n                                        })}\n                                    </UIL.ListItemTextSecondary>\n                                </UIL.ListItemText>\n                                <UIL.ListItemMeta className={rightAlign}>\n                                    <UIL.ListActions>\n                                        {canEdit(contentModel, \"cms.contentModel\") && (\n                                            <>\n                                                <Tooltip\n                                                    content={t`{message}`({ message })}\n                                                    placement={\"top\"}\n                                                >\n                                                    <IconButton\n                                                        data-testid={\n                                                            \"cms-view-content-model-button\"\n                                                        }\n                                                        icon={<ViewListIcon />}\n                                                        label={t`View entries`}\n                                                        onClick={viewContentEntries(contentModel)}\n                                                        disabled={disableViewContent}\n                                                    />\n                                                </Tooltip>\n                                                {contentModel.plugin ? (\n                                                    <Tooltip\n                                                        content={t`Content model is registered via a plugin.`}\n                                                        placement={\"top\"}\n                                                    >\n                                                        <EditIcon\n                                                            disabled\n                                                            data-testid={\n                                                                \"cms-edit-content-model-button\"\n                                                            }\n                                                        />\n                                                    </Tooltip>\n                                                ) : (\n                                                    <Tooltip\n                                                        content={t`Edit content model`}\n                                                        placement={\"top\"}\n                                                    >\n                                                        <EditIcon\n                                                            onClick={() => editRecord(contentModel)}\n                                                            data-testid={\n                                                                \"cms-edit-content-model-button\"\n                                                            }\n                                                        />\n                                                    </Tooltip>\n                                                )}\n                                            </>\n                                        )}\n\n                                        <Tooltip content={\"Clone content model\"} placement={\"top\"}>\n                                            <IconButton\n                                                data-testid={\"cms-clone-content-model-button\"}\n                                                icon={<CloneIcon />}\n                                                label={t`View entries`}\n                                                onClick={() => onClone(contentModel)}\n                                            />\n                                        </Tooltip>\n\n                                        {canDelete(contentModel, \"cms.contentModel\") &&\n                                        contentModel.plugin ? (\n                                            <Tooltip\n                                                content={t`Content model is registered via a plugin.`}\n                                                placement={\"top\"}\n                                            >\n                                                <DeleteIcon\n                                                    disabled\n                                                    data-testid={\"cms-delete-content-model-button\"}\n                                                />\n                                            </Tooltip>\n                                        ) : (\n                                            <Tooltip\n                                                content={t`Delete content model`}\n                                                placement={\"top\"}\n                                            >\n                                                <DeleteIcon\n                                                    onClick={() => deleteRecord(contentModel)}\n                                                    data-testid={\"cms-delete-content-model-button\"}\n                                                />\n                                            </Tooltip>\n                                        )}\n                                    </UIL.ListActions>\n                                </UIL.ListItemMeta>\n                            </UIL.ListItem>\n                        );\n                    })}\n                </UIL.List>\n            )}\n        </UIL.DataList>\n    );\n};\n\nexport default ContentModelsDataList;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/app-headless-cms",
-	"version": "5.33.2",
+	"version": "5.33.3-beta.0",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -26,20 +26,20 @@
 		"@fortawesome/react-fontawesome": "0.1.19",
 		"@svgr/webpack": "6.3.1",
 		"@types/react": "17.0.39",
-		"@webiny/app": "5.33.2",
-		"@webiny/app-admin": "5.33.2",
-		"@webiny/app-graphql-playground": "5.33.2",
-		"@webiny/app-i18n": "5.33.2",
-		"@webiny/app-plugin-admin-welcome-screen": "5.33.2",
-		"@webiny/app-security": "5.33.2",
-		"@webiny/error": "5.33.2",
-		"@webiny/form": "5.33.2",
-		"@webiny/plugins": "5.33.2",
-		"@webiny/react-composition": "5.33.2",
-		"@webiny/react-router": "5.33.2",
-		"@webiny/ui": "5.33.2",
-		"@webiny/utils": "5.33.2",
-		"@webiny/validation": "5.33.2",
+		"@webiny/app": "5.33.3-beta.0",
+		"@webiny/app-admin": "5.33.3-beta.0",
+		"@webiny/app-graphql-playground": "5.33.3-beta.0",
+		"@webiny/app-i18n": "5.33.3-beta.0",
+		"@webiny/app-plugin-admin-welcome-screen": "5.33.3-beta.0",
+		"@webiny/app-security": "5.33.3-beta.0",
+		"@webiny/error": "5.33.3-beta.0",
+		"@webiny/form": "5.33.3-beta.0",
+		"@webiny/plugins": "5.33.3-beta.0",
+		"@webiny/react-composition": "5.33.3-beta.0",
+		"@webiny/react-router": "5.33.3-beta.0",
+		"@webiny/ui": "5.33.3-beta.0",
+		"@webiny/utils": "5.33.3-beta.0",
+		"@webiny/validation": "5.33.3-beta.0",
 		"apollo-cache": "1.3.5",
 		"apollo-client": "2.6.10",
 		"apollo-link": "1.2.14",
@@ -72,8 +72,8 @@
 		"@babel/preset-env": "^7.16.4",
 		"@babel/preset-react": "^7.16.0",
 		"@babel/preset-typescript": "^7.16.0",
-		"@webiny/cli": "^5.33.2",
-		"@webiny/project-utils": "^5.33.2",
+		"@webiny/cli": "^5.33.3-beta.0",
+		"@webiny/project-utils": "^5.33.3-beta.0",
 		"babel-plugin-emotion": "^9.2.8",
 		"babel-plugin-lodash": "^3.3.4",
 		"babel-plugin-module-resolver": "^4.1.0",
@@ -104,5 +104,5 @@
 			]
 		}
 	},
-	"gitHead": "eecb36a8a27277c50a8c9373c7f49ae390348b40"
+	"gitHead": "3222a0878e8c6fa15b8c69378fdb7cfc6f473b75"
 }

package/admin/plugins/fieldRenderers/object/singleObject.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","contentModel","Bind","settings","label","helpText","fieldsWrapperStyle","fields","layout"],"sources":["singleObject.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { SimpleFormHeader } from \"@webiny/app-admin/components/SimpleForm\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { fieldsWrapperStyle } from \"./StyledComponents\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-object\",\n    renderer: {\n        rendererName: \"object\",\n        name: t`Object`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !field.multipleValues;\n        },\n        render({ field, getBind, contentModel }) {\n            const Bind = getBind();\n\n            const settings = field.settings || {};\n\n            return (\n                <Grid>\n                    <Cell span={12}>\n                        <SimpleFormHeader title={field.label} />\n                        {field.helpText && (\n                            <FormElementMessage>{field.helpText}</FormElementMessage>\n                        )}\n                    </Cell>\n                    <Cell span={12} className={fieldsWrapperStyle}>\n                        <Fields\n                            Bind={Bind}\n                            contentModel={contentModel}\n                            fields={settings.fields || []}\n                            layout={settings.layout || []}\n                        />\n                    </Cell>\n                </Grid>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,kCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,QADR;IAENF,IAAI,EAAEL,CAAF,yFAFE;IAGNQ,WAAW,EAAER,CAAF,6GAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACN,IAAN,KAAe,QAAf,IAA2B,CAACM,KAAK,CAACC,cAAzC;IACH,CANK;IAONC,MAPM,yBAOmC;MAAA,IAAhCF,KAAgC,SAAhCA,KAAgC;MAAA,IAAzBG,OAAyB,SAAzBA,OAAyB;MAAA,IAAhBC,YAAgB,SAAhBA,YAAgB;MACrC,IAAMC,IAAI,GAAGF,OAAO,EAApB;MAEA,IAAMG,QAAQ,GAAGN,KAAK,CAACM,QAAN,IAAkB,EAAnC;MAEA,oBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,4BAAD;QAAkB,KAAK,EAAEN,KAAK,CAACO;MAA/B,EADJ,EAEKP,KAAK,CAACQ,QAAN,iBACG,6BAAC,sCAAD,QAAqBR,KAAK,CAACQ,QAA3B,CAHR,CADJ,eAOI,6BAAC,UAAD;QAAM,IAAI,EAAE,EAAZ;QAAgB,SAAS,EAAEC;MAA3B,gBACI,6BAAC,cAAD;QACI,IAAI,EAAEJ,IADV;QAEI,YAAY,EAAED,YAFlB;QAGI,MAAM,EAAEE,QAAQ,CAACI,MAAT,IAAmB,EAH/B;QAII,MAAM,EAAEJ,QAAQ,CAACK,MAAT,IAAmB;MAJ/B,EADJ,CAPJ,CADJ;IAkBH;EA9BK;AAH+B,CAA7C;eAqCelB,M"}