@webiny/app-headless-cms 0.0.0-unstable.496cf268ac → 0.0.0-unstable.606fc9c866

package/admin/components/ContentEntryForm/useRenderPlugins.d.ts

@@ -1,2 +1 @@
-import { CmsEditorFieldRendererPlugin } from "../../../types";
-export declare function useRenderPlugins(): CmsEditorFieldRendererPlugin[];
+export declare function useRenderPlugins(): import("../../../types").CmsModelFieldRendererPlugin[];

package/admin/components/Dialog.js

@@ -24,5 +24,5 @@ Object.keys(_Dialog).forEach(function (key) {
 var Dialog = /*#__PURE__*/(0, _styled.default)(_Dialog.Dialog, {
   label: "Dialog",
   target: "e1q5k1p00"
-})(".mdc-dialog__surface{width:600px;min-width:600px;overflow:initial;}.mdc-dialog__content{overflow:initial !important;.mdc-list:first-of-type{padding:0;}}");
+})(".mdc-dialog__surface{width:600px;min-width:600px;overflow:initial;}.mdc-dialog__content{overflow:auto;.mdc-list:first-of-type{padding:0;}}");
 exports.Dialog = Dialog;

package/admin/components/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["Dialog","styled","BaseDialog"],"sources":["Dialog.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Dialog as BaseDialog } from \"@webiny/ui/Dialog\";\nexport * from \"@webiny/ui/Dialog\";\n\nexport const Dialog = styled(BaseDialog)`\n    .mdc-dialog__surface {\n        width: 600px;\n        min-width: 600px;\n        overflow: initial;\n    }\n\n    .mdc-dialog__content {\n        overflow: initial !important;\n        .mdc-list:first-of-type {\n            padding: 0;\n        }\n    }\n`;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEO,IAAMA,MAAM,oBAAGC,eAAM,EAACC,cAAU;EAAA;EAAA;AAAA,8JAatC;AAAC"}
+{"version":3,"names":["Dialog","styled","BaseDialog"],"sources":["Dialog.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Dialog as BaseDialog } from \"@webiny/ui/Dialog\";\nexport * from \"@webiny/ui/Dialog\";\n\nexport const Dialog = styled(BaseDialog)`\n    .mdc-dialog__surface {\n        width: 600px;\n        min-width: 600px;\n        overflow: initial;\n    }\n\n    .mdc-dialog__content {\n        overflow: auto;\n        .mdc-list:first-of-type {\n            padding: 0;\n        }\n    }\n`;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEO,IAAMA,MAAM,oBAAGC,eAAM,EAACC,cAAU;EAAA;EAAA;AAAA,gJAatC;AAAC"}

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.js

@@ -74,7 +74,7 @@ var GeneralTab = function GeneralTab() {
     });
   }
   var predefinedValuesEnabled = (0, _react.useMemo)(function () {
-    return fieldPlugin.field.allowPredefinedValues && typeof fieldPlugin.field.renderPredefinedValues === "function";
+    return (fieldPlugin.field.allowPredefinedValues || false) && typeof fieldPlugin.field.renderPredefinedValues === "function";
   }, [field.fieldId]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.js.map

@@ -1 +1 @@
-{"version":3,"names":["GeneralTab","form","useForm","useModelField","field","fieldPlugin","inputRef","useRef","useModelEditor","contentModel","data","useModelFieldEditor","getField","useEffect","setTimeout","current","focus","afterChangeLabel","useCallback","value","setValue","beforeChangeFieldId","baseOnChange","trim","fieldIdValidator","fieldId","toLowerCase","Error","uniqueFieldIdValidator","existingField","id","additionalSettings","renderSettings","predefinedValuesEnabled","useMemo","allowPredefinedValues","renderPredefinedValues","validation","create","multipleValuesLabel","allowMultipleValues","tags"],"sources":["GeneralTab.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport { camelCase } from \"lodash\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { validation } from \"@webiny/validation\";\nimport { Tags } from \"@webiny/ui/Tags\";\nimport { useForm, Bind } from \"@webiny/form\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor\";\nimport { useModelEditor } from \"~/admin/hooks\";\nimport { useModelField } from \"~/admin/hooks\";\n\nconst GeneralTab = () => {\n    const form = useForm();\n    const { field, fieldPlugin } = useModelField();\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const { data: contentModel } = useModelEditor();\n    const { getField } = useModelFieldEditor();\n\n    // Had problems with auto-focusing the \"label\" field. A couple of comments on this.\n    // 1. It's probably caused by the Tabs component which wraps this component.\n    // 2. It seems that the \"autoFocus\" prop on the Input doesn't work. I can't see it attached in the actual DOM.\n    // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design\n    //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then\n    //    it seems it's behaving correctly. ¯\\_(ツ)_/¯\n    useEffect(() => {\n        setTimeout(() => {\n            if (!inputRef.current) {\n                return;\n            }\n            inputRef.current.focus();\n        }, /* The value of 400 was determined by manual testing. */ 400);\n    }, []);\n\n    const afterChangeLabel = useCallback((value: string) => {\n        form.setValue(\"fieldId\", camelCase(value));\n    }, []);\n\n    const beforeChangeFieldId = useCallback(\n        (value: string, baseOnChange: (value: string) => void) => {\n            baseOnChange(value.trim());\n        },\n        []\n    );\n\n    const fieldIdValidator = useCallback(fieldId => {\n        if (fieldId.trim().toLowerCase() !== \"id\") {\n            return true;\n        }\n\n        throw new Error(`Cannot use \"id\" as Field ID.`);\n    }, []);\n\n    const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n        const existingField = getField({ fieldId });\n        if (!existingField) {\n            return false;\n        }\n\n        if (existingField.id === field.id) {\n            return true;\n        }\n        throw new Error(\"Please enter a unique Field ID.\");\n    }, []);\n\n    let additionalSettings: React.ReactNode | null = null;\n    if (typeof fieldPlugin.field.renderSettings === \"function\") {\n        additionalSettings = fieldPlugin.field.renderSettings({\n            afterChangeLabel,\n            uniqueFieldIdValidator,\n            contentModel\n        });\n    }\n\n    const predefinedValuesEnabled = useMemo(\n        (): boolean =>\n            fieldPlugin.field.allowPredefinedValues &&\n            typeof fieldPlugin.field.renderPredefinedValues === \"function\",\n        [field.fieldId]\n    );\n\n    return (\n        <>\n            <Grid>\n                <Cell span={6}>\n                    <Bind\n                        name={\"label\"}\n                        validators={validation.create(\"required\")}\n                        afterChange={(value: string) => {\n                            if (field.id) {\n                                return;\n                            }\n                            afterChangeLabel(value);\n                        }}\n                    >\n                        <Input\n                            label={\"Label\"}\n                            inputRef={inputRef}\n                            data-testid=\"cms.editor.field.settings.general.label\"\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind\n                        name={\"fieldId\"}\n                        validators={[\n                            validation.create(\"required\"),\n                            uniqueFieldIdValidator,\n                            fieldIdValidator\n                        ]}\n                        beforeChange={beforeChangeFieldId}\n                    >\n                        <Input\n                            label={\"Field ID\"}\n                            data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={6}>\n                    <Bind name={\"multipleValues\"}>\n                        <Switch\n                            label={fieldPlugin.field.multipleValuesLabel}\n                            disabled={!fieldPlugin.field.allowMultipleValues}\n                            data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind name={\"predefinedValues.enabled\"}>\n                        <Switch\n                            label={\"Use predefined values\"}\n                            disabled={!predefinedValuesEnabled}\n                            data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={12}>\n                    <Bind name={\"helpText\"}>\n                        <Input\n                            label={\"Help text\"}\n                            description={\"Help text (optional)\"}\n                            data-testid={`cms.editor.field.settings.general.helptext`}\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={12}>\n                    <Bind name={\"tags\"}>\n                        <Tags\n                            label={\"Tags\"}\n                            protectedTags={fieldPlugin.field.tags}\n                            description={\"Field tags (optional)\"}\n                            data-testid={`cms.editor.field.settings.general.tags`}\n                        />\n                    </Bind>\n                </Cell>\n            </Grid>\n            {additionalSettings}\n        </>\n    );\n};\n\nexport default GeneralTab;\n"],"mappings":"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"}
+{"version":3,"names":["GeneralTab","form","useForm","useModelField","field","fieldPlugin","inputRef","useRef","useModelEditor","contentModel","data","useModelFieldEditor","getField","useEffect","setTimeout","current","focus","afterChangeLabel","useCallback","value","setValue","beforeChangeFieldId","baseOnChange","trim","fieldIdValidator","fieldId","toLowerCase","Error","uniqueFieldIdValidator","existingField","id","additionalSettings","renderSettings","predefinedValuesEnabled","useMemo","allowPredefinedValues","renderPredefinedValues","validation","create","multipleValuesLabel","allowMultipleValues","tags"],"sources":["GeneralTab.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport { camelCase } from \"lodash\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { validation } from \"@webiny/validation\";\nimport { Tags } from \"@webiny/ui/Tags\";\nimport { useForm, Bind } from \"@webiny/form\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor\";\nimport { useModelEditor } from \"~/admin/hooks\";\nimport { useModelField } from \"~/admin/hooks\";\n\nconst GeneralTab = () => {\n    const form = useForm();\n    const { field, fieldPlugin } = useModelField();\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const { data: contentModel } = useModelEditor();\n    const { getField } = useModelFieldEditor();\n\n    // Had problems with auto-focusing the \"label\" field. A couple of comments on this.\n    // 1. It's probably caused by the Tabs component which wraps this component.\n    // 2. It seems that the \"autoFocus\" prop on the Input doesn't work. I can't see it attached in the actual DOM.\n    // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design\n    //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then\n    //    it seems it's behaving correctly. ¯\\_(ツ)_/¯\n    useEffect(() => {\n        setTimeout(() => {\n            if (!inputRef.current) {\n                return;\n            }\n            inputRef.current.focus();\n        }, /* The value of 400 was determined by manual testing. */ 400);\n    }, []);\n\n    const afterChangeLabel = useCallback((value: string) => {\n        form.setValue(\"fieldId\", camelCase(value));\n    }, []);\n\n    const beforeChangeFieldId = useCallback(\n        (value: string, baseOnChange: (value: string) => void) => {\n            baseOnChange(value.trim());\n        },\n        []\n    );\n\n    const fieldIdValidator = useCallback(fieldId => {\n        if (fieldId.trim().toLowerCase() !== \"id\") {\n            return true;\n        }\n\n        throw new Error(`Cannot use \"id\" as Field ID.`);\n    }, []);\n\n    const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n        const existingField = getField({ fieldId });\n        if (!existingField) {\n            return false;\n        }\n\n        if (existingField.id === field.id) {\n            return true;\n        }\n        throw new Error(\"Please enter a unique Field ID.\");\n    }, []);\n\n    let additionalSettings: React.ReactNode | null = null;\n    if (typeof fieldPlugin.field.renderSettings === \"function\") {\n        additionalSettings = fieldPlugin.field.renderSettings({\n            afterChangeLabel,\n            uniqueFieldIdValidator,\n            contentModel\n        });\n    }\n\n    const predefinedValuesEnabled = useMemo(\n        (): boolean =>\n            (fieldPlugin.field.allowPredefinedValues || false) &&\n            typeof fieldPlugin.field.renderPredefinedValues === \"function\",\n        [field.fieldId]\n    );\n\n    return (\n        <>\n            <Grid>\n                <Cell span={6}>\n                    <Bind\n                        name={\"label\"}\n                        validators={validation.create(\"required\")}\n                        afterChange={(value: string) => {\n                            if (field.id) {\n                                return;\n                            }\n                            afterChangeLabel(value);\n                        }}\n                    >\n                        <Input\n                            label={\"Label\"}\n                            inputRef={inputRef}\n                            data-testid=\"cms.editor.field.settings.general.label\"\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind\n                        name={\"fieldId\"}\n                        validators={[\n                            validation.create(\"required\"),\n                            uniqueFieldIdValidator,\n                            fieldIdValidator\n                        ]}\n                        beforeChange={beforeChangeFieldId}\n                    >\n                        <Input\n                            label={\"Field ID\"}\n                            data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={6}>\n                    <Bind name={\"multipleValues\"}>\n                        <Switch\n                            label={fieldPlugin.field.multipleValuesLabel}\n                            disabled={!fieldPlugin.field.allowMultipleValues}\n                            data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind name={\"predefinedValues.enabled\"}>\n                        <Switch\n                            label={\"Use predefined values\"}\n                            disabled={!predefinedValuesEnabled}\n                            data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={12}>\n                    <Bind name={\"helpText\"}>\n                        <Input\n                            label={\"Help text\"}\n                            description={\"Help text (optional)\"}\n                            data-testid={`cms.editor.field.settings.general.helptext`}\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={12}>\n                    <Bind name={\"tags\"}>\n                        <Tags\n                            label={\"Tags\"}\n                            protectedTags={fieldPlugin.field.tags}\n                            description={\"Field tags (optional)\"}\n                            data-testid={`cms.editor.field.settings.general.tags`}\n                        />\n                    </Bind>\n                </Cell>\n            </Grid>\n            {additionalSettings}\n        </>\n    );\n};\n\nexport default GeneralTab;\n"],"mappings":"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"}

package/admin/components/IconPicker.js

@@ -1,14 +1,16 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.IconPicker = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _emotion = require("emotion");
+var _react2 = require("@emotion/react");
 var _plugins = require("@webiny/plugins");
 var _Typography = require("@webiny/ui/Typography");
 var _reactVirtualized = require("react-virtualized");
@@ -17,6 +19,7 @@ var _DelayedOnChange = _interopRequireDefault(require("./DelayedOnChange"));
 var _Menu = require("@webiny/ui/Menu");
 var _Input = require("@webiny/ui/Input");
 var _FormElementMessage = require("@webiny/ui/FormElementMessage");
+var _templateObject;
 /**
  * Controls the helper text below the checkbox.
  * @type {string}
@@ -25,6 +28,7 @@ var iconPickerLabel = /*#__PURE__*/(0, _emotion.css)({
   marginBottom: 5,
   marginLeft: 2
 }, "label:iconPickerLabel;");
+var globalStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    #rmwcPortal > .mdc-menu-surface {\n        z-index: 1000;\n    }\n"])));
 var MenuWrapper = /*#__PURE__*/(0, _emotion.css)("color:var(--mdc-theme-text-secondary-on-background);background-color:var(--mdc-theme-on-background);border-bottom:1px solid var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,0.54));padding:16px 8px;cursor:pointer;:hover{border-bottom:1px solid rgba(0,0,0,1);}label:MenuWrapper;");
 var NoResultWrapper = /*#__PURE__*/(0, _emotion.css)({
   width: 640,
@@ -82,20 +86,17 @@ var searchInput = /*#__PURE__*/(0, _emotion.css)({
     padding: "20px 12px 20px"
   }
 }, "label:searchInput;");
-var useState = _react.default.useState,
-  useCallback = _react.default.useCallback,
-  useMemo = _react.default.useMemo;
 var IconPicker = function IconPicker(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
     label = _ref.label,
     description = _ref.description,
     validation = _ref.validation;
-  var _useState = useState(""),
+  var _useState = (0, _react.useState)(""),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     filter = _useState2[0],
     setFilter = _useState2[1];
-  var _useState3 = useState(false),
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     mustRenderGrid = _useState4[0],
     setMustRenderGrid = _useState4[1];
@@ -107,22 +108,22 @@ var IconPicker = function IconPicker(_ref) {
       }
     }, 50);
   }, [mustRenderGrid]);
-  var onFilterChange = useCallback(function (value, cb) {
+  var onFilterChange = (0, _react.useCallback)(function (value, cb) {
     setFilter(value);
     cb();
   }, [filter]);
-  var allIcons = useMemo(function () {
+  var allIcons = (0, _react.useMemo)(function () {
     var iconPlugins = _plugins.plugins.byType("cms-icons");
     return iconPlugins.reduce(function (icons, pl) {
       return icons.concat(pl.getIcons());
     }, []);
   }, []);
-  var icons = useMemo(function () {
+  var icons = (0, _react.useMemo)(function () {
     return filter ? allIcons.filter(function (ic) {
       return ic.name.includes(filter);
     }) : allIcons;
   }, [filter]);
-  var renderCell = useCallback(function (_ref2) {
+  var renderCell = (0, _react.useCallback)(function (_ref2) {
     var closeMenu = _ref2.closeMenu;
     return function renderCell(_ref3) {
       var columnIndex = _ref3.columnIndex,
@@ -151,9 +152,11 @@ var IconPicker = function IconPicker(_ref) {
       }, item.name));
     };
   }, [icons]);
-  var renderGrid = useCallback(function (_ref4) {
+  var renderGrid = (0, _react.useCallback)(function (_ref4) {
     var closeMenu = _ref4.closeMenu;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DelayedOnChange.default, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Global, {
+      styles: globalStyles
+    }), /*#__PURE__*/_react.default.createElement(_DelayedOnChange.default, {
       value: filter,
       onChange: onFilterChange
     }, function (_ref5) {
@@ -198,6 +201,7 @@ var IconPicker = function IconPicker(_ref) {
     onClose: function onClose() {
       return setMustRenderGrid(false);
     },
+    renderToPortal: true,
     handle: /*#__PURE__*/_react.default.createElement("div", {
       className: MenuWrapper
     }, /*#__PURE__*/_react.default.createElement("div", {

package/admin/components/IconPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconPickerLabel","css","marginBottom","marginLeft","MenuWrapper","NoResultWrapper","width","color","padding","COLUMN_COUNT","gridItem","display","flexDirection","justifyContent","boxSizing","paddingTop","alignItems","textAlign","cursor","transform","borderRadius","transition","boxShadow","content","position","top","left","height","zIndex","opacity","backgroundColor","grid","pickIcon","searchInput","input","useState","React","useCallback","useMemo","IconPicker","value","onChange","label","description","validation","filter","setFilter","mustRenderGrid","setMustRenderGrid","inputRef","useRef","useEffect","setTimeout","current","focus","onFilterChange","cb","allIcons","iconPlugins","plugins","byType","reduce","icons","pl","concat","getIcons","ic","name","includes","renderCell","closeMenu","columnIndex","key","rowIndex","style","item","id","join","renderGrid","length","Math","ceil","fontAwesomeIconValue","split","validationIsValid","isValid","validationMessage","message"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { css } from \"emotion\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Grid } from \"react-virtualized\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport DelayedOnChange from \"./DelayedOnChange\";\nimport { Menu } from \"@webiny/ui/Menu\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { CmsIcon, CmsIconsPlugin } from \"~/types\";\nimport { FormComponentProps } from \"@webiny/ui/types\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { GridCellProps } from \"react-virtualized/dist/es/Grid\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst iconPickerLabel = css({ marginBottom: 5, marginLeft: 2 });\n\nconst MenuWrapper = css`\n    color: var(--mdc-theme-text-secondary-on-background);\n    background-color: var(--mdc-theme-on-background);\n    border-bottom: 1px solid var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));\n    padding: 16px 8px;\n    cursor: pointer;\n    :hover {\n        border-bottom: 1px solid rgba(0, 0, 0, 1);\n    }\n`;\n\nconst NoResultWrapper = css({\n    width: 640,\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    padding: \"16px 12px\"\n});\n\nconst COLUMN_COUNT = 6;\n\nconst gridItem = css({\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"flex-start\",\n    boxSizing: \"border-box\",\n    paddingTop: 15,\n    alignItems: \"center\",\n    textAlign: \"center\",\n    cursor: \"pointer\",\n    transform: \"translateZ(0)\",\n    borderRadius: 2,\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    transition: \"all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n    \"&::after\": {\n        boxShadow: \"0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)\",\n        transition: \"opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n        content: '\"\"',\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        zIndex: -1,\n        opacity: 0\n    },\n    \"&:hover\": {\n        backgroundColor: \"var(--mdc-theme-background)\",\n        color: \"var(--mdc-theme-text-primary-on-background)\",\n        \"&::after\": {\n            opacity: 1\n        }\n    },\n    \">svg\": {\n        width: 42,\n        marginBottom: 5\n    }\n});\n\nconst grid = css({\n    padding: 20\n});\n\nconst pickIcon = css({\n    width: 50,\n    textAlign: \"center\",\n    cursor: \"pointer\"\n});\n\nconst searchInput = css({\n    input: {\n        padding: \"20px 12px 20px\"\n    }\n});\n\nconst { useState, useCallback, useMemo } = React;\n\nexport interface IconPickerProps extends FormComponentProps {\n    label?: React.ReactNode;\n    description?: React.ReactNode;\n}\n\nexport const IconPicker: React.FC<IconPickerProps> = ({\n    value,\n    onChange,\n    label,\n    description,\n    validation\n}) => {\n    const [filter, setFilter] = useState(\"\");\n    const [mustRenderGrid, setMustRenderGrid] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (mustRenderGrid && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [mustRenderGrid]);\n\n    const onFilterChange = useCallback(\n        (value, cb) => {\n            setFilter(value);\n            cb();\n        },\n        [filter]\n    );\n\n    const allIcons: CmsIcon[] = useMemo(() => {\n        const iconPlugins = plugins.byType<CmsIconsPlugin>(\"cms-icons\");\n        return iconPlugins.reduce((icons: Array<CmsIcon>, pl) => {\n            return icons.concat(pl.getIcons());\n        }, []);\n    }, []);\n\n    const icons = useMemo(() => {\n        return filter ? allIcons.filter(ic => ic.name.includes(filter)) : allIcons;\n    }, [filter]);\n\n    const renderCell = useCallback(\n        ({ closeMenu }) => {\n            return function renderCell({\n                columnIndex,\n                key,\n                rowIndex,\n                style\n            }: GridCellProps): React.ReactNode {\n                const item = icons[rowIndex * COLUMN_COUNT + columnIndex];\n                if (!item) {\n                    return null;\n                }\n\n                return (\n                    <div\n                        key={key}\n                        style={style}\n                        className={gridItem}\n                        onClick={() => {\n                            if (onChange) {\n                                onChange(item.id.join(\"/\"));\n                            }\n                            closeMenu();\n                        }}\n                    >\n                        <FontAwesomeIcon icon={item.id} size={\"2x\"} />\n                        <Typography use={\"body2\"}>{item.name}</Typography>\n                    </div>\n                );\n            };\n        },\n        [icons]\n    );\n\n    const renderGrid = useCallback(\n        ({ closeMenu }) => {\n            return (\n                <>\n                    <DelayedOnChange value={filter} onChange={onFilterChange}>\n                        {({ value, onChange }) => (\n                            <Input\n                                inputRef={inputRef}\n                                className={searchInput}\n                                value={value}\n                                onChange={onChange}\n                                placeholder={\"Search icons...\"}\n                            />\n                        )}\n                    </DelayedOnChange>\n                    {icons.length === 0 ? (\n                        <div className={NoResultWrapper}>\n                            <Typography use=\"body1\">No results found.</Typography>\n                        </div>\n                    ) : (\n                        <Grid\n                            className={grid}\n                            cellRenderer={renderCell({ closeMenu })}\n                            columnCount={COLUMN_COUNT}\n                            columnWidth={100}\n                            height={440}\n                            rowCount={Math.ceil(icons.length / COLUMN_COUNT)}\n                            rowHeight={100}\n                            width={640}\n                        />\n                    )}\n                </>\n            );\n        },\n        [icons]\n    );\n\n    const fontAwesomeIconValue: any =\n        typeof value === \"string\" && value.includes(\"/\") ? value.split(\"/\") : [\"fas\", \"star\"];\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    return (\n        <>\n            {label && (\n                <div className={iconPickerLabel}>\n                    <Typography use={\"body1\"}>{label}</Typography>\n                </div>\n            )}\n\n            <Menu\n                onOpen={() => setMustRenderGrid(true)}\n                onClose={() => setMustRenderGrid(false)}\n                handle={\n                    <div className={MenuWrapper}>\n                        <div className={pickIcon}>\n                            <FontAwesomeIcon icon={fontAwesomeIconValue} size={\"2x\"} />\n                        </div>\n                    </div>\n                }\n            >\n                {mustRenderGrid && renderGrid}\n            </Menu>\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["iconPickerLabel","css","marginBottom","marginLeft","globalStyles","reactCss","MenuWrapper","NoResultWrapper","width","color","padding","COLUMN_COUNT","gridItem","display","flexDirection","justifyContent","boxSizing","paddingTop","alignItems","textAlign","cursor","transform","borderRadius","transition","boxShadow","content","position","top","left","height","zIndex","opacity","backgroundColor","grid","pickIcon","searchInput","input","IconPicker","value","onChange","label","description","validation","useState","filter","setFilter","mustRenderGrid","setMustRenderGrid","inputRef","useRef","useEffect","setTimeout","current","focus","onFilterChange","useCallback","cb","allIcons","useMemo","iconPlugins","plugins","byType","reduce","icons","pl","concat","getIcons","ic","name","includes","renderCell","closeMenu","columnIndex","key","rowIndex","style","item","id","join","renderGrid","length","Math","ceil","fontAwesomeIconValue","split","validationIsValid","isValid","validationMessage","message"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback, useMemo } from \"react\";\nimport { css } from \"emotion\";\nimport { Global, css as reactCss } from \"@emotion/react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Grid } from \"react-virtualized\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport DelayedOnChange from \"./DelayedOnChange\";\nimport { Menu } from \"@webiny/ui/Menu\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { CmsIcon, CmsIconsPlugin } from \"~/types\";\nimport { FormComponentProps } from \"@webiny/ui/types\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { GridCellProps } from \"react-virtualized/dist/es/Grid\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst iconPickerLabel = css({ marginBottom: 5, marginLeft: 2 });\n\nconst globalStyles = reactCss`\n    #rmwcPortal > .mdc-menu-surface {\n        z-index: 1000;\n    }\n`;\n\nconst MenuWrapper = css`\n    color: var(--mdc-theme-text-secondary-on-background);\n    background-color: var(--mdc-theme-on-background);\n    border-bottom: 1px solid var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));\n    padding: 16px 8px;\n    cursor: pointer;\n    :hover {\n        border-bottom: 1px solid rgba(0, 0, 0, 1);\n    }\n`;\n\nconst NoResultWrapper = css({\n    width: 640,\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    padding: \"16px 12px\"\n});\n\nconst COLUMN_COUNT = 6;\n\nconst gridItem = css({\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"flex-start\",\n    boxSizing: \"border-box\",\n    paddingTop: 15,\n    alignItems: \"center\",\n    textAlign: \"center\",\n    cursor: \"pointer\",\n    transform: \"translateZ(0)\",\n    borderRadius: 2,\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    transition: \"all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n    \"&::after\": {\n        boxShadow: \"0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)\",\n        transition: \"opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n        content: '\"\"',\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        zIndex: -1,\n        opacity: 0\n    },\n    \"&:hover\": {\n        backgroundColor: \"var(--mdc-theme-background)\",\n        color: \"var(--mdc-theme-text-primary-on-background)\",\n        \"&::after\": {\n            opacity: 1\n        }\n    },\n    \">svg\": {\n        width: 42,\n        marginBottom: 5\n    }\n});\n\nconst grid = css({\n    padding: 20\n});\n\nconst pickIcon = css({\n    width: 50,\n    textAlign: \"center\",\n    cursor: \"pointer\"\n});\n\nconst searchInput = css({\n    input: {\n        padding: \"20px 12px 20px\"\n    }\n});\n\nexport interface IconPickerProps extends FormComponentProps {\n    label?: React.ReactNode;\n    description?: React.ReactNode;\n}\n\nexport const IconPicker: React.FC<IconPickerProps> = ({\n    value,\n    onChange,\n    label,\n    description,\n    validation\n}) => {\n    const [filter, setFilter] = useState(\"\");\n    const [mustRenderGrid, setMustRenderGrid] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (mustRenderGrid && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [mustRenderGrid]);\n\n    const onFilterChange = useCallback(\n        (value, cb) => {\n            setFilter(value);\n            cb();\n        },\n        [filter]\n    );\n\n    const allIcons: CmsIcon[] = useMemo(() => {\n        const iconPlugins = plugins.byType<CmsIconsPlugin>(\"cms-icons\");\n        return iconPlugins.reduce((icons: Array<CmsIcon>, pl) => {\n            return icons.concat(pl.getIcons());\n        }, []);\n    }, []);\n\n    const icons = useMemo(() => {\n        return filter ? allIcons.filter(ic => ic.name.includes(filter)) : allIcons;\n    }, [filter]);\n\n    const renderCell = useCallback(\n        ({ closeMenu }) => {\n            return function renderCell({\n                columnIndex,\n                key,\n                rowIndex,\n                style\n            }: GridCellProps): React.ReactNode {\n                const item = icons[rowIndex * COLUMN_COUNT + columnIndex];\n                if (!item) {\n                    return null;\n                }\n\n                return (\n                    <div\n                        key={key}\n                        style={style}\n                        className={gridItem}\n                        onClick={() => {\n                            if (onChange) {\n                                onChange(item.id.join(\"/\"));\n                            }\n                            closeMenu();\n                        }}\n                    >\n                        <FontAwesomeIcon icon={item.id} size={\"2x\"} />\n                        <Typography use={\"body2\"}>{item.name}</Typography>\n                    </div>\n                );\n            };\n        },\n        [icons]\n    );\n\n    const renderGrid = useCallback(\n        ({ closeMenu }) => {\n            return (\n                <>\n                    <Global styles={globalStyles} />\n                    <DelayedOnChange value={filter} onChange={onFilterChange}>\n                        {({ value, onChange }) => (\n                            <Input\n                                inputRef={inputRef}\n                                className={searchInput}\n                                value={value}\n                                onChange={onChange}\n                                placeholder={\"Search icons...\"}\n                            />\n                        )}\n                    </DelayedOnChange>\n                    {icons.length === 0 ? (\n                        <div className={NoResultWrapper}>\n                            <Typography use=\"body1\">No results found.</Typography>\n                        </div>\n                    ) : (\n                        <Grid\n                            className={grid}\n                            cellRenderer={renderCell({ closeMenu })}\n                            columnCount={COLUMN_COUNT}\n                            columnWidth={100}\n                            height={440}\n                            rowCount={Math.ceil(icons.length / COLUMN_COUNT)}\n                            rowHeight={100}\n                            width={640}\n                        />\n                    )}\n                </>\n            );\n        },\n        [icons]\n    );\n\n    const fontAwesomeIconValue: any =\n        typeof value === \"string\" && value.includes(\"/\") ? value.split(\"/\") : [\"fas\", \"star\"];\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    return (\n        <>\n            {label && (\n                <div className={iconPickerLabel}>\n                    <Typography use={\"body1\"}>{label}</Typography>\n                </div>\n            )}\n\n            <Menu\n                onOpen={() => setMustRenderGrid(true)}\n                onClose={() => setMustRenderGrid(false)}\n                renderToPortal={true}\n                handle={\n                    <div className={MenuWrapper}>\n                        <div className={pickIcon}>\n                            <FontAwesomeIcon icon={fontAwesomeIconValue} size={\"2x\"} />\n                        </div>\n                    </div>\n                }\n            >\n                {mustRenderGrid && renderGrid}\n            </Menu>\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </>\n    );\n};\n"],"mappings":"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"}

package/admin/hooks/index.d.ts

@@ -10,3 +10,4 @@ export { useModelEditor } from "../components/ContentModelEditor";
 export { useModelField } from "../components/ModelFieldProvider";
 export { useModelFieldEditor } from "../components/FieldEditor";
 export * from "./useContentModels";
+export * from "../views/contentEntries/hooks";

package/admin/hooks/index.js

@@ -109,4 +109,16 @@ Object.keys(_useContentModels).forEach(function (key) {
       return _useContentModels[key];
     }
   });
+});
+var _hooks = require("../views/contentEntries/hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _hooks[key];
+    }
+  });
 });

package/admin/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as useCms } from \"./useCms\";\nexport { default as useQuery } from \"./useQuery\";\nexport * from \"./useQueryLocale\";\nexport { default as useLazyQuery } from \"./useLazyQuery\";\nexport { default as useMutation } from \"./useMutation\";\nexport { default as useApolloClient } from \"./useApolloClient\";\nexport { default as usePermission } from \"./usePermission\";\nexport { useModel } from \"../components/ModelProvider\";\nexport { useModelEditor } from \"../components/ContentModelEditor\";\nexport { useModelField } from \"../components/ModelFieldProvider\";\nexport { useModelFieldEditor } from \"../components/FieldEditor\";\nexport * from \"./useContentModels\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as useCms } from \"./useCms\";\nexport { default as useQuery } from \"./useQuery\";\nexport * from \"./useQueryLocale\";\nexport { default as useLazyQuery } from \"./useLazyQuery\";\nexport { default as useMutation } from \"./useMutation\";\nexport { default as useApolloClient } from \"./useApolloClient\";\nexport { default as usePermission } from \"./usePermission\";\nexport { useModel } from \"../components/ModelProvider\";\nexport { useModelEditor } from \"../components/ContentModelEditor\";\nexport { useModelField } from \"../components/ModelFieldProvider\";\nexport { useModelFieldEditor } from \"../components/FieldEditor\";\nexport * from \"./useContentModels\";\nexport * from \"~/admin/views/contentEntries/hooks\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/admin/hooks/useContentModels.d.ts

@@ -1,6 +1,14 @@
 import { CmsModel } from "../../types";
+/**
+ * @deprecated Use `useModels` hook instead.
+ */
 export declare const useContentModels: () => {
     models: CmsModel[];
     loading: boolean;
     error: string | null;
 };
+export declare const useModels: () => {
+    models: CmsModel[];
+    loading: boolean;
+    error: string | null;
+};

package/admin/hooks/useContentModels.js

@@ -4,10 +4,13 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useContentModels = void 0;
+exports.useModels = exports.useContentModels = void 0;
 var GQL = _interopRequireWildcard(require("../viewsGraphql"));
 var _index = require("./index");
 var _react = require("react");
+/**
+ * @deprecated Use `useModels` hook instead.
+ */
 var useContentModels = function useContentModels() {
   var _useQuery = (0, _index.useQuery)(GQL.LIST_CONTENT_MODELS),
     data = _useQuery.data,
@@ -30,4 +33,8 @@ var useContentModels = function useContentModels() {
     error: error
   };
 };
-exports.useContentModels = useContentModels;
+exports.useContentModels = useContentModels;
+var useModels = function useModels() {
+  return useContentModels();
+};
+exports.useModels = useModels;

package/admin/hooks/useContentModels.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContentModels","useQuery","GQL","LIST_CONTENT_MODELS","data","loading","apolloError","error","models","useMemo","listContentModels","message"],"sources":["useContentModels.ts"],"sourcesContent":["import * as GQL from \"~/admin/viewsGraphql\";\nimport { useQuery } from \"~/admin/hooks/index\";\nimport { ListCmsModelsQueryResponse } from \"~/admin/viewsGraphql\";\nimport { useMemo } from \"react\";\nimport { CmsModel } from \"~/types\";\n\nexport const useContentModels = () => {\n    const {\n        data,\n        loading,\n        error: apolloError\n    } = useQuery<ListCmsModelsQueryResponse>(GQL.LIST_CONTENT_MODELS);\n\n    const models = useMemo<CmsModel[]>(() => {\n        return data?.listContentModels?.data || [];\n    }, [data]);\n\n    const error = useMemo(() => {\n        if (!!apolloError) {\n            return apolloError.message;\n        }\n        return data?.listContentModels?.error?.message || null;\n    }, [apolloError]);\n\n    return {\n        models,\n        loading,\n        error\n    };\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAGO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;EAClC,gBAII,IAAAC,eAAQ,EAA6BC,GAAG,CAACC,mBAAmB,CAAC;IAH7DC,IAAI,aAAJA,IAAI;IACJC,OAAO,aAAPA,OAAO;IACAC,WAAW,aAAlBC,KAAK;EAGT,IAAMC,MAAM,GAAG,IAAAC,cAAO,EAAa,YAAM;IAAA;IACrC,OAAO,CAAAL,IAAI,aAAJA,IAAI,gDAAJA,IAAI,CAAEM,iBAAiB,0DAAvB,sBAAyBN,IAAI,KAAI,EAAE;EAC9C,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,IAAMG,KAAK,GAAG,IAAAE,cAAO,EAAC,YAAM;IAAA;IACxB,IAAI,CAAC,CAACH,WAAW,EAAE;MACf,OAAOA,WAAW,CAACK,OAAO;IAC9B;IACA,OAAO,CAAAP,IAAI,aAAJA,IAAI,iDAAJA,IAAI,CAAEM,iBAAiB,qFAAvB,uBAAyBH,KAAK,2DAA9B,uBAAgCI,OAAO,KAAI,IAAI;EAC1D,CAAC,EAAE,CAACL,WAAW,CAAC,CAAC;EAEjB,OAAO;IACHE,MAAM,EAANA,MAAM;IACNH,OAAO,EAAPA,OAAO;IACPE,KAAK,EAALA;EACJ,CAAC;AACL,CAAC;AAAC"}
+{"version":3,"names":["useContentModels","useQuery","GQL","LIST_CONTENT_MODELS","data","loading","apolloError","error","models","useMemo","listContentModels","message","useModels"],"sources":["useContentModels.ts"],"sourcesContent":["import * as GQL from \"~/admin/viewsGraphql\";\nimport { useQuery } from \"~/admin/hooks/index\";\nimport { ListCmsModelsQueryResponse } from \"~/admin/viewsGraphql\";\nimport { useMemo } from \"react\";\nimport { CmsModel } from \"~/types\";\n\n/**\n * @deprecated Use `useModels` hook instead.\n */\nexport const useContentModels = () => {\n    const {\n        data,\n        loading,\n        error: apolloError\n    } = useQuery<ListCmsModelsQueryResponse>(GQL.LIST_CONTENT_MODELS);\n\n    const models = useMemo<CmsModel[]>(() => {\n        return data?.listContentModels?.data || [];\n    }, [data]);\n\n    const error = useMemo(() => {\n        if (!!apolloError) {\n            return apolloError.message;\n        }\n        return data?.listContentModels?.error?.message || null;\n    }, [apolloError]);\n\n    return {\n        models,\n        loading,\n        error\n    };\n};\n\nexport const useModels = () => {\n    return useContentModels();\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAGA;AACA;AACA;AACO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;EAClC,gBAII,IAAAC,eAAQ,EAA6BC,GAAG,CAACC,mBAAmB,CAAC;IAH7DC,IAAI,aAAJA,IAAI;IACJC,OAAO,aAAPA,OAAO;IACAC,WAAW,aAAlBC,KAAK;EAGT,IAAMC,MAAM,GAAG,IAAAC,cAAO,EAAa,YAAM;IAAA;IACrC,OAAO,CAAAL,IAAI,aAAJA,IAAI,gDAAJA,IAAI,CAAEM,iBAAiB,0DAAvB,sBAAyBN,IAAI,KAAI,EAAE;EAC9C,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,IAAMG,KAAK,GAAG,IAAAE,cAAO,EAAC,YAAM;IAAA;IACxB,IAAI,CAAC,CAACH,WAAW,EAAE;MACf,OAAOA,WAAW,CAACK,OAAO;IAC9B;IACA,OAAO,CAAAP,IAAI,aAAJA,IAAI,iDAAJA,IAAI,CAAEM,iBAAiB,qFAAvB,uBAAyBH,KAAK,2DAA9B,uBAAgCI,OAAO,KAAI,IAAI;EAC1D,CAAC,EAAE,CAACL,WAAW,CAAC,CAAC;EAEjB,OAAO;IACHE,MAAM,EAANA,MAAM;IACNH,OAAO,EAAPA,OAAO;IACPE,KAAK,EAALA;EACJ,CAAC;AACL,CAAC;AAAC;AAEK,IAAMK,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC3B,OAAOZ,gBAAgB,EAAE;AAC7B,CAAC;AAAC"}

package/admin/menus/ContentGroupsMenuItems.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ContentGroupsMenuItems = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _get = _interopRequireDefault(require("lodash/get"));
-var _pluralize = _interopRequireDefault(require("pluralize"));
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _viewsGraphql = require("../viewsGraphql");
 var _useQuery = _interopRequireDefault(require("../hooks/useQuery"));
@@ -76,7 +75,7 @@ var ContentGroupsMenuItems = function ContentGroupsMenuItems() {
         contentModel: contentModel
       }, /*#__PURE__*/_react.default.createElement(_appAdmin.AddMenu, {
         name: contentModel.modelId,
-        label: (0, _pluralize.default)(contentModel.name),
+        label: contentModel.name,
         path: "/cms/content-entries/".concat(contentModel.modelId)
       }));
     })));

package/admin/menus/ContentGroupsMenuItems.js.map

@@ -1 +1 @@
-{"version":3,"names":["HasContentEntryPermissions","group","contentModel","children","usePermission","canReadEntries","contentModelGroup","hasContentEntryPermission","contentModels","some","length","Icon","color","icon","split","ContentGroupsMenuItems","response","useQuery","LIST_MENU_CONTENT_GROUPS_MODELS","groups","get","map","id","name","modelId","pluralize"],"sources":["ContentGroupsMenuItems.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport pluralize from \"pluralize\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n    LIST_MENU_CONTENT_GROUPS_MODELS,\n    ListMenuCmsGroupsQueryResponse\n} from \"~/admin/viewsGraphql\";\nimport useQuery from \"~/admin/hooks/useQuery\";\nimport usePermission from \"~/admin/hooks/usePermission\";\nimport { AddMenu as Menu } from \"@webiny/app-admin\";\nimport { NothingToShow } from \"./NothingToShowElement\";\nimport { CmsGroup, CmsModel } from \"~/types\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\n\ninterface HasContentEntryPermissionsProps {\n    group: CmsGroup;\n    contentModel?: CmsModel;\n    children: JSX.Element;\n}\n\nconst HasContentEntryPermissions: React.FC<HasContentEntryPermissionsProps> = ({\n    group,\n    contentModel,\n    children\n}) => {\n    const { canReadEntries } = usePermission();\n\n    if (contentModel) {\n        if (!canReadEntries({ contentModelGroup: group, contentModel })) {\n            return null;\n        }\n    } else {\n        const hasContentEntryPermission = group.contentModels.some(contentModel =>\n            canReadEntries({\n                contentModelGroup: group,\n                contentModel\n            })\n        );\n\n        if (group.contentModels.length > 0 && !hasContentEntryPermission) {\n            return null;\n        }\n    }\n\n    return children;\n};\n\ninterface IconProps {\n    group: CmsGroup;\n}\nconst Icon: React.FC<IconProps> = ({ group }) => {\n    return (\n        <FontAwesomeIcon\n            style={{ color: \"var(--mdc-theme-text-secondary-on-background)\" }}\n            icon={(group.icon || \"\").split(\"/\") as IconProp}\n        />\n    );\n};\n\nexport const ContentGroupsMenuItems: React.FC = () => {\n    const response = useQuery<ListMenuCmsGroupsQueryResponse>(LIST_MENU_CONTENT_GROUPS_MODELS);\n    const groups: CmsGroup[] = get(response, \"data.listContentModelGroups.data\") || [];\n\n    if (!groups || groups.length === 0) {\n        return null;\n    }\n\n    return (\n        <>\n            {groups.map(group => {\n                return (\n                    <HasContentEntryPermissions key={group.id} group={group}>\n                        <Menu\n                            name={group.id}\n                            label={group.name}\n                            tags={[\"headlessCMS\"]}\n                            icon={<Icon group={group} />}\n                        >\n                            {group.contentModels.length === 0 && (\n                                <Menu name={`${group.id}-empty`} element={<NothingToShow />} />\n                            )}\n                            {group.contentModels.length > 0 &&\n                                group.contentModels.map(contentModel => (\n                                    <HasContentEntryPermissions\n                                        key={contentModel.modelId}\n                                        group={group}\n                                        contentModel={contentModel}\n                                    >\n                                        <Menu\n                                            name={contentModel.modelId}\n                                            label={pluralize(contentModel.name)}\n                                            path={`/cms/content-entries/${contentModel.modelId}`}\n                                        />\n                                    </HasContentEntryPermissions>\n                                ))}\n                        </Menu>\n                    </HasContentEntryPermissions>\n                );\n            })}\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AAUA,IAAMA,0BAAqE,GAAG,SAAxEA,0BAAqE,OAIrE;EAAA,IAHFC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;EAER,qBAA2B,IAAAC,uBAAa,GAAE;IAAlCC,cAAc,kBAAdA,cAAc;EAEtB,IAAIH,YAAY,EAAE;IACd,IAAI,CAACG,cAAc,CAAC;MAAEC,iBAAiB,EAAEL,KAAK;MAAEC,YAAY,EAAZA;IAAa,CAAC,CAAC,EAAE;MAC7D,OAAO,IAAI;IACf;EACJ,CAAC,MAAM;IACH,IAAMK,yBAAyB,GAAGN,KAAK,CAACO,aAAa,CAACC,IAAI,CAAC,UAAAP,YAAY;MAAA,OACnEG,cAAc,CAAC;QACXC,iBAAiB,EAAEL,KAAK;QACxBC,YAAY,EAAZA;MACJ,CAAC,CAAC;IAAA,EACL;IAED,IAAID,KAAK,CAACO,aAAa,CAACE,MAAM,GAAG,CAAC,IAAI,CAACH,yBAAyB,EAAE;MAC9D,OAAO,IAAI;IACf;EACJ;EAEA,OAAOJ,QAAQ;AACnB,CAAC;AAKD,IAAMQ,IAAyB,GAAG,SAA5BA,IAAyB,QAAkB;EAAA,IAAZV,KAAK,SAALA,KAAK;EACtC,oBACI,6BAAC,iCAAe;IACZ,KAAK,EAAE;MAAEW,KAAK,EAAE;IAAgD,CAAE;IAClE,IAAI,EAAE,CAACX,KAAK,CAACY,IAAI,IAAI,EAAE,EAAEC,KAAK,CAAC,GAAG;EAAc,EAClD;AAEV,CAAC;AAEM,IAAMC,sBAAgC,GAAG,SAAnCA,sBAAgC,GAAS;EAClD,IAAMC,QAAQ,GAAG,IAAAC,iBAAQ,EAAiCC,6CAA+B,CAAC;EAC1F,IAAMC,MAAkB,GAAG,IAAAC,YAAG,EAACJ,QAAQ,EAAE,kCAAkC,CAAC,IAAI,EAAE;EAElF,IAAI,CAACG,MAAM,IAAIA,MAAM,CAACT,MAAM,KAAK,CAAC,EAAE;IAChC,OAAO,IAAI;EACf;EAEA,oBACI,4DACKS,MAAM,CAACE,GAAG,CAAC,UAAApB,KAAK,EAAI;IACjB,oBACI,6BAAC,0BAA0B;MAAC,GAAG,EAAEA,KAAK,CAACqB,EAAG;MAAC,KAAK,EAAErB;IAAM,gBACpD,6BAAC,iBAAI;MACD,IAAI,EAAEA,KAAK,CAACqB,EAAG;MACf,KAAK,EAAErB,KAAK,CAACsB,IAAK;MAClB,IAAI,EAAE,CAAC,aAAa,CAAE;MACtB,IAAI,eAAE,6BAAC,IAAI;QAAC,KAAK,EAAEtB;MAAM;IAAI,GAE5BA,KAAK,CAACO,aAAa,CAACE,MAAM,KAAK,CAAC,iBAC7B,6BAAC,iBAAI;MAAC,IAAI,YAAKT,KAAK,CAACqB,EAAE,WAAS;MAAC,OAAO,eAAE,6BAAC,mCAAa;IAAI,EAC/D,EACArB,KAAK,CAACO,aAAa,CAACE,MAAM,GAAG,CAAC,IAC3BT,KAAK,CAACO,aAAa,CAACa,GAAG,CAAC,UAAAnB,YAAY;MAAA,oBAChC,6BAAC,0BAA0B;QACvB,GAAG,EAAEA,YAAY,CAACsB,OAAQ;QAC1B,KAAK,EAAEvB,KAAM;QACb,YAAY,EAAEC;MAAa,gBAE3B,6BAAC,iBAAI;QACD,IAAI,EAAEA,YAAY,CAACsB,OAAQ;QAC3B,KAAK,EAAE,IAAAC,kBAAS,EAACvB,YAAY,CAACqB,IAAI,CAAE;QACpC,IAAI,iCAA0BrB,YAAY,CAACsB,OAAO;MAAG,EACvD,CACuB;IAAA,CAChC,CAAC,CACH,CACkB;EAErC,CAAC,CAAC,CACH;AAEX,CAAC;AAAC"}
+{"version":3,"names":["HasContentEntryPermissions","group","contentModel","children","usePermission","canReadEntries","contentModelGroup","hasContentEntryPermission","contentModels","some","length","Icon","color","icon","split","ContentGroupsMenuItems","response","useQuery","LIST_MENU_CONTENT_GROUPS_MODELS","groups","get","map","id","name","modelId"],"sources":["ContentGroupsMenuItems.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n    LIST_MENU_CONTENT_GROUPS_MODELS,\n    ListMenuCmsGroupsQueryResponse\n} from \"~/admin/viewsGraphql\";\nimport useQuery from \"~/admin/hooks/useQuery\";\nimport usePermission from \"~/admin/hooks/usePermission\";\nimport { AddMenu as Menu } from \"@webiny/app-admin\";\nimport { NothingToShow } from \"./NothingToShowElement\";\nimport { CmsGroup, CmsModel } from \"~/types\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\n\ninterface HasContentEntryPermissionsProps {\n    group: CmsGroup;\n    contentModel?: CmsModel;\n    children: JSX.Element;\n}\n\nconst HasContentEntryPermissions: React.FC<HasContentEntryPermissionsProps> = ({\n    group,\n    contentModel,\n    children\n}) => {\n    const { canReadEntries } = usePermission();\n\n    if (contentModel) {\n        if (!canReadEntries({ contentModelGroup: group, contentModel })) {\n            return null;\n        }\n    } else {\n        const hasContentEntryPermission = group.contentModels.some(contentModel =>\n            canReadEntries({\n                contentModelGroup: group,\n                contentModel\n            })\n        );\n\n        if (group.contentModels.length > 0 && !hasContentEntryPermission) {\n            return null;\n        }\n    }\n\n    return children;\n};\n\ninterface IconProps {\n    group: CmsGroup;\n}\nconst Icon: React.FC<IconProps> = ({ group }) => {\n    return (\n        <FontAwesomeIcon\n            style={{ color: \"var(--mdc-theme-text-secondary-on-background)\" }}\n            icon={(group.icon || \"\").split(\"/\") as IconProp}\n        />\n    );\n};\n\nexport const ContentGroupsMenuItems: React.FC = () => {\n    const response = useQuery<ListMenuCmsGroupsQueryResponse>(LIST_MENU_CONTENT_GROUPS_MODELS);\n    const groups: CmsGroup[] = get(response, \"data.listContentModelGroups.data\") || [];\n\n    if (!groups || groups.length === 0) {\n        return null;\n    }\n\n    return (\n        <>\n            {groups.map(group => {\n                return (\n                    <HasContentEntryPermissions key={group.id} group={group}>\n                        <Menu\n                            name={group.id}\n                            label={group.name}\n                            tags={[\"headlessCMS\"]}\n                            icon={<Icon group={group} />}\n                        >\n                            {group.contentModels.length === 0 && (\n                                <Menu name={`${group.id}-empty`} element={<NothingToShow />} />\n                            )}\n                            {group.contentModels.length > 0 &&\n                                group.contentModels.map(contentModel => (\n                                    <HasContentEntryPermissions\n                                        key={contentModel.modelId}\n                                        group={group}\n                                        contentModel={contentModel}\n                                    >\n                                        <Menu\n                                            name={contentModel.modelId}\n                                            label={contentModel.name}\n                                            path={`/cms/content-entries/${contentModel.modelId}`}\n                                        />\n                                    </HasContentEntryPermissions>\n                                ))}\n                        </Menu>\n                    </HasContentEntryPermissions>\n                );\n            })}\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AAUA,IAAMA,0BAAqE,GAAG,SAAxEA,0BAAqE,OAIrE;EAAA,IAHFC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;EAER,qBAA2B,IAAAC,uBAAa,GAAE;IAAlCC,cAAc,kBAAdA,cAAc;EAEtB,IAAIH,YAAY,EAAE;IACd,IAAI,CAACG,cAAc,CAAC;MAAEC,iBAAiB,EAAEL,KAAK;MAAEC,YAAY,EAAZA;IAAa,CAAC,CAAC,EAAE;MAC7D,OAAO,IAAI;IACf;EACJ,CAAC,MAAM;IACH,IAAMK,yBAAyB,GAAGN,KAAK,CAACO,aAAa,CAACC,IAAI,CAAC,UAAAP,YAAY;MAAA,OACnEG,cAAc,CAAC;QACXC,iBAAiB,EAAEL,KAAK;QACxBC,YAAY,EAAZA;MACJ,CAAC,CAAC;IAAA,EACL;IAED,IAAID,KAAK,CAACO,aAAa,CAACE,MAAM,GAAG,CAAC,IAAI,CAACH,yBAAyB,EAAE;MAC9D,OAAO,IAAI;IACf;EACJ;EAEA,OAAOJ,QAAQ;AACnB,CAAC;AAKD,IAAMQ,IAAyB,GAAG,SAA5BA,IAAyB,QAAkB;EAAA,IAAZV,KAAK,SAALA,KAAK;EACtC,oBACI,6BAAC,iCAAe;IACZ,KAAK,EAAE;MAAEW,KAAK,EAAE;IAAgD,CAAE;IAClE,IAAI,EAAE,CAACX,KAAK,CAACY,IAAI,IAAI,EAAE,EAAEC,KAAK,CAAC,GAAG;EAAc,EAClD;AAEV,CAAC;AAEM,IAAMC,sBAAgC,GAAG,SAAnCA,sBAAgC,GAAS;EAClD,IAAMC,QAAQ,GAAG,IAAAC,iBAAQ,EAAiCC,6CAA+B,CAAC;EAC1F,IAAMC,MAAkB,GAAG,IAAAC,YAAG,EAACJ,QAAQ,EAAE,kCAAkC,CAAC,IAAI,EAAE;EAElF,IAAI,CAACG,MAAM,IAAIA,MAAM,CAACT,MAAM,KAAK,CAAC,EAAE;IAChC,OAAO,IAAI;EACf;EAEA,oBACI,4DACKS,MAAM,CAACE,GAAG,CAAC,UAAApB,KAAK,EAAI;IACjB,oBACI,6BAAC,0BAA0B;MAAC,GAAG,EAAEA,KAAK,CAACqB,EAAG;MAAC,KAAK,EAAErB;IAAM,gBACpD,6BAAC,iBAAI;MACD,IAAI,EAAEA,KAAK,CAACqB,EAAG;MACf,KAAK,EAAErB,KAAK,CAACsB,IAAK;MAClB,IAAI,EAAE,CAAC,aAAa,CAAE;MACtB,IAAI,eAAE,6BAAC,IAAI;QAAC,KAAK,EAAEtB;MAAM;IAAI,GAE5BA,KAAK,CAACO,aAAa,CAACE,MAAM,KAAK,CAAC,iBAC7B,6BAAC,iBAAI;MAAC,IAAI,YAAKT,KAAK,CAACqB,EAAE,WAAS;MAAC,OAAO,eAAE,6BAAC,mCAAa;IAAI,EAC/D,EACArB,KAAK,CAACO,aAAa,CAACE,MAAM,GAAG,CAAC,IAC3BT,KAAK,CAACO,aAAa,CAACa,GAAG,CAAC,UAAAnB,YAAY;MAAA,oBAChC,6BAAC,0BAA0B;QACvB,GAAG,EAAEA,YAAY,CAACsB,OAAQ;QAC1B,KAAK,EAAEvB,KAAM;QACb,YAAY,EAAEC;MAAa,gBAE3B,6BAAC,iBAAI;QACD,IAAI,EAAEA,YAAY,CAACsB,OAAQ;QAC3B,KAAK,EAAEtB,YAAY,CAACqB,IAAK;QACzB,IAAI,iCAA0BrB,YAAY,CAACsB,OAAO;MAAG,EACvD,CACuB;IAAA,CAChC,CAAC,CACH,CACkB;EAErC,CAAC,CAAC,CACH;AAEX,CAAC;AAAC"}

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

@@ -1,2 +1,2 @@
-declare const _default: import("../../../../types").CmsEditorFieldRendererPlugin[];
+declare const _default: import("../../../../types").CmsModelFieldRendererPlugin[];
 export default _default;

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

@@ -1,2 +1,2 @@
-declare const _default: import("../../../../types").CmsEditorFieldRendererPlugin[];
+declare const _default: import("../../../../types").CmsModelFieldRendererPlugin[];
 export default _default;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { CmsDynamicZoneTemplate } from "../../../../types";
 interface UseAddTemplateParams {
     onTemplate: (template: CmsDynamicZoneTemplate) => void;
@@ -7,6 +7,6 @@ interface AddTemplateProps {
     label?: string;
     onTemplate: UseAddTemplateParams["onTemplate"];
 }
-export declare const AddTemplateButton: (props: AddTemplateProps) => JSX.Element;
-export declare const AddTemplateIcon: (props: AddTemplateProps) => JSX.Element;
+export declare const AddTemplateButton: React.VFC<AddTemplateProps>;
+export declare const AddTemplateIcon: React.VFC<AddTemplateProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"names":["AddIconContainer","styled","AddButtonContainer","Info","useAddTemplate","params","useState","showGallery","setShowGallery","browseTemplates","onTemplate","template","onGalleryClose","AddTemplateButton","props","AddTemplateIcon"],"sources":["AddTemplate.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { ReactComponent as InfoIcon } from \"@material-design-icons/svg/outlined/info.svg\";\nimport { ReactComponent as AddIcon } from \"@material-design-icons/svg/round/add_circle_outline.svg\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { TemplateGallery } from \"./TemplateGallery\";\nimport { IconButton, ButtonSecondary } from \"@webiny/ui/Button\";\n\nconst AddIconContainer = styled.div`\n    text-align: center;\n    padding-top: 3px;\n`;\n\nconst AddButtonContainer = styled.div`\n    text-align: center;\n    margin-top: 20px;\n    :first-of-type {\n        margin-top: 0;\n    }\n`;\n\nconst Info = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-top: 5px;\n    > svg {\n        width: 20px;\n        margin-right: 5px;\n    }\n`;\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nfunction useAddTemplate(params: UseAddTemplateParams) {\n    const [showGallery, setShowGallery] = useState(false);\n\n    const browseTemplates = () => {\n        setShowGallery(true);\n    };\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        params.onTemplate(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        <AddButtonContainer>\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <>\n                    <ButtonSecondary onClick={browseTemplates}>+ Add a template</ButtonSecondary>\n                    <Info>\n                        <InfoIcon />\n                        <Typography use={\"caption\"}>\n                            Click here to learn how templates and dynamic zones work\n                        </Typography>\n                    </Info>\n                </>\n            )}\n        </AddButtonContainer>\n    );\n};\n\nexport const AddTemplateIcon = (props: AddTemplateProps) => {\n    const { showGallery, onTemplate, browseTemplates, onGalleryClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <AddIconContainer>\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <IconButton onClick={browseTemplates} icon={<AddIcon />} />\n            )}\n        </AddIconContainer>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,IAAMA,gBAAgB,oBAAGC,eAAM;EAAA;EAAA;AAAA,wCAG9B;AAED,IAAMC,kBAAkB,oBAAGD,eAAM;EAAA;EAAA;AAAA,qEAMhC;AAED,IAAME,IAAI,oBAAGF,eAAM;EAAA;EAAA;AAAA,+GASlB;AAMD,SAASG,cAAc,CAACC,MAA4B,EAAE;EAClD,gBAAsC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAA9CC,WAAW;IAAEC,cAAc;EAElC,IAAMC,eAAe,GAAG,SAAlBA,eAAe,GAAS;IAC1BD,cAAc,CAAC,IAAI,CAAC;EACxB,CAAC;EAED,IAAME,UAAU,GAAG,SAAbA,UAAU,CAAIC,QAAgC,EAAK;IACrDN,MAAM,CAACK,UAAU,CAACC,QAAQ,CAAC;IAC3BC,cAAc,EAAE;EACpB,CAAC;EAED,IAAMA,cAAc,GAAG,SAAjBA,cAAc,GAAS;IACzBJ,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC;EAED,OAAO;IACHD,WAAW,EAAXA,WAAW;IACXE,eAAe,EAAfA,eAAe;IACfC,UAAU,EAAVA,UAAU;IACVE,cAAc,EAAdA;EACJ,CAAC;AACL;AAOO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAuB,EAAK;EAC1D,sBAAqEV,cAAc,CAAC;MAChFM,UAAU,EAAEI,KAAK,CAACJ;IACtB,CAAC,CAAC;IAFMH,WAAW,mBAAXA,WAAW;IAAEG,UAAU,mBAAVA,UAAU;IAAED,eAAe,mBAAfA,eAAe;IAAEG,cAAc,mBAAdA,cAAc;EAIhE,oBACI,6BAAC,kBAAkB,QACdL,WAAW,gBACR,6BAAC,gCAAe;IAAC,UAAU,EAAEG,UAAW;IAAC,OAAO,EAAEE;EAAe,EAAG,gBAEpE,yEACI,6BAAC,uBAAe;IAAC,OAAO,EAAEH;EAAgB,GAAC,kBAAgB,CAAkB,eAC7E,6BAAC,IAAI,qBACD,6BAAC,oBAAQ,OAAG,eACZ,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAU,GAAC,0DAE5B,CAAa,CACV,CAEd,CACgB;AAE7B,CAAC;AAAC;AAEK,IAAMM,eAAe,GAAG,SAAlBA,eAAe,CAAID,KAAuB,EAAK;EACxD,uBAAqEV,cAAc,CAAC;MAChFM,UAAU,EAAEI,KAAK,CAACJ;IACtB,CAAC,CAAC;IAFMH,WAAW,oBAAXA,WAAW;IAAEG,UAAU,oBAAVA,UAAU;IAAED,eAAe,oBAAfA,eAAe;IAAEG,cAAc,oBAAdA,cAAc;EAIhE,oBACI,6BAAC,gBAAgB,QACZL,WAAW,gBACR,6BAAC,gCAAe;IAAC,UAAU,EAAEG,UAAW;IAAC,OAAO,EAAEE;EAAe,EAAG,gBAEpE,6BAAC,kBAAU;IAAC,OAAO,EAAEH,eAAgB;IAAC,IAAI,eAAE,6BAAC,kCAAO;EAAI,EAC3D,CACc;AAE3B,CAAC;AAAC"}
+{"version":3,"names":["AddIconContainer","styled","AddButtonContainer","Info","useAddTemplate","params","useState","showGallery","setShowGallery","browseTemplates","onTemplate","template","onGalleryClose","AddTemplateButton","props","AddTemplateIcon"],"sources":["AddTemplate.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { ReactComponent as InfoIcon } from \"@material-design-icons/svg/outlined/info.svg\";\nimport { ReactComponent as AddIcon } from \"@material-design-icons/svg/round/add_circle_outline.svg\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { TemplateGallery } from \"./TemplateGallery\";\nimport { IconButton, ButtonSecondary } from \"@webiny/ui/Button\";\n\nconst AddIconContainer = styled.div`\n    text-align: center;\n    padding-top: 3px;\n`;\n\nconst AddButtonContainer = styled.div`\n    text-align: center;\n    margin-top: 20px;\n\n    :first-of-type {\n        margin-top: 0;\n    }\n`;\n\nconst Info = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-top: 5px;\n\n    > svg {\n        width: 20px;\n        margin-right: 5px;\n    }\n`;\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nfunction useAddTemplate(params: UseAddTemplateParams) {\n    const [showGallery, setShowGallery] = useState(false);\n\n    const browseTemplates = () => {\n        setShowGallery(true);\n    };\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        params.onTemplate(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: React.VFC<AddTemplateProps> = props => {\n    const { showGallery, onTemplate, browseTemplates, onGalleryClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <AddButtonContainer>\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <>\n                    <ButtonSecondary onClick={browseTemplates}>+ Add a template</ButtonSecondary>\n                    <Info>\n                        <InfoIcon />\n                        <Typography use={\"caption\"}>\n                            Click here to learn how templates and dynamic zones work\n                        </Typography>\n                    </Info>\n                </>\n            )}\n        </AddButtonContainer>\n    );\n};\n\nexport const AddTemplateIcon: React.VFC<AddTemplateProps> = props => {\n    const { showGallery, onTemplate, browseTemplates, onGalleryClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <AddIconContainer>\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <IconButton onClick={browseTemplates} icon={<AddIcon />} />\n            )}\n        </AddIconContainer>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,IAAMA,gBAAgB,oBAAGC,eAAM;EAAA;EAAA;AAAA,wCAG9B;AAED,IAAMC,kBAAkB,oBAAGD,eAAM;EAAA;EAAA;AAAA,qEAOhC;AAED,IAAME,IAAI,oBAAGF,eAAM;EAAA;EAAA;AAAA,+GAUlB;AAMD,SAASG,cAAc,CAACC,MAA4B,EAAE;EAClD,gBAAsC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAA9CC,WAAW;IAAEC,cAAc;EAElC,IAAMC,eAAe,GAAG,SAAlBA,eAAe,GAAS;IAC1BD,cAAc,CAAC,IAAI,CAAC;EACxB,CAAC;EAED,IAAME,UAAU,GAAG,SAAbA,UAAU,CAAIC,QAAgC,EAAK;IACrDN,MAAM,CAACK,UAAU,CAACC,QAAQ,CAAC;IAC3BC,cAAc,EAAE;EACpB,CAAC;EAED,IAAMA,cAAc,GAAG,SAAjBA,cAAc,GAAS;IACzBJ,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC;EAED,OAAO;IACHD,WAAW,EAAXA,WAAW;IACXE,eAAe,EAAfA,eAAe;IACfC,UAAU,EAAVA,UAAU;IACVE,cAAc,EAAdA;EACJ,CAAC;AACL;AAOO,IAAMC,iBAA8C,GAAG,SAAjDA,iBAA8C,CAAGC,KAAK,EAAI;EACnE,sBAAqEV,cAAc,CAAC;MAChFM,UAAU,EAAEI,KAAK,CAACJ;IACtB,CAAC,CAAC;IAFMH,WAAW,mBAAXA,WAAW;IAAEG,UAAU,mBAAVA,UAAU;IAAED,eAAe,mBAAfA,eAAe;IAAEG,cAAc,mBAAdA,cAAc;EAIhE,oBACI,6BAAC,kBAAkB,QACdL,WAAW,gBACR,6BAAC,gCAAe;IAAC,UAAU,EAAEG,UAAW;IAAC,OAAO,EAAEE;EAAe,EAAG,gBAEpE,yEACI,6BAAC,uBAAe;IAAC,OAAO,EAAEH;EAAgB,GAAC,kBAAgB,CAAkB,eAC7E,6BAAC,IAAI,qBACD,6BAAC,oBAAQ,OAAG,eACZ,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAU,GAAC,0DAE5B,CAAa,CACV,CAEd,CACgB;AAE7B,CAAC;AAAC;AAEK,IAAMM,eAA4C,GAAG,SAA/CA,eAA4C,CAAGD,KAAK,EAAI;EACjE,uBAAqEV,cAAc,CAAC;MAChFM,UAAU,EAAEI,KAAK,CAACJ;IACtB,CAAC,CAAC;IAFMH,WAAW,oBAAXA,WAAW;IAAEG,UAAU,oBAAVA,UAAU;IAAED,eAAe,oBAAfA,eAAe;IAAEG,cAAc,oBAAdA,cAAc;EAIhE,oBACI,6BAAC,gBAAgB,QACZL,WAAW,gBACR,6BAAC,gCAAe;IAAC,UAAU,EAAEG,UAAW;IAAC,OAAO,EAAEE;EAAe,EAAG,gBAEpE,6BAAC,kBAAU;IAAC,OAAO,EAAEH,eAAgB;IAAC,IAAI,eAAE,6BAAC,kCAAO;EAAI,EAC3D,CACc;AAE3B,CAAC;AAAC"}

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

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { BindComponentRenderProp, CmsEditorFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
-declare type GetBind = CmsEditorFieldRendererProps["getBind"];
+import React from "react";
+import { BindComponentRenderProp, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
+declare type GetBind = CmsModelFieldRendererProps["getBind"];
 interface MultiValueDynamicZoneProps {
     field: CmsModelField;
     bind: BindComponentRenderProp;
     contentModel: CmsModel;
     getBind: GetBind;
 }
-export declare const MultiValueDynamicZone: ({ bind, getBind, contentModel }: MultiValueDynamicZoneProps) => JSX.Element;
+export declare const MultiValueDynamicZone: React.VFC<MultiValueDynamicZoneProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"names":["BottomMargin","styled","TemplateValueForm","value","contentModel","Bind","isLast","isFirst","onMoveUp","onMoveDown","onDelete","onClone","useModelField","field","templates","settings","template","find","tpl","id","_templateId","name","description","icon","fields","layout","MultiValueDynamicZone","bind","getBind","onTemplate","appendValue","cloneValue","index","newValue","cloneDeep","values","hasValues","length","map","moveValueUp","moveValueDown","removeValue"],"sources":["MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@material-design-icons/svg/outlined/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@material-design-icons/svg/round/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@material-design-icons/svg/round/expand_more.svg\";\nimport { AddTemplateButton, AddTemplateIcon } from \"./AddTemplate\";\nimport { TemplateIcon } from \"./TemplateIcon\";\nimport { useModelField } from \"~/admin/hooks\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsEditorFieldRendererProps,\n    CmsModel,\n    CmsModelField\n} from \"~/types\";\n\nconst BottomMargin = styled.div`\n    margin-bottom: 20px;\n`;\n\ntype GetBind = CmsEditorFieldRendererProps[\"getBind\"];\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: () => 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        <AccordionItem\n            title={template.name}\n            description={template.description}\n            icon={<TemplateIcon icon={template.icon} />}\n            actions={\n                <AccordionItem.Actions>\n                    <AccordionItem.Action\n                        icon={<ArrowUpIcon />}\n                        onClick={onMoveUp}\n                        disabled={isFirst}\n                    />\n                    <AccordionItem.Action\n                        icon={<ArrowDownIcon />}\n                        onClick={onMoveDown}\n                        disabled={isLast}\n                    />\n                    <AccordionItem.Divider />\n                    <AccordionItem.Action icon={<CloneIcon />} onClick={onClone} />\n                    <AccordionItem.Action icon={<DeleteIcon />} onClick={onDelete} />\n                </AccordionItem.Actions>\n            }\n        >\n            <Fields\n                fields={template.fields}\n                layout={template.layout || []}\n                contentModel={contentModel}\n                Bind={Bind}\n            />\n        </AccordionItem>\n    );\n};\n\ninterface MultiValueDynamicZoneProps {\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const MultiValueDynamicZone = ({\n    bind,\n    getBind,\n    contentModel\n}: MultiValueDynamicZoneProps) => {\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        bind.appendValue({ _templateId: template.id });\n    };\n\n    const cloneValue = (index: number) => {\n        const newValue = cloneDeep(bind.value[index]);\n        bind.appendValue(newValue, index + 1);\n    };\n\n    const values: TemplateValue[] = bind.value || [];\n    const hasValues = values.length > 0;\n\n    return (\n        <>\n            {hasValues ? (\n                <Accordion>\n                    {values.map((value, index) => (\n                        <TemplateValueForm\n                            key={index}\n                            value={value}\n                            contentModel={contentModel}\n                            Bind={getBind(index)}\n                            isFirst={index === 0}\n                            isLast={index === values.length - 1}\n                            onMoveUp={() => bind.moveValueUp(index)}\n                            onMoveDown={() => bind.moveValueDown(index)}\n                            onDelete={() => bind.removeValue(index)}\n                            onClone={() => cloneValue(index)}\n                        />\n                    ))}\n                </Accordion>\n            ) : null}\n            {hasValues ? (\n                <AddTemplateIcon onTemplate={onTemplate} />\n            ) : (\n                <BottomMargin>\n                    <AddTemplateButton onTemplate={onTemplate} />\n                </BottomMargin>\n            )}\n        </>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["BottomMargin","styled","TemplateValueForm","value","contentModel","Bind","isLast","isFirst","onMoveUp","onMoveDown","onDelete","onClone","useModelField","field","templates","settings","template","find","tpl","id","_templateId","name","description","icon","fields","layout","MultiValueDynamicZone","bind","getBind","onTemplate","appendValue","cloneValue","index","newValue","cloneDeep","values","hasValues","length","map","moveValueUp","moveValueDown","removeValue"],"sources":["MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@material-design-icons/svg/outlined/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@material-design-icons/svg/round/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@material-design-icons/svg/round/expand_more.svg\";\nimport { AddTemplateButton, AddTemplateIcon } from \"./AddTemplate\";\nimport { TemplateIcon } from \"./TemplateIcon\";\nimport { useModelField } from \"~/admin/hooks\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField\n} from \"~/types\";\n\nconst BottomMargin = styled.div`\n    margin-bottom: 20px;\n`;\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\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: () => void;\n}\n\nconst TemplateValueForm: React.VFC<TemplateValueFormProps> = ({\n    value,\n    contentModel,\n    Bind,\n    isLast,\n    isFirst,\n    onMoveUp,\n    onMoveDown,\n    onDelete,\n    onClone\n}) => {\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        <AccordionItem\n            title={template.name}\n            description={template.description}\n            icon={<TemplateIcon icon={template.icon} />}\n            actions={\n                <AccordionItem.Actions>\n                    <AccordionItem.Action\n                        icon={<ArrowUpIcon />}\n                        onClick={onMoveUp}\n                        disabled={isFirst}\n                    />\n                    <AccordionItem.Action\n                        icon={<ArrowDownIcon />}\n                        onClick={onMoveDown}\n                        disabled={isLast}\n                    />\n                    <AccordionItem.Divider />\n                    <AccordionItem.Action icon={<CloneIcon />} onClick={onClone} />\n                    <AccordionItem.Action icon={<DeleteIcon />} onClick={onDelete} />\n                </AccordionItem.Actions>\n            }\n        >\n            <Fields\n                fields={template.fields}\n                layout={template.layout || []}\n                contentModel={contentModel}\n                Bind={Bind}\n            />\n        </AccordionItem>\n    );\n};\n\ninterface MultiValueDynamicZoneProps {\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const MultiValueDynamicZone: React.VFC<MultiValueDynamicZoneProps> = ({\n    bind,\n    getBind,\n    contentModel\n}) => {\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        bind.appendValue({ _templateId: template.id });\n    };\n\n    const cloneValue = (index: number) => {\n        const newValue = cloneDeep(bind.value[index]);\n        bind.appendValue(newValue, index + 1);\n    };\n\n    const values: TemplateValue[] = bind.value || [];\n    const hasValues = values.length > 0;\n\n    return (\n        <>\n            {hasValues ? (\n                <Accordion>\n                    {values.map((value, index) => (\n                        <TemplateValueForm\n                            key={index}\n                            value={value}\n                            contentModel={contentModel}\n                            Bind={getBind(index)}\n                            isFirst={index === 0}\n                            isLast={index === values.length - 1}\n                            onMoveUp={() => bind.moveValueUp(index)}\n                            onMoveDown={() => bind.moveValueDown(index)}\n                            onDelete={() => bind.removeValue(index)}\n                            onClone={() => cloneValue(index)}\n                        />\n                    ))}\n                </Accordion>\n            ) : null}\n            {hasValues ? (\n                <AddTemplateIcon onTemplate={onTemplate} />\n            ) : (\n                <BottomMargin>\n                    <AddTemplateButton onTemplate={onTemplate} />\n                </BottomMargin>\n            )}\n        </>\n    );\n};\n"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { BindComponentRenderProp, CmsEditorFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
-declare type GetBind = CmsEditorFieldRendererProps["getBind"];
+import React from "react";
+import { BindComponentRenderProp, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
+declare type GetBind = CmsModelFieldRendererProps["getBind"];
 interface SingleValueDynamicZoneProps {
     field: CmsModelField;
     bind: BindComponentRenderProp;
     contentModel: CmsModel;
     getBind: GetBind;
 }
-export declare const SingleValueDynamicZone: ({ field, bind, contentModel, getBind }: SingleValueDynamicZoneProps) => JSX.Element;
+export declare const SingleValueDynamicZone: React.VFC<SingleValueDynamicZoneProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"names":["SingleValueDynamicZone","field","bind","contentModel","getBind","onTemplate","template","onChange","_templateId","id","templates","settings","value","find","tpl","undefined","Bind","unsetValue","name","description","icon","fields","layout"],"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 { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { AddTemplateButton } from \"./AddTemplate\";\nimport { TemplateIcon } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon\";\nimport {\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsEditorFieldRendererProps,\n    CmsModel,\n    CmsModelField\n} from \"~/types\";\n\ntype GetBind = CmsEditorFieldRendererProps[\"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: CmsDynamicZoneTemplate) => {\n        bind.onChange({ _templateId: template.id });\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                <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 icon={<DeleteIcon />} onClick={unsetValue} />\n                            </AccordionItem.Actions>\n                        }\n                    >\n                        <Fields\n                            fields={template.fields}\n                            layout={template.layout || []}\n                            contentModel={contentModel}\n                            Bind={Bind}\n                        />\n                    </AccordionItem>\n                </Accordion>\n            ) : null}\n            {bind.value ? null : <AddTemplateButton onTemplate={onTemplate} />}\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAkBO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,OAKA;EAAA;EAAA,IAJ/BC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;EAEP,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,QAAgC,EAAK;IACrDJ,IAAI,CAACK,QAAQ,CAAC;MAAEC,WAAW,EAAEF,QAAQ,CAACG;IAAG,CAAC,CAAC;EAC/C,CAAC;EAED,IAAMC,SAAS,GAAG,oBAAAT,KAAK,CAACU,QAAQ,oDAAd,gBAAgBD,SAAS,KAAI,EAAE;EAEjD,IAAMJ,QAA4C,GAAGJ,IAAI,CAACU,KAAK,GACzDF,SAAS,CAACG,IAAI,CAAC,UAAAC,GAAG;IAAA,OAAIA,GAAG,CAACL,EAAE,KAAKP,IAAI,CAACU,KAAK,CAACJ,WAAW;EAAA,EAAC,GACxDO,SAAS;EAEf,IAAMC,IAAI,GAAGZ,OAAO,EAAE;EAEtB,IAAMa,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrBf,IAAI,CAACK,QAAQ,CAAC,IAAI,CAAC;EACvB,CAAC;EAED,oBACI,4DACKD,QAAQ,gBACL,6BAAC,oBAAS,qBACN,6BAAC,wBAAa;IACV,KAAK,EAAEA,QAAQ,CAACY,IAAK;IACrB,WAAW,EAAEZ,QAAQ,CAACa,WAAY;IAClC,IAAI,eAAE,6BAAC,0BAAY;MAAC,IAAI,EAAEb,QAAQ,CAACc;IAAK,EAAI;IAC5C,IAAI,EAAE,IAAK;IACX,WAAW,EAAE,KAAM;IACnB,OAAO,eACH,6BAAC,wBAAa,CAAC,OAAO,qBAClB,6BAAC,wBAAa,CAAC,MAAM;MAAC,IAAI,eAAE,6BAAC,8BAAU,OAAI;MAAC,OAAO,EAAEH;IAAW,EAAG;EAE1E,gBAED,6BAAC,cAAM;IACH,MAAM,EAAEX,QAAQ,CAACe,MAAO;IACxB,MAAM,EAAEf,QAAQ,CAACgB,MAAM,IAAI,EAAG;IAC9B,YAAY,EAAEnB,YAAa;IAC3B,IAAI,EAAEa;EAAK,EACb,CACU,CACR,GACZ,IAAI,EACPd,IAAI,CAACU,KAAK,GAAG,IAAI,gBAAG,6BAAC,8BAAiB;IAAC,UAAU,EAAEP;EAAW,EAAG,CACnE;AAEX,CAAC;AAAC"}
+{"version":3,"names":["SingleValueDynamicZone","field","bind","contentModel","getBind","onTemplate","template","onChange","_templateId","id","templates","settings","value","find","tpl","undefined","Bind","unsetValue","name","description","icon","fields","layout"],"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 { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { AddTemplateButton } from \"./AddTemplate\";\nimport { TemplateIcon } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon\";\nimport {\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField\n} from \"~/types\";\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: React.VFC<SingleValueDynamicZoneProps> = ({\n    field,\n    bind,\n    contentModel,\n    getBind\n}) => {\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        bind.onChange({ _templateId: template.id });\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                <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 icon={<DeleteIcon />} onClick={unsetValue} />\n                            </AccordionItem.Actions>\n                        }\n                    >\n                        <Fields\n                            fields={template.fields}\n                            layout={template.layout || []}\n                            contentModel={contentModel}\n                            Bind={Bind}\n                        />\n                    </AccordionItem>\n                </Accordion>\n            ) : null}\n            {bind.value ? null : <AddTemplateButton onTemplate={onTemplate} />}\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAkBO,IAAMA,sBAA8D,GAAG,SAAjEA,sBAA8D,OAKrE;EAAA;EAAA,IAJFC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;EAEP,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,QAAgC,EAAK;IACrDJ,IAAI,CAACK,QAAQ,CAAC;MAAEC,WAAW,EAAEF,QAAQ,CAACG;IAAG,CAAC,CAAC;EAC/C,CAAC;EAED,IAAMC,SAAS,GAAG,oBAAAT,KAAK,CAACU,QAAQ,oDAAd,gBAAgBD,SAAS,KAAI,EAAE;EAEjD,IAAMJ,QAA4C,GAAGJ,IAAI,CAACU,KAAK,GACzDF,SAAS,CAACG,IAAI,CAAC,UAAAC,GAAG;IAAA,OAAIA,GAAG,CAACL,EAAE,KAAKP,IAAI,CAACU,KAAK,CAACJ,WAAW;EAAA,EAAC,GACxDO,SAAS;EAEf,IAAMC,IAAI,GAAGZ,OAAO,EAAE;EAEtB,IAAMa,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrBf,IAAI,CAACK,QAAQ,CAAC,IAAI,CAAC;EACvB,CAAC;EAED,oBACI,4DACKD,QAAQ,gBACL,6BAAC,oBAAS,qBACN,6BAAC,wBAAa;IACV,KAAK,EAAEA,QAAQ,CAACY,IAAK;IACrB,WAAW,EAAEZ,QAAQ,CAACa,WAAY;IAClC,IAAI,eAAE,6BAAC,0BAAY;MAAC,IAAI,EAAEb,QAAQ,CAACc;IAAK,EAAI;IAC5C,IAAI,EAAE,IAAK;IACX,WAAW,EAAE,KAAM;IACnB,OAAO,eACH,6BAAC,wBAAa,CAAC,OAAO,qBAClB,6BAAC,wBAAa,CAAC,MAAM;MAAC,IAAI,eAAE,6BAAC,8BAAU,OAAI;MAAC,OAAO,EAAEH;IAAW,EAAG;EAE1E,gBAED,6BAAC,cAAM;IACH,MAAM,EAAEX,QAAQ,CAACe,MAAO;IACxB,MAAM,EAAEf,QAAQ,CAACgB,MAAM,IAAI,EAAG;IAC9B,YAAY,EAAEnB,YAAa;IAC3B,IAAI,EAAEa;EAAK,EACb,CACU,CACR,GACZ,IAAI,EACPd,IAAI,CAACU,KAAK,GAAG,IAAI,gBAAG,6BAAC,8BAAiB;IAAC,UAAU,EAAEP;EAAW,EAAG,CACnE;AAEX,CAAC;AAAC"}

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 import { CmsDynamicZoneTemplate } from "../../../../types";
 interface TemplateCardProps {
     template: CmsDynamicZoneTemplate;
     onTemplate: (template: CmsDynamicZoneTemplate) => void;
 }
-export declare const TemplateCard: ({ template, onTemplate }: TemplateCardProps) => JSX.Element;
+export declare const TemplateCard: React.VFC<TemplateCardProps>;
 export {};