[Data Object Editor] make child grid and variant grid detachable

assets/js/src/core/modules/data-object/editor/types/object/index.tsx

@@ -31,6 +31,7 @@ moduleSystem.registerModule({
 
     childrenTab.hidden = elementApi => elementApi?.hasChildren === false
     childrenTab.label = 'object.object-editor-tabs.children-listing'
+    childrenTab.isDetachable = true
 
     objectEditorTabManager.register(TAB_EDIT)
     objectEditorTabManager.register(TAB_PREVIEW)

assets/js/src/core/modules/data-object/editor/types/variant/tab-manager/tabs/variants/variants-tab-container.tsx

@@ -30,5 +30,6 @@ export const TAB_VARIANTS: IEditorTab = {
   label: 'data-object.object-editor-tabs.variants',
   icon: <Icon value="data-object-variant" />,
   children: <ComponentRenderer component={ componentConfig.dataObject.editor.tab.variants.name } />,
+  isDetachable: true,
   hidden: (elementApi) => !('allowVariants' in elementApi && elementApi?.allowVariants === true)
 }

assets/js/src/core/modules/element/editor/detached-tab/detached-tab.tsx

@@ -29,7 +29,7 @@ export const DetachedTab = ({ tabKey }: IDetachedTabProps): React.JSX.Element =>
   return (
     <DetachedTabContent
       context={ context }
-      key={ context.type } // the key fixes the hook chain for different element types - TLDR; don't delete it!
+      key={ `${context.type}-${context.config.id}` } // the key fixes the hook chain for different element types - TLDR; don't delete it!
       tabKey={ tabKey }
     />
   )