@webiny/app-headless-cms 6.3.0 → 6.4.0-beta.0

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/delete.svg";
 import { makeDecoratable, useConfirmationDialog } from "@webiny/app-admin";
 import { Accordion, Tooltip } from "@webiny/admin-ui";
 import { AddTemplateButton } from "./AddTemplate.js";
@@ -8,92 +8,80 @@ import { TemplateProvider } from "./TemplateProvider.js";
 import { Fields } from "../../../components/ContentEntryForm/Fields.js";
 import { ParentFieldProvider } from "../../../components/ContentEntryForm/ParentValue.js";
 import { useFieldEffectiveRules } from "@webiny/app-headless-cms-common";
-import { ParentValueIndexProvider, ModelFieldProvider, useModelField } from "../../../components/ModelFieldProvider/index.js";
-export const SingleValueItemContainer = makeDecoratable("SingleValueItemContainer", props => {
-  const {
-    template,
-    actions,
-    children,
-    disabled = false
-  } = props;
-  const accordionActions = disabled ? null : /*#__PURE__*/React.createElement(React.Fragment, null, actions ?? null, /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-    icon: /*#__PURE__*/React.createElement(Tooltip, {
-      trigger: /*#__PURE__*/React.createElement(DeleteIcon, null),
-      content: "Delete"
-    }),
-    onClick: props.onDelete
-  }));
-  return /*#__PURE__*/React.createElement(Accordion.Item, {
-    title: template.name,
-    description: template.description,
-    icon: /*#__PURE__*/React.createElement(TemplateIcon, {
-      icon: template.icon
-    }),
-    actions: accordionActions
-  }, children);
+import { ModelFieldProvider, ParentValueIndexProvider, useModelField } from "../../../components/ModelFieldProvider/index.js";
+const SingleValueItemContainer = makeDecoratable("SingleValueItemContainer", (props)=>{
+    const { template, actions, children, disabled = false } = props;
+    const accordionActions = disabled ? null : /*#__PURE__*/ react.createElement(react.Fragment, null, actions ?? null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            content: "Delete"
+        }),
+        onClick: props.onDelete
+    }));
+    return /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: template.name,
+        description: template.description,
+        icon: /*#__PURE__*/ react.createElement(TemplateIcon, {
+            icon: template.icon
+        }),
+        actions: accordionActions
+    }, children);
 });
-export const SingleValueDynamicZone = ({
-  bind,
-  contentModel,
-  getBind
-}) => {
-  const {
-    field
-  } = useModelField();
-  const rules = useFieldEffectiveRules(field);
-  const disabled = !rules.canEdit || rules.disabled;
-  const {
-    showConfirmation
-  } = useConfirmationDialog({
-    message: `Are you sure you want to remove this item? This action is not reversible.`,
-    acceptLabel: `Yes, I'm sure!`,
-    cancelLabel: `No, leave it.`
-  });
-  const onTemplate = template => {
-    bind.onChange({
-      _templateId: template.id,
-      __typename: template.__typename
+const SingleValueDynamicZone = ({ bind, contentModel, getBind })=>{
+    const { field } = useModelField();
+    const rules = useFieldEffectiveRules(field);
+    const disabled = !rules.canEdit || rules.disabled;
+    const { showConfirmation } = useConfirmationDialog({
+        message: "Are you sure you want to remove this item? This action is not reversible.",
+        acceptLabel: "Yes, I'm sure!",
+        cancelLabel: "No, leave it."
     });
-  };
-  const templates = field.settings?.templates || [];
-  const template = bind.value ? templates.find(tpl => tpl.id === bind.value._templateId) : undefined;
-  const Bind = getBind();
-  const unsetValue = () => {
-    showConfirmation(() => {
-      bind.onChange(null);
-    });
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, template ? /*#__PURE__*/React.createElement(ParentFieldProvider, {
-    value: bind.value,
-    path: Bind.parentName
-  }, /*#__PURE__*/React.createElement(ParentValueIndexProvider, {
-    index: -1
-  }, /*#__PURE__*/React.createElement(ModelFieldProvider, {
-    field: field
-  }, /*#__PURE__*/React.createElement(Accordion, {
-    background: "base",
-    variant: "container"
-  }, /*#__PURE__*/React.createElement(SingleValueItemContainer, {
-    disabled: disabled,
-    template: template,
-    value: bind.value,
-    contentModel: contentModel,
-    onDelete: unsetValue,
-    title: template.name,
-    description: template.description,
-    icon: /*#__PURE__*/React.createElement(TemplateIcon, {
-      icon: template.icon
-    })
-  }, /*#__PURE__*/React.createElement(TemplateProvider, {
-    template: template
-  }, /*#__PURE__*/React.createElement(Fields, {
-    fields: template.fields,
-    layout: template.layout || [],
-    contentModel: contentModel,
-    Bind: Bind
-  }))))))) : null, bind.value ? null : /*#__PURE__*/React.createElement(AddTemplateButton, {
-    onTemplate: onTemplate
-  }));
+    const onTemplate = (template)=>{
+        bind.onChange({
+            _templateId: template.id,
+            __typename: template.__typename
+        });
+    };
+    const templates = field.settings?.templates || [];
+    const template = bind.value ? templates.find((tpl)=>tpl.id === bind.value._templateId) : void 0;
+    const Bind = getBind();
+    const unsetValue = ()=>{
+        showConfirmation(()=>{
+            bind.onChange(null);
+        });
+    };
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, template ? /*#__PURE__*/ react.createElement(ParentFieldProvider, {
+        value: bind.value,
+        path: Bind.parentName
+    }, /*#__PURE__*/ react.createElement(ParentValueIndexProvider, {
+        index: -1
+    }, /*#__PURE__*/ react.createElement(ModelFieldProvider, {
+        field: field
+    }, /*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container"
+    }, /*#__PURE__*/ react.createElement(SingleValueItemContainer, {
+        disabled: disabled,
+        template: template,
+        value: bind.value,
+        contentModel: contentModel,
+        onDelete: unsetValue,
+        title: template.name,
+        description: template.description,
+        icon: /*#__PURE__*/ react.createElement(TemplateIcon, {
+            icon: template.icon
+        })
+    }, /*#__PURE__*/ react.createElement(TemplateProvider, {
+        template: template
+    }, /*#__PURE__*/ react.createElement(Fields, {
+        fields: template.fields,
+        layout: template.layout || [],
+        contentModel: contentModel,
+        Bind: Bind
+    }))))))) : null, bind.value ? null : /*#__PURE__*/ react.createElement(AddTemplateButton, {
+        onTemplate: onTemplate
+    }));
 };
+export { SingleValueDynamicZone, SingleValueItemContainer };
 
 //# sourceMappingURL=SingleValueDynamicZone.js.map

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","useFieldEffectiveRules","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 { 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"],"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.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?: 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"],"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"}