@webiny/app-headless-cms 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

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,"file":"admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.js","sources":["../../../../../src/admin/plugins/fieldRenderers/dynamicZone/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 { useFieldEffectiveRules } 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: React.JSX.Element;\n    actions?: React.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 = useFieldEffectiveRules(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"],"names":["SingleValueItemContainer","makeDecoratable","props","template","actions","children","disabled","accordionActions","Accordion","Tooltip","DeleteIcon","TemplateIcon","SingleValueDynamicZone","bind","contentModel","getBind","field","useModelField","rules","useFieldEffectiveRules","showConfirmation","useConfirmationDialog","onTemplate","templates","tpl","undefined","Bind","unsetValue","ParentFieldProvider","ParentValueIndexProvider","ModelFieldProvider","TemplateProvider","Fields","AddTemplateButton"],"mappings":";;;;;;;;;;;AAmDO,MAAMA,2BAA2BC,gBACpC,4BACA,CAACC;IACG,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGJ;IAE1D,MAAMK,mBAAmBD,WAAW,OAAO,WAAP,GAChC,0CACKF,WAAW,oBACZ,oBAACI,UAAU,IAAI,CAAC,MAAM;QAClB,oBAAM,oBAACC,SAAOA;YAAC,uBAAS,oBAACC,gBAAUA;YAAK,SAAS;;QACjD,SAASR,MAAM,QAAQ;;IAKnC,OAAO,WAAP,GACI,oBAACM,UAAU,IAAI;QACX,OAAOL,SAAS,IAAI;QACpB,aAAaA,SAAS,WAAW;QACjC,oBAAM,oBAACQ,cAAYA;YAAC,MAAMR,SAAS,IAAI;;QACvC,SAASI;OAERF;AAGb;AAGG,MAAMO,yBAAyB,CAAC,EACnCC,IAAI,EACJC,YAAY,EACZC,OAAO,EACmB;IAC1B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,QAAQC,uBAAuBH;IACrC,MAAMV,WAAW,CAACY,MAAM,OAAO,IAAIA,MAAM,QAAQ;IAEjD,MAAM,EAAEE,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,SAAS;QACT,aAAa;QACb,aAAa;IACjB;IAEA,MAAMC,aAAa,CAACnB;QAChBU,KAAK,QAAQ,CAAC;YAAE,aAAaV,SAAS,EAAE;YAAE,YAAYA,SAAS,UAAU;QAAC;IAC9E;IAEA,MAAMoB,YAAYP,MAAM,QAAQ,EAAE,aAAa,EAAE;IAEjD,MAAMb,WAA+CU,KAAK,KAAK,GACzDU,UAAU,IAAI,CAACC,CAAAA,MAAOA,IAAI,EAAE,KAAKX,KAAK,KAAK,CAAC,WAAW,IACvDY;IAEN,MAAMC,OAAOX;IAEb,MAAMY,aAAa;QACfP,iBAAiB;YACbP,KAAK,QAAQ,CAAC;QAClB;IACJ;IAEA,OAAO,WAAP,GACI,0CACKV,WAAW,WAAXA,GACG,oBAACyB,qBAAmBA;QAAC,OAAOf,KAAK,KAAK;QAAE,MAAMa,KAAK,UAAU;qBACzD,oBAACG,0BAAwBA;QAAC,OAAO;qBAC7B,oBAACC,oBAAkBA;QAAC,OAAOd;qBACvB,oBAACR,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACR,0BAAwBA;QACrB,UAAUM;QACV,UAAUH;QACV,OAAOU,KAAK,KAAK;QACjB,cAAcC;QACd,UAAUa;QACV,OAAOxB,SAAS,IAAI;QACpB,aAAaA,SAAS,WAAW;QACjC,oBAAM,oBAACQ,cAAYA;YAAC,MAAMR,SAAS,IAAI;;qBAEvC,oBAAC4B,kBAAgBA;QAAC,UAAU5B;qBACxB,oBAAC6B,QAAMA;QACH,QAAQ7B,SAAS,MAAM;QACvB,QAAQA,SAAS,MAAM,IAAI,EAAE;QAC7B,cAAcW;QACd,MAAMY;eAQlC,MACHb,KAAK,KAAK,GAAG,OAAO,WAAP,GAAO,oBAACoB,mBAAiBA;QAAC,YAAYX;;AAGhE"}

package/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.js

@@ -1,46 +1,32 @@
-import React from "react";
+import react from "react";
 import { makeDecoratable, withDecoratorFactory } from "@webiny/app-admin";
 import { useModel, useModelField } from "../../../hooks/index.js";
 import { TemplateItem } from "./TemplateItem.js";
-const GalleryContainer = makeDecoratable("TemplateGalleryContainer", props => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-});
-const GalleryList = makeDecoratable("TemplateGalleryList", props => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "gap-md flex flex-wrap"
-  }, props.children);
-});
-const Gallery = makeDecoratable("TemplateGallery", props => {
-  const {
-    field
-  } = useModelField();
-  const templates = props.templates || field.settings?.templates || [];
-  return /*#__PURE__*/React.createElement(GalleryContainer, null, /*#__PURE__*/React.createElement(GalleryList, null, templates.map(template => /*#__PURE__*/React.createElement(TemplateItem, {
-    key: template.id,
-    template: template,
-    onTemplate: props.onTemplate
-  }))));
+const GalleryContainer = makeDecoratable("TemplateGalleryContainer", (props)=>/*#__PURE__*/ react.createElement(react.Fragment, null, props.children));
+const GalleryList = makeDecoratable("TemplateGalleryList", (props)=>/*#__PURE__*/ react.createElement("div", {
+        className: "gap-md flex flex-wrap mb-xs"
+    }, props.children));
+const Gallery = makeDecoratable("TemplateGallery", (props)=>{
+    const { field } = useModelField();
+    const templates = props.templates || field.settings?.templates || [];
+    return /*#__PURE__*/ react.createElement(GalleryContainer, null, /*#__PURE__*/ react.createElement(GalleryList, null, templates.map((template)=>/*#__PURE__*/ react.createElement(TemplateItem, {
+            key: template.id,
+            template: template,
+            onTemplate: props.onTemplate
+        }))));
 });
 function withShouldRender(Component) {
-  return withDecoratorFactory()(Component, decoratorProps => {
-    const {
-      model
-    } = useModel();
-    if (decoratorProps?.modelIds?.length && !decoratorProps.modelIds.includes(model.modelId)) {
-      return false;
-    }
-    return true;
-  });
+    return withDecoratorFactory()(Component, (decoratorProps)=>{
+        const { model } = useModel();
+        if (decoratorProps?.modelIds?.length && !decoratorProps.modelIds.includes(model.modelId)) return false;
+        return true;
+    });
 }
-
-/**
- * We're wrapping each component with `withShouldRender`, because they're all decoratable, and `withShouldRender` attaches a
- * conditional decorator, which optionally takes a `modelIds` prop, so you can control on which models that component will be decorated.
- */
-export const TemplateGallery = Object.assign(withShouldRender(Gallery), {
-  Container: withShouldRender(GalleryContainer),
-  List: withShouldRender(GalleryList),
-  Item: withShouldRender(TemplateItem)
+const TemplateGallery = Object.assign(withShouldRender(Gallery), {
+    Container: withShouldRender(GalleryContainer),
+    List: withShouldRender(GalleryList),
+    Item: withShouldRender(TemplateItem)
 });
+export { TemplateGallery };
 
 //# sourceMappingURL=TemplateGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","withDecoratorFactory","useModel","useModelField","TemplateItem","GalleryContainer","props","createElement","Fragment","children","GalleryList","className","Gallery","field","templates","settings","map","template","key","id","onTemplate","withShouldRender","Component","decoratorProps","model","modelIds","length","includes","modelId","TemplateGallery","Object","assign","Container","List","Item"],"sources":["TemplateGallery.tsx"],"sourcesContent":["import React from \"react\";\nimport type { DecoratableComponent } from \"@webiny/app-admin\";\nimport { makeDecoratable, withDecoratorFactory } from \"@webiny/app-admin\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { useModel, useModelField } from \"~/admin/hooks/index.js\";\nimport { TemplateItem } from \"./TemplateItem.js\";\n\nexport interface TemplateGalleryContainerProps {\n    children: React.ReactNode;\n}\n\nconst GalleryContainer = makeDecoratable(\n    \"TemplateGalleryContainer\",\n    (props: TemplateGalleryContainerProps) => {\n        return <>{props.children}</>;\n    }\n);\n\nexport interface TemplateGalleryListProps {\n    children: React.ReactNode;\n}\n\nconst GalleryList = makeDecoratable(\"TemplateGalleryList\", (props: TemplateGalleryListProps) => {\n    return <div className={\"gap-md flex flex-wrap\"}>{props.children}</div>;\n});\n\nexport interface TemplateGalleryProps {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n    onClose: () => void;\n    templates?: CmsDynamicZoneTemplate[];\n}\n\nconst Gallery = makeDecoratable(\"TemplateGallery\", (props: TemplateGalleryProps) => {\n    const { field } = useModelField();\n    const templates = props.templates || field.settings?.templates || [];\n\n    return (\n        <GalleryContainer>\n            <GalleryList>\n                {templates.map(template => (\n                    <TemplateItem\n                        key={template.id}\n                        template={template}\n                        onTemplate={props.onTemplate}\n                    />\n                ))}\n            </GalleryList>\n        </GalleryContainer>\n    );\n});\n\nexport type ShouldRender = { modelIds?: string[] };\n\nfunction withShouldRender<T extends DecoratableComponent>(Component: T) {\n    return withDecoratorFactory<ShouldRender>()(Component, decoratorProps => {\n        const { model } = useModel();\n\n        if (decoratorProps?.modelIds?.length && !decoratorProps.modelIds.includes(model.modelId)) {\n            return false;\n        }\n\n        return true;\n    });\n}\n\n/**\n * We're wrapping each component with `withShouldRender`, because they're all decoratable, and `withShouldRender` attaches a\n * conditional decorator, which optionally takes a `modelIds` prop, so you can control on which models that component will be decorated.\n */\nexport const TemplateGallery = Object.assign(withShouldRender(Gallery), {\n    Container: withShouldRender(GalleryContainer),\n    List: withShouldRender(GalleryList),\n    Item: withShouldRender(TemplateItem)\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,EAAEC,oBAAoB,QAAQ,mBAAmB;AAEzE,SAASC,QAAQ,EAAEC,aAAa;AAChC,SAASC,YAAY;AAMrB,MAAMC,gBAAgB,GAAGL,eAAe,CACpC,0BAA0B,EACzBM,KAAoC,IAAK;EACtC,oBAAOP,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,QAAGF,KAAK,CAACG,QAAW,CAAC;AAChC,CACJ,CAAC;AAMD,MAAMC,WAAW,GAAGV,eAAe,CAAC,qBAAqB,EAAGM,KAA+B,IAAK;EAC5F,oBAAOP,KAAA,CAAAQ,aAAA;IAAKI,SAAS,EAAE;EAAwB,GAAEL,KAAK,CAACG,QAAc,CAAC;AAC1E,CAAC,CAAC;AAQF,MAAMG,OAAO,GAAGZ,eAAe,CAAC,iBAAiB,EAAGM,KAA2B,IAAK;EAChF,MAAM;IAAEO;EAAM,CAAC,GAAGV,aAAa,CAAC,CAAC;EACjC,MAAMW,SAAS,GAAGR,KAAK,CAACQ,SAAS,IAAID,KAAK,CAACE,QAAQ,EAAED,SAAS,IAAI,EAAE;EAEpE,oBACIf,KAAA,CAAAQ,aAAA,CAACF,gBAAgB,qBACbN,KAAA,CAAAQ,aAAA,CAACG,WAAW,QACPI,SAAS,CAACE,GAAG,CAACC,QAAQ,iBACnBlB,KAAA,CAAAQ,aAAA,CAACH,YAAY;IACTc,GAAG,EAAED,QAAQ,CAACE,EAAG;IACjBF,QAAQ,EAAEA,QAAS;IACnBG,UAAU,EAAEd,KAAK,CAACc;EAAW,CAChC,CACJ,CACQ,CACC,CAAC;AAE3B,CAAC,CAAC;AAIF,SAASC,gBAAgBA,CAAiCC,SAAY,EAAE;EACpE,OAAOrB,oBAAoB,CAAe,CAAC,CAACqB,SAAS,EAAEC,cAAc,IAAI;IACrE,MAAM;MAAEC;IAAM,CAAC,GAAGtB,QAAQ,CAAC,CAAC;IAE5B,IAAIqB,cAAc,EAAEE,QAAQ,EAAEC,MAAM,IAAI,CAACH,cAAc,CAACE,QAAQ,CAACE,QAAQ,CAACH,KAAK,CAACI,OAAO,CAAC,EAAE;MACtF,OAAO,KAAK;IAChB;IAEA,OAAO,IAAI;EACf,CAAC,CAAC;AACN;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGC,MAAM,CAACC,MAAM,CAACV,gBAAgB,CAACT,OAAO,CAAC,EAAE;EACpEoB,SAAS,EAAEX,gBAAgB,CAAChB,gBAAgB,CAAC;EAC7C4B,IAAI,EAAEZ,gBAAgB,CAACX,WAAW,CAAC;EACnCwB,IAAI,EAAEb,gBAAgB,CAACjB,YAAY;AACvC,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.js","sources":["../../../../../src/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.tsx"],"sourcesContent":["import React from \"react\";\nimport type { DecoratableComponent } from \"@webiny/app-admin\";\nimport { makeDecoratable, withDecoratorFactory } from \"@webiny/app-admin\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { useModel, useModelField } from \"~/admin/hooks/index.js\";\nimport { TemplateItem } from \"./TemplateItem.js\";\n\nexport interface TemplateGalleryContainerProps {\n    children: React.ReactNode;\n}\n\nconst GalleryContainer = makeDecoratable(\n    \"TemplateGalleryContainer\",\n    (props: TemplateGalleryContainerProps) => {\n        return <>{props.children}</>;\n    }\n);\n\nexport interface TemplateGalleryListProps {\n    children: React.ReactNode;\n}\n\nconst GalleryList = makeDecoratable(\"TemplateGalleryList\", (props: TemplateGalleryListProps) => {\n    return <div className={\"gap-md flex flex-wrap mb-xs\"}>{props.children}</div>;\n});\n\nexport interface TemplateGalleryProps {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n    onClose: () => void;\n    templates?: CmsDynamicZoneTemplate[];\n}\n\nconst Gallery = makeDecoratable(\"TemplateGallery\", (props: TemplateGalleryProps) => {\n    const { field } = useModelField();\n    const templates = props.templates || field.settings?.templates || [];\n\n    return (\n        <GalleryContainer>\n            <GalleryList>\n                {templates.map(template => (\n                    <TemplateItem\n                        key={template.id}\n                        template={template}\n                        onTemplate={props.onTemplate}\n                    />\n                ))}\n            </GalleryList>\n        </GalleryContainer>\n    );\n});\n\nexport type ShouldRender = { modelIds?: string[] };\n\nfunction withShouldRender<T extends DecoratableComponent>(Component: T) {\n    return withDecoratorFactory<ShouldRender>()(Component, decoratorProps => {\n        const { model } = useModel();\n\n        if (decoratorProps?.modelIds?.length && !decoratorProps.modelIds.includes(model.modelId)) {\n            return false;\n        }\n\n        return true;\n    });\n}\n\n/**\n * We're wrapping each component with `withShouldRender`, because they're all decoratable, and `withShouldRender` attaches a\n * conditional decorator, which optionally takes a `modelIds` prop, so you can control on which models that component will be decorated.\n */\nexport const TemplateGallery = Object.assign(withShouldRender(Gallery), {\n    Container: withShouldRender(GalleryContainer),\n    List: withShouldRender(GalleryList),\n    Item: withShouldRender(TemplateItem)\n});\n"],"names":["GalleryContainer","makeDecoratable","props","GalleryList","Gallery","field","useModelField","templates","template","TemplateItem","withShouldRender","Component","withDecoratorFactory","decoratorProps","model","useModel","TemplateGallery","Object"],"mappings":";;;;AAWA,MAAMA,mBAAmBC,gBACrB,4BACA,CAACC,QACU,WAAP,GAAO,0CAAGA,MAAM,QAAQ;AAQhC,MAAMC,cAAcF,gBAAgB,uBAAuB,CAACC,QACjD,WAAP,GAAO,oBAAC;QAAI,WAAW;OAAgCA,MAAM,QAAQ;AASzE,MAAME,UAAUH,gBAAgB,mBAAmB,CAACC;IAChD,MAAM,EAAEG,KAAK,EAAE,GAAGC;IAClB,MAAMC,YAAYL,MAAM,SAAS,IAAIG,MAAM,QAAQ,EAAE,aAAa,EAAE;IAEpE,OAAO,WAAP,GACI,oBAACL,kBAAgBA,MAAAA,WAAAA,GACb,oBAACG,aAAWA,MACPI,UAAU,GAAG,CAACC,CAAAA,WAAAA,WAAAA,GACX,oBAACC,cAAYA;YACT,KAAKD,SAAS,EAAE;YAChB,UAAUA;YACV,YAAYN,MAAM,UAAU;;AAMpD;AAIA,SAASQ,iBAAiDC,SAAY;IAClE,OAAOC,uBAAqCD,WAAWE,CAAAA;QACnD,MAAM,EAAEC,KAAK,EAAE,GAAGC;QAElB,IAAIF,gBAAgB,UAAU,UAAU,CAACA,eAAe,QAAQ,CAAC,QAAQ,CAACC,MAAM,OAAO,GACnF,OAAO;QAGX,OAAO;IACX;AACJ;AAMO,MAAME,kBAAkBC,OAAO,MAAM,CAACP,iBAAiBN,UAAU;IACpE,WAAWM,iBAAiBV;IAC5B,MAAMU,iBAAiBP;IACvB,MAAMO,iBAAiBD;AAC3B"}

package/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.d.ts

@@ -3,7 +3,7 @@ import type { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
 interface TemplateIconProps {
     icon: string;
     size?: FontAwesomeIconProps["size"];
-    style?: React.CSSProperties;
+    style?: FontAwesomeIconProps["style"];
 }
 export declare const TemplateIcon: ({ icon, size, style }: TemplateIconProps) => React.JSX.Element | null;
 export {};

package/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.js

@@ -1,18 +1,15 @@
-import React from "react";
+import react from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { normalizeIcon } from "../../../../utils/normalizeIcon.js";
-export const TemplateIcon = ({
-  icon,
-  size,
-  style
-}) => {
-  const faIcon = normalizeIcon(icon);
-  return faIcon ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: "text-neutral-xstrong",
-    icon: faIcon,
-    size: size,
-    style: style
-  }) : null;
+const TemplateIcon = ({ icon, size, style })=>{
+    const faIcon = normalizeIcon(icon);
+    return faIcon ? /*#__PURE__*/ react.createElement(FontAwesomeIcon, {
+        className: "text-neutral-xstrong",
+        icon: faIcon,
+        size: size,
+        style: style
+    }) : null;
 };
+export { TemplateIcon };
 
 //# sourceMappingURL=TemplateIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","FontAwesomeIcon","normalizeIcon","TemplateIcon","icon","size","style","faIcon","createElement","className"],"sources":["TemplateIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FontAwesomeIconProps } from \"@fortawesome/react-fontawesome\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { normalizeIcon } from \"~/utils/normalizeIcon.js\";\n\ninterface TemplateIconProps {\n    icon: string;\n    size?: FontAwesomeIconProps[\"size\"];\n    style?: React.CSSProperties;\n}\n\nexport const TemplateIcon = ({ icon, size, style }: TemplateIconProps) => {\n    const faIcon = normalizeIcon(icon);\n\n    return faIcon ? (\n        <FontAwesomeIcon\n            className={\"text-neutral-xstrong\"}\n            icon={faIcon}\n            size={size}\n            style={style}\n        />\n    ) : null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,aAAa;AAQtB,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC,IAAI;EAAEC,IAAI;EAAEC;AAAyB,CAAC,KAAK;EACtE,MAAMC,MAAM,GAAGL,aAAa,CAACE,IAAI,CAAC;EAElC,OAAOG,MAAM,gBACTP,KAAA,CAAAQ,aAAA,CAACP,eAAe;IACZQ,SAAS,EAAE,sBAAuB;IAClCL,IAAI,EAAEG,MAAO;IACbF,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA;EAAM,CAChB,CAAC,GACF,IAAI;AACZ,CAAC","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.js","sources":["../../../../../src/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FontAwesomeIconProps } from \"@fortawesome/react-fontawesome\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { normalizeIcon } from \"~/utils/normalizeIcon.js\";\n\ninterface TemplateIconProps {\n    icon: string;\n    size?: FontAwesomeIconProps[\"size\"];\n    style?: FontAwesomeIconProps[\"style\"];\n}\n\nexport const TemplateIcon = ({ icon, size, style }: TemplateIconProps) => {\n    const faIcon = normalizeIcon(icon);\n\n    return faIcon ? (\n        <FontAwesomeIcon\n            className={\"text-neutral-xstrong\"}\n            icon={faIcon}\n            size={size}\n            style={style}\n        />\n    ) : null;\n};\n"],"names":["TemplateIcon","icon","size","style","faIcon","normalizeIcon","FontAwesomeIcon"],"mappings":";;;AAWO,MAAMA,eAAe,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAqB;IACjE,MAAMC,SAASC,cAAcJ;IAE7B,OAAOG,SAAS,WAATA,GACH,oBAACE,iBAAeA;QACZ,WAAW;QACX,MAAMF;QACN,MAAMF;QACN,OAAOC;SAEX;AACR"}

package/admin/plugins/fieldRenderers/dynamicZone/TemplateItem.js

@@ -1,45 +1,42 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { makeDecoratable } from "@webiny/app-admin";
 import { TemplateIcon } from "./TemplateIcon.js";
-import { Text, Button } from "@webiny/admin-ui";
-import { Dialog } from "@webiny/admin-ui";
-import { ReactComponent as PlusIcon } from "@webiny/icons/add_circle_outline.svg";
-export const TemplateItem = makeDecoratable("TemplateItem", ({
-  template,
-  onTemplate
-}) => {
-  const [isHovered, setIsHovered] = useState(false);
-  return /*#__PURE__*/React.createElement("div", {
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => setIsHovered(false),
-    className: "flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center justify-center py-xxl w-full bg-neutral-dimmed"
-  }, /*#__PURE__*/React.createElement(TemplateIcon, {
-    icon: template.icon,
-    style: {
-      width: 40,
-      height: 40
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "py-sm-extra px-md"
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: "md",
-    className: "mb-xs text-neutral-primary font-semibold"
-  }, template.name), /*#__PURE__*/React.createElement(Text, {
-    size: "sm",
-    as: "div",
-    className: "text-neutral-muted"
-  }, template.description))), isHovered && /*#__PURE__*/React.createElement(Dialog.Close, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer",
-    onClick: () => onTemplate(template)
-  }, /*#__PURE__*/React.createElement(Button, {
-    size: "lg",
-    variant: "primary",
-    icon: /*#__PURE__*/React.createElement(PlusIcon, null)
-  }, "Insert"))));
+import { Button, Dialog, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add_circle_outline.svg";
+const TemplateItem = makeDecoratable("TemplateItem", ({ template, onTemplate })=>{
+    const [isHovered, setIsHovered] = useState(false);
+    return /*#__PURE__*/ react.createElement("div", {
+        onMouseEnter: ()=>setIsHovered(true),
+        onMouseLeave: ()=>setIsHovered(false),
+        className: "flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm"
+    }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-center py-xxl w-full bg-neutral-dimmed"
+    }, /*#__PURE__*/ react.createElement(TemplateIcon, {
+        icon: template.icon,
+        style: {
+            width: 40,
+            height: 40
+        }
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "py-sm-extra px-md"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "mb-xs text-neutral-primary font-semibold"
+    }, template.name), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "text-neutral-muted"
+    }, template.description))), isHovered && /*#__PURE__*/ react.createElement(Dialog.Close, {
+        asChild: true
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer",
+        onClick: ()=>onTemplate(template)
+    }, /*#__PURE__*/ react.createElement(Button, {
+        size: "lg",
+        variant: "primary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    }, "Insert"))));
 });
+export { TemplateItem };
 
 //# sourceMappingURL=TemplateItem.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","makeDecoratable","TemplateIcon","Text","Button","Dialog","ReactComponent","PlusIcon","TemplateItem","template","onTemplate","isHovered","setIsHovered","createElement","onMouseEnter","onMouseLeave","className","icon","style","width","height","size","name","as","description","Close","asChild","onClick","variant"],"sources":["TemplateItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { TemplateIcon } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.js\";\nimport { Text, Button } from \"@webiny/admin-ui\";\nimport { Dialog } from \"@webiny/admin-ui\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\n\nexport interface TemplateCardProps {\n    template: CmsDynamicZoneTemplate;\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nexport const TemplateItem = makeDecoratable(\n    \"TemplateItem\",\n    ({ template, onTemplate }: TemplateCardProps) => {\n        const [isHovered, setIsHovered] = useState(false);\n\n        return (\n            <div\n                onMouseEnter={() => setIsHovered(true)}\n                onMouseLeave={() => setIsHovered(false)}\n                className={\n                    \"flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm\"\n                }\n            >\n                <div>\n                    <div\n                        className={\n                            \"flex items-center justify-center py-xxl w-full bg-neutral-dimmed\"\n                        }\n                    >\n                        <TemplateIcon icon={template.icon} style={{ width: 40, height: 40 }} />\n                    </div>\n                    <div className={\"py-sm-extra px-md\"}>\n                        <Text size={\"md\"} className={\"mb-xs text-neutral-primary font-semibold\"}>\n                            {template.name}\n                        </Text>\n                        <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-muted\"}>\n                            {template.description}\n                        </Text>\n                    </div>\n                </div>\n\n                {isHovered && (\n                    <Dialog.Close asChild>\n                        <div\n                            className=\"absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer\"\n                            onClick={() => onTemplate(template)}\n                        >\n                            <Button size={\"lg\"} variant=\"primary\" icon={<PlusIcon />}>\n                                Insert\n                            </Button>\n                        </div>\n                    </Dialog.Close>\n                )}\n            </div>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,YAAY;AACrB,SAASC,IAAI,EAAEC,MAAM,QAAQ,kBAAkB;AAC/C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,cAAc,IAAIC,QAAQ,QAAQ,sCAAsC;AAOjF,OAAO,MAAMC,YAAY,GAAGP,eAAe,CACvC,cAAc,EACd,CAAC;EAAEQ,QAAQ;EAAEC;AAA8B,CAAC,KAAK;EAC7C,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGZ,QAAQ,CAAC,KAAK,CAAC;EAEjD,oBACID,KAAA,CAAAc,aAAA;IACIC,YAAY,EAAEA,CAAA,KAAMF,YAAY,CAAC,IAAI,CAAE;IACvCG,YAAY,EAAEA,CAAA,KAAMH,YAAY,CAAC,KAAK,CAAE;IACxCI,SAAS,EACL;EACH,gBAEDjB,KAAA,CAAAc,aAAA,2BACId,KAAA,CAAAc,aAAA;IACIG,SAAS,EACL;EACH,gBAEDjB,KAAA,CAAAc,aAAA,CAACX,YAAY;IAACe,IAAI,EAAER,QAAQ,CAACQ,IAAK;IAACC,KAAK,EAAE;MAAEC,KAAK,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG;EAAE,CAAE,CACrE,CAAC,eACNrB,KAAA,CAAAc,aAAA;IAAKG,SAAS,EAAE;EAAoB,gBAChCjB,KAAA,CAAAc,aAAA,CAACV,IAAI;IAACkB,IAAI,EAAE,IAAK;IAACL,SAAS,EAAE;EAA2C,GACnEP,QAAQ,CAACa,IACR,CAAC,eACPvB,KAAA,CAAAc,aAAA,CAACV,IAAI;IAACkB,IAAI,EAAE,IAAK;IAACE,EAAE,EAAE,KAAM;IAACP,SAAS,EAAE;EAAqB,GACxDP,QAAQ,CAACe,WACR,CACL,CACJ,CAAC,EAELb,SAAS,iBACNZ,KAAA,CAAAc,aAAA,CAACR,MAAM,CAACoB,KAAK;IAACC,OAAO;EAAA,gBACjB3B,KAAA,CAAAc,aAAA;IACIG,SAAS,EAAC,8EAA8E;IACxFW,OAAO,EAAEA,CAAA,KAAMjB,UAAU,CAACD,QAAQ;EAAE,gBAEpCV,KAAA,CAAAc,aAAA,CAACT,MAAM;IAACiB,IAAI,EAAE,IAAK;IAACO,OAAO,EAAC,SAAS;IAACX,IAAI,eAAElB,KAAA,CAAAc,aAAA,CAACN,QAAQ,MAAE;EAAE,GAAC,QAElD,CACP,CACK,CAEjB,CAAC;AAEd,CACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/dynamicZone/TemplateItem.js","sources":["../../../../../src/admin/plugins/fieldRenderers/dynamicZone/TemplateItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { TemplateIcon } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.js\";\nimport { Text, Button } from \"@webiny/admin-ui\";\nimport { Dialog } from \"@webiny/admin-ui\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\n\nexport interface TemplateCardProps {\n    template: CmsDynamicZoneTemplate;\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nexport const TemplateItem = makeDecoratable(\n    \"TemplateItem\",\n    ({ template, onTemplate }: TemplateCardProps) => {\n        const [isHovered, setIsHovered] = useState(false);\n\n        return (\n            <div\n                onMouseEnter={() => setIsHovered(true)}\n                onMouseLeave={() => setIsHovered(false)}\n                className={\n                    \"flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm\"\n                }\n            >\n                <div>\n                    <div\n                        className={\n                            \"flex items-center justify-center py-xxl w-full bg-neutral-dimmed\"\n                        }\n                    >\n                        <TemplateIcon icon={template.icon} style={{ width: 40, height: 40 }} />\n                    </div>\n                    <div className={\"py-sm-extra px-md\"}>\n                        <Text size={\"md\"} className={\"mb-xs text-neutral-primary font-semibold\"}>\n                            {template.name}\n                        </Text>\n                        <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-muted\"}>\n                            {template.description}\n                        </Text>\n                    </div>\n                </div>\n\n                {isHovered && (\n                    <Dialog.Close asChild>\n                        <div\n                            className=\"absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer\"\n                            onClick={() => onTemplate(template)}\n                        >\n                            <Button size={\"lg\"} variant=\"primary\" icon={<PlusIcon />}>\n                                Insert\n                            </Button>\n                        </div>\n                    </Dialog.Close>\n                )}\n            </div>\n        );\n    }\n);\n"],"names":["TemplateItem","makeDecoratable","template","onTemplate","isHovered","setIsHovered","useState","TemplateIcon","Text","Dialog","Button","PlusIcon"],"mappings":";;;;;AAaO,MAAMA,eAAeC,gBACxB,gBACA,CAAC,EAAEC,QAAQ,EAAEC,UAAU,EAAqB;IACxC,MAAM,CAACC,WAAWC,aAAa,GAAGC,SAAS;IAE3C,OAAO,WAAP,GACI,oBAAC;QACG,cAAc,IAAMD,aAAa;QACjC,cAAc,IAAMA,aAAa;QACjC,WACI;qBAGJ,oBAAC,2BACG,oBAAC;QACG,WACI;qBAGJ,oBAACE,cAAYA;QAAC,MAAML,SAAS,IAAI;QAAE,OAAO;YAAE,OAAO;YAAI,QAAQ;QAAG;uBAEtE,oBAAC;QAAI,WAAW;qBACZ,oBAACM,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBN,SAAS,IAAI,iBAElB,oBAACM,MAAIA;QAAC,MAAM;QAAM,IAAI;QAAO,WAAW;OACnCN,SAAS,WAAW,KAKhCE,aAAa,WAAbA,GACG,oBAACK,OAAO,KAAK;QAAC;qBACV,oBAAC;QACG,WAAU;QACV,SAAS,IAAMN,WAAWD;qBAE1B,oBAACQ,QAAMA;QAAC,MAAM;QAAM,SAAQ;QAAU,oBAAM,oBAACC,gBAAQA;OAAK;AAQlF"}

package/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.js

@@ -1,18 +1,18 @@
-import React, { useMemo } from "react";
-const TemplateContext = /*#__PURE__*/React.createContext(undefined);
-export const TemplateProvider = ({
-  template,
-  children
-}) => {
-  const context = useMemo(() => ({
-    template
-  }), [template.id]);
-  return /*#__PURE__*/React.createElement(TemplateContext.Provider, {
-    value: context
-  }, children);
+import react, { useMemo } from "react";
+const TemplateContext = /*#__PURE__*/ react.createContext(void 0);
+const TemplateProvider = ({ template, children })=>{
+    const context = useMemo(()=>({
+            template
+        }), [
+        template.id
+    ]);
+    return /*#__PURE__*/ react.createElement(TemplateContext.Provider, {
+        value: context
+    }, children);
 };
-export function useTemplate() {
-  return React.useContext(TemplateContext);
+function useTemplate() {
+    return react.useContext(TemplateContext);
 }
+export { TemplateProvider, useTemplate };
 
 //# sourceMappingURL=TemplateProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","TemplateContext","createContext","undefined","TemplateProvider","template","children","context","id","createElement","Provider","value","useTemplate","useContext"],"sources":["TemplateProvider.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { CmsDynamicZoneTemplate } from \"@webiny/app-headless-cms-common/types/index.js\";\n\nexport interface TemplateContext {\n    template: CmsDynamicZoneTemplate;\n}\n\nconst TemplateContext = React.createContext<TemplateContext | undefined>(undefined);\n\nexport interface TemplateProviderProps {\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const TemplateProvider = ({ template, children }: TemplateProviderProps) => {\n    const context = useMemo(() => ({ template }), [template.id]);\n    return <TemplateContext.Provider value={context}>{children}</TemplateContext.Provider>;\n};\n\nexport function useTemplate() {\n    return React.useContext(TemplateContext);\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAOtC,MAAMC,eAAe,gBAAGF,KAAK,CAACG,aAAa,CAA8BC,SAAS,CAAC;AAOnF,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAgC,CAAC,KAAK;EAC/E,MAAMC,OAAO,GAAGP,OAAO,CAAC,OAAO;IAAEK;EAAS,CAAC,CAAC,EAAE,CAACA,QAAQ,CAACG,EAAE,CAAC,CAAC;EAC5D,oBAAOT,KAAA,CAAAU,aAAA,CAACR,eAAe,CAACS,QAAQ;IAACC,KAAK,EAAEJ;EAAQ,GAAED,QAAmC,CAAC;AAC1F,CAAC;AAED,OAAO,SAASM,WAAWA,CAAA,EAAG;EAC1B,OAAOb,KAAK,CAACc,UAAU,CAACZ,eAAe,CAAC;AAC5C","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.js","sources":["../../../../../src/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { CmsDynamicZoneTemplate } from \"@webiny/app-headless-cms-common/types/index.js\";\n\nexport interface TemplateContext {\n    template: CmsDynamicZoneTemplate;\n}\n\nconst TemplateContext = React.createContext<TemplateContext | undefined>(undefined);\n\nexport interface TemplateProviderProps {\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const TemplateProvider = ({ template, children }: TemplateProviderProps) => {\n    const context = useMemo(() => ({ template }), [template.id]);\n    return <TemplateContext.Provider value={context}>{children}</TemplateContext.Provider>;\n};\n\nexport function useTemplate() {\n    return React.useContext(TemplateContext);\n}\n"],"names":["TemplateContext","React","undefined","TemplateProvider","template","children","context","useMemo","useTemplate"],"mappings":";AAOA,MAAMA,kBAAkB,WAAHA,GAAGC,MAAAA,aAAmB,CAA8BC;AAOlE,MAAMC,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAyB;IAC1E,MAAMC,UAAUC,QAAQ,IAAO;YAAEH;QAAS,IAAI;QAACA,SAAS,EAAE;KAAC;IAC3D,OAAO,WAAP,GAAO,oBAACJ,gBAAgB,QAAQ;QAAC,OAAOM;OAAUD;AACtD;AAEO,SAASG;IACZ,OAAOP,MAAAA,UAAgB,CAACD;AAC5B"}

package/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.d.ts

@@ -9,7 +9,7 @@ export type DynamicZoneContainerProps = {
     title?: string;
     description?: string;
     className?: string;
-    actions?: JSX.Element;
+    actions?: React.JSX.Element;
 };
 export declare const DynamicZoneContainer: ((props: DynamicZoneContainerProps) => React.JSX.Element) & {
     original: (props: DynamicZoneContainerProps) => React.JSX.Element;

package/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.js

@@ -1,105 +1,78 @@
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-import React from "react";
+import react from "react";
 import { css } from "@emotion/css";
 import { SingleValueDynamicZone } from "./SingleValueDynamicZone.js";
 import { MultiValueDynamicZone } from "./MultiValueDynamicZone.js";
 import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings.js";
 import { makeDecoratable } from "@webiny/react-composition";
 import { Accordion, FormComponentErrorMessage } from "@webiny/admin-ui";
-import { ReactComponent as HorizontalRuleIcon } from "@webiny/icons/horizontal_rule.svg";
-const noBottomPadding = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
-  name: "1n8outh",
-  styles: ">.webiny-ui-accordion-item__content{padding-bottom:0!important;}"
-} : {
-  name: "lyg8qk-noBottomPadding",
-  styles: ">.webiny-ui-accordion-item__content{padding-bottom:0!important;};label:noBottomPadding;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImR5bmFtaWNab25lUmVuZGVyZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCMkIiLCJmaWxlIjoiZHluYW1pY1pvbmVSZW5kZXJlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgdHlwZSB7XG4gICAgQmluZENvbXBvbmVudCxcbiAgICBCaW5kQ29tcG9uZW50UmVuZGVyUHJvcCxcbiAgICBDbXNNb2RlbCxcbiAgICBDbXNNb2RlbEZpZWxkLFxuICAgIENtc01vZGVsRmllbGRSZW5kZXJlclBsdWdpbixcbiAgICBDbXNNb2RlbEZpZWxkUmVuZGVyZXJQcm9wc1xufSBmcm9tIFwifi90eXBlcy5qc1wiO1xuaW1wb3J0IHsgU2luZ2xlVmFsdWVEeW5hbWljWm9uZSB9IGZyb20gXCIuL1NpbmdsZVZhbHVlRHluYW1pY1pvbmUuanNcIjtcbmltcG9ydCB7IE11bHRpVmFsdWVEeW5hbWljWm9uZSB9IGZyb20gXCIuL011bHRpVmFsdWVEeW5hbWljWm9uZS5qc1wiO1xuaW1wb3J0IHsgQWNjb3JkaW9uUmVuZGVyU2V0dGluZ3MsIGdldEFjY29yZGlvblJlbmRlclNldHRpbmdzIH0gZnJvbSBcIi4uL0FjY29yZGlvblJlbmRlclNldHRpbmdzLmpzXCI7XG5pbXBvcnQgeyBtYWtlRGVjb3JhdGFibGUgfSBmcm9tIFwiQHdlYmlueS9yZWFjdC1jb21wb3NpdGlvblwiO1xuaW1wb3J0IHsgQWNjb3JkaW9uLCBGb3JtQ29tcG9uZW50RXJyb3JNZXNzYWdlIH0gZnJvbSBcIkB3ZWJpbnkvYWRtaW4tdWlcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIEhvcml6b250YWxSdWxlSWNvbiB9IGZyb20gXCJAd2ViaW55L2ljb25zL2hvcml6b250YWxfcnVsZS5zdmdcIjtcblxuY29uc3Qgbm9Cb3R0b21QYWRkaW5nID0gY3NzYFxuICAgID4gLndlYmlueS11aS1hY2NvcmRpb24taXRlbV9fY29udGVudCB7XG4gICAgICAgIHBhZGRpbmctYm90dG9tOiAwICFpbXBvcnRhbnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IHR5cGUgRHluYW1pY1pvbmVDb250YWluZXJQcm9wcyA9IHtcbiAgICBmaWVsZDogQ21zTW9kZWxGaWVsZDtcbiAgICBnZXRCaW5kOiAoaW5kZXg/OiBudW1iZXIsIGtleT86IHN0cmluZykgPT4gQmluZENvbXBvbmVudDtcbiAgICBjb250ZW50TW9kZWw6IENtc01vZGVsO1xuICAgIGJpbmQ6IEJpbmRDb21wb25lbnRSZW5kZXJQcm9wO1xuICAgIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG4gICAgdGl0bGU/OiBzdHJpbmc7XG4gICAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG4gICAgY2xhc3NOYW1lPzogc3RyaW5nO1xuICAgIGFjdGlvbnM/OiBKU1guRWxlbWVudDtcbn07XG5cbmV4cG9ydCBjb25zdCBEeW5hbWljWm9uZUNvbnRhaW5lciA9IG1ha2VEZWNvcmF0YWJsZShcbiAgICBcIkR5bmFtaWNab25lQ29udGFpbmVyXCIsXG4gICAgKHByb3BzOiBEeW5hbWljWm9uZUNvbnRhaW5lclByb3BzKSA9PiB7XG4gICAgICAgIGNvbnN0IHtcbiAgICAgICAgICAgIGZpZWxkLFxuICAgICAgICAgICAgYmluZDoge1xuICAgICAgICAgICAgICAgIHZhbGlkYXRpb246IHsgaXNWYWxpZCwgbWVzc2FnZSB9XG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgdGl0bGUgPSBmaWVsZC5sYWJlbCxcbiAgICAgICAgICAgIGRlc2NyaXB0aW9uID0gZmllbGQuaGVscFRleHQsXG4gICAgICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgICAgICBjaGlsZHJlblxuICAgICAgICB9ID0gcHJvcHM7XG5cbiAgICAgICAgY29uc3QgZGVmYXVsdENsYXNzTmFtZSA9IGZpZWxkLm11bHRpcGxlVmFsdWVzID8gbm9Cb3R0b21QYWRkaW5nIDogdW5kZWZpbmVkO1xuICAgICAgICBjb25zdCB7IG9wZW4gfSA9IGdldEFjY29yZGlvblJlbmRlclNldHRpbmdzKGZpZWxkKTtcblxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPD5cbiAgICAgICAgICAgICAgICA8QWNjb3JkaW9uIGJhY2tncm91bmQ9e1wiYmFzZVwifSB2YXJpYW50PXtcImNvbnRhaW5lclwifT5cbiAgICAgICAgICAgICAgICAgICAgPEFjY29yZGlvbi5JdGVtXG4gICAgICAgICAgICAgICAgICAgICAgICBpY29uPXtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8QWNjb3JkaW9uLkl0ZW0uSWNvblxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb2xvcj17XCJhY2NlbnRcIn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgbGFiZWw9XCJBY2NvcmRpb24gSXRlbVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGljb249ezxIb3Jpem9udGFsUnVsZUljb24gLz59XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICAgICAgICAgICAgICAgICAgICAgIGRlc2NyaXB0aW9uPXtkZXNjcmlwdGlvbn1cbiAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lIHx8IGRlZmF1bHRDbGFzc05hbWV9XG4gICAgICAgICAgICAgICAgICAgICAgICBkZWZhdWx0T3Blbj17b3Blbn1cbiAgICAgICAgICAgICAgICAgICAgICAgIGFjdGlvbnM9e3Byb3BzLmFjdGlvbnMgPz8gbnVsbH1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgICAgICAgICA8L0FjY29yZGlvbi5JdGVtPlxuICAgICAgICAgICAgICAgIDwvQWNjb3JkaW9uPlxuICAgICAgICAgICAgICAgIHtpc1ZhbGlkID09PSBmYWxzZSAmJiA8Rm9ybUNvbXBvbmVudEVycm9yTWVzc2FnZSB0ZXh0PXttZXNzYWdlfSAvPn1cbiAgICAgICAgICAgIDwvPlxuICAgICAgICApO1xuICAgIH1cbik7XG5cbmNvbnN0IER5bmFtaWNab25lQ29udGVudCA9ICh7IGZpZWxkLCBnZXRCaW5kLCBjb250ZW50TW9kZWwgfTogQ21zTW9kZWxGaWVsZFJlbmRlcmVyUHJvcHMpID0+IHtcbiAgICBjb25zdCB0ZW1wbGF0ZXMgPSBmaWVsZC5zZXR0aW5ncz8udGVtcGxhdGVzIHx8IFtdO1xuICAgIGlmICghdGVtcGxhdGVzLmxlbmd0aCkge1xuICAgICAgICBjb25zb2xlLmluZm8oXG4gICAgICAgICAgICBgU2tpcHBpbmcgXCIke2ZpZWxkLmZpZWxkSWR9XCIgZmllbGQuIFRoZXJlIGFyZSBubyB0ZW1wbGF0ZXMgZGVmaW5lZCBmb3IgdGhpcyBkeW5hbWljIHpvbmUuYFxuICAgICAgICApO1xuICAgICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG5cbiAgICBjb25zdCBCaW5kID0gZ2V0QmluZCgpO1xuXG4gICAgY29uc3QgQ29tcG9uZW50ID0gZmllbGQubXVsdGlwbGVWYWx1ZXMgPyBNdWx0aVZhbHVlRHluYW1pY1pvbmUgOiBTaW5nbGVWYWx1ZUR5bmFtaWNab25lO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEJpbmQ+XG4gICAgICAgICAgICB7YmluZCA9PiB7XG4gICAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICAgICAgPEJpbmQuVmFsaWRhdGlvbkNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxEeW5hbWljWm9uZUNvbnRhaW5lclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGZpZWxkPXtmaWVsZH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBiaW5kPXtiaW5kfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGdldEJpbmQ9e2dldEJpbmR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgY29udGVudE1vZGVsPXtjb250ZW50TW9kZWx9XG4gICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPENvbXBvbmVudFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBiaW5kPXtiaW5kfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmaWVsZD17ZmllbGR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGdldEJpbmQ9e2dldEJpbmR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNvbnRlbnRNb2RlbD17Y29udGVudE1vZGVsfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0R5bmFtaWNab25lQ29udGFpbmVyPlxuICAgICAgICAgICAgICAgICAgICA8L0JpbmQuVmFsaWRhdGlvbkNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgfX1cbiAgICAgICAgPC9CaW5kPlxuICAgICk7XG59O1xuXG5leHBvcnQgY29uc3QgZHluYW1pY1pvbmVGaWVsZFJlbmRlcmVyOiBDbXNNb2RlbEZpZWxkUmVuZGVyZXJQbHVnaW4gPSB7XG4gICAgdHlwZTogXCJjbXMtZWRpdG9yLWZpZWxkLXJlbmRlcmVyXCIsXG4gICAgbmFtZTogXCJjbXMtZWRpdG9yLWZpZWxkLXJlbmRlcmVyLWR5bmFtaWMtem9uZVwiLFxuICAgIHJlbmRlcmVyOiB7XG4gICAgICAgIHJlbmRlcmVyTmFtZTogXCJkeW5hbWljWm9uZVwiLFxuICAgICAgICBuYW1lOiBcIkR5bmFtaWMgWm9uZVwiLFxuICAgICAgICBkZXNjcmlwdGlvbjogXCJSZW5kZXJzIGEgZHluYW1pYyB6b25lLlwiLFxuICAgICAgICBjYW5Vc2UoeyBmaWVsZCB9KSB7XG4gICAgICAgICAgICByZXR1cm4gZmllbGQudHlwZSA9PT0gXCJkeW5hbWljWm9uZVwiO1xuICAgICAgICB9LFxuICAgICAgICByZW5kZXIocHJvcHMpIHtcbiAgICAgICAgICAgIHJldHVybiA8RHluYW1pY1pvbmVDb250ZW50IHsuLi5wcm9wc30gLz47XG4gICAgICAgIH0sXG4gICAgICAgIHJlbmRlclNldHRpbmdzKHsgZmllbGQgfSkge1xuICAgICAgICAgICAgcmV0dXJuIDxBY2NvcmRpb25SZW5kZXJTZXR0aW5ncyBmaWVsZD17ZmllbGR9IC8+O1xuICAgICAgICB9XG4gICAgfVxufTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-export const DynamicZoneContainer = makeDecoratable("DynamicZoneContainer", props => {
-  const {
-    field,
-    bind: {
-      validation: {
-        isValid,
-        message
-      }
-    },
-    title = field.label,
-    description = field.helpText,
-    className,
-    children
-  } = props;
-  const defaultClassName = field.multipleValues ? noBottomPadding : undefined;
-  const {
-    open
-  } = getAccordionRenderSettings(field);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Accordion, {
-    background: "base",
-    variant: "container"
-  }, /*#__PURE__*/React.createElement(Accordion.Item, {
-    icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-      color: "accent",
-      label: "Accordion Item",
-      icon: /*#__PURE__*/React.createElement(HorizontalRuleIcon, null)
-    }),
-    title: title,
-    description: description,
-    className: className || defaultClassName,
-    defaultOpen: open,
-    actions: props.actions ?? null
-  }, children)), isValid === false && /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
-    text: message
-  }));
+import { ReactComponent } from "@webiny/icons/horizontal_rule.svg";
+const noBottomPadding = css`
+    > .webiny-ui-accordion-item__content {
+        padding-bottom: 0 !important;
+    }
+`;
+const DynamicZoneContainer = makeDecoratable("DynamicZoneContainer", (props)=>{
+    const { field, bind: { validation: { isValid, message } }, title = field.label, description = field.description, className, children } = props;
+    const defaultClassName = field.list ? noBottomPadding : void 0;
+    const { open } = getAccordionRenderSettings(field);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container"
+    }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+        icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+            color: "accent",
+            label: "Accordion Item",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        }),
+        title: title,
+        description: description,
+        className: className || defaultClassName,
+        defaultOpen: open,
+        actions: props.actions ?? null
+    }, children)), false === isValid && /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: message
+    }));
 });
-const DynamicZoneContent = ({
-  field,
-  getBind,
-  contentModel
-}) => {
-  const templates = field.settings?.templates || [];
-  if (!templates.length) {
-    console.info(`Skipping "${field.fieldId}" field. There are no templates defined for this dynamic zone.`);
-    return null;
-  }
-  const Bind = getBind();
-  const Component = field.multipleValues ? MultiValueDynamicZone : SingleValueDynamicZone;
-  return /*#__PURE__*/React.createElement(Bind, null, bind => {
-    return /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(DynamicZoneContainer, {
-      field: field,
-      bind: bind,
-      getBind: getBind,
-      contentModel: contentModel
-    }, /*#__PURE__*/React.createElement(Component, {
-      bind: bind,
-      field: field,
-      getBind: getBind,
-      contentModel: contentModel
-    })));
-  });
+const DynamicZoneContent = ({ field, getBind, contentModel })=>{
+    const templates = field.settings?.templates || [];
+    if (!templates.length) {
+        console.info(`Skipping "${field.fieldId}" field. There are no templates defined for this dynamic zone.`);
+        return null;
+    }
+    const Bind = getBind();
+    const Component = field.list ? MultiValueDynamicZone : SingleValueDynamicZone;
+    return /*#__PURE__*/ react.createElement(Bind, null, (bind)=>/*#__PURE__*/ react.createElement(Bind.ValidationContainer, null, /*#__PURE__*/ react.createElement(DynamicZoneContainer, {
+            field: field,
+            bind: bind,
+            getBind: getBind,
+            contentModel: contentModel
+        }, /*#__PURE__*/ react.createElement(Component, {
+            bind: bind,
+            field: field,
+            getBind: getBind,
+            contentModel: contentModel
+        }))));
 };
-export const dynamicZoneFieldRenderer = {
-  type: "cms-editor-field-renderer",
-  name: "cms-editor-field-renderer-dynamic-zone",
-  renderer: {
-    rendererName: "dynamicZone",
-    name: "Dynamic Zone",
-    description: "Renders a dynamic zone.",
-    canUse({
-      field
-    }) {
-      return field.type === "dynamicZone";
-    },
-    render(props) {
-      return /*#__PURE__*/React.createElement(DynamicZoneContent, props);
-    },
-    renderSettings({
-      field
-    }) {
-      return /*#__PURE__*/React.createElement(AccordionRenderSettings, {
-        field: field
-      });
+const dynamicZoneFieldRenderer = {
+    type: "cms-editor-field-renderer",
+    name: "cms-editor-field-renderer-dynamic-zone",
+    renderer: {
+        rendererName: "dynamicZone",
+        name: "Dynamic Zone",
+        description: "Renders a dynamic zone.",
+        canUse ({ field }) {
+            return "dynamicZone" === field.type;
+        },
+        render (props) {
+            return /*#__PURE__*/ react.createElement(DynamicZoneContent, props);
+        },
+        renderSettings ({ field }) {
+            return /*#__PURE__*/ react.createElement(AccordionRenderSettings, {
+                field: field
+            });
+        }
     }
-  }
 };
+export { DynamicZoneContainer, dynamicZoneFieldRenderer };
 
 //# sourceMappingURL=dynamicZoneRenderer.js.map