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

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

@@ -1,65 +1,89 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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.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,
+    actions,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(Accordion.Item, {
+    title: template.name,
+    description: template.description,
+    icon: /*#__PURE__*/React.createElement(TemplateIcon, {
+      icon: template.icon
+    }),
+    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);
 });
-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 SingleValueDynamicZone = exports.SingleValueDynamicZone = function SingleValueDynamicZone(_ref) {
-  var field = _ref.field,
-    bind = _ref.bind,
-    contentModel = _ref.contentModel,
-    getBind = _ref.getBind;
-  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() {
-    bind.onChange(null);
+  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(_Accordion.AccordionItem, {
+  }, /*#__PURE__*/React.createElement(Accordion, {
+    background: "base",
+    variant: "container"
+  }, /*#__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
-    }),
-    open: true,
-    interactive: false,
-    actions: /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Actions, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
-      icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
-      onClick: unsetValue
-    }))
-  }, /*#__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","SingleValueDynamicZone","exports","_ref","field","bind","contentModel","getBind","onTemplate","template","onChange","_templateId","id","__typename","templates","settings","value","find","tpl","undefined","Bind","unsetValue","default","createElement","Fragment","ParentFieldProvider","path","parentName","ParentValueIndexProvider","index","ModelFieldProvider","Accordion","AccordionItem","title","name","description","icon","TemplateIcon","open","interactive","actions","Actions","Action","ReactComponent","onClick","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\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\ninterface SingleValueDynamicZoneProps {\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const SingleValueDynamicZone = ({\n    field,\n    bind,\n    contentModel,\n    getBind\n}: SingleValueDynamicZoneProps) => {\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        bind.onChange(null);\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                                <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                                            <AccordionItem.Action\n                                                icon={<DeleteIcon />}\n                                                onClick={unsetValue}\n                                            />\n                                        </AccordionItem.Actions>\n                                    }\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                                </AccordionItem>\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":[]}

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

@@ -1,59 +1,121 @@
 import React from "react";
-import { CmsDynamicZoneTemplate } from "../../../../types";
+import type { CmsDynamicZoneTemplate } from "../../../../types.js";
 export interface TemplateGalleryContainerProps {
     children: React.ReactNode;
 }
 export interface TemplateGalleryListProps {
     children: React.ReactNode;
 }
-export interface CloseGalleryProps {
-    onClose: () => void;
-}
 export interface TemplateGalleryProps {
     onTemplate: (template: CmsDynamicZoneTemplate) => void;
     onClose: () => void;
     templates?: CmsDynamicZoneTemplate[];
 }
-export declare type ShouldRender = {
+export type ShouldRender = {
     modelIds?: string[];
 };
 /**
  * We're wrapping each component with `withShouldRender`, because they're all decoratable, and `withShouldRender` attaches a
  * conditional decorator, which optionally takes a `modelIds` prop, so you can control on which models that component will be decorated.
  */
-export declare const TemplateGallery: import("@webiny/app-admin").GenericComponent<TemplateGalleryProps> & {
-    original: import("@webiny/app-admin").GenericComponent<TemplateGalleryProps>;
+export declare const TemplateGallery: ((props: TemplateGalleryProps) => React.JSX.Element) & {
+    original: (props: TemplateGalleryProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: TemplateGalleryProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/app-admin").Decorator<(props: TemplateGalleryProps, context?: any) => React.ReactElement<any, any> | null>) => (props: ShouldRender) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Container: import("@webiny/app-admin").GenericComponent<TemplateGalleryContainerProps> & {
-        original: import("@webiny/app-admin").GenericComponent<TemplateGalleryContainerProps>;
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: ShouldRender) => React.JSX.Element;
+} & {
+    Container: ((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/app-admin").Decorator<(props: TemplateGalleryContainerProps, context?: any) => React.ReactElement<any, any> | null>) => (props: ShouldRender) => React.JSX.Element;
-    };
-    List: import("@webiny/app-admin").GenericComponent<TemplateGalleryListProps> & {
-        original: import("@webiny/app-admin").GenericComponent<TemplateGalleryListProps>;
+        original: ((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/app-admin").Decorator<(props: TemplateGalleryListProps, context?: any) => React.ReactElement<any, any> | null>) => (props: ShouldRender) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: ShouldRender) => React.JSX.Element;
     };
-    Item: import("@webiny/app-admin").GenericComponent<import("./TemplateItem").TemplateCardProps> & {
-        original: import("@webiny/app-admin").GenericComponent<import("./TemplateItem").TemplateCardProps>;
+    List: ((props: TemplateGalleryListProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryListProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: TemplateGalleryListProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryListProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/app-admin").Decorator<(props: import("./TemplateItem").TemplateCardProps, context?: any) => React.ReactElement<any, any> | null>) => (props: ShouldRender) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryListProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryListProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryListProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryListProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: ShouldRender) => React.JSX.Element;
     };
-    Close: import("@webiny/app-admin").GenericComponent<CloseGalleryProps> & {
-        original: import("@webiny/app-admin").GenericComponent<CloseGalleryProps>;
+    Item: (({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element) & {
+        original: ({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/app-admin").Decorator<(props: CloseGalleryProps, context?: any) => React.ReactElement<any, any> | null>) => (props: ShouldRender) => React.JSX.Element;
+        original: (({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element) & {
+            original: ({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element) & {
+            original: ({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element) & {
+            original: ({ template, onTemplate }: import("./TemplateItem.js").TemplateCardProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: ShouldRender) => React.JSX.Element;
     };
 };

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

@@ -1,62 +1,31 @@
-"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 { makeDecoratable, withDecoratorFactory } from "@webiny/app-admin";
+import { useModel, useModelField } from "../../../hooks/index.js";
+import { TemplateItem } from "./TemplateItem.js";
+const GalleryContainer = makeDecoratable("TemplateGalleryContainer", props => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
 });
-var GalleryList = (0, _appAdmin.makeDecoratable)("TemplateGalleryList", function (props) {
-  return /*#__PURE__*/_react.default.createElement(DefaultGalleryList, null, 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 GalleryList = makeDecoratable("TemplateGalleryList", props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "gap-md flex flex-wrap"
+  }, props.children);
 });
-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, {
-    onClose: props.onClose
-  }));
+const Gallery = makeDecoratable("TemplateGallery", props => {
+  const {
+    field
+  } = useModelField();
+  const templates = props.templates || field.settings?.templates || [];
+  return /*#__PURE__*/React.createElement(GalleryContainer, null, /*#__PURE__*/React.createElement(GalleryList, null, templates.map(template => /*#__PURE__*/React.createElement(TemplateItem, {
+    key: template.id,
+    template: template,
+    onTemplate: props.onTemplate
+  }))));
 });
 function withShouldRender(Component) {
-  return (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,11 +37,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),
-  Close: withShouldRender(CloseGallery)
+  Item: withShouldRender(TemplateItem)
 });
 
 //# sourceMappingURL=TemplateGallery.js.map

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","makeDecoratable","withDecoratorFactory","useModel","useModelField","TemplateItem","GalleryContainer","props","createElement","Fragment","children","GalleryList","className","Gallery","field","templates","settings","map","template","key","id","onTemplate","withShouldRender","Component","decoratorProps","model","modelIds","length","includes","modelId","TemplateGallery","Object","assign","Container","List","Item"],"sources":["TemplateGallery.tsx"],"sourcesContent":["import React from \"react\";\nimport type { DecoratableComponent } from \"@webiny/app-admin\";\nimport { makeDecoratable, withDecoratorFactory } from \"@webiny/app-admin\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { useModel, useModelField } from \"~/admin/hooks/index.js\";\nimport { TemplateItem } from \"./TemplateItem.js\";\n\nexport interface TemplateGalleryContainerProps {\n    children: React.ReactNode;\n}\n\nconst GalleryContainer = makeDecoratable(\n    \"TemplateGalleryContainer\",\n    (props: TemplateGalleryContainerProps) => {\n        return <>{props.children}</>;\n    }\n);\n\nexport interface TemplateGalleryListProps {\n    children: React.ReactNode;\n}\n\nconst GalleryList = makeDecoratable(\"TemplateGalleryList\", (props: TemplateGalleryListProps) => {\n    return <div className={\"gap-md flex flex-wrap\"}>{props.children}</div>;\n});\n\nexport interface TemplateGalleryProps {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n    onClose: () => void;\n    templates?: CmsDynamicZoneTemplate[];\n}\n\nconst Gallery = makeDecoratable(\"TemplateGallery\", (props: TemplateGalleryProps) => {\n    const { field } = useModelField();\n    const templates = props.templates || field.settings?.templates || [];\n\n    return (\n        <GalleryContainer>\n            <GalleryList>\n                {templates.map(template => (\n                    <TemplateItem\n                        key={template.id}\n                        template={template}\n                        onTemplate={props.onTemplate}\n                    />\n                ))}\n            </GalleryList>\n        </GalleryContainer>\n    );\n});\n\nexport type ShouldRender = { modelIds?: string[] };\n\nfunction withShouldRender<T extends DecoratableComponent>(Component: T) {\n    return withDecoratorFactory<ShouldRender>()(Component, decoratorProps => {\n        const { model } = useModel();\n\n        if (decoratorProps?.modelIds?.length && !decoratorProps.modelIds.includes(model.modelId)) {\n            return false;\n        }\n\n        return true;\n    });\n}\n\n/**\n * We're wrapping each component with `withShouldRender`, because they're all decoratable, and `withShouldRender` attaches a\n * conditional decorator, which optionally takes a `modelIds` prop, so you can control on which models that component will be decorated.\n */\nexport const TemplateGallery = Object.assign(withShouldRender(Gallery), {\n    Container: withShouldRender(GalleryContainer),\n    List: withShouldRender(GalleryList),\n    Item: withShouldRender(TemplateItem)\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,EAAEC,oBAAoB,QAAQ,mBAAmB;AAEzE,SAASC,QAAQ,EAAEC,aAAa;AAChC,SAASC,YAAY;AAMrB,MAAMC,gBAAgB,GAAGL,eAAe,CACpC,0BAA0B,EACzBM,KAAoC,IAAK;EACtC,oBAAOP,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,QAAGF,KAAK,CAACG,QAAW,CAAC;AAChC,CACJ,CAAC;AAMD,MAAMC,WAAW,GAAGV,eAAe,CAAC,qBAAqB,EAAGM,KAA+B,IAAK;EAC5F,oBAAOP,KAAA,CAAAQ,aAAA;IAAKI,SAAS,EAAE;EAAwB,GAAEL,KAAK,CAACG,QAAc,CAAC;AAC1E,CAAC,CAAC;AAQF,MAAMG,OAAO,GAAGZ,eAAe,CAAC,iBAAiB,EAAGM,KAA2B,IAAK;EAChF,MAAM;IAAEO;EAAM,CAAC,GAAGV,aAAa,CAAC,CAAC;EACjC,MAAMW,SAAS,GAAGR,KAAK,CAACQ,SAAS,IAAID,KAAK,CAACE,QAAQ,EAAED,SAAS,IAAI,EAAE;EAEpE,oBACIf,KAAA,CAAAQ,aAAA,CAACF,gBAAgB,qBACbN,KAAA,CAAAQ,aAAA,CAACG,WAAW,QACPI,SAAS,CAACE,GAAG,CAACC,QAAQ,iBACnBlB,KAAA,CAAAQ,aAAA,CAACH,YAAY;IACTc,GAAG,EAAED,QAAQ,CAACE,EAAG;IACjBF,QAAQ,EAAEA,QAAS;IACnBG,UAAU,EAAEd,KAAK,CAACc;EAAW,CAChC,CACJ,CACQ,CACC,CAAC;AAE3B,CAAC,CAAC;AAIF,SAASC,gBAAgBA,CAAiCC,SAAY,EAAE;EACpE,OAAOrB,oBAAoB,CAAe,CAAC,CAACqB,SAAS,EAAEC,cAAc,IAAI;IACrE,MAAM;MAAEC;IAAM,CAAC,GAAGtB,QAAQ,CAAC,CAAC;IAE5B,IAAIqB,cAAc,EAAEE,QAAQ,EAAEC,MAAM,IAAI,CAACH,cAAc,CAACE,QAAQ,CAACE,QAAQ,CAACH,KAAK,CAACI,OAAO,CAAC,EAAE;MACtF,OAAO,KAAK;IAChB;IAEA,OAAO,IAAI;EACf,CAAC,CAAC;AACN;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGC,MAAM,CAACC,MAAM,CAACV,gBAAgB,CAACT,OAAO,CAAC,EAAE;EACpEoB,SAAS,EAAEX,gBAAgB,CAAChB,gBAAgB,CAAC;EAC7C4B,IAAI,EAAEZ,gBAAgB,CAACX,WAAW,CAAC;EACnCwB,IAAI,EAAEb,gBAAgB,CAACjB,YAAY;AACvC,CAAC,CAAC","ignoreList":[]}

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

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

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

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

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","normalizeIcon","TemplateIcon","icon","size","style","faIcon","createElement","className"],"sources":["TemplateIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FontAwesomeIconProps } from \"@fortawesome/react-fontawesome\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { normalizeIcon } from \"~/utils/normalizeIcon.js\";\n\ninterface TemplateIconProps {\n    icon: string;\n    size?: FontAwesomeIconProps[\"size\"];\n    style?: React.CSSProperties;\n}\n\nexport const TemplateIcon = ({ icon, size, style }: TemplateIconProps) => {\n    const faIcon = normalizeIcon(icon);\n\n    return faIcon ? (\n        <FontAwesomeIcon\n            className={\"text-neutral-xstrong\"}\n            icon={faIcon}\n            size={size}\n            style={style}\n        />\n    ) : null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,aAAa;AAQtB,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC,IAAI;EAAEC,IAAI;EAAEC;AAAyB,CAAC,KAAK;EACtE,MAAMC,MAAM,GAAGL,aAAa,CAACE,IAAI,CAAC;EAElC,OAAOG,MAAM,gBACTP,KAAA,CAAAQ,aAAA,CAACP,eAAe;IACZQ,SAAS,EAAE,sBAAuB;IAClCL,IAAI,EAAEG,MAAO;IACbF,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA;EAAM,CAChB,CAAC,GACF,IAAI;AACZ,CAAC","ignoreList":[]}

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

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