@webiny/app-headless-cms 5.43.3 → 6.0.0-alpha.1

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

@@ -1,91 +1,88 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SingleValueItemContainer = exports.SingleValueDynamicZone = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _delete_outline = require("@material-design-icons/svg/outlined/delete_outline.svg");
-var _Accordion = require("@webiny/ui/Accordion");
-var _AddTemplate = require("./AddTemplate");
-var _TemplateIcon = require("./TemplateIcon");
-var _TemplateProvider = require("./TemplateProvider");
-var _Fields = require("../../../components/ContentEntryForm/Fields");
-var _ParentValue = require("../../../components/ContentEntryForm/ParentValue");
-var _ModelFieldProvider = require("../../../components/ModelFieldProvider");
-var _appAdmin = require("@webiny/app-admin");
-var SingleValueItemContainer = exports.SingleValueItemContainer = (0, _appAdmin.makeDecoratable)("SingleValueItemContainer", function (props) {
-  var template = props.template,
-    actions = props.actions,
-    children = props.children;
-  return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+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";
+export const SingleValueItemContainer = makeDecoratable("SingleValueItemContainer", props => {
+  const {
+    template,
+    actions,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(Accordion.Item, {
     title: template.name,
     description: template.description,
-    icon: /*#__PURE__*/_react.default.createElement(_TemplateIcon.TemplateIcon, {
+    icon: /*#__PURE__*/React.createElement(TemplateIcon, {
       icon: template.icon
     }),
     open: true,
     interactive: false,
-    actions: /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Actions, null, actions ?? null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
-      icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
-      onClick: props.onDelete,
-      tooltip: "Delete"
+    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),
+        content: "Delete"
+      }),
+      onClick: props.onDelete
     }))
   }, children);
 });
-var SingleValueDynamicZone = exports.SingleValueDynamicZone = function SingleValueDynamicZone(_ref) {
-  var field = _ref.field,
-    bind = _ref.bind,
-    contentModel = _ref.contentModel,
-    getBind = _ref.getBind;
-  var _useConfirmationDialo = (0, _appAdmin.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."
-    }),
-    showConfirmation = _useConfirmationDialo.showConfirmation;
-  var onTemplate = function onTemplate(template) {
+export const SingleValueDynamicZone = ({
+  field,
+  bind,
+  contentModel,
+  getBind
+}) => {
+  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
     });
   };
-  var templates = field.settings?.templates || [];
-  var template = bind.value ? templates.find(function (tpl) {
-    return tpl.id === bind.value._templateId;
-  }) : undefined;
-  var Bind = getBind();
-  var unsetValue = function unsetValue() {
-    showConfirmation(function () {
+  const templates = field.settings?.templates || [];
+  const template = bind.value ? templates.find(tpl => tpl.id === bind.value._templateId) : undefined;
+  const Bind = getBind();
+  const unsetValue = () => {
+    showConfirmation(() => {
       bind.onChange(null);
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, template ? /*#__PURE__*/_react.default.createElement(_ParentValue.ParentFieldProvider, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, template ? /*#__PURE__*/React.createElement(ParentFieldProvider, {
     value: bind.value,
     path: Bind.parentName
-  }, /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ParentValueIndexProvider, {
+  }, /*#__PURE__*/React.createElement(ParentValueIndexProvider, {
     index: -1
-  }, /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
+  }, /*#__PURE__*/React.createElement(ModelFieldProvider, {
     field: field
-  }, /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(SingleValueItemContainer, {
+  }, /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(SingleValueItemContainer, {
     template: template,
     value: bind.value,
     contentModel: contentModel,
     onDelete: unsetValue,
     title: template.name,
     description: template.description,
-    icon: /*#__PURE__*/_react.default.createElement(_TemplateIcon.TemplateIcon, {
+    icon: /*#__PURE__*/React.createElement(TemplateIcon, {
       icon: template.icon
     })
-  }, /*#__PURE__*/_react.default.createElement(_TemplateProvider.TemplateProvider, {
+  }, /*#__PURE__*/React.createElement(TemplateProvider, {
     template: template
-  }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+  }, /*#__PURE__*/React.createElement(Fields, {
     fields: template.fields,
     layout: template.layout || [],
     contentModel: contentModel,
     Bind: Bind
-  }))))))) : null, bind.value ? null : /*#__PURE__*/_react.default.createElement(_AddTemplate.AddTemplateButton, {
+  }))))))) : null, bind.value ? null : /*#__PURE__*/React.createElement(AddTemplateButton, {
     onTemplate: onTemplate
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_delete_outline","_Accordion","_AddTemplate","_TemplateIcon","_TemplateProvider","_Fields","_ParentValue","_ModelFieldProvider","_appAdmin","SingleValueItemContainer","exports","makeDecoratable","props","template","actions","children","default","createElement","AccordionItem","title","name","description","icon","TemplateIcon","open","interactive","Actions","Action","ReactComponent","onClick","onDelete","tooltip","SingleValueDynamicZone","_ref","field","bind","contentModel","getBind","_useConfirmationDialo","useConfirmationDialog","message","acceptLabel","cancelLabel","showConfirmation","onTemplate","onChange","_templateId","id","__typename","templates","settings","value","find","tpl","undefined","Bind","unsetValue","Fragment","ParentFieldProvider","path","parentName","ParentValueIndexProvider","index","ModelFieldProvider","Accordion","TemplateProvider","Fields","fields","layout","AddTemplateButton"],"sources":["SingleValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { AddTemplateButton } from \"./AddTemplate\";\nimport { TemplateIcon } from \"./TemplateIcon\";\nimport { TemplateProvider } from \"./TemplateProvider\";\nimport {\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\";\nimport { makeDecoratable, useConfirmationDialog } from \"@webiny/app-admin\";\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            <AccordionItem\n                title={template.name}\n                description={template.description}\n                icon={<TemplateIcon icon={template.icon} />}\n                open={true}\n                interactive={false}\n                actions={\n                    <AccordionItem.Actions>\n                        {actions ?? null}\n                        <AccordionItem.Action\n                            icon={<DeleteIcon />}\n                            onClick={props.onDelete}\n                            tooltip={\"Delete\"}\n                        />\n                    </AccordionItem.Actions>\n                }\n            >\n                {children}\n            </AccordionItem>\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","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":[]}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { CmsDynamicZoneTemplate } from "../../../../types";
+import type { CmsDynamicZoneTemplate } from "../../../../types";
 export interface TemplateGalleryContainerProps {
     children: React.ReactNode;
 }

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

@@ -1,62 +1,48 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TemplateGallery = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _highlight_off = require("@material-design-icons/svg/outlined/highlight_off.svg");
-var _appAdmin = require("@webiny/app-admin");
-var _Button = require("@webiny/ui/Button");
-var _hooks = require("../../../hooks");
-var _TemplateItem = require("./TemplateItem");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var GalleryContainer = (0, _appAdmin.makeDecoratable)("TemplateGalleryContainer", function (props) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
-});
-var DefaultGalleryList = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e1pydjsn0"
-} : {
-  target: "e1pydjsn0",
-  label: "DefaultGalleryList"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1klvoba",
-  styles: "display:flex;flex-wrap:wrap;justify-content:center;padding:10px"
-} : {
-  name: "1klvoba",
-  styles: "display:flex;flex-wrap:wrap;justify-content:center;padding:10px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRlbXBsYXRlR2FsbGVyeS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JxQyIsImZpbGUiOiJUZW1wbGF0ZUdhbGxlcnkudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBDbG9zZUljb24gfSBmcm9tIFwiQG1hdGVyaWFsLWRlc2lnbi1pY29ucy9zdmcvb3V0bGluZWQvaGlnaGxpZ2h0X29mZi5zdmdcIjtcbmltcG9ydCB7IERlY29yYXRhYmxlQ29tcG9uZW50LCBtYWtlRGVjb3JhdGFibGUsIHdpdGhEZWNvcmF0b3JGYWN0b3J5IH0gZnJvbSBcIkB3ZWJpbnkvYXBwLWFkbWluXCI7XG5pbXBvcnQgeyBJY29uQnV0dG9uIH0gZnJvbSBcIkB3ZWJpbnkvdWkvQnV0dG9uXCI7XG5pbXBvcnQgeyBDbXNEeW5hbWljWm9uZVRlbXBsYXRlIH0gZnJvbSBcIn4vdHlwZXNcIjtcbmltcG9ydCB7IHVzZU1vZGVsLCB1c2VNb2RlbEZpZWxkIH0gZnJvbSBcIn4vYWRtaW4vaG9va3NcIjtcbmltcG9ydCB7IFRlbXBsYXRlSXRlbSB9IGZyb20gXCIuL1RlbXBsYXRlSXRlbVwiO1xuXG5leHBvcnQgaW50ZXJmYWNlIFRlbXBsYXRlR2FsbGVyeUNvbnRhaW5lclByb3BzIHtcbiAgICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5jb25zdCBHYWxsZXJ5Q29udGFpbmVyID0gbWFrZURlY29yYXRhYmxlKFxuICAgIFwiVGVtcGxhdGVHYWxsZXJ5Q29udGFpbmVyXCIsXG4gICAgKHByb3BzOiBUZW1wbGF0ZUdhbGxlcnlDb250YWluZXJQcm9wcykgPT4ge1xuICAgICAgICByZXR1cm4gPD57cHJvcHMuY2hpbGRyZW59PC8+O1xuICAgIH1cbik7XG5cbmNvbnN0IERlZmF1bHRHYWxsZXJ5TGlzdCA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LXdyYXA6IHdyYXA7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgcGFkZGluZzogMTBweDtcbmA7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVGVtcGxhdGVHYWxsZXJ5TGlzdFByb3BzIHtcbiAgICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5jb25zdCBHYWxsZXJ5TGlzdCA9IG1ha2VEZWNvcmF0YWJsZShcIlRlbXBsYXRlR2FsbGVyeUxpc3RcIiwgKHByb3BzOiBUZW1wbGF0ZUdhbGxlcnlMaXN0UHJvcHMpID0+IHtcbiAgICByZXR1cm4gPERlZmF1bHRHYWxsZXJ5TGlzdD57cHJvcHMuY2hpbGRyZW59PC9EZWZhdWx0R2FsbGVyeUxpc3Q+O1xufSk7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ2xvc2VHYWxsZXJ5UHJvcHMge1xuICAgIG9uQ2xvc2U6ICgpID0+IHZvaWQ7XG59XG5cbmNvbnN0IENsb3NlR2FsbGVyeSA9IG1ha2VEZWNvcmF0YWJsZShcIlRlbXBsYXRlR2FsbGVyeUNsb3NlXCIsIChwcm9wczogQ2xvc2VHYWxsZXJ5UHJvcHMpID0+IHtcbiAgICByZXR1cm4gPEljb25CdXR0b24gb25DbGljaz17cHJvcHMub25DbG9zZX0gaWNvbj17PENsb3NlSWNvbiAvPn0gLz47XG59KTtcblxuZXhwb3J0IGludGVyZmFjZSBUZW1wbGF0ZUdhbGxlcnlQcm9wcyB7XG4gICAgb25UZW1wbGF0ZTogKHRlbXBsYXRlOiBDbXNEeW5hbWljWm9uZVRlbXBsYXRlKSA9PiB2b2lkO1xuICAgIG9uQ2xvc2U6ICgpID0+IHZvaWQ7XG4gICAgdGVtcGxhdGVzPzogQ21zRHluYW1pY1pvbmVUZW1wbGF0ZVtdO1xufVxuXG5jb25zdCBHYWxsZXJ5ID0gbWFrZURlY29yYXRhYmxlKFwiVGVtcGxhdGVHYWxsZXJ5XCIsIChwcm9wczogVGVtcGxhdGVHYWxsZXJ5UHJvcHMpID0+IHtcbiAgICBjb25zdCB7IGZpZWxkIH0gPSB1c2VNb2RlbEZpZWxkKCk7XG4gICAgY29uc3QgdGVtcGxhdGVzID0gcHJvcHMudGVtcGxhdGVzIHx8IGZpZWxkLnNldHRpbmdzPy50ZW1wbGF0ZXMgfHwgW107XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8R2FsbGVyeUNvbnRhaW5lcj5cbiAgICAgICAgICAgIDxHYWxsZXJ5TGlzdD5cbiAgICAgICAgICAgICAgICB7dGVtcGxhdGVzLm1hcCh0ZW1wbGF0ZSA9PiAoXG4gICAgICAgICAgICAgICAgICAgIDxUZW1wbGF0ZUl0ZW1cbiAgICAgICAgICAgICAgICAgICAgICAgIGtleT17dGVtcGxhdGUuaWR9XG4gICAgICAgICAgICAgICAgICAgICAgICB0ZW1wbGF0ZT17dGVtcGxhdGV9XG4gICAgICAgICAgICAgICAgICAgICAgICBvblRlbXBsYXRlPXtwcm9wcy5vblRlbXBsYXRlfVxuICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICkpfVxuICAgICAgICAgICAgPC9HYWxsZXJ5TGlzdD5cbiAgICAgICAgICAgIDxDbG9zZUdhbGxlcnkgb25DbG9zZT17cHJvcHMub25DbG9zZX0gLz5cbiAgICAgICAgPC9HYWxsZXJ5Q29udGFpbmVyPlxuICAgICk7XG59KTtcblxuZXhwb3J0IHR5cGUgU2hvdWxkUmVuZGVyID0geyBtb2RlbElkcz86IHN0cmluZ1tdIH07XG5cbmZ1bmN0aW9uIHdpdGhTaG91bGRSZW5kZXI8VCBleHRlbmRzIERlY29yYXRhYmxlQ29tcG9uZW50PihDb21wb25lbnQ6IFQpIHtcbiAgICByZXR1cm4gd2l0aERlY29yYXRvckZhY3Rvcnk8U2hvdWxkUmVuZGVyPigpKENvbXBvbmVudCwgZGVjb3JhdG9yUHJvcHMgPT4ge1xuICAgICAgICBjb25zdCB7IG1vZGVsIH0gPSB1c2VNb2RlbCgpO1xuXG4gICAgICAgIGlmIChkZWNvcmF0b3JQcm9wcz8ubW9kZWxJZHM/Lmxlbmd0aCAmJiAhZGVjb3JhdG9yUHJvcHMubW9kZWxJZHMuaW5jbHVkZXMobW9kZWwubW9kZWxJZCkpIHtcbiAgICAgICAgICAgIHJldHVybiBmYWxzZTtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybiB0cnVlO1xuICAgIH0pO1xufVxuXG4vKipcbiAqIFdlJ3JlIHdyYXBwaW5nIGVhY2ggY29tcG9uZW50IHdpdGggYHdpdGhTaG91bGRSZW5kZXJgLCBiZWNhdXNlIHRoZXkncmUgYWxsIGRlY29yYXRhYmxlLCBhbmQgYHdpdGhTaG91bGRSZW5kZXJgIGF0dGFjaGVzIGFcbiAqIGNvbmRpdGlvbmFsIGRlY29yYXRvciwgd2hpY2ggb3B0aW9uYWxseSB0YWtlcyBhIGBtb2RlbElkc2AgcHJvcCwgc28geW91IGNhbiBjb250cm9sIG9uIHdoaWNoIG1vZGVscyB0aGF0IGNvbXBvbmVudCB3aWxsIGJlIGRlY29yYXRlZC5cbiAqL1xuZXhwb3J0IGNvbnN0IFRlbXBsYXRlR2FsbGVyeSA9IE9iamVjdC5hc3NpZ24od2l0aFNob3VsZFJlbmRlcihHYWxsZXJ5KSwge1xuICAgIENvbnRhaW5lcjogd2l0aFNob3VsZFJlbmRlcihHYWxsZXJ5Q29udGFpbmVyKSxcbiAgICBMaXN0OiB3aXRoU2hvdWxkUmVuZGVyKEdhbGxlcnlMaXN0KSxcbiAgICBJdGVtOiB3aXRoU2hvdWxkUmVuZGVyKFRlbXBsYXRlSXRlbSksXG4gICAgQ2xvc2U6IHdpdGhTaG91bGRSZW5kZXIoQ2xvc2VHYWxsZXJ5KVxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import React from "react";
+import { ReactComponent as CloseIcon } from "@webiny/icons/highlight_off.svg";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { makeDecoratable, withDecoratorFactory } from "@webiny/app-admin";
+import { useModel, useModelField } from "../../../hooks";
+import { TemplateItem } from "./TemplateItem";
+const GalleryContainer = makeDecoratable("TemplateGalleryContainer", props => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
 });
-var GalleryList = (0, _appAdmin.makeDecoratable)("TemplateGalleryList", function (props) {
-  return /*#__PURE__*/_react.default.createElement(DefaultGalleryList, null, props.children);
+const GalleryList = makeDecoratable("TemplateGalleryList", props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-p-md wby-rounded-sm wby-bg-neutral-dimmed wby-grid wby-grid-cols-4 wby-gap-md"
+  }, props.children);
 });
-var CloseGallery = (0, _appAdmin.makeDecoratable)("TemplateGalleryClose", function (props) {
-  return /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    onClick: props.onClose,
-    icon: /*#__PURE__*/_react.default.createElement(_highlight_off.ReactComponent, null)
-  });
+const CloseGallery = makeDecoratable("TemplateGalleryClose", props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full wby-text-center wby-mt-md"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: "Close",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      onClick: props.onClose,
+      icon: /*#__PURE__*/React.createElement(CloseIcon, null),
+      size: "lg",
+      variant: "ghost"
+    })
+  }));
 });
-var Gallery = (0, _appAdmin.makeDecoratable)("TemplateGallery", function (props) {
-  var _useModelField = (0, _hooks.useModelField)(),
-    field = _useModelField.field;
-  var templates = props.templates || field.settings?.templates || [];
-  return /*#__PURE__*/_react.default.createElement(GalleryContainer, null, /*#__PURE__*/_react.default.createElement(GalleryList, null, templates.map(function (template) {
-    return /*#__PURE__*/_react.default.createElement(_TemplateItem.TemplateItem, {
-      key: template.id,
-      template: template,
-      onTemplate: props.onTemplate
-    });
-  })), /*#__PURE__*/_react.default.createElement(CloseGallery, {
+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
+  }))), /*#__PURE__*/React.createElement(CloseGallery, {
     onClose: props.onClose
   }));
 });
 function withShouldRender(Component) {
-  return (0, _appAdmin.withDecoratorFactory)()(Component, function (decoratorProps) {
-    var _useModel = (0, _hooks.useModel)(),
-      model = _useModel.model;
+  return withDecoratorFactory()(Component, decoratorProps => {
+    const {
+      model
+    } = useModel();
     if (decoratorProps?.modelIds?.length && !decoratorProps.modelIds.includes(model.modelId)) {
       return false;
     }
@@ -68,10 +54,10 @@ function withShouldRender(Component) {
  * 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.
  */
-var TemplateGallery = exports.TemplateGallery = Object.assign(withShouldRender(Gallery), {
+export const TemplateGallery = Object.assign(withShouldRender(Gallery), {
   Container: withShouldRender(GalleryContainer),
   List: withShouldRender(GalleryList),
-  Item: withShouldRender(_TemplateItem.TemplateItem),
+  Item: withShouldRender(TemplateItem),
   Close: withShouldRender(CloseGallery)
 });
 

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_highlight_off","_appAdmin","_Button","_hooks","_TemplateItem","_EMOTION_STRINGIFIED_CSS_ERROR__","GalleryContainer","makeDecoratable","props","default","createElement","Fragment","children","DefaultGalleryList","_base","process","env","NODE_ENV","target","label","name","styles","map","toString","GalleryList","CloseGallery","IconButton","onClick","onClose","icon","ReactComponent","Gallery","_useModelField","useModelField","field","templates","settings","template","TemplateItem","key","id","onTemplate","withShouldRender","Component","withDecoratorFactory","decoratorProps","_useModel","useModel","model","modelIds","length","includes","modelId","TemplateGallery","exports","Object","assign","Container","List","Item","Close"],"sources":["TemplateGallery.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { ReactComponent as CloseIcon } from \"@material-design-icons/svg/outlined/highlight_off.svg\";\nimport { DecoratableComponent, makeDecoratable, withDecoratorFactory } from \"@webiny/app-admin\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { useModel, useModelField } from \"~/admin/hooks\";\nimport { TemplateItem } from \"./TemplateItem\";\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\nconst DefaultGalleryList = styled.div`\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    padding: 10px;\n`;\n\nexport interface TemplateGalleryListProps {\n    children: React.ReactNode;\n}\n\nconst GalleryList = makeDecoratable(\"TemplateGalleryList\", (props: TemplateGalleryListProps) => {\n    return <DefaultGalleryList>{props.children}</DefaultGalleryList>;\n});\n\nexport interface CloseGalleryProps {\n    onClose: () => void;\n}\n\nconst CloseGallery = makeDecoratable(\"TemplateGalleryClose\", (props: CloseGalleryProps) => {\n    return <IconButton onClick={props.onClose} icon={<CloseIcon />} />;\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            <CloseGallery onClose={props.onClose} />\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    Close: withShouldRender(CloseGallery)\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","CloseIcon","IconButton","Tooltip","makeDecoratable","withDecoratorFactory","useModel","useModelField","TemplateItem","GalleryContainer","props","createElement","Fragment","children","GalleryList","className","CloseGallery","content","trigger","onClick","onClose","icon","size","variant","Gallery","field","templates","settings","map","template","key","id","onTemplate","withShouldRender","Component","decoratorProps","model","modelIds","length","includes","modelId","TemplateGallery","Object","assign","Container","List","Item","Close"],"sources":["TemplateGallery.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/highlight_off.svg\";\nimport { IconButton, Tooltip } from \"@webiny/admin-ui\";\nimport type { DecoratableComponent } from \"@webiny/app-admin\";\nimport { makeDecoratable, withDecoratorFactory } from \"@webiny/app-admin\";\nimport type { CmsDynamicZoneTemplate } from \"~/types\";\nimport { useModel, useModelField } from \"~/admin/hooks\";\nimport { TemplateItem } from \"./TemplateItem\";\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 (\n        <div\n            className={\n                \"wby-p-md wby-rounded-sm wby-bg-neutral-dimmed wby-grid wby-grid-cols-4 wby-gap-md\"\n            }\n        >\n            {props.children}\n        </div>\n    );\n});\n\nexport interface CloseGalleryProps {\n    onClose: () => void;\n}\n\nconst CloseGallery = makeDecoratable(\"TemplateGalleryClose\", (props: CloseGalleryProps) => {\n    return (\n        <div className={\"wby-w-full wby-text-center wby-mt-md\"}>\n            <Tooltip\n                content={\"Close\"}\n                trigger={\n                    <IconButton\n                        onClick={props.onClose}\n                        icon={<CloseIcon />}\n                        size={\"lg\"}\n                        variant={\"ghost\"}\n                    />\n                }\n            />\n        </div>\n    );\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            <CloseGallery onClose={props.onClose} />\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    Close: withShouldRender(CloseGallery)\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,16 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TemplateIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var TemplateIcon = exports.TemplateIcon = function TemplateIcon(_ref) {
-  var icon = _ref.icon;
-  var faIcon = icon ? icon.split("/") : undefined;
-  return faIcon ? /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+export const TemplateIcon = ({
+  icon
+}) => {
+  const faIcon = icon ? icon.split("/") : undefined;
+  return faIcon ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    className: "wby-text-neutral-strong",
     icon: faIcon
   }) : null;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactFontawesome","TemplateIcon","exports","_ref","icon","faIcon","split","undefined","default","createElement","FontAwesomeIcon"],"sources":["TemplateIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { FontAwesomeIcon, FontAwesomeIconProps } from \"@fortawesome/react-fontawesome\";\n\ninterface TemplateIconProps {\n    icon: string;\n}\n\nexport const TemplateIcon = ({ icon }: TemplateIconProps) => {\n    const faIcon = icon ? (icon.split(\"/\") as FontAwesomeIconProps[\"icon\"]) : undefined;\n\n    return faIcon ? <FontAwesomeIcon icon={faIcon} /> : null;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAMO,IAAME,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,SAAfA,YAAYA,CAAAE,IAAA,EAAoC;EAAA,IAA9BC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAC/B,IAAMC,MAAM,GAAGD,IAAI,GAAIA,IAAI,CAACE,KAAK,CAAC,GAAG,CAAC,GAAoCC,SAAS;EAEnF,OAAOF,MAAM,gBAAGR,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACT,iBAAA,CAAAU,eAAe;IAACN,IAAI,EAAEC;EAAO,CAAE,CAAC,GAAG,IAAI;AAC5D,CAAC","ignoreList":[]}
+{"version":3,"names":["React","FontAwesomeIcon","TemplateIcon","icon","faIcon","split","undefined","createElement","className"],"sources":["TemplateIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FontAwesomeIconProps } from \"@fortawesome/react-fontawesome\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ninterface TemplateIconProps {\n    icon: string;\n}\n\nexport const TemplateIcon = ({ icon }: TemplateIconProps) => {\n    const faIcon = icon ? (icon.split(\"/\") as FontAwesomeIconProps[\"icon\"]) : undefined;\n\n    return faIcon ? <FontAwesomeIcon className={\"wby-text-neutral-strong\"} icon={faIcon} /> : null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,gCAAgC;AAMhE,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC;AAAwB,CAAC,KAAK;EACzD,MAAMC,MAAM,GAAGD,IAAI,GAAIA,IAAI,CAACE,KAAK,CAAC,GAAG,CAAC,GAAoCC,SAAS;EAEnF,OAAOF,MAAM,gBAAGJ,KAAA,CAAAO,aAAA,CAACN,eAAe;IAACO,SAAS,EAAE,yBAA0B;IAACL,IAAI,EAAEC;EAAO,CAAE,CAAC,GAAG,IAAI;AAClG,CAAC","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { CmsDynamicZoneTemplate } from "../../../../types";
+import type { CmsDynamicZoneTemplate } from "../../../../types";
 export interface TemplateCardProps {
     template: CmsDynamicZoneTemplate;
     onTemplate: (template: CmsDynamicZoneTemplate) => void;