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

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","style","topLabel","css","marginBottom","noComponentsMessage","textAlign","padding","radioContainer","AppearanceTab","props","field","form","renderPlugins","plugins","byType","filter","item","renderer","canUse","useEffect","currentlySelectedRenderAvailable","find","rendererName","name","setValue","console","info","fieldId","length","Bind","validation","create","onChange","getValue","map","description"],"sources":["AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { CmsEditorField, CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Radio, RadioGroup } from \"@webiny/ui/Radio\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { css } from \"emotion\";\nimport { validation } from \"@webiny/validation\";\nimport { FormRenderPropParams } from \"@webiny/form\";\n\nconst t = i18n.ns(\n    \"app-headless-cms/admin/views/components/editor/tabs/edit-field-dialog/appearance-tab\"\n);\n\nconst style = {\n    topLabel: css({\n        marginBottom: 25\n    }),\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10\n    })\n};\n\ninterface AppearanceTabProps {\n    field: CmsEditorField;\n    form: FormRenderPropParams;\n}\nconst AppearanceTab: React.FC<AppearanceTabProps> = props => {\n    const { field, form } = props;\n\n    const renderPlugins = plugins\n        .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n        .filter(item => item.renderer.canUse({ field }));\n\n    useEffect((): void => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        const currentlySelectedRenderAvailable = renderPlugins.find(\n            item => item.renderer.rendererName === field.renderer.name\n        );\n        if (currentlySelectedRenderAvailable) {\n            return;\n        } else if (renderPlugins[0]) {\n            form.setValue(\"renderer.name\", renderPlugins[0].renderer.rendererName);\n            return;\n        }\n        console.info(`No renderers for field ${field.fieldId} found.`, field);\n    });\n\n    if (renderPlugins.length === 0) {\n        return (\n            <Grid>\n                <Cell\n                    span={12}\n                    className={style.noComponentsMessage}\n                >{t`There are no components that can render this field.`}</Cell>\n            </Grid>\n        );\n    }\n\n    const { Bind } = form;\n\n    return (\n        <Grid>\n            <Cell span={12}>\n                <div\n                    className={style.topLabel}\n                >{t`Choose a component that will render the field:`}</div>\n                <Bind name={\"renderer.name\"} validate={validation.create(\"required\")}>\n                    <RadioGroup>\n                        {({ onChange, getValue }) => (\n                            <React.Fragment>\n                                {renderPlugins.map(item => (\n                                    <div key={item.name} className={style.radioContainer}>\n                                        <Radio\n                                            value={getValue(item.renderer.rendererName)}\n                                            onChange={onChange(item.renderer.rendererName)}\n                                            label={\n                                                <>\n                                                    <div>{item.renderer.name}</div>\n                                                    <div>\n                                                        <Typography use={\"caption\"}>\n                                                            {item.renderer.description}\n                                                        </Typography>\n                                                    </div>\n                                                </>\n                                            }\n                                        />\n                                    </div>\n                                ))}\n                            </React.Fragment>\n                        )}\n                    </RadioGroup>\n                </Bind>\n            </Cell>\n        </Grid>\n    );\n};\n\nexport default AppearanceTab;\n"],"mappings":"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"}
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/AppearanceTab.js","sources":["../../../../../src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { css } from \"@emotion/css\";\nimport { validation } from \"@webiny/validation\";\nimport { useBind } from \"@webiny/form\";\nimport { RendererOptions } from \"./AppearanceTab/RendererOptions.js\";\nimport { useRendererPlugins } from \"./useRendererPlugins.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { RadioGroup, Text, Grid, Heading } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-editor/tabs/appearance-tab\");\n\nconst style = {\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10,\n        display: \"flex\"\n    })\n};\n\nconst AppearanceTab = () => {\n    const renderers = useRendererPlugins();\n    const { field } = useModelField();\n\n    const rendererName = useBind({\n        name: \"renderer.name\",\n        validate: validation.create(\"required\")\n    });\n\n    const selectedPlugin = rendererName.value\n        ? renderers.find(pl => pl.renderer.rendererName === rendererName.value)\n        : undefined;\n\n    if (renderers.length === 0) {\n        return (\n            <Grid>\n                <Grid.Column\n                    span={12}\n                    className={style.noComponentsMessage}\n                >{t`There are no components that can render this field.`}</Grid.Column>\n            </Grid>\n        );\n    }\n\n    useEffect(() => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        if (selectedPlugin) {\n            return;\n        }\n\n        if (renderers[0]) {\n            rendererName.onChange(renderers[0].renderer.rendererName);\n            return;\n        }\n\n        console.info(`No renderers for field ${field.fieldId} found.`, field);\n    }, [field.id, field.list, field.predefinedValues?.enabled, selectedPlugin]);\n\n    return (\n        <>\n            <Grid>\n                <>\n                    <Grid.Column span={12}>\n                        <Heading level={5}>Field renderer</Heading>\n                        <Text size={\"sm\"}>Choose a component that will render the field.</Text>\n                    </Grid.Column>\n                    <Grid.Column span={12}>\n                        <div className={\"mb-xl\"}>\n                            <RadioGroup\n                                {...rendererName}\n                                items={renderers.map(item => ({\n                                    id: item.renderer.rendererName,\n                                    value: item.renderer.rendererName,\n                                    label: (\n                                        <div>\n                                            <Text as={\"div\"} size={\"md\"}>\n                                                {item.renderer.name}\n                                            </Text>\n                                            <Text\n                                                as={\"div\"}\n                                                size={\"sm\"}\n                                                className={\"text-sm text-neutral-strong text-wrap\"}\n                                            >\n                                                {item.renderer.description}\n                                            </Text>\n                                        </div>\n                                    )\n                                }))}\n                            />\n                        </div>\n                    </Grid.Column>\n                    <RendererOptions plugin={selectedPlugin} />\n                </>\n            </Grid>\n        </>\n    );\n};\n\nexport default AppearanceTab;\n"],"names":["t","i18n","style","css","AppearanceTab","renderers","useRendererPlugins","field","useModelField","rendererName","useBind","validation","selectedPlugin","pl","undefined","Grid","useEffect","console","Heading","Text","RadioGroup","item","RendererOptions"],"mappings":";;;;;;;;;AAUA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,QAAQ;IACV,qBAAqBC,IAAI;QACrB,WAAW;QACX,SAAS;IACb;IACA,gBAAgBA,IAAI;QAChB,cAAc;QACd,SAAS;IACb;AACJ;AAEA,MAAMC,gBAAgB;IAClB,MAAMC,YAAYC;IAClB,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAElB,MAAMC,eAAeC,QAAQ;QACzB,MAAM;QACN,UAAUC,WAAW,MAAM,CAAC;IAChC;IAEA,MAAMC,iBAAiBH,aAAa,KAAK,GACnCJ,UAAU,IAAI,CAACQ,CAAAA,KAAMA,GAAG,QAAQ,CAAC,YAAY,KAAKJ,aAAa,KAAK,IACpEK;IAEN,IAAIT,AAAqB,MAArBA,UAAU,MAAM,EAChB,OAAO,WAAP,GACI,oBAACU,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QACR,MAAM;QACN,WAAWb,MAAM,mBAAmB;OACtCF,CAAC,CAAC,mDAAmD,CAAC;IAKpEgB,UAAU;QAEN,IAAIJ,gBACA;QAGJ,IAAIP,SAAS,CAAC,EAAE,EAAE,YACdI,aAAa,QAAQ,CAACJ,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,YAAY;QAI5DY,QAAQ,IAAI,CAAC,CAAC,uBAAuB,EAAEV,MAAM,OAAO,CAAC,OAAO,CAAC,EAAEA;IACnE,GAAG;QAACA,MAAM,EAAE;QAAEA,MAAM,IAAI;QAAEA,MAAM,gBAAgB,EAAE;QAASK;KAAe;IAE1E,OAAO,WAAP,GACI,wDACI,oBAACG,MAAIA,MAAAA,WAAAA,GACD,wDACI,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACG,SAAOA;QAAC,OAAO;OAAG,iCACnB,oBAACC,MAAIA;QAAC,MAAM;OAAM,kEAEtB,oBAACJ,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC;QAAI,WAAW;qBACZ,oBAACK,YAAUA;QACN,GAAGX,YAAY;QAChB,OAAOJ,UAAU,GAAG,CAACgB,CAAAA,OAAS;gBAC1B,IAAIA,KAAK,QAAQ,CAAC,YAAY;gBAC9B,OAAOA,KAAK,QAAQ,CAAC,YAAY;gBACjC,OAAO,WAAP,GACI,oBAAC,2BACG,oBAACF,MAAIA;oBAAC,IAAI;oBAAO,MAAM;mBAClBE,KAAK,QAAQ,CAAC,IAAI,iBAEvB,oBAACF,MAAIA;oBACD,IAAI;oBACJ,MAAM;oBACN,WAAW;mBAEVE,KAAK,QAAQ,CAAC,WAAW;YAI1C;wBAIZ,oBAACC,iBAAeA;QAAC,QAAQV;;AAK7C;AAEA,sCAAeR"}

package/admin/components/FieldEditor/EditFieldDialog/FieldSettingsTabs.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { CmsModelField } from "../../../../types.js";
+interface FieldSettingsTabsProps {
+    shadowField: CmsModelField;
+    predefinedValuesTabEnabled: boolean;
+    showValidatorsTab: boolean;
+    isSubtypeField: boolean;
+}
+export declare const FieldSettingsTabs: ({ shadowField, predefinedValuesTabEnabled, showValidatorsTab, isSubtypeField }: FieldSettingsTabsProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,70 @@
+import react from "react";
+import { Tabs } from "@webiny/admin-ui";
+import { i18n } from "@webiny/app/i18n/index.js";
+import GeneralTab from "./GeneralTab.js";
+import AppearanceTab from "./AppearanceTab.js";
+import PredefinedValues from "./PredefinedValues.js";
+import { ValidationTab } from "./ValidationTab/index.js";
+import { PermissionsEditor } from "./PermissionsEditor/PermissionsEditor.js";
+import { RulesEditor } from "./RulesEditor/RulesEditor.js";
+import { ModelFieldProvider } from "../../ModelFieldProvider/index.js";
+import { useModelEditor } from "../../ContentModelEditor/useModelEditor.js";
+const t = i18n.namespace("app-headless-cms/admin/components/editor");
+const FieldSettingsTabs = ({ shadowField, predefinedValuesTabEnabled, showValidatorsTab, isSubtypeField })=>{
+    const { fieldOptions } = useModelEditor();
+    return /*#__PURE__*/ react.createElement(ModelFieldProvider, {
+        field: shadowField
+    }, /*#__PURE__*/ react.createElement(Tabs, {
+        spacing: "lg",
+        size: "md",
+        separator: true,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "general",
+                trigger: t`General`,
+                value: "general",
+                content: /*#__PURE__*/ react.createElement(GeneralTab, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "predefined",
+                trigger: t`Predefined values`,
+                value: "predefined",
+                disabled: !predefinedValuesTabEnabled,
+                content: /*#__PURE__*/ react.createElement(PredefinedValues, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "validations",
+                trigger: t`Validations`,
+                value: "validations",
+                content: /*#__PURE__*/ react.createElement(ValidationTab, {
+                    field: shadowField
+                }),
+                visible: showValidatorsTab
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "appearance",
+                trigger: t`Appearance`,
+                value: "Appearance",
+                content: /*#__PURE__*/ react.createElement(AppearanceTab, null),
+                disabled: isSubtypeField
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "permissions",
+                trigger: t`Permissions`,
+                value: "permissions",
+                content: /*#__PURE__*/ react.createElement(PermissionsEditor, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "rules",
+                trigger: t`Rules`,
+                value: "rules",
+                content: /*#__PURE__*/ react.createElement(RulesEditor, {
+                    fieldOptions: fieldOptions
+                })
+            })
+        ]
+    }));
+};
+export { FieldSettingsTabs };
+
+//# sourceMappingURL=FieldSettingsTabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/FieldSettingsTabs.js","sources":["../../../../../src/admin/components/FieldEditor/EditFieldDialog/FieldSettingsTabs.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport GeneralTab from \"./GeneralTab.js\";\nimport AppearanceTab from \"./AppearanceTab.js\";\nimport PredefinedValues from \"./PredefinedValues.js\";\nimport { ValidationTab } from \"./ValidationTab/index.js\";\nimport { PermissionsEditor } from \"./PermissionsEditor/PermissionsEditor.js\";\nimport { RulesEditor } from \"./RulesEditor/RulesEditor.js\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useModelEditor } from \"~/admin/components/ContentModelEditor/useModelEditor.js\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\ninterface FieldSettingsTabsProps {\n    shadowField: CmsModelField;\n    predefinedValuesTabEnabled: boolean;\n    showValidatorsTab: boolean;\n    isSubtypeField: boolean;\n}\n\nexport const FieldSettingsTabs = ({\n    shadowField,\n    predefinedValuesTabEnabled,\n    showValidatorsTab,\n    isSubtypeField\n}: FieldSettingsTabsProps) => {\n    const { fieldOptions } = useModelEditor();\n\n    return (\n        <ModelFieldProvider field={shadowField}>\n            <Tabs\n                spacing={\"lg\"}\n                size={\"md\"}\n                separator\n                tabs={[\n                    <Tabs.Tab\n                        key={\"general\"}\n                        trigger={t`General`}\n                        value={\"general\"}\n                        content={<GeneralTab />}\n                    />,\n                    <Tabs.Tab\n                        key={\"predefined\"}\n                        trigger={t`Predefined values`}\n                        value={\"predefined\"}\n                        disabled={!predefinedValuesTabEnabled}\n                        content={<PredefinedValues />}\n                    />,\n                    <Tabs.Tab\n                        key={\"validations\"}\n                        trigger={t`Validations`}\n                        value={\"validations\"}\n                        content={<ValidationTab field={shadowField} />}\n                        visible={showValidatorsTab}\n                    />,\n                    <Tabs.Tab\n                        key={\"appearance\"}\n                        trigger={t`Appearance`}\n                        value={\"Appearance\"}\n                        content={<AppearanceTab />}\n                        disabled={isSubtypeField}\n                    />,\n                    <Tabs.Tab\n                        key={\"permissions\"}\n                        trigger={t`Permissions`}\n                        value={\"permissions\"}\n                        content={<PermissionsEditor />}\n                    />,\n                    <Tabs.Tab\n                        key={\"rules\"}\n                        trigger={t`Rules`}\n                        value={\"rules\"}\n                        content={<RulesEditor fieldOptions={fieldOptions} />}\n                    />\n                ]}\n            />\n        </ModelFieldProvider>\n    );\n};\n"],"names":["t","i18n","FieldSettingsTabs","shadowField","predefinedValuesTabEnabled","showValidatorsTab","isSubtypeField","fieldOptions","useModelEditor","ModelFieldProvider","Tabs","GeneralTab","PredefinedValues","ValidationTab","AppearanceTab","PermissionsEditor","RulesEditor"],"mappings":";;;;;;;;;;;AAaA,MAAMA,IAAIC,KAAK,SAAS,CAAC;AASlB,MAAMC,oBAAoB,CAAC,EAC9BC,WAAW,EACXC,0BAA0B,EAC1BC,iBAAiB,EACjBC,cAAc,EACO;IACrB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,OAAO,WAAP,GACI,oBAACC,oBAAkBA;QAAC,OAAON;qBACvB,oBAACO,MAAIA;QACD,SAAS;QACT,MAAM;QACN;QACA,MAAM;0BACF,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,OAAO,CAAC;gBACnB,OAAO;gBACP,uBAAS,oBAACW,YAAUA;;0BAExB,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,iBAAiB,CAAC;gBAC7B,OAAO;gBACP,UAAU,CAACI;gBACX,uBAAS,oBAACQ,kBAAgBA;;0BAE9B,oBAACF,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,WAAW,CAAC;gBACvB,OAAO;gBACP,uBAAS,oBAACa,eAAaA;oBAAC,OAAOV;;gBAC/B,SAASE;;0BAEb,oBAACK,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,UAAU,CAAC;gBACtB,OAAO;gBACP,uBAAS,oBAACc,eAAaA;gBACvB,UAAUR;;0BAEd,oBAACI,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,WAAW,CAAC;gBACvB,OAAO;gBACP,uBAAS,oBAACe,mBAAiBA;;0BAE/B,oBAACL,KAAK,GAAG;gBACL,KAAK;gBACL,SAASV,CAAC,CAAC,KAAK,CAAC;gBACjB,OAAO;gBACP,uBAAS,oBAACgB,aAAWA;oBAAC,cAAcT;;;SAE3C;;AAIjB"}

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.d.ts

@@ -1,10 +1,3 @@
 import React from "react";
-import { CmsEditorField, CmsEditorFieldTypePlugin } from "../../../../types";
-import { FormRenderPropParams } from "@webiny/form/types";
-interface GeneralTabProps {
-    field: CmsEditorField;
-    form: FormRenderPropParams;
-    fieldPlugin: CmsEditorFieldTypePlugin;
-}
-declare const GeneralTab: React.FC<GeneralTabProps>;
+declare const GeneralTab: () => React.JSX.Element;
 export default GeneralTab;

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

@@ -1,153 +1,148 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+import zod from "zod";
+import react, { useCallback, useEffect, useMemo, useRef } from "react";
+import camelCase from "lodash/camelCase.js";
+import { Grid, Input, Switch, Tags, Textarea } from "@webiny/admin-ui";
+import { validation } from "@webiny/validation";
+import { Bind, useForm } from "@webiny/form";
+import { useModelFieldEditor } from "../index.js";
+import { useModelEditor, useModelField } from "../../../hooks/index.js";
+const fieldIdSchema = zod.string().max(100).regex(/^!?[a-zA-Z]/, {
+    message: "Must not start with a number."
+}).regex(/^(^[a-zA-Z0-9]+)$/, {
+    message: "Must be alphanumeric string."
 });
-exports.default = void 0;
-
-var _camelCase2 = _interopRequireDefault(require("lodash/camelCase"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Input = require("@webiny/ui/Input");
-
-var _Switch = require("@webiny/ui/Switch");
-
-var _Grid = require("@webiny/ui/Grid");
-
-var _validation = require("@webiny/validation");
-
-var _ = require("./..");
-
-var _useContentModelEditor = require("../../ContentModelEditor/useContentModelEditor");
-
-var GeneralTab = function GeneralTab(_ref) {
-  var field = _ref.field,
-      form = _ref.form,
-      fieldPlugin = _ref.fieldPlugin;
-  var Bind = form.Bind,
-      setValue = form.setValue;
-  var inputRef = (0, _react.useRef)(null);
-
-  var _useContentModelEdito = (0, _useContentModelEditor.useContentModelEditor)(),
-      contentModel = _useContentModelEdito.data;
-
-  var _useFieldEditor = (0, _.useFieldEditor)(),
-      getField = _useFieldEditor.getField; // Had problems with auto-focusing the "label" field. A couple of comments on this.
-  // 1. It's probably caused by the Tabs component which wraps this component.
-  // 2. It seems that the "autoFocus" prop on the Input doesn't work. I can't see it attached in the actual DOM.
-  // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design
-  //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then
-  //    it seems it's behaving correctly. ¯\_(ツ)_/¯
-
-
-  (0, _react.useEffect)(function () {
-    setTimeout(function () {
-      if (!inputRef.current) {
-        return;
-      }
-
-      inputRef.current.focus();
-    }, 200);
-  }, []);
-  var afterChangeLabel = (0, _react.useCallback)(function (value) {
-    setValue("fieldId", (0, _camelCase2.default)(value));
-  }, []);
-  var beforeChangeFieldId = (0, _react.useCallback)(function (value, baseOnChange) {
-    var newValue = value.trim();
-    baseOnChange(newValue);
-  }, []);
-  var fieldIdValidator = (0, _react.useCallback)(function (fieldId) {
-    if (fieldId.trim().toLowerCase() !== "id") {
-      return true;
-    }
-
-    throw new Error("Cannot use \"id\" as Field ID.");
-  }, []);
-  var uniqueFieldIdValidator = (0, _react.useCallback)(function (fieldId) {
-    var existingField = getField({
-      fieldId: fieldId
-    });
-
-    if (!existingField) {
-      return false;
-    }
-
-    if (existingField.id === field.id) {
-      return true;
-    }
-
-    throw new Error("Please enter a unique Field ID.");
-  }, []);
-  var additionalSettings = null;
-
-  if (typeof fieldPlugin.field.renderSettings === "function") {
-    additionalSettings = fieldPlugin.field.renderSettings({
-      form: form,
-      afterChangeLabel: afterChangeLabel,
-      uniqueFieldIdValidator: uniqueFieldIdValidator,
-      contentModel: contentModel
+const GeneralTab = ()=>{
+    const form = useForm();
+    const { field, fieldPlugin } = useModelField();
+    const inputRef = useRef(null);
+    const { data: contentModel } = useModelEditor();
+    const editorContext = useModelFieldEditor();
+    const { getField } = editorContext;
+    useEffect(()=>{
+        setTimeout(()=>{
+            if (!inputRef.current) return;
+            inputRef.current.focus();
+        }, 400);
+    }, []);
+    const afterChangeLabel = useCallback((value)=>{
+        form.setValue("fieldId", camelCase(value));
+    }, []);
+    const beforeChangeFieldId = useCallback((value, baseOnChange)=>{
+        baseOnChange(value.trim());
+    }, []);
+    const fieldIdValidator = useCallback((fieldId)=>{
+        const result = fieldIdSchema.safeParse(fieldId);
+        if (!result.success) throw new Error(result.error.issues[0].message);
+    }, []);
+    const uniqueFieldIdValidator = useCallback((fieldId)=>{
+        const existingField = getField({
+            fieldId
+        });
+        if (existingField && existingField.id !== field.id) throw new Error("Please enter a unique Field ID.");
+        const parent = editorContext.parentEditorContext;
+        if (parent && editorContext.parent && !editorContext.getFieldPlugin(editorContext.parent.type)) {
+            const parentField = parent.getField({
+                fieldId
+            });
+            if (parentField && parentField.id !== field.id) throw new Error("Please enter a unique Field ID.");
+        }
+        return true;
+    }, []);
+    let additionalSettings = null;
+    if ("function" == typeof fieldPlugin.field.renderSettings) additionalSettings = fieldPlugin.field.renderSettings({
+        afterChangeLabel,
+        uniqueFieldIdValidator,
+        contentModel
     });
-  }
-
-  var predefinedValuesEnabled = (0, _react.useMemo)(function () {
-    return fieldPlugin.field.allowPredefinedValues && 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
-  }, /*#__PURE__*/_react.default.createElement(Bind, {
-    name: "label",
-    validators: _validation.validation.create("required"),
-    afterChange: function afterChange(value) {
-      if (field.id) {
-        return;
-      }
-
-      afterChangeLabel(value);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    label: "Label",
-    inputRef: inputRef,
-    "data-testid": "cms.editor.field.settings.general.label"
-  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-    span: 6
-  }, /*#__PURE__*/_react.default.createElement(Bind, {
-    name: "fieldId",
-    validators: [_validation.validation.create("required"), uniqueFieldIdValidator, fieldIdValidator],
-    beforeChange: beforeChangeFieldId
-  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    label: "Field ID",
-    "data-testid": "cms.editor.field.settings.general.label-".concat(field.id)
-  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-    span: 6
-  }, /*#__PURE__*/_react.default.createElement(Bind, {
-    name: "multipleValues"
-  }, /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
-    label: fieldPlugin.field.multipleValuesLabel,
-    disabled: !fieldPlugin.field.allowMultipleValues,
-    "data-testid": "cms.editor.field.settings.general.switch-multiplevalues"
-  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-    span: 6
-  }, /*#__PURE__*/_react.default.createElement(Bind, {
-    name: "predefinedValues.enabled"
-  }, /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
-    label: "Use predefined values",
-    disabled: !predefinedValuesEnabled,
-    "data-testid": "cms.editor.field.settings.general.switch-predefinedvalues"
-  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-    span: 12
-  }, /*#__PURE__*/_react.default.createElement(Bind, {
-    name: "helpText"
-  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    label: "Help text",
-    description: "Help text (optional)",
-    "data-testid": "cms.editor.field.settings.general.helptext"
-  })))), additionalSettings);
+    const predefinedValuesEnabled = useMemo(()=>(fieldPlugin.field.allowPredefinedValues || false) && "function" == typeof fieldPlugin.field.renderPredefinedValues, [
+        field.fieldId
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Grid, {
+        gap: "comfortable"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "label",
+        validators: validation.create("required"),
+        afterChange: (value)=>{
+            if (field.id) return;
+            afterChangeLabel(value);
+        }
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Label",
+        size: "lg",
+        inputRef: inputRef,
+        "data-testid": "cms.editor.field.settings.general.label"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "fieldId",
+        validators: [
+            validation.create("required"),
+            uniqueFieldIdValidator,
+            fieldIdValidator
+        ],
+        beforeChange: beforeChangeFieldId
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Field ID",
+        size: "lg",
+        "data-testid": `cms.editor.field.settings.general.label-${field.id}`
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "list"
+    }, /*#__PURE__*/ react.createElement(Switch, {
+        label: fieldPlugin.field.listLabel,
+        disabled: !fieldPlugin.field.allowList,
+        "data-testid": "cms.editor.field.settings.general.switch-multiplevalues"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "predefinedValues.enabled"
+    }, /*#__PURE__*/ react.createElement(Switch, {
+        label: "Use predefined values",
+        disabled: !predefinedValuesEnabled,
+        "data-testid": "cms.editor.field.settings.general.switch-predefinedvalues"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "description"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Description",
+        description: "This text will be shown below the label (optional)",
+        size: "lg",
+        "data-testid": "cms.editor.field.settings.general.description"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "note"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Note",
+        description: "This text will be shown below the input (optional)",
+        size: "lg",
+        "data-testid": "cms.editor.field.settings.general.note"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "help"
+    }, /*#__PURE__*/ react.createElement(Textarea, {
+        label: "Help",
+        description: "This text will be shown in a tooltip (optional)",
+        size: "lg",
+        "data-testid": "cms.editor.field.settings.general.help"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "tags"
+    }, /*#__PURE__*/ react.createElement(Tags, {
+        label: "Tags",
+        description: "Field tags are useful for developers and are not visible in the UI (optional)",
+        "data-testid": "cms.editor.field.settings.general.tags"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, additionalSettings)));
 };
+const EditFieldDialog_GeneralTab = GeneralTab;
+export default EditFieldDialog_GeneralTab;
 
-var _default = GeneralTab;
-exports.default = _default;
+//# sourceMappingURL=GeneralTab.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["GeneralTab","field","form","fieldPlugin","Bind","setValue","inputRef","useRef","useContentModelEditor","contentModel","data","useFieldEditor","getField","useEffect","setTimeout","current","focus","afterChangeLabel","useCallback","value","beforeChangeFieldId","baseOnChange","newValue","trim","fieldIdValidator","fieldId","toLowerCase","Error","uniqueFieldIdValidator","existingField","id","additionalSettings","renderSettings","predefinedValuesEnabled","useMemo","allowPredefinedValues","renderPredefinedValues","validation","create","multipleValuesLabel","allowMultipleValues"],"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 { CmsEditorField, CmsEditorFieldTypePlugin } from \"~/types\";\nimport { FormRenderPropParams } from \"@webiny/form/types\";\n\nimport { useFieldEditor } from \"~/admin/components/FieldEditor\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\n\ninterface GeneralTabProps {\n    field: CmsEditorField;\n    form: FormRenderPropParams;\n    fieldPlugin: CmsEditorFieldTypePlugin;\n}\n\nconst GeneralTab: React.FC<GeneralTabProps> = ({ field, form, fieldPlugin }) => {\n    const { Bind, setValue } = form;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const { data: contentModel } = useContentModelEditor();\n    const { getField } = useFieldEditor();\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        }, 200);\n    }, []);\n\n    const afterChangeLabel = useCallback((value: string) => {\n        setValue(\"fieldId\", camelCase(value));\n    }, []);\n\n    const beforeChangeFieldId = useCallback(\n        (value: string, baseOnChange: (value: string) => void) => {\n            const newValue = value.trim();\n\n            baseOnChange(newValue);\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            form,\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            </Grid>\n            {additionalSettings}\n        </>\n    );\n};\n\nexport default GeneralTab;\n"],"mappings":"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"}
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/GeneralTab.js","sources":["../../../../../src/admin/components/FieldEditor/EditFieldDialog/GeneralTab.tsx"],"sourcesContent":["import zod from \"zod\";\nimport React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport camelCase from \"lodash/camelCase.js\";\nimport { Grid, Switch, Input, Textarea } from \"@webiny/admin-ui\";\nimport { validation } from \"@webiny/validation\";\nimport { Tags } from \"@webiny/admin-ui\";\nimport { useForm, Bind } from \"@webiny/form\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/index.js\";\nimport { useModelEditor } from \"~/admin/hooks/index.js\";\nimport { useModelField } from \"~/admin/hooks/index.js\";\n\nconst fieldIdSchema = zod\n    .string()\n    .max(100)\n    .regex(/^!?[a-zA-Z]/, {\n        message: `Must not start with a number.`\n    })\n    .regex(/^(^[a-zA-Z0-9]+)$/, {\n        message: `Must be alphanumeric string.`\n    });\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 editorContext = useModelFieldEditor();\n    const { getField } = editorContext;\n\n    // Had problems with autofocusing 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: string) => {\n        const result = fieldIdSchema.safeParse(fieldId);\n\n        if (!result.success) {\n            throw new Error(result.error.issues[0].message);\n        }\n    }, []);\n\n    const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n        // Check the current context.\n        const existingField = getField({ fieldId });\n        if (existingField && existingField.id !== field.id) {\n            throw new Error(\"Please enter a unique Field ID.\");\n        }\n\n        // If we're inside a layout field (e.g. a tab), also check the parent context\n        // where hoisted fields live. A layout field context has a parent with no\n        // registered field type plugin (synthetic parent).\n        const parent = editorContext.parentEditorContext;\n        if (\n            parent &&\n            editorContext.parent &&\n            !editorContext.getFieldPlugin(editorContext.parent.type)\n        ) {\n            const parentField = parent.getField({ fieldId });\n            if (parentField && parentField.id !== field.id) {\n                throw new Error(\"Please enter a unique Field ID.\");\n            }\n        }\n\n        return true;\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 gap={\"comfortable\"}>\n                <Grid.Column 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                            size={\"lg\"}\n                            inputRef={inputRef}\n                            data-testid=\"cms.editor.field.settings.general.label\"\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column 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                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n                        />\n                    </Bind>\n                </Grid.Column>\n\n                <Grid.Column span={6}>\n                    <Bind name={\"list\"}>\n                        <Switch\n                            label={fieldPlugin.field.listLabel}\n                            disabled={!fieldPlugin.field.allowList}\n                            data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column 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                </Grid.Column>\n\n                <Grid.Column span={12}>\n                    <Bind name={\"description\"}>\n                        <Input\n                            label={\"Description\"}\n                            description={\"This text will be shown below the label (optional)\"}\n                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.description`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Bind name={\"note\"}>\n                        <Input\n                            label={\"Note\"}\n                            description={\"This text will be shown below the input (optional)\"}\n                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.note`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Bind name={\"help\"}>\n                        <Textarea\n                            label={\"Help\"}\n                            description={\"This text will be shown in a tooltip (optional)\"}\n                            size={\"lg\"}\n                            data-testid={`cms.editor.field.settings.general.help`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Bind name={\"tags\"}>\n                        <Tags\n                            label={\"Tags\"}\n                            description={\n                                \"Field tags are useful for developers and are not visible in the UI (optional)\"\n                            }\n                            data-testid={`cms.editor.field.settings.general.tags`}\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>{additionalSettings}</Grid.Column>\n            </Grid>\n        </>\n    );\n};\n\nexport default GeneralTab;\n"],"names":["fieldIdSchema","zod","GeneralTab","form","useForm","field","fieldPlugin","useModelField","inputRef","useRef","contentModel","useModelEditor","editorContext","useModelFieldEditor","getField","useEffect","setTimeout","afterChangeLabel","useCallback","value","camelCase","beforeChangeFieldId","baseOnChange","fieldIdValidator","fieldId","result","Error","uniqueFieldIdValidator","existingField","parent","parentField","additionalSettings","predefinedValuesEnabled","useMemo","Grid","Bind","validation","Input","Switch","Textarea","Tags"],"mappings":"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"}

package/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/CannotUsePermissions.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const CannotUsePermissions: () => React.JSX.Element;

package/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/CannotUsePermissions.js

@@ -0,0 +1,13 @@
+import react from "react";
+import { Alert } from "@webiny/admin-ui";
+const CannotUsePermissions = ()=>/*#__PURE__*/ react.createElement(Alert, {
+        title: "Field Permissions feature is not activated",
+        type: "warning"
+    }, /*#__PURE__*/ react.createElement("strong", null, "Field Permissions"), " feature is not activated.", /*#__PURE__*/ react.createElement("br", null), /*#__PURE__*/ react.createElement("br", null), "To learn more, please visit the official\xa0", /*#__PURE__*/ react.createElement("a", {
+        href: "https://webiny.link/aacl",
+        target: "_blank",
+        rel: "noreferrer"
+    }, "documentation"), ".");
+export { CannotUsePermissions };
+
+//# sourceMappingURL=CannotUsePermissions.js.map

package/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/CannotUsePermissions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/CannotUsePermissions.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/CannotUsePermissions.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/admin-ui\";\n\nexport const CannotUsePermissions = () => {\n    return (\n        <Alert title={\"Field Permissions feature is not activated\"} type={\"warning\"}>\n            <strong>Field Permissions</strong> feature is not activated.\n            <br />\n            <br />\n            To learn more, please visit the official&nbsp;\n            <a href={\"https://webiny.link/aacl\"} target={\"_blank\"} rel={\"noreferrer\"}>\n                documentation\n            </a>\n            .\n        </Alert>\n    );\n};\n"],"names":["CannotUsePermissions","Alert"],"mappings":";;AAGO,MAAMA,uBAAuB,IACzB,WAAP,GACI,oBAACC,OAAKA;QAAC,OAAO;QAA8C,MAAM;qBAC9D,oBAAC,gBAAO,sBAA0B,4CAClC,oBAAC,2BACD,oBAAC,aAAK,8DAEN,oBAAC;QAAE,MAAM;QAA4B,QAAQ;QAAU,KAAK;OAAc,kBAEtE"}

package/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/FieldPermissionsSelection.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { FolderLevelPermissionsTarget } from "@webiny/app-aco";
+import type { FieldRule } from "../../../../../types.js";
+interface FieldPermissionsSelectionProps {
+    targetsList: FolderLevelPermissionsTarget[];
+    rules: FieldRule[];
+    onRemoveAccess: (params: {
+        rule: FieldRule;
+    }) => void;
+    onUpdatePermission: (params: {
+        rule: FieldRule;
+    }) => void;
+}
+export declare const FieldPermissionsSelection: ({ rules, targetsList, onRemoveAccess, onUpdatePermission }: FieldPermissionsSelectionProps) => React.JSX.Element;
+export {};