@strapi/content-manager 0.0.0-next.929f36e7cd2888f97e66b5159baa15234a283fca → 0.0.0-next.92e60e369ae0e382a5d486de347f6d286ab22987

package/dist/admin/components/ConfigurationForm/Fields.mjs

@@ -1,19 +1,60 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useForm, useField } from '@strapi/admin/strapi-admin';
-import { IconButton, Typography, Flex, Box, Grid, Menu, useComposedRefs, Modal, Link } from '@strapi/design-system';
+import { DndContext, DragOverlay, useDroppable } from '@dnd-kit/core';
+import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useForm, useIsDesktop, useField } from '@strapi/admin/strapi-admin';
+import { IconButton, Typography, Flex, Box, Grid, Menu, Modal, Link } from '@strapi/design-system';
 import { Plus, Drag, Pencil, Cross, Cog } from '@strapi/icons';
-import { generateNKeysBetween as generateNKeysBetween$1 } from 'fractional-indexing';
-import { getEmptyImage } from 'react-dnd-html5-backend';
+import { generateNKeysBetween } from 'fractional-indexing';
+import { produce } from 'immer';
 import { useIntl } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 import { styled } from 'styled-components';
-import { ItemTypes } from '../../constants/dragAndDrop.mjs';
-import { useDragAndDrop } from '../../hooks/useDragAndDrop.mjs';
 import { getTranslation } from '../../utils/translations.mjs';
 import { ComponentIcon } from '../ComponentIcon.mjs';
 import { EditFieldForm } from './EditFieldForm.mjs';
 
+const GRID_COLUMNS = 12;
+/* -------------------------------------------------------------------------------------------------
+ * Drag and Drop
+ * -----------------------------------------------------------------------------------------------*/ const DroppableContainer = ({ id, children })=>{
+    const droppable = useDroppable({
+        id
+    });
+    return children(droppable);
+};
+const SortableItem = ({ id, children })=>{
+    const { attributes, setNodeRef, transform, transition } = useSortable({
+        id
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        height: '100%'
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ref: setNodeRef,
+        style: style,
+        ...attributes,
+        children: children
+    });
+};
+/**
+ * Compute uids and formName for drag and drop items for the incoming layout
+ */ const createDragAndDropContainersFromLayout = (layout)=>{
+    return layout.map((row, containerIndex)=>({
+            ...row,
+            // Use unique ids for drag and drop items
+            dndId: `container-${containerIndex}`,
+            children: row.children.map((child, childIndex)=>({
+                    ...child,
+                    dndId: `container-${containerIndex}-child-${childIndex}`,
+                    // The formName must be recomputed each time an item is moved
+                    formName: `layout.${containerIndex}.children.${childIndex}`
+                }))
+        }));
+};
 const Fields = ({ attributes, fieldSizes, components, metadatas = {} })=>{
     const { formatMessage } = useIntl();
     const layout = useForm('Fields', (state)=>state.values.layout ?? []);
@@ -29,7 +70,7 @@ const Fields = ({ attributes, fieldSizes, components, metadatas = {} })=>{
         const [name, { visible, ...field }] = current;
         if (!existingFields.includes(name) && visible === true) {
             const type = attributes[name]?.type;
-            const size = type ? fieldSizes[type] : 12;
+            const size = type ? fieldSizes[type] : GRID_COLUMNS;
             acc.push({
                 ...field,
                 label: field.label ?? name,
@@ -39,61 +80,65 @@ const Fields = ({ attributes, fieldSizes, components, metadatas = {} })=>{
         }
         return acc;
     }, []);
-    const handleMoveField = ([newRowIndex, newFieldIndex], [currentRowIndex, currentFieldIndex])=>{
-        /**
-     * Because this view has the constraint that the sum of field sizes cannot be greater
-     * than 12, we don't use the form's method to move field rows, instead, we calculate
-     * the new layout and set the entire form.
-     */ const newLayout = structuredClone(layout);
-        /**
-     * Remove field from the current layout space using splice so we have the item
-     */ const [field] = newLayout[currentRowIndex].children.splice(currentFieldIndex, 1);
-        if (!field || field.name === TEMP_FIELD_NAME) {
-            return;
-        }
-        const newRow = newLayout[newRowIndex].children;
-        const [newFieldKey] = generateNKeysBetween(newRow, 1, currentFieldIndex, newFieldIndex);
-        /**
-     * Next we inject the field into it's new row at it's specified index, we then remove the spaces
-     * if they exist and recalculate into potentially two arrays ONLY if the sizing is now over 12,
-     * the row and the rest of the row that couldn't fit.
-     *
-     * for example, if i have a row of `[{size: 4}, {size: 6}]` and i add `{size: 8}` a index 0,
-     * the new array will look like `[{size: 8}, {size: 4}, {size: 6}]` which breaks the limit of 12,
-     * so instead we make two arrays for the new rows `[[{size: 8}, {size: 4}], [{size: 6}]]` which we
-     * then inject at the original row point with spacers included.
-     */ newRow.splice(newFieldIndex, 0, {
-            ...field,
-            __temp_key__: newFieldKey
-        });
-        if (newLayout[newRowIndex].children.reduce((acc, curr)=>acc + curr.size, 0) > 12) {
-            const recalculatedRows = chunkArray(newLayout[newRowIndex].children.filter((field)=>field.name !== TEMP_FIELD_NAME));
-            const rowKeys = generateNKeysBetween(newLayout, recalculatedRows.length, currentRowIndex, newRowIndex);
-            newLayout.splice(newRowIndex, 1, ...recalculatedRows.map((row, index)=>({
-                    __temp_key__: rowKeys[index],
-                    children: row
-                })));
+    const handleRemoveField = (rowIndex, fieldIndex)=>()=>{
+            if (layout[rowIndex].children.length === 1) {
+                removeFieldRow(`layout`, rowIndex);
+            } else {
+                onChange(`layout.${rowIndex}.children`, [
+                    ...layout[rowIndex].children.slice(0, fieldIndex),
+                    ...layout[rowIndex].children.slice(fieldIndex + 1)
+                ]);
+            }
+        };
+    const handleAddField = (field)=>()=>{
+            addFieldRow('layout', {
+                children: [
+                    field
+                ]
+            });
+        };
+    const [containers, setContainers] = React.useState(()=>createDragAndDropContainersFromLayout(layout));
+    const [activeDragItem, setActiveDragItem] = React.useState(null);
+    /**
+   * Finds either the parent container id or the child id within a container
+   */ function findContainer(id, containersAsDictionary) {
+        // If the id is a key, then it is the parent container
+        if (id in containersAsDictionary) {
+            return id;
         }
-        /**
-     * Now we remove our spacers from the rows so we can understand what dead rows exist:
-     * - if there's only spacers left
-     * - there's nothing in the row, e.g. a size 12 field left it.
-     * These rows are then filtered out.
-     * After that, we recalculate the spacers for the rows that need them.
-     */ const newLayoutWithSpacers = newLayout.map((row)=>({
+        // Otherwise, it is a child inside a container
+        return Object.keys(containersAsDictionary).find((key)=>containersAsDictionary[key].children.find((child)=>child.dndId === id));
+    }
+    /**
+   * Gets an item from a container based on its id
+   */ const getItemFromContainer = (id, container)=>{
+        return container.children.find((item)=>id === item.dndId);
+    };
+    /**
+   * Gets the containers as dictionary for quick lookup
+   */ const getContainersAsDictionary = ()=>{
+        return Object.fromEntries(containers.map((container)=>[
+                container.dndId,
+                container
+            ]));
+    };
+    /**
+   * Recomputes the empty space in the grid
+   */ const createContainersWithSpacers = (layout)=>{
+        return layout.map((row)=>({
                 ...row,
                 children: row.children.filter((field)=>field.name !== TEMP_FIELD_NAME)
             })).filter((row)=>row.children.length > 0).map((row)=>{
             const totalSpaceTaken = row.children.reduce((acc, curr)=>acc + curr.size, 0);
-            if (totalSpaceTaken < 12) {
-                const [spacerKey] = generateNKeysBetween$1(row.children.at(-1)?.__temp_key__, undefined, 1);
+            if (totalSpaceTaken < GRID_COLUMNS) {
+                const [spacerKey] = generateNKeysBetween(row.children.at(-1)?.__temp_key__, undefined, 1);
                 return {
                     ...row,
                     children: [
                         ...row.children,
                         {
                             name: TEMP_FIELD_NAME,
-                            size: 12 - totalSpaceTaken,
+                            size: GRID_COLUMNS - totalSpaceTaken,
                             __temp_key__: spacerKey
                         }
                     ]
@@ -101,182 +146,234 @@ const Fields = ({ attributes, fieldSizes, components, metadatas = {} })=>{
             }
             return row;
         });
-        onChange('layout', newLayoutWithSpacers);
     };
-    const handleRemoveField = (rowIndex, fieldIndex)=>()=>{
-            if (layout[rowIndex].children.length === 1) {
-                removeFieldRow(`layout`, rowIndex);
-            } else {
-                onChange(`layout.${rowIndex}.children`, [
-                    ...layout[rowIndex].children.slice(0, fieldIndex),
-                    ...layout[rowIndex].children.slice(fieldIndex + 1)
-                ]);
+    /**
+   * When layout changes (e.g. when a field size is changed or the containers are reordered)
+   * we need to update the ids and form names
+   */ React.useEffect(()=>{
+        const containers = createDragAndDropContainersFromLayout(layout);
+        setContainers(containers);
+    }, [
+        layout,
+        setContainers
+    ]);
+    return /*#__PURE__*/ jsx(DndContext, {
+        onDragStart: (event)=>{
+            const containersAsDictionary = getContainersAsDictionary();
+            const activeContainer = findContainer(event.active.id, containersAsDictionary);
+            if (!activeContainer) return;
+            const activeItem = getItemFromContainer(event.active.id, containersAsDictionary[activeContainer]);
+            if (activeItem) {
+                setActiveDragItem(activeItem);
             }
-        };
-    const handleAddField = (field)=>()=>{
-            addFieldRow('layout', {
-                children: [
-                    field
-                ]
+        },
+        onDragOver: ({ active, over })=>{
+            const containersAsDictionary = getContainersAsDictionary();
+            const activeContainer = findContainer(active.id, containersAsDictionary);
+            const overContainer = findContainer(over?.id ?? '', containersAsDictionary);
+            const activeContainerIndex = containers.findIndex((container)=>container.dndId === activeContainer);
+            const overContainerIndex = containers.findIndex((container)=>container.dndId === overContainer);
+            if (!activeContainer || !overContainer) {
+                return;
+            }
+            const draggedItem = getItemFromContainer(active.id, containersAsDictionary[activeContainer]);
+            const overItem = getItemFromContainer(over?.id ?? '', containersAsDictionary[overContainer]);
+            const overIndex = containersAsDictionary[overContainer].children.findIndex((item)=>item.dndId === over?.id);
+            if (!draggedItem) return;
+            // Handle a full width field being dragged
+            if (draggedItem?.size === GRID_COLUMNS) {
+                // Swap the items in the containers
+                const update = produce(containers, (draft)=>{
+                    draft[activeContainerIndex].children = containers[overContainerIndex].children;
+                    draft[overContainerIndex].children = containers[activeContainerIndex].children;
+                });
+                setContainers(update);
+                return;
+            }
+            /**
+         * Handle an item being dragged from one container to another,
+         * the item is removed from its current container, and then added to its new container
+         * An item can only be added in a container if there is enough space.
+         */ const update = produce(containers, (draft)=>{
+                draft[activeContainerIndex].children = draft[activeContainerIndex].children.filter((item)=>item.dndId !== active.id);
+                const spaceTaken = draft[overContainerIndex].children.reduce((acc, curr)=>{
+                    if (curr.name === TEMP_FIELD_NAME) {
+                        return acc;
+                    }
+                    return acc + curr.size;
+                }, 0);
+                // Check the sizes of the children, if there is no room, exit
+                if (spaceTaken + draggedItem.size > GRID_COLUMNS) {
+                    // Leave the item where it started
+                    draft[activeContainerIndex].children = containers[activeContainerIndex].children;
+                    return;
+                }
+                if (overItem?.name === TEMP_FIELD_NAME) {
+                    // We are over an invisible spacer, replace it with the dragged item
+                    draft[overContainerIndex].children.splice(overIndex, 1, draggedItem);
+                    return;
+                }
+                // There is room for the item in the container, drop it
+                draft[overContainerIndex].children.splice(overIndex, 0, draggedItem);
             });
-        };
-    return /*#__PURE__*/ jsxs(Flex, {
-        paddingTop: 6,
-        direction: "column",
-        alignItems: "stretch",
-        gap: 4,
-        children: [
-            /*#__PURE__*/ jsxs(Flex, {
-                alignItems: "flex-start",
-                direction: "column",
-                justifyContent: "space-between",
-                children: [
-                    /*#__PURE__*/ jsx(Typography, {
-                        fontWeight: "bold",
-                        children: formatMessage({
-                            id: getTranslation('containers.list.displayedFields'),
-                            defaultMessage: 'Displayed fields'
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(Typography, {
-                        variant: "pi",
-                        textColor: "neutral600",
-                        children: formatMessage({
-                            id: 'containers.SettingPage.editSettings.description',
-                            defaultMessage: 'Drag & drop the fields to build the layout'
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Box, {
-                padding: 4,
-                hasRadius: true,
-                borderStyle: "dashed",
-                borderWidth: "1px",
-                borderColor: "neutral300",
-                children: /*#__PURE__*/ jsxs(Flex, {
+            setContainers(update);
+        },
+        onDragEnd: (event)=>{
+            const { active, over } = event;
+            const { id } = active;
+            const overId = over?.id;
+            const containersAsDictionary = getContainersAsDictionary();
+            const activeContainer = findContainer(id, containersAsDictionary);
+            const overContainer = findContainer(overId, containersAsDictionary);
+            if (!activeContainer || !overContainer) {
+                return;
+            }
+            const activeIndex = containersAsDictionary[activeContainer].children.findIndex((children)=>children.dndId === id);
+            const overIndex = containersAsDictionary[overContainer].children.findIndex((children)=>children.dndId === overId);
+            const movedContainerItems = produce(containersAsDictionary, (draft)=>{
+                if (activeIndex !== overIndex && activeContainer === overContainer) {
+                    // Move items around inside their own container
+                    draft[activeContainer].children = arrayMove(draft[activeContainer].children, activeIndex, overIndex);
+                }
+            });
+            // Remove properties the server does not expect before updating the form
+            const updatedContainers = Object.values(movedContainerItems);
+            const updatedContainersWithSpacers = createContainersWithSpacers(updatedContainers);
+            const updatedLayout = updatedContainersWithSpacers.map(({ dndId: _dndId, children, ...container })=>({
+                    ...container,
+                    children: children.map(({ dndId: _dndId, formName: _formName, ...child })=>child)
+                }));
+            // Update the layout
+            onChange('layout', updatedLayout);
+            setActiveDragItem(null);
+        },
+        children: /*#__PURE__*/ jsxs(Flex, {
+            paddingTop: 6,
+            direction: "column",
+            alignItems: "stretch",
+            gap: 4,
+            children: [
+                /*#__PURE__*/ jsxs(Flex, {
+                    alignItems: "flex-start",
                     direction: "column",
-                    alignItems: "stretch",
-                    gap: 2,
+                    justifyContent: "space-between",
                     children: [
-                        layout.map((row, rowIndex)=>/*#__PURE__*/ jsx(Grid.Root, {
-                                gap: 2,
-                                children: row.children.map(({ size, ...field }, fieldIndex)=>/*#__PURE__*/ jsx(Grid.Item, {
-                                        col: size,
-                                        direction: "column",
-                                        alignItems: "stretch",
-                                        children: /*#__PURE__*/ jsx(Field, {
-                                            attribute: attributes[field.name],
-                                            components: components,
-                                            index: [
-                                                rowIndex,
-                                                fieldIndex
-                                            ],
-                                            name: `layout.${rowIndex}.children.${fieldIndex}`,
-                                            onMoveField: handleMoveField,
-                                            onRemoveField: handleRemoveField(rowIndex, fieldIndex)
-                                        })
-                                    }, field.name))
-                            }, row.__temp_key__)),
-                        /*#__PURE__*/ jsxs(Menu.Root, {
-                            children: [
-                                /*#__PURE__*/ jsx(Menu.Trigger, {
-                                    startIcon: /*#__PURE__*/ jsx(Plus, {}),
-                                    endIcon: null,
-                                    disabled: remainingFields.length === 0,
-                                    fullWidth: true,
-                                    variant: "secondary",
-                                    children: formatMessage({
-                                        id: getTranslation('containers.SettingPage.add.field'),
-                                        defaultMessage: 'Insert another field'
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Menu.Content, {
-                                    children: remainingFields.map((field)=>/*#__PURE__*/ jsx(Menu.Item, {
-                                            onSelect: handleAddField(field),
-                                            children: field.label
-                                        }, field.name))
-                                })
-                            ]
+                        /*#__PURE__*/ jsx(Typography, {
+                            fontWeight: "bold",
+                            children: formatMessage({
+                                id: getTranslation('containers.list.displayedFields'),
+                                defaultMessage: 'Displayed fields'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Typography, {
+                            variant: "pi",
+                            textColor: "neutral600",
+                            children: formatMessage({
+                                id: 'containers.SettingPage.editSettings.description',
+                                defaultMessage: 'Drag & drop the fields to build the layout'
+                            })
                         })
                     ]
+                }),
+                /*#__PURE__*/ jsx(Box, {
+                    padding: 4,
+                    hasRadius: true,
+                    borderStyle: "dashed",
+                    borderWidth: "1px",
+                    borderColor: "neutral300",
+                    children: /*#__PURE__*/ jsxs(Flex, {
+                        direction: "column",
+                        alignItems: "stretch",
+                        gap: 2,
+                        children: [
+                            containers.map((container, containerIndex)=>/*#__PURE__*/ jsx(SortableContext, {
+                                    id: container.dndId,
+                                    items: container.children.map((child)=>({
+                                            id: child.dndId
+                                        })),
+                                    children: /*#__PURE__*/ jsx(DroppableContainer, {
+                                        id: container.dndId,
+                                        children: ({ setNodeRef })=>/*#__PURE__*/ jsx(Grid.Root, {
+                                                ref: setNodeRef,
+                                                gap: 2,
+                                                children: container.children.map((child, childIndex)=>/*#__PURE__*/ jsx(Grid.Item, {
+                                                        col: child.size,
+                                                        direction: "column",
+                                                        alignItems: "stretch",
+                                                        children: /*#__PURE__*/ jsx(SortableItem, {
+                                                            id: child.dndId,
+                                                            children: /*#__PURE__*/ jsx(Field, {
+                                                                attribute: attributes[child.name],
+                                                                components: components,
+                                                                name: child.formName,
+                                                                onRemoveField: handleRemoveField(containerIndex, childIndex),
+                                                                dndId: child.dndId
+                                                            })
+                                                        })
+                                                    }, child.dndId))
+                                            }, container.dndId)
+                                    })
+                                }, container.dndId)),
+                            /*#__PURE__*/ jsx(DragOverlay, {
+                                children: activeDragItem ? /*#__PURE__*/ jsx(Field, {
+                                    attribute: attributes[activeDragItem.name],
+                                    components: components,
+                                    name: activeDragItem.formName,
+                                    dndId: activeDragItem.dndId
+                                }) : null
+                            }),
+                            /*#__PURE__*/ jsxs(Menu.Root, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Menu.Trigger, {
+                                        startIcon: /*#__PURE__*/ jsx(Plus, {}),
+                                        endIcon: null,
+                                        disabled: remainingFields.length === 0,
+                                        fullWidth: true,
+                                        variant: "secondary",
+                                        children: formatMessage({
+                                            id: getTranslation('containers.SettingPage.add.field'),
+                                            defaultMessage: 'Insert another field'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Menu.Content, {
+                                        children: remainingFields.map((field)=>/*#__PURE__*/ jsx(Menu.Item, {
+                                                onSelect: handleAddField(field),
+                                                children: field.label
+                                            }, field.name))
+                                    })
+                                ]
+                            })
+                        ]
+                    })
                 })
-            })
-        ]
+            ]
+        })
     });
 };
-/**
- * @internal
- * @description Small abstraction to solve within an array of fields where you can
- * add a field to the beginning or start, move back and forth what it's index range
- * should be when calculating it's new temp key
- */ const generateNKeysBetween = (field, count, currInd, newInd)=>{
-    const startKey = currInd > newInd ? field[newInd - 1]?.__temp_key__ : field[newInd]?.__temp_key__;
-    const endKey = currInd > newInd ? field[newInd]?.__temp_key__ : field[newInd + 1]?.__temp_key__;
-    return generateNKeysBetween$1(startKey, endKey, count);
-};
-/**
- * @internal
- * @description chunks a row of layouts by the max size we allow, 12. It does not add the
- * spacers again, that should be added separately.
- */ const chunkArray = (array)=>{
-    const result = [];
-    let temp = [];
-    array.reduce((acc, field)=>{
-        if (acc + field.size > 12) {
-            result.push(temp);
-            temp = [
-                field
-            ];
-            return field.size;
-        } else {
-            temp.push(field);
-            return acc + field.size;
-        }
-    }, 0);
-    if (temp.length > 0) {
-        result.push(temp);
-    }
-    return result;
-};
 const TEMP_FIELD_NAME = '_TEMP_';
 /**
  * Displays a field in the layout with drag options, also
  * opens a modal  to edit the details of said field.
- */ const Field = ({ attribute, components, name, index, onMoveField, onRemoveField })=>{
+ */ const Field = ({ attribute, components, name, onRemoveField, dndId })=>{
+    const isDesktop = useIsDesktop();
     const [isModalOpen, setIsModalOpen] = React.useState(false);
     const { formatMessage } = useIntl();
     const { value } = useField(name);
-    const [{ isDragging }, objectRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(true, {
-        dropSensitivity: 'immediate',
-        type: ItemTypes.EDIT_FIELD,
-        item: {
-            index,
-            label: value?.label,
-            name
-        },
-        index,
-        onMoveItem: onMoveField
+    const { listeners, setActivatorNodeRef } = useSortable({
+        id: dndId
     });
-    React.useEffect(()=>{
-        dragPreviewRef(getEmptyImage(), {
-            captureDraggingState: false
-        });
-    }, [
-        dragPreviewRef
-    ]);
-    const composedRefs = useComposedRefs(dragRef, objectRef);
     const handleRemoveField = (e)=>{
         e.preventDefault();
         e.stopPropagation();
-        onRemoveField(e);
+        if (onRemoveField) {
+            onRemoveField?.(e);
+        }
     };
     const onEditFieldMeta = (e)=>{
         e.preventDefault();
         e.stopPropagation();
         setIsModalOpen(true);
     };
-    const tempRefs = useComposedRefs(dropRef, objectRef);
     if (!value) {
         return null;
     }
@@ -286,10 +383,12 @@ const TEMP_FIELD_NAME = '_TEMP_';
             height: "100%",
             style: {
                 opacity: 0
-            },
-            ref: tempRefs
+            }
         });
     }
+    if (!attribute) {
+        return null;
+    }
     return /*#__PURE__*/ jsxs(Modal.Root, {
         open: isModalOpen,
         onOpenChange: setIsModalOpen,
@@ -298,17 +397,15 @@ const TEMP_FIELD_NAME = '_TEMP_';
                 borderColor: "neutral150",
                 background: "neutral100",
                 hasRadius: true,
-                style: {
-                    opacity: isDragging ? 0.5 : 1
-                },
-                ref: dropRef,
                 gap: 3,
                 cursor: "pointer",
                 onClick: ()=>{
                     setIsModalOpen(true);
                 },
+                position: "relative",
                 children: [
-                    /*#__PURE__*/ jsx(DragButton, {
+                    isDesktop && /*#__PURE__*/ jsx(DragButton, {
+                        ref: setActivatorNodeRef,
                         tag: "span",
                         withTooltip: false,
                         label: formatMessage({
@@ -317,8 +414,7 @@ const TEMP_FIELD_NAME = '_TEMP_';
                         }, {
                             item: value.label
                         }),
-                        onClick: (e)=>e.stopPropagation(),
-                        ref: composedRefs,
+                        ...listeners,
                         children: /*#__PURE__*/ jsx(Drag, {})
                     }),
                     /*#__PURE__*/ jsxs(Flex, {
@@ -338,6 +434,7 @@ const TEMP_FIELD_NAME = '_TEMP_';
                                         children: value.label
                                     }),
                                     /*#__PURE__*/ jsxs(Flex, {
+                                        position: "relative",
                                         children: [
                                             /*#__PURE__*/ jsx(IconButton, {
                                                 type: "button",
@@ -425,6 +522,7 @@ const TEMP_FIELD_NAME = '_TEMP_';
                                 alignItems: "flex-start",
                                 gap: 2,
                                 width: "100%",
+                                wrap: "wrap",
                                 children: attribute?.components.map((uid)=>/*#__PURE__*/ jsxs(ComponentLink, {
                                         // used to stop the edit form from appearing when we click here.
                                         onClick: (e)=>e.stopPropagation(),
@@ -508,5 +606,5 @@ const ComponentLink = styled(NavLink)`
   }
 `;
 
-export { Fields, TEMP_FIELD_NAME };
+export { Fields, SortableItem, TEMP_FIELD_NAME };
 //# sourceMappingURL=Fields.mjs.map