@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

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

@@ -0,0 +1,46 @@
+import React from "react";
+import type { BindComponentRenderProp, CmsDynamicZoneTemplate, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types.js";
+type GetBind = CmsModelFieldRendererProps["getBind"];
+interface SingleValueDynamicZoneProps {
+    field: CmsModelField;
+    bind: BindComponentRenderProp;
+    contentModel: CmsModel;
+    getBind: GetBind;
+}
+interface TemplateValue {
+    _templateId: string;
+    [key: string]: any;
+}
+export interface SingleValueItemContainerProps {
+    value: TemplateValue;
+    contentModel: CmsModel;
+    onDelete: () => void;
+    title: React.ReactNode;
+    description: string;
+    disabled?: boolean;
+    icon: React.JSX.Element;
+    actions?: React.JSX.Element;
+    template: CmsDynamicZoneTemplate;
+    children: React.ReactNode;
+}
+export declare const SingleValueItemContainer: ((props: SingleValueItemContainerProps) => React.JSX.Element) & {
+    original: (props: SingleValueItemContainerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: SingleValueItemContainerProps) => React.JSX.Element) & {
+        original: (props: SingleValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: SingleValueItemContainerProps) => React.JSX.Element) & {
+        original: (props: SingleValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export declare const SingleValueDynamicZone: ({ bind, contentModel, getBind }: SingleValueDynamicZoneProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,87 @@
+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";
+import { TemplateIcon } from "./TemplateIcon.js";
+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 { 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);
+});
+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 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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,121 @@
+import React from "react";
+import type { CmsDynamicZoneTemplate } from "../../../../types.js";
+export interface TemplateGalleryContainerProps {
+    children: React.ReactNode;
+}
+export interface TemplateGalleryListProps {
+    children: React.ReactNode;
+}
+export interface TemplateGalleryProps {
+    onTemplate: (template: CmsDynamicZoneTemplate) => void;
+    onClose: () => void;
+    templates?: CmsDynamicZoneTemplate[];
+}
+export type ShouldRender = {
+    modelIds?: string[];
+};
+/**
+ * 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 declare const TemplateGallery: ((props: TemplateGalleryProps) => React.JSX.Element) & {
+    original: (props: TemplateGalleryProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: TemplateGalleryProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: ShouldRender) => React.JSX.Element;
+} & {
+    Container: ((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: ShouldRender) => React.JSX.Element;
+    };
+    List: ((props: TemplateGalleryListProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryListProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: TemplateGalleryListProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryListProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryListProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryListProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryListProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryListProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: ShouldRender) => React.JSX.Element;
+    };
+    Item: (({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element) & {
+        original: ({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element) & {
+            original: ({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element) & {
+            original: ({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element) & {
+            original: ({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: ShouldRender) => React.JSX.Element;
+    };
+};

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

@@ -0,0 +1,32 @@
+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)=>/*#__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;
+    });
+}
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1,15 @@
+import react from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { normalizeIcon } from "../../../../utils/normalizeIcon.js";
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import type { CmsDynamicZoneTemplate } from "../../../../types.js";
+export interface TemplateCardProps {
+    template: CmsDynamicZoneTemplate;
+    onTemplate: (template: CmsDynamicZoneTemplate) => void;
+}
+export declare const TemplateItem: (({ template, onTemplate }: TemplateCardProps) => React.JSX.Element) & {
+    original: ({ template, onTemplate }: TemplateCardProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ template, onTemplate }: TemplateCardProps) => React.JSX.Element) & {
+        original: ({ template, onTemplate }: TemplateCardProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ template, onTemplate }: TemplateCardProps) => React.JSX.Element) & {
+        original: ({ template, onTemplate }: TemplateCardProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};

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

@@ -0,0 +1,42 @@
+import react, { useState } from "react";
+import { makeDecoratable } from "@webiny/app-admin";
+import { TemplateIcon } from "./TemplateIcon.js";
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { CmsDynamicZoneTemplate } from "@webiny/app-headless-cms-common/types/index.js";
+export interface TemplateContext {
+    template: CmsDynamicZoneTemplate;
+}
+export interface TemplateProviderProps {
+    template: CmsDynamicZoneTemplate;
+    children: React.ReactNode;
+}
+export declare const TemplateProvider: ({ template, children }: TemplateProviderProps) => React.JSX.Element;
+export declare function useTemplate(): TemplateContext | undefined;

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

@@ -0,0 +1,18 @@
+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);
+};
+function useTemplate() {
+    return react.useContext(TemplateContext);
+}
+export { TemplateProvider, useTemplate };
+
+//# sourceMappingURL=TemplateProvider.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,33 @@
+import React from "react";
+import type { BindComponent, BindComponentRenderProp, CmsModel, CmsModelField, CmsModelFieldRendererPlugin } from "../../../../types.js";
+export type DynamicZoneContainerProps = {
+    field: CmsModelField;
+    getBind: (index?: number, key?: string) => BindComponent;
+    contentModel: CmsModel;
+    bind: BindComponentRenderProp;
+    children: React.ReactNode;
+    title?: string;
+    description?: string;
+    className?: string;
+    actions?: React.JSX.Element;
+};
+export declare const DynamicZoneContainer: ((props: DynamicZoneContainerProps) => React.JSX.Element) & {
+    original: (props: DynamicZoneContainerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: DynamicZoneContainerProps) => React.JSX.Element) & {
+        original: (props: DynamicZoneContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: DynamicZoneContainerProps) => React.JSX.Element) & {
+        original: (props: DynamicZoneContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export declare const dynamicZoneFieldRenderer: CmsModelFieldRendererPlugin;

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

@@ -0,0 +1,78 @@
+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 } 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.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
+        }))));
+};
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.js","sources":["../../../../../src/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"@emotion/css\";\nimport type {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsModel,\n    CmsModelField,\n    CmsModelFieldRendererPlugin,\n    CmsModelFieldRendererProps\n} from \"~/types.js\";\nimport { SingleValueDynamicZone } from \"./SingleValueDynamicZone.js\";\nimport { MultiValueDynamicZone } from \"./MultiValueDynamicZone.js\";\nimport { AccordionRenderSettings, getAccordionRenderSettings } from \"../AccordionRenderSettings.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { Accordion, FormComponentErrorMessage } from \"@webiny/admin-ui\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\n\nconst noBottomPadding = css`\n    > .webiny-ui-accordion-item__content {\n        padding-bottom: 0 !important;\n    }\n`;\n\nexport type DynamicZoneContainerProps = {\n    field: CmsModelField;\n    getBind: (index?: number, key?: string) => BindComponent;\n    contentModel: CmsModel;\n    bind: BindComponentRenderProp;\n    children: React.ReactNode;\n    title?: string;\n    description?: string;\n    className?: string;\n    actions?: React.JSX.Element;\n};\n\nexport const DynamicZoneContainer = makeDecoratable(\n    \"DynamicZoneContainer\",\n    (props: DynamicZoneContainerProps) => {\n        const {\n            field,\n            bind: {\n                validation: { isValid, message }\n            },\n            title = field.label,\n            description = field.description,\n            className,\n            children\n        } = props;\n\n        const defaultClassName = field.list ? noBottomPadding : undefined;\n        const { open } = getAccordionRenderSettings(field);\n\n        return (\n            <>\n                <Accordion background={\"base\"} variant={\"container\"}>\n                    <Accordion.Item\n                        icon={\n                            <Accordion.Item.Icon\n                                color={\"accent\"}\n                                label=\"Accordion Item\"\n                                icon={<HorizontalRuleIcon />}\n                            />\n                        }\n                        title={title}\n                        description={description}\n                        className={className || defaultClassName}\n                        defaultOpen={open}\n                        actions={props.actions ?? null}\n                    >\n                        {children}\n                    </Accordion.Item>\n                </Accordion>\n                {isValid === false && <FormComponentErrorMessage text={message} />}\n            </>\n        );\n    }\n);\n\nconst DynamicZoneContent = ({ field, getBind, contentModel }: CmsModelFieldRendererProps) => {\n    const templates = field.settings?.templates || [];\n    if (!templates.length) {\n        console.info(\n            `Skipping \"${field.fieldId}\" field. There are no templates defined for this dynamic zone.`\n        );\n        return null;\n    }\n\n    const Bind = getBind();\n\n    const Component = field.list ? MultiValueDynamicZone : SingleValueDynamicZone;\n\n    return (\n        <Bind>\n            {bind => {\n                return (\n                    <Bind.ValidationContainer>\n                        <DynamicZoneContainer\n                            field={field}\n                            bind={bind}\n                            getBind={getBind}\n                            contentModel={contentModel}\n                        >\n                            <Component\n                                bind={bind}\n                                field={field}\n                                getBind={getBind}\n                                contentModel={contentModel}\n                            />\n                        </DynamicZoneContainer>\n                    </Bind.ValidationContainer>\n                );\n            }}\n        </Bind>\n    );\n};\n\nexport const dynamicZoneFieldRenderer: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-dynamic-zone\",\n    renderer: {\n        rendererName: \"dynamicZone\",\n        name: \"Dynamic Zone\",\n        description: \"Renders a dynamic zone.\",\n        canUse({ field }) {\n            return field.type === \"dynamicZone\";\n        },\n        render(props) {\n            return <DynamicZoneContent {...props} />;\n        },\n        renderSettings({ field }) {\n            return <AccordionRenderSettings field={field} />;\n        }\n    }\n};\n"],"names":["noBottomPadding","css","DynamicZoneContainer","makeDecoratable","props","field","isValid","message","title","description","className","children","defaultClassName","undefined","open","getAccordionRenderSettings","Accordion","HorizontalRuleIcon","FormComponentErrorMessage","DynamicZoneContent","getBind","contentModel","templates","console","Bind","Component","MultiValueDynamicZone","SingleValueDynamicZone","bind","dynamicZoneFieldRenderer","AccordionRenderSettings"],"mappings":";;;;;;;;AAiBA,MAAMA,kBAAkBC,GAAG,CAAC;;;;AAI5B,CAAC;AAcM,MAAMC,uBAAuBC,gBAChC,wBACA,CAACC;IACG,MAAM,EACFC,KAAK,EACL,MAAM,EACF,YAAY,EAAEC,OAAO,EAAEC,OAAO,EAAE,EACnC,EACDC,QAAQH,MAAM,KAAK,EACnBI,cAAcJ,MAAM,WAAW,EAC/BK,SAAS,EACTC,QAAQ,EACX,GAAGP;IAEJ,MAAMQ,mBAAmBP,MAAM,IAAI,GAAGL,kBAAkBa;IACxD,MAAM,EAAEC,IAAI,EAAE,GAAGC,2BAA2BV;IAE5C,OAAO,WAAP,GACI,wDACI,oBAACW,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;YAChB,OAAO;YACP,OAAM;YACN,oBAAM,oBAACC,gBAAkBA;;QAGjC,OAAOT;QACP,aAAaC;QACb,WAAWC,aAAaE;QACxB,aAAaE;QACb,SAASV,MAAM,OAAO,IAAI;OAEzBO,YAGRL,AAAY,UAAZA,WAAqB,WAAT,GAAS,oBAACY,2BAAyBA;QAAC,MAAMX;;AAGnE;AAGJ,MAAMY,qBAAqB,CAAC,EAAEd,KAAK,EAAEe,OAAO,EAAEC,YAAY,EAA8B;IACpF,MAAMC,YAAYjB,MAAM,QAAQ,EAAE,aAAa,EAAE;IACjD,IAAI,CAACiB,UAAU,MAAM,EAAE;QACnBC,QAAQ,IAAI,CACR,CAAC,UAAU,EAAElB,MAAM,OAAO,CAAC,8DAA8D,CAAC;QAE9F,OAAO;IACX;IAEA,MAAMmB,OAAOJ;IAEb,MAAMK,YAAYpB,MAAM,IAAI,GAAGqB,wBAAwBC;IAEvD,OAAO,WAAP,GACI,oBAACH,MAAAA,MACII,CAAAA,OACU,WAAP,GACI,oBAACJ,KAAK,mBAAmB,sBACrB,oBAACtB,sBAAoBA;YACjB,OAAOG;YACP,MAAMuB;YACN,SAASR;YACT,cAAcC;yBAEd,oBAACI,WAAAA;YACG,MAAMG;YACN,OAAOvB;YACP,SAASe;YACT,cAAcC;;AAQ9C;AAEO,MAAMQ,2BAAwD;IACjE,MAAM;IACN,MAAM;IACN,UAAU;QACN,cAAc;QACd,MAAM;QACN,aAAa;QACb,QAAO,EAAExB,KAAK,EAAE;YACZ,OAAOA,AAAe,kBAAfA,MAAM,IAAI;QACrB;QACA,QAAOD,KAAK;YACR,OAAO,WAAP,GAAO,oBAACe,oBAAuBf;QACnC;QACA,gBAAe,EAAEC,KAAK,EAAE;YACpB,OAAO,WAAP,GAAO,oBAACyB,yBAAuBA;gBAAC,OAAOzB;;QAC3C;IACJ;AACJ"}

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

@@ -0,0 +1,4 @@
+export { type DynamicZoneContainerProps, DynamicZoneContainer } from "./dynamicZoneRenderer.js";
+export { TemplateGallery } from "./TemplateGallery.js";
+export { MultiValueItemContainer, MultiValueContainer, MultiValueItem } from "./MultiValueDynamicZone.js";
+export * from "./TemplateProvider.js";

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

@@ -0,0 +1,4 @@
+export * from "./TemplateProvider.js";
+export { DynamicZoneContainer } from "./dynamicZoneRenderer.js";
+export { TemplateGallery } from "./TemplateGallery.js";
+export { MultiValueContainer, MultiValueItem, MultiValueItemContainer } from "./MultiValueDynamicZone.js";

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

@@ -0,0 +1,4 @@
+import type { CmsDynamicZoneTemplate } from "@webiny/app-headless-cms-common/types/index.js";
+export declare const useTemplateTypename: () => {
+    getFullTypename: (template: CmsDynamicZoneTemplate) => string;
+};