@webiny/app-headless-cms 6.0.0-rc.1 → 6.0.0-rc.3

package/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","DeleteIcon","makeDecoratable","useConfirmationDialog","Accordion","Tooltip","AddTemplateButton","TemplateIcon","TemplateProvider","Fields","ParentFieldProvider","ParentValueIndexProvider","ModelFieldProvider","SingleValueItemContainer","props","template","actions","children","createElement","Item","title","name","description","icon","Fragment","Action","trigger","content","onClick","onDelete","SingleValueDynamicZone","field","bind","contentModel","getBind","showConfirmation","message","acceptLabel","cancelLabel","onTemplate","onChange","_templateId","id","__typename","templates","settings","value","find","tpl","undefined","Bind","unsetValue","path","parentName","index","background","variant","fields","layout"],"sources":["SingleValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { makeDecoratable, useConfirmationDialog } from \"@webiny/app-admin\";\nimport { Accordion, Tooltip } from \"@webiny/admin-ui\";\nimport { AddTemplateButton } from \"./AddTemplate.js\";\nimport { TemplateIcon } from \"./TemplateIcon.js\";\nimport { TemplateProvider } from \"./TemplateProvider.js\";\nimport type {\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField,\n    CmsDynamicZoneTemplateWithTypename\n} from \"~/types.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport { ParentFieldProvider } from \"~/admin/components/ContentEntryForm/ParentValue.js\";\nimport {\n    ParentValueIndexProvider,\n    ModelFieldProvider\n} from \"~/admin/components/ModelFieldProvider/index.js\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\ninterface SingleValueDynamicZoneProps {\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\ninterface TemplateValue {\n    _templateId: string;\n    [key: string]: any;\n}\n\nexport interface SingleValueItemContainerProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    onDelete: () => void;\n    title: React.ReactNode;\n    description: string;\n    icon: JSX.Element;\n    actions?: JSX.Element;\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const SingleValueItemContainer = makeDecoratable(\n    \"SingleValueItemContainer\",\n    (props: SingleValueItemContainerProps) => {\n        const { template, actions, children } = props;\n        return (\n            <Accordion.Item\n                title={template.name}\n                description={template.description}\n                icon={<TemplateIcon icon={template.icon} />}\n                actions={\n                    <>\n                        {actions ?? null}\n                        <Accordion.Item.Action\n                            icon={<Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />}\n                            onClick={props.onDelete}\n                        />\n                    </>\n                }\n            >\n                {children}\n            </Accordion.Item>\n        );\n    }\n);\n\nexport const SingleValueDynamicZone = ({\n    field,\n    bind,\n    contentModel,\n    getBind\n}: SingleValueDynamicZoneProps) => {\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to remove this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const onTemplate = (template: CmsDynamicZoneTemplateWithTypename) => {\n        bind.onChange({ _templateId: template.id, __typename: template.__typename });\n    };\n\n    const templates = field.settings?.templates || [];\n\n    const template: CmsDynamicZoneTemplate | undefined = bind.value\n        ? templates.find(tpl => tpl.id === bind.value._templateId)\n        : undefined;\n\n    const Bind = getBind();\n\n    const unsetValue = () => {\n        showConfirmation(() => {\n            bind.onChange(null);\n        });\n    };\n\n    return (\n        <>\n            {template ? (\n                <ParentFieldProvider value={bind.value} path={Bind.parentName}>\n                    <ParentValueIndexProvider index={-1}>\n                        <ModelFieldProvider field={field}>\n                            <Accordion background={\"base\"} variant={\"container\"}>\n                                <SingleValueItemContainer\n                                    template={template}\n                                    value={bind.value}\n                                    contentModel={contentModel}\n                                    onDelete={unsetValue}\n                                    title={template.name}\n                                    description={template.description}\n                                    icon={<TemplateIcon icon={template.icon} />}\n                                >\n                                    <TemplateProvider template={template}>\n                                        <Fields\n                                            fields={template.fields}\n                                            layout={template.layout || []}\n                                            contentModel={contentModel}\n                                            Bind={Bind}\n                                        />\n                                    </TemplateProvider>\n                                </SingleValueItemContainer>\n                            </Accordion>\n                        </ModelFieldProvider>\n                    </ParentValueIndexProvider>\n                </ParentFieldProvider>\n            ) : null}\n            {bind.value ? null : <AddTemplateButton onTemplate={onTemplate} />}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","DeleteIcon","makeDecoratable","useConfirmationDialog","Accordion","Tooltip","AddTemplateButton","TemplateIcon","TemplateProvider","Fields","ParentFieldProvider","useEffectiveRules","ParentValueIndexProvider","ModelFieldProvider","useModelField","SingleValueItemContainer","props","template","actions","children","disabled","accordionActions","createElement","Fragment","Item","Action","icon","trigger","content","onClick","onDelete","title","name","description","SingleValueDynamicZone","bind","contentModel","getBind","field","rules","canEdit","showConfirmation","message","acceptLabel","cancelLabel","onTemplate","onChange","_templateId","id","__typename","templates","settings","value","find","tpl","undefined","Bind","unsetValue","path","parentName","index","background","variant","fields","layout"],"sources":["SingleValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { makeDecoratable, useConfirmationDialog } from \"@webiny/app-admin\";\nimport { Accordion, Tooltip } from \"@webiny/admin-ui\";\nimport { AddTemplateButton } from \"./AddTemplate.js\";\nimport { TemplateIcon } from \"./TemplateIcon.js\";\nimport { TemplateProvider } from \"./TemplateProvider.js\";\nimport type {\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField,\n    CmsDynamicZoneTemplateWithTypename\n} from \"~/types.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport { ParentFieldProvider } from \"~/admin/components/ContentEntryForm/ParentValue.js\";\nimport { useEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport {\n    ParentValueIndexProvider,\n    ModelFieldProvider,\n    useModelField\n} from \"~/admin/components/ModelFieldProvider/index.js\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\ninterface SingleValueDynamicZoneProps {\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\ninterface TemplateValue {\n    _templateId: string;\n    [key: string]: any;\n}\n\nexport interface SingleValueItemContainerProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    onDelete: () => void;\n    title: React.ReactNode;\n    description: string;\n    disabled?: boolean;\n    icon: JSX.Element;\n    actions?: JSX.Element;\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const SingleValueItemContainer = makeDecoratable(\n    \"SingleValueItemContainer\",\n    (props: SingleValueItemContainerProps) => {\n        const { template, actions, children, disabled = false } = props;\n\n        const accordionActions = disabled ? null : (\n            <>\n                {actions ?? null}\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />}\n                    onClick={props.onDelete}\n                />\n            </>\n        );\n\n        return (\n            <Accordion.Item\n                title={template.name}\n                description={template.description}\n                icon={<TemplateIcon icon={template.icon} />}\n                actions={accordionActions}\n            >\n                {children}\n            </Accordion.Item>\n        );\n    }\n);\n\nexport const SingleValueDynamicZone = ({\n    bind,\n    contentModel,\n    getBind\n}: SingleValueDynamicZoneProps) => {\n    const { field } = useModelField();\n    const rules = useEffectiveRules(field);\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to remove this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const onTemplate = (template: CmsDynamicZoneTemplateWithTypename) => {\n        bind.onChange({ _templateId: template.id, __typename: template.__typename });\n    };\n\n    const templates = field.settings?.templates || [];\n\n    const template: CmsDynamicZoneTemplate | undefined = bind.value\n        ? templates.find(tpl => tpl.id === bind.value._templateId)\n        : undefined;\n\n    const Bind = getBind();\n\n    const unsetValue = () => {\n        showConfirmation(() => {\n            bind.onChange(null);\n        });\n    };\n\n    return (\n        <>\n            {template ? (\n                <ParentFieldProvider value={bind.value} path={Bind.parentName}>\n                    <ParentValueIndexProvider index={-1}>\n                        <ModelFieldProvider field={field}>\n                            <Accordion background={\"base\"} variant={\"container\"}>\n                                <SingleValueItemContainer\n                                    disabled={!disabled}\n                                    template={template}\n                                    value={bind.value}\n                                    contentModel={contentModel}\n                                    onDelete={unsetValue}\n                                    title={template.name}\n                                    description={template.description}\n                                    icon={<TemplateIcon icon={template.icon} />}\n                                >\n                                    <TemplateProvider template={template}>\n                                        <Fields\n                                            fields={template.fields}\n                                            layout={template.layout || []}\n                                            contentModel={contentModel}\n                                            Bind={Bind}\n                                        />\n                                    </TemplateProvider>\n                                </SingleValueItemContainer>\n                            </Accordion>\n                        </ModelFieldProvider>\n                    </ParentValueIndexProvider>\n                </ParentFieldProvider>\n            ) : null}\n            {bind.value ? null : <AddTemplateButton onTemplate={onTemplate} />}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/lexicalText/lexicalTextInput.js

@@ -6,6 +6,7 @@ import { FormComponentNote } from "@webiny/admin-ui";
 import { FormComponentDescription } from "@webiny/admin-ui";
 import { useForm } from "@webiny/form";
 import { LexicalCmsEditor } from "../../../components/LexicalCmsEditor/LexicalCmsEditor.js";
+import { useEffectiveRules, useModelField } from "@webiny/app-headless-cms-common";
 const t = i18n.ns("app-headless-cms/admin/fields/rich-text");
 const getKey = (id, field) => {
   const formId = id || "new";
@@ -24,25 +25,33 @@ const plugin = {
       return [field.type === "rich-text", !field.list, !get(field, "predefinedValues.enabled")].every(Boolean);
     },
     render({
-      field,
       getBind
     }) {
+      const {
+        field
+      } = useModelField();
+      const rules = useEffectiveRules(field);
       const form = useForm();
       const Bind = getBind();
+      const disabled = !rules.canEdit || rules.disabled;
       return /*#__PURE__*/React.createElement(Bind, null, bind => {
         return /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(FormComponentLabel, {
           text: field.label,
-          hint: field.help
+          hint: field.help,
+          disabled: disabled
         }), /*#__PURE__*/React.createElement(FormComponentDescription, {
-          text: field.description
+          text: field.description,
+          disabled: disabled
         }), /*#__PURE__*/React.createElement(LexicalCmsEditor, {
+          disabled: disabled,
           value: bind.value,
           onChange: bind.onChange,
           key: getKey(form.data.id, field),
           placeholder: field.placeholder,
           "data-testid": `fr.input.lexical.${field.label}`
         }), field.note ? /*#__PURE__*/React.createElement(FormComponentNote, {
-          text: field.note
+          text: field.note,
+          disabled: disabled
         }) : null);
       });
     }

package/admin/plugins/fieldRenderers/lexicalText/lexicalTextInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","get","i18n","FormComponentLabel","FormComponentNote","FormComponentDescription","useForm","LexicalCmsEditor","t","ns","getKey","id","field","formId","fieldId","plugin","type","name","renderer","rendererName","description","canUse","list","every","Boolean","render","getBind","form","Bind","createElement","bind","ValidationContainer","text","label","hint","help","value","onChange","key","data","placeholder","note"],"sources":["lexicalTextInput.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { FormComponentLabel } from \"@webiny/admin-ui\";\nimport { FormComponentNote } from \"@webiny/admin-ui\";\nimport { FormComponentDescription } from \"@webiny/admin-ui\";\nimport type { CmsModelFieldRendererPlugin, CmsModelField } from \"~/types.js\";\nimport { useForm } from \"@webiny/form\";\nimport { LexicalCmsEditor } from \"~/admin/components/LexicalCmsEditor/LexicalCmsEditor.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/rich-text\");\n\nconst getKey = (id: string | undefined, field: CmsModelField): string => {\n    const formId = id || \"new\";\n    return `${formId}.${field.fieldId}`;\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-lexical\",\n    renderer: {\n        rendererName: \"lexical-text-input\",\n        name: t`Lexical Text Input`,\n        description: t`Renders a lexical text editor.`,\n        canUse({ field }) {\n            return [\n                field.type === \"rich-text\",\n                !field.list,\n                !get(field, \"predefinedValues.enabled\")\n            ].every(Boolean);\n        },\n        render({ field, getBind }) {\n            const form = useForm();\n\n            const Bind = getBind();\n\n            return (\n                <Bind>\n                    {bind => {\n                        return (\n                            <Bind.ValidationContainer>\n                                <FormComponentLabel text={field.label} hint={field.help} />\n                                <FormComponentDescription text={field.description} />\n                                <LexicalCmsEditor\n                                    value={bind.value}\n                                    onChange={bind.onChange}\n                                    key={getKey(form.data.id, field)}\n                                    placeholder={field.placeholder}\n                                    data-testid={`fr.input.lexical.${field.label}`}\n                                />\n                                {field.note ? <FormComponentNote text={field.note} /> : null}\n                            </Bind.ValidationContainer>\n                        );\n                    }}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAC/B,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,kBAAkB,QAAQ,kBAAkB;AACrD,SAASC,iBAAiB,QAAQ,kBAAkB;AACpD,SAASC,wBAAwB,QAAQ,kBAAkB;AAE3D,SAASC,OAAO,QAAQ,cAAc;AACtC,SAASC,gBAAgB;AAEzB,MAAMC,CAAC,GAAGN,IAAI,CAACO,EAAE,CAAC,yCAAyC,CAAC;AAE5D,MAAMC,MAAM,GAAGA,CAACC,EAAsB,EAAEC,KAAoB,KAAa;EACrE,MAAMC,MAAM,GAAGF,EAAE,IAAI,KAAK;EAC1B,OAAO,GAAGE,MAAM,IAAID,KAAK,CAACE,OAAO,EAAE;AACvC,CAAC;AAED,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,mCAAmC;EACzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,oBAAoB;IAClCF,IAAI,EAAET,CAAC,oBAAoB;IAC3BY,WAAW,EAAEZ,CAAC,gCAAgC;IAC9Ca,MAAMA,CAAC;MAAET;IAAM,CAAC,EAAE;MACd,OAAO,CACHA,KAAK,CAACI,IAAI,KAAK,WAAW,EAC1B,CAACJ,KAAK,CAACU,IAAI,EACX,CAACrB,GAAG,CAACW,KAAK,EAAE,0BAA0B,CAAC,CAC1C,CAACW,KAAK,CAACC,OAAO,CAAC;IACpB,CAAC;IACDC,MAAMA,CAAC;MAAEb,KAAK;MAAEc;IAAQ,CAAC,EAAE;MACvB,MAAMC,IAAI,GAAGrB,OAAO,CAAC,CAAC;MAEtB,MAAMsB,IAAI,GAAGF,OAAO,CAAC,CAAC;MAEtB,oBACI1B,KAAA,CAAA6B,aAAA,CAACD,IAAI,QACAE,IAAI,IAAI;QACL,oBACI9B,KAAA,CAAA6B,aAAA,CAACD,IAAI,CAACG,mBAAmB,qBACrB/B,KAAA,CAAA6B,aAAA,CAAC1B,kBAAkB;UAAC6B,IAAI,EAAEpB,KAAK,CAACqB,KAAM;UAACC,IAAI,EAAEtB,KAAK,CAACuB;QAAK,CAAE,CAAC,eAC3DnC,KAAA,CAAA6B,aAAA,CAACxB,wBAAwB;UAAC2B,IAAI,EAAEpB,KAAK,CAACQ;QAAY,CAAE,CAAC,eACrDpB,KAAA,CAAA6B,aAAA,CAACtB,gBAAgB;UACb6B,KAAK,EAAEN,IAAI,CAACM,KAAM;UAClBC,QAAQ,EAAEP,IAAI,CAACO,QAAS;UACxBC,GAAG,EAAE5B,MAAM,CAACiB,IAAI,CAACY,IAAI,CAAC5B,EAAE,EAAEC,KAAK,CAAE;UACjC4B,WAAW,EAAE5B,KAAK,CAAC4B,WAAY;UAC/B,eAAa,oBAAoB5B,KAAK,CAACqB,KAAK;QAAG,CAClD,CAAC,EACDrB,KAAK,CAAC6B,IAAI,gBAAGzC,KAAA,CAAA6B,aAAA,CAACzB,iBAAiB;UAAC4B,IAAI,EAAEpB,KAAK,CAAC6B;QAAK,CAAE,CAAC,GAAG,IAClC,CAAC;MAEnC,CACE,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAe1B,MAAM","ignoreList":[]}
+{"version":3,"names":["React","get","i18n","FormComponentLabel","FormComponentNote","FormComponentDescription","useForm","LexicalCmsEditor","useEffectiveRules","useModelField","t","ns","getKey","id","field","formId","fieldId","plugin","type","name","renderer","rendererName","description","canUse","list","every","Boolean","render","getBind","rules","form","Bind","disabled","canEdit","createElement","bind","ValidationContainer","text","label","hint","help","value","onChange","key","data","placeholder","note"],"sources":["lexicalTextInput.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { FormComponentLabel } from \"@webiny/admin-ui\";\nimport { FormComponentNote } from \"@webiny/admin-ui\";\nimport { FormComponentDescription } from \"@webiny/admin-ui\";\nimport type { CmsModelFieldRendererPlugin, CmsModelField } from \"~/types.js\";\nimport { useForm } from \"@webiny/form\";\nimport { LexicalCmsEditor } from \"~/admin/components/LexicalCmsEditor/LexicalCmsEditor.js\";\nimport { useEffectiveRules, useModelField } from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/rich-text\");\n\nconst getKey = (id: string | undefined, field: CmsModelField): string => {\n    const formId = id || \"new\";\n    return `${formId}.${field.fieldId}`;\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-lexical\",\n    renderer: {\n        rendererName: \"lexical-text-input\",\n        name: t`Lexical Text Input`,\n        description: t`Renders a lexical text editor.`,\n        canUse({ field }) {\n            return [\n                field.type === \"rich-text\",\n                !field.list,\n                !get(field, \"predefinedValues.enabled\")\n            ].every(Boolean);\n        },\n        render({ getBind }) {\n            const { field } = useModelField();\n            const rules = useEffectiveRules(field);\n            const form = useForm();\n\n            const Bind = getBind();\n\n            const disabled = !rules.canEdit || rules.disabled;\n\n            return (\n                <Bind>\n                    {bind => {\n                        return (\n                            <Bind.ValidationContainer>\n                                <FormComponentLabel\n                                    text={field.label}\n                                    hint={field.help}\n                                    disabled={disabled}\n                                />\n                                <FormComponentDescription\n                                    text={field.description}\n                                    disabled={disabled}\n                                />\n                                <LexicalCmsEditor\n                                    disabled={disabled}\n                                    value={bind.value}\n                                    onChange={bind.onChange}\n                                    key={getKey(form.data.id, field)}\n                                    placeholder={field.placeholder}\n                                    data-testid={`fr.input.lexical.${field.label}`}\n                                />\n                                {field.note ? (\n                                    <FormComponentNote text={field.note} disabled={disabled} />\n                                ) : null}\n                            </Bind.ValidationContainer>\n                        );\n                    }}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAC/B,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,kBAAkB,QAAQ,kBAAkB;AACrD,SAASC,iBAAiB,QAAQ,kBAAkB;AACpD,SAASC,wBAAwB,QAAQ,kBAAkB;AAE3D,SAASC,OAAO,QAAQ,cAAc;AACtC,SAASC,gBAAgB;AACzB,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,iCAAiC;AAElF,MAAMC,CAAC,GAAGR,IAAI,CAACS,EAAE,CAAC,yCAAyC,CAAC;AAE5D,MAAMC,MAAM,GAAGA,CAACC,EAAsB,EAAEC,KAAoB,KAAa;EACrE,MAAMC,MAAM,GAAGF,EAAE,IAAI,KAAK;EAC1B,OAAO,GAAGE,MAAM,IAAID,KAAK,CAACE,OAAO,EAAE;AACvC,CAAC;AAED,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,mCAAmC;EACzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,oBAAoB;IAClCF,IAAI,EAAET,CAAC,oBAAoB;IAC3BY,WAAW,EAAEZ,CAAC,gCAAgC;IAC9Ca,MAAMA,CAAC;MAAET;IAAM,CAAC,EAAE;MACd,OAAO,CACHA,KAAK,CAACI,IAAI,KAAK,WAAW,EAC1B,CAACJ,KAAK,CAACU,IAAI,EACX,CAACvB,GAAG,CAACa,KAAK,EAAE,0BAA0B,CAAC,CAC1C,CAACW,KAAK,CAACC,OAAO,CAAC;IACpB,CAAC;IACDC,MAAMA,CAAC;MAAEC;IAAQ,CAAC,EAAE;MAChB,MAAM;QAAEd;MAAM,CAAC,GAAGL,aAAa,CAAC,CAAC;MACjC,MAAMoB,KAAK,GAAGrB,iBAAiB,CAACM,KAAK,CAAC;MACtC,MAAMgB,IAAI,GAAGxB,OAAO,CAAC,CAAC;MAEtB,MAAMyB,IAAI,GAAGH,OAAO,CAAC,CAAC;MAEtB,MAAMI,QAAQ,GAAG,CAACH,KAAK,CAACI,OAAO,IAAIJ,KAAK,CAACG,QAAQ;MAEjD,oBACIhC,KAAA,CAAAkC,aAAA,CAACH,IAAI,QACAI,IAAI,IAAI;QACL,oBACInC,KAAA,CAAAkC,aAAA,CAACH,IAAI,CAACK,mBAAmB,qBACrBpC,KAAA,CAAAkC,aAAA,CAAC/B,kBAAkB;UACfkC,IAAI,EAAEvB,KAAK,CAACwB,KAAM;UAClBC,IAAI,EAAEzB,KAAK,CAAC0B,IAAK;UACjBR,QAAQ,EAAEA;QAAS,CACtB,CAAC,eACFhC,KAAA,CAAAkC,aAAA,CAAC7B,wBAAwB;UACrBgC,IAAI,EAAEvB,KAAK,CAACQ,WAAY;UACxBU,QAAQ,EAAEA;QAAS,CACtB,CAAC,eACFhC,KAAA,CAAAkC,aAAA,CAAC3B,gBAAgB;UACbyB,QAAQ,EAAEA,QAAS;UACnBS,KAAK,EAAEN,IAAI,CAACM,KAAM;UAClBC,QAAQ,EAAEP,IAAI,CAACO,QAAS;UACxBC,GAAG,EAAE/B,MAAM,CAACkB,IAAI,CAACc,IAAI,CAAC/B,EAAE,EAAEC,KAAK,CAAE;UACjC+B,WAAW,EAAE/B,KAAK,CAAC+B,WAAY;UAC/B,eAAa,oBAAoB/B,KAAK,CAACwB,KAAK;QAAG,CAClD,CAAC,EACDxB,KAAK,CAACgC,IAAI,gBACP9C,KAAA,CAAAkC,aAAA,CAAC9B,iBAAiB;UAACiC,IAAI,EAAEvB,KAAK,CAACgC,IAAK;UAACd,QAAQ,EAAEA;QAAS,CAAE,CAAC,GAC3D,IACkB,CAAC;MAEnC,CACE,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAef,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/lexicalText/lexicalTextInputs.js

@@ -7,6 +7,7 @@ import { LexicalCmsEditor } from "../../../components/LexicalCmsEditor/LexicalCm
 import { useForm } from "@webiny/form";
 import { MultiValueRendererSettings } from "../MultiValueRendererSettings.js";
 import { IconButton } from "@webiny/admin-ui";
+import { CanEditField, useEffectiveRules, useModelField } from "@webiny/app-headless-cms-common";
 const t = i18n.ns("app-headless-cms/admin/fields/rich-text");
 const getKey = (id, field, index) => {
   const formId = id || "new";
@@ -27,26 +28,31 @@ const plugin = {
     render(props) {
       const {
         field
-      } = props;
+      } = useModelField();
+      const rules = useEffectiveRules(field);
       const form = useForm();
-      return /*#__PURE__*/React.createElement(DynamicSection, props, ({
+      const disabled = !rules.canEdit || rules.disabled;
+      return /*#__PURE__*/React.createElement(DynamicSection, Object.assign({}, props, {
+        disabled: disabled
+      }), ({
         bind,
         index
       }) => /*#__PURE__*/React.createElement("div", {
         className: "relative"
       }, /*#__PURE__*/React.createElement(LexicalCmsEditor, {
+        disabled: disabled,
         value: bind.index.value,
         onChange: bind.index.onChange,
         key: getKey(form.data.id, field, index),
         placeholder: field.placeholder
-      }), /*#__PURE__*/React.createElement("div", {
+      }), /*#__PURE__*/React.createElement(CanEditField, null, /*#__PURE__*/React.createElement("div", {
         className: "absolute top-sm right-sm z-10"
       }, /*#__PURE__*/React.createElement(IconButton, {
         variant: "ghost",
         size: "md",
         icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
         onClick: () => bind.field.removeValue(index)
-      }))));
+      })))));
     },
     renderSettings(props) {
       return /*#__PURE__*/React.createElement(MultiValueRendererSettings, props);

package/admin/plugins/fieldRenderers/lexicalText/lexicalTextInputs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","get","i18n","ReactComponent","DeleteIcon","DynamicSection","LexicalCmsEditor","useForm","MultiValueRendererSettings","IconButton","t","ns","getKey","id","field","index","formId","fieldId","plugin","type","name","renderer","rendererName","description","canUse","list","every","Boolean","render","props","form","createElement","bind","className","value","onChange","key","data","placeholder","variant","size","icon","onClick","removeValue","renderSettings"],"sources":["lexicalTextInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsModelField, CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport DynamicSection from \"../DynamicSection.js\";\nimport { LexicalCmsEditor } from \"~/admin/components/LexicalCmsEditor/LexicalCmsEditor.js\";\nimport { useForm } from \"@webiny/form\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings.js\";\nimport { IconButton } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/rich-text\");\n\nconst getKey = (id: string | undefined, field: CmsModelField, index: number): string => {\n    const formId = id || \"new\";\n    return `${formId}.${field.fieldId}.${index}`;\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-lexical-inputs\",\n    renderer: {\n        rendererName: \"lexical-text-inputs\",\n        name: t`Lexical Text Inputs`,\n        description: t`Renders a list of lexical editors.`,\n        canUse({ field }) {\n            return [\n                field.type === \"rich-text\",\n                !!field.list,\n                !get(field, \"predefinedValues.enabled\")\n            ].every(Boolean);\n        },\n        render(props) {\n            const { field } = props;\n            const form = useForm();\n\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => (\n                        <div className={\"relative\"}>\n                            <LexicalCmsEditor\n                                value={bind.index.value}\n                                onChange={bind.index.onChange}\n                                key={getKey(form.data.id, field, index)}\n                                placeholder={field.placeholder}\n                            />\n                            <div className={\"absolute top-sm right-sm z-10\"}>\n                                <IconButton\n                                    variant={\"ghost\"}\n                                    size={\"md\"}\n                                    icon={<DeleteIcon />}\n                                    onClick={() => bind.field.removeValue(index)}\n                                />\n                            </div>\n                        </div>\n                    )}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAC/B,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,OAAOC,cAAc;AACrB,SAASC,gBAAgB;AACzB,SAASC,OAAO,QAAQ,cAAc;AACtC,SAASC,0BAA0B;AACnC,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,MAAMC,CAAC,GAAGR,IAAI,CAACS,EAAE,CAAC,yCAAyC,CAAC;AAE5D,MAAMC,MAAM,GAAGA,CAACC,EAAsB,EAAEC,KAAoB,EAAEC,KAAa,KAAa;EACpF,MAAMC,MAAM,GAAGH,EAAE,IAAI,KAAK;EAC1B,OAAO,GAAGG,MAAM,IAAIF,KAAK,CAACG,OAAO,IAAIF,KAAK,EAAE;AAChD,CAAC;AAED,MAAMG,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,0CAA0C;EAChDC,QAAQ,EAAE;IACNC,YAAY,EAAE,qBAAqB;IACnCF,IAAI,EAAEV,CAAC,qBAAqB;IAC5Ba,WAAW,EAAEb,CAAC,oCAAoC;IAClDc,MAAMA,CAAC;MAAEV;IAAM,CAAC,EAAE;MACd,OAAO,CACHA,KAAK,CAACK,IAAI,KAAK,WAAW,EAC1B,CAAC,CAACL,KAAK,CAACW,IAAI,EACZ,CAACxB,GAAG,CAACa,KAAK,EAAE,0BAA0B,CAAC,CAC1C,CAACY,KAAK,CAACC,OAAO,CAAC;IACpB,CAAC;IACDC,MAAMA,CAACC,KAAK,EAAE;MACV,MAAM;QAAEf;MAAM,CAAC,GAAGe,KAAK;MACvB,MAAMC,IAAI,GAAGvB,OAAO,CAAC,CAAC;MAEtB,oBACIP,KAAA,CAAA+B,aAAA,CAAC1B,cAAc,EAAKwB,KAAK,EACpB,CAAC;QAAEG,IAAI;QAAEjB;MAAM,CAAC,kBACbf,KAAA,CAAA+B,aAAA;QAAKE,SAAS,EAAE;MAAW,gBACvBjC,KAAA,CAAA+B,aAAA,CAACzB,gBAAgB;QACb4B,KAAK,EAAEF,IAAI,CAACjB,KAAK,CAACmB,KAAM;QACxBC,QAAQ,EAAEH,IAAI,CAACjB,KAAK,CAACoB,QAAS;QAC9BC,GAAG,EAAExB,MAAM,CAACkB,IAAI,CAACO,IAAI,CAACxB,EAAE,EAAEC,KAAK,EAAEC,KAAK,CAAE;QACxCuB,WAAW,EAAExB,KAAK,CAACwB;MAAY,CAClC,CAAC,eACFtC,KAAA,CAAA+B,aAAA;QAAKE,SAAS,EAAE;MAAgC,gBAC5CjC,KAAA,CAAA+B,aAAA,CAACtB,UAAU;QACP8B,OAAO,EAAE,OAAQ;QACjBC,IAAI,EAAE,IAAK;QACXC,IAAI,eAAEzC,KAAA,CAAA+B,aAAA,CAAC3B,UAAU,MAAE,CAAE;QACrBsC,OAAO,EAAEA,CAAA,KAAMV,IAAI,CAAClB,KAAK,CAAC6B,WAAW,CAAC5B,KAAK;MAAE,CAChD,CACA,CACJ,CAEG,CAAC;IAEzB,CAAC;IACD6B,cAAcA,CAACf,KAAK,EAAE;MAClB,oBAAO7B,KAAA,CAAA+B,aAAA,CAACvB,0BAA0B,EAAKqB,KAAQ,CAAC;IACpD;EACJ;AACJ,CAAC;AAED,eAAeX,MAAM","ignoreList":[]}
+{"version":3,"names":["React","get","i18n","ReactComponent","DeleteIcon","DynamicSection","LexicalCmsEditor","useForm","MultiValueRendererSettings","IconButton","CanEditField","useEffectiveRules","useModelField","t","ns","getKey","id","field","index","formId","fieldId","plugin","type","name","renderer","rendererName","description","canUse","list","every","Boolean","render","props","rules","form","disabled","canEdit","createElement","Object","assign","bind","className","value","onChange","key","data","placeholder","variant","size","icon","onClick","removeValue","renderSettings"],"sources":["lexicalTextInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsModelField, CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport DynamicSection from \"../DynamicSection.js\";\nimport { LexicalCmsEditor } from \"~/admin/components/LexicalCmsEditor/LexicalCmsEditor.js\";\nimport { useForm } from \"@webiny/form\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings.js\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { CanEditField, useEffectiveRules, useModelField } from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/rich-text\");\n\nconst getKey = (id: string | undefined, field: CmsModelField, index: number): string => {\n    const formId = id || \"new\";\n    return `${formId}.${field.fieldId}.${index}`;\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-lexical-inputs\",\n    renderer: {\n        rendererName: \"lexical-text-inputs\",\n        name: t`Lexical Text Inputs`,\n        description: t`Renders a list of lexical editors.`,\n        canUse({ field }) {\n            return [\n                field.type === \"rich-text\",\n                !!field.list,\n                !get(field, \"predefinedValues.enabled\")\n            ].every(Boolean);\n        },\n        render(props) {\n            const { field } = useModelField();\n            const rules = useEffectiveRules(field);\n            const form = useForm();\n\n            const disabled = !rules.canEdit || rules.disabled;\n\n            return (\n                <DynamicSection {...props} disabled={disabled}>\n                    {({ bind, index }) => (\n                        <div className={\"relative\"}>\n                            <LexicalCmsEditor\n                                disabled={disabled}\n                                value={bind.index.value}\n                                onChange={bind.index.onChange}\n                                key={getKey(form.data.id, field, index)}\n                                placeholder={field.placeholder}\n                            />\n                            <CanEditField>\n                                <div className={\"absolute top-sm right-sm z-10\"}>\n                                    <IconButton\n                                        variant={\"ghost\"}\n                                        size={\"md\"}\n                                        icon={<DeleteIcon />}\n                                        onClick={() => bind.field.removeValue(index)}\n                                    />\n                                </div>\n                            </CanEditField>\n                        </div>\n                    )}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/longText/longText.js

@@ -2,6 +2,7 @@ import React from "react";
 import get from "lodash/get.js";
 import { DelayedOnChange, Textarea } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n/index.js";
+import { useEffectiveRules, useModelField } from "@webiny/app-headless-cms-common";
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 const plugin = {
   type: "cms-editor-field-renderer",
@@ -16,15 +17,20 @@ const plugin = {
       return field.type === "long-text" && !field.list && !get(field, "predefinedValues.enabled");
     },
     render({
-      field,
       getBind
     }) {
+      const {
+        field
+      } = useModelField();
+      const rules = useEffectiveRules(field);
       const Bind = getBind();
+      const disabled = !rules.canEdit || rules.disabled;
       return /*#__PURE__*/React.createElement(Bind, null, bind => /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(DelayedOnChange, {
         value: bind.value,
         onChange: bind.onChange,
         onBlur: bind.validate
       }, /*#__PURE__*/React.createElement(Textarea, {
+        disabled: disabled,
         rows: 5,
         label: field.label,
         placeholder: field.placeholder,

package/admin/plugins/fieldRenderers/longText/longText.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","get","DelayedOnChange","Textarea","i18n","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","getBind","Bind","createElement","bind","ValidationContainer","value","onChange","onBlur","validate","rows","label","placeholder","note","hint","help","validation"],"sources":["longText.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { DelayedOnChange, Textarea } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-long-text-textarea\",\n    renderer: {\n        rendererName: \"long-text-text-area\",\n        name: t`Text Area`,\n        description: t`Renders a simple text area, suitable for larger amounts of text.`,\n        canUse({ field }) {\n            return (\n                field.type === \"long-text\" && !field.list && !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ field, getBind }) {\n            const Bind = getBind();\n\n            return (\n                <Bind>\n                    {bind => (\n                        <Bind.ValidationContainer>\n                            <DelayedOnChange\n                                value={bind.value}\n                                onChange={bind.onChange}\n                                onBlur={bind.validate}\n                            >\n                                <Textarea\n                                    rows={5}\n                                    label={field.label}\n                                    placeholder={field.placeholder}\n                                    description={field.description}\n                                    note={field.note}\n                                    hint={field.help}\n                                    data-testid={`fr.input.longtext.${field.label}`}\n                                    validation={bind.validation}\n                                />\n                            </DelayedOnChange>\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,eAAe,EAAEC,QAAQ,QAAQ,kBAAkB;AAC5D,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,MAAMC,CAAC,GAAGD,IAAI,CAACE,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,8CAA8C;EACpDC,QAAQ,EAAE;IACNC,YAAY,EAAE,qBAAqB;IACnCF,IAAI,EAAEJ,CAAC,WAAW;IAClBO,WAAW,EAAEP,CAAC,kEAAkE;IAChFQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,WAAW,IAAI,CAACM,KAAK,CAACC,IAAI,IAAI,CAACd,GAAG,CAACa,KAAK,EAAE,0BAA0B,CAAC;IAE5F,CAAC;IACDE,MAAMA,CAAC;MAAEF,KAAK;MAAEG;IAAQ,CAAC,EAAE;MACvB,MAAMC,IAAI,GAAGD,OAAO,CAAC,CAAC;MAEtB,oBACIjB,KAAA,CAAAmB,aAAA,CAACD,IAAI,QACAE,IAAI,iBACDpB,KAAA,CAAAmB,aAAA,CAACD,IAAI,CAACG,mBAAmB,qBACrBrB,KAAA,CAAAmB,aAAA,CAACjB,eAAe;QACZoB,KAAK,EAAEF,IAAI,CAACE,KAAM;QAClBC,QAAQ,EAAEH,IAAI,CAACG,QAAS;QACxBC,MAAM,EAAEJ,IAAI,CAACK;MAAS,gBAEtBzB,KAAA,CAAAmB,aAAA,CAAChB,QAAQ;QACLuB,IAAI,EAAE,CAAE;QACRC,KAAK,EAAEb,KAAK,CAACa,KAAM;QACnBC,WAAW,EAAEd,KAAK,CAACc,WAAY;QAC/BhB,WAAW,EAAEE,KAAK,CAACF,WAAY;QAC/BiB,IAAI,EAAEf,KAAK,CAACe,IAAK;QACjBC,IAAI,EAAEhB,KAAK,CAACiB,IAAK;QACjB,eAAa,qBAAqBjB,KAAK,CAACa,KAAK,EAAG;QAChDK,UAAU,EAAEZ,IAAI,CAACY;MAAW,CAC/B,CACY,CACK,CAE5B,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAezB,MAAM","ignoreList":[]}
+{"version":3,"names":["React","get","DelayedOnChange","Textarea","i18n","useEffectiveRules","useModelField","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","getBind","rules","Bind","disabled","canEdit","createElement","bind","ValidationContainer","value","onChange","onBlur","validate","rows","label","placeholder","note","hint","help","validation"],"sources":["longText.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { DelayedOnChange, Textarea } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useEffectiveRules, useModelField } from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-long-text-textarea\",\n    renderer: {\n        rendererName: \"long-text-text-area\",\n        name: t`Text Area`,\n        description: t`Renders a simple text area, suitable for larger amounts of text.`,\n        canUse({ field }) {\n            return (\n                field.type === \"long-text\" && !field.list && !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ getBind }) {\n            const { field } = useModelField();\n            const rules = useEffectiveRules(field);\n            const Bind = getBind();\n\n            const disabled = !rules.canEdit || rules.disabled;\n\n            return (\n                <Bind>\n                    {bind => (\n                        <Bind.ValidationContainer>\n                            <DelayedOnChange\n                                value={bind.value}\n                                onChange={bind.onChange}\n                                onBlur={bind.validate}\n                            >\n                                <Textarea\n                                    disabled={disabled}\n                                    rows={5}\n                                    label={field.label}\n                                    placeholder={field.placeholder}\n                                    description={field.description}\n                                    note={field.note}\n                                    hint={field.help}\n                                    data-testid={`fr.input.longtext.${field.label}`}\n                                    validation={bind.validation}\n                                />\n                            </DelayedOnChange>\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,eAAe,EAAEC,QAAQ,QAAQ,kBAAkB;AAC5D,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,iCAAiC;AAElF,MAAMC,CAAC,GAAGH,IAAI,CAACI,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,8CAA8C;EACpDC,QAAQ,EAAE;IACNC,YAAY,EAAE,qBAAqB;IACnCF,IAAI,EAAEJ,CAAC,WAAW;IAClBO,WAAW,EAAEP,CAAC,kEAAkE;IAChFQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,WAAW,IAAI,CAACM,KAAK,CAACC,IAAI,IAAI,CAAChB,GAAG,CAACe,KAAK,EAAE,0BAA0B,CAAC;IAE5F,CAAC;IACDE,MAAMA,CAAC;MAAEC;IAAQ,CAAC,EAAE;MAChB,MAAM;QAAEH;MAAM,CAAC,GAAGV,aAAa,CAAC,CAAC;MACjC,MAAMc,KAAK,GAAGf,iBAAiB,CAACW,KAAK,CAAC;MACtC,MAAMK,IAAI,GAAGF,OAAO,CAAC,CAAC;MAEtB,MAAMG,QAAQ,GAAG,CAACF,KAAK,CAACG,OAAO,IAAIH,KAAK,CAACE,QAAQ;MAEjD,oBACItB,KAAA,CAAAwB,aAAA,CAACH,IAAI,QACAI,IAAI,iBACDzB,KAAA,CAAAwB,aAAA,CAACH,IAAI,CAACK,mBAAmB,qBACrB1B,KAAA,CAAAwB,aAAA,CAACtB,eAAe;QACZyB,KAAK,EAAEF,IAAI,CAACE,KAAM;QAClBC,QAAQ,EAAEH,IAAI,CAACG,QAAS;QACxBC,MAAM,EAAEJ,IAAI,CAACK;MAAS,gBAEtB9B,KAAA,CAAAwB,aAAA,CAACrB,QAAQ;QACLmB,QAAQ,EAAEA,QAAS;QACnBS,IAAI,EAAE,CAAE;QACRC,KAAK,EAAEhB,KAAK,CAACgB,KAAM;QACnBC,WAAW,EAAEjB,KAAK,CAACiB,WAAY;QAC/BnB,WAAW,EAAEE,KAAK,CAACF,WAAY;QAC/BoB,IAAI,EAAElB,KAAK,CAACkB,IAAK;QACjBC,IAAI,EAAEnB,KAAK,CAACoB,IAAK;QACjB,eAAa,qBAAqBpB,KAAK,CAACgB,KAAK,EAAG;QAChDK,UAAU,EAAEZ,IAAI,CAACY;MAAW,CAC/B,CACY,CACK,CAE5B,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAe5B,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/longText/longTexts.js

@@ -5,6 +5,7 @@ import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
 import DynamicSection from "../DynamicSection.js";
 import { MultiValueRendererSettings } from "../MultiValueRendererSettings.js";
 import { DelayedOnChange, IconButton, Textarea } from "@webiny/admin-ui";
+import { CanEditField, useEffectiveRules, useModelField } from "@webiny/app-headless-cms-common";
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 const plugin = {
   type: "cms-editor-field-renderer",
@@ -19,7 +20,14 @@ const plugin = {
       return field.type === "long-text" && !!field.list && !get(field, "predefinedValues.enabled");
     },
     render(props) {
-      return /*#__PURE__*/React.createElement(DynamicSection, props, ({
+      const {
+        field
+      } = useModelField();
+      const rules = useEffectiveRules(field);
+      const disabled = !rules.canEdit || rules.disabled;
+      return /*#__PURE__*/React.createElement(DynamicSection, Object.assign({}, props, {
+        disabled: disabled
+      }), ({
         bind,
         index
       }) => /*#__PURE__*/React.createElement("div", {
@@ -29,6 +37,7 @@ const plugin = {
         onChange: bind.index.onChange,
         onBlur: bind.index.validate
       }, /*#__PURE__*/React.createElement(Textarea, {
+        disabled: disabled,
         validation: bind.index.validation,
         rows: 5,
         label: t`Value {number}`({
@@ -36,14 +45,14 @@ const plugin = {
         }),
         placeholder: props.field.placeholder,
         "data-testid": `fr.input.longTexts.${props.field.label}.${index + 1}`
-      })), /*#__PURE__*/React.createElement("div", {
+      })), /*#__PURE__*/React.createElement(CanEditField, null, /*#__PURE__*/React.createElement("div", {
         className: "absolute top-xl right-sm z-10"
       }, /*#__PURE__*/React.createElement(IconButton, {
         variant: "ghost",
         size: "md",
         icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
         onClick: () => bind.field.removeValue(index)
-      }))));
+      })))));
     },
     renderSettings(props) {
       return /*#__PURE__*/React.createElement(MultiValueRendererSettings, props);

package/admin/plugins/fieldRenderers/longText/longTexts.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","get","i18n","ReactComponent","DeleteIcon","DynamicSection","MultiValueRendererSettings","DelayedOnChange","IconButton","Textarea","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","props","createElement","bind","index","className","value","onChange","onBlur","validate","validation","rows","label","number","placeholder","variant","size","icon","onClick","removeValue","renderSettings"],"sources":["longTexts.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport DynamicSection from \"../DynamicSection.js\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings.js\";\nimport { DelayedOnChange, IconButton, Textarea } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-long-text-inputs\",\n    renderer: {\n        rendererName: \"long-text-inputs\",\n        name: t`Text Areas`,\n        description: t`Renders a simple list of text areas.`,\n        canUse({ field }) {\n            return (\n                field.type === \"long-text\" &&\n                !!field.list &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => (\n                        <div className={\"relative\"}>\n                            <DelayedOnChange\n                                value={bind.index.value}\n                                onChange={bind.index.onChange}\n                                onBlur={bind.index.validate}\n                            >\n                                <Textarea\n                                    validation={bind.index.validation}\n                                    rows={5}\n                                    label={t`Value {number}`({ number: index + 1 })}\n                                    placeholder={props.field.placeholder}\n                                    data-testid={`fr.input.longTexts.${props.field.label}.${\n                                        index + 1\n                                    }`}\n                                />\n                            </DelayedOnChange>\n                            <div className={\"absolute top-xl right-sm z-10\"}>\n                                <IconButton\n                                    variant={\"ghost\"}\n                                    size={\"md\"}\n                                    icon={<DeleteIcon />}\n                                    onClick={() => bind.field.removeValue(index)}\n                                />\n                            </div>\n                        </div>\n                    )}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,OAAOC,cAAc;AACrB,SAASC,0BAA0B;AACnC,SAASC,eAAe,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,kBAAkB;AAExE,MAAMC,CAAC,GAAGR,IAAI,CAACS,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,4CAA4C;EAClDC,QAAQ,EAAE;IACNC,YAAY,EAAE,kBAAkB;IAChCF,IAAI,EAAEJ,CAAC,YAAY;IACnBO,WAAW,EAAEP,CAAC,sCAAsC;IACpDQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,WAAW,IAC1B,CAAC,CAACM,KAAK,CAACC,IAAI,IACZ,CAACnB,GAAG,CAACkB,KAAK,EAAE,0BAA0B,CAAC;IAE/C,CAAC;IACDE,MAAMA,CAACC,KAAK,EAAE;MACV,oBACItB,KAAA,CAAAuB,aAAA,CAAClB,cAAc,EAAKiB,KAAK,EACpB,CAAC;QAAEE,IAAI;QAAEC;MAAM,CAAC,kBACbzB,KAAA,CAAAuB,aAAA;QAAKG,SAAS,EAAE;MAAW,gBACvB1B,KAAA,CAAAuB,aAAA,CAAChB,eAAe;QACZoB,KAAK,EAAEH,IAAI,CAACC,KAAK,CAACE,KAAM;QACxBC,QAAQ,EAAEJ,IAAI,CAACC,KAAK,CAACG,QAAS;QAC9BC,MAAM,EAAEL,IAAI,CAACC,KAAK,CAACK;MAAS,gBAE5B9B,KAAA,CAAAuB,aAAA,CAACd,QAAQ;QACLsB,UAAU,EAAEP,IAAI,CAACC,KAAK,CAACM,UAAW;QAClCC,IAAI,EAAE,CAAE;QACRC,KAAK,EAAEvB,CAAC,gBAAgB,CAAC;UAAEwB,MAAM,EAAET,KAAK,GAAG;QAAE,CAAC,CAAE;QAChDU,WAAW,EAAEb,KAAK,CAACH,KAAK,CAACgB,WAAY;QACrC,eAAa,sBAAsBb,KAAK,CAACH,KAAK,CAACc,KAAK,IAChDR,KAAK,GAAG,CAAC;MACV,CACN,CACY,CAAC,eAClBzB,KAAA,CAAAuB,aAAA;QAAKG,SAAS,EAAE;MAAgC,gBAC5C1B,KAAA,CAAAuB,aAAA,CAACf,UAAU;QACP4B,OAAO,EAAE,OAAQ;QACjBC,IAAI,EAAE,IAAK;QACXC,IAAI,eAAEtC,KAAA,CAAAuB,aAAA,CAACnB,UAAU,MAAE,CAAE;QACrBmC,OAAO,EAAEA,CAAA,KAAMf,IAAI,CAACL,KAAK,CAACqB,WAAW,CAACf,KAAK;MAAE,CAChD,CACA,CACJ,CAEG,CAAC;IAEzB,CAAC;IACDgB,cAAcA,CAACnB,KAAK,EAAE;MAClB,oBAAOtB,KAAA,CAAAuB,aAAA,CAACjB,0BAA0B,EAAKgB,KAAQ,CAAC;IACpD;EACJ;AACJ,CAAC;AAED,eAAeV,MAAM","ignoreList":[]}
+{"version":3,"names":["React","get","i18n","ReactComponent","DeleteIcon","DynamicSection","MultiValueRendererSettings","DelayedOnChange","IconButton","Textarea","CanEditField","useEffectiveRules","useModelField","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","props","rules","disabled","canEdit","createElement","Object","assign","bind","index","className","value","onChange","onBlur","validate","validation","rows","label","number","placeholder","variant","size","icon","onClick","removeValue","renderSettings"],"sources":["longTexts.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport DynamicSection from \"../DynamicSection.js\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings.js\";\nimport { DelayedOnChange, IconButton, Textarea } from \"@webiny/admin-ui\";\nimport { CanEditField, useEffectiveRules, useModelField } from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-long-text-inputs\",\n    renderer: {\n        rendererName: \"long-text-inputs\",\n        name: t`Text Areas`,\n        description: t`Renders a simple list of text areas.`,\n        canUse({ field }) {\n            return (\n                field.type === \"long-text\" &&\n                !!field.list &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            const { field } = useModelField();\n            const rules = useEffectiveRules(field);\n            const disabled = !rules.canEdit || rules.disabled;\n\n            return (\n                <DynamicSection {...props} disabled={disabled}>\n                    {({ bind, index }) => (\n                        <div className={\"relative\"}>\n                            <DelayedOnChange\n                                value={bind.index.value}\n                                onChange={bind.index.onChange}\n                                onBlur={bind.index.validate}\n                            >\n                                <Textarea\n                                    disabled={disabled}\n                                    validation={bind.index.validation}\n                                    rows={5}\n                                    label={t`Value {number}`({ number: index + 1 })}\n                                    placeholder={props.field.placeholder}\n                                    data-testid={`fr.input.longTexts.${props.field.label}.${\n                                        index + 1\n                                    }`}\n                                />\n                            </DelayedOnChange>\n                            <CanEditField>\n                                <div className={\"absolute top-xl right-sm z-10\"}>\n                                    <IconButton\n                                        variant={\"ghost\"}\n                                        size={\"md\"}\n                                        icon={<DeleteIcon />}\n                                        onClick={() => bind.field.removeValue(index)}\n                                    />\n                                </div>\n                            </CanEditField>\n                        </div>\n                    )}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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","ignoreList":[]}

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

@@ -2,6 +2,7 @@ import React from "react";
 import get from "lodash/get.js";
 import { i18n } from "@webiny/app/i18n/index.js";
 import { DelayedOnChange, Input } from "@webiny/admin-ui";
+import { useEffectiveRules, useModelField } from "@webiny/app-headless-cms-common";
 const t = i18n.ns("app-headless-cms/admin/fields/number");
 const plugin = {
   type: "cms-editor-field-renderer",
@@ -16,15 +17,20 @@ const plugin = {
       return field.type === "number" && !field.list && !get(field, "predefinedValues.enabled");
     },
     render({
-      field,
       getBind
     }) {
+      const {
+        field
+      } = useModelField();
+      const rules = useEffectiveRules(field);
+      const disabled = !rules.canEdit || rules.disabled;
       const Bind = getBind();
       return /*#__PURE__*/React.createElement(Bind, null, bind => /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(DelayedOnChange, {
         value: bind.value,
         onChange: bind.onChange,
         onBlur: bind.validate
       }, /*#__PURE__*/React.createElement(Input, {
+        disabled: disabled,
         label: field.label,
         placeholder: field.placeholder,
         description: field.description,

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

@@ -1 +1 @@
-{"version":3,"names":["React","get","i18n","DelayedOnChange","Input","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","getBind","Bind","createElement","bind","ValidationContainer","value","onChange","onBlur","validate","label","placeholder","note","hint","help","validation"],"sources":["numberInput.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { DelayedOnChange, Input } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/number\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number\",\n    renderer: {\n        rendererName: \"number-input\",\n        name: t`Number Input`,\n        description: t`Renders a simple input with its type set to \"number\".`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" && !field.list && !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ field, getBind }) {\n            const Bind = getBind();\n\n            return (\n                <Bind>\n                    {bind => (\n                        <Bind.ValidationContainer>\n                            <DelayedOnChange\n                                value={bind.value}\n                                onChange={bind.onChange}\n                                onBlur={bind.validate}\n                            >\n                                <Input\n                                    label={field.label}\n                                    placeholder={field.placeholder}\n                                    description={field.description}\n                                    note={field.note}\n                                    hint={field.help}\n                                    type=\"number\"\n                                    data-testid={`fr.input.number.${field.label}`}\n                                    validation={bind.validation}\n                                />\n                            </DelayedOnChange>\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,eAAe,EAAEC,KAAK,QAAQ,kBAAkB;AAEzD,MAAMC,CAAC,GAAGH,IAAI,CAACI,EAAE,CAAC,sCAAsC,CAAC;AAEzD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,kCAAkC;EACxCC,QAAQ,EAAE;IACNC,YAAY,EAAE,cAAc;IAC5BF,IAAI,EAAEJ,CAAC,cAAc;IACrBO,WAAW,EAAEP,CAAC,uDAAuD;IACrEQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,QAAQ,IAAI,CAACM,KAAK,CAACC,IAAI,IAAI,CAACd,GAAG,CAACa,KAAK,EAAE,0BAA0B,CAAC;IAEzF,CAAC;IACDE,MAAMA,CAAC;MAAEF,KAAK;MAAEG;IAAQ,CAAC,EAAE;MACvB,MAAMC,IAAI,GAAGD,OAAO,CAAC,CAAC;MAEtB,oBACIjB,KAAA,CAAAmB,aAAA,CAACD,IAAI,QACAE,IAAI,iBACDpB,KAAA,CAAAmB,aAAA,CAACD,IAAI,CAACG,mBAAmB,qBACrBrB,KAAA,CAAAmB,aAAA,CAAChB,eAAe;QACZmB,KAAK,EAAEF,IAAI,CAACE,KAAM;QAClBC,QAAQ,EAAEH,IAAI,CAACG,QAAS;QACxBC,MAAM,EAAEJ,IAAI,CAACK;MAAS,gBAEtBzB,KAAA,CAAAmB,aAAA,CAACf,KAAK;QACFsB,KAAK,EAAEZ,KAAK,CAACY,KAAM;QACnBC,WAAW,EAAEb,KAAK,CAACa,WAAY;QAC/Bf,WAAW,EAAEE,KAAK,CAACF,WAAY;QAC/BgB,IAAI,EAAEd,KAAK,CAACc,IAAK;QACjBC,IAAI,EAAEf,KAAK,CAACgB,IAAK;QACjBtB,IAAI,EAAC,QAAQ;QACb,eAAa,mBAAmBM,KAAK,CAACY,KAAK,EAAG;QAC9CK,UAAU,EAAEX,IAAI,CAACW;MAAW,CAC/B,CACY,CACK,CAE5B,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAexB,MAAM","ignoreList":[]}
+{"version":3,"names":["React","get","i18n","DelayedOnChange","Input","useEffectiveRules","useModelField","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","getBind","rules","disabled","canEdit","Bind","createElement","bind","ValidationContainer","value","onChange","onBlur","validate","label","placeholder","note","hint","help","validation"],"sources":["numberInput.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { DelayedOnChange, Input } from \"@webiny/admin-ui\";\nimport { useEffectiveRules, useModelField } from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/number\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number\",\n    renderer: {\n        rendererName: \"number-input\",\n        name: t`Number Input`,\n        description: t`Renders a simple input with its type set to \"number\".`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" && !field.list && !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ getBind }) {\n            const { field } = useModelField();\n            const rules = useEffectiveRules(field);\n            const disabled = !rules.canEdit || rules.disabled;\n            const Bind = getBind();\n\n            return (\n                <Bind>\n                    {bind => (\n                        <Bind.ValidationContainer>\n                            <DelayedOnChange\n                                value={bind.value}\n                                onChange={bind.onChange}\n                                onBlur={bind.validate}\n                            >\n                                <Input\n                                    disabled={disabled}\n                                    label={field.label}\n                                    placeholder={field.placeholder}\n                                    description={field.description}\n                                    note={field.note}\n                                    hint={field.help}\n                                    type=\"number\"\n                                    data-testid={`fr.input.number.${field.label}`}\n                                    validation={bind.validation}\n                                />\n                            </DelayedOnChange>\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,eAAe,EAAEC,KAAK,QAAQ,kBAAkB;AACzD,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,iCAAiC;AAElF,MAAMC,CAAC,GAAGL,IAAI,CAACM,EAAE,CAAC,sCAAsC,CAAC;AAEzD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,kCAAkC;EACxCC,QAAQ,EAAE;IACNC,YAAY,EAAE,cAAc;IAC5BF,IAAI,EAAEJ,CAAC,cAAc;IACrBO,WAAW,EAAEP,CAAC,uDAAuD;IACrEQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,QAAQ,IAAI,CAACM,KAAK,CAACC,IAAI,IAAI,CAAChB,GAAG,CAACe,KAAK,EAAE,0BAA0B,CAAC;IAEzF,CAAC;IACDE,MAAMA,CAAC;MAAEC;IAAQ,CAAC,EAAE;MAChB,MAAM;QAAEH;MAAM,CAAC,GAAGV,aAAa,CAAC,CAAC;MACjC,MAAMc,KAAK,GAAGf,iBAAiB,CAACW,KAAK,CAAC;MACtC,MAAMK,QAAQ,GAAG,CAACD,KAAK,CAACE,OAAO,IAAIF,KAAK,CAACC,QAAQ;MACjD,MAAME,IAAI,GAAGJ,OAAO,CAAC,CAAC;MAEtB,oBACInB,KAAA,CAAAwB,aAAA,CAACD,IAAI,QACAE,IAAI,iBACDzB,KAAA,CAAAwB,aAAA,CAACD,IAAI,CAACG,mBAAmB,qBACrB1B,KAAA,CAAAwB,aAAA,CAACrB,eAAe;QACZwB,KAAK,EAAEF,IAAI,CAACE,KAAM;QAClBC,QAAQ,EAAEH,IAAI,CAACG,QAAS;QACxBC,MAAM,EAAEJ,IAAI,CAACK;MAAS,gBAEtB9B,KAAA,CAAAwB,aAAA,CAACpB,KAAK;QACFiB,QAAQ,EAAEA,QAAS;QACnBU,KAAK,EAAEf,KAAK,CAACe,KAAM;QACnBC,WAAW,EAAEhB,KAAK,CAACgB,WAAY;QAC/BlB,WAAW,EAAEE,KAAK,CAACF,WAAY;QAC/BmB,IAAI,EAAEjB,KAAK,CAACiB,IAAK;QACjBC,IAAI,EAAElB,KAAK,CAACmB,IAAK;QACjBzB,IAAI,EAAC,QAAQ;QACb,eAAa,mBAAmBM,KAAK,CAACe,KAAK,EAAG;QAC9CK,UAAU,EAAEX,IAAI,CAACW;MAAW,CAC/B,CACY,CACK,CAE5B,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAe3B,MAAM","ignoreList":[]}

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

@@ -5,6 +5,7 @@ import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import DynamicSection from "../DynamicSection.js";
 import { MultiValueRendererSettings } from "../MultiValueRendererSettings.js";
 import { DelayedOnChange, Icon, Input } from "@webiny/admin-ui";
+import { CanEditField, useEffectiveRules, useModelField } from "@webiny/app-headless-cms-common";
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 const plugin = {
   type: "cms-editor-field-renderer",
@@ -19,7 +20,13 @@ const plugin = {
       return field.type === "number" && !!field.list && !get(field, "predefinedValues.enabled");
     },
     render(props) {
-      return /*#__PURE__*/React.createElement(DynamicSection, props, ({
+      const {
+        field
+      } = useModelField();
+      const rules = useEffectiveRules(field);
+      return /*#__PURE__*/React.createElement(DynamicSection, Object.assign({}, props, {
+        disabled: !rules.canEdit
+      }), ({
         bind,
         index
       }) => /*#__PURE__*/React.createElement(DelayedOnChange, {
@@ -27,6 +34,7 @@ const plugin = {
         onChange: bind.index.onChange,
         onBlur: bind.index.validate
       }, /*#__PURE__*/React.createElement(Input, {
+        disabled: !rules.canEdit,
         validation: bind.index.validation,
         onEnter: () => bind.field.appendValue(""),
         label: t`Value {number}`({
@@ -35,12 +43,12 @@ const plugin = {
         placeholder: props.field.placeholder,
         "data-testid": `fr.input.numbers.${props.field.label}.${index + 1}`,
         type: "number",
-        endIcon: /*#__PURE__*/React.createElement(Icon, {
+        endIcon: /*#__PURE__*/React.createElement(CanEditField, null, /*#__PURE__*/React.createElement(Icon, {
           icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
           label: "Delete",
           onClick: () => bind.field.removeValue(index),
           className: "cursor-pointer"
-        })
+        }))
       })));
     },
     renderSettings(props) {

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

@@ -1 +1 @@
-{"version":3,"names":["React","get","i18n","ReactComponent","DeleteIcon","DynamicSection","MultiValueRendererSettings","DelayedOnChange","Icon","Input","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","props","createElement","bind","index","value","onChange","onBlur","validate","validation","onEnter","appendValue","label","number","placeholder","endIcon","icon","onClick","removeValue","className","renderSettings"],"sources":["numberInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport DynamicSection from \"../DynamicSection.js\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings.js\";\nimport { DelayedOnChange, Icon, Input } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\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\" && !!field.list && !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => (\n                        <DelayedOnChange\n                            value={bind.index.value}\n                            onChange={bind.index.onChange}\n                            onBlur={bind.index.validate}\n                        >\n                            <Input\n                                validation={bind.index.validation}\n                                onEnter={() => bind.field.appendValue(\"\")}\n                                label={t`Value {number}`({ number: index + 1 })}\n                                placeholder={props.field.placeholder}\n                                data-testid={`fr.input.numbers.${props.field.label}.${index + 1}`}\n                                type=\"number\"\n                                endIcon={\n                                    <Icon\n                                        icon={<DeleteIcon />}\n                                        label={\"Delete\"}\n                                        onClick={() => bind.field.removeValue(index)}\n                                        className={\"cursor-pointer\"}\n                                    />\n                                }\n                            />\n                        </DelayedOnChange>\n                    )}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,OAAOC,cAAc;AACrB,SAASC,0BAA0B;AACnC,SAASC,eAAe,EAAEC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAE/D,MAAMC,CAAC,GAAGR,IAAI,CAACS,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,yCAAyC;EAC/CC,QAAQ,EAAE;IACNC,YAAY,EAAE,eAAe;IAC7BF,IAAI,EAAEJ,CAAC,eAAe;IACtBO,WAAW,EAAEP,CAAC,yCAAyC;IACvDQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,QAAQ,IAAI,CAAC,CAACM,KAAK,CAACC,IAAI,IAAI,CAACnB,GAAG,CAACkB,KAAK,EAAE,0BAA0B,CAAC;IAE1F,CAAC;IACDE,MAAMA,CAACC,KAAK,EAAE;MACV,oBACItB,KAAA,CAAAuB,aAAA,CAAClB,cAAc,EAAKiB,KAAK,EACpB,CAAC;QAAEE,IAAI;QAAEC;MAAM,CAAC,kBACbzB,KAAA,CAAAuB,aAAA,CAAChB,eAAe;QACZmB,KAAK,EAAEF,IAAI,CAACC,KAAK,CAACC,KAAM;QACxBC,QAAQ,EAAEH,IAAI,CAACC,KAAK,CAACE,QAAS;QAC9BC,MAAM,EAAEJ,IAAI,CAACC,KAAK,CAACI;MAAS,gBAE5B7B,KAAA,CAAAuB,aAAA,CAACd,KAAK;QACFqB,UAAU,EAAEN,IAAI,CAACC,KAAK,CAACK,UAAW;QAClCC,OAAO,EAAEA,CAAA,KAAMP,IAAI,CAACL,KAAK,CAACa,WAAW,CAAC,EAAE,CAAE;QAC1CC,KAAK,EAAEvB,CAAC,gBAAgB,CAAC;UAAEwB,MAAM,EAAET,KAAK,GAAG;QAAE,CAAC,CAAE;QAChDU,WAAW,EAAEb,KAAK,CAACH,KAAK,CAACgB,WAAY;QACrC,eAAa,oBAAoBb,KAAK,CAACH,KAAK,CAACc,KAAK,IAAIR,KAAK,GAAG,CAAC,EAAG;QAClEZ,IAAI,EAAC,QAAQ;QACbuB,OAAO,eACHpC,KAAA,CAAAuB,aAAA,CAACf,IAAI;UACD6B,IAAI,eAAErC,KAAA,CAAAuB,aAAA,CAACnB,UAAU,MAAE,CAAE;UACrB6B,KAAK,EAAE,QAAS;UAChBK,OAAO,EAAEA,CAAA,KAAMd,IAAI,CAACL,KAAK,CAACoB,WAAW,CAACd,KAAK,CAAE;UAC7Ce,SAAS,EAAE;QAAiB,CAC/B;MACJ,CACJ,CACY,CAET,CAAC;IAEzB,CAAC;IACDC,cAAcA,CAACnB,KAAK,EAAE;MAClB,oBAAOtB,KAAA,CAAAuB,aAAA,CAACjB,0BAA0B,EAAKgB,KAAQ,CAAC;IACpD;EACJ;AACJ,CAAC;AAED,eAAeV,MAAM","ignoreList":[]}
+{"version":3,"names":["React","get","i18n","ReactComponent","DeleteIcon","DynamicSection","MultiValueRendererSettings","DelayedOnChange","Icon","Input","CanEditField","useEffectiveRules","useModelField","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","props","rules","createElement","Object","assign","disabled","canEdit","bind","index","value","onChange","onBlur","validate","validation","onEnter","appendValue","label","number","placeholder","endIcon","icon","onClick","removeValue","className","renderSettings"],"sources":["numberInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport DynamicSection from \"../DynamicSection.js\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings.js\";\nimport { DelayedOnChange, Icon, Input } from \"@webiny/admin-ui\";\nimport { CanEditField, useEffectiveRules, useModelField } from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\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\" && !!field.list && !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            const { field } = useModelField();\n            const rules = useEffectiveRules(field);\n\n            return (\n                <DynamicSection {...props} disabled={!rules.canEdit}>\n                    {({ bind, index }) => (\n                        <DelayedOnChange\n                            value={bind.index.value}\n                            onChange={bind.index.onChange}\n                            onBlur={bind.index.validate}\n                        >\n                            <Input\n                                disabled={!rules.canEdit}\n                                validation={bind.index.validation}\n                                onEnter={() => bind.field.appendValue(\"\")}\n                                label={t`Value {number}`({ number: index + 1 })}\n                                placeholder={props.field.placeholder}\n                                data-testid={`fr.input.numbers.${props.field.label}.${index + 1}`}\n                                type=\"number\"\n                                endIcon={\n                                    <CanEditField>\n                                        <Icon\n                                            icon={<DeleteIcon />}\n                                            label={\"Delete\"}\n                                            onClick={() => bind.field.removeValue(index)}\n                                            className={\"cursor-pointer\"}\n                                        />\n                                    </CanEditField>\n                                }\n                            />\n                        </DelayedOnChange>\n                    )}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,OAAOC,cAAc;AACrB,SAASC,0BAA0B;AACnC,SAASC,eAAe,EAAEC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAC/D,SAASC,YAAY,EAAEC,iBAAiB,EAAEC,aAAa,QAAQ,iCAAiC;AAEhG,MAAMC,CAAC,GAAGX,IAAI,CAACY,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,yCAAyC;EAC/CC,QAAQ,EAAE;IACNC,YAAY,EAAE,eAAe;IAC7BF,IAAI,EAAEJ,CAAC,eAAe;IACtBO,WAAW,EAAEP,CAAC,yCAAyC;IACvDQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,QAAQ,IAAI,CAAC,CAACM,KAAK,CAACC,IAAI,IAAI,CAACtB,GAAG,CAACqB,KAAK,EAAE,0BAA0B,CAAC;IAE1F,CAAC;IACDE,MAAMA,CAACC,KAAK,EAAE;MACV,MAAM;QAAEH;MAAM,CAAC,GAAGV,aAAa,CAAC,CAAC;MACjC,MAAMc,KAAK,GAAGf,iBAAiB,CAACW,KAAK,CAAC;MAEtC,oBACItB,KAAA,CAAA2B,aAAA,CAACtB,cAAc,EAAAuB,MAAA,CAAAC,MAAA,KAAKJ,KAAK;QAAEK,QAAQ,EAAE,CAACJ,KAAK,CAACK;MAAQ,IAC/C,CAAC;QAAEC,IAAI;QAAEC;MAAM,CAAC,kBACbjC,KAAA,CAAA2B,aAAA,CAACpB,eAAe;QACZ2B,KAAK,EAAEF,IAAI,CAACC,KAAK,CAACC,KAAM;QACxBC,QAAQ,EAAEH,IAAI,CAACC,KAAK,CAACE,QAAS;QAC9BC,MAAM,EAAEJ,IAAI,CAACC,KAAK,CAACI;MAAS,gBAE5BrC,KAAA,CAAA2B,aAAA,CAAClB,KAAK;QACFqB,QAAQ,EAAE,CAACJ,KAAK,CAACK,OAAQ;QACzBO,UAAU,EAAEN,IAAI,CAACC,KAAK,CAACK,UAAW;QAClCC,OAAO,EAAEA,CAAA,KAAMP,IAAI,CAACV,KAAK,CAACkB,WAAW,CAAC,EAAE,CAAE;QAC1CC,KAAK,EAAE5B,CAAC,gBAAgB,CAAC;UAAE6B,MAAM,EAAET,KAAK,GAAG;QAAE,CAAC,CAAE;QAChDU,WAAW,EAAElB,KAAK,CAACH,KAAK,CAACqB,WAAY;QACrC,eAAa,oBAAoBlB,KAAK,CAACH,KAAK,CAACmB,KAAK,IAAIR,KAAK,GAAG,CAAC,EAAG;QAClEjB,IAAI,EAAC,QAAQ;QACb4B,OAAO,eACH5C,KAAA,CAAA2B,aAAA,CAACjB,YAAY,qBACTV,KAAA,CAAA2B,aAAA,CAACnB,IAAI;UACDqC,IAAI,eAAE7C,KAAA,CAAA2B,aAAA,CAACvB,UAAU,MAAE,CAAE;UACrBqC,KAAK,EAAE,QAAS;UAChBK,OAAO,EAAEA,CAAA,KAAMd,IAAI,CAACV,KAAK,CAACyB,WAAW,CAACd,KAAK,CAAE;UAC7Ce,SAAS,EAAE;QAAiB,CAC/B,CACS;MACjB,CACJ,CACY,CAET,CAAC;IAEzB,CAAC;IACDC,cAAcA,CAACxB,KAAK,EAAE;MAClB,oBAAOzB,KAAA,CAAA2B,aAAA,CAACrB,0BAA0B,EAAKmB,KAAQ,CAAC;IACpD;EACJ;AACJ,CAAC;AAED,eAAeV,MAAM","ignoreList":[]}

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

@@ -29,8 +29,9 @@ export declare class FieldSettings {
                 settings?: Record<string, any>;
             } | import("@webiny/app-headless-cms-common/types/index.js").CmsModelFieldRendererPlugin["renderer"]["render"];
             tags?: string[];
+            rules?: import("@webiny/app-headless-cms-common/types/model").FieldRule[];
         }[];
-        layout: string[][];
+        layout: import("@webiny/app-headless-cms-common/types/model").CmsEditorFieldsLayout;
         defaultValue?: string | boolean | number | null | undefined;
         defaultSetValue?: string;
         type?: string;

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

@@ -7,6 +7,7 @@ import { Fields } from "../../../components/ContentEntryForm/Fields.js";
 import DynamicSection from "../DynamicSection.js";
 import { dynamicSectionGridStyle, fieldsGridStyle, ItemHighLight, ObjectItem } from "./StyledComponents.js";
 import { FieldSettings } from "./FieldSettings.js";
+import { useEffectiveRules } from "@webiny/app-headless-cms-common";
 import { useModelField } from "../../../components/ModelFieldProvider/index.js";
 import { useModel } from "../../../components/ModelProvider/index.js";
 export const MultiValueContainer = props => {
@@ -18,6 +19,8 @@ export const MultiValueContainer = props => {
   const {
     field
   } = useModelField();
+  const rules = useEffectiveRules(field);
+  const disabled = !rules.canEdit || rules.disabled;
   const {
     showConfirmation
   } = useConfirmationDialog({
@@ -44,6 +47,7 @@ export const MultiValueContainer = props => {
   };
   const settings = fieldSettings.getSettings();
   return /*#__PURE__*/React.createElement(DynamicSection, Object.assign({}, props, {
+    disabled: disabled,
     showLabel: props.showTitle,
     field: field,
     emptyValue: {},
@@ -90,6 +94,7 @@ export const MultiValueContainer = props => {
     return /*#__PURE__*/React.createElement(ObjectItem, null, highlightMap[index] ? /*#__PURE__*/React.createElement(ItemHighLight, {
       key: highlightMap[index]
     }) : null, /*#__PURE__*/React.createElement(MultiValueItemContainer, {
+      disabled: disabled,
       value: bind.index.value,
       title: `${field.label} #${index + 1}`,
       isFirst: index === 0,

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","generateAlphaNumericLowerCaseId","Cell","useConfirmationDialog","MultiValueItemContainer","Fields","DynamicSection","dynamicSectionGridStyle","fieldsGridStyle","ItemHighLight","ObjectItem","FieldSettings","useModelField","useModel","MultiValueContainer","props","highlightMap","setHighlightIndex","itemState","setItemState","model","field","showConfirmation","message","acceptLabel","cancelLabel","fieldSettings","createFrom","hasFields","logMissingFields","toggleItemState","index","state","onAddItem","settings","getSettings","createElement","Object","assign","showLabel","showTitle","emptyValue","gridClassName","Bind","bind","onMoveDown","moveValueDown","map","onMoveUp","moveValueUp","onDelete","removeValue","key","value","title","label","isFirst","isLast","length","isExpanded","toggleExpanded","span","contentModel","fields","layout"],"sources":["MultiValueContainer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { Cell } from \"@webiny/ui/Grid/index.js\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport type {\n    BindComponentRenderProp,\n    CmsModelFieldRendererProps\n} from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { MultiValueItemContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport DynamicSection from \"~/admin/plugins/fieldRenderers/DynamicSection.js\";\nimport {\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"~/admin/plugins/fieldRenderers/object/StyledComponents.js\";\nimport { FieldSettings } from \"~/admin/plugins/fieldRenderers/object/FieldSettings.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useModel } from \"~/admin/components/ModelProvider/index.js\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueContainerProps {\n    bind: BindComponentRenderProp;\n    getBind: GetBind;\n    showTitle?: boolean;\n}\n\nexport const MultiValueContainer = (props: MultiValueContainerProps) => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const [itemState, setItemState] = useState<{ [key: number]: boolean }>({});\n\n    const { model } = useModel();\n    const { field } = useModelField();\n\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const toggleItemState = (index: number) => {\n        setItemState(state => ({ ...state, [index]: !state[index] }));\n    };\n\n    const onAddItem = (index: number) => {\n        setItemState(state => ({ ...state, [index]: true }));\n    };\n\n    const settings = fieldSettings.getSettings();\n\n    return (\n        <DynamicSection\n            {...props}\n            showLabel={props.showTitle}\n            field={field}\n            emptyValue={{}}\n            onAddItem={onAddItem}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => {\n                const onMoveDown = () => {\n                    bind.field.moveValueDown(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index + 1]: state[index] ?? false,\n                            [index]: state[index + 1] ?? false\n                        };\n                    });\n                };\n\n                const onMoveUp = () => {\n                    bind.field.moveValueUp(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index - 1]: state[index] ?? false,\n                            [index]: state[index - 1] ?? false\n                        };\n                    });\n                };\n\n                const onDelete = () => {\n                    showConfirmation(() => {\n                        bind.field.removeValue(index);\n                    });\n                };\n\n                return (\n                    <ObjectItem>\n                        {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                        <MultiValueItemContainer\n                            value={bind.index.value}\n                            title={`${field.label} #${index + 1}`}\n                            isFirst={index === 0}\n                            isLast={index === bind.field.value.length - 1}\n                            onMoveUp={onMoveUp}\n                            onMoveDown={onMoveDown}\n                            onDelete={onDelete}\n                            isExpanded={itemState[index] ?? false}\n                            toggleExpanded={() => toggleItemState(index)}\n                        >\n                            <Cell span={12}>\n                                <Fields\n                                    Bind={Bind}\n                                    contentModel={model}\n                                    fields={settings.fields}\n                                    layout={settings.layout}\n                                    gridClassName={fieldsGridStyle}\n                                />\n                            </Cell>\n                        </MultiValueItemContainer>\n                    </ObjectItem>\n                );\n            }}\n        </DynamicSection>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","generateAlphaNumericLowerCaseId","Cell","useConfirmationDialog","MultiValueItemContainer","Fields","DynamicSection","dynamicSectionGridStyle","fieldsGridStyle","ItemHighLight","ObjectItem","FieldSettings","useEffectiveRules","useModelField","useModel","MultiValueContainer","props","highlightMap","setHighlightIndex","itemState","setItemState","model","field","rules","disabled","canEdit","showConfirmation","message","acceptLabel","cancelLabel","fieldSettings","createFrom","hasFields","logMissingFields","toggleItemState","index","state","onAddItem","settings","getSettings","createElement","Object","assign","showLabel","showTitle","emptyValue","gridClassName","Bind","bind","onMoveDown","moveValueDown","map","onMoveUp","moveValueUp","onDelete","removeValue","key","value","title","label","isFirst","isLast","length","isExpanded","toggleExpanded","span","contentModel","fields","layout"],"sources":["MultiValueContainer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { Cell } from \"@webiny/ui/Grid/index.js\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport type {\n    BindComponentRenderProp,\n    CmsModelFieldRendererProps\n} from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { MultiValueItemContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport DynamicSection from \"~/admin/plugins/fieldRenderers/DynamicSection.js\";\nimport {\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"~/admin/plugins/fieldRenderers/object/StyledComponents.js\";\nimport { FieldSettings } from \"~/admin/plugins/fieldRenderers/object/FieldSettings.js\";\nimport { useEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useModel } from \"~/admin/components/ModelProvider/index.js\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueContainerProps {\n    bind: BindComponentRenderProp;\n    getBind: GetBind;\n    showTitle?: boolean;\n}\n\nexport const MultiValueContainer = (props: MultiValueContainerProps) => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const [itemState, setItemState] = useState<{ [key: number]: boolean }>({});\n\n    const { model } = useModel();\n    const { field } = useModelField();\n    const rules = useEffectiveRules(field);\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const toggleItemState = (index: number) => {\n        setItemState(state => ({ ...state, [index]: !state[index] }));\n    };\n\n    const onAddItem = (index: number) => {\n        setItemState(state => ({ ...state, [index]: true }));\n    };\n\n    const settings = fieldSettings.getSettings();\n\n    return (\n        <DynamicSection\n            {...props}\n            disabled={disabled}\n            showLabel={props.showTitle}\n            field={field}\n            emptyValue={{}}\n            onAddItem={onAddItem}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => {\n                const onMoveDown = () => {\n                    bind.field.moveValueDown(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index + 1]: state[index] ?? false,\n                            [index]: state[index + 1] ?? false\n                        };\n                    });\n                };\n\n                const onMoveUp = () => {\n                    bind.field.moveValueUp(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index - 1]: state[index] ?? false,\n                            [index]: state[index - 1] ?? false\n                        };\n                    });\n                };\n\n                const onDelete = () => {\n                    showConfirmation(() => {\n                        bind.field.removeValue(index);\n                    });\n                };\n\n                return (\n                    <ObjectItem>\n                        {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                        <MultiValueItemContainer\n                            disabled={disabled}\n                            value={bind.index.value}\n                            title={`${field.label} #${index + 1}`}\n                            isFirst={index === 0}\n                            isLast={index === bind.field.value.length - 1}\n                            onMoveUp={onMoveUp}\n                            onMoveDown={onMoveDown}\n                            onDelete={onDelete}\n                            isExpanded={itemState[index] ?? false}\n                            toggleExpanded={() => toggleItemState(index)}\n                        >\n                            <Cell span={12}>\n                                <Fields\n                                    Bind={Bind}\n                                    contentModel={model}\n                                    fields={settings.fields}\n                                    layout={settings.layout}\n                                    gridClassName={fieldsGridStyle}\n                                />\n                            </Cell>\n                        </MultiValueItemContainer>\n                    </ObjectItem>\n                );\n            }}\n        </DynamicSection>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,6 +4,7 @@ export interface MultiValueItemContainerProps {
     value: GenericRecord<string>;
     isFirst: boolean;
     isLast: boolean;
+    disabled?: boolean;
     onMoveUp: () => void;
     onMoveDown: () => void;
     onDelete: () => void;