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

package/admin/components/ContentEntryForm/CustomLayout.js

@@ -10,13 +10,7 @@ export const CustomLayout = ({
   } = useForm();
   const fields = model.fields.reduce((acc, field) => {
     acc[field.fieldId] = /*#__PURE__*/React.createElement(FieldElement, {
-      field: field
-      /**
-       * TODO @ts-refactor
-       * Figure out type for Bind.
-       */
-      // @ts-expect-error
-      ,
+      field: field,
       Bind: Bind,
       contentModel: model
     });
@@ -26,12 +20,7 @@ export const CustomLayout = ({
     data,
     contentModel: model,
     fields,
-    /**
-     * TODO @ts-refactor
-     * Figure out type for Bind.
-     */
-    // @ts-expect-error
-    Bind
+    Bind: Bind
   }));
 };
 

package/admin/components/ContentEntryForm/CustomLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Bind","useForm","FieldElement","CustomLayout","model","formRenderer","data","fields","reduce","acc","field","fieldId","createElement","contentModel","Fragment","render"],"sources":["CustomLayout.tsx"],"sourcesContent":["import React from \"react\";\nimport { Bind, useForm } from \"@webiny/form\";\nimport type {\n    CmsContentFormRendererPlugin,\n    CmsModel\n} from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { FieldElement } from \"~/admin/components/ContentEntryForm/FieldElement.js\";\n\ninterface CustomLayoutProps {\n    model: CmsModel;\n    formRenderer: CmsContentFormRendererPlugin;\n}\n\nexport const CustomLayout = ({ model, formRenderer }: CustomLayoutProps) => {\n    const { data } = useForm();\n\n    const fields = model.fields.reduce(\n        (acc, field) => {\n            acc[field.fieldId] = (\n                <FieldElement\n                    field={field}\n                    /**\n                     * TODO @ts-refactor\n                     * Figure out type for Bind.\n                     */\n                    // @ts-expect-error\n                    Bind={Bind}\n                    contentModel={model}\n                />\n            );\n\n            return acc;\n        },\n        {} as Record<string, React.ReactElement>\n    );\n\n    return (\n        <>\n            {formRenderer.render({\n                data,\n                contentModel: model,\n                fields,\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                // @ts-expect-error\n                Bind\n            })}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,OAAO,QAAQ,cAAc;AAK5C,SAASC,YAAY;AAOrB,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAgC,CAAC,KAAK;EACxE,MAAM;IAAEC;EAAK,CAAC,GAAGL,OAAO,CAAC,CAAC;EAE1B,MAAMM,MAAM,GAAGH,KAAK,CAACG,MAAM,CAACC,MAAM,CAC9B,CAACC,GAAG,EAAEC,KAAK,KAAK;IACZD,GAAG,CAACC,KAAK,CAACC,OAAO,CAAC,gBACdZ,KAAA,CAAAa,aAAA,CAACV,YAAY;MACTQ,KAAK,EAAEA;MACP;AACpB;AACA;AACA;MACoB;MAAA;MACAV,IAAI,EAAEA,IAAK;MACXa,YAAY,EAAET;IAAM,CACvB,CACJ;IAED,OAAOK,GAAG;EACd,CAAC,EACD,CAAC,CACL,CAAC;EAED,oBACIV,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAe,QAAA,QACKT,YAAY,CAACU,MAAM,CAAC;IACjBT,IAAI;IACJO,YAAY,EAAET,KAAK;IACnBG,MAAM;IACN;AAChB;AACA;AACA;IACgB;IACAP;EACJ,CAAC,CACH,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Bind","useForm","FieldElement","CustomLayout","model","formRenderer","data","fields","reduce","acc","field","fieldId","createElement","contentModel","Fragment","render"],"sources":["CustomLayout.tsx"],"sourcesContent":["import React from \"react\";\nimport { Bind, useForm } from \"@webiny/form\";\nimport type {\n    BindComponent,\n    CmsContentFormRendererPlugin,\n    CmsModel\n} from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { FieldElement } from \"~/admin/components/ContentEntryForm/FieldElement.js\";\n\ninterface CustomLayoutProps {\n    model: CmsModel;\n    formRenderer: CmsContentFormRendererPlugin;\n}\n\nexport const CustomLayout = ({ model, formRenderer }: CustomLayoutProps) => {\n    const { data } = useForm();\n\n    const fields = model.fields.reduce(\n        (acc, field) => {\n            acc[field.fieldId] = (\n                <FieldElement field={field} Bind={Bind as BindComponent} contentModel={model} />\n            );\n\n            return acc;\n        },\n        {} as Record<string, React.ReactElement>\n    );\n\n    return (\n        <>\n            {formRenderer.render({\n                data,\n                contentModel: model,\n                fields,\n                Bind: Bind as BindComponent\n            })}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,OAAO,QAAQ,cAAc;AAM5C,SAASC,YAAY;AAOrB,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAgC,CAAC,KAAK;EACxE,MAAM;IAAEC;EAAK,CAAC,GAAGL,OAAO,CAAC,CAAC;EAE1B,MAAMM,MAAM,GAAGH,KAAK,CAACG,MAAM,CAACC,MAAM,CAC9B,CAACC,GAAG,EAAEC,KAAK,KAAK;IACZD,GAAG,CAACC,KAAK,CAACC,OAAO,CAAC,gBACdZ,KAAA,CAAAa,aAAA,CAACV,YAAY;MAACQ,KAAK,EAAEA,KAAM;MAACV,IAAI,EAAEA,IAAsB;MAACa,YAAY,EAAET;IAAM,CAAE,CAClF;IAED,OAAOK,GAAG;EACd,CAAC,EACD,CAAC,CACL,CAAC;EAED,oBACIV,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAe,QAAA,QACKT,YAAY,CAACU,MAAM,CAAC;IACjBT,IAAI;IACJO,YAAY,EAAET,KAAK;IACnBG,MAAM;IACNP,IAAI,EAAEA;EACV,CAAC,CACH,CAAC;AAEX,CAAC","ignoreList":[]}

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

@@ -5,8 +5,8 @@ import GeneralTab from "./GeneralTab.js";
 import AppearanceTab from "./AppearanceTab.js";
 import PredefinedValues from "./PredefinedValues.js";
 import { ValidationTab } from "./ValidationTab/index.js";
-import { PermissionsTab } from "./PermissionsTab/PermissionsTab.js";
-import { RulesTab } from "./RulesTab/RulesTab.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");
@@ -54,12 +54,12 @@ export const FieldSettingsTabs = ({
       key: "permissions",
       trigger: t`Permissions`,
       value: "permissions",
-      content: /*#__PURE__*/React.createElement(PermissionsTab, null)
+      content: /*#__PURE__*/React.createElement(PermissionsEditor, null)
     }), /*#__PURE__*/React.createElement(Tabs.Tab, {
       key: "rules",
       trigger: t`Rules`,
       value: "rules",
-      content: /*#__PURE__*/React.createElement(RulesTab, {
+      content: /*#__PURE__*/React.createElement(RulesEditor, {
         fieldOptions: fieldOptions
       })
     })]

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

@@ -1 +1 @@
-{"version":3,"names":["React","Tabs","i18n","GeneralTab","AppearanceTab","PredefinedValues","ValidationTab","PermissionsTab","RulesTab","ModelFieldProvider","useModelEditor","t","namespace","FieldSettingsTabs","shadowField","predefinedValuesTabEnabled","showValidatorsTab","isSubtypeField","fieldOptions","createElement","field","spacing","size","separator","tabs","Tab","key","trigger","value","content","disabled","visible"],"sources":["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 { PermissionsTab } from \"./PermissionsTab/PermissionsTab.js\";\nimport { RulesTab } from \"./RulesTab/RulesTab.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={<PermissionsTab />}\n                    />,\n                    <Tabs.Tab\n                        key={\"rules\"}\n                        trigger={t`Rules`}\n                        value={\"rules\"}\n                        content={<RulesTab fieldOptions={fieldOptions} />}\n                    />\n                ]}\n            />\n        </ModelFieldProvider>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,OAAOC,UAAU;AACjB,OAAOC,aAAa;AACpB,OAAOC,gBAAgB;AACvB,SAASC,aAAa;AACtB,SAASC,cAAc;AACvB,SAASC,QAAQ;AACjB,SAASC,kBAAkB;AAC3B,SAASC,cAAc;AAEvB,MAAMC,CAAC,GAAGT,IAAI,CAACU,SAAS,CAAC,0CAA0C,CAAC;AASpE,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAC9BC,WAAW;EACXC,0BAA0B;EAC1BC,iBAAiB;EACjBC;AACoB,CAAC,KAAK;EAC1B,MAAM;IAAEC;EAAa,CAAC,GAAGR,cAAc,CAAC,CAAC;EAEzC,oBACIV,KAAA,CAAAmB,aAAA,CAACV,kBAAkB;IAACW,KAAK,EAAEN;EAAY,gBACnCd,KAAA,CAAAmB,aAAA,CAAClB,IAAI;IACDoB,OAAO,EAAE,IAAK;IACdC,IAAI,EAAE,IAAK;IACXC,SAAS;IACTC,IAAI,EAAE,cACFxB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,SAAU;MACfC,OAAO,EAAEhB,CAAC,SAAU;MACpBiB,KAAK,EAAE,SAAU;MACjBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAAChB,UAAU,MAAE;IAAE,CAC3B,CAAC,eACFH,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,YAAa;MAClBC,OAAO,EAAEhB,CAAC,mBAAoB;MAC9BiB,KAAK,EAAE,YAAa;MACpBE,QAAQ,EAAE,CAACf,0BAA2B;MACtCc,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACd,gBAAgB,MAAE;IAAE,CACjC,CAAC,eACFL,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,aAAc;MACnBC,OAAO,EAAEhB,CAAC,aAAc;MACxBiB,KAAK,EAAE,aAAc;MACrBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACb,aAAa;QAACc,KAAK,EAAEN;MAAY,CAAE,CAAE;MAC/CiB,OAAO,EAAEf;IAAkB,CAC9B,CAAC,eACFhB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,YAAa;MAClBC,OAAO,EAAEhB,CAAC,YAAa;MACvBiB,KAAK,EAAE,YAAa;MACpBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACf,aAAa,MAAE,CAAE;MAC3B0B,QAAQ,EAAEb;IAAe,CAC5B,CAAC,eACFjB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,aAAc;MACnBC,OAAO,EAAEhB,CAAC,aAAc;MACxBiB,KAAK,EAAE,aAAc;MACrBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACZ,cAAc,MAAE;IAAE,CAC/B,CAAC,eACFP,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,OAAQ;MACbC,OAAO,EAAEhB,CAAC,OAAQ;MAClBiB,KAAK,EAAE,OAAQ;MACfC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACX,QAAQ;QAACU,YAAY,EAAEA;MAAa,CAAE;IAAE,CACrD,CAAC;EACJ,CACL,CACe,CAAC;AAE7B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Tabs","i18n","GeneralTab","AppearanceTab","PredefinedValues","ValidationTab","PermissionsEditor","RulesEditor","ModelFieldProvider","useModelEditor","t","namespace","FieldSettingsTabs","shadowField","predefinedValuesTabEnabled","showValidatorsTab","isSubtypeField","fieldOptions","createElement","field","spacing","size","separator","tabs","Tab","key","trigger","value","content","disabled","visible"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,OAAOC,UAAU;AACjB,OAAOC,aAAa;AACpB,OAAOC,gBAAgB;AACvB,SAASC,aAAa;AACtB,SAASC,iBAAiB;AAC1B,SAASC,WAAW;AACpB,SAASC,kBAAkB;AAC3B,SAASC,cAAc;AAEvB,MAAMC,CAAC,GAAGT,IAAI,CAACU,SAAS,CAAC,0CAA0C,CAAC;AASpE,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAC9BC,WAAW;EACXC,0BAA0B;EAC1BC,iBAAiB;EACjBC;AACoB,CAAC,KAAK;EAC1B,MAAM;IAAEC;EAAa,CAAC,GAAGR,cAAc,CAAC,CAAC;EAEzC,oBACIV,KAAA,CAAAmB,aAAA,CAACV,kBAAkB;IAACW,KAAK,EAAEN;EAAY,gBACnCd,KAAA,CAAAmB,aAAA,CAAClB,IAAI;IACDoB,OAAO,EAAE,IAAK;IACdC,IAAI,EAAE,IAAK;IACXC,SAAS;IACTC,IAAI,EAAE,cACFxB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,SAAU;MACfC,OAAO,EAAEhB,CAAC,SAAU;MACpBiB,KAAK,EAAE,SAAU;MACjBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAAChB,UAAU,MAAE;IAAE,CAC3B,CAAC,eACFH,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,YAAa;MAClBC,OAAO,EAAEhB,CAAC,mBAAoB;MAC9BiB,KAAK,EAAE,YAAa;MACpBE,QAAQ,EAAE,CAACf,0BAA2B;MACtCc,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACd,gBAAgB,MAAE;IAAE,CACjC,CAAC,eACFL,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,aAAc;MACnBC,OAAO,EAAEhB,CAAC,aAAc;MACxBiB,KAAK,EAAE,aAAc;MACrBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACb,aAAa;QAACc,KAAK,EAAEN;MAAY,CAAE,CAAE;MAC/CiB,OAAO,EAAEf;IAAkB,CAC9B,CAAC,eACFhB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,YAAa;MAClBC,OAAO,EAAEhB,CAAC,YAAa;MACvBiB,KAAK,EAAE,YAAa;MACpBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACf,aAAa,MAAE,CAAE;MAC3B0B,QAAQ,EAAEb;IAAe,CAC5B,CAAC,eACFjB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,aAAc;MACnBC,OAAO,EAAEhB,CAAC,aAAc;MACxBiB,KAAK,EAAE,aAAc;MACrBC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACZ,iBAAiB,MAAE;IAAE,CAClC,CAAC,eACFP,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACwB,GAAG;MACLC,GAAG,EAAE,OAAQ;MACbC,OAAO,EAAEhB,CAAC,OAAQ;MAClBiB,KAAK,EAAE,OAAQ;MACfC,OAAO,eAAE7B,KAAA,CAAAmB,aAAA,CAACX,WAAW;QAACU,YAAY,EAAEA;MAAa,CAAE;IAAE,CACxD,CAAC;EACJ,CACL,CACe,CAAC;AAE7B,CAAC","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/{PermissionsTab → PermissionsEditor}/FieldPermissionsSelection.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { ReactComponent as More } from "@webiny/icons/arrow_drop_down.svg";
-import { Button, DropdownMenu, List, Scrollbar, Text, Avatar } from "@webiny/admin-ui";
+import { Button, DropdownMenu, List, Text, Avatar } from "@webiny/admin-ui";
 const FIELD_ACCESS_LEVELS = [{
   id: "hide",
   label: "No Access",
@@ -105,14 +105,11 @@ export const FieldPermissionsSelection = ({
     }
     return null;
   }).filter(Boolean);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+  const hasRules = selection.length > 0;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasRules ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
     className: "mb-md"
-  }, "People and teams with access"), /*#__PURE__*/React.createElement(Scrollbar, {
-    style: {
-      minHeight: "100px"
-    }
-  }, /*#__PURE__*/React.createElement(List, null, selection?.map(item => /*#__PURE__*/React.createElement(List.Item, {
+  }, "People and teams with access") : null, /*#__PURE__*/React.createElement(List, null, selection?.map(item => /*#__PURE__*/React.createElement(List.Item, {
     key: String(item.rule.value),
     title: /*#__PURE__*/React.createElement(ListItemText, {
       target: item.target
@@ -125,7 +122,7 @@ export const FieldPermissionsSelection = ({
       onRemoveAccess: onRemoveAccess,
       onUpdatePermission: onUpdatePermission
     })
-  })))));
+  }))));
 };
 
 //# sourceMappingURL=FieldPermissionsSelection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","ReactComponent","More","Button","DropdownMenu","List","Text","Avatar","FIELD_ACCESS_LEVELS","id","label","description","ListItemGraphic","target","type","createElement","size","image","Image","src","meta","alt","fallback","Fallback","delayMs","name","charAt","ListItemText","as","className","email","Fragment","ListItemMeta","rule","onRemoveAccess","onUpdatePermission","currentLevel","find","level","action","handle","variant","text","icon","iconPosition","trigger","map","CheckboxItem","key","checked","onClick","setTimeout","Separator","Item","FieldPermissionsSelection","rules","targetsList","selection","u","String","value","filter","Boolean","hasRules","length","item","title","actions"],"sources":["FieldPermissionsSelection.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ReactComponent as More } from \"@webiny/icons/arrow_drop_down.svg\";\nimport { Button, DropdownMenu, List, Text, Avatar } from \"@webiny/admin-ui\";\nimport type { FolderLevelPermissionsTarget } from \"@webiny/app-aco\";\nimport type { FieldRule } from \"~/types.js\";\n\nconst FIELD_ACCESS_LEVELS = [\n    {\n        id: \"hide\",\n        label: \"No Access\",\n        description: \"Hide this field from the user.\"\n    },\n    {\n        id: \"disable\",\n        label: \"Viewer (Read-only)\",\n        description: \"Allow the user to read, but not edit, this field.\"\n    }\n];\n\ninterface FieldPermissionsSelectionProps {\n    targetsList: FolderLevelPermissionsTarget[];\n    rules: FieldRule[];\n    onRemoveAccess: (params: { rule: FieldRule }) => void;\n    onUpdatePermission: (params: { rule: FieldRule }) => void;\n}\n\ntype Selection = Array<{ rule: FieldRule; target: FolderLevelPermissionsTarget }>;\n\ninterface ListItemGraphicProps {\n    target: FolderLevelPermissionsTarget;\n}\n\nconst ListItemGraphic = ({ target }: ListItemGraphicProps) => {\n    if (target.type === \"admin\") {\n        return (\n            <Avatar\n                size={\"md\"}\n                image={<Avatar.Image src={target.meta.image} alt={\"User's avatar.\"} />}\n                fallback={<Avatar.Fallback delayMs={0}>{target.name.charAt(0)}</Avatar.Fallback>}\n            />\n        );\n    }\n\n    return (\n        <Avatar\n            size={\"md\"}\n            fallback={<Avatar.Fallback delayMs={0}>{target.name.charAt(0)}</Avatar.Fallback>}\n        />\n    );\n};\n\ninterface ListItemTextProps {\n    target: FolderLevelPermissionsTarget;\n}\n\nconst ListItemText = ({ target }: ListItemTextProps) => {\n    if (target.type === \"admin\") {\n        return (\n            <div>\n                <Text as=\"div\">{target.name}</Text>\n                <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong font-normal\"}>\n                    {target.meta.email || \"E-mail not available.\"}\n                </Text>\n            </div>\n        );\n    }\n\n    return <>{target.name}</>;\n};\n\ninterface ListItemMetaProps {\n    rule: FieldRule;\n    onRemoveAccess: (params: { rule: FieldRule }) => void;\n    onUpdatePermission: (params: { rule: FieldRule }) => void;\n}\n\nconst ListItemMeta = ({ rule, onRemoveAccess, onUpdatePermission }: ListItemMetaProps) => {\n    const currentLevel = useMemo(() => {\n        return FIELD_ACCESS_LEVELS.find(level => level.id === rule.action)!;\n    }, [rule.action]);\n\n    const handle = (\n        <Button variant={\"ghost\"} text={currentLevel.label} icon={<More />} iconPosition={\"end\"} />\n    );\n\n    return (\n        <DropdownMenu trigger={handle}>\n            {FIELD_ACCESS_LEVELS.map(level => (\n                <DropdownMenu.CheckboxItem\n                    key={level.id}\n                    checked={currentLevel.id === level.id}\n                    text={\n                        <div>\n                            <Text as={\"div\"}>{level.label}</Text>\n                            <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong\"}>\n                                {level.description}\n                            </Text>\n                        </div>\n                    }\n                    onClick={() => {\n                        setTimeout(() => {\n                            onUpdatePermission({\n                                rule: {\n                                    ...rule,\n                                    action: level.id\n                                }\n                            });\n                        }, 75);\n                    }}\n                />\n            ))}\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item\n                onClick={() => onRemoveAccess({ rule })}\n                text={\"Remove permission\"}\n            />\n        </DropdownMenu>\n    );\n};\n\nexport const FieldPermissionsSelection = ({\n    rules = [],\n    targetsList,\n    onRemoveAccess,\n    onUpdatePermission\n}: FieldPermissionsSelectionProps) => {\n    const selection = rules\n        .map(rule => {\n            const target = targetsList.find(u => u.target === String(rule.value));\n            if (target) {\n                return { rule, target };\n            }\n\n            return null;\n        })\n        .filter(Boolean) as Selection;\n\n    const hasRules = selection.length > 0;\n\n    return (\n        <>\n            {hasRules ? (\n                <Text as={\"div\"} className={\"mb-md\"}>\n                    People and teams with access\n                </Text>\n            ) : null}\n            <List>\n                {selection?.map(item => (\n                    <List.Item\n                        key={String(item.rule.value)}\n                        title={<ListItemText target={item.target} />}\n                        icon={<ListItemGraphic target={item.target} />}\n                        actions={\n                            <ListItemMeta\n                                rule={item.rule}\n                                onRemoveAccess={onRemoveAccess}\n                                onUpdatePermission={onUpdatePermission}\n                            />\n                        }\n                    />\n                ))}\n            </List>\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

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

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

package/admin/components/FieldEditor/EditFieldDialog/{PermissionsTab/PermissionsTab.js → PermissionsEditor/PermissionsEditor.js}

@@ -6,9 +6,7 @@ import { useWcp } from "@webiny/app-admin";
 import { LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS, UsersTeamsMultiAutocomplete } from "@webiny/app-aco";
 import { FieldPermissionsSelection } from "./FieldPermissionsSelection.js";
 import { CannotUsePermissions } from "./CannotUsePermissions.js";
-export const PermissionsTab = ({
-  gridClassName
-}) => {
+export const PermissionsEditor = () => {
   const wcp = useWcp();
   const bind = useBind({
     name: "rules"
@@ -47,15 +45,11 @@ export const PermissionsTab = ({
     bind.onChange([...otherRules, ...updatedAccessRules]);
   };
   if (!wcp.canUseHcmsFieldPermissions()) {
-    return /*#__PURE__*/React.createElement(Grid, {
-      className: gridClassName
-    }, /*#__PURE__*/React.createElement(Grid.Column, {
+    return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
       span: 12
     }, /*#__PURE__*/React.createElement(CannotUsePermissions, null)));
   }
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: gridClassName
-  }, /*#__PURE__*/React.createElement(Grid.Column, {
+  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
     span: 12
   }, /*#__PURE__*/React.createElement(UsersTeamsMultiAutocomplete, {
     options: targetsList,
@@ -71,4 +65,4 @@ export const PermissionsTab = ({
   })));
 };
 
-//# sourceMappingURL=PermissionsTab.js.map
+//# sourceMappingURL=PermissionsEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useQuery","Grid","useBind","useWcp","LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS","UsersTeamsMultiAutocomplete","FieldPermissionsSelection","CannotUsePermissions","PermissionsEditor","wcp","bind","name","allRules","value","accessRules","filter","r","type","otherRules","listTargetsQuery","targetsList","data","aco","listFolderLevelPermissionsTargets","addPermission","selectedUserOrTeam","length","newRule","target","operator","action","onChange","updatePermission","rule","updatedRule","updatedAccessRules","map","removeUserTeam","removedRule","canUseHcmsFieldPermissions","createElement","Column","span","options","String","rules","onRemoveAccess","onUpdatePermission"],"sources":["PermissionsEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { useQuery } from \"@apollo/react-hooks\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { useWcp } from \"@webiny/app-admin\";\nimport {\n    LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS,\n    UsersTeamsMultiAutocomplete\n} from \"@webiny/app-aco\";\nimport type { FolderLevelPermissionsTarget } from \"@webiny/app-aco\";\nimport type { FieldRule } from \"~/types.js\";\nimport { FieldPermissionsSelection } from \"./FieldPermissionsSelection.js\";\nimport { CannotUsePermissions } from \"./CannotUsePermissions.js\";\n\nexport const PermissionsEditor = () => {\n    const wcp = useWcp();\n    const bind = useBind({ name: \"rules\" });\n    const allRules: FieldRule[] = bind.value || [];\n    const accessRules = allRules.filter(r => r.type === \"accessControl\");\n    const otherRules = allRules.filter(r => r.type !== \"accessControl\");\n\n    const listTargetsQuery = useQuery(LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS);\n    const targetsList: FolderLevelPermissionsTarget[] =\n        listTargetsQuery.data?.aco.listFolderLevelPermissionsTargets.data || [];\n\n    const addPermission = (value: string[]) => {\n        const selectedUserOrTeam = value[value.length - 1];\n        const newRule: FieldRule = {\n            type: \"accessControl\",\n            target: \"identity\",\n            operator: \"matches\",\n            value: selectedUserOrTeam,\n            action: \"disable\"\n        };\n\n        bind.onChange([...otherRules, ...accessRules, newRule]);\n    };\n\n    const updatePermission = ({ rule: updatedRule }: { rule: FieldRule }) => {\n        const updatedAccessRules = accessRules.map(rule => {\n            if (rule.value === updatedRule.value) {\n                return updatedRule;\n            }\n            return rule;\n        });\n        bind.onChange([...otherRules, ...updatedAccessRules]);\n    };\n\n    const removeUserTeam = ({ rule: removedRule }: { rule: FieldRule }) => {\n        const updatedAccessRules = accessRules.filter(rule => rule.value !== removedRule.value);\n        bind.onChange([...otherRules, ...updatedAccessRules]);\n    };\n\n    if (!wcp.canUseHcmsFieldPermissions()) {\n        return (\n            <Grid>\n                <Grid.Column span={12}>\n                    <CannotUsePermissions />\n                </Grid.Column>\n            </Grid>\n        );\n    }\n\n    return (\n        <Grid>\n            <Grid.Column span={12}>\n                <UsersTeamsMultiAutocomplete\n                    options={targetsList}\n                    value={accessRules.map(\n                        rule => String(rule.value) as `admin:${string}` | `team:${string}`\n                    )}\n                    onChange={addPermission}\n                />\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <FieldPermissionsSelection\n                    rules={accessRules}\n                    targetsList={targetsList}\n                    onRemoveAccess={removeUserTeam}\n                    onUpdatePermission={updatePermission}\n                />\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/{RulesTab/RulesTab.d.ts → RulesEditor/RulesEditor.d.ts}

@@ -5,9 +5,8 @@ interface ActionOption {
     label: string;
 }
 interface RulesTabProps {
-    gridClassName?: string;
     fieldOptions: FieldOption[];
     actionOptions?: ActionOption[];
 }
-export declare const RulesTab: ({ gridClassName, fieldOptions, actionOptions }: RulesTabProps) => React.JSX.Element;
+export declare const RulesEditor: ({ fieldOptions, actionOptions }: RulesTabProps) => React.JSX.Element;
 export {};

package/admin/components/FieldEditor/EditFieldDialog/{RulesTab/RulesTab.js → RulesEditor/RulesEditor.js}

@@ -146,8 +146,7 @@ const RuleRow = ({
     variant: "ghost"
   }))));
 };
-export const RulesTab = ({
-  gridClassName,
+export const RulesEditor = ({
   fieldOptions,
   actionOptions = DEFAULT_ACTION_OPTIONS
 }) => {
@@ -175,9 +174,7 @@ export const RulesTab = ({
   const removeRule = index => {
     bind.onChange([...otherRules, ...entryRules.filter((_, i) => i !== index)]);
   };
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: gridClassName
-  }, /*#__PURE__*/React.createElement(Grid.Column, {
+  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
     span: 12
   }, entryRules.map((rule, index) => /*#__PURE__*/React.createElement(RuleRow, {
     key: index,
@@ -200,4 +197,4 @@ export const RulesTab = ({
   }))));
 };
 
-//# sourceMappingURL=RulesTab.js.map
+//# sourceMappingURL=RulesEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","Grid","Select","Input","Button","Separator","useBind","ReactComponent","DeleteIcon","AddIcon","getOperatorOptions","VALUE_HIDDEN_OPERATORS","DEFAULT_ACTION_OPTIONS","value","label","RuleRow","rule","index","fieldOptions","actionOptions","onChange","onRemove","selectedFieldOption","find","o","target","operatorOptions","fieldType","operatorSelectOptions","map","fieldSelectOptions","showValue","operator","has","handleFieldChange","newTarget","newFieldOption","newOps","currentOpValid","some","handleOperatorChange","op","handleValueChange","parsed","num","Number","isNaN","handleActionChange","action","isBooleanField","createElement","Fragment","className","variant","labelPosition","Column","span","displayResetAction","options","disabled","String","type","containerClassName","text","icon","onClick","RulesEditor","bind","name","allRules","entryRules","filter","r","otherRules","addRule","newRule","updateRule","updated","next","removeRule","_","i","key","length","size"],"sources":["RulesEditor.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { Grid, Select, Input, Button, Separator } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { FieldRule, FieldRuleAction } from \"~/types.js\";\nimport type { FieldOption } from \"@webiny/app-headless-cms-common/Fields/fieldOptions.js\";\nimport {\n    getOperatorOptions,\n    VALUE_HIDDEN_OPERATORS\n} from \"@webiny/app-headless-cms-common/Fields/operatorOptions.js\";\nimport type { Operator } from \"@webiny/app-headless-cms-common/Fields/evaluateExpression.js\";\n\nconst DEFAULT_ACTION_OPTIONS = [\n    { value: \"hide\", label: \"Hide\" },\n    { value: \"disable\", label: \"Disable\" }\n];\n\ninterface ActionOption {\n    value: string;\n    label: string;\n}\n\ninterface RuleRowProps {\n    rule: FieldRule;\n    index: number;\n    fieldOptions: FieldOption[];\n    actionOptions: ActionOption[];\n    onChange: (index: number, updated: FieldRule) => void;\n    onRemove: (index: number) => void;\n}\n\nconst RuleRow = ({\n    rule,\n    index,\n    fieldOptions,\n    actionOptions,\n    onChange,\n    onRemove\n}: RuleRowProps) => {\n    const selectedFieldOption = useMemo(\n        () => fieldOptions.find(o => o.value === rule.target),\n        [fieldOptions, rule.target]\n    );\n\n    const operatorOptions = useMemo(\n        () => (selectedFieldOption ? getOperatorOptions(selectedFieldOption.fieldType) : []),\n        [selectedFieldOption]\n    );\n\n    const operatorSelectOptions = useMemo(\n        () => operatorOptions.map(o => ({ value: o.value, label: o.label })),\n        [operatorOptions]\n    );\n\n    const fieldSelectOptions = useMemo(\n        () => fieldOptions.map(o => ({ value: o.value, label: o.label })),\n        [fieldOptions]\n    );\n\n    const showValue = rule.operator && !VALUE_HIDDEN_OPERATORS.has(rule.operator as Operator);\n\n    const handleFieldChange = useCallback(\n        (value: string | null) => {\n            const newTarget = value ?? \"\";\n            const newFieldOption = fieldOptions.find(o => o.value === newTarget);\n            // Reset operator and value when field changes\n            const newOps = newFieldOption ? getOperatorOptions(newFieldOption.fieldType) : [];\n            const currentOpValid = newOps.some(o => o.value === rule.operator);\n            onChange(index, {\n                ...rule,\n                target: newTarget,\n                operator: currentOpValid ? rule.operator : \"\",\n                value: currentOpValid ? rule.value : null\n            });\n        },\n        [fieldOptions, rule, index, onChange]\n    );\n\n    const handleOperatorChange = useCallback(\n        (value: string | null) => {\n            const op = value ?? \"\";\n            onChange(index, {\n                ...rule,\n                operator: op,\n                value: VALUE_HIDDEN_OPERATORS.has(op as Operator) ? null : rule.value\n            });\n        },\n        [rule, index, onChange]\n    );\n\n    const handleValueChange = useCallback(\n        (value: string | null) => {\n            let parsed: string | number | boolean | null = value ?? \"\";\n\n            // Auto-parse numbers for numeric field types\n            if (selectedFieldOption?.fieldType === \"number\" && parsed !== \"\") {\n                const num = Number(parsed);\n                if (!isNaN(num)) {\n                    parsed = num;\n                }\n            }\n\n            // Auto-parse booleans\n            if (selectedFieldOption?.fieldType === \"boolean\") {\n                if (parsed === \"true\") {\n                    parsed = true;\n                } else if (parsed === \"false\") {\n                    parsed = false;\n                }\n            }\n\n            onChange(index, { ...rule, value: parsed });\n        },\n        [rule, index, onChange, selectedFieldOption]\n    );\n\n    const handleActionChange = useCallback(\n        (value: string | null) => {\n            onChange(index, {\n                ...rule,\n                action: (value ?? actionOptions[0]?.value ?? \"hide\") as FieldRuleAction\n            });\n        },\n        [rule, index, onChange, actionOptions]\n    );\n\n    // For boolean fields, show a dropdown for value\n    const isBooleanField = selectedFieldOption?.fieldType === \"boolean\";\n\n    return (\n        <>\n            <Separator\n                className={index === 0 ? \"mb-lg\" : \"my-lg\"}\n                variant={\"accent\"}\n                labelPosition={\"start\"}\n            >\n                Rule #{index + 1}\n            </Separator>\n            <Grid>\n                <Grid.Column span={12}>\n                    <Select\n                        displayResetAction={false}\n                        label={\"Field\"}\n                        value={rule.target}\n                        options={fieldSelectOptions}\n                        onChange={handleFieldChange}\n                    />\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <Select\n                        displayResetAction={false}\n                        label={\"Operator\"}\n                        value={rule.operator}\n                        options={operatorSelectOptions}\n                        onChange={handleOperatorChange}\n                        disabled={!rule.target}\n                    />\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    {isBooleanField ? (\n                        <Select\n                            disabled={!showValue}\n                            displayResetAction={false}\n                            label={\"Value\"}\n                            value={String(rule.value ?? \"\")}\n                            options={[\n                                { value: \"true\", label: \"True\" },\n                                { value: \"false\", label: \"False\" }\n                            ]}\n                            onChange={handleValueChange}\n                        />\n                    ) : (\n                        <Input\n                            disabled={!showValue}\n                            label={\"Value\"}\n                            value={rule.value != null ? String(rule.value) : \"\"}\n                            type={selectedFieldOption?.fieldType === \"number\" ? \"number\" : \"text\"}\n                            onChange={handleValueChange}\n                        />\n                    )}\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Select\n                        label={\"Action\"}\n                        displayResetAction={false}\n                        value={rule.action}\n                        options={actionOptions}\n                        onChange={handleActionChange}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12} className={\"flex justify-between\"}>\n                    <Button\n                        className={\"[&_svg]:fill-destructive text-destructive-primary\"}\n                        containerClassName={\"flex ml-auto\"}\n                        text={\"Remove rule\"}\n                        icon={<DeleteIcon />}\n                        onClick={() => onRemove(index)}\n                        variant={\"ghost\"}\n                    />\n                </Grid.Column>\n            </Grid>\n        </>\n    );\n};\n\ninterface RulesTabProps {\n    fieldOptions: FieldOption[];\n    actionOptions?: ActionOption[];\n}\n\nexport const RulesEditor = ({\n    fieldOptions,\n    actionOptions = DEFAULT_ACTION_OPTIONS\n}: RulesTabProps) => {\n    const bind = useBind({ name: \"rules\" });\n    const allRules: FieldRule[] = bind.value || [];\n    const entryRules = allRules.filter(r => r.type === \"condition\");\n    const otherRules = allRules.filter(r => r.type !== \"condition\");\n\n    const addRule = () => {\n        const newRule: FieldRule = {\n            type: \"condition\",\n            target: \"\",\n            operator: \"\",\n            value: null,\n            action: (actionOptions[0]?.value ?? \"hide\") as FieldRuleAction\n        };\n        bind.onChange([...otherRules, ...entryRules, newRule]);\n    };\n\n    const updateRule = (index: number, updated: FieldRule) => {\n        const next = [...entryRules];\n        next[index] = updated;\n        bind.onChange([...otherRules, ...next]);\n    };\n\n    const removeRule = (index: number) => {\n        bind.onChange([...otherRules, ...entryRules.filter((_, i) => i !== index)]);\n    };\n\n    return (\n        <Grid>\n            <Grid.Column span={12}>\n                {entryRules.map((rule, index) => (\n                    <RuleRow\n                        key={index}\n                        rule={rule}\n                        index={index}\n                        fieldOptions={fieldOptions}\n                        actionOptions={actionOptions}\n                        onChange={updateRule}\n                        onRemove={removeRule}\n                    />\n                ))}\n                {entryRules.length > 0 ? (\n                    <Separator variant={\"accent\"} className={\"mt-lg\"} />\n                ) : null}\n                <div className={\"flex justify-center mt-md\"}>\n                    <Button onClick={addRule} text={\"Add Rule\"} icon={<AddIcon />} size={\"sm\"} />\n                </div>\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,IAAI,EAAEC,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,SAAS,QAAQ,kBAAkB;AACzE,SAASC,OAAO,QAAQ,cAAc;AACtC,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASD,cAAc,IAAIE,OAAO,QAAQ,uBAAuB;AAGjE,SACIC,kBAAkB,EAClBC,sBAAsB,QACnB,2DAA2D;AAGlE,MAAMC,sBAAsB,GAAG,CAC3B;EAAEC,KAAK,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAO,CAAC,EAChC;EAAED,KAAK,EAAE,SAAS;EAAEC,KAAK,EAAE;AAAU,CAAC,CACzC;AAgBD,MAAMC,OAAO,GAAGA,CAAC;EACbC,IAAI;EACJC,KAAK;EACLC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACRC;AACU,CAAC,KAAK;EAChB,MAAMC,mBAAmB,GAAGtB,OAAO,CAC/B,MAAMkB,YAAY,CAACK,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACX,KAAK,KAAKG,IAAI,CAACS,MAAM,CAAC,EACrD,CAACP,YAAY,EAAEF,IAAI,CAACS,MAAM,CAC9B,CAAC;EAED,MAAMC,eAAe,GAAG1B,OAAO,CAC3B,MAAOsB,mBAAmB,GAAGZ,kBAAkB,CAACY,mBAAmB,CAACK,SAAS,CAAC,GAAG,EAAG,EACpF,CAACL,mBAAmB,CACxB,CAAC;EAED,MAAMM,qBAAqB,GAAG5B,OAAO,CACjC,MAAM0B,eAAe,CAACG,GAAG,CAACL,CAAC,KAAK;IAAEX,KAAK,EAAEW,CAAC,CAACX,KAAK;IAAEC,KAAK,EAAEU,CAAC,CAACV;EAAM,CAAC,CAAC,CAAC,EACpE,CAACY,eAAe,CACpB,CAAC;EAED,MAAMI,kBAAkB,GAAG9B,OAAO,CAC9B,MAAMkB,YAAY,CAACW,GAAG,CAACL,CAAC,KAAK;IAAEX,KAAK,EAAEW,CAAC,CAACX,KAAK;IAAEC,KAAK,EAAEU,CAAC,CAACV;EAAM,CAAC,CAAC,CAAC,EACjE,CAACI,YAAY,CACjB,CAAC;EAED,MAAMa,SAAS,GAAGf,IAAI,CAACgB,QAAQ,IAAI,CAACrB,sBAAsB,CAACsB,GAAG,CAACjB,IAAI,CAACgB,QAAoB,CAAC;EAEzF,MAAME,iBAAiB,GAAGnC,WAAW,CAChCc,KAAoB,IAAK;IACtB,MAAMsB,SAAS,GAAGtB,KAAK,IAAI,EAAE;IAC7B,MAAMuB,cAAc,GAAGlB,YAAY,CAACK,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACX,KAAK,KAAKsB,SAAS,CAAC;IACpE;IACA,MAAME,MAAM,GAAGD,cAAc,GAAG1B,kBAAkB,CAAC0B,cAAc,CAACT,SAAS,CAAC,GAAG,EAAE;IACjF,MAAMW,cAAc,GAAGD,MAAM,CAACE,IAAI,CAACf,CAAC,IAAIA,CAAC,CAACX,KAAK,KAAKG,IAAI,CAACgB,QAAQ,CAAC;IAClEZ,QAAQ,CAACH,KAAK,EAAE;MACZ,GAAGD,IAAI;MACPS,MAAM,EAAEU,SAAS;MACjBH,QAAQ,EAAEM,cAAc,GAAGtB,IAAI,CAACgB,QAAQ,GAAG,EAAE;MAC7CnB,KAAK,EAAEyB,cAAc,GAAGtB,IAAI,CAACH,KAAK,GAAG;IACzC,CAAC,CAAC;EACN,CAAC,EACD,CAACK,YAAY,EAAEF,IAAI,EAAEC,KAAK,EAAEG,QAAQ,CACxC,CAAC;EAED,MAAMoB,oBAAoB,GAAGzC,WAAW,CACnCc,KAAoB,IAAK;IACtB,MAAM4B,EAAE,GAAG5B,KAAK,IAAI,EAAE;IACtBO,QAAQ,CAACH,KAAK,EAAE;MACZ,GAAGD,IAAI;MACPgB,QAAQ,EAAES,EAAE;MACZ5B,KAAK,EAAEF,sBAAsB,CAACsB,GAAG,CAACQ,EAAc,CAAC,GAAG,IAAI,GAAGzB,IAAI,CAACH;IACpE,CAAC,CAAC;EACN,CAAC,EACD,CAACG,IAAI,EAAEC,KAAK,EAAEG,QAAQ,CAC1B,CAAC;EAED,MAAMsB,iBAAiB,GAAG3C,WAAW,CAChCc,KAAoB,IAAK;IACtB,IAAI8B,MAAwC,GAAG9B,KAAK,IAAI,EAAE;;IAE1D;IACA,IAAIS,mBAAmB,EAAEK,SAAS,KAAK,QAAQ,IAAIgB,MAAM,KAAK,EAAE,EAAE;MAC9D,MAAMC,GAAG,GAAGC,MAAM,CAACF,MAAM,CAAC;MAC1B,IAAI,CAACG,KAAK,CAACF,GAAG,CAAC,EAAE;QACbD,MAAM,GAAGC,GAAG;MAChB;IACJ;;IAEA;IACA,IAAItB,mBAAmB,EAAEK,SAAS,KAAK,SAAS,EAAE;MAC9C,IAAIgB,MAAM,KAAK,MAAM,EAAE;QACnBA,MAAM,GAAG,IAAI;MACjB,CAAC,MAAM,IAAIA,MAAM,KAAK,OAAO,EAAE;QAC3BA,MAAM,GAAG,KAAK;MAClB;IACJ;IAEAvB,QAAQ,CAACH,KAAK,EAAE;MAAE,GAAGD,IAAI;MAAEH,KAAK,EAAE8B;IAAO,CAAC,CAAC;EAC/C,CAAC,EACD,CAAC3B,IAAI,EAAEC,KAAK,EAAEG,QAAQ,EAAEE,mBAAmB,CAC/C,CAAC;EAED,MAAMyB,kBAAkB,GAAGhD,WAAW,CACjCc,KAAoB,IAAK;IACtBO,QAAQ,CAACH,KAAK,EAAE;MACZ,GAAGD,IAAI;MACPgC,MAAM,EAAGnC,KAAK,IAAIM,aAAa,CAAC,CAAC,CAAC,EAAEN,KAAK,IAAI;IACjD,CAAC,CAAC;EACN,CAAC,EACD,CAACG,IAAI,EAAEC,KAAK,EAAEG,QAAQ,EAAED,aAAa,CACzC,CAAC;;EAED;EACA,MAAM8B,cAAc,GAAG3B,mBAAmB,EAAEK,SAAS,KAAK,SAAS;EAEnE,oBACI7B,KAAA,CAAAoD,aAAA,CAAApD,KAAA,CAAAqD,QAAA,qBACIrD,KAAA,CAAAoD,aAAA,CAAC7C,SAAS;IACN+C,SAAS,EAAEnC,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,OAAQ;IAC3CoC,OAAO,EAAE,QAAS;IAClBC,aAAa,EAAE;EAAQ,GAC1B,QACS,EAACrC,KAAK,GAAG,CACR,CAAC,eACZnB,KAAA,CAAAoD,aAAA,CAACjD,IAAI,qBACDH,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClB1D,KAAA,CAAAoD,aAAA,CAAChD,MAAM;IACHuD,kBAAkB,EAAE,KAAM;IAC1B3C,KAAK,EAAE,OAAQ;IACfD,KAAK,EAAEG,IAAI,CAACS,MAAO;IACnBiC,OAAO,EAAE5B,kBAAmB;IAC5BV,QAAQ,EAAEc;EAAkB,CAC/B,CACQ,CAAC,eACdpC,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE;EAAE,gBACjB1D,KAAA,CAAAoD,aAAA,CAAChD,MAAM;IACHuD,kBAAkB,EAAE,KAAM;IAC1B3C,KAAK,EAAE,UAAW;IAClBD,KAAK,EAAEG,IAAI,CAACgB,QAAS;IACrB0B,OAAO,EAAE9B,qBAAsB;IAC/BR,QAAQ,EAAEoB,oBAAqB;IAC/BmB,QAAQ,EAAE,CAAC3C,IAAI,CAACS;EAAO,CAC1B,CACQ,CAAC,eACd3B,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE;EAAE,GAChBP,cAAc,gBACXnD,KAAA,CAAAoD,aAAA,CAAChD,MAAM;IACHyD,QAAQ,EAAE,CAAC5B,SAAU;IACrB0B,kBAAkB,EAAE,KAAM;IAC1B3C,KAAK,EAAE,OAAQ;IACfD,KAAK,EAAE+C,MAAM,CAAC5C,IAAI,CAACH,KAAK,IAAI,EAAE,CAAE;IAChC6C,OAAO,EAAE,CACL;MAAE7C,KAAK,EAAE,MAAM;MAAEC,KAAK,EAAE;IAAO,CAAC,EAChC;MAAED,KAAK,EAAE,OAAO;MAAEC,KAAK,EAAE;IAAQ,CAAC,CACpC;IACFM,QAAQ,EAAEsB;EAAkB,CAC/B,CAAC,gBAEF5C,KAAA,CAAAoD,aAAA,CAAC/C,KAAK;IACFwD,QAAQ,EAAE,CAAC5B,SAAU;IACrBjB,KAAK,EAAE,OAAQ;IACfD,KAAK,EAAEG,IAAI,CAACH,KAAK,IAAI,IAAI,GAAG+C,MAAM,CAAC5C,IAAI,CAACH,KAAK,CAAC,GAAG,EAAG;IACpDgD,IAAI,EAAEvC,mBAAmB,EAAEK,SAAS,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAAO;IACtEP,QAAQ,EAAEsB;EAAkB,CAC/B,CAEI,CAAC,eACd5C,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClB1D,KAAA,CAAAoD,aAAA,CAAChD,MAAM;IACHY,KAAK,EAAE,QAAS;IAChB2C,kBAAkB,EAAE,KAAM;IAC1B5C,KAAK,EAAEG,IAAI,CAACgC,MAAO;IACnBU,OAAO,EAAEvC,aAAc;IACvBC,QAAQ,EAAE2B;EAAmB,CAChC,CACQ,CAAC,eACdjD,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE,EAAG;IAACJ,SAAS,EAAE;EAAuB,gBACrDtD,KAAA,CAAAoD,aAAA,CAAC9C,MAAM;IACHgD,SAAS,EAAE,mDAAoD;IAC/DU,kBAAkB,EAAE,cAAe;IACnCC,IAAI,EAAE,aAAc;IACpBC,IAAI,eAAElE,KAAA,CAAAoD,aAAA,CAAC1C,UAAU,MAAE,CAAE;IACrByD,OAAO,EAAEA,CAAA,KAAM5C,QAAQ,CAACJ,KAAK,CAAE;IAC/BoC,OAAO,EAAE;EAAQ,CACpB,CACQ,CACX,CACR,CAAC;AAEX,CAAC;AAOD,OAAO,MAAMa,WAAW,GAAGA,CAAC;EACxBhD,YAAY;EACZC,aAAa,GAAGP;AACL,CAAC,KAAK;EACjB,MAAMuD,IAAI,GAAG7D,OAAO,CAAC;IAAE8D,IAAI,EAAE;EAAQ,CAAC,CAAC;EACvC,MAAMC,QAAqB,GAAGF,IAAI,CAACtD,KAAK,IAAI,EAAE;EAC9C,MAAMyD,UAAU,GAAGD,QAAQ,CAACE,MAAM,CAACC,CAAC,IAAIA,CAAC,CAACX,IAAI,KAAK,WAAW,CAAC;EAC/D,MAAMY,UAAU,GAAGJ,QAAQ,CAACE,MAAM,CAACC,CAAC,IAAIA,CAAC,CAACX,IAAI,KAAK,WAAW,CAAC;EAE/D,MAAMa,OAAO,GAAGA,CAAA,KAAM;IAClB,MAAMC,OAAkB,GAAG;MACvBd,IAAI,EAAE,WAAW;MACjBpC,MAAM,EAAE,EAAE;MACVO,QAAQ,EAAE,EAAE;MACZnB,KAAK,EAAE,IAAI;MACXmC,MAAM,EAAG7B,aAAa,CAAC,CAAC,CAAC,EAAEN,KAAK,IAAI;IACxC,CAAC;IACDsD,IAAI,CAAC/C,QAAQ,CAAC,CAAC,GAAGqD,UAAU,EAAE,GAAGH,UAAU,EAAEK,OAAO,CAAC,CAAC;EAC1D,CAAC;EAED,MAAMC,UAAU,GAAGA,CAAC3D,KAAa,EAAE4D,OAAkB,KAAK;IACtD,MAAMC,IAAI,GAAG,CAAC,GAAGR,UAAU,CAAC;IAC5BQ,IAAI,CAAC7D,KAAK,CAAC,GAAG4D,OAAO;IACrBV,IAAI,CAAC/C,QAAQ,CAAC,CAAC,GAAGqD,UAAU,EAAE,GAAGK,IAAI,CAAC,CAAC;EAC3C,CAAC;EAED,MAAMC,UAAU,GAAI9D,KAAa,IAAK;IAClCkD,IAAI,CAAC/C,QAAQ,CAAC,CAAC,GAAGqD,UAAU,EAAE,GAAGH,UAAU,CAACC,MAAM,CAAC,CAACS,CAAC,EAAEC,CAAC,KAAKA,CAAC,KAAKhE,KAAK,CAAC,CAAC,CAAC;EAC/E,CAAC;EAED,oBACInB,KAAA,CAAAoD,aAAA,CAACjD,IAAI,qBACDH,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE;EAAG,GACjBc,UAAU,CAACzC,GAAG,CAAC,CAACb,IAAI,EAAEC,KAAK,kBACxBnB,KAAA,CAAAoD,aAAA,CAACnC,OAAO;IACJmE,GAAG,EAAEjE,KAAM;IACXD,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA,YAAa;IAC3BC,aAAa,EAAEA,aAAc;IAC7BC,QAAQ,EAAEwD,UAAW;IACrBvD,QAAQ,EAAE0D;EAAW,CACxB,CACJ,CAAC,EACDT,UAAU,CAACa,MAAM,GAAG,CAAC,gBAClBrF,KAAA,CAAAoD,aAAA,CAAC7C,SAAS;IAACgD,OAAO,EAAE,QAAS;IAACD,SAAS,EAAE;EAAQ,CAAE,CAAC,GACpD,IAAI,eACRtD,KAAA,CAAAoD,aAAA;IAAKE,SAAS,EAAE;EAA4B,gBACxCtD,KAAA,CAAAoD,aAAA,CAAC9C,MAAM;IAAC6D,OAAO,EAAES,OAAQ;IAACX,IAAI,EAAE,UAAW;IAACC,IAAI,eAAElE,KAAA,CAAAoD,aAAA,CAACzC,OAAO,MAAE,CAAE;IAAC2E,IAAI,EAAE;EAAK,CAAE,CAC3E,CACI,CACX,CAAC;AAEf,CAAC","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/RulesEditor/index.d.ts

@@ -0,0 +1 @@
+export { RulesEditor } from "./RulesEditor.js";

package/admin/components/FieldEditor/EditFieldDialog/RulesEditor/index.js

@@ -0,0 +1,3 @@
+export { RulesEditor } from "./RulesEditor.js";
+
+//# sourceMappingURL=index.js.map

package/admin/components/FieldEditor/EditFieldDialog/RulesEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RulesEditor"],"sources":["index.ts"],"sourcesContent":["export { RulesEditor } from \"./RulesEditor.js\";\n"],"mappings":"AAAA,SAASA,WAAW","ignoreList":[]}

package/admin/hooks/useCms.d.ts

@@ -1,3 +1,3 @@
 import { CmsContext } from "../contexts/Cms/index.js";
-declare function useCms(): CmsContext;
+export declare function useCms(): CmsContext;
 export default useCms;

package/admin/hooks/useCms.js

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { CmsContext } from "../contexts/Cms/index.js";
-function useCms() {
+export function useCms() {
   const context = useContext(CmsContext);
   if (!context) {
     throw new Error("useCms must be used within a CmsProvider");

package/admin/hooks/useCms.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContext","CmsContext","useCms","context","Error"],"sources":["useCms.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { CmsContext } from \"../contexts/Cms/index.js\";\n\nfunction useCms() {\n    const context = useContext(CmsContext);\n    if (!context) {\n        throw new Error(\"useCms must be used within a CmsProvider\");\n    }\n\n    return context;\n}\n\nexport default useCms;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,UAAU;AAEnB,SAASC,MAAMA,CAAA,EAAG;EACd,MAAMC,OAAO,GAAGH,UAAU,CAACC,UAAU,CAAC;EACtC,IAAI,CAACE,OAAO,EAAE;IACV,MAAM,IAAIC,KAAK,CAAC,0CAA0C,CAAC;EAC/D;EAEA,OAAOD,OAAO;AAClB;AAEA,eAAeD,MAAM","ignoreList":[]}
+{"version":3,"names":["useContext","CmsContext","useCms","context","Error"],"sources":["useCms.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { CmsContext } from \"../contexts/Cms/index.js\";\n\nexport function useCms() {\n    const context = useContext(CmsContext);\n    if (!context) {\n        throw new Error(\"useCms must be used within a CmsProvider\");\n    }\n\n    return context;\n}\n\nexport default useCms;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,UAAU;AAEnB,OAAO,SAASC,MAAMA,CAAA,EAAG;EACrB,MAAMC,OAAO,GAAGH,UAAU,CAACC,UAAU,CAAC;EACtC,IAAI,CAACE,OAAO,EAAE;IACV,MAAM,IAAIC,KAAK,CAAC,0CAA0C,CAAC;EAC/D;EAEA,OAAOD,OAAO;AAClB;AAEA,eAAeD,MAAM","ignoreList":[]}

package/admin/plugins/fields/ui/TabsLayoutEditor.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useEffect } from "react";
-import { Accordion, Tabs } from "@webiny/admin-ui";
+import { Accordion, Tabs, ScrollArea } from "@webiny/admin-ui";
 import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
 import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import { ReactComponent as ArrowUpIcon } from "@webiny/icons/expand_less.svg";
@@ -18,8 +18,8 @@ import { Bind } from "@webiny/form";
 import { FieldEditor } from "../../../components/FieldEditor/index.js";
 import { IconPicker } from "../../../components/IconPicker.js";
 import { useModelFieldEditor } from "../../../hooks/index.js";
-import { PermissionsTab } from "../../../components/FieldEditor/EditFieldDialog/PermissionsTab/PermissionsTab.js";
-import { RulesTab } from "../../../components/FieldEditor/EditFieldDialog/RulesTab/RulesTab.js";
+import { PermissionsEditor } from "../../../components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js";
+import { RulesEditor } from "../../../components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js";
 import { useModelEditor } from "../../../components/ContentModelEditor/useModelEditor.js";
 const TabsSettings = () => {
   return /*#__PURE__*/React.createElement(Grid, {
@@ -47,7 +47,9 @@ const TabsSettings = () => {
 const TabsDialogContent = ({
   fieldOptions
 }) => {
-  return /*#__PURE__*/React.createElement(Tabs, {
+  return /*#__PURE__*/React.createElement(ScrollArea, {
+    className: "max-h-[70vh] flex flex-col"
+  }, /*#__PURE__*/React.createElement(Tabs, {
     size: "md",
     separator: true,
     tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
@@ -59,19 +61,20 @@ const TabsDialogContent = ({
       key: "permissions",
       trigger: "Permissions",
       value: "permissions",
-      content: /*#__PURE__*/React.createElement(PermissionsTab, {
-        gridClassName: "mt-md"
-      })
+      content: /*#__PURE__*/React.createElement("div", {
+        className: "mt-md"
+      }, /*#__PURE__*/React.createElement(PermissionsEditor, null))
     }), /*#__PURE__*/React.createElement(Tabs.Tab, {
       key: "rules",
       trigger: "Rules",
       value: "rules",
-      content: /*#__PURE__*/React.createElement(RulesTab, {
-        gridClassName: "mt-md",
+      content: /*#__PURE__*/React.createElement("div", {
+        className: "mt-md"
+      }, /*#__PURE__*/React.createElement(RulesEditor, {
         fieldOptions: fieldOptions
-      })
+      }))
     })]
-  });
+  }));
 };
 const TabSettingsFields = () => {
   return /*#__PURE__*/React.createElement(Grid, {
@@ -105,17 +108,18 @@ const TabDialogContent = ({
       key: "permissions",
       trigger: "Permissions",
       value: "permissions",
-      content: /*#__PURE__*/React.createElement(PermissionsTab, {
-        gridClassName: "mt-md"
-      })
+      content: /*#__PURE__*/React.createElement("div", {
+        className: "mt-md"
+      }, /*#__PURE__*/React.createElement(PermissionsEditor, null))
     }), /*#__PURE__*/React.createElement(Tabs.Tab, {
       key: "rules",
       trigger: "Rules",
       value: "rules",
-      content: /*#__PURE__*/React.createElement(RulesTab, {
-        gridClassName: "mt-md",
+      content: /*#__PURE__*/React.createElement("div", {
+        className: "mt-md"
+      }, /*#__PURE__*/React.createElement(RulesEditor, {
         fieldOptions: fieldOptions
-      })
+      }))
     })]
   });
 };