@webiny/app-headless-cms 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

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

@@ -0,0 +1,75 @@
+import react, { useEffect, useState } from "react";
+import { useFeature } from "@webiny/app";
+import { Grid } from "@webiny/admin-ui";
+import { useBind } from "@webiny/form";
+import { useFeatureFlags } from "@webiny/app-admin";
+import { UsersTeamsMultiAutocomplete } from "@webiny/app-aco";
+import { ListFolderPermissionsTargetsFeature } from "../../../../../features/listFolderPermissionsTargets/feature.js";
+import { FieldPermissionsSelection } from "./FieldPermissionsSelection.js";
+import { CannotUsePermissions } from "./CannotUsePermissions.js";
+const PermissionsEditor = ()=>{
+    const featureFlags = useFeatureFlags();
+    const { useCase } = useFeature(ListFolderPermissionsTargetsFeature);
+    const bind = useBind({
+        name: "rules"
+    });
+    const allRules = bind.value || [];
+    const accessRules = allRules.filter((r)=>"accessControl" === r.type);
+    const otherRules = allRules.filter((r)=>"accessControl" !== r.type);
+    const [targetsList, setTargetsList] = useState([]);
+    useEffect(()=>{
+        useCase.execute().then(setTargetsList).catch(console.error);
+    }, []);
+    const addPermission = (value)=>{
+        const selectedUserOrTeam = value[value.length - 1];
+        const newRule = {
+            type: "accessControl",
+            target: "identity",
+            operator: "matches",
+            value: selectedUserOrTeam,
+            action: "disable"
+        };
+        bind.onChange([
+            ...otherRules,
+            ...accessRules,
+            newRule
+        ]);
+    };
+    const updatePermission = ({ rule: updatedRule })=>{
+        const updatedAccessRules = accessRules.map((rule)=>{
+            if (rule.value === updatedRule.value) return updatedRule;
+            return rule;
+        });
+        bind.onChange([
+            ...otherRules,
+            ...updatedAccessRules
+        ]);
+    };
+    const removeUserTeam = ({ rule: removedRule })=>{
+        const updatedAccessRules = accessRules.filter((rule)=>rule.value !== removedRule.value);
+        bind.onChange([
+            ...otherRules,
+            ...updatedAccessRules
+        ]);
+    };
+    if (!featureFlags.isEnabled("advancedAccessControlLayer.hcmsFieldPermissions")) return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(CannotUsePermissions, null)));
+    return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(UsersTeamsMultiAutocomplete, {
+        options: targetsList,
+        value: accessRules.map((rule)=>String(rule.value)),
+        onChange: addPermission
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(FieldPermissionsSelection, {
+        rules: accessRules,
+        targetsList: targetsList,
+        onRemoveAccess: removeUserTeam,
+        onUpdatePermission: updatePermission
+    })));
+};
+export { PermissionsEditor };
+
+//# sourceMappingURL=PermissionsEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useFeature } from \"@webiny/app\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { useFeatureFlags } from \"@webiny/app-admin\";\nimport { UsersTeamsMultiAutocomplete } from \"@webiny/app-aco\";\nimport type { FolderLevelPermissionsTarget } from \"@webiny/app-aco\";\nimport { ListFolderPermissionsTargetsFeature } from \"~/features/listFolderPermissionsTargets/feature.js\";\nimport type { FieldRule } from \"~/types.js\";\nimport { FieldPermissionsSelection } from \"./FieldPermissionsSelection.js\";\nimport { CannotUsePermissions } from \"./CannotUsePermissions.js\";\n\nexport const PermissionsEditor = () => {\n    const featureFlags = useFeatureFlags();\n    const { useCase } = useFeature(ListFolderPermissionsTargetsFeature);\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 [targetsList, setTargetsList] = useState<FolderLevelPermissionsTarget[]>([]);\n\n    useEffect(() => {\n        useCase.execute().then(setTargetsList).catch(console.error);\n    }, []);\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 (!featureFlags.isEnabled(\"advancedAccessControlLayer.hcmsFieldPermissions\")) {\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"],"names":["PermissionsEditor","featureFlags","useFeatureFlags","useCase","useFeature","ListFolderPermissionsTargetsFeature","bind","useBind","allRules","accessRules","r","otherRules","targetsList","setTargetsList","useState","useEffect","console","addPermission","value","selectedUserOrTeam","newRule","updatePermission","updatedRule","updatedAccessRules","rule","removeUserTeam","removedRule","Grid","CannotUsePermissions","UsersTeamsMultiAutocomplete","String","FieldPermissionsSelection"],"mappings":";;;;;;;;;AAYO,MAAMA,oBAAoB;IAC7B,MAAMC,eAAeC;IACrB,MAAM,EAAEC,OAAO,EAAE,GAAGC,WAAWC;IAC/B,MAAMC,OAAOC,QAAQ;QAAE,MAAM;IAAQ;IACrC,MAAMC,WAAwBF,KAAK,KAAK,IAAI,EAAE;IAC9C,MAAMG,cAAcD,SAAS,MAAM,CAACE,CAAAA,IAAKA,AAAW,oBAAXA,EAAE,IAAI;IAC/C,MAAMC,aAAaH,SAAS,MAAM,CAACE,CAAAA,IAAKA,AAAW,oBAAXA,EAAE,IAAI;IAE9C,MAAM,CAACE,aAAaC,eAAe,GAAGC,SAAyC,EAAE;IAEjFC,UAAU;QACNZ,QAAQ,OAAO,GAAG,IAAI,CAACU,gBAAgB,KAAK,CAACG,QAAQ,KAAK;IAC9D,GAAG,EAAE;IAEL,MAAMC,gBAAgB,CAACC;QACnB,MAAMC,qBAAqBD,KAAK,CAACA,MAAM,MAAM,GAAG,EAAE;QAClD,MAAME,UAAqB;YACvB,MAAM;YACN,QAAQ;YACR,UAAU;YACV,OAAOD;YACP,QAAQ;QACZ;QAEAb,KAAK,QAAQ,CAAC;eAAIK;eAAeF;YAAaW;SAAQ;IAC1D;IAEA,MAAMC,mBAAmB,CAAC,EAAE,MAAMC,WAAW,EAAuB;QAChE,MAAMC,qBAAqBd,YAAY,GAAG,CAACe,CAAAA;YACvC,IAAIA,KAAK,KAAK,KAAKF,YAAY,KAAK,EAChC,OAAOA;YAEX,OAAOE;QACX;QACAlB,KAAK,QAAQ,CAAC;eAAIK;eAAeY;SAAmB;IACxD;IAEA,MAAME,iBAAiB,CAAC,EAAE,MAAMC,WAAW,EAAuB;QAC9D,MAAMH,qBAAqBd,YAAY,MAAM,CAACe,CAAAA,OAAQA,KAAK,KAAK,KAAKE,YAAY,KAAK;QACtFpB,KAAK,QAAQ,CAAC;eAAIK;eAAeY;SAAmB;IACxD;IAEA,IAAI,CAACtB,aAAa,SAAS,CAAC,oDACxB,OAAO,WAAP,GACI,oBAAC0B,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,sBAAoBA;IAMrC,OAAO,WAAP,GACI,oBAACD,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,6BAA2BA;QACxB,SAASjB;QACT,OAAOH,YAAY,GAAG,CAClBe,CAAAA,OAAQM,OAAON,KAAK,KAAK;QAE7B,UAAUP;uBAGlB,oBAACU,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACI,2BAAyBA;QACtB,OAAOtB;QACP,aAAaG;QACb,gBAAgBa;QAChB,oBAAoBJ;;AAKxC"}

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

@@ -0,0 +1,12 @@
+import React from "react";
+import type { FieldOption } from "../../../../../admin/components/ContentModelEditor/fieldOptions.js";
+interface ActionOption {
+    value: string;
+    label: string;
+}
+interface RulesTabProps {
+    fieldOptions: FieldOption[];
+    actionOptions?: ActionOption[];
+}
+export declare const RulesEditor: ({ fieldOptions, actionOptions }: RulesTabProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,225 @@
+import react, { useCallback, useMemo } from "react";
+import { Button, Grid, Input, Select, Separator } from "@webiny/admin-ui";
+import { useBind } from "@webiny/form";
+import { ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { VALUE_HIDDEN_OPERATORS, getOperatorOptions } from "../../../ContentModelEditor/operatorOptions.js";
+const DEFAULT_ACTION_OPTIONS = [
+    {
+        value: "hide",
+        label: "Hide"
+    },
+    {
+        value: "disable",
+        label: "Disable"
+    }
+];
+const RuleRow = ({ rule, index, fieldOptions, actionOptions, onChange, onRemove })=>{
+    const selectedFieldOption = useMemo(()=>fieldOptions.find((o)=>o.value === rule.target), [
+        fieldOptions,
+        rule.target
+    ]);
+    const operatorOptions = useMemo(()=>selectedFieldOption ? getOperatorOptions(selectedFieldOption.fieldType) : [], [
+        selectedFieldOption
+    ]);
+    const operatorSelectOptions = useMemo(()=>operatorOptions.map((o)=>({
+                value: o.value,
+                label: o.label
+            })), [
+        operatorOptions
+    ]);
+    const fieldSelectOptions = useMemo(()=>fieldOptions.map((o)=>({
+                value: o.value,
+                label: o.label
+            })), [
+        fieldOptions
+    ]);
+    const showValue = rule.operator && !VALUE_HIDDEN_OPERATORS.has(rule.operator);
+    const handleFieldChange = useCallback((value)=>{
+        const newTarget = value ?? "";
+        const newFieldOption = fieldOptions.find((o)=>o.value === newTarget);
+        const newOps = newFieldOption ? getOperatorOptions(newFieldOption.fieldType) : [];
+        const currentOpValid = newOps.some((o)=>o.value === rule.operator);
+        onChange(index, {
+            ...rule,
+            target: newTarget,
+            operator: currentOpValid ? rule.operator : "",
+            value: currentOpValid ? rule.value : null
+        });
+    }, [
+        fieldOptions,
+        rule,
+        index,
+        onChange
+    ]);
+    const handleOperatorChange = useCallback((value)=>{
+        const op = value ?? "";
+        onChange(index, {
+            ...rule,
+            operator: op,
+            value: VALUE_HIDDEN_OPERATORS.has(op) ? null : rule.value
+        });
+    }, [
+        rule,
+        index,
+        onChange
+    ]);
+    const handleValueChange = useCallback((value)=>{
+        let parsed = value ?? "";
+        if (selectedFieldOption?.fieldType === "number" && "" !== parsed) {
+            const num = Number(parsed);
+            if (!isNaN(num)) parsed = num;
+        }
+        if (selectedFieldOption?.fieldType === "boolean") {
+            if ("true" === parsed) parsed = true;
+            else if ("false" === parsed) parsed = false;
+        }
+        onChange(index, {
+            ...rule,
+            value: parsed
+        });
+    }, [
+        rule,
+        index,
+        onChange,
+        selectedFieldOption
+    ]);
+    const handleActionChange = useCallback((value)=>{
+        onChange(index, {
+            ...rule,
+            action: value ?? actionOptions[0]?.value ?? "hide"
+        });
+    }, [
+        rule,
+        index,
+        onChange,
+        actionOptions
+    ]);
+    const isBooleanField = selectedFieldOption?.fieldType === "boolean";
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Separator, {
+        className: 0 === index ? "mb-lg" : "my-lg",
+        variant: "accent",
+        labelPosition: "start"
+    }, "Rule #", index + 1), /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Select, {
+        displayResetAction: false,
+        label: "Field",
+        value: rule.target,
+        options: fieldSelectOptions,
+        onChange: handleFieldChange
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(Select, {
+        displayResetAction: false,
+        label: "Operator",
+        value: rule.operator,
+        options: operatorSelectOptions,
+        onChange: handleOperatorChange,
+        disabled: !rule.target
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, isBooleanField ? /*#__PURE__*/ react.createElement(Select, {
+        disabled: !showValue,
+        displayResetAction: false,
+        label: "Value",
+        value: String(rule.value ?? ""),
+        options: [
+            {
+                value: "true",
+                label: "True"
+            },
+            {
+                value: "false",
+                label: "False"
+            }
+        ],
+        onChange: handleValueChange
+    }) : /*#__PURE__*/ react.createElement(Input, {
+        disabled: !showValue,
+        label: "Value",
+        value: null != rule.value ? String(rule.value) : "",
+        type: selectedFieldOption?.fieldType === "number" ? "number" : "text",
+        onChange: handleValueChange
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Select, {
+        label: "Action",
+        displayResetAction: false,
+        value: rule.action,
+        options: actionOptions,
+        onChange: handleActionChange
+    })), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12,
+        className: "flex justify-between"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        className: "[&_svg]:fill-destructive text-destructive-primary",
+        containerClassName: "flex ml-auto",
+        text: "Remove rule",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: ()=>onRemove(index),
+        variant: "ghost"
+    }))));
+};
+const RulesEditor = ({ fieldOptions, actionOptions = DEFAULT_ACTION_OPTIONS })=>{
+    const bind = useBind({
+        name: "rules"
+    });
+    const allRules = bind.value || [];
+    const entryRules = allRules.filter((r)=>"condition" === r.type);
+    const otherRules = allRules.filter((r)=>"condition" !== r.type);
+    const addRule = ()=>{
+        const newRule = {
+            type: "condition",
+            target: "",
+            operator: "",
+            value: null,
+            action: actionOptions[0]?.value ?? "hide"
+        };
+        bind.onChange([
+            ...otherRules,
+            ...entryRules,
+            newRule
+        ]);
+    };
+    const updateRule = (index, updated)=>{
+        const next = [
+            ...entryRules
+        ];
+        next[index] = updated;
+        bind.onChange([
+            ...otherRules,
+            ...next
+        ]);
+    };
+    const removeRule = (index)=>{
+        bind.onChange([
+            ...otherRules,
+            ...entryRules.filter((_, i)=>i !== index)
+        ]);
+    };
+    return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, entryRules.map((rule, index)=>/*#__PURE__*/ react.createElement(RuleRow, {
+            key: index,
+            rule: rule,
+            index: index,
+            fieldOptions: fieldOptions,
+            actionOptions: actionOptions,
+            onChange: updateRule,
+            onRemove: removeRule
+        })), entryRules.length > 0 ? /*#__PURE__*/ react.createElement(Separator, {
+        variant: "accent",
+        className: "mt-lg"
+    }) : null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center mt-md"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        onClick: addRule,
+        text: "Add Rule",
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
+        size: "sm"
+    }))));
+};
+export { RulesEditor };
+
+//# sourceMappingURL=RulesEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/RulesEditor/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 \"~/admin/components/ContentModelEditor/fieldOptions.js\";\nimport {\n    getOperatorOptions,\n    VALUE_HIDDEN_OPERATORS\n} from \"~/admin/components/ContentModelEditor/operatorOptions.js\";\nimport type { Operator } from \"~/admin/components/ContentModelEditor/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"],"names":["DEFAULT_ACTION_OPTIONS","RuleRow","rule","index","fieldOptions","actionOptions","onChange","onRemove","selectedFieldOption","useMemo","o","operatorOptions","getOperatorOptions","operatorSelectOptions","fieldSelectOptions","showValue","VALUE_HIDDEN_OPERATORS","handleFieldChange","useCallback","value","newTarget","newFieldOption","newOps","currentOpValid","handleOperatorChange","op","handleValueChange","parsed","num","Number","isNaN","handleActionChange","isBooleanField","Separator","Grid","Select","String","Input","Button","DeleteIcon","RulesEditor","bind","useBind","allRules","entryRules","r","otherRules","addRule","newRule","updateRule","updated","next","removeRule","_","i","AddIcon"],"mappings":"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"}

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 @@
+export { RulesEditor } from "./RulesEditor.js";

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

@@ -1,9 +1,10 @@
 import React from "react";
-import type { FormOnSubmit } from "@webiny/form";
-import type { CmsModelField } from "../../../types";
+import type { CmsModelField } from "../../../types.js";
 interface EditFieldDialogProps {
     onClose: () => void;
-    onSubmit: FormOnSubmit<CmsModelField>;
+    onSubmit: (data: CmsModelField) => void;
 }
-declare const EditFieldDialog: (props: EditFieldDialogProps) => React.JSX.Element;
+declare const EditFieldDialog: ((props: EditFieldDialogProps) => React.JSX.Element) & React.NamedExoticComponent<EditFieldDialogProps> & {
+    readonly type: (props: EditFieldDialogProps) => React.JSX.Element;
+};
 export default EditFieldDialog;

package/admin/components/FieldEditor/EditFieldDialog.js

@@ -1,130 +1,68 @@
-import React, { useState } from "react";
-import cloneDeep from "lodash/cloneDeep";
-import { Dialog, Tabs } from "@webiny/admin-ui";
-import { Form } from "@webiny/form";
-import { i18n } from "@webiny/app/i18n";
-import GeneralTab from "./EditFieldDialog/GeneralTab";
-import AppearanceTab from "./EditFieldDialog/AppearanceTab";
-import PredefinedValues from "./EditFieldDialog/PredefinedValues";
-import { ValidationTab } from "./EditFieldDialog/ValidationTab";
-import { useModelField, useModelEditor } from "../../hooks";
-import { ModelFieldProvider } from "../ModelFieldProvider";
-import { useRendererPlugins } from "./EditFieldDialog/useRendererPlugins";
-import { getFieldValidators } from "./EditFieldDialog/getValidators";
+import react, { useEffect, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { FormErrors, FormView } from "@webiny/app-admin";
+import { useContainer } from "@webiny/app";
+import { Drawer } from "@webiny/admin-ui";
+import { useModelEditor, useModelField } from "../../hooks/index.js";
+import { FieldEditorPresenter } from "../../../presentation/fieldEditor/abstractions.js";
+import { CmsFieldType } from "../../../presentation/fieldTypes/abstractions.js";
 const t = i18n.namespace("app-headless-cms/admin/components/editor");
-function setupState(field, contentModel) {
-  const clonedField = cloneDeep(field);
-  if (!clonedField.renderer || !clonedField.renderer.name) {
-    const [renderPlugin] = useRendererPlugins();
-    if (renderPlugin) {
-      clonedField.renderer = {
-        name: renderPlugin.renderer.rendererName
-      };
-    }
-  }
-  return {
-    shadowField: clonedField,
-    isTitleField: contentModel.titleFieldId === field.fieldId
-  };
-}
-const EditFieldDialog = props => {
-  const {
-    field,
-    fieldPlugin
-  } = useModelField();
-  const {
-    data: contentModel,
-    setData: setContentModelData
-  } = useModelEditor();
-  const [{
-    shadowField,
-    isTitleField
-  }] = useState(setupState(field, contentModel));
-  const headerTitle = t`Field Settings - {fieldTypeLabel}`({
-    fieldTypeLabel: fieldPlugin.field.label
-  });
-  const onSubmit = (data, form) => {
-    /**
-     * In case title field `fieldId` changed, we need to update the title field on the model itself.
-     */
-    if (isTitleField && contentModel.titleFieldId !== data.fieldId) {
-      setContentModelData(prev => {
-        return {
-          ...prev,
-          titleFieldId: data.fieldId
-        };
-      });
-    }
-    props.onSubmit(data, form);
-  };
-  return (
-    /*#__PURE__*/
-    /**
-     * We're using the `shadowField` as the new context, because we want all changes by form inputs
-     * to immediately be propagated to all dialog components.
-     */
-    React.createElement(Form, {
-      data: shadowField,
-      onSubmit: onSubmit
-    }, ({
-      data: shadowField,
-      submit
-    }) => {
-      const predefinedValuesTabEnabled = fieldPlugin.field.allowPredefinedValues && shadowField.predefinedValues && shadowField.predefinedValues.enabled;
-      const individualValidation = getFieldValidators(shadowField, fieldPlugin);
-      const showValidatorsTab = shadowField.multipleValues || individualValidation.validators.length > 0;
-      return /*#__PURE__*/React.createElement(Dialog, {
-        size: "full",
+const EditFieldDialog = observer((props)=>{
+    const { field } = useModelField();
+    const { data: contentModel, setData: setContentModelData } = useModelEditor();
+    const container = useContainer();
+    const presenter = useMemo(()=>container.resolve(FieldEditorPresenter), [
+        container
+    ]);
+    const fieldType = useMemo(()=>{
+        const all = container.resolveAll(CmsFieldType);
+        return all.find((ft)=>ft.matches?.(field)) ?? all.find((ft)=>ft.type === field.type);
+    }, [
+        container,
+        field
+    ]);
+    useEffect(()=>{
+        presenter.init(field, contentModel);
+    }, []);
+    const headerTitle = t`Field Settings - {fieldTypeLabel}`({
+        fieldTypeLabel: fieldType ? fieldType.label : field.type
+    });
+    const isTitleField = contentModel.titleFieldId === field.fieldId;
+    const handleSubmit = async ()=>{
+        const result = await presenter.submit();
+        if (!result) return;
+        if (isTitleField && contentModel.titleFieldId !== result.fieldId) setContentModelData((prev)=>({
+                ...prev,
+                titleFieldId: result.fieldId
+            }));
+        props.onSubmit(result);
+    };
+    return /*#__PURE__*/ react.createElement(Drawer, {
         title: headerTitle,
         open: true,
         modal: true,
         onClose: props.onClose,
         bodyPadding: false,
-        actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelButton, {
-          text: t`Cancel`,
-          onClick: props.onClose,
-          "data-testid": "cms.editor.field.settings.cancel"
-        }), /*#__PURE__*/React.createElement(Dialog.ConfirmButton, {
-          text: t`Save Field`,
-          onClick: submit,
-          "data-testid": "cms.editor.field.settings.save"
+        footerSeparator: true,
+        size: "lg",
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Drawer.CancelButton, {
+            text: t`Cancel`,
+            "data-testid": "cms.editor.field.settings.cancel"
+        }), /*#__PURE__*/ react.createElement(Drawer.ConfirmButton, {
+            text: t`Save Field`,
+            onClick: handleSubmit,
+            "data-testid": "cms.editor.field.settings.save"
         })),
         "data-testid": "cms-editor-edit-fields-dialog"
-      }, /*#__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)
-        })]
-      })));
-    })
-  );
-};
-export default EditFieldDialog;
+    }, presenter.vm.form ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FormErrors, {
+        form: presenter.vm.form
+    }), /*#__PURE__*/ react.createElement(FormView, {
+        name: "CmsFieldEditor",
+        form: presenter.vm.form
+    })) : null);
+});
+const FieldEditor_EditFieldDialog = EditFieldDialog;
+export default FieldEditor_EditFieldDialog;
 
 //# sourceMappingURL=EditFieldDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","cloneDeep","Dialog","Tabs","Form","i18n","GeneralTab","AppearanceTab","PredefinedValues","ValidationTab","useModelField","useModelEditor","ModelFieldProvider","useRendererPlugins","getFieldValidators","t","namespace","setupState","field","contentModel","clonedField","renderer","name","renderPlugin","rendererName","shadowField","isTitleField","titleFieldId","fieldId","EditFieldDialog","props","fieldPlugin","data","setData","setContentModelData","headerTitle","fieldTypeLabel","label","onSubmit","form","prev","createElement","submit","predefinedValuesTabEnabled","allowPredefinedValues","predefinedValues","enabled","individualValidation","showValidatorsTab","multipleValues","validators","length","size","title","open","modal","onClose","bodyPadding","actions","Fragment","CancelButton","text","onClick","ConfirmButton","spacing","separator","tabs","Tab","key","trigger","value","content","disabled","visible"],"sources":["EditFieldDialog.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Dialog, Tabs } from \"@webiny/admin-ui\";\nimport type { FormOnSubmit } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport type { CmsEditorContentModel, CmsModelField } from \"~/types\";\nimport GeneralTab from \"./EditFieldDialog/GeneralTab\";\nimport AppearanceTab from \"./EditFieldDialog/AppearanceTab\";\nimport PredefinedValues from \"./EditFieldDialog/PredefinedValues\";\nimport { ValidationTab } from \"./EditFieldDialog/ValidationTab\";\nimport { useModelField, useModelEditor } from \"~/admin/hooks\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider\";\nimport { useRendererPlugins } from \"~/admin/components/FieldEditor/EditFieldDialog/useRendererPlugins\";\nimport { getFieldValidators } from \"~/admin/components/FieldEditor/EditFieldDialog/getValidators\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nfunction setupState(field: CmsModelField, contentModel: CmsEditorContentModel): EditFieldState {\n    const clonedField = cloneDeep(field);\n\n    if (!clonedField.renderer || !clonedField.renderer.name) {\n        const [renderPlugin] = useRendererPlugins();\n\n        if (renderPlugin) {\n            clonedField.renderer = { name: renderPlugin.renderer.rendererName };\n        }\n    }\n\n    return {\n        shadowField: clonedField,\n        isTitleField: contentModel.titleFieldId === field.fieldId\n    };\n}\n\ninterface EditFieldState {\n    shadowField: CmsModelField;\n    isTitleField: boolean;\n}\n\ninterface EditFieldDialogProps {\n    onClose: () => void;\n    onSubmit: FormOnSubmit<CmsModelField>;\n}\n\nconst EditFieldDialog = (props: EditFieldDialogProps) => {\n    const { field, fieldPlugin } = useModelField();\n    const { data: contentModel, setData: setContentModelData } = useModelEditor();\n    const [{ shadowField, isTitleField }] = useState(setupState(field, contentModel));\n\n    const headerTitle = t`Field Settings - {fieldTypeLabel}`({\n        fieldTypeLabel: fieldPlugin.field.label\n    });\n\n    const onSubmit: FormOnSubmit<CmsModelField> = (data, form) => {\n        /**\n         * In case title field `fieldId` changed, we need to update the title field on the model itself.\n         */\n        if (isTitleField && contentModel.titleFieldId !== data.fieldId) {\n            setContentModelData(prev => {\n                return {\n                    ...prev,\n                    titleFieldId: data.fieldId\n                };\n            });\n        }\n\n        props.onSubmit(data, form);\n    };\n\n    return (\n        /**\n         * We're using the `shadowField` as the new context, because we want all changes by form inputs\n         * to immediately be propagated to all dialog components.\n         */\n        <Form<CmsModelField> data={shadowField} onSubmit={onSubmit}>\n            {({ data: shadowField, submit }) => {\n                const predefinedValuesTabEnabled =\n                    fieldPlugin.field.allowPredefinedValues &&\n                    shadowField.predefinedValues &&\n                    shadowField.predefinedValues.enabled;\n\n                const individualValidation = getFieldValidators(shadowField, fieldPlugin);\n                const showValidatorsTab =\n                    shadowField.multipleValues || individualValidation.validators.length > 0;\n\n                return (\n                    <Dialog\n                        size={\"full\"}\n                        title={headerTitle}\n                        open={true}\n                        modal={true}\n                        onClose={props.onClose}\n                        bodyPadding={false}\n                        actions={\n                            <>\n                                <Dialog.CancelButton\n                                    text={t`Cancel`}\n                                    onClick={props.onClose}\n                                    data-testid=\"cms.editor.field.settings.cancel\"\n                                />\n                                <Dialog.ConfirmButton\n                                    text={t`Save Field`}\n                                    onClick={submit}\n                                    data-testid=\"cms.editor.field.settings.save\"\n                                />\n                            </>\n                        }\n                        data-testid={\"cms-editor-edit-fields-dialog\"}\n                    >\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                                    />\n                                ]}\n                            />\n                        </ModelFieldProvider>\n                    </Dialog>\n                );\n            }}\n        </Form>\n    );\n};\n\nexport default EditFieldDialog;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog.js","sources":["../../../../src/admin/components/FieldEditor/EditFieldDialog.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { FormView, FormErrors } from \"@webiny/app-admin\";\nimport { useContainer } from \"@webiny/app\";\nimport { Drawer } from \"@webiny/admin-ui\";\nimport type { CmsModelField } from \"~/types.js\";\nimport { useModelEditor, useModelField } from \"~/admin/hooks/index.js\";\nimport { FieldEditorPresenter } from \"~/presentation/fieldEditor/abstractions.js\";\nimport { CmsFieldType } from \"~/presentation/fieldTypes/abstractions.js\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\ninterface EditFieldDialogProps {\n    onClose: () => void;\n    onSubmit: (data: CmsModelField) => void;\n}\n\nconst EditFieldDialog = observer((props: EditFieldDialogProps) => {\n    const { field } = useModelField();\n    const { data: contentModel, setData: setContentModelData } = useModelEditor();\n\n    const container = useContainer();\n    const presenter = useMemo(() => container.resolve(FieldEditorPresenter), [container]);\n    const fieldType = useMemo(() => {\n        const all = container.resolveAll(CmsFieldType);\n        return all.find(ft => ft.matches?.(field)) ?? all.find(ft => ft.type === field.type);\n    }, [container, field]);\n\n    useEffect(() => {\n        presenter.init(field, contentModel);\n    }, []);\n\n    const headerTitle = t`Field Settings - {fieldTypeLabel}`({\n        fieldTypeLabel: fieldType ? fieldType.label : field.type\n    });\n\n    const isTitleField = contentModel.titleFieldId === field.fieldId;\n\n    const handleSubmit = async () => {\n        const result = await presenter.submit();\n        if (!result) {\n            return;\n        }\n\n        if (isTitleField && contentModel.titleFieldId !== result.fieldId) {\n            setContentModelData(prev => ({\n                ...prev,\n                titleFieldId: result.fieldId\n            }));\n        }\n\n        props.onSubmit(result);\n    };\n\n    return (\n        <Drawer\n            title={headerTitle}\n            open={true}\n            modal={true}\n            onClose={props.onClose}\n            bodyPadding={false}\n            footerSeparator={true}\n            size={\"lg\"}\n            actions={\n                <>\n                    <Drawer.CancelButton\n                        text={t`Cancel`}\n                        data-testid=\"cms.editor.field.settings.cancel\"\n                    />\n                    <Drawer.ConfirmButton\n                        text={t`Save Field`}\n                        onClick={handleSubmit}\n                        data-testid=\"cms.editor.field.settings.save\"\n                    />\n                </>\n            }\n            data-testid={\"cms-editor-edit-fields-dialog\"}\n        >\n            {presenter.vm.form ? (\n                <>\n                    <FormErrors form={presenter.vm.form} />\n                    <FormView name=\"CmsFieldEditor\" form={presenter.vm.form} />\n                </>\n            ) : null}\n        </Drawer>\n    );\n});\n\nexport default EditFieldDialog;\n"],"names":["t","i18n","EditFieldDialog","observer","props","field","useModelField","contentModel","setContentModelData","useModelEditor","container","useContainer","presenter","useMemo","FieldEditorPresenter","fieldType","all","CmsFieldType","ft","useEffect","headerTitle","isTitleField","handleSubmit","result","prev","Drawer","FormErrors","FormView"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAIC,KAAK,SAAS,CAAC;AAOzB,MAAMC,kBAAkBC,SAAS,CAACC;IAC9B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAE,MAAMC,YAAY,EAAE,SAASC,mBAAmB,EAAE,GAAGC;IAE7D,MAAMC,YAAYC;IAClB,MAAMC,YAAYC,QAAQ,IAAMH,UAAU,OAAO,CAACI,uBAAuB;QAACJ;KAAU;IACpF,MAAMK,YAAYF,QAAQ;QACtB,MAAMG,MAAMN,UAAU,UAAU,CAACO;QACjC,OAAOD,IAAI,IAAI,CAACE,CAAAA,KAAMA,GAAG,OAAO,GAAGb,WAAWW,IAAI,IAAI,CAACE,CAAAA,KAAMA,GAAG,IAAI,KAAKb,MAAM,IAAI;IACvF,GAAG;QAACK;QAAWL;KAAM;IAErBc,UAAU;QACNP,UAAU,IAAI,CAACP,OAAOE;IAC1B,GAAG,EAAE;IAEL,MAAMa,cAAcpB,CAAC,CAAC,iCAAiC,CAAC,CAAC;QACrD,gBAAgBe,YAAYA,UAAU,KAAK,GAAGV,MAAM,IAAI;IAC5D;IAEA,MAAMgB,eAAed,aAAa,YAAY,KAAKF,MAAM,OAAO;IAEhE,MAAMiB,eAAe;QACjB,MAAMC,SAAS,MAAMX,UAAU,MAAM;QACrC,IAAI,CAACW,QACD;QAGJ,IAAIF,gBAAgBd,aAAa,YAAY,KAAKgB,OAAO,OAAO,EAC5Df,oBAAoBgB,CAAAA,OAAS;gBACzB,GAAGA,IAAI;gBACP,cAAcD,OAAO,OAAO;YAChC;QAGJnB,MAAM,QAAQ,CAACmB;IACnB;IAEA,OAAO,WAAP,GACI,oBAACE,QAAMA;QACH,OAAOL;QACP,MAAM;QACN,OAAO;QACP,SAAShB,MAAM,OAAO;QACtB,aAAa;QACb,iBAAiB;QACjB,MAAM;QACN,uBACI,wDACI,oBAACqB,OAAO,YAAY;YAChB,MAAMzB,CAAC,CAAC,MAAM,CAAC;YACf,eAAY;0BAEhB,oBAACyB,OAAO,aAAa;YACjB,MAAMzB,CAAC,CAAC,UAAU,CAAC;YACnB,SAASsB;YACT,eAAY;;QAIxB,eAAa;OAEZV,UAAU,EAAE,CAAC,IAAI,GAAG,WAAH,GACd,wDACI,oBAACc,YAAUA;QAAC,MAAMd,UAAU,EAAE,CAAC,IAAI;sBACnC,oBAACe,UAAQA;QAAC,MAAK;QAAiB,MAAMf,UAAU,EAAE,CAAC,IAAI;UAE3D;AAGhB;AAEA,oCAAeV"}

package/admin/components/FieldEditor/Field.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import type { CmsModelField } from "../../../types";
+import type { CmsModelField } from "../../../types.js";
 export interface FieldProps {
     field: CmsModelField;
     onDelete: (field: CmsModelField) => void;
     onEdit: (field: CmsModelField) => void;
     parent?: CmsModelField;
 }
-declare const _default: React.MemoExoticComponent<(props: FieldProps) => React.JSX.Element | null>;
+declare const Field: (props: FieldProps) => React.JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof Field>;
 export default _default;