@webiny/app-headless-cms 6.0.0-alpha.5 → 6.0.0-rc.0

package/admin/plugins/fieldRenderers/dateTime/dateTimeFields.js

@@ -1,13 +1,13 @@
 import React from "react";
-import get from "lodash/get";
-import DynamicSection from "../DynamicSection";
-import { i18n } from "@webiny/app/i18n";
+import get from "lodash/get.js";
+import DynamicSection from "../DynamicSection.js";
+import { i18n } from "@webiny/app/i18n/index.js";
 import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
-import { DateTimeWithoutTimezone } from "./DateTimeWithoutTimezone";
-import { DateTimeWithTimezone } from "./DateTimeWithTimezone";
-import { DateOnly } from "./DateOnly";
-import { Time } from "./Time";
-import { MultiValueRendererSettings } from "../MultiValueRendererSettings";
+import { DateTimeWithoutTimezone } from "./DateTimeWithoutTimezone.js";
+import { DateTimeWithTimezone } from "./DateTimeWithTimezone.js";
+import { DateOnly } from "./DateOnly.js";
+import { Time } from "./Time.js";
+import { MultiValueRendererSettings } from "../MultiValueRendererSettings.js";
 const t = i18n.ns("app-headless-cms/admin/fields/date-time");
 const plugin = {
   type: "cms-editor-field-renderer",
@@ -19,7 +19,7 @@ const plugin = {
     canUse({
       field
     }) {
-      return !!(field.type === "datetime" && field.multipleValues && !get(field, "predefinedValues.enabled"));
+      return !!(field.type === "datetime" && field.list && !get(field, "predefinedValues.enabled"));
     },
     render(props) {
       const {

package/admin/plugins/fieldRenderers/dateTime/dateTimeFields.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","get","DynamicSection","i18n","ReactComponent","DeleteIcon","DateTimeWithoutTimezone","DateTimeWithTimezone","DateOnly","Time","MultiValueRendererSettings","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","props","fieldSettingsType","settings","createElement","bind","index","trailingIcon","icon","onClick","removeValue","label","number","renderSettings"],"sources":["dateTimeFields.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport DynamicSection from \"../DynamicSection\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { DateTimeWithoutTimezone } from \"./DateTimeWithoutTimezone\";\nimport { DateTimeWithTimezone } from \"./DateTimeWithTimezone\";\nimport { DateOnly } from \"./DateOnly\";\nimport { Time } from \"./Time\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/date-time\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-date-times\",\n    renderer: {\n        rendererName: \"date-time-inputs\",\n        name: t`Date/Time Inputs`,\n        description: t`Renders inputs for various formats of dates and times.`,\n        canUse({ field }) {\n            return !!(\n                field.type === \"datetime\" &&\n                field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            const { field } = props;\n\n            const fieldSettingsType = field.settings ? field.settings.type : null;\n\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => {\n                        const trailingIcon = {\n                            icon: <DeleteIcon />,\n                            onClick: () => bind.field.removeValue(index)\n                        };\n\n                        if (fieldSettingsType === \"dateTimeWithoutTimezone\") {\n                            return (\n                                <DateTimeWithoutTimezone\n                                    field={field}\n                                    bind={bind.index}\n                                    trailingIcon={trailingIcon}\n                                />\n                            );\n                        }\n                        if (fieldSettingsType === \"dateTimeWithTimezone\") {\n                            return (\n                                <DateTimeWithTimezone\n                                    field={field}\n                                    bind={bind.index}\n                                    trailingIcon={trailingIcon}\n                                />\n                            );\n                        }\n                        if (fieldSettingsType === \"time\") {\n                            return (\n                                <Time\n                                    field={{\n                                        ...props.field,\n                                        label:\n                                            props.field.label +\n                                            t` Value {number}`({ number: index + 1 })\n                                    }}\n                                    bind={bind.index}\n                                    trailingIcon={trailingIcon}\n                                />\n                            );\n                        }\n\n                        return (\n                            <DateOnly\n                                bind={bind.index}\n                                field={{\n                                    ...props.field,\n                                    label:\n                                        props.field.label +\n                                        t` Value {number}`({ number: index + 1 })\n                                }}\n                                trailingIcon={trailingIcon}\n                            />\n                        );\n                    }}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","get","DynamicSection","i18n","ReactComponent","DeleteIcon","DateTimeWithoutTimezone","DateTimeWithTimezone","DateOnly","Time","MultiValueRendererSettings","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","props","fieldSettingsType","settings","createElement","bind","index","trailingIcon","icon","onClick","removeValue","label","number","renderSettings"],"sources":["dateTimeFields.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport DynamicSection from \"../DynamicSection.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { DateTimeWithoutTimezone } from \"./DateTimeWithoutTimezone.js\";\nimport { DateTimeWithTimezone } from \"./DateTimeWithTimezone.js\";\nimport { DateOnly } from \"./DateOnly.js\";\nimport { Time } from \"./Time.js\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/date-time\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-date-times\",\n    renderer: {\n        rendererName: \"date-time-inputs\",\n        name: t`Date/Time Inputs`,\n        description: t`Renders inputs for various formats of dates and times.`,\n        canUse({ field }) {\n            return !!(\n                field.type === \"datetime\" &&\n                field.list &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            const { field } = props;\n\n            const fieldSettingsType = field.settings ? field.settings.type : null;\n\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => {\n                        const trailingIcon = {\n                            icon: <DeleteIcon />,\n                            onClick: () => bind.field.removeValue(index)\n                        };\n\n                        if (fieldSettingsType === \"dateTimeWithoutTimezone\") {\n                            return (\n                                <DateTimeWithoutTimezone\n                                    field={field}\n                                    bind={bind.index}\n                                    trailingIcon={trailingIcon}\n                                />\n                            );\n                        }\n                        if (fieldSettingsType === \"dateTimeWithTimezone\") {\n                            return (\n                                <DateTimeWithTimezone\n                                    field={field}\n                                    bind={bind.index}\n                                    trailingIcon={trailingIcon}\n                                />\n                            );\n                        }\n                        if (fieldSettingsType === \"time\") {\n                            return (\n                                <Time\n                                    field={{\n                                        ...props.field,\n                                        label:\n                                            props.field.label +\n                                            t` Value {number}`({ number: index + 1 })\n                                    }}\n                                    bind={bind.index}\n                                    trailingIcon={trailingIcon}\n                                />\n                            );\n                        }\n\n                        return (\n                            <DateOnly\n                                bind={bind.index}\n                                field={{\n                                    ...props.field,\n                                    label:\n                                        props.field.label +\n                                        t` Value {number}`({ number: index + 1 })\n                                }}\n                                trailingIcon={trailingIcon}\n                            />\n                        );\n                    }}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAC/B,OAAOC,cAAc;AAErB,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASC,uBAAuB;AAChC,SAASC,oBAAoB;AAC7B,SAASC,QAAQ;AACjB,SAASC,IAAI;AACb,SAASC,0BAA0B;AAEnC,MAAMC,CAAC,GAAGR,IAAI,CAACS,EAAE,CAAC,yCAAyC,CAAC;AAE5D,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,sCAAsC;EAC5CC,QAAQ,EAAE;IACNC,YAAY,EAAE,kBAAkB;IAChCF,IAAI,EAAEJ,CAAC,kBAAkB;IACzBO,WAAW,EAAEP,CAAC,wDAAwD;IACtEQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OAAO,CAAC,EACJA,KAAK,CAACN,IAAI,KAAK,UAAU,IACzBM,KAAK,CAACC,IAAI,IACV,CAACpB,GAAG,CAACmB,KAAK,EAAE,0BAA0B,CAAC,CAC1C;IACL,CAAC;IACDE,MAAMA,CAACC,KAAK,EAAE;MACV,MAAM;QAAEH;MAAM,CAAC,GAAGG,KAAK;MAEvB,MAAMC,iBAAiB,GAAGJ,KAAK,CAACK,QAAQ,GAAGL,KAAK,CAACK,QAAQ,CAACX,IAAI,GAAG,IAAI;MAErE,oBACId,KAAA,CAAA0B,aAAA,CAACxB,cAAc,EAAKqB,KAAK,EACpB,CAAC;QAAEI,IAAI;QAAEC;MAAM,CAAC,KAAK;QAClB,MAAMC,YAAY,GAAG;UACjBC,IAAI,eAAE9B,KAAA,CAAA0B,aAAA,CAACrB,UAAU,MAAE,CAAC;UACpB0B,OAAO,EAAEA,CAAA,KAAMJ,IAAI,CAACP,KAAK,CAACY,WAAW,CAACJ,KAAK;QAC/C,CAAC;QAED,IAAIJ,iBAAiB,KAAK,yBAAyB,EAAE;UACjD,oBACIxB,KAAA,CAAA0B,aAAA,CAACpB,uBAAuB;YACpBc,KAAK,EAAEA,KAAM;YACbO,IAAI,EAAEA,IAAI,CAACC,KAAM;YACjBC,YAAY,EAAEA;UAAa,CAC9B,CAAC;QAEV;QACA,IAAIL,iBAAiB,KAAK,sBAAsB,EAAE;UAC9C,oBACIxB,KAAA,CAAA0B,aAAA,CAACnB,oBAAoB;YACjBa,KAAK,EAAEA,KAAM;YACbO,IAAI,EAAEA,IAAI,CAACC,KAAM;YACjBC,YAAY,EAAEA;UAAa,CAC9B,CAAC;QAEV;QACA,IAAIL,iBAAiB,KAAK,MAAM,EAAE;UAC9B,oBACIxB,KAAA,CAAA0B,aAAA,CAACjB,IAAI;YACDW,KAAK,EAAE;cACH,GAAGG,KAAK,CAACH,KAAK;cACda,KAAK,EACDV,KAAK,CAACH,KAAK,CAACa,KAAK,GACjBtB,CAAC,iBAAiB,CAAC;gBAAEuB,MAAM,EAAEN,KAAK,GAAG;cAAE,CAAC;YAChD,CAAE;YACFD,IAAI,EAAEA,IAAI,CAACC,KAAM;YACjBC,YAAY,EAAEA;UAAa,CAC9B,CAAC;QAEV;QAEA,oBACI7B,KAAA,CAAA0B,aAAA,CAAClB,QAAQ;UACLmB,IAAI,EAAEA,IAAI,CAACC,KAAM;UACjBR,KAAK,EAAE;YACH,GAAGG,KAAK,CAACH,KAAK;YACda,KAAK,EACDV,KAAK,CAACH,KAAK,CAACa,KAAK,GACjBtB,CAAC,iBAAiB,CAAC;cAAEuB,MAAM,EAAEN,KAAK,GAAG;YAAE,CAAC;UAChD,CAAE;UACFC,YAAY,EAAEA;QAAa,CAC9B,CAAC;MAEV,CACY,CAAC;IAEzB,CAAC;IACDM,cAAcA,CAACZ,KAAK,EAAE;MAClB,oBAAOvB,KAAA,CAAA0B,aAAA,CAAChB,0BAA0B,EAAKa,KAAQ,CAAC;IACpD;EACJ;AACJ,CAAC;AAED,eAAeV,MAAM","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-declare const _default: import("@webiny/app-headless-cms-common/types").CmsModelFieldRendererPlugin[];
+declare const _default: import("@webiny/app-headless-cms-common/types/index.js").CmsModelFieldRendererPlugin[];
 export default _default;

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

@@ -1,5 +1,5 @@
-import dateTimeField from "./dateTimeField";
-import dateTimeFields from "./dateTimeFields";
+import dateTimeField from "./dateTimeField.js";
+import dateTimeFields from "./dateTimeFields.js";
 export default [dateTimeField, dateTimeFields];
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["dateTimeField","dateTimeFields"],"sources":["index.ts"],"sourcesContent":["import dateTimeField from \"./dateTimeField\";\nimport dateTimeFields from \"./dateTimeFields\";\n\nexport default [dateTimeField, dateTimeFields];\n"],"mappings":"AAAA,OAAOA,aAAa;AACpB,OAAOC,cAAc;AAErB,eAAe,CAACD,aAAa,EAAEC,cAAc,CAAC","ignoreList":[]}
+{"version":3,"names":["dateTimeField","dateTimeFields"],"sources":["index.ts"],"sourcesContent":["import dateTimeField from \"./dateTimeField.js\";\nimport dateTimeFields from \"./dateTimeFields.js\";\n\nexport default [dateTimeField, dateTimeFields];\n"],"mappings":"AAAA,OAAOA,aAAa;AACpB,OAAOC,cAAc;AAErB,eAAe,CAACD,aAAa,EAAEC,cAAc,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/dateTime/utils.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CmsModelField } from "../../../../types";
+import type { CmsModelField } from "../../../../types.js";
 export declare const DEFAULT_TIMEZONE = "+01:00";
 export declare const getDefaultFieldValue: (field: CmsModelField, bind: {
     value: string | null | undefined;

package/admin/plugins/fieldRenderers/dateTime/utils.js

@@ -63,12 +63,12 @@ export const RemoveFieldButton = ({
   return /*#__PURE__*/React.createElement(Grid.Column, {
     span: 1
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-items-end wby-justify-center wby-h-full"
+    className: "flex items-end justify-center h-full"
   }, /*#__PURE__*/React.createElement(IconButton, {
     variant: "ghost",
     onClick: trailingIcon.onClick,
     icon: trailingIcon.icon,
-    className: "wby-mb-xs-plus"
+    className: "mb-xs-plus"
   })));
 };
 

package/admin/plugins/fieldRenderers/dateTime/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Grid","IconButton","DEFAULT_TIMEZONE","getDefaultFieldValue","field","bind","getCurrent","def","settings","defaultSetValue","value","getCurrentTimeZone","date","Date","toTimeString","matches","match","timezone","slice","getCurrentLocalTime","time","split","getCurrentDate","year","String","getFullYear","padStart","month","getMonth","day","getDate","getHHmm","parsableTime","join","getHHmmss","parts","RemoveFieldButton","trailingIcon","createElement","Column","span","className","variant","onClick","icon"],"sources":["utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid, IconButton } from \"@webiny/admin-ui\";\nimport type { CmsModelField } from \"~/types\";\n\nexport const DEFAULT_TIMEZONE = \"+01:00\";\n\nexport const getDefaultFieldValue = (\n    field: CmsModelField,\n    bind: {\n        value: string | null | undefined;\n    },\n    getCurrent: () => string\n): string => {\n    const def = field.settings ? field.settings.defaultSetValue || \"null\" : \"null\";\n    if (bind.value || def !== \"current\") {\n        return bind.value || \"\";\n    }\n    return getCurrent();\n};\n\nexport const getCurrentTimeZone = (date?: Date): string | null => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const matches = value.match(/GMT([+-][0-9]{4})/);\n    if (!matches) {\n        return null;\n    }\n    const timezone = matches[1];\n    return `${timezone.slice(0, 3)}:${timezone.slice(3)}`;\n};\n\nexport const getCurrentLocalTime = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const [time] = value.split(\" \");\n    if (!time || time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/) === null) {\n        return \"00:00:00\";\n    }\n    return time;\n};\n\nexport const getCurrentDate = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const year = String(date.getFullYear()).padStart(4, \"0\");\n    const month = String(date.getMonth() + 1).padStart(2, \"0\");\n    const day = String(date.getDate()).padStart(2, \"0\");\n\n    return `${year}-${month}-${day}`;\n};\n\nexport const getHHmm = (time?: string) => {\n    if (!time) {\n        return \"\";\n    }\n    const parsableTime = time || getCurrentLocalTime();\n    return parsableTime.split(\":\").slice(0, 2).join(\":\");\n};\n\n// Ensure a valid HH:mm:ss string, ending with :00 for seconds.\nexport const getHHmmss = (time?: string) => {\n    const parsableTime = time || getCurrentLocalTime();\n    const parts = [...parsableTime.split(\":\").slice(0, 2), \"00\"];\n\n    return parts.join(\":\");\n};\n\ninterface RemoveFieldButtonProps {\n    trailingIcon: any;\n}\nexport const RemoveFieldButton = ({ trailingIcon }: RemoveFieldButtonProps) => {\n    if (!trailingIcon) {\n        return null;\n    }\n    return (\n        <Grid.Column span={1}>\n            <div className={\"wby-flex wby-items-end wby-justify-center wby-h-full\"}>\n                <IconButton\n                    variant={\"ghost\"}\n                    onClick={trailingIcon.onClick}\n                    icon={trailingIcon.icon}\n                    className={\"wby-mb-xs-plus\"}\n                />\n            </div>\n        </Grid.Column>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Grid","IconButton","DEFAULT_TIMEZONE","getDefaultFieldValue","field","bind","getCurrent","def","settings","defaultSetValue","value","getCurrentTimeZone","date","Date","toTimeString","matches","match","timezone","slice","getCurrentLocalTime","time","split","getCurrentDate","year","String","getFullYear","padStart","month","getMonth","day","getDate","getHHmm","parsableTime","join","getHHmmss","parts","RemoveFieldButton","trailingIcon","createElement","Column","span","className","variant","onClick","icon"],"sources":["utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid, IconButton } from \"@webiny/admin-ui\";\nimport type { CmsModelField } from \"~/types.js\";\n\nexport const DEFAULT_TIMEZONE = \"+01:00\";\n\nexport const getDefaultFieldValue = (\n    field: CmsModelField,\n    bind: {\n        value: string | null | undefined;\n    },\n    getCurrent: () => string\n): string => {\n    const def = field.settings ? field.settings.defaultSetValue || \"null\" : \"null\";\n    if (bind.value || def !== \"current\") {\n        return bind.value || \"\";\n    }\n    return getCurrent();\n};\n\nexport const getCurrentTimeZone = (date?: Date): string | null => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const matches = value.match(/GMT([+-][0-9]{4})/);\n    if (!matches) {\n        return null;\n    }\n    const timezone = matches[1];\n    return `${timezone.slice(0, 3)}:${timezone.slice(3)}`;\n};\n\nexport const getCurrentLocalTime = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const [time] = value.split(\" \");\n    if (!time || time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/) === null) {\n        return \"00:00:00\";\n    }\n    return time;\n};\n\nexport const getCurrentDate = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const year = String(date.getFullYear()).padStart(4, \"0\");\n    const month = String(date.getMonth() + 1).padStart(2, \"0\");\n    const day = String(date.getDate()).padStart(2, \"0\");\n\n    return `${year}-${month}-${day}`;\n};\n\nexport const getHHmm = (time?: string) => {\n    if (!time) {\n        return \"\";\n    }\n    const parsableTime = time || getCurrentLocalTime();\n    return parsableTime.split(\":\").slice(0, 2).join(\":\");\n};\n\n// Ensure a valid HH:mm:ss string, ending with :00 for seconds.\nexport const getHHmmss = (time?: string) => {\n    const parsableTime = time || getCurrentLocalTime();\n    const parts = [...parsableTime.split(\":\").slice(0, 2), \"00\"];\n\n    return parts.join(\":\");\n};\n\ninterface RemoveFieldButtonProps {\n    trailingIcon: any;\n}\nexport const RemoveFieldButton = ({ trailingIcon }: RemoveFieldButtonProps) => {\n    if (!trailingIcon) {\n        return null;\n    }\n    return (\n        <Grid.Column span={1}>\n            <div className={\"flex items-end justify-center h-full\"}>\n                <IconButton\n                    variant={\"ghost\"}\n                    onClick={trailingIcon.onClick}\n                    icon={trailingIcon.icon}\n                    className={\"mb-xs-plus\"}\n                />\n            </div>\n        </Grid.Column>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CmsDynamicZoneTemplateWithTypename } from "../../../../types";
+import type { CmsDynamicZoneTemplateWithTypename } from "../../../../types.js";
 interface UseAddTemplateParams {
     onTemplate: (template: CmsDynamicZoneTemplateWithTypename) => void;
 }
@@ -8,5 +8,4 @@ interface AddTemplateProps {
     onTemplate: UseAddTemplateParams["onTemplate"];
 }
 export declare const AddTemplateButton: (props: AddTemplateProps) => React.JSX.Element;
-export declare const AddTemplateIcon: (props: AddTemplateProps) => React.JSX.Element;
 export {};

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

@@ -1,89 +1,35 @@
-import React, { useState } from "react";
+import React from "react";
 import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
-import { ReactComponent as AddCircleIcon } from "@webiny/icons/add_circle_outline.svg";
-import { TemplateGallery } from "./TemplateGallery";
-import { useTemplateTypename } from "./useTemplateTypename";
-import { Button, cn, IconButton, Link, Text, Tooltip } from "@webiny/admin-ui";
-function useAddTemplate(params) {
-  const [showGallery, setShowGallery] = useState(false);
+import { TemplateGallery } from "./TemplateGallery.js";
+import { useTemplateTypename } from "./useTemplateTypename.js";
+import { Button, Dialog } from "@webiny/admin-ui";
+export const AddTemplateButton = props => {
   const {
     getFullTypename
   } = useTemplateTypename();
-  const browseTemplates = () => {
-    setShowGallery(true);
-  };
   const onTemplate = template => {
-    params.onTemplate({
+    props.onTemplate({
       ...template,
       __typename: getFullTypename(template)
     });
-    onGalleryClose();
-  };
-  const onGalleryClose = () => {
-    setShowGallery(false);
   };
-  return {
-    showGallery,
-    browseTemplates,
-    onTemplate,
-    onGalleryClose
-  };
-}
-export const AddTemplateButton = props => {
-  const {
-    showGallery,
-    onTemplate,
-    browseTemplates,
-    onGalleryClose
-  } = useAddTemplate({
-    onTemplate: props.onTemplate
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full wby-rounded-md wby-border-sm wby-border-neutral-muted wby-p-sm-extra wby-mt-xs wby-mb-md wby-relative"
-  }, showGallery ? /*#__PURE__*/React.createElement(TemplateGallery, {
-    onTemplate: onTemplate,
-    onClose: onGalleryClose
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: cn(["wby-w-full wby-flex wby-flex-col wby-gap-sm-extra wby-px-xl wby-pt-xl wby-pb-lg wby-bg-neutral-subtle wby-rounded wby-text-center", "hover:wby-bg-neutral-light"])
-  }, /*#__PURE__*/React.createElement(Button, {
-    size: "sm",
-    variant: "ghost",
-    onClick: browseTemplates,
-    text: "Pick a template",
-    icon: /*#__PURE__*/React.createElement(AddIcon, null)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-items-center wby-justify-center wby-gap-xs wby-w-full wby-mx-auto wby-text-center"
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: "sm",
-    className: "wby-text-neutral-strong"
-  }, /*#__PURE__*/React.createElement(Link, {
-    to: "http://webiny.link/admin/how-to-use/dynamic-zones",
-    target: "_blank"
-  }, "Learn how"), " ", "templates and dynamic zones work."))));
-};
-export const AddTemplateIcon = props => {
-  const {
-    showGallery,
-    onTemplate,
-    browseTemplates,
-    onGalleryClose
-  } = useAddTemplate({
-    onTemplate: props.onTemplate
-  });
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full wby-text-center wby-mt-md"
-  }, showGallery ? /*#__PURE__*/React.createElement(TemplateGallery, {
+    className: "flex justify-between items-center"
+  }, /*#__PURE__*/React.createElement(Dialog, {
+    size: "lg",
+    className: "w-[800px]",
+    trigger: /*#__PURE__*/React.createElement(Button, {
+      size: "sm",
+      variant: "tertiary",
+      text: "Add a template",
+      icon: /*#__PURE__*/React.createElement(AddIcon, null)
+    }),
+    title: "Insert a template",
+    info: /*#__PURE__*/React.createElement(React.Fragment, null)
+  }, /*#__PURE__*/React.createElement(TemplateGallery, {
     onTemplate: onTemplate,
-    onClose: onGalleryClose
-  }) : /*#__PURE__*/React.createElement(Tooltip, {
-    content: "Add template",
-    trigger: /*#__PURE__*/React.createElement(IconButton, {
-      onClick: browseTemplates,
-      icon: /*#__PURE__*/React.createElement(AddCircleIcon, null),
-      size: "lg",
-      variant: "ghost"
-    })
-  }));
+    onClose: () => {}
+  })));
 };
 
 //# sourceMappingURL=AddTemplate.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","ReactComponent","AddIcon","AddCircleIcon","TemplateGallery","useTemplateTypename","Button","cn","IconButton","Link","Text","Tooltip","useAddTemplate","params","showGallery","setShowGallery","getFullTypename","browseTemplates","onTemplate","template","__typename","onGalleryClose","AddTemplateButton","props","createElement","className","onClose","size","variant","onClick","text","icon","to","target","AddTemplateIcon","content","trigger"],"sources":["AddTemplate.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as AddCircleIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport type { CmsDynamicZoneTemplate, CmsDynamicZoneTemplateWithTypename } from \"~/types\";\nimport { TemplateGallery } from \"./TemplateGallery\";\nimport { useTemplateTypename } from \"~/admin/plugins/fieldRenderers/dynamicZone/useTemplateTypename\";\nimport { Button, cn, IconButton, Link, Text, Tooltip } from \"@webiny/admin-ui\";\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplateWithTypename) => void;\n}\n\nfunction useAddTemplate(params: UseAddTemplateParams) {\n    const [showGallery, setShowGallery] = useState(false);\n    const { getFullTypename } = useTemplateTypename();\n\n    const browseTemplates = () => {\n        setShowGallery(true);\n    };\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        params.onTemplate({ ...template, __typename: getFullTypename(template) });\n        onGalleryClose();\n    };\n\n    const onGalleryClose = () => {\n        setShowGallery(false);\n    };\n\n    return {\n        showGallery,\n        browseTemplates,\n        onTemplate,\n        onGalleryClose\n    };\n}\n\ninterface AddTemplateProps {\n    label?: string;\n    onTemplate: UseAddTemplateParams[\"onTemplate\"];\n}\n\nexport const AddTemplateButton = (props: AddTemplateProps) => {\n    const { showGallery, onTemplate, browseTemplates, onGalleryClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <div\n            className={\n                \"wby-w-full wby-rounded-md wby-border-sm wby-border-neutral-muted wby-p-sm-extra wby-mt-xs wby-mb-md wby-relative\"\n            }\n        >\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <div\n                    className={cn([\n                        \"wby-w-full wby-flex wby-flex-col wby-gap-sm-extra wby-px-xl wby-pt-xl wby-pb-lg wby-bg-neutral-subtle wby-rounded wby-text-center\",\n                        \"hover:wby-bg-neutral-light\"\n                    ])}\n                >\n                    <Button\n                        size={\"sm\"}\n                        variant={\"ghost\"}\n                        onClick={browseTemplates}\n                        text={\"Pick a template\"}\n                        icon={<AddIcon />}\n                    />\n                    <div\n                        className={\n                            \"wby-flex wby-items-center wby-justify-center wby-gap-xs wby-w-full wby-mx-auto wby-text-center\"\n                        }\n                    >\n                        <Text size={\"sm\"} className={\"wby-text-neutral-strong\"}>\n                            <Link\n                                to={\"http://webiny.link/admin/how-to-use/dynamic-zones\"}\n                                target={\"_blank\"}\n                            >\n                                Learn how\n                            </Link>{\" \"}\n                            templates and dynamic zones work.\n                        </Text>\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport const AddTemplateIcon = (props: AddTemplateProps) => {\n    const { showGallery, onTemplate, browseTemplates, onGalleryClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <div className={\"wby-w-full wby-text-center wby-mt-md\"}>\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <Tooltip\n                    content={\"Add template\"}\n                    trigger={\n                        <IconButton\n                            onClick={browseTemplates}\n                            icon={<AddCircleIcon />}\n                            size={\"lg\"}\n                            variant={\"ghost\"}\n                        />\n                    }\n                />\n            )}\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","AddIcon","TemplateGallery","useTemplateTypename","Button","Dialog","AddTemplateButton","props","getFullTypename","onTemplate","template","__typename","createElement","className","size","trigger","variant","text","icon","title","info","Fragment","onClose"],"sources":["AddTemplate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { CmsDynamicZoneTemplate, CmsDynamicZoneTemplateWithTypename } from \"~/types.js\";\nimport { TemplateGallery } from \"./TemplateGallery.js\";\nimport { useTemplateTypename } from \"~/admin/plugins/fieldRenderers/dynamicZone/useTemplateTypename.js\";\nimport { Button, Dialog } from \"@webiny/admin-ui\";\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplateWithTypename) => void;\n}\n\ninterface AddTemplateProps {\n    label?: string;\n    onTemplate: UseAddTemplateParams[\"onTemplate\"];\n}\n\nexport const AddTemplateButton = (props: AddTemplateProps) => {\n    const { getFullTypename } = useTemplateTypename();\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        props.onTemplate({ ...template, __typename: getFullTypename(template) });\n    };\n\n    return (\n        <div className={\"flex justify-between items-center\"}>\n            <Dialog\n                size={\"lg\"}\n                className={\"w-[800px]\"}\n                trigger={\n                    <Button\n                        size={\"sm\"}\n                        variant={\"tertiary\"}\n                        text={\"Add a template\"}\n                        icon={<AddIcon />}\n                    />\n                }\n                title=\"Insert a template\"\n                info={<></>}\n            >\n                <TemplateGallery onTemplate={onTemplate} onClose={() => {}} />\n            </Dialog>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,OAAO,QAAQ,uBAAuB;AAEjE,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAC5B,SAASC,MAAM,EAAEC,MAAM,QAAQ,kBAAkB;AAWjD,OAAO,MAAMC,iBAAiB,GAAIC,KAAuB,IAAK;EAC1D,MAAM;IAAEC;EAAgB,CAAC,GAAGL,mBAAmB,CAAC,CAAC;EAEjD,MAAMM,UAAU,GAAIC,QAAgC,IAAK;IACrDH,KAAK,CAACE,UAAU,CAAC;MAAE,GAAGC,QAAQ;MAAEC,UAAU,EAAEH,eAAe,CAACE,QAAQ;IAAE,CAAC,CAAC;EAC5E,CAAC;EAED,oBACIX,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAE;EAAoC,gBAChDd,KAAA,CAAAa,aAAA,CAACP,MAAM;IACHS,IAAI,EAAE,IAAK;IACXD,SAAS,EAAE,WAAY;IACvBE,OAAO,eACHhB,KAAA,CAAAa,aAAA,CAACR,MAAM;MACHU,IAAI,EAAE,IAAK;MACXE,OAAO,EAAE,UAAW;MACpBC,IAAI,EAAE,gBAAiB;MACvBC,IAAI,eAAEnB,KAAA,CAAAa,aAAA,CAACX,OAAO,MAAE;IAAE,CACrB,CACJ;IACDkB,KAAK,EAAC,mBAAmB;IACzBC,IAAI,eAAErB,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAsB,QAAA,MAAI;EAAE,gBAEZtB,KAAA,CAAAa,aAAA,CAACV,eAAe;IAACO,UAAU,EAAEA,UAAW;IAACa,OAAO,EAAEA,CAAA,KAAM,CAAC;EAAE,CAAE,CACzD,CACP,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { BindComponent, BindComponentRenderProp, CmsDynamicZoneTemplate, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
+import type { BindComponent, BindComponentRenderProp, CmsDynamicZoneTemplate, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types.js";
 type GetBind = CmsModelFieldRendererProps["getBind"];
 export interface MultiValueItemContainerProps {
     value: TemplateValue;

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

@@ -1,16 +1,16 @@
 import React from "react";
-import cloneDeep from "lodash/cloneDeep";
+import cloneDeep from "lodash/cloneDeep.js";
 import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
 import { ReactComponent as CloneIcon } from "@webiny/icons/library_add.svg";
 import { ReactComponent as ArrowUpIcon } from "@webiny/icons/expand_less.svg";
 import { ReactComponent as ArrowDownIcon } from "@webiny/icons/expand_more.svg";
-import { AddTemplateButton, AddTemplateIcon } from "./AddTemplate";
-import { TemplateIcon } from "./TemplateIcon";
-import { ParentFieldProvider, useModelField } from "../../../hooks";
-import { Fields } from "../../../components/ContentEntryForm/Fields";
+import { AddTemplateButton } from "./AddTemplate.js";
+import { TemplateIcon } from "./TemplateIcon.js";
+import { ParentFieldProvider, useModelField } from "../../../hooks/index.js";
+import { Fields } from "../../../components/ContentEntryForm/Fields.js";
 import { makeDecoratable } from "@webiny/react-composition";
-import { TemplateProvider } from "./TemplateProvider";
-import { ParentValueIndexProvider } from "../../../components/ModelFieldProvider";
+import { TemplateProvider } from "./TemplateProvider.js";
+import { ParentValueIndexProvider } from "../../../components/ModelFieldProvider/index.js";
 import { useConfirmationDialog } from "@webiny/app-admin";
 import { Accordion, Tooltip } from "@webiny/admin-ui";
 export const MultiValueItemContainer = makeDecoratable("MultiValueItemContainer", ({
@@ -109,7 +109,10 @@ const TemplateValueForm = ({
 export const MultiValueContainer = makeDecoratable("MultiValueContainer", ({
   children
 }) => {
-  return /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(React.Fragment, null, children));
+  return /*#__PURE__*/React.createElement(Accordion, {
+    variant: "container",
+    className: "gap-md"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, children));
 });
 export const MultiValueDynamicZone = props => {
   const {
@@ -136,7 +139,9 @@ export const MultiValueDynamicZone = props => {
   const values = bind.value || [];
   const hasValues = values.length > 0;
   const Bind = getBind();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasValues ? /*#__PURE__*/React.createElement(ParentFieldProvider, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-y-lg"
+  }, hasValues ? /*#__PURE__*/React.createElement(ParentFieldProvider, {
     value: bind.value,
     path: Bind.parentName
   }, /*#__PURE__*/React.createElement(MultiValueContainer, props, values.map((value, index) => {
@@ -160,9 +165,7 @@ export const MultiValueDynamicZone = props => {
       onDelete: onDelete,
       onClone: value => cloneValue(value, index)
     }))));
-  }))) : null, hasValues ? /*#__PURE__*/React.createElement(AddTemplateIcon, {
-    onTemplate: onTemplate
-  }) : /*#__PURE__*/React.createElement(AddTemplateButton, {
+  }))) : null, /*#__PURE__*/React.createElement(AddTemplateButton, {
     onTemplate: onTemplate
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"names":["React","cloneDeep","ReactComponent","DeleteIcon","CloneIcon","ArrowUpIcon","ArrowDownIcon","AddTemplateButton","AddTemplateIcon","TemplateIcon","ParentFieldProvider","useModelField","Fields","makeDecoratable","TemplateProvider","ParentValueIndexProvider","useConfirmationDialog","Accordion","Tooltip","MultiValueItemContainer","children","props","actions","createElement","Fragment","Item","Action","icon","trigger","content","onClick","onMoveUp","disabled","isFirst","onMoveDown","isLast","Separator","onClone","value","onDelete","title","description","MultiValueItem","template","Bind","contentModel","fields","layout","TemplateValueForm","field","templates","settings","find","tpl","id","_templateId","name","MultiValueContainer","MultiValueDynamicZone","showConfirmation","message","acceptLabel","cancelLabel","bind","getBind","onTemplate","appendValue","__typename","cloneValue","index","values","hasValues","length","path","parentName","map","removeValue","key","ValidationContainer","moveValueUp","moveValueDown"],"sources":["MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@webiny/icons/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { AddTemplateButton, AddTemplateIcon } from \"./AddTemplate\";\nimport { TemplateIcon } from \"./TemplateIcon\";\nimport { ParentFieldProvider, useModelField } from \"~/admin/hooks\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport type {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField,\n    CmsDynamicZoneTemplateWithTypename\n} from \"~/types\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { TemplateProvider } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider\";\nimport { ParentValueIndexProvider } from \"~/admin/components/ModelFieldProvider\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport { Accordion, Tooltip } from \"@webiny/admin-ui\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueItemContainerProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: (value: TemplateValue) => void;\n    title: React.ReactNode;\n    description: string;\n    icon: JSX.Element;\n    actions?: JSX.Element;\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const MultiValueItemContainer = makeDecoratable(\n    \"MultiValueItemContainer\",\n    ({ children, ...props }: MultiValueItemContainerProps) => {\n        const actions = (\n            <>\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowUpIcon />} content={\"Move up\"} />}\n                    onClick={props.onMoveUp}\n                    disabled={props.isFirst}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowDownIcon />} content={\"Move down\"} />}\n                    onClick={props.onMoveDown}\n                    disabled={props.isLast}\n                />\n                <Accordion.Item.Action.Separator />\n                {props.actions ? <>{props.actions}</> : null}\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<CloneIcon />} content={\"Duplicate\"} />}\n                    onClick={() => props.onClone(props.value)}\n                />\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={props.title}\n                description={props.description}\n                icon={props.icon}\n                actions={actions}\n            >\n                {children}\n            </Accordion.Item>\n        );\n    }\n);\n\nexport interface MultiValueItemItemProps {\n    template: CmsDynamicZoneTemplate;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n}\n\nexport const MultiValueItem = makeDecoratable(\n    \"MultiValueItem\",\n    (props: MultiValueItemItemProps) => {\n        const { template, Bind, contentModel } = props;\n\n        return (\n            <TemplateProvider template={template}>\n                <Fields\n                    fields={template.fields}\n                    layout={template.layout || []}\n                    contentModel={contentModel}\n                    Bind={Bind}\n                />\n            </TemplateProvider>\n        );\n    }\n);\n\ninterface TemplateValue {\n    _templateId: string;\n    [key: string]: any;\n}\n\ninterface TemplateValueFormProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: (value: TemplateValue) => void;\n}\n\nconst TemplateValueForm = ({\n    value,\n    contentModel,\n    Bind,\n    isLast,\n    isFirst,\n    onMoveUp,\n    onMoveDown,\n    onDelete,\n    onClone\n}: TemplateValueFormProps) => {\n    const { field } = useModelField();\n    const templates = field.settings?.templates || [];\n\n    const template: CmsDynamicZoneTemplate | undefined = templates.find(\n        tpl => tpl.id === value._templateId\n    );\n\n    if (!template) {\n        return null;\n    }\n\n    return (\n        <MultiValueItemContainer\n            value={value}\n            contentModel={contentModel}\n            isFirst={isFirst}\n            isLast={isLast}\n            onClone={onClone}\n            onDelete={onDelete}\n            onMoveUp={onMoveUp}\n            onMoveDown={onMoveDown}\n            title={template.name}\n            description={template.description}\n            icon={<TemplateIcon icon={template.icon} />}\n            template={template}\n        >\n            <MultiValueItem template={template} contentModel={contentModel} Bind={Bind} />\n        </MultiValueItemContainer>\n    );\n};\n\nexport interface MultiValueContainerProps extends MultiValueDynamicZoneProps {\n    children: React.ReactNode;\n}\n\nexport const MultiValueContainer = makeDecoratable(\n    \"MultiValueContainer\",\n    ({ children }: MultiValueContainerProps) => {\n        return (\n            <Accordion>\n                <>{children}</>\n            </Accordion>\n        );\n    }\n);\n\ninterface MultiValueDynamicZoneProps {\n    // TODO: this prop might be useless, because we now have a `useModelField` hook.\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const MultiValueDynamicZone = (props: MultiValueDynamicZoneProps) => {\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const { bind, getBind, contentModel } = props;\n    const onTemplate = (template: CmsDynamicZoneTemplateWithTypename) => {\n        bind.appendValue({ _templateId: template.id, __typename: template.__typename });\n    };\n\n    const cloneValue = (value: TemplateValue, index: number) => {\n        bind.appendValue(cloneDeep(value), index + 1);\n    };\n\n    const values: TemplateValue[] = bind.value || [];\n    const hasValues = values.length > 0;\n\n    const Bind = getBind();\n\n    return (\n        <>\n            {hasValues ? (\n                <ParentFieldProvider value={bind.value} path={Bind.parentName}>\n                    <MultiValueContainer {...props}>\n                        {values.map((value, index) => {\n                            const Bind = getBind(index);\n\n                            const onDelete = () => {\n                                showConfirmation(() => {\n                                    bind.removeValue(index);\n                                });\n                            };\n\n                            return (\n                                <ParentValueIndexProvider key={index} index={index}>\n                                    <Bind>\n                                        {() => (\n                                            <Bind.ValidationContainer>\n                                                <TemplateValueForm\n                                                    value={value}\n                                                    contentModel={contentModel}\n                                                    Bind={Bind}\n                                                    isFirst={index === 0}\n                                                    isLast={index === values.length - 1}\n                                                    onMoveUp={() => bind.moveValueUp(index)}\n                                                    onMoveDown={() => bind.moveValueDown(index)}\n                                                    onDelete={onDelete}\n                                                    onClone={value => cloneValue(value, index)}\n                                                />\n                                            </Bind.ValidationContainer>\n                                        )}\n                                    </Bind>\n                                </ParentValueIndexProvider>\n                            );\n                        })}\n                    </MultiValueContainer>\n                </ParentFieldProvider>\n            ) : null}\n            {hasValues ? (\n                <AddTemplateIcon onTemplate={onTemplate} />\n            ) : (\n                <AddTemplateButton onTemplate={onTemplate} />\n            )}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","cloneDeep","ReactComponent","DeleteIcon","CloneIcon","ArrowUpIcon","ArrowDownIcon","AddTemplateButton","TemplateIcon","ParentFieldProvider","useModelField","Fields","makeDecoratable","TemplateProvider","ParentValueIndexProvider","useConfirmationDialog","Accordion","Tooltip","MultiValueItemContainer","children","props","actions","createElement","Fragment","Item","Action","icon","trigger","content","onClick","onMoveUp","disabled","isFirst","onMoveDown","isLast","Separator","onClone","value","onDelete","title","description","MultiValueItem","template","Bind","contentModel","fields","layout","TemplateValueForm","field","templates","settings","find","tpl","id","_templateId","name","MultiValueContainer","variant","className","MultiValueDynamicZone","showConfirmation","message","acceptLabel","cancelLabel","bind","getBind","onTemplate","appendValue","__typename","cloneValue","index","values","hasValues","length","path","parentName","map","removeValue","key","ValidationContainer","moveValueUp","moveValueDown"],"sources":["MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport cloneDeep from \"lodash/cloneDeep.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@webiny/icons/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { AddTemplateButton } from \"./AddTemplate.js\";\nimport { TemplateIcon } from \"./TemplateIcon.js\";\nimport { ParentFieldProvider, useModelField } from \"~/admin/hooks/index.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport type {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField,\n    CmsDynamicZoneTemplateWithTypename\n} from \"~/types.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { TemplateProvider } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.js\";\nimport { ParentValueIndexProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport { Accordion, Tooltip } from \"@webiny/admin-ui\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueItemContainerProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: (value: TemplateValue) => void;\n    title: React.ReactNode;\n    description: string;\n    icon: JSX.Element;\n    actions?: JSX.Element;\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const MultiValueItemContainer = makeDecoratable(\n    \"MultiValueItemContainer\",\n    ({ children, ...props }: MultiValueItemContainerProps) => {\n        const actions = (\n            <>\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowUpIcon />} content={\"Move up\"} />}\n                    onClick={props.onMoveUp}\n                    disabled={props.isFirst}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowDownIcon />} content={\"Move down\"} />}\n                    onClick={props.onMoveDown}\n                    disabled={props.isLast}\n                />\n                <Accordion.Item.Action.Separator />\n                {props.actions ? <>{props.actions}</> : null}\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<CloneIcon />} content={\"Duplicate\"} />}\n                    onClick={() => props.onClone(props.value)}\n                />\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={props.title}\n                description={props.description}\n                icon={props.icon}\n                actions={actions}\n            >\n                {children}\n            </Accordion.Item>\n        );\n    }\n);\n\nexport interface MultiValueItemItemProps {\n    template: CmsDynamicZoneTemplate;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n}\n\nexport const MultiValueItem = makeDecoratable(\n    \"MultiValueItem\",\n    (props: MultiValueItemItemProps) => {\n        const { template, Bind, contentModel } = props;\n\n        return (\n            <TemplateProvider template={template}>\n                <Fields\n                    fields={template.fields}\n                    layout={template.layout || []}\n                    contentModel={contentModel}\n                    Bind={Bind}\n                />\n            </TemplateProvider>\n        );\n    }\n);\n\ninterface TemplateValue {\n    _templateId: string;\n    [key: string]: any;\n}\n\ninterface TemplateValueFormProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: (value: TemplateValue) => void;\n}\n\nconst TemplateValueForm = ({\n    value,\n    contentModel,\n    Bind,\n    isLast,\n    isFirst,\n    onMoveUp,\n    onMoveDown,\n    onDelete,\n    onClone\n}: TemplateValueFormProps) => {\n    const { field } = useModelField();\n    const templates = field.settings?.templates || [];\n\n    const template: CmsDynamicZoneTemplate | undefined = templates.find(\n        tpl => tpl.id === value._templateId\n    );\n\n    if (!template) {\n        return null;\n    }\n\n    return (\n        <MultiValueItemContainer\n            value={value}\n            contentModel={contentModel}\n            isFirst={isFirst}\n            isLast={isLast}\n            onClone={onClone}\n            onDelete={onDelete}\n            onMoveUp={onMoveUp}\n            onMoveDown={onMoveDown}\n            title={template.name}\n            description={template.description}\n            icon={<TemplateIcon icon={template.icon} />}\n            template={template}\n        >\n            <MultiValueItem template={template} contentModel={contentModel} Bind={Bind} />\n        </MultiValueItemContainer>\n    );\n};\n\nexport interface MultiValueContainerProps extends MultiValueDynamicZoneProps {\n    children: React.ReactNode;\n}\n\nexport const MultiValueContainer = makeDecoratable(\n    \"MultiValueContainer\",\n    ({ children }: MultiValueContainerProps) => {\n        return (\n            <Accordion variant={\"container\"} className={\"gap-md\"}>\n                <>{children}</>\n            </Accordion>\n        );\n    }\n);\n\ninterface MultiValueDynamicZoneProps {\n    // TODO: this prop might be useless, because we now have a `useModelField` hook.\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const MultiValueDynamicZone = (props: MultiValueDynamicZoneProps) => {\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const { bind, getBind, contentModel } = props;\n    const onTemplate = (template: CmsDynamicZoneTemplateWithTypename) => {\n        bind.appendValue({ _templateId: template.id, __typename: template.__typename });\n    };\n\n    const cloneValue = (value: TemplateValue, index: number) => {\n        bind.appendValue(cloneDeep(value), index + 1);\n    };\n\n    const values: TemplateValue[] = bind.value || [];\n    const hasValues = values.length > 0;\n\n    const Bind = getBind();\n\n    return (\n        <div className={\"flex flex-col gap-y-lg\"}>\n            {hasValues ? (\n                <ParentFieldProvider value={bind.value} path={Bind.parentName}>\n                    <MultiValueContainer {...props}>\n                        {values.map((value, index) => {\n                            const Bind = getBind(index);\n\n                            const onDelete = () => {\n                                showConfirmation(() => {\n                                    bind.removeValue(index);\n                                });\n                            };\n\n                            return (\n                                <ParentValueIndexProvider key={index} index={index}>\n                                    <Bind>\n                                        {() => (\n                                            <Bind.ValidationContainer>\n                                                <TemplateValueForm\n                                                    value={value}\n                                                    contentModel={contentModel}\n                                                    Bind={Bind}\n                                                    isFirst={index === 0}\n                                                    isLast={index === values.length - 1}\n                                                    onMoveUp={() => bind.moveValueUp(index)}\n                                                    onMoveDown={() => bind.moveValueDown(index)}\n                                                    onDelete={onDelete}\n                                                    onClone={value => cloneValue(value, index)}\n                                                />\n                                            </Bind.ValidationContainer>\n                                        )}\n                                    </Bind>\n                                </ParentValueIndexProvider>\n                            );\n                        })}\n                    </MultiValueContainer>\n                </ParentFieldProvider>\n            ) : null}\n            <AddTemplateButton onTemplate={onTemplate} />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,qBAAqB;AAC3C,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,SAASD,cAAc,IAAIE,SAAS,QAAQ,+BAA+B;AAC3E,SAASF,cAAc,IAAIG,WAAW,QAAQ,+BAA+B;AAC7E,SAASH,cAAc,IAAII,aAAa,QAAQ,+BAA+B;AAC/E,SAASC,iBAAiB;AAC1B,SAASC,YAAY;AACrB,SAASC,mBAAmB,EAAEC,aAAa;AAC3C,SAASC,MAAM;AAUf,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,gBAAgB;AACzB,SAASC,wBAAwB;AACjC,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SAASC,SAAS,EAAEC,OAAO,QAAQ,kBAAkB;AAqBrD,OAAO,MAAMC,uBAAuB,GAAGN,eAAe,CAClD,yBAAyB,EACzB,CAAC;EAAEO,QAAQ;EAAE,GAAGC;AAAoC,CAAC,KAAK;EACtD,MAAMC,OAAO,gBACTrB,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,qBACIvB,KAAA,CAAAsB,aAAA,CAACN,SAAS,CAACQ,IAAI,CAACC,MAAM;IAClBC,IAAI,eAAE1B,KAAA,CAAAsB,aAAA,CAACL,OAAO;MAACU,OAAO,eAAE3B,KAAA,CAAAsB,aAAA,CAACjB,WAAW,MAAE,CAAE;MAACuB,OAAO,EAAE;IAAU,CAAE,CAAE;IAChEC,OAAO,EAAET,KAAK,CAACU,QAAS;IACxBC,QAAQ,EAAEX,KAAK,CAACY;EAAQ,CAC3B,CAAC,eACFhC,KAAA,CAAAsB,aAAA,CAACN,SAAS,CAACQ,IAAI,CAACC,MAAM;IAClBC,IAAI,eAAE1B,KAAA,CAAAsB,aAAA,CAACL,OAAO;MAACU,OAAO,eAAE3B,KAAA,CAAAsB,aAAA,CAAChB,aAAa,MAAE,CAAE;MAACsB,OAAO,EAAE;IAAY,CAAE,CAAE;IACpEC,OAAO,EAAET,KAAK,CAACa,UAAW;IAC1BF,QAAQ,EAAEX,KAAK,CAACc;EAAO,CAC1B,CAAC,eACFlC,KAAA,CAAAsB,aAAA,CAACN,SAAS,CAACQ,IAAI,CAACC,MAAM,CAACU,SAAS,MAAE,CAAC,EAClCf,KAAK,CAACC,OAAO,gBAAGrB,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,QAAGH,KAAK,CAACC,OAAU,CAAC,GAAG,IAAI,eAC5CrB,KAAA,CAAAsB,aAAA,CAACN,SAAS,CAACQ,IAAI,CAACC,MAAM;IAClBC,IAAI,eAAE1B,KAAA,CAAAsB,aAAA,CAACL,OAAO;MAACU,OAAO,eAAE3B,KAAA,CAAAsB,aAAA,CAAClB,SAAS,MAAE,CAAE;MAACwB,OAAO,EAAE;IAAY,CAAE,CAAE;IAChEC,OAAO,EAAEA,CAAA,KAAMT,KAAK,CAACgB,OAAO,CAAChB,KAAK,CAACiB,KAAK;EAAE,CAC7C,CAAC,eACFrC,KAAA,CAAAsB,aAAA,CAACN,SAAS,CAACQ,IAAI,CAACC,MAAM;IAClBC,IAAI,eAAE1B,KAAA,CAAAsB,aAAA,CAACL,OAAO;MAACU,OAAO,eAAE3B,KAAA,CAAAsB,aAAA,CAACnB,UAAU,MAAE,CAAE;MAACyB,OAAO,EAAE;IAAS,CAAE,CAAE;IAC9DC,OAAO,EAAET,KAAK,CAACkB;EAAS,CAC3B,CACH,CACL;EAED,oBACItC,KAAA,CAAAsB,aAAA,CAACN,SAAS,CAACQ,IAAI;IACXe,KAAK,EAAEnB,KAAK,CAACmB,KAAM;IACnBC,WAAW,EAAEpB,KAAK,CAACoB,WAAY;IAC/Bd,IAAI,EAAEN,KAAK,CAACM,IAAK;IACjBL,OAAO,EAAEA;EAAQ,GAEhBF,QACW,CAAC;AAEzB,CACJ,CAAC;AAQD,OAAO,MAAMsB,cAAc,GAAG7B,eAAe,CACzC,gBAAgB,EACfQ,KAA8B,IAAK;EAChC,MAAM;IAAEsB,QAAQ;IAAEC,IAAI;IAAEC;EAAa,CAAC,GAAGxB,KAAK;EAE9C,oBACIpB,KAAA,CAAAsB,aAAA,CAACT,gBAAgB;IAAC6B,QAAQ,EAAEA;EAAS,gBACjC1C,KAAA,CAAAsB,aAAA,CAACX,MAAM;IACHkC,MAAM,EAAEH,QAAQ,CAACG,MAAO;IACxBC,MAAM,EAAEJ,QAAQ,CAACI,MAAM,IAAI,EAAG;IAC9BF,YAAY,EAAEA,YAAa;IAC3BD,IAAI,EAAEA;EAAK,CACd,CACa,CAAC;AAE3B,CACJ,CAAC;AAmBD,MAAMI,iBAAiB,GAAGA,CAAC;EACvBV,KAAK;EACLO,YAAY;EACZD,IAAI;EACJT,MAAM;EACNF,OAAO;EACPF,QAAQ;EACRG,UAAU;EACVK,QAAQ;EACRF;AACoB,CAAC,KAAK;EAC1B,MAAM;IAAEY;EAAM,CAAC,GAAGtC,aAAa,CAAC,CAAC;EACjC,MAAMuC,SAAS,GAAGD,KAAK,CAACE,QAAQ,EAAED,SAAS,IAAI,EAAE;EAEjD,MAAMP,QAA4C,GAAGO,SAAS,CAACE,IAAI,CAC/DC,GAAG,IAAIA,GAAG,CAACC,EAAE,KAAKhB,KAAK,CAACiB,WAC5B,CAAC;EAED,IAAI,CAACZ,QAAQ,EAAE;IACX,OAAO,IAAI;EACf;EAEA,oBACI1C,KAAA,CAAAsB,aAAA,CAACJ,uBAAuB;IACpBmB,KAAK,EAAEA,KAAM;IACbO,YAAY,EAAEA,YAAa;IAC3BZ,OAAO,EAAEA,OAAQ;IACjBE,MAAM,EAAEA,MAAO;IACfE,OAAO,EAAEA,OAAQ;IACjBE,QAAQ,EAAEA,QAAS;IACnBR,QAAQ,EAAEA,QAAS;IACnBG,UAAU,EAAEA,UAAW;IACvBM,KAAK,EAAEG,QAAQ,CAACa,IAAK;IACrBf,WAAW,EAAEE,QAAQ,CAACF,WAAY;IAClCd,IAAI,eAAE1B,KAAA,CAAAsB,aAAA,CAACd,YAAY;MAACkB,IAAI,EAAEgB,QAAQ,CAAChB;IAAK,CAAE,CAAE;IAC5CgB,QAAQ,EAAEA;EAAS,gBAEnB1C,KAAA,CAAAsB,aAAA,CAACmB,cAAc;IAACC,QAAQ,EAAEA,QAAS;IAACE,YAAY,EAAEA,YAAa;IAACD,IAAI,EAAEA;EAAK,CAAE,CACxD,CAAC;AAElC,CAAC;AAMD,OAAO,MAAMa,mBAAmB,GAAG5C,eAAe,CAC9C,qBAAqB,EACrB,CAAC;EAAEO;AAAmC,CAAC,KAAK;EACxC,oBACInB,KAAA,CAAAsB,aAAA,CAACN,SAAS;IAACyC,OAAO,EAAE,WAAY;IAACC,SAAS,EAAE;EAAS,gBACjD1D,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,QAAGJ,QAAW,CACP,CAAC;AAEpB,CACJ,CAAC;AAUD,OAAO,MAAMwC,qBAAqB,GAAIvC,KAAiC,IAAK;EACxE,MAAM;IAAEwC;EAAiB,CAAC,GAAG7C,qBAAqB,CAAC;IAC/C8C,OAAO,EAAE,2EAA2E;IACpFC,WAAW,EAAE,gBAAgB;IAC7BC,WAAW,EAAE;EACjB,CAAC,CAAC;EAEF,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAErB;EAAa,CAAC,GAAGxB,KAAK;EAC7C,MAAM8C,UAAU,GAAIxB,QAA4C,IAAK;IACjEsB,IAAI,CAACG,WAAW,CAAC;MAAEb,WAAW,EAAEZ,QAAQ,CAACW,EAAE;MAAEe,UAAU,EAAE1B,QAAQ,CAAC0B;IAAW,CAAC,CAAC;EACnF,CAAC;EAED,MAAMC,UAAU,GAAGA,CAAChC,KAAoB,EAAEiC,KAAa,KAAK;IACxDN,IAAI,CAACG,WAAW,CAAClE,SAAS,CAACoC,KAAK,CAAC,EAAEiC,KAAK,GAAG,CAAC,CAAC;EACjD,CAAC;EAED,MAAMC,MAAuB,GAAGP,IAAI,CAAC3B,KAAK,IAAI,EAAE;EAChD,MAAMmC,SAAS,GAAGD,MAAM,CAACE,MAAM,GAAG,CAAC;EAEnC,MAAM9B,IAAI,GAAGsB,OAAO,CAAC,CAAC;EAEtB,oBACIjE,KAAA,CAAAsB,aAAA;IAAKoC,SAAS,EAAE;EAAyB,GACpCc,SAAS,gBACNxE,KAAA,CAAAsB,aAAA,CAACb,mBAAmB;IAAC4B,KAAK,EAAE2B,IAAI,CAAC3B,KAAM;IAACqC,IAAI,EAAE/B,IAAI,CAACgC;EAAW,gBAC1D3E,KAAA,CAAAsB,aAAA,CAACkC,mBAAmB,EAAKpC,KAAK,EACzBmD,MAAM,CAACK,GAAG,CAAC,CAACvC,KAAK,EAAEiC,KAAK,KAAK;IAC1B,MAAM3B,IAAI,GAAGsB,OAAO,CAACK,KAAK,CAAC;IAE3B,MAAMhC,QAAQ,GAAGA,CAAA,KAAM;MACnBsB,gBAAgB,CAAC,MAAM;QACnBI,IAAI,CAACa,WAAW,CAACP,KAAK,CAAC;MAC3B,CAAC,CAAC;IACN,CAAC;IAED,oBACItE,KAAA,CAAAsB,aAAA,CAACR,wBAAwB;MAACgE,GAAG,EAAER,KAAM;MAACA,KAAK,EAAEA;IAAM,gBAC/CtE,KAAA,CAAAsB,aAAA,CAACqB,IAAI,QACA,mBACG3C,KAAA,CAAAsB,aAAA,CAACqB,IAAI,CAACoC,mBAAmB,qBACrB/E,KAAA,CAAAsB,aAAA,CAACyB,iBAAiB;MACdV,KAAK,EAAEA,KAAM;MACbO,YAAY,EAAEA,YAAa;MAC3BD,IAAI,EAAEA,IAAK;MACXX,OAAO,EAAEsC,KAAK,KAAK,CAAE;MACrBpC,MAAM,EAAEoC,KAAK,KAAKC,MAAM,CAACE,MAAM,GAAG,CAAE;MACpC3C,QAAQ,EAAEA,CAAA,KAAMkC,IAAI,CAACgB,WAAW,CAACV,KAAK,CAAE;MACxCrC,UAAU,EAAEA,CAAA,KAAM+B,IAAI,CAACiB,aAAa,CAACX,KAAK,CAAE;MAC5ChC,QAAQ,EAAEA,QAAS;MACnBF,OAAO,EAAEC,KAAK,IAAIgC,UAAU,CAAChC,KAAK,EAAEiC,KAAK;IAAE,CAC9C,CACqB,CAE5B,CACgB,CAAC;EAEnC,CAAC,CACgB,CACJ,CAAC,GACtB,IAAI,eACRtE,KAAA,CAAAsB,aAAA,CAACf,iBAAiB;IAAC2D,UAAU,EAAEA;EAAW,CAAE,CAC3C,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { BindComponentRenderProp, CmsDynamicZoneTemplate, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
+import type { BindComponentRenderProp, CmsDynamicZoneTemplate, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types.js";
 type GetBind = CmsModelFieldRendererProps["getBind"];
 interface SingleValueDynamicZoneProps {
     field: CmsModelField;

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

@@ -2,12 +2,12 @@ import React from "react";
 import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { makeDecoratable, useConfirmationDialog } from "@webiny/app-admin";
 import { Accordion, Tooltip } from "@webiny/admin-ui";
-import { AddTemplateButton } from "./AddTemplate";
-import { TemplateIcon } from "./TemplateIcon";
-import { TemplateProvider } from "./TemplateProvider";
-import { Fields } from "../../../components/ContentEntryForm/Fields";
-import { ParentFieldProvider } from "../../../components/ContentEntryForm/ParentValue";
-import { ParentValueIndexProvider, ModelFieldProvider } from "../../../components/ModelFieldProvider";
+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 { ParentValueIndexProvider, ModelFieldProvider } from "../../../components/ModelFieldProvider/index.js";
 export const SingleValueItemContainer = makeDecoratable("SingleValueItemContainer", props => {
   const {
     template,
@@ -20,8 +20,6 @@ export const SingleValueItemContainer = makeDecoratable("SingleValueItemContaine
     icon: /*#__PURE__*/React.createElement(TemplateIcon, {
       icon: template.icon
     }),
-    open: true,
-    interactive: false,
     actions: /*#__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),
@@ -65,7 +63,10 @@ export const SingleValueDynamicZone = ({
     index: -1
   }, /*#__PURE__*/React.createElement(ModelFieldProvider, {
     field: field
-  }, /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(SingleValueItemContainer, {
+  }, /*#__PURE__*/React.createElement(Accordion, {
+    background: "base",
+    variant: "container"
+  }, /*#__PURE__*/React.createElement(SingleValueItemContainer, {
     template: template,
     value: bind.value,
     contentModel: contentModel,

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

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