@strapi/content-type-builder 5.12.1 → 5.12.2

package/dist/admin/components/List.mjs

@@ -0,0 +1,241 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import { useTracking } from '@strapi/admin/strapi-admin';
+import { Table, Thead, Tr, Th, Typography, Tbody, Td, EmptyStateLayout, Button, Box, TFooter } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
+import { EmptyDocuments } from '@strapi/icons/symbols';
+import { useIntl } from 'react-intl';
+import { useDataManager } from '../hooks/useDataManager.mjs';
+import { useFormModalNavigation } from '../hooks/useFormModalNavigation.mjs';
+import { getTrad } from '../utils/getTrad.mjs';
+import { BoxWrapper } from './BoxWrapper.mjs';
+import { ComponentList } from './ComponentList.mjs';
+import { DynamicZoneList } from './DynamicZoneList.mjs';
+import { NestedTFooter } from './NestedFooter.mjs';
+
+const List = ({ addComponentToDZ, customRowComponent, editTarget, firstLoopComponentUid, isFromDynamicZone = false, isMain = false, isNestedInDZComponent = false, isSub = false, items = [], secondLoopComponentUid, targetUid })=>{
+    const { formatMessage } = useIntl();
+    const { trackUsage } = useTracking();
+    const { isInDevelopmentMode, modifiedData, isInContentTypeView } = useDataManager();
+    const { onOpenModalAddField } = useFormModalNavigation();
+    const onClickAddField = ()=>{
+        trackUsage('hasClickedCTBAddFieldBanner');
+        onOpenModalAddField({
+            forTarget: editTarget,
+            targetUid
+        });
+    };
+    if (!targetUid) {
+        return /*#__PURE__*/ jsxs(Table, {
+            colCount: 2,
+            rowCount: 2,
+            children: [
+                /*#__PURE__*/ jsx(Thead, {
+                    children: /*#__PURE__*/ jsxs(Tr, {
+                        children: [
+                            /*#__PURE__*/ jsx(Th, {
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    variant: "sigma",
+                                    textColor: "neutral600",
+                                    children: formatMessage({
+                                        id: 'global.name',
+                                        defaultMessage: 'Name'
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Th, {
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    variant: "sigma",
+                                    textColor: "neutral600",
+                                    children: formatMessage({
+                                        id: 'global.type',
+                                        defaultMessage: 'Type'
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(Tbody, {
+                    children: /*#__PURE__*/ jsx(Tr, {
+                        children: /*#__PURE__*/ jsx(Td, {
+                            colSpan: 2,
+                            children: /*#__PURE__*/ jsx(EmptyStateLayout, {
+                                content: formatMessage({
+                                    id: getTrad('table.content.create-first-content-type'),
+                                    defaultMessage: 'Create your first Collection-Type'
+                                }),
+                                hasRadius: true,
+                                icon: /*#__PURE__*/ jsx(EmptyDocuments, {
+                                    width: "16rem"
+                                })
+                            })
+                        })
+                    })
+                })
+            ]
+        });
+    }
+    if (items.length === 0 && isMain) {
+        return /*#__PURE__*/ jsxs(Table, {
+            colCount: 2,
+            rowCount: 2,
+            children: [
+                /*#__PURE__*/ jsx(Thead, {
+                    children: /*#__PURE__*/ jsxs(Tr, {
+                        children: [
+                            /*#__PURE__*/ jsx(Th, {
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    variant: "sigma",
+                                    textColor: "neutral600",
+                                    children: formatMessage({
+                                        id: 'global.name',
+                                        defaultMessage: 'Name'
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Th, {
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    variant: "sigma",
+                                    textColor: "neutral600",
+                                    children: formatMessage({
+                                        id: 'global.type',
+                                        defaultMessage: 'Type'
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(Tbody, {
+                    children: /*#__PURE__*/ jsx(Tr, {
+                        children: /*#__PURE__*/ jsx(Td, {
+                            colSpan: 2,
+                            children: /*#__PURE__*/ jsx(EmptyStateLayout, {
+                                action: /*#__PURE__*/ jsx(Button, {
+                                    onClick: onClickAddField,
+                                    size: "L",
+                                    startIcon: /*#__PURE__*/ jsx(Plus, {}),
+                                    variant: "secondary",
+                                    children: formatMessage({
+                                        id: getTrad('table.button.no-fields'),
+                                        defaultMessage: 'Add new field'
+                                    })
+                                }),
+                                content: formatMessage(isInContentTypeView ? {
+                                    id: getTrad('table.content.no-fields.collection-type'),
+                                    defaultMessage: 'Add your first field to this Collection-Type'
+                                } : {
+                                    id: getTrad('table.content.no-fields.component'),
+                                    defaultMessage: 'Add your first field to this component'
+                                }),
+                                hasRadius: true,
+                                icon: /*#__PURE__*/ jsx(EmptyDocuments, {
+                                    width: "16rem"
+                                })
+                            })
+                        })
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsxs(BoxWrapper, {
+        children: [
+            /*#__PURE__*/ jsx(Box, {
+                paddingLeft: 6,
+                paddingRight: isMain ? 6 : 0,
+                ...isMain && {
+                    style: {
+                        overflowX: 'auto'
+                    }
+                },
+                children: /*#__PURE__*/ jsxs("table", {
+                    children: [
+                        isMain && /*#__PURE__*/ jsx("thead", {
+                            children: /*#__PURE__*/ jsxs("tr", {
+                                children: [
+                                    /*#__PURE__*/ jsx("th", {
+                                        children: /*#__PURE__*/ jsx(Typography, {
+                                            variant: "sigma",
+                                            textColor: "neutral800",
+                                            children: formatMessage({
+                                                id: 'global.name',
+                                                defaultMessage: 'Name'
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("th", {
+                                        colSpan: 2,
+                                        children: /*#__PURE__*/ jsx(Typography, {
+                                            variant: "sigma",
+                                            textColor: "neutral800",
+                                            children: formatMessage({
+                                                id: 'global.type',
+                                                defaultMessage: 'Type'
+                                            })
+                                        })
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("tbody", {
+                            children: items.map((item)=>{
+                                const { type } = item;
+                                const CustomRow = customRowComponent;
+                                return /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(CustomRow, {
+                                            ...item,
+                                            isNestedInDZComponent: isNestedInDZComponent,
+                                            targetUid: targetUid,
+                                            editTarget: editTarget,
+                                            firstLoopComponentUid: firstLoopComponentUid,
+                                            isFromDynamicZone: isFromDynamicZone,
+                                            secondLoopComponentUid: secondLoopComponentUid
+                                        }),
+                                        type === 'component' && /*#__PURE__*/ jsx(ComponentList, {
+                                            ...item,
+                                            customRowComponent: customRowComponent,
+                                            targetUid: targetUid,
+                                            isNestedInDZComponent: isFromDynamicZone,
+                                            editTarget: editTarget,
+                                            firstLoopComponentUid: firstLoopComponentUid
+                                        }),
+                                        type === 'dynamiczone' && /*#__PURE__*/ jsx(DynamicZoneList, {
+                                            ...item,
+                                            customRowComponent: customRowComponent,
+                                            addComponent: addComponentToDZ,
+                                            targetUid: targetUid
+                                        })
+                                    ]
+                                }, item.name);
+                            })
+                        })
+                    ]
+                })
+            }),
+            isMain && isInDevelopmentMode && /*#__PURE__*/ jsx(TFooter, {
+                cursor: "pointer",
+                icon: /*#__PURE__*/ jsx(Plus, {}),
+                onClick: onClickAddField,
+                children: formatMessage({
+                    id: getTrad(`form.button.add.field.to.${modifiedData.contentType ? modifiedData.contentType.schema.kind : editTarget || 'collectionType'}`),
+                    defaultMessage: 'Add another field'
+                })
+            }),
+            isSub && isInDevelopmentMode && !isFromDynamicZone && /*#__PURE__*/ jsx(NestedTFooter, {
+                icon: /*#__PURE__*/ jsx(Plus, {}),
+                onClick: onClickAddField,
+                color: isFromDynamicZone ? 'primary' : 'neutral',
+                children: formatMessage({
+                    id: getTrad(`form.button.add.field.to.component`),
+                    defaultMessage: 'Add another field'
+                })
+            })
+        ]
+    });
+};
+
+export { List };
+//# sourceMappingURL=List.mjs.map

package/dist/admin/components/List.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.mjs","sources":["../../../admin/src/components/List.tsx"],"sourcesContent":["import { ComponentType, Fragment } from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Button,\n  EmptyStateLayout,\n  Table,\n  Tbody,\n  Td,\n  TFooter,\n  Th,\n  Thead,\n  Tr,\n  Typography,\n} from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { EmptyDocuments } from '@strapi/icons/symbols';\nimport { useIntl } from 'react-intl';\n\nimport { useDataManager } from '../hooks/useDataManager';\nimport { useFormModalNavigation } from '../hooks/useFormModalNavigation';\nimport { getTrad } from '../utils/getTrad';\n\nimport { BoxWrapper } from './BoxWrapper';\nimport { ComponentList } from './ComponentList';\nimport { DynamicZoneList } from './DynamicZoneList';\nimport { NestedTFooter } from './NestedFooter';\n\nimport type { SchemaType } from '../types';\nimport type { Internal } from '@strapi/types';\n\ninterface ListProps {\n  addComponentToDZ?: () => void;\n  customRowComponent: ComponentType<any>;\n  editTarget: SchemaType;\n  firstLoopComponentUid?: string;\n  isFromDynamicZone?: boolean;\n  isNestedInDZComponent?: boolean;\n  isMain?: boolean;\n  items: any[];\n  secondLoopComponentUid?: string | null;\n  targetUid?: Internal.UID.Schema;\n  isSub?: boolean;\n}\n\nexport const List = ({\n  addComponentToDZ,\n  customRowComponent,\n  editTarget,\n  firstLoopComponentUid,\n  isFromDynamicZone = false,\n  isMain = false,\n  isNestedInDZComponent = false,\n  isSub = false,\n  items = [],\n  secondLoopComponentUid,\n  targetUid,\n}: ListProps) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { isInDevelopmentMode, modifiedData, isInContentTypeView } = useDataManager();\n\n  const { onOpenModalAddField } = useFormModalNavigation();\n  const onClickAddField = () => {\n    trackUsage('hasClickedCTBAddFieldBanner');\n\n    onOpenModalAddField({ forTarget: editTarget, targetUid });\n  };\n\n  if (!targetUid) {\n    return (\n      <Table colCount={2} rowCount={2}>\n        <Thead>\n          <Tr>\n            <Th>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}\n              </Typography>\n            </Th>\n            <Th>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {formatMessage({ id: 'global.type', defaultMessage: 'Type' })}\n              </Typography>\n            </Th>\n          </Tr>\n        </Thead>\n        <Tbody>\n          <Tr>\n            <Td colSpan={2}>\n              <EmptyStateLayout\n                content={formatMessage({\n                  id: getTrad('table.content.create-first-content-type'),\n                  defaultMessage: 'Create your first Collection-Type',\n                })}\n                hasRadius\n                icon={<EmptyDocuments width=\"16rem\" />}\n              />\n            </Td>\n          </Tr>\n        </Tbody>\n      </Table>\n    );\n  }\n\n  if (items.length === 0 && isMain) {\n    return (\n      <Table colCount={2} rowCount={2}>\n        <Thead>\n          <Tr>\n            <Th>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}\n              </Typography>\n            </Th>\n            <Th>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {formatMessage({ id: 'global.type', defaultMessage: 'Type' })}\n              </Typography>\n            </Th>\n          </Tr>\n        </Thead>\n        <Tbody>\n          <Tr>\n            <Td colSpan={2}>\n              <EmptyStateLayout\n                action={\n                  <Button\n                    onClick={onClickAddField}\n                    size=\"L\"\n                    startIcon={<Plus />}\n                    variant=\"secondary\"\n                  >\n                    {formatMessage({\n                      id: getTrad('table.button.no-fields'),\n                      defaultMessage: 'Add new field',\n                    })}\n                  </Button>\n                }\n                content={formatMessage(\n                  isInContentTypeView\n                    ? {\n                        id: getTrad('table.content.no-fields.collection-type'),\n                        defaultMessage: 'Add your first field to this Collection-Type',\n                      }\n                    : {\n                        id: getTrad('table.content.no-fields.component'),\n                        defaultMessage: 'Add your first field to this component',\n                      }\n                )}\n                hasRadius\n                icon={<EmptyDocuments width=\"16rem\" />}\n              />\n            </Td>\n          </Tr>\n        </Tbody>\n      </Table>\n    );\n  }\n\n  return (\n    <BoxWrapper>\n      <Box\n        paddingLeft={6}\n        paddingRight={isMain ? 6 : 0}\n        {...(isMain && { style: { overflowX: 'auto' } })}\n      >\n        <table>\n          {isMain && (\n            <thead>\n              <tr>\n                <th>\n                  <Typography variant=\"sigma\" textColor=\"neutral800\">\n                    {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}\n                  </Typography>\n                </th>\n                <th colSpan={2}>\n                  <Typography variant=\"sigma\" textColor=\"neutral800\">\n                    {formatMessage({ id: 'global.type', defaultMessage: 'Type' })}\n                  </Typography>\n                </th>\n              </tr>\n            </thead>\n          )}\n          <tbody>\n            {items.map((item) => {\n              const { type } = item;\n              const CustomRow = customRowComponent;\n\n              return (\n                <Fragment key={item.name}>\n                  <CustomRow\n                    {...item}\n                    isNestedInDZComponent={isNestedInDZComponent}\n                    targetUid={targetUid}\n                    editTarget={editTarget}\n                    firstLoopComponentUid={firstLoopComponentUid}\n                    isFromDynamicZone={isFromDynamicZone}\n                    secondLoopComponentUid={secondLoopComponentUid}\n                  />\n\n                  {type === 'component' && (\n                    <ComponentList\n                      {...item}\n                      customRowComponent={customRowComponent}\n                      targetUid={targetUid}\n                      isNestedInDZComponent={isFromDynamicZone}\n                      editTarget={editTarget}\n                      firstLoopComponentUid={firstLoopComponentUid}\n                    />\n                  )}\n\n                  {type === 'dynamiczone' && (\n                    <DynamicZoneList\n                      {...item}\n                      customRowComponent={customRowComponent}\n                      addComponent={addComponentToDZ}\n                      targetUid={targetUid}\n                    />\n                  )}\n                </Fragment>\n              );\n            })}\n          </tbody>\n        </table>\n      </Box>\n\n      {isMain && isInDevelopmentMode && (\n        <TFooter cursor=\"pointer\" icon={<Plus />} onClick={onClickAddField}>\n          {formatMessage({\n            id: getTrad(\n              `form.button.add.field.to.${\n                modifiedData.contentType\n                  ? modifiedData.contentType.schema.kind\n                  : editTarget || 'collectionType'\n              }`\n            ),\n            defaultMessage: 'Add another field',\n          })}\n        </TFooter>\n      )}\n      {isSub && isInDevelopmentMode && !isFromDynamicZone && (\n        <NestedTFooter\n          icon={<Plus />}\n          onClick={onClickAddField}\n          color={isFromDynamicZone ? 'primary' : 'neutral'}\n        >\n          {formatMessage({\n            id: getTrad(`form.button.add.field.to.component`),\n            defaultMessage: 'Add another field',\n          })}\n        </NestedTFooter>\n      )}\n    </BoxWrapper>\n  );\n};\n"],"names":["List","addComponentToDZ","customRowComponent","editTarget","firstLoopComponentUid","isFromDynamicZone","isMain","isNestedInDZComponent","isSub","items","secondLoopComponentUid","targetUid","formatMessage","useIntl","trackUsage","useTracking","isInDevelopmentMode","modifiedData","isInContentTypeView","useDataManager","onOpenModalAddField","useFormModalNavigation","onClickAddField","forTarget","_jsxs","Table","colCount","rowCount","_jsx","Thead","Tr","Th","Typography","variant","textColor","id","defaultMessage","Tbody","Td","colSpan","EmptyStateLayout","content","getTrad","hasRadius","icon","EmptyDocuments","width","length","action","Button","onClick","size","startIcon","Plus","BoxWrapper","Box","paddingLeft","paddingRight","style","overflowX","table","thead","tr","th","tbody","map","item","type","CustomRow","Fragment","ComponentList","DynamicZoneList","addComponent","name","TFooter","cursor","contentType","schema","kind","NestedTFooter","color"],"mappings":"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"}

package/dist/admin/components/ListRow.js

@@ -0,0 +1,164 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var get = require('lodash/get');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var useDataManager = require('../hooks/useDataManager.js');
+var Curve = require('../icons/Curve.js');
+var getTrad = require('../utils/getTrad.js');
+var AttributeIcon = require('./AttributeIcon.js');
+var DisplayedType = require('./DisplayedType.js');
+var UpperFirst = require('./UpperFirst.js');
+
+const BoxWrapper = styledComponents.styled(designSystem.Box)`
+  position: relative;
+`;
+const ListRow = /*#__PURE__*/ React.memo(({ configurable = true, customField = null, editTarget, firstLoopComponentUid = null, isFromDynamicZone = false, name, onClick, relation = '', repeatable = false, secondLoopComponentUid = null, target = null, targetUid = null, type })=>{
+    const { contentTypes, isInDevelopmentMode, removeAttribute } = useDataManager.useDataManager();
+    const { formatMessage } = reactIntl.useIntl();
+    const isMorph = type === 'relation' && relation.includes('morph');
+    const ico = [
+        'integer',
+        'biginteger',
+        'float',
+        'decimal'
+    ].includes(type) ? 'number' : type;
+    const contentType = get(contentTypes, [
+        target
+    ], {});
+    const contentTypeFriendlyName = get(contentType, [
+        'schema',
+        'displayName'
+    ], '');
+    const isPluginContentType = get(contentType, 'plugin');
+    const src = target ? 'relation' : ico;
+    const handleClick = ()=>{
+        if (isMorph) {
+            return;
+        }
+        if (configurable !== false) {
+            const attrType = type;
+            onClick(// Tells where the attribute is located in the main modifiedData object : contentType, component or components
+            editTarget, // main data type uid
+            secondLoopComponentUid || firstLoopComponentUid || targetUid, // Name of the attribute
+            name, // Type of the attribute
+            attrType, customField);
+        }
+    };
+    let loopNumber;
+    if (secondLoopComponentUid && firstLoopComponentUid) {
+        loopNumber = 2;
+    } else if (firstLoopComponentUid) {
+        loopNumber = 1;
+    } else {
+        loopNumber = 0;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(BoxWrapper, {
+        tag: "tr",
+        onClick: isInDevelopmentMode && configurable && !isMorph ? handleClick : undefined,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("td", {
+                style: {
+                    position: 'relative'
+                },
+                children: [
+                    loopNumber !== 0 && /*#__PURE__*/ jsxRuntime.jsx(Curve.Curve, {
+                        color: isFromDynamicZone ? 'primary200' : 'neutral150'
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        paddingLeft: 2,
+                        gap: 4,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(AttributeIcon.AttributeIcon, {
+                                type: src,
+                                customField: customField
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                textColor: "neutral800",
+                                fontWeight: "bold",
+                                children: name
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("td", {
+                children: target ? /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Typography, {
+                    textColor: "neutral800",
+                    children: [
+                        formatMessage({
+                            id: getTrad.getTrad(`modelPage.attribute.${isMorph ? 'relation-polymorphic' : 'relationWith'}`),
+                            defaultMessage: 'Relation with'
+                        }),
+                        " ",
+                        /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                            style: {
+                                fontStyle: 'italic'
+                            },
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(UpperFirst.UpperFirst, {
+                                    content: contentTypeFriendlyName
+                                }),
+                                " ",
+                                isPluginContentType && `(${formatMessage({
+                                    id: getTrad.getTrad(`from`),
+                                    defaultMessage: 'from'
+                                })}: ${isPluginContentType})`
+                            ]
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsxRuntime.jsx(DisplayedType.DisplayedType, {
+                    type: type,
+                    customField: customField,
+                    repeatable: repeatable
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("td", {
+                children: isInDevelopmentMode ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    justifyContent: "flex-end",
+                    onClick: (e)=>e.stopPropagation(),
+                    children: configurable ? /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        gap: 1,
+                        children: [
+                            !isMorph && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                onClick: handleClick,
+                                label: `${formatMessage({
+                                    id: 'app.utils.edit',
+                                    defaultMessage: 'Edit'
+                                })} ${name}`,
+                                variant: "ghost",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Pencil, {})
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    removeAttribute(editTarget, name, secondLoopComponentUid || firstLoopComponentUid || '');
+                                },
+                                label: `${formatMessage({
+                                    id: 'global.delete',
+                                    defaultMessage: 'Delete'
+                                })} ${name}`,
+                                variant: "ghost",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Trash, {})
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsxRuntime.jsx(Icons.Lock, {})
+                }) : /*
+            In production mode the edit icons aren't visible, therefore
+            we need to reserve the same space, otherwise the height of the
+            row might collapse, leading to bad positioned curve icons
+          */ /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    height: "3.2rem"
+                })
+            })
+        ]
+    });
+});
+
+exports.BoxWrapper = BoxWrapper;
+exports.ListRow = ListRow;
+//# sourceMappingURL=ListRow.js.map

package/dist/admin/components/ListRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListRow.js","sources":["../../../admin/src/components/ListRow.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { Box, Flex, IconButton, Typography } from '@strapi/design-system';\nimport { Lock, Pencil, Trash } from '@strapi/icons';\nimport get from 'lodash/get';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useDataManager } from '../hooks/useDataManager';\nimport { Curve } from '../icons/Curve';\nimport { getTrad } from '../utils/getTrad';\n\nimport { AttributeIcon, IconByType } from './AttributeIcon';\nimport { DisplayedType } from './DisplayedType';\nimport { UpperFirst } from './UpperFirst';\n\nimport type { SchemaType } from '../types';\n\nexport const BoxWrapper = styled(Box)`\n  position: relative;\n`;\n\ntype ListRowProps = {\n  configurable?: boolean;\n  customField?: string | null;\n  editTarget: SchemaType;\n  firstLoopComponentUid?: string | null;\n  isFromDynamicZone?: boolean;\n  name: string;\n  onClick: (\n    editTarget: string,\n    targetUid: string | null,\n    attributeName: string,\n    attributeType: string,\n    customField: string | null\n  ) => void;\n  relation?: string;\n  repeatable?: boolean;\n  secondLoopComponentUid?: string | null;\n  target?: string | null;\n  targetUid?: string | null;\n  type: IconByType;\n};\n\nexport const ListRow = memo(\n  ({\n    configurable = true,\n    customField = null,\n    editTarget,\n    firstLoopComponentUid = null,\n    isFromDynamicZone = false,\n    name,\n    onClick,\n    relation = '',\n    repeatable = false,\n    secondLoopComponentUid = null,\n    target = null,\n    targetUid = null,\n    type,\n  }: ListRowProps) => {\n    const { contentTypes, isInDevelopmentMode, removeAttribute } = useDataManager();\n    const { formatMessage } = useIntl();\n\n    const isMorph = type === 'relation' && relation.includes('morph');\n    const ico = ['integer', 'biginteger', 'float', 'decimal'].includes(type) ? 'number' : type;\n\n    const contentType = get(contentTypes, [target as keyof typeof contentTypes], {});\n    const contentTypeFriendlyName = get(contentType, ['schema', 'displayName'], '');\n    const isPluginContentType = get(contentType, 'plugin');\n\n    const src = target ? 'relation' : ico;\n\n    const handleClick = () => {\n      if (isMorph) {\n        return;\n      }\n\n      if (configurable !== false) {\n        const attrType = type;\n\n        onClick(\n          // Tells where the attribute is located in the main modifiedData object : contentType, component or components\n          editTarget,\n          // main data type uid\n          secondLoopComponentUid || firstLoopComponentUid || targetUid,\n          // Name of the attribute\n          name,\n          // Type of the attribute\n          attrType,\n          customField\n        );\n      }\n    };\n    let loopNumber;\n\n    if (secondLoopComponentUid && firstLoopComponentUid) {\n      loopNumber = 2;\n    } else if (firstLoopComponentUid) {\n      loopNumber = 1;\n    } else {\n      loopNumber = 0;\n    }\n\n    return (\n      <BoxWrapper\n        tag=\"tr\"\n        onClick={isInDevelopmentMode && configurable && !isMorph ? handleClick : undefined}\n      >\n        <td style={{ position: 'relative' }}>\n          {loopNumber !== 0 && <Curve color={isFromDynamicZone ? 'primary200' : 'neutral150'} />}\n          <Flex paddingLeft={2} gap={4}>\n            <AttributeIcon type={src} customField={customField} />\n            <Typography textColor=\"neutral800\" fontWeight=\"bold\">\n              {name}\n            </Typography>\n          </Flex>\n        </td>\n        <td>\n          {target ? (\n            <Typography textColor=\"neutral800\">\n              {formatMessage({\n                id: getTrad(\n                  `modelPage.attribute.${isMorph ? 'relation-polymorphic' : 'relationWith'}`\n                ),\n                defaultMessage: 'Relation with',\n              })}\n              &nbsp;\n              <span style={{ fontStyle: 'italic' }}>\n                <UpperFirst content={contentTypeFriendlyName} />\n                &nbsp;\n                {isPluginContentType &&\n                  `(${formatMessage({\n                    id: getTrad(`from`),\n                    defaultMessage: 'from',\n                  })}: ${isPluginContentType})`}\n              </span>\n            </Typography>\n          ) : (\n            <DisplayedType type={type} customField={customField} repeatable={repeatable} />\n          )}\n        </td>\n        <td>\n          {isInDevelopmentMode ? (\n            <Flex justifyContent=\"flex-end\" onClick={(e) => e.stopPropagation()}>\n              {configurable ? (\n                <Flex gap={1}>\n                  {!isMorph && (\n                    <IconButton\n                      onClick={handleClick}\n                      label={`${formatMessage({\n                        id: 'app.utils.edit',\n                        defaultMessage: 'Edit',\n                      })} ${name}`}\n                      variant=\"ghost\"\n                    >\n                      <Pencil />\n                    </IconButton>\n                  )}\n                  <IconButton\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      removeAttribute(\n                        editTarget,\n                        name,\n                        secondLoopComponentUid || firstLoopComponentUid || ''\n                      );\n                    }}\n                    label={`${formatMessage({\n                      id: 'global.delete',\n                      defaultMessage: 'Delete',\n                    })} ${name}`}\n                    variant=\"ghost\"\n                  >\n                    <Trash />\n                  </IconButton>\n                </Flex>\n              ) : (\n                <Lock />\n              )}\n            </Flex>\n          ) : (\n            /*\n            In production mode the edit icons aren't visible, therefore\n            we need to reserve the same space, otherwise the height of the\n            row might collapse, leading to bad positioned curve icons\n          */\n            <Box height=\"3.2rem\" />\n          )}\n        </td>\n      </BoxWrapper>\n    );\n  }\n);\n"],"names":["BoxWrapper","styled","Box","ListRow","memo","configurable","customField","editTarget","firstLoopComponentUid","isFromDynamicZone","name","onClick","relation","repeatable","secondLoopComponentUid","target","targetUid","type","contentTypes","isInDevelopmentMode","removeAttribute","useDataManager","formatMessage","useIntl","isMorph","includes","ico","contentType","get","contentTypeFriendlyName","isPluginContentType","src","handleClick","attrType","loopNumber","_jsxs","tag","undefined","td","style","position","_jsx","Curve","color","Flex","paddingLeft","gap","AttributeIcon","Typography","textColor","fontWeight","id","getTrad","defaultMessage","span","fontStyle","UpperFirst","content","DisplayedType","justifyContent","e","stopPropagation","IconButton","label","variant","Pencil","Trash","Lock","height"],"mappings":"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"}

package/dist/admin/components/ListRow.mjs

@@ -0,0 +1,161 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { Box, Flex, Typography, IconButton } from '@strapi/design-system';
+import { Pencil, Trash, Lock } from '@strapi/icons';
+import get from 'lodash/get';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { useDataManager } from '../hooks/useDataManager.mjs';
+import { Curve } from '../icons/Curve.mjs';
+import { getTrad } from '../utils/getTrad.mjs';
+import { AttributeIcon } from './AttributeIcon.mjs';
+import { DisplayedType } from './DisplayedType.mjs';
+import { UpperFirst } from './UpperFirst.mjs';
+
+const BoxWrapper = styled(Box)`
+  position: relative;
+`;
+const ListRow = /*#__PURE__*/ memo(({ configurable = true, customField = null, editTarget, firstLoopComponentUid = null, isFromDynamicZone = false, name, onClick, relation = '', repeatable = false, secondLoopComponentUid = null, target = null, targetUid = null, type })=>{
+    const { contentTypes, isInDevelopmentMode, removeAttribute } = useDataManager();
+    const { formatMessage } = useIntl();
+    const isMorph = type === 'relation' && relation.includes('morph');
+    const ico = [
+        'integer',
+        'biginteger',
+        'float',
+        'decimal'
+    ].includes(type) ? 'number' : type;
+    const contentType = get(contentTypes, [
+        target
+    ], {});
+    const contentTypeFriendlyName = get(contentType, [
+        'schema',
+        'displayName'
+    ], '');
+    const isPluginContentType = get(contentType, 'plugin');
+    const src = target ? 'relation' : ico;
+    const handleClick = ()=>{
+        if (isMorph) {
+            return;
+        }
+        if (configurable !== false) {
+            const attrType = type;
+            onClick(// Tells where the attribute is located in the main modifiedData object : contentType, component or components
+            editTarget, // main data type uid
+            secondLoopComponentUid || firstLoopComponentUid || targetUid, // Name of the attribute
+            name, // Type of the attribute
+            attrType, customField);
+        }
+    };
+    let loopNumber;
+    if (secondLoopComponentUid && firstLoopComponentUid) {
+        loopNumber = 2;
+    } else if (firstLoopComponentUid) {
+        loopNumber = 1;
+    } else {
+        loopNumber = 0;
+    }
+    return /*#__PURE__*/ jsxs(BoxWrapper, {
+        tag: "tr",
+        onClick: isInDevelopmentMode && configurable && !isMorph ? handleClick : undefined,
+        children: [
+            /*#__PURE__*/ jsxs("td", {
+                style: {
+                    position: 'relative'
+                },
+                children: [
+                    loopNumber !== 0 && /*#__PURE__*/ jsx(Curve, {
+                        color: isFromDynamicZone ? 'primary200' : 'neutral150'
+                    }),
+                    /*#__PURE__*/ jsxs(Flex, {
+                        paddingLeft: 2,
+                        gap: 4,
+                        children: [
+                            /*#__PURE__*/ jsx(AttributeIcon, {
+                                type: src,
+                                customField: customField
+                            }),
+                            /*#__PURE__*/ jsx(Typography, {
+                                textColor: "neutral800",
+                                fontWeight: "bold",
+                                children: name
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("td", {
+                children: target ? /*#__PURE__*/ jsxs(Typography, {
+                    textColor: "neutral800",
+                    children: [
+                        formatMessage({
+                            id: getTrad(`modelPage.attribute.${isMorph ? 'relation-polymorphic' : 'relationWith'}`),
+                            defaultMessage: 'Relation with'
+                        }),
+                        " ",
+                        /*#__PURE__*/ jsxs("span", {
+                            style: {
+                                fontStyle: 'italic'
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx(UpperFirst, {
+                                    content: contentTypeFriendlyName
+                                }),
+                                " ",
+                                isPluginContentType && `(${formatMessage({
+                                    id: getTrad(`from`),
+                                    defaultMessage: 'from'
+                                })}: ${isPluginContentType})`
+                            ]
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsx(DisplayedType, {
+                    type: type,
+                    customField: customField,
+                    repeatable: repeatable
+                })
+            }),
+            /*#__PURE__*/ jsx("td", {
+                children: isInDevelopmentMode ? /*#__PURE__*/ jsx(Flex, {
+                    justifyContent: "flex-end",
+                    onClick: (e)=>e.stopPropagation(),
+                    children: configurable ? /*#__PURE__*/ jsxs(Flex, {
+                        gap: 1,
+                        children: [
+                            !isMorph && /*#__PURE__*/ jsx(IconButton, {
+                                onClick: handleClick,
+                                label: `${formatMessage({
+                                    id: 'app.utils.edit',
+                                    defaultMessage: 'Edit'
+                                })} ${name}`,
+                                variant: "ghost",
+                                children: /*#__PURE__*/ jsx(Pencil, {})
+                            }),
+                            /*#__PURE__*/ jsx(IconButton, {
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    removeAttribute(editTarget, name, secondLoopComponentUid || firstLoopComponentUid || '');
+                                },
+                                label: `${formatMessage({
+                                    id: 'global.delete',
+                                    defaultMessage: 'Delete'
+                                })} ${name}`,
+                                variant: "ghost",
+                                children: /*#__PURE__*/ jsx(Trash, {})
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx(Lock, {})
+                }) : /*
+            In production mode the edit icons aren't visible, therefore
+            we need to reserve the same space, otherwise the height of the
+            row might collapse, leading to bad positioned curve icons
+          */ /*#__PURE__*/ jsx(Box, {
+                    height: "3.2rem"
+                })
+            })
+        ]
+    });
+});
+
+export { BoxWrapper, ListRow };
+//# sourceMappingURL=ListRow.mjs.map