@webiny/app-headless-cms 6.3.0 → 6.4.0-beta.1

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

@@ -1,19 +1,12 @@
-import React, { useCallback, useRef, useEffect } from "react";
-import { Accordion, Tabs, ScrollArea } from "@webiny/admin-ui";
-import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
-import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
-import { ReactComponent as ArrowUpIcon } from "@webiny/icons/expand_less.svg";
-import { ReactComponent as ArrowDownIcon } from "@webiny/icons/expand_more.svg";
-import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import react, { useCallback, useEffect, useRef } from "react";
+import { Accordion, Button, Grid, Heading, IconButton, Input, ScrollArea, Tabs, Text, Textarea } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as expand_less_svg_ReactComponent } from "@webiny/icons/expand_less.svg";
+import { ReactComponent as expand_more_svg_ReactComponent } from "@webiny/icons/expand_more.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
 import { useConfirmationDialog, useDialogs } from "@webiny/app-admin";
-import { Grid } from "@webiny/admin-ui";
-import { IconButton } from "@webiny/admin-ui";
-import { Button } from "@webiny/admin-ui";
-import { Input } from "@webiny/admin-ui";
-import { Textarea } from "@webiny/admin-ui";
-import { Heading } from "@webiny/admin-ui";
-import { Text } from "@webiny/admin-ui";
 import { Bind } from "@webiny/form";
 import { FieldEditor } from "../../../components/FieldEditor/index.js";
 import { IconPicker } from "../../../components/IconPicker.js";
@@ -21,454 +14,428 @@ import { useModelFieldEditor } from "../../../hooks/index.js";
 import { PermissionsEditor } from "../../../components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js";
 import { RulesEditor } from "../../../components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js";
 import { useModelEditor } from "../../../components/ContentModelEditor/useModelEditor.js";
-const TabsSettings = () => {
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: "mt-md"
-  }, /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "label"
-  }, /*#__PURE__*/React.createElement(Input, {
-    label: "Label"
-  }))), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "description"
-  }, /*#__PURE__*/React.createElement(Input, {
-    label: "Description"
-  }))), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "help"
-  }, /*#__PURE__*/React.createElement(Textarea, {
-    label: "Help"
-  }))));
-};
-const TabsDialogContent = ({
-  fieldOptions
-}) => {
-  return /*#__PURE__*/React.createElement(ScrollArea, {
-    className: "max-h-[70vh] flex flex-col"
-  }, /*#__PURE__*/React.createElement(Tabs, {
-    size: "md",
-    separator: true,
-    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "tabs",
-      trigger: "Tabs",
-      value: "tabs",
-      content: /*#__PURE__*/React.createElement(TabsSettings, null)
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "permissions",
-      trigger: "Permissions",
-      value: "permissions",
-      content: /*#__PURE__*/React.createElement("div", {
-        className: "mt-md"
-      }, /*#__PURE__*/React.createElement(PermissionsEditor, null))
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "rules",
-      trigger: "Rules",
-      value: "rules",
-      content: /*#__PURE__*/React.createElement("div", {
-        className: "mt-md"
-      }, /*#__PURE__*/React.createElement(RulesEditor, {
-        fieldOptions: fieldOptions
-      }))
-    })]
-  }));
-};
-const TabSettingsFields = () => {
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: "mt-md"
-  }, /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "label"
-  }, /*#__PURE__*/React.createElement(Input, {
-    label: "Label"
-  }))), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "icon"
-  }, /*#__PURE__*/React.createElement(IconPicker, {
-    label: "Icon"
-  }))));
-};
-const TabDialogContent = ({
-  fieldOptions
-}) => {
-  return /*#__PURE__*/React.createElement(Tabs, {
-    size: "md",
-    separator: true,
-    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "tab",
-      trigger: "Tab",
-      value: "tab",
-      content: /*#__PURE__*/React.createElement(TabSettingsFields, null)
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "permissions",
-      trigger: "Permissions",
-      value: "permissions",
-      content: /*#__PURE__*/React.createElement("div", {
+const TabsSettings = ()=>/*#__PURE__*/ react.createElement(Grid, {
         className: "mt-md"
-      }, /*#__PURE__*/React.createElement(PermissionsEditor, null))
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "rules",
-      trigger: "Rules",
-      value: "rules",
-      content: /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "label"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Label"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "description"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Description"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "help"
+    }, /*#__PURE__*/ react.createElement(Textarea, {
+        label: "Help"
+    }))));
+const TabsDialogContent = ({ fieldOptions })=>/*#__PURE__*/ react.createElement(ScrollArea, {
+        className: "max-h-[70vh] flex flex-col"
+    }, /*#__PURE__*/ react.createElement(Tabs, {
+        size: "md",
+        separator: true,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "tabs",
+                trigger: "Tabs",
+                value: "tabs",
+                content: /*#__PURE__*/ react.createElement(TabsSettings, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "permissions",
+                trigger: "Permissions",
+                value: "permissions",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(PermissionsEditor, null))
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "rules",
+                trigger: "Rules",
+                value: "rules",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(RulesEditor, {
+                    fieldOptions: fieldOptions
+                }))
+            })
+        ]
+    }));
+const TabSettingsFields = ()=>/*#__PURE__*/ react.createElement(Grid, {
         className: "mt-md"
-      }, /*#__PURE__*/React.createElement(RulesEditor, {
-        fieldOptions: fieldOptions
-      }))
-    })]
-  });
-};
-
-/**
- * Create a synthetic parent field for a tab so that each tab's FieldEditor
- * has a unique identity for cross-parent drag & drop detection.
- */
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "label"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Label"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "icon"
+    }, /*#__PURE__*/ react.createElement(IconPicker, {
+        label: "Icon"
+    }))));
+const TabDialogContent = ({ fieldOptions })=>/*#__PURE__*/ react.createElement(Tabs, {
+        size: "md",
+        separator: true,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "tab",
+                trigger: "Tab",
+                value: "tab",
+                content: /*#__PURE__*/ react.createElement(TabSettingsFields, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "permissions",
+                trigger: "Permissions",
+                value: "permissions",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(PermissionsEditor, null))
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "rules",
+                trigger: "Rules",
+                value: "rules",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(RulesEditor, {
+                    fieldOptions: fieldOptions
+                }))
+            })
+        ]
+    });
 function createTabParent(tab) {
-  return {
-    id: tab.id,
-    fieldId: `tab:${tab.id}`,
-    type: "tab",
-    label: tab.label,
-    renderer: {
-      name: ""
-    }
-  };
+    return {
+        id: tab.id,
+        fieldId: `tab:${tab.id}`,
+        type: "tab",
+        label: tab.label,
+        renderer: {
+            name: ""
+        }
+    };
 }
-
-/**
- * Resolve fields for a tab by looking up field IDs in the parent's fields array.
- */
 function resolveTabFields(tab, parentFields) {
-  const fieldIds = new Set();
-  for (const row of tab.layout) {
-    for (const cell of row) {
-      if (typeof cell === "string") {
-        fieldIds.add(cell);
-      }
-    }
-  }
-  return parentFields.filter(f => fieldIds.has(f.id));
+    const fieldIds = new Set();
+    for (const row of tab.layout)for (const cell of row)if ("string" == typeof cell) fieldIds.add(cell);
+    return parentFields.filter((f)=>fieldIds.has(f.id));
 }
-const TabItem = ({
-  tab,
-  index,
-  totalTabs,
-  field,
-  parentFields,
-  onUpdate,
-  onInsertField,
-  onRemoveField,
-  onUpdateField
-}) => {
-  const {
-    fieldOptions
-  } = useModelEditor();
-  const dialogs = useDialogs();
-  const {
-    showConfirmation
-  } = useConfirmationDialog({
-    title: "Delete tab",
-    message: `Are you sure you want to delete the tab "${tab.label}"? Fields inside this tab will be removed.`,
-    acceptLabel: "Yes, delete tab"
-  });
-  const isFirst = index === 0;
-  const isLast = index === totalTabs - 1;
-  const tabFields = resolveTabFields(tab, parentFields);
-  const handleFieldsChange = useCallback(({
-    fields: newFields,
-    layout: newLayout
-  }) => {
-    const oldFieldIds = new Set(tabFields.map(f => f.id));
-    const newFieldIds = new Set(newFields.map(f => f.id));
-
-    // Find added fields (in new but not in old) -> hoist to parent
-    for (const f of newFields) {
-      if (!oldFieldIds.has(f.id)) {
-        onInsertField(f);
-      }
-    }
-
-    // Find removed fields (in old but not in new) -> un-hoist from parent
-    for (const id of oldFieldIds) {
-      if (!newFieldIds.has(id)) {
-        onRemoveField(id);
-      }
-    }
-
-    // Propagate field updates (e.g. permissions changes) to the parent
-    const oldFieldMap = new Map(tabFields.map(f => [f.id, f]));
-    for (const f of newFields) {
-      if (oldFieldMap.has(f.id) && oldFieldMap.get(f.id) !== f) {
-        onUpdateField(f);
-      }
-    }
-
-    // Update the tab's layout in the field
-    const updatedTabs = [...field.tabs];
-    updatedTabs[index] = {
-      ...tab,
-      layout: newLayout
-    };
-    onUpdate({
-      ...field,
-      tabs: updatedTabs
-    });
-  }, [tab, index, field, tabFields, onUpdate, onInsertField, onRemoveField, onUpdateField]);
-  const moveTabUp = useCallback(() => {
-    if (isFirst) {
-      return;
-    }
-    const tabs = [...field.tabs];
-    [tabs[index - 1], tabs[index]] = [tabs[index], tabs[index - 1]];
-    onUpdate({
-      ...field,
-      tabs
-    });
-  }, [field, index, isFirst, onUpdate]);
-  const moveTabDown = useCallback(() => {
-    if (isLast) {
-      return;
-    }
-    const tabs = [...field.tabs];
-    [tabs[index + 1], tabs[index]] = [tabs[index], tabs[index + 1]];
-    onUpdate({
-      ...field,
-      tabs
-    });
-  }, [field, index, isLast, onUpdate]);
-  const deleteTab = useCallback(() => {
-    showConfirmation(() => {
-      // Collect field IDs to un-hoist
-      for (const row of tab.layout) {
-        for (const cell of row) {
-          if (typeof cell === "string") {
-            onRemoveField(cell);
-          }
-        }
-      }
-      const tabs = field.tabs.filter((_, i) => i !== index);
-      onUpdate({
-        ...field,
-        tabs
-      });
+const TabItem = ({ tab, index, totalTabs, field, parentFields, onUpdate, onInsertField, onRemoveField, onUpdateField })=>{
+    const { fieldOptions } = useModelEditor();
+    const dialogs = useDialogs();
+    const { showConfirmation } = useConfirmationDialog({
+        title: "Delete tab",
+        message: `Are you sure you want to delete the tab "${tab.label}"? Fields inside this tab will be removed.`,
+        acceptLabel: "Yes, delete tab"
     });
-  }, [field, index, tab, onUpdate, onRemoveField, showConfirmation]);
-  const editTab = useCallback(() => {
-    dialogs.showDialog({
-      title: "Tab Settings",
-      description: "Configure the tab and access permissions",
-      acceptLabel: "Save",
-      cancelLabel: "Cancel",
-      formData: {
-        label: tab.label,
-        icon: tab.icon ?? "",
-        rules: tab.rules ?? []
-      },
-      content: /*#__PURE__*/React.createElement(TabDialogContent, {
-        fieldOptions: fieldOptions
-      }),
-      onAccept: data => {
-        const updatedTabs = [...field.tabs];
+    const isFirst = 0 === index;
+    const isLast = index === totalTabs - 1;
+    const tabFields = resolveTabFields(tab, parentFields);
+    const handleFieldsChange = useCallback(({ fields: newFields, layout: newLayout })=>{
+        const oldFieldIds = new Set(tabFields.map((f)=>f.id));
+        const newFieldIds = new Set(newFields.map((f)=>f.id));
+        for (const f of newFields)if (!oldFieldIds.has(f.id)) onInsertField(f);
+        for (const id of oldFieldIds)if (!newFieldIds.has(id)) onRemoveField(id);
+        const oldFieldMap = new Map(tabFields.map((f)=>[
+                f.id,
+                f
+            ]));
+        for (const f of newFields)if (oldFieldMap.has(f.id) && oldFieldMap.get(f.id) !== f) onUpdateField(f);
+        const updatedTabs = [
+            ...field.tabs
+        ];
         updatedTabs[index] = {
-          ...tab,
-          label: data.label ?? tab.label,
-          icon: data.icon || undefined,
-          rules: data.rules ?? []
+            ...tab,
+            layout: newLayout
         };
         onUpdate({
-          ...field,
-          tabs: updatedTabs
+            ...field,
+            tabs: updatedTabs
         });
-      }
-    });
-  }, [dialogs, field, index, tab, onUpdate]);
-  return /*#__PURE__*/React.createElement(Accordion.Item, {
-    title: tab.label
-    /* This ensures drop zones are not affected by `overflow-hidden` on the accordion content. */,
-    className: "[&>[data-state='open']]:!overflow-visible",
-    description: `${tabFields.length} field${tabFields.length !== 1 ? "s" : ""}`,
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-      icon: /*#__PURE__*/React.createElement(ArrowUpIcon, null),
-      onClick: moveTabUp,
-      disabled: isFirst
-    }), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-      icon: /*#__PURE__*/React.createElement(ArrowDownIcon, null),
-      onClick: moveTabDown,
-      disabled: isLast
-    }), /*#__PURE__*/React.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-      icon: /*#__PURE__*/React.createElement(EditIcon, null),
-      onClick: editTab
-    }), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-      icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-      onClick: deleteTab,
-      disabled: totalTabs <= 1
-    }))
-  }, /*#__PURE__*/React.createElement(FieldEditor, {
-    parent: createTabParent(tab),
-    fields: tabFields,
-    layout: tab.layout,
-    onChange: handleFieldsChange
-  }));
+    }, [
+        tab,
+        index,
+        field,
+        tabFields,
+        onUpdate,
+        onInsertField,
+        onRemoveField,
+        onUpdateField
+    ]);
+    const moveTabUp = useCallback(()=>{
+        if (isFirst) return;
+        const tabs = [
+            ...field.tabs
+        ];
+        [tabs[index - 1], tabs[index]] = [
+            tabs[index],
+            tabs[index - 1]
+        ];
+        onUpdate({
+            ...field,
+            tabs
+        });
+    }, [
+        field,
+        index,
+        isFirst,
+        onUpdate
+    ]);
+    const moveTabDown = useCallback(()=>{
+        if (isLast) return;
+        const tabs = [
+            ...field.tabs
+        ];
+        [tabs[index + 1], tabs[index]] = [
+            tabs[index],
+            tabs[index + 1]
+        ];
+        onUpdate({
+            ...field,
+            tabs
+        });
+    }, [
+        field,
+        index,
+        isLast,
+        onUpdate
+    ]);
+    const deleteTab = useCallback(()=>{
+        showConfirmation(()=>{
+            for (const row of tab.layout)for (const cell of row)if ("string" == typeof cell) onRemoveField(cell);
+            const tabs = field.tabs.filter((_, i)=>i !== index);
+            onUpdate({
+                ...field,
+                tabs
+            });
+        });
+    }, [
+        field,
+        index,
+        tab,
+        onUpdate,
+        onRemoveField,
+        showConfirmation
+    ]);
+    const editTab = useCallback(()=>{
+        dialogs.showDialog({
+            title: "Tab Settings",
+            description: "Configure the tab and access permissions",
+            acceptLabel: "Save",
+            cancelLabel: "Cancel",
+            formData: {
+                label: tab.label,
+                icon: tab.icon ?? "",
+                rules: tab.rules ?? []
+            },
+            content: /*#__PURE__*/ react.createElement(TabDialogContent, {
+                fieldOptions: fieldOptions
+            }),
+            onAccept: (data)=>{
+                const updatedTabs = [
+                    ...field.tabs
+                ];
+                updatedTabs[index] = {
+                    ...tab,
+                    label: data.label ?? tab.label,
+                    icon: data.icon || void 0,
+                    rules: data.rules ?? []
+                };
+                onUpdate({
+                    ...field,
+                    tabs: updatedTabs
+                });
+            }
+        });
+    }, [
+        dialogs,
+        field,
+        index,
+        tab,
+        onUpdate
+    ]);
+    return /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: tab.label,
+        className: "[&>[data-state='open']]:!overflow-visible",
+        description: `${tabFields.length} field${1 !== tabFields.length ? "s" : ""}`,
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(expand_less_svg_ReactComponent, null),
+            onClick: moveTabUp,
+            disabled: isFirst
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(expand_more_svg_ReactComponent, null),
+            onClick: moveTabDown,
+            disabled: isLast
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: editTab
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+            onClick: deleteTab,
+            disabled: totalTabs <= 1
+        }))
+    }, /*#__PURE__*/ react.createElement(FieldEditor, {
+        parent: createTabParent(tab),
+        fields: tabFields,
+        layout: tab.layout,
+        onChange: handleFieldsChange
+    }));
 };
-export const TabsLayoutEditor = ({
-  field,
-  onUpdate,
-  onDelete
-}) => {
-  const parentEditor = useModelFieldEditor();
-  const {
-    fieldOptions
-  } = useModelEditor();
-  const {
-    showDialog
-  } = useDialogs();
-  const newTabId = useRef(undefined);
-  const {
-    showConfirmation: showDeleteConfirmation
-  } = useConfirmationDialog({
-    title: "Delete tabs",
-    message: "Are you sure you want to delete this tabs element? All fields inside the tabs will be removed.",
-    acceptLabel: "Yes, delete"
-  });
-  useEffect(() => {
-    newTabId.current = undefined;
-  }, []);
-
-  // Resolve all fields that exist in any tab of this field from the parent's fields
-  const getAllParentFields = useCallback(() => {
-    // Collect all field IDs that exist in any tab of this field
-    const allFieldIds = new Set();
-    for (const tab of field.tabs) {
-      for (const row of tab.layout) {
-        for (const cell of row) {
-          if (typeof cell === "string") {
-            allFieldIds.add(cell);
-          }
-        }
-      }
-    }
-
-    // Resolve them from the parent editor
-    const resolved = [];
-    for (const id of allFieldIds) {
-      const f = parentEditor.getField({
-        id
-      });
-      if (f) {
-        resolved.push(f);
-      }
-    }
-    return resolved;
-  }, [field, parentEditor]);
-  const handleInsertField = useCallback(f => {
-    // Hoist the field to the parent context's fields (without placing in parent's layout)
-    const existingField = parentEditor.getField({
-      id: f.id
-    });
-    if (!existingField) {
-      parentEditor.addField(f);
-    }
-  }, [parentEditor]);
-  const handleRemoveField = useCallback(fieldId => {
-    // Un-hoist the field from the parent context's fields
-    parentEditor.removeField(fieldId);
-  }, [parentEditor]);
-  const handleUpdateField = useCallback(f => {
-    parentEditor.updateField(f);
-  }, [parentEditor]);
-  const addTab = useCallback(() => {
-    const id = generateAlphaNumericLowerCaseId(8);
-    newTabId.current = id;
-    const newTab = {
-      id,
-      label: `Tab ${field.tabs.length + 1}`,
-      layout: []
-    };
-    onUpdate({
-      ...field,
-      tabs: [...field.tabs, newTab]
+const TabsLayoutEditor = ({ field, onUpdate, onDelete })=>{
+    const parentEditor = useModelFieldEditor();
+    const { fieldOptions } = useModelEditor();
+    const { showDialog } = useDialogs();
+    const newTabId = useRef(void 0);
+    const { showConfirmation: showDeleteConfirmation } = useConfirmationDialog({
+        title: "Delete tabs",
+        message: "Are you sure you want to delete this tabs element? All fields inside the tabs will be removed.",
+        acceptLabel: "Yes, delete"
     });
-  }, [field, onUpdate]);
-  const handleDeleteTabs = useCallback(() => {
-    showDeleteConfirmation(() => {
-      onDelete();
-    });
-  }, [onDelete, showDeleteConfirmation]);
-  const editTabsSettings = useCallback(() => {
-    showDialog({
-      title: "Tabs Settings",
-      description: "Configure the tabs and access permissions",
-      acceptLabel: "Save",
-      cancelLabel: "Cancel",
-      formData: {
-        label: field.label ?? "",
-        description: field.description ?? "",
-        help: field.help ?? "",
-        rules: field.rules ?? []
-      },
-      content: /*#__PURE__*/React.createElement(TabsDialogContent, {
-        fieldOptions: fieldOptions
-      }),
-      onAccept: data => {
+    useEffect(()=>{
+        newTabId.current = void 0;
+    }, []);
+    const getAllParentFields = useCallback(()=>{
+        const allFieldIds = new Set();
+        for (const tab of field.tabs)for (const row of tab.layout)for (const cell of row)if ("string" == typeof cell) allFieldIds.add(cell);
+        const resolved = [];
+        for (const id of allFieldIds){
+            const f = parentEditor.getField({
+                id
+            });
+            if (f) resolved.push(f);
+        }
+        return resolved;
+    }, [
+        field,
+        parentEditor
+    ]);
+    const handleInsertField = useCallback((f)=>{
+        const existingField = parentEditor.getField({
+            id: f.id
+        });
+        if (!existingField) parentEditor.addField(f);
+    }, [
+        parentEditor
+    ]);
+    const handleRemoveField = useCallback((fieldId)=>{
+        parentEditor.removeField(fieldId);
+    }, [
+        parentEditor
+    ]);
+    const handleUpdateField = useCallback((f)=>{
+        parentEditor.updateField(f);
+    }, [
+        parentEditor
+    ]);
+    const addTab = useCallback(()=>{
+        const id = generateAlphaNumericLowerCaseId(8);
+        newTabId.current = id;
+        const newTab = {
+            id,
+            label: `Tab ${field.tabs.length + 1}`,
+            layout: []
+        };
         onUpdate({
-          ...field,
-          label: data.label ?? "",
-          description: data.description || null,
-          help: data.help || null,
-          rules: data.rules ?? []
+            ...field,
+            tabs: [
+                ...field.tabs,
+                newTab
+            ]
         });
-      }
-    });
-  }, [field, onUpdate]);
-  const resolvedParentFields = getAllParentFields();
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "flex justify-between"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row items-center"
-  }, /*#__PURE__*/React.createElement(Heading, {
-    level: 6,
-    className: "text-nowrap"
-  }, field.label || "No label")), /*#__PURE__*/React.createElement(Text, {
-    size: "sm",
-    className: "flex w-full text-neutral-strong"
-  }, "Tabs")), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-xs"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(EditIcon, null),
-    onClick: editTabsSettings,
-    variant: "ghost",
-    size: "sm"
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-    onClick: handleDeleteTabs,
-    variant: "ghost",
-    size: "sm"
-  }))), field.tabs.length > 0 && /*#__PURE__*/React.createElement(Accordion, null, field.tabs.map((tab, index) => /*#__PURE__*/React.createElement(TabItem, {
-    key: tab.id,
-    tab: tab,
-    index: index,
-    totalTabs: field.tabs.length,
-    field: field,
-    parentFields: resolvedParentFields,
-    onUpdate: onUpdate,
-    onInsertField: handleInsertField,
-    onRemoveField: handleRemoveField,
-    onUpdateField: handleUpdateField
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "mt-sm flex justify-center"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: addTab,
-    text: "Add Tab",
-    icon: /*#__PURE__*/React.createElement(AddIcon, null),
-    size: "sm"
-  })));
+    }, [
+        field,
+        onUpdate
+    ]);
+    const handleDeleteTabs = useCallback(()=>{
+        showDeleteConfirmation(()=>{
+            onDelete();
+        });
+    }, [
+        onDelete,
+        showDeleteConfirmation
+    ]);
+    const editTabsSettings = useCallback(()=>{
+        showDialog({
+            title: "Tabs Settings",
+            description: "Configure the tabs and access permissions",
+            acceptLabel: "Save",
+            cancelLabel: "Cancel",
+            formData: {
+                label: field.label ?? "",
+                description: field.description ?? "",
+                help: field.help ?? "",
+                rules: field.rules ?? []
+            },
+            content: /*#__PURE__*/ react.createElement(TabsDialogContent, {
+                fieldOptions: fieldOptions
+            }),
+            onAccept: (data)=>{
+                onUpdate({
+                    ...field,
+                    label: data.label ?? "",
+                    description: data.description || null,
+                    help: data.help || null,
+                    rules: data.rules ?? []
+                });
+            }
+        });
+    }, [
+        field,
+        onUpdate
+    ]);
+    const resolvedParentFields = getAllParentFields();
+    return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-between"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row items-center"
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        level: 6,
+        className: "text-nowrap"
+    }, field.label || "No label")), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "flex w-full text-neutral-strong"
+    }, "Tabs")), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-xs"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: editTabsSettings,
+        variant: "ghost",
+        size: "sm"
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+        onClick: handleDeleteTabs,
+        variant: "ghost",
+        size: "sm"
+    }))), field.tabs.length > 0 && /*#__PURE__*/ react.createElement(Accordion, null, field.tabs.map((tab, index)=>/*#__PURE__*/ react.createElement(TabItem, {
+            key: tab.id,
+            tab: tab,
+            index: index,
+            totalTabs: field.tabs.length,
+            field: field,
+            parentFields: resolvedParentFields,
+            onUpdate: onUpdate,
+            onInsertField: handleInsertField,
+            onRemoveField: handleRemoveField,
+            onUpdateField: handleUpdateField
+        }))), /*#__PURE__*/ react.createElement("div", {
+        className: "mt-sm flex justify-center"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        onClick: addTab,
+        text: "Add Tab",
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
+        size: "sm"
+    })));
 };
+export { TabsLayoutEditor };
 
 //# sourceMappingURL=TabsLayoutEditor.js.map