npm - @webiny/app-headless-cms - Versions diffs - 6.4.5-beta.0 → 6.6.0-alpha.0 - Mend

@webiny/app-headless-cms 6.4.5-beta.0 → 6.6.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2796) hide show

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

	@@ -1 +1 @@
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 \"@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"],"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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"}
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.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import React from "react";
-import type { FormOnSubmit } from "@webiny/form";
 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) & {
+    displayName: string;
+};
 export default EditFieldDialog;

package/admin/components/FieldEditor/EditFieldDialog.js CHANGED Viewed

@@ -1,64 +1,64 @@
-import react, { useMemo, useState } from "react";
-import cloneDeep from "lodash/cloneDeep.js";
-import { Form } from "@webiny/form";
+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 { useRendererPlugins } from "./EditFieldDialog/useRendererPlugins.js";
-import { getFieldValidators } from "./EditFieldDialog/getValidators.js";
-import { EditFieldDrawerContainer } from "./EditFieldDrawerContainer.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 EditFieldDialog = observer((props)=>{
+    const { field } = useModelField();
     const { data: contentModel, setData: setContentModelData } = useModelEditor();
-    const [{ shadowField, isTitleField }] = useState(setupState(field, contentModel));
+    const container = useContainer();
+    const presenter = useMemo(()=>container.resolve(FieldEditorPresenter), [
+        container
+    ]);
+    const fieldType = useMemo(()=>container.resolveAll(CmsFieldType).find((ft)=>ft.type === field.type), [
+        container,
+        field.type
+    ]);
+    useEffect(()=>{
+        presenter.init(field, contentModel);
+    }, []);
     const headerTitle = t`Field Settings - {fieldTypeLabel}`({
-        fieldTypeLabel: fieldPlugin.field.label
+        fieldTypeLabel: fieldType ? fieldType.label : field.type
     });
-    const onSubmit = (data, form)=>{
-        if (isTitleField && contentModel.titleFieldId !== data.fieldId) setContentModelData((prev)=>({
+    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: data.fieldId
+                titleFieldId: result.fieldId
             }));
-        props.onSubmit(data, form);
+        props.onSubmit(result);
     };
-    const isSubtypeField = useMemo(()=>{
-        if (!field.type) return false;
-        const value = field.type.split(":");
-        return value.length > 1;
-    }, [
-        field.type
-    ]);
-    return /*#__PURE__*/ 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.list || individualValidation.validators.length > 0;
-        return /*#__PURE__*/ react.createElement(EditFieldDrawerContainer, {
-            headerTitle: headerTitle,
-            shadowField: shadowField,
-            predefinedValuesTabEnabled: predefinedValuesTabEnabled,
-            showValidatorsTab: showValidatorsTab,
-            isSubtypeField: isSubtypeField,
-            onClose: props.onClose,
-            onSubmit: submit
-        });
-    });
-};
+    return /*#__PURE__*/ react.createElement(Drawer, {
+        title: headerTitle,
+        open: true,
+        modal: true,
+        onClose: props.onClose,
+        bodyPadding: false,
+        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"
+    }, 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;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"admin/components/FieldEditor/EditFieldDialog.js","sources":["../../../../src/admin/components/FieldEditor/EditFieldDialog.tsx"],"sourcesContent":["import React, { ~~useMemo~~, ~~useState~~ } from \"react\";\nimport ~~cloneDeep~~ from \"~~lodash~~/~~cloneDeep~~.js\";\nimport ~~type~~ { ~~FormOnSubmit~~ } from \"@webiny/~~form~~\";\nimport { ~~Form~~ } from \"@webiny/~~form~~\";\nimport { ~~i18n~~ } from \"@webiny/~~app/i18n/index.js~~\";\nimport type { ~~CmsEditorContentModel,~~ CmsModelField } from \"~/types.js\";\nimport { useModelEditor, useModelField } from \"~/admin/hooks/index.js\";\nimport { ~~useRendererPlugins~~ } from \"~/~~admin~~/~~components~~/~~FieldEditor/EditFieldDialog/useRendererPlugins~~.js\";\nimport { ~~getFieldValidators~~ } from \"~/~~admin~~/~~components~~/~~FieldEditor/EditFieldDialog/getValidators~~.js\";\~~nimport { EditFieldDrawerContainer } from \"./EditFieldDrawerContainer.js\";\~~n~~// To A/B test, swap the import above with the one below:\n// import { EditFieldDialogContainer } from~~ \~~"./EditFieldDialogContainer.js\";\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 ~~const~~ ~~isSubtypeField = useMemo~~(~~() => {~~\n ~~if (!field.type)~~ {\n ~~return false;\n~~ }\n ~~const value~~ = ~~field.type.split(~~\~~":\");\~~n ~~return value~~.~~length > 1;\n~~ }~~, [field.type]);\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~~\n ~~const individualValidation = getFieldValidators(shadowField, fieldPlugin);\n const showValidatorsTab~~ =\~~n shadowField~~.~~list \|\| individualValidation~~.~~validators~~.~~length > 0;\n~~\~~n return (~~\n <~~EditFieldDrawerContainer~~\n ~~headerTitle~~={~~headerTitle~~}\n ~~shadowField~~={~~shadowField~~}\n ~~predefinedValuesTabEnabled={predefinedValuesTabEnabled~~}\n ~~showValidatorsTab~~={~~showValidatorsTab~~}\n ~~isSubtypeField=~~{~~isSubtypeField}~~\n ~~onClose~~={~~props~~.~~onClose~~}\~~n onSubmit~~={~~submit~~}\n />\n ~~);\~~n }}\n </~~Form~~>\n );\n};\n\nexport default EditFieldDialog;\n"],"names":["t","i18n","~~setupState~~","~~field~~","~~contentModel~~","~~clonedField~~","~~cloneDeep~~","~~renderPlugin~~","~~useRendererPlugins","EditFieldDialog","props","fieldPlugin","useModelField","~~setContentModelData","useModelEditor","~~shadowField~~","~~isTitleField~~","~~useState~~","~~headerTitle~~","~~onSubmit~~","~~data~~","~~form~~","~~prev~~","~~isSubtypeField~~","~~useMemo~~","~~value~~","~~Form~~","~~submit~~","~~predefinedValuesTabEnabled~~","~~individualValidation~~","~~getFieldValidators~~","~~showValidatorsTab~~"~~,"EditFieldDrawerContainer"~~],"mappings":"~~;;;;;;;;AAaA~~,MAAMA,IAAIC,KAAK,SAAS,CAAC;~~AAEzB~~,~~SAASC~~,~~WAAWC~~,~~KAAoB~~,~~EAAEC,YAAmC~~;~~IACzE~~,~~MAAMC~~,~~cAAcC~~,~~UAAUH;IAE9B~~,~~IAAI~~,~~CAACE~~,~~YAAY~~,~~QAAQ~~,~~IAAI~~,~~CAACA,~~YAAY,~~QAAQ~~,~~CAAC~~,~~IAAI~~,EAAE~~;QACrD~~,~~MAAM,CAACE,aAAa,~~GAAGC;~~QAEvB~~,~~IAAID~~,~~cACAF,YAAY,QAAQ,GAAG~~;~~YAAE~~,~~MAAME~~,~~aAAa~~,QAAQ,~~CAAC~~,~~YAAY;QAAC;IAE1E;IAEA~~,OAAO~~;QACH~~,~~aAAaF;QACb~~,~~cAAcD,aAAa,YAAY,KAAKD,MAAM,OAAO~~;~~IAC7D~~;~~AACJ~~;~~AAYA~~,~~MAAMM~~,~~kBAAkB~~,~~CAACC;IACrB~~,~~MAAM~~,~~EAAEP~~,~~KAAK~~,~~EAAEQ~~,~~WAAW~~,~~EAAE~~,~~GAAGC;IAC/B~~,~~MAAM~~,~~EAAE~~,~~MAAMR~~,~~YAAY~~,~~EAAE~~,~~SAASS~~,~~mBAAmB~~,~~EAAE,GAAGC~~;~~IAC7D~~,MAAM,~~CAAC~~,~~EAAEC~~,~~WAAW~~,~~EAAEC~~,~~YAAY~~,~~EAAE~~,~~CAAC~~,~~GAAGC,SAASf,WAAWC,OAAOC~~;~~IAEnE~~,~~MAAMc~~,~~cAAclB~~,CAAC,CAAC,iCAAiC,CAAC,CAAC;QACrD,~~gBAAgBW~~,~~YAAY~~,KAAK,~~CAAC~~,~~KAAK~~;~~IAC3C~~;IAEA,~~MAAMQ~~,~~WAAwC~~,~~CAACC~~,MAAMC;~~QAIjD~~,~~IAAIL~~,~~gBAAgBZ~~,aAAa,YAAY,~~KAAKgB~~,~~KAAK~~,OAAO,~~EAC1DP~~,~~oBAAoBS~~,CAAAA,~~OACT~~;~~gBACH~~,GAAGA,IAAI;gBACP,~~cAAcF~~,~~KAAK~~,OAAO;~~YAC9B~~;~~QAIRV~~,MAAM,QAAQ,~~CAACU,MAAMC~~;~~IACzB~~;IAEA,~~MAAME~~,~~iBAAiBC~~,~~QAAQ~~;~~QAC3B~~,~~IAAI~~,~~CAACrB,~~MAAM,~~IAAI,EACX,~~OAAO;~~QAEX~~,~~MAAMsB~~,~~QAAQtB,~~MAAM,~~IAAI,CAAC,KAAK,CAAC~~;~~QAC/B~~,~~OAAOsB,MAAM,MAAM,GAAG~~;~~IAC1B~~,~~GAAG~~;~~QAACtB~~,MAAM~~,IAAI~~;~~KAAC;IAEf~~,~~OAIK~~,~~cACD~~,~~oBAACuB~~,~~MAAIA;QAAgB~~,~~MAAMX~~;~~QAAa~~,~~UAAUI;OAC7C~~,CAAC,~~EAAE~~,~~MAAMJ,WAAW,EAAEY,~~MAAM,~~EAAE~~;~~QAC3B~~,~~MAAMC~~,~~6BAA6B~~,~~CAAC~~,~~CAChCjB~~,~~CAAAA~~,~~YAAY~~,~~KAAK,~~CAAC,~~qBAAqB~~,~~IACvCI,YAAY,gBAAgB,IAC5BA,YAAY,gBAAgB,~~CAAC,~~OAAM~~;~~QAGvC~~,~~MAAMc~~,~~uBAAuBC,mBAAmBf,aAAaJ~~;~~QAC7D~~,~~MAAMoB~~,~~oBACFhB~~,~~YAAY~~,IAAI,~~IAAIc~~,~~qBAAqB~~,~~UAAU~~,~~CAAC~~,~~MAAM~~,~~GAAG~~;~~QAEjE~~,~~OAAO~~,~~WAAP~~,~~GACI~~,~~oBAACG~~,~~0BAAwBA~~;~~YACrB~~,~~aAAad;YACb~~,~~aAAaH~~;~~YACb~~,~~4BAA4Ba~~;~~YAC5B~~,~~mBAAmBG;YACnB~~,~~gBAAgBR;YAChB~~,~~SAASb~~,~~MAAM~~,~~OAAO~~;~~YACtB,UAAUiB;;IAGtB~~;~~AAGZ~~;AAEA,~~oCAAelB~~"}
1	+ {"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 return container.resolveAll(CmsFieldType).find(ft => ft.type === field.type);\n }, [container, field.type]);\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","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,IACfH,UAAU,UAAU,CAACM,cAAc,IAAI,CAACC,CAAAA,KAAMA,GAAG,IAAI,KAAKZ,MAAM,IAAI,GAC5E;QAACK;QAAWL,MAAM,IAAI;KAAC;IAE1Ba,UAAU;QACNN,UAAU,IAAI,CAACP,OAAOE;IAC1B,GAAG,EAAE;IAEL,MAAMY,cAAcnB,CAAC,CAAC,iCAAiC,CAAC,CAAC;QACrD,gBAAgBe,YAAYA,UAAU,KAAK,GAAGV,MAAM,IAAI;IAC5D;IAEA,MAAMe,eAAeb,aAAa,YAAY,KAAKF,MAAM,OAAO;IAEhE,MAAMgB,eAAe;QACjB,MAAMC,SAAS,MAAMV,UAAU,MAAM;QACrC,IAAI,CAACU,QACD;QAGJ,IAAIF,gBAAgBb,aAAa,YAAY,KAAKe,OAAO,OAAO,EAC5Dd,oBAAoBe,CAAAA,OAAS;gBACzB,GAAGA,IAAI;gBACP,cAAcD,OAAO,OAAO;YAChC;QAGJlB,MAAM,QAAQ,CAACkB;IACnB;IAEA,OAAO,WAAP,GACI,oBAACE,QAAMA;QACH,OAAOL;QACP,MAAM;QACN,OAAO;QACP,SAASf,MAAM,OAAO;QACtB,aAAa;QACb,iBAAiB;QACjB,MAAM;QACN,uBACI,wDACI,oBAACoB,OAAO,YAAY;YAChB,MAAMxB,CAAC,CAAC,MAAM,CAAC;YACf,eAAY;0BAEhB,oBAACwB,OAAO,aAAa;YACjB,MAAMxB,CAAC,CAAC,UAAU,CAAC;YACnB,SAASqB;YACT,eAAY;;QAIxB,eAAa;OAEZT,UAAU,EAAE,CAAC,IAAI,GAAG,WAAH,GACd,wDACI,oBAACa,YAAUA;QAAC,MAAMb,UAAU,EAAE,CAAC,IAAI;sBACnC,oBAACc,UAAQA;QAAC,MAAK;QAAiB,MAAMd,UAAU,EAAE,CAAC,IAAI;UAE3D;AAGhB;AAEA,oCAAeV"}

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

@@ -6,5 +6,6 @@ export interface FieldProps {
     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;

package/admin/components/FieldEditor/Field.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { i18n } from "@webiny/app/i18n/index.js";
 import { useModelEditor } from "../../hooks/index.js";
 import { useModelFieldEditor } from "./useModelFieldEditor.js";
 import { useSnackbar } from "@webiny/app-admin";
-import { DropdownMenu, Heading, IconButton, Tag, Text } from "@webiny/admin-ui";
+import { DropdownMenu, Icon, IconButton, Tag, Text } from "@webiny/admin-ui";
 const t = i18n.ns("app-headless-cms/admin/components/editor/field");
 const allowedTitleFieldTypes = [
     "text",
@@ -46,7 +46,7 @@ const Field = (props)=>{
     const { field, onEdit, parent } = props;
     const { showSnackbar, showErrorSnackbar } = useSnackbar();
     const { setData: setModel, data: model } = useModelEditor();
-    const { getFieldPlugin, getFieldRendererPlugin } = useModelFieldEditor();
+    const { getFieldType, getFieldRenderer } = useModelFieldEditor();
     const removeFieldFromSelected = useCallback(async ()=>{
         if (model.titleFieldId === field.fieldId) await setModel((data)=>({
                 ...data,
@@ -104,18 +104,18 @@ const Field = (props)=>{
         field.fieldId,
         setModel
     ]);
-    const fieldPlugin = getFieldPlugin(field.type);
+    const fieldType = getFieldType(field.type);
     const editorFieldOptionPlugins = plugins.byType("cms-editor-field-option");
-    if (!fieldPlugin) return null;
-    const rendererPlugin = getFieldRendererPlugin(field.renderer.name);
-    const canEdit = false !== fieldPlugin.field.canEditSettings;
+    if (!fieldType) return null;
+    const renderer = getFieldRenderer(field.renderer.name);
+    const canEdit = false !== fieldType.canEditSettings;
     const defaultInformationRenderer = useMemo(()=>{
         const fieldTypeName = getFieldTypeName(model, field, parent);
         const fn = ()=>{
             if (!fieldTypeName) return null;
             return /*#__PURE__*/ react.createElement(Tag, {
                 content: capitalize(fieldTypeName),
-                variant: "neutral-base"
+                variant: "neutral-light"
             });
         };
         fn.displayName = "FieldTypeRenderer";
@@ -123,38 +123,46 @@ const Field = (props)=>{
     }, [
         field.id
     ]);
-    const fieldInformationRenderer = fieldPlugin.field?.renderInfo;
+    const fieldInformationRenderer = fieldType.renderInfo;
     const info = [
-        rendererPlugin?.renderer.name,
+        renderer?.name,
         field.list ? "multiple values" : null
     ].filter(Boolean).join(", ");
     return /*#__PURE__*/ react.createElement(Fragment, null, /*#__PURE__*/ react.createElement("div", {
-        className: "flex justify-between align-center"
-    }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
-        level: 6
+        className: "flex items-center justify-between gap-sm-extra"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm-extra flex-1 min-w-0"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: fieldType.icon,
+        label: fieldType.label,
+        size: "md",
+        color: "neutral-light"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xxs min-w-0"
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: "text-md font-semibold text-neutral-primary truncate leading-5"
     }, field.label), /*#__PURE__*/ react.createElement(Text, {
         size: "sm",
-        className: "text-neutral-strong"
-    }, fieldPlugin.field.label, info && /*#__PURE__*/ react.createElement("span", {
-        className: "lowercase"
-    }, " (", info, ")"))), /*#__PURE__*/ react.createElement("div", {
-        className: "flex items-center justify-end gap-sm"
+        className: "text-neutral-muted truncate"
+    }, fieldType.label, info && /*#__PURE__*/ react.createElement("span", null, " / ", info)))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-end gap-xs shrink-0"
     }, fieldInformationRenderer ? fieldInformationRenderer({
         model,
         field
-    }) : defaultInformationRenderer(), canEdit ? /*#__PURE__*/ react.createElement(IconButton, {
-        "data-testid": "cms.editor.edit-field",
-        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-        onClick: ()=>onEdit(field),
-        variant: "ghost",
-        size: "sm"
-    }) : null, /*#__PURE__*/ react.createElement(DropdownMenu, {
+    }) : defaultInformationRenderer(), /*#__PURE__*/ react.createElement(DropdownMenu, {
         trigger: /*#__PURE__*/ react.createElement(IconButton, {
             icon: /*#__PURE__*/ react.createElement(more_vert_svg_ReactComponent, null),
             variant: "ghost",
             size: "sm"
         })
-    }, editorFieldOptionPlugins.map((pl)=>/*#__PURE__*/ react.cloneElement(pl.render(), {
+    }, canEdit && /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        onClick: ()=>onEdit(field),
+        text: t`Edit`,
+        icon: /*#__PURE__*/ react.createElement(DropdownMenu.Item.Icon, {
+            element: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: t`Edit field`
+        })
+    }), editorFieldOptionPlugins.map((pl)=>/*#__PURE__*/ react.cloneElement(pl.render(), {
             key: pl.name
         })), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
         disabled: !isFieldAllowedToBeTitle(model, field, parent),
@@ -187,13 +195,12 @@ const Field = (props)=>{
             element: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
             label: t`Delete`
         }),
-        className: "text-destructive-primary! [&_svg]:fill-destructive"
-    })))), fieldPlugin.field.render && /*#__PURE__*/ react.createElement("div", {
+        variant: "destructive"
+    })))), fieldType.renderEditor && /*#__PURE__*/ react.createElement("div", {
         className: "pt-md"
-    }, fieldPlugin.field.render({
+    }, fieldType.renderEditor({
         field,
-        data: model,
-        setData: setModel
+        model
     })));
 };
 const FieldEditor_Field = /*#__PURE__*/ react.memo(Field);

package/admin/components/FieldEditor/Field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"admin/components/FieldEditor/Field.js","sources":["../../../../src/admin/components/FieldEditor/Field.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useMemo } from \"react\";\nimport capitalize from \"lodash/capitalize.js\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"@webiny/icons/title.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { CmsModelField, CmsEditorFieldOptionPlugin, CmsModel } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useModelEditor } from \"~/admin/hooks/index.js\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/useModelFieldEditor.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { IconButton, Heading, Text, DropdownMenu, Tag } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n if (field.list \|\| parent) {\n return false;\n } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n return false;\n } else if (model.titleFieldId === field.fieldId) {\n return false;\n }\n return true;\n};\nconst isFieldAllowedToBeDescription = (\n model: CmsModel,\n field: CmsModelField,\n parent?: CmsModelField\n) => {\n if (field.list \|\| parent) {\n return false;\n } else if (model.descriptionFieldId === field.fieldId) {\n return false;\n }\n return field.type === \"long-text\";\n};\n\nconst isFieldAllowedToBeImage = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n if (field.list \|\| parent) {\n return false;\n } else if (model.imageFieldId === field.fieldId) {\n return false;\n }\n return field.type === \"file\" && field.settings?.imagesOnly;\n};\n\nconst getFieldTypeName = (\n model: CmsModel,\n field: CmsModelField,\n parent?: CmsModelField\n): string \| null => {\n if (parent) {\n return null;\n }\n const isTitleField = field.fieldId === model?.titleFieldId && !parent;\n const isDescriptionField = field.fieldId === model?.descriptionFieldId && !parent;\n const isImageField = field.fieldId === model?.imageFieldId && !parent;\n\n return (\n [\n isTitleField ? \"entry title\" : null,\n isDescriptionField ? \"entry description\" : null,\n isImageField ? \"entry image\" : null\n ]\n .filter(Boolean)\n .join(\"\") \|\| null\n );\n};\n\nexport interface FieldProps {\n field: CmsModelField;\n onDelete: (field: CmsModelField) => void;\n onEdit: (field: CmsModelField) => void;\n parent?: CmsModelField;\n}\n\nconst Field = (props: FieldProps) => {\n const { field, onEdit, parent } = props;\n const { showSnackbar, showErrorSnackbar } = useSnackbar();\n const { setData: setModel, data: model } = useModelEditor();\n const { getFieldPlugin, getFieldRendererPlugin } = useModelFieldEditor();\n\n const removeFieldFromSelected = useCallback(async () => {\n if (model.titleFieldId === field.fieldId) {\n await setModel(data => {\n return {\n ...data,\n titleFieldId: null\n };\n });\n } else if (model.descriptionFieldId === field.fieldId) {\n await setModel(data => {\n return {\n ...data,\n descriptionFieldId: null\n };\n });\n } else if (model.imageFieldId === field.fieldId) {\n await setModel(data => {\n return {\n ...data,\n imageFieldId: null\n };\n });\n }\n }, [field.id, setModel, model]);\n\n const onDelete = useCallback(async () => {\n await removeFieldFromSelected();\n props.onDelete(field);\n return;\n }, [field.fieldId]);\n\n const setAsTitle = useCallback(async (): Promise<void> => {\n const response = await setModel(data => {\n return { ...data, titleFieldId: field.fieldId };\n });\n\n if (response && response.error) {\n return showErrorSnackbar(response.error.message);\n }\n\n showSnackbar(t`Title field set successfully.`);\n }, [field.fieldId, setModel]);\n\n const setAsDescription = useCallback(async (): Promise<void> => {\n const response = await setModel(data => {\n return { ...data, descriptionFieldId: field.fieldId };\n });\n\n if (response && response.error) {\n return showErrorSnackbar(response.error.message);\n }\n\n showSnackbar(t`Description field set successfully.`);\n }, [field.fieldId, setModel]);\n\n const setAsImage = useCallback(async (): Promise<void> => {\n const response = await setModel(data => {\n return { ...data, imageFieldId: field.fieldId };\n });\n\n if (response && response.error) {\n return showErrorSnackbar(response.error.message);\n }\n\n showSnackbar(t`Image field set successfully.`);\n }, [field.fieldId, setModel]);\n\n const fieldPlugin = getFieldPlugin(field.type);\n const editorFieldOptionPlugins =\n plugins.byType<CmsEditorFieldOptionPlugin>(\"cms-editor-field-option\");\n\n if (!fieldPlugin) {\n return null;\n }\n\n const rendererPlugin = getFieldRendererPlugin(field.renderer.name);\n const canEdit = fieldPlugin.field.canEditSettings !== false;\n\n const defaultInformationRenderer = useMemo(() => {\n const fieldTypeName = getFieldTypeName(model, field, parent);\n const fn = () => {\n if (!fieldTypeName) {\n return null;\n }\n return <Tag content={capitalize(fieldTypeName)} variant={\"neutral-base\"} />;\n };\n\n fn.displayName = \"FieldTypeRenderer\";\n\n return fn;\n }, [field.id]);\n\n const fieldInformationRenderer = fieldPlugin.field?.renderInfo;\n\n const info = [rendererPlugin?.renderer.name, field.list ? \"multiple values\" : null]\n .filter(Boolean)\n .join(\", \");\n\n return (\n <Fragment>\n <div className={\"flex justify-between align-center\"}>\n <div>\n <Heading level={6}>{field.label}</Heading>\n <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n {fieldPlugin.field.label}\n {info && <span className={\"lowercase\"}> ({info})</span>}\n </Text>\n </div>\n <div className={\"flex items-center justify-end gap-sm\"}>\n {fieldInformationRenderer\n ? fieldInformationRenderer({ model, field })\n : defaultInformationRenderer()}\n {canEdit ? (\n <IconButton\n data-testid={\"cms.editor.edit-field\"}\n icon={<EditIcon />}\n onClick={() => onEdit(field)}\n variant={\"ghost\"}\n size={\"sm\"}\n />\n ) : null}\n <DropdownMenu\n trigger={\n <IconButton icon={<MoreVerticalIcon />} variant={\"ghost\"} size={\"sm\"} />\n }\n >\n {editorFieldOptionPlugins.map(pl =>\n React.cloneElement(pl.render(), { key: pl.name })\n )}\n {/* We only allow this action for top-level fields. */}\n <DropdownMenu.Item\n disabled={!isFieldAllowedToBeTitle(model, field, parent)}\n onClick={setAsTitle}\n text={t`Use as title`}\n icon={\n <DropdownMenu.Item.Icon\n element={<TitleIcon />}\n label={t`Use as title`}\n />\n }\n />\n <DropdownMenu.Item\n disabled={!isFieldAllowedToBeDescription(model, field, parent)}\n onClick={setAsDescription}\n text={t`Use as description`}\n icon={\n <DropdownMenu.Item.Icon\n element={<TitleIcon />}\n label={t`Use as description`}\n />\n }\n />\n <DropdownMenu.Item\n disabled={!isFieldAllowedToBeImage(model, field, parent)}\n onClick={setAsImage}\n text={t`Use as image`}\n icon={\n <DropdownMenu.Item.Icon\n element={<TitleIcon />}\n label={t`Use as image`}\n />\n }\n />\n <DropdownMenu.Item\n onClick={onDelete}\n text={t`Delete`}\n icon={\n <DropdownMenu.Item.Icon\n element={<DeleteIcon />}\n label={t`Delete`}\n />\n }\n className={\"text-destructive-primary! [&_svg]:fill-destructive\"}\n />\n </DropdownMenu>\n </div>\n </div>\n {fieldPlugin.field.render && (\n <div className={\"pt-md\"}>\n {fieldPlugin.field.render({ field, data: model, setData: setModel })}\n </div>\n )}\n </Fragment>\n );\n};\n\nexport default React.memo(Field);\n"],"names":["t","i18n","allowedTitleFieldTypes","isFieldAllowedToBeTitle","model","field","parent","isFieldAllowedToBeDescription","isFieldAllowedToBeImage","getFieldTypeName","isTitleField","isDescriptionField","isImageField","Boolean","Field","props","onEdit","showSnackbar","showErrorSnackbar","useSnackbar","setModel","useModelEditor","getFieldPlugin","getFieldRendererPlugin","useModelFieldEditor","removeFieldFromSelected","useCallback","data","onDelete","setAsTitle","response","setAsDescription","setAsImage","fieldPlugin","editorFieldOptionPlugins","plugins","rendererPlugin","canEdit","defaultInformationRenderer","useMemo","fieldTypeName","fn","Tag","capitalize","fieldInformationRenderer","info","Fragment","Heading","Text","IconButton","EditIcon","DropdownMenu","MoreVerticalIcon","pl","React","TitleIcon","DeleteIcon"],"mappings":"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"}
1	+ {"version":3,"file":"admin/components/FieldEditor/Field.js","sources":["../../../../src/admin/components/FieldEditor/Field.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useMemo } from \"react\";\nimport capitalize from \"lodash/capitalize.js\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"@webiny/icons/title.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { CmsModelField, CmsEditorFieldOptionPlugin, CmsModel } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useModelEditor } from \"~/admin/hooks/index.js\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/useModelFieldEditor.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { Icon, IconButton, Text, DropdownMenu, Tag } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n if (field.list \|\| parent) {\n return false;\n } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n return false;\n } else if (model.titleFieldId === field.fieldId) {\n return false;\n }\n return true;\n};\nconst isFieldAllowedToBeDescription = (\n model: CmsModel,\n field: CmsModelField,\n parent?: CmsModelField\n) => {\n if (field.list \|\| parent) {\n return false;\n } else if (model.descriptionFieldId === field.fieldId) {\n return false;\n }\n return field.type === \"long-text\";\n};\n\nconst isFieldAllowedToBeImage = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n if (field.list \|\| parent) {\n return false;\n } else if (model.imageFieldId === field.fieldId) {\n return false;\n }\n return field.type === \"file\" && field.settings?.imagesOnly;\n};\n\nconst getFieldTypeName = (\n model: CmsModel,\n field: CmsModelField,\n parent?: CmsModelField\n): string \| null => {\n if (parent) {\n return null;\n }\n const isTitleField = field.fieldId === model?.titleFieldId && !parent;\n const isDescriptionField = field.fieldId === model?.descriptionFieldId && !parent;\n const isImageField = field.fieldId === model?.imageFieldId && !parent;\n\n return (\n [\n isTitleField ? \"entry title\" : null,\n isDescriptionField ? \"entry description\" : null,\n isImageField ? \"entry image\" : null\n ]\n .filter(Boolean)\n .join(\"\") \|\| null\n );\n};\n\nexport interface FieldProps {\n field: CmsModelField;\n onDelete: (field: CmsModelField) => void;\n onEdit: (field: CmsModelField) => void;\n parent?: CmsModelField;\n}\n\nconst Field = (props: FieldProps) => {\n const { field, onEdit, parent } = props;\n const { showSnackbar, showErrorSnackbar } = useSnackbar();\n const { setData: setModel, data: model } = useModelEditor();\n const { getFieldType, getFieldRenderer } = useModelFieldEditor();\n\n const removeFieldFromSelected = useCallback(async () => {\n if (model.titleFieldId === field.fieldId) {\n await setModel(data => {\n return {\n ...data,\n titleFieldId: null\n };\n });\n } else if (model.descriptionFieldId === field.fieldId) {\n await setModel(data => {\n return {\n ...data,\n descriptionFieldId: null\n };\n });\n } else if (model.imageFieldId === field.fieldId) {\n await setModel(data => {\n return {\n ...data,\n imageFieldId: null\n };\n });\n }\n }, [field.id, setModel, model]);\n\n const onDelete = useCallback(async () => {\n await removeFieldFromSelected();\n props.onDelete(field);\n return;\n }, [field.fieldId]);\n\n const setAsTitle = useCallback(async (): Promise<void> => {\n const response = await setModel(data => {\n return { ...data, titleFieldId: field.fieldId };\n });\n\n if (response && response.error) {\n return showErrorSnackbar(response.error.message);\n }\n\n showSnackbar(t`Title field set successfully.`);\n }, [field.fieldId, setModel]);\n\n const setAsDescription = useCallback(async (): Promise<void> => {\n const response = await setModel(data => {\n return { ...data, descriptionFieldId: field.fieldId };\n });\n\n if (response && response.error) {\n return showErrorSnackbar(response.error.message);\n }\n\n showSnackbar(t`Description field set successfully.`);\n }, [field.fieldId, setModel]);\n\n const setAsImage = useCallback(async (): Promise<void> => {\n const response = await setModel(data => {\n return { ...data, imageFieldId: field.fieldId };\n });\n\n if (response && response.error) {\n return showErrorSnackbar(response.error.message);\n }\n\n showSnackbar(t`Image field set successfully.`);\n }, [field.fieldId, setModel]);\n\n const fieldType = getFieldType(field.type);\n const editorFieldOptionPlugins =\n plugins.byType<CmsEditorFieldOptionPlugin>(\"cms-editor-field-option\");\n\n if (!fieldType) {\n return null;\n }\n\n const renderer = getFieldRenderer(field.renderer.name);\n const canEdit = fieldType.canEditSettings !== false;\n\n const defaultInformationRenderer = useMemo(() => {\n const fieldTypeName = getFieldTypeName(model, field, parent);\n const fn = () => {\n if (!fieldTypeName) {\n return null;\n }\n return <Tag content={capitalize(fieldTypeName)} variant={\"neutral-light\"} />;\n };\n\n fn.displayName = \"FieldTypeRenderer\";\n\n return fn;\n }, [field.id]);\n\n const fieldInformationRenderer = fieldType.renderInfo;\n\n const info = [renderer?.name, field.list ? \"multiple values\" : null].filter(Boolean).join(\", \");\n\n return (\n <Fragment>\n <div className={\"flex items-center justify-between gap-sm-extra\"}>\n <div className={\"flex items-center gap-sm-extra flex-1 min-w-0\"}>\n <Icon\n icon={fieldType.icon}\n label={fieldType.label}\n size={\"md\"}\n color={\"neutral-light\"}\n />\n <div className={\"flex flex-col gap-xxs min-w-0\"}>\n <span\n className={\n \"text-md font-semibold text-neutral-primary truncate leading-5\"\n }\n >\n {field.label}\n </span>\n <Text size={\"sm\"} className={\"text-neutral-muted truncate\"}>\n {fieldType.label}\n {info && <span> / {info}</span>}\n </Text>\n </div>\n </div>\n <div className={\"flex items-center justify-end gap-xs shrink-0\"}>\n {fieldInformationRenderer\n ? fieldInformationRenderer({ model, field })\n : defaultInformationRenderer()}\n <DropdownMenu\n trigger={\n <IconButton icon={<MoreVerticalIcon />} variant={\"ghost\"} size={\"sm\"} />\n }\n >\n {canEdit && (\n <DropdownMenu.Item\n onClick={() => onEdit(field)}\n text={t`Edit`}\n icon={\n <DropdownMenu.Item.Icon\n element={<EditIcon />}\n label={t`Edit field`}\n />\n }\n />\n )}\n {editorFieldOptionPlugins.map(pl =>\n React.cloneElement(pl.render(), { key: pl.name })\n )}\n {/* We only allow this action for top-level fields. */}\n <DropdownMenu.Item\n disabled={!isFieldAllowedToBeTitle(model, field, parent)}\n onClick={setAsTitle}\n text={t`Use as title`}\n icon={\n <DropdownMenu.Item.Icon\n element={<TitleIcon />}\n label={t`Use as title`}\n />\n }\n />\n <DropdownMenu.Item\n disabled={!isFieldAllowedToBeDescription(model, field, parent)}\n onClick={setAsDescription}\n text={t`Use as description`}\n icon={\n <DropdownMenu.Item.Icon\n element={<TitleIcon />}\n label={t`Use as description`}\n />\n }\n />\n <DropdownMenu.Item\n disabled={!isFieldAllowedToBeImage(model, field, parent)}\n onClick={setAsImage}\n text={t`Use as image`}\n icon={\n <DropdownMenu.Item.Icon\n element={<TitleIcon />}\n label={t`Use as image`}\n />\n }\n />\n <DropdownMenu.Item\n onClick={onDelete}\n text={t`Delete`}\n icon={\n <DropdownMenu.Item.Icon\n element={<DeleteIcon />}\n label={t`Delete`}\n />\n }\n variant={\"destructive\"}\n />\n </DropdownMenu>\n </div>\n </div>\n {fieldType.renderEditor && (\n <div className={\"pt-md\"}>{fieldType.renderEditor({ field, model })}</div>\n )}\n </Fragment>\n );\n};\n\nexport default React.memo(Field);\n"],"names":["t","i18n","allowedTitleFieldTypes","isFieldAllowedToBeTitle","model","field","parent","isFieldAllowedToBeDescription","isFieldAllowedToBeImage","getFieldTypeName","isTitleField","isDescriptionField","isImageField","Boolean","Field","props","onEdit","showSnackbar","showErrorSnackbar","useSnackbar","setModel","useModelEditor","getFieldType","getFieldRenderer","useModelFieldEditor","removeFieldFromSelected","useCallback","data","onDelete","setAsTitle","response","setAsDescription","setAsImage","fieldType","editorFieldOptionPlugins","plugins","renderer","canEdit","defaultInformationRenderer","useMemo","fieldTypeName","fn","Tag","capitalize","fieldInformationRenderer","info","Fragment","Icon","Text","DropdownMenu","IconButton","MoreVerticalIcon","EditIcon","pl","React","TitleIcon","DeleteIcon"],"mappings":"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"}

package/admin/components/FieldEditor/FieldEditor.js CHANGED Viewed

@@ -9,20 +9,20 @@ import Field from "./Field.js";
 import { LayoutCell } from "./LayoutCell.js";
 import { useModelFieldEditor } from "./useModelFieldEditor.js";
 import { FieldEditorProvider } from "./FieldEditorContext.js";
-import { isLayoutField } from "@webiny/app-headless-cms-common/types/model.js";
+import { isLayoutField } from "../../../types.js";
 import { ModelFieldProvider } from "../ModelFieldProvider/index.js";
-import { Icon, cn } from "@webiny/admin-ui";
+import { IconButton } from "@webiny/admin-ui";
 const t = i18n.namespace("app-headless-cms/admin/components/editor");
 const fieldTypes = [
     "field",
     "newField"
 ];
 const Editor = ()=>{
-    const { parent, depth, insertField, updateField, deleteField, fields, noConflict, editField, onFieldDrop, onEndDrag, field, dropTarget, getFieldPlugin, getLayoutFieldPlugin, getField } = useModelFieldEditor();
+    const { parent, depth, insertField, updateField, deleteField, fields, noConflict, editField, onFieldDrop, onEndDrag, field, dropTarget, getFieldType, getLayoutFieldType, getField } = useModelFieldEditor();
     const collectLayoutFieldFields = (layoutField)=>{
-        const plugin = getLayoutFieldPlugin(layoutField.type);
-        if (!plugin?.field.collectFields) return [];
-        return plugin.field.collectFields({
+        const lft = getLayoutFieldType(layoutField.type);
+        if (!lft || !lft.collectFields) return [];
+        return lft.collectFields({
             field: layoutField,
             getField: (id)=>getField({
                     id
@@ -30,18 +30,16 @@ const Editor = ()=>{
         });
     };
     const canDropIntoField = (field, draggable)=>{
-        const fieldPlugin = getFieldPlugin(field.type);
-        if (!fieldPlugin) return true;
-        const canAccept = fieldPlugin.field.canAccept;
-        if ("function" == typeof canAccept && !canAccept(field, draggable)) return false;
+        const ft = getFieldType(field.type);
+        if (ft && "function" == typeof ft.canAccept && !ft.canAccept(field, draggable)) return false;
         return true;
     };
     const isVerticalDropzoneVisible = (cb)=>(item)=>{
             if ("newLayoutField" === item.type || "layoutField" === item.type) return false;
             if (!parent) return cb(item);
-            const fieldPlugin = getFieldPlugin(parent.type);
-            if (fieldPlugin) {
-                const allowLayout = fieldPlugin.field.allowLayout ?? true;
+            const parentFieldType = getFieldType(parent.type);
+            if (parentFieldType) {
+                const allowLayout = parentFieldType.allowLayout ?? true;
                 if (!allowLayout) return false;
             }
             if (!canDropIntoField(parent, item)) return false;
@@ -72,26 +70,16 @@ const Editor = ()=>{
             endDrag: onEndDrag,
             key: rowKey
         }, ({ drag, isDragging })=>/*#__PURE__*/ react.createElement("div", {
-                className: cn([
-                    "flex flex-column",
-                    "relative",
-                    "mb-md last-of-type:mb-none",
-                    "bg-neutral-dimmed",
-                    isDragging ? "opacity-30" : "opacity-100"
-                ])
+                className: `group flex flex-column relative mb-sm-extra last-of-type:mb-none ${isDragging ? "opacity-50" : "opacity-100"}`
             }, /*#__PURE__*/ react.createElement("div", {
-                className: cn([
-                    "cursor-grab",
-                    "absolute left-sm-plus top-sm-plus z-10"
-                ]),
+                className: "cursor-grab absolute left-[0] top-1/2 -translate-y-1/2 z-10 invisible group-hover:visible",
                 ref: (element)=>{
                     drag(element);
                 }
-            }, /*#__PURE__*/ react.createElement(Icon, {
+            }, /*#__PURE__*/ react.createElement(IconButton, {
                 icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-                label: "Drag to move this row",
-                color: "neutral-light",
-                size: "sm"
+                variant: "secondary",
+                size: "xs"
             })), /*#__PURE__*/ react.createElement(Horizontal, {
                 isVisible: isHorizontalDropzoneVisible(noConflict()),
                 "data-testid": `cms-editor-row-droppable-top-${index}`,
@@ -100,10 +88,7 @@ const Editor = ()=>{
                         index: null
                     })
             }), /*#__PURE__*/ react.createElement("div", {
-                className: cn([
-                    "w-full flex justify-between",
-                    "pl-xl pr-sm py-sm"
-                ]),
+                className: "w-full flex justify-between gap-x-sm-extra",
                 "data-testid": "cms.editor.field-row"
             }, row.map((cell, fieldIndex)=>{
                 if (isLayoutField(cell)) return /*#__PURE__*/ react.createElement(Draggable, {
@@ -119,13 +104,9 @@ const Editor = ()=>{
                         ref: (element)=>{
                             drag(element);
                         },
-                        className: cn([
-                            "relative",
-                            "flex-1 basis-full",
-                            "mx-sm"
-                        ])
+                        className: "relative flex-1 min-w-0"
                     }, /*#__PURE__*/ react.createElement("div", {
-                        className: "cursor-grab bg-neutral-base p-md shadow-sm rounded-xs"
+                        className: "cursor-grab bg-neutral-base drop-shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg pl-md pr-sm py-sm"
                     }, /*#__PURE__*/ react.createElement(LayoutCell, {
                         field: cell,
                         rowIndex: index,
@@ -147,11 +128,7 @@ const Editor = ()=>{
                     },
                     endDrag: onEndDrag
                 }, ({ drag })=>/*#__PURE__*/ react.createElement("div", {
-                        className: cn([
-                            "relative",
-                            "flex-1 basis-full",
-                            "mx-sm"
-                        ]),
+                        className: "relative flex-1 min-w-0",
                         ref: (element)=>{
                             drag(element);
                         }
@@ -163,7 +140,7 @@ const Editor = ()=>{
                             }),
                         isVisible: isVerticalDropzoneVisible(noConflict((item)=>fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index)))
                     }), /*#__PURE__*/ react.createElement("div", {
-                        className: "cursor-grab bg-neutral-base p-md shadow-sm rounded-xs"
+                        className: "cursor-grab bg-neutral-base drop-shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg pl-md pr-sm py-sm"
                     }, /*#__PURE__*/ react.createElement(Field, {
                         parent: parent,
                         field: field,