@strapi/content-manager 0.0.0-experimental.e0df4d50334a17a1beb3d203bff414fbbff62f7b → 0.0.0-experimental.e100737b0ed96d0d80a5c6f4925c7374e63a342a

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

@@ -0,0 +1,512 @@
+import { jsxs, jsx } 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 { Plus, Drag, Pencil, Cross, Cog } from '@strapi/icons';
+import { generateNKeysBetween as generateNKeysBetween$1 } from 'fractional-indexing';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+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 Fields = ({ attributes, fieldSizes, components, metadatas = {} })=>{
+    const { formatMessage } = useIntl();
+    const layout = useForm('Fields', (state)=>state.values.layout ?? []);
+    const onChange = useForm('Fields', (state)=>state.onChange);
+    const addFieldRow = useForm('Fields', (state)=>state.addFieldRow);
+    const removeFieldRow = useForm('Fields', (state)=>state.removeFieldRow);
+    const existingFields = layout.map((row)=>row.children.map((field)=>field.name)).flat();
+    /**
+   * Get the fields that are not already in the layout
+   * But also check that they are visible before we give users
+   * the option to display them. e.g. `id` is not visible.
+   */ const remainingFields = Object.entries(metadatas).reduce((acc, current)=>{
+        const [name, { visible, ...field }] = current;
+        if (!existingFields.includes(name) && visible === true) {
+            const type = attributes[name]?.type;
+            const size = type ? fieldSizes[type] : 12;
+            acc.push({
+                ...field,
+                label: field.label ?? name,
+                name,
+                size
+            });
+        }
+        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
+                })));
+        }
+        /**
+     * 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)=>({
+                ...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);
+                return {
+                    ...row,
+                    children: [
+                        ...row.children,
+                        {
+                            name: TEMP_FIELD_NAME,
+                            size: 12 - totalSpaceTaken,
+                            __temp_key__: spacerKey
+                        }
+                    ]
+                };
+            }
+            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)
+                ]);
+            }
+        };
+    const handleAddField = (field)=>()=>{
+            addFieldRow('layout', {
+                children: [
+                    field
+                ]
+            });
+        };
+    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, {
+                    direction: "column",
+                    alignItems: "stretch",
+                    gap: 2,
+                    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))
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+/**
+ * @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 [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
+    });
+    React.useEffect(()=>{
+        dragPreviewRef(getEmptyImage(), {
+            captureDraggingState: false
+        });
+    }, [
+        dragPreviewRef
+    ]);
+    const composedRefs = useComposedRefs(dragRef, objectRef);
+    const handleRemoveField = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        onRemoveField(e);
+    };
+    const onEditFieldMeta = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        setIsModalOpen(true);
+    };
+    const tempRefs = useComposedRefs(dropRef, objectRef);
+    if (!value) {
+        return null;
+    }
+    if (value.name === TEMP_FIELD_NAME) {
+        return /*#__PURE__*/ jsx(Flex, {
+            tag: "span",
+            height: "100%",
+            style: {
+                opacity: 0
+            },
+            ref: tempRefs
+        });
+    }
+    return /*#__PURE__*/ jsxs(Modal.Root, {
+        open: isModalOpen,
+        onOpenChange: setIsModalOpen,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                borderColor: "neutral150",
+                background: "neutral100",
+                hasRadius: true,
+                style: {
+                    opacity: isDragging ? 0.5 : 1
+                },
+                ref: dropRef,
+                gap: 3,
+                cursor: "pointer",
+                onClick: ()=>{
+                    setIsModalOpen(true);
+                },
+                children: [
+                    /*#__PURE__*/ jsx(DragButton, {
+                        tag: "span",
+                        withTooltip: false,
+                        label: formatMessage({
+                            id: getTranslation('components.DraggableCard.move.field'),
+                            defaultMessage: 'Move {item}'
+                        }, {
+                            item: value.label
+                        }),
+                        onClick: (e)=>e.stopPropagation(),
+                        ref: composedRefs,
+                        children: /*#__PURE__*/ jsx(Drag, {})
+                    }),
+                    /*#__PURE__*/ jsxs(Flex, {
+                        direction: "column",
+                        alignItems: "flex-start",
+                        grow: 1,
+                        overflow: "hidden",
+                        children: [
+                            /*#__PURE__*/ jsxs(Flex, {
+                                gap: 3,
+                                justifyContent: "space-between",
+                                width: "100%",
+                                children: [
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        ellipsis: true,
+                                        fontWeight: "bold",
+                                        children: value.label
+                                    }),
+                                    /*#__PURE__*/ jsxs(Flex, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(IconButton, {
+                                                type: "button",
+                                                variant: "ghost",
+                                                background: "transparent",
+                                                onClick: onEditFieldMeta,
+                                                withTooltip: false,
+                                                label: formatMessage({
+                                                    id: getTranslation('components.DraggableCard.edit.field'),
+                                                    defaultMessage: 'Edit {item}'
+                                                }, {
+                                                    item: value.label
+                                                }),
+                                                children: /*#__PURE__*/ jsx(Pencil, {})
+                                            }),
+                                            /*#__PURE__*/ jsx(IconButton, {
+                                                type: "button",
+                                                variant: "ghost",
+                                                onClick: handleRemoveField,
+                                                background: "transparent",
+                                                withTooltip: false,
+                                                label: formatMessage({
+                                                    id: getTranslation('components.DraggableCard.delete.field'),
+                                                    defaultMessage: 'Delete {item}'
+                                                }, {
+                                                    item: value.label
+                                                }),
+                                                children: /*#__PURE__*/ jsx(Cross, {})
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            attribute?.type === 'component' ? /*#__PURE__*/ jsxs(Flex, {
+                                paddingTop: 3,
+                                paddingRight: 3,
+                                paddingBottom: 3,
+                                paddingLeft: 0,
+                                alignItems: "flex-start",
+                                direction: "column",
+                                gap: 2,
+                                width: "100%",
+                                children: [
+                                    /*#__PURE__*/ jsx(Grid.Root, {
+                                        gap: 4,
+                                        width: "100%",
+                                        children: components[attribute.component].layout.map((row)=>row.map(({ size, ...field })=>/*#__PURE__*/ jsx(Grid.Item, {
+                                                    col: size,
+                                                    direction: "column",
+                                                    alignItems: "stretch",
+                                                    children: /*#__PURE__*/ jsx(Flex, {
+                                                        alignItems: "center",
+                                                        background: "neutral0",
+                                                        paddingTop: 2,
+                                                        paddingBottom: 2,
+                                                        paddingLeft: 3,
+                                                        paddingRight: 3,
+                                                        hasRadius: true,
+                                                        borderColor: "neutral200",
+                                                        children: /*#__PURE__*/ jsx(Typography, {
+                                                            textColor: "neutral800",
+                                                            children: field.name
+                                                        })
+                                                    })
+                                                }, field.name)))
+                                    }),
+                                    /*#__PURE__*/ jsx(Link, {
+                                        // used to stop the edit form from appearing when we click here.
+                                        onClick: (e)=>e.stopPropagation(),
+                                        startIcon: /*#__PURE__*/ jsx(Cog, {}),
+                                        tag: NavLink,
+                                        to: `../components/${attribute.component}/configurations/edit`,
+                                        children: formatMessage({
+                                            id: getTranslation('components.FieldItem.linkToComponentLayout'),
+                                            defaultMessage: "Set the component's layout"
+                                        })
+                                    })
+                                ]
+                            }) : null,
+                            attribute?.type === 'dynamiczone' ? /*#__PURE__*/ jsx(Flex, {
+                                paddingTop: 3,
+                                paddingRight: 3,
+                                paddingBottom: 3,
+                                paddingLeft: 0,
+                                alignItems: "flex-start",
+                                gap: 2,
+                                width: "100%",
+                                children: attribute?.components.map((uid)=>/*#__PURE__*/ jsxs(ComponentLink, {
+                                        // used to stop the edit form from appearing when we click here.
+                                        onClick: (e)=>e.stopPropagation(),
+                                        to: `../components/${uid}/configurations/edit`,
+                                        children: [
+                                            /*#__PURE__*/ jsx(ComponentIcon, {
+                                                icon: components[uid].settings.icon
+                                            }),
+                                            /*#__PURE__*/ jsx(Typography, {
+                                                fontSize: 1,
+                                                textColor: "neutral600",
+                                                fontWeight: "bold",
+                                                children: components[uid].settings.displayName
+                                            })
+                                        ]
+                                    }, uid))
+                            }) : null
+                        ]
+                    })
+                ]
+            }),
+            value.name !== TEMP_FIELD_NAME && /*#__PURE__*/ jsx(EditFieldForm, {
+                attribute: attribute,
+                name: name,
+                onClose: ()=>setIsModalOpen(false)
+            })
+        ]
+    });
+};
+const DragButton = styled(IconButton)`
+  height: unset;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  border-radius: 0px;
+  border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
+  cursor: all-scroll;
+
+  svg {
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+`;
+const ComponentLink = styled(NavLink)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[1]};
+  padding: ${(props)=>props.theme.spaces[2]};
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  background: ${({ theme })=>theme.colors.neutral0};
+  width: 14rem;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  text-decoration: none;
+
+  &:focus,
+  &:hover {
+    ${({ theme })=>`
+      background-color: ${theme.colors.primary100};
+      border-color: ${theme.colors.primary200};
+
+      ${Typography} {
+          color: ${theme.colors.primary600};
+      }
+    `}
+
+    /* > ComponentIcon */
+    > div:first-child {
+      background: ${({ theme })=>theme.colors.primary200};
+      color: ${({ theme })=>theme.colors.primary600};
+
+      svg {
+        path {
+          fill: ${({ theme })=>theme.colors.primary600};
+        }
+      }
+    }
+  }
+`;
+
+export { Fields, TEMP_FIELD_NAME };
+//# sourceMappingURL=Fields.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Fields.mjs","sources":["../../../../admin/src/components/ConfigurationForm/Fields.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useField, useForm } from '@strapi/admin/strapi-admin';\nimport {\n  Modal,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  IconButtonComponent,\n  Typography,\n  useComposedRefs,\n  Link,\n  Menu,\n} from '@strapi/design-system';\nimport { Cog, Cross, Drag, Pencil, Plus } from '@strapi/icons';\nimport { generateNKeysBetween as generateNKeysBetweenImpl } from 'fractional-indexing';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { ItemTypes } from '../../constants/dragAndDrop';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../hooks/useDragAndDrop';\nimport { getTranslation } from '../../utils/translations';\nimport { ComponentIcon } from '../ComponentIcon';\n\nimport { EditFieldForm, EditFieldFormProps } from './EditFieldForm';\n\nimport type { ConfigurationFormData, EditFieldSpacerLayout } from './Form';\nimport type { EditLayout } from '../../hooks/useDocumentLayout';\n\ntype FormField = ConfigurationFormData['layout'][number]['children'][number];\ntype Field = Omit<ConfigurationFormData['layout'][number]['children'][number], '__temp_key__'>;\n\n/* -------------------------------------------------------------------------------------------------\n * Fields\n * -----------------------------------------------------------------------------------------------*/\n\ninterface FieldsProps extends Pick<EditLayout, 'metadatas'>, Pick<FieldProps, 'components'> {\n  attributes: {\n    [key: string]: FieldProps['attribute'];\n  };\n  fieldSizes: Record<string, number>;\n  components: EditLayout['components'];\n}\n\nconst Fields = ({ attributes, fieldSizes, components, metadatas = {} }: FieldsProps) => {\n  const { formatMessage } = useIntl();\n\n  const layout = useForm<ConfigurationFormData['layout']>(\n    'Fields',\n    (state) => state.values.layout ?? []\n  );\n  const onChange = useForm('Fields', (state) => state.onChange);\n  const addFieldRow = useForm('Fields', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('Fields', (state) => state.removeFieldRow);\n\n  const existingFields = layout.map((row) => row.children.map((field) => field.name)).flat();\n\n  /**\n   * Get the fields that are not already in the layout\n   * But also check that they are visible before we give users\n   * the option to display them. e.g. `id` is not visible.\n   */\n  const remainingFields = Object.entries(metadatas).reduce<Field[]>((acc, current) => {\n    const [name, { visible, ...field }] = current;\n\n    if (!existingFields.includes(name) && visible === true) {\n      const type = attributes[name]?.type;\n      const size = type ? fieldSizes[type] : 12;\n\n      acc.push({\n        ...field,\n        label: field.label ?? name,\n        name,\n        size,\n      });\n    }\n\n    return acc;\n  }, []);\n\n  const handleMoveField: FieldProps['onMoveField'] = (\n    [newRowIndex, newFieldIndex],\n    [currentRowIndex, currentFieldIndex]\n  ) => {\n    /**\n     * Because this view has the constraint that the sum of field sizes cannot be greater\n     * than 12, we don't use the form's method to move field rows, instead, we calculate\n     * the new layout and set the entire form.\n     */\n    const newLayout = structuredClone(layout);\n\n    /**\n     * Remove field from the current layout space using splice so we have the item\n     */\n    const [field] = newLayout[currentRowIndex].children.splice(currentFieldIndex, 1);\n\n    if (!field || field.name === TEMP_FIELD_NAME) {\n      return;\n    }\n\n    const newRow = newLayout[newRowIndex].children;\n    const [newFieldKey] = generateNKeysBetween(newRow, 1, currentFieldIndex, newFieldIndex);\n\n    /**\n     * Next we inject the field into it's new row at it's specified index, we then remove the spaces\n     * if they exist and recalculate into potentially two arrays ONLY if the sizing is now over 12,\n     * the row and the rest of the row that couldn't fit.\n     *\n     * for example, if i have a row of `[{size: 4}, {size: 6}]` and i add `{size: 8}` a index 0,\n     * the new array will look like `[{size: 8}, {size: 4}, {size: 6}]` which breaks the limit of 12,\n     * so instead we make two arrays for the new rows `[[{size: 8}, {size: 4}], [{size: 6}]]` which we\n     * then inject at the original row point with spacers included.\n     */\n    newRow.splice(newFieldIndex, 0, { ...field, __temp_key__: newFieldKey });\n\n    if (newLayout[newRowIndex].children.reduce((acc, curr) => acc + curr.size, 0) > 12) {\n      const recalculatedRows = chunkArray(\n        newLayout[newRowIndex].children.filter((field) => field.name !== TEMP_FIELD_NAME)\n      );\n\n      const rowKeys = generateNKeysBetween(\n        newLayout,\n        recalculatedRows.length,\n        currentRowIndex,\n        newRowIndex\n      );\n\n      newLayout.splice(\n        newRowIndex,\n        1,\n        ...recalculatedRows.map((row, index) => ({\n          __temp_key__: rowKeys[index],\n          children: row,\n        }))\n      );\n    }\n\n    /**\n     * Now we remove our spacers from the rows so we can understand what dead rows exist:\n     * - if there's only spacers left\n     * - there's nothing in the row, e.g. a size 12 field left it.\n     * These rows are then filtered out.\n     * After that, we recalculate the spacers for the rows that need them.\n     */\n    const newLayoutWithSpacers = newLayout\n      .map((row) => ({\n        ...row,\n        children: row.children.filter((field) => field.name !== TEMP_FIELD_NAME),\n      }))\n      .filter((row) => row.children.length > 0)\n      .map((row) => {\n        const totalSpaceTaken = row.children.reduce((acc, curr) => acc + curr.size, 0);\n\n        if (totalSpaceTaken < 12) {\n          const [spacerKey] = generateNKeysBetweenImpl(\n            row.children.at(-1)?.__temp_key__,\n            undefined,\n            1\n          );\n\n          return {\n            ...row,\n            children: [\n              ...row.children,\n              {\n                name: TEMP_FIELD_NAME,\n                size: 12 - totalSpaceTaken,\n                __temp_key__: spacerKey,\n              } satisfies EditFieldSpacerLayout,\n            ],\n          };\n        }\n\n        return row;\n      });\n\n    onChange('layout', newLayoutWithSpacers);\n  };\n\n  const handleRemoveField =\n    (rowIndex: number, fieldIndex: number): FieldProps['onRemoveField'] =>\n    () => {\n      if (layout[rowIndex].children.length === 1) {\n        removeFieldRow(`layout`, rowIndex);\n      } else {\n        onChange(`layout.${rowIndex}.children`, [\n          ...layout[rowIndex].children.slice(0, fieldIndex),\n          ...layout[rowIndex].children.slice(fieldIndex + 1),\n        ]);\n      }\n    };\n\n  const handleAddField = (field: Field) => () => {\n    addFieldRow('layout', { children: [field] });\n  };\n\n  return (\n    <Flex paddingTop={6} direction=\"column\" alignItems=\"stretch\" gap={4}>\n      <Flex alignItems=\"flex-start\" direction=\"column\" justifyContent=\"space-between\">\n        <Typography fontWeight=\"bold\">\n          {formatMessage({\n            id: getTranslation('containers.list.displayedFields'),\n            defaultMessage: 'Displayed fields',\n          })}\n        </Typography>\n        <Typography variant=\"pi\" textColor=\"neutral600\">\n          {formatMessage({\n            id: 'containers.SettingPage.editSettings.description',\n            defaultMessage: 'Drag & drop the fields to build the layout',\n          })}\n        </Typography>\n      </Flex>\n      <Box padding={4} hasRadius borderStyle=\"dashed\" borderWidth=\"1px\" borderColor=\"neutral300\">\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n          {layout.map((row, rowIndex) => (\n            <Grid.Root gap={2} key={row.__temp_key__}>\n              {row.children.map(({ size, ...field }, fieldIndex) => (\n                <Grid.Item key={field.name} col={size} direction=\"column\" alignItems=\"stretch\">\n                  <Field\n                    attribute={attributes[field.name]}\n                    components={components}\n                    index={[rowIndex, fieldIndex]}\n                    name={`layout.${rowIndex}.children.${fieldIndex}`}\n                    onMoveField={handleMoveField}\n                    onRemoveField={handleRemoveField(rowIndex, fieldIndex)}\n                  />\n                </Grid.Item>\n              ))}\n            </Grid.Root>\n          ))}\n          <Menu.Root>\n            <Menu.Trigger\n              startIcon={<Plus />}\n              endIcon={null}\n              disabled={remainingFields.length === 0}\n              fullWidth\n              variant=\"secondary\"\n            >\n              {formatMessage({\n                id: getTranslation('containers.SettingPage.add.field'),\n                defaultMessage: 'Insert another field',\n              })}\n            </Menu.Trigger>\n            <Menu.Content>\n              {remainingFields.map((field) => (\n                <Menu.Item key={field.name} onSelect={handleAddField(field)}>\n                  {field.label}\n                </Menu.Item>\n              ))}\n            </Menu.Content>\n          </Menu.Root>\n        </Flex>\n      </Box>\n    </Flex>\n  );\n};\n\n/**\n * @internal\n * @description Small abstraction to solve within an array of fields where you can\n * add a field to the beginning or start, move back and forth what it's index range\n * should be when calculating it's new temp key\n */\nconst generateNKeysBetween = <Field extends { __temp_key__: string }>(\n  field: Field[],\n  count: number,\n  currInd: number,\n  newInd: number\n) => {\n  const startKey = currInd > newInd ? field[newInd - 1]?.__temp_key__ : field[newInd]?.__temp_key__;\n  const endKey = currInd > newInd ? field[newInd]?.__temp_key__ : field[newInd + 1]?.__temp_key__;\n\n  return generateNKeysBetweenImpl(startKey, endKey, count);\n};\n\n/**\n * @internal\n * @description chunks a row of layouts by the max size we allow, 12. It does not add the\n * spacers again, that should be added separately.\n */\nconst chunkArray = (array: FormField[]) => {\n  const result: Array<FormField[]> = [];\n  let temp: FormField[] = [];\n\n  array.reduce((acc, field) => {\n    if (acc + field.size > 12) {\n      result.push(temp);\n      temp = [field];\n      return field.size;\n    } else {\n      temp.push(field);\n      return acc + field.size;\n    }\n  }, 0);\n\n  if (temp.length > 0) {\n    result.push(temp);\n  }\n\n  return result;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Field\n * -----------------------------------------------------------------------------------------------*/\n\ninterface FieldProps extends Pick<EditFieldFormProps, 'name' | 'attribute'> {\n  components: EditLayout['components'];\n  index: [row: number, index: number];\n  onMoveField: UseDragAndDropOptions<number[]>['onMoveItem'];\n  onRemoveField: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst TEMP_FIELD_NAME = '_TEMP_';\n\n/**\n * Displays a field in the layout with drag options, also\n * opens a modal  to edit the details of said field.\n */\nconst Field = ({ attribute, components, name, index, onMoveField, onRemoveField }: FieldProps) => {\n  const [isModalOpen, setIsModalOpen] = React.useState(false);\n  const { formatMessage } = useIntl();\n\n  const { value } = useField<FormField>(name);\n\n  const [{ isDragging }, objectRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop<\n    Array<number>\n  >(true, {\n    dropSensitivity: 'immediate',\n    type: ItemTypes.EDIT_FIELD,\n    item: { index, label: value?.label, name },\n    index,\n    onMoveItem: onMoveField,\n  });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef]);\n\n  const composedRefs = useComposedRefs<HTMLSpanElement>(dragRef, objectRef);\n\n  const handleRemoveField: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onRemoveField(e);\n  };\n\n  const onEditFieldMeta: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsModalOpen(true);\n  };\n\n  const tempRefs = useComposedRefs<HTMLSpanElement>(dropRef, objectRef);\n\n  if (!value) {\n    return null;\n  }\n\n  if (value.name === TEMP_FIELD_NAME) {\n    return <Flex tag=\"span\" height=\"100%\" style={{ opacity: 0 }} ref={tempRefs} />;\n  }\n\n  return (\n    <Modal.Root open={isModalOpen} onOpenChange={setIsModalOpen}>\n      <Flex\n        borderColor=\"neutral150\"\n        background=\"neutral100\"\n        hasRadius\n        style={{ opacity: isDragging ? 0.5 : 1 }}\n        ref={dropRef}\n        gap={3}\n        cursor=\"pointer\"\n        onClick={() => {\n          setIsModalOpen(true);\n        }}\n      >\n        <DragButton\n          tag=\"span\"\n          withTooltip={false}\n          label={formatMessage(\n            {\n              id: getTranslation('components.DraggableCard.move.field'),\n              defaultMessage: 'Move {item}',\n            },\n            { item: value.label }\n          )}\n          onClick={(e) => e.stopPropagation()}\n          ref={composedRefs}\n        >\n          <Drag />\n        </DragButton>\n        <Flex direction=\"column\" alignItems=\"flex-start\" grow={1} overflow=\"hidden\">\n          <Flex gap={3} justifyContent=\"space-between\" width=\"100%\">\n            <Typography ellipsis fontWeight=\"bold\">\n              {value.label}\n            </Typography>\n            <Flex>\n              <IconButton\n                type=\"button\"\n                variant=\"ghost\"\n                background=\"transparent\"\n                onClick={onEditFieldMeta}\n                withTooltip={false}\n                label={formatMessage(\n                  {\n                    id: getTranslation('components.DraggableCard.edit.field'),\n                    defaultMessage: 'Edit {item}',\n                  },\n                  { item: value.label }\n                )}\n              >\n                <Pencil />\n              </IconButton>\n              <IconButton\n                type=\"button\"\n                variant=\"ghost\"\n                onClick={handleRemoveField}\n                background=\"transparent\"\n                withTooltip={false}\n                label={formatMessage(\n                  {\n                    id: getTranslation('components.DraggableCard.delete.field'),\n                    defaultMessage: 'Delete {item}',\n                  },\n                  { item: value.label }\n                )}\n              >\n                <Cross />\n              </IconButton>\n            </Flex>\n          </Flex>\n          {attribute?.type === 'component' ? (\n            <Flex\n              paddingTop={3}\n              paddingRight={3}\n              paddingBottom={3}\n              paddingLeft={0}\n              alignItems=\"flex-start\"\n              direction=\"column\"\n              gap={2}\n              width=\"100%\"\n            >\n              <Grid.Root gap={4} width=\"100%\">\n                {components[attribute.component].layout.map((row) =>\n                  row.map(({ size, ...field }) => (\n                    <Grid.Item key={field.name} col={size} direction=\"column\" alignItems=\"stretch\">\n                      <Flex\n                        alignItems=\"center\"\n                        background=\"neutral0\"\n                        paddingTop={2}\n                        paddingBottom={2}\n                        paddingLeft={3}\n                        paddingRight={3}\n                        hasRadius\n                        borderColor=\"neutral200\"\n                      >\n                        <Typography textColor=\"neutral800\">{field.name}</Typography>\n                      </Flex>\n                    </Grid.Item>\n                  ))\n                )}\n              </Grid.Root>\n              <Link\n                // used to stop the edit form from appearing when we click here.\n                onClick={(e) => e.stopPropagation()}\n                startIcon={<Cog />}\n                tag={NavLink}\n                to={`../components/${attribute.component}/configurations/edit`}\n              >\n                {formatMessage({\n                  id: getTranslation('components.FieldItem.linkToComponentLayout'),\n                  defaultMessage: \"Set the component's layout\",\n                })}\n              </Link>\n            </Flex>\n          ) : null}\n          {attribute?.type === 'dynamiczone' ? (\n            <Flex\n              paddingTop={3}\n              paddingRight={3}\n              paddingBottom={3}\n              paddingLeft={0}\n              alignItems=\"flex-start\"\n              gap={2}\n              width=\"100%\"\n            >\n              {attribute?.components.map((uid) => (\n                <ComponentLink\n                  // used to stop the edit form from appearing when we click here.\n                  onClick={(e) => e.stopPropagation()}\n                  key={uid}\n                  to={`../components/${uid}/configurations/edit`}\n                >\n                  <ComponentIcon icon={components[uid].settings.icon} />\n                  <Typography fontSize={1} textColor=\"neutral600\" fontWeight=\"bold\">\n                    {components[uid].settings.displayName}\n                  </Typography>\n                </ComponentLink>\n              ))}\n            </Flex>\n          ) : null}\n        </Flex>\n      </Flex>\n      {value.name !== TEMP_FIELD_NAME && (\n        <EditFieldForm attribute={attribute} name={name} onClose={() => setIsModalOpen(false)} />\n      )}\n    </Modal.Root>\n  );\n};\n\nconst DragButton = styled<IconButtonComponent<'span'>>(IconButton)`\n  height: unset;\n  align-self: stretch;\n  display: flex;\n  align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  border-radius: 0px;\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n  cursor: all-scroll;\n\n  svg {\n    width: 1.2rem;\n    height: 1.2rem;\n  }\n`;\n\nconst ComponentLink = styled(NavLink)`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[1]};\n  padding: ${(props) => props.theme.spaces[2]};\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  background: ${({ theme }) => theme.colors.neutral0};\n  width: 14rem;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  text-decoration: none;\n\n  &:focus,\n  &:hover {\n    ${({ theme }) => `\n      background-color: ${theme.colors.primary100};\n      border-color: ${theme.colors.primary200};\n\n      ${Typography} {\n          color: ${theme.colors.primary600};\n      }\n    `}\n\n    /* > ComponentIcon */\n    > div:first-child {\n      background: ${({ theme }) => theme.colors.primary200};\n      color: ${({ theme }) => theme.colors.primary600};\n\n      svg {\n        path {\n          fill: ${({ theme }) => theme.colors.primary600};\n        }\n      }\n    }\n  }\n`;\n\nexport { Fields, TEMP_FIELD_NAME };\nexport type { FieldsProps };\n"],"names":["Fields","attributes","fieldSizes","components","metadatas","formatMessage","useIntl","layout","useForm","state","values","onChange","addFieldRow","removeFieldRow","existingFields","map","row","children","field","name","flat","remainingFields","Object","entries","reduce","acc","current","visible","includes","type","size","push","label","handleMoveField","newRowIndex","newFieldIndex","currentRowIndex","currentFieldIndex","newLayout","structuredClone","splice","TEMP_FIELD_NAME","newRow","newFieldKey","generateNKeysBetween","__temp_key__","curr","recalculatedRows","chunkArray","filter","rowKeys","length","index","newLayoutWithSpacers","totalSpaceTaken","spacerKey","generateNKeysBetweenImpl","at","undefined","handleRemoveField","rowIndex","fieldIndex","slice","handleAddField","_jsxs","Flex","paddingTop","direction","alignItems","gap","justifyContent","_jsx","Typography","fontWeight","id","getTranslation","defaultMessage","variant","textColor","Box","padding","hasRadius","borderStyle","borderWidth","borderColor","Grid","Root","Item","col","Field","attribute","onMoveField","onRemoveField","Menu","Trigger","startIcon","Plus","endIcon","disabled","fullWidth","Content","onSelect","count","currInd","newInd","startKey","endKey","array","result","temp","isModalOpen","setIsModalOpen","React","useState","value","useField","isDragging","objectRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","dropSensitivity","ItemTypes","EDIT_FIELD","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","composedRefs","useComposedRefs","e","preventDefault","stopPropagation","onEditFieldMeta","tempRefs","tag","height","style","opacity","ref","Modal","open","onOpenChange","background","cursor","onClick","DragButton","withTooltip","Drag","grow","overflow","width","ellipsis","IconButton","Pencil","Cross","paddingRight","paddingBottom","paddingLeft","component","Link","Cog","NavLink","to","uid","ComponentLink","ComponentIcon","icon","settings","fontSize","displayName","EditFieldForm","onClose","styled","theme","colors","neutral150","spaces","props","neutral200","neutral0","borderRadius","primary100","primary200","primary600"],"mappings":"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"}