@strapi/content-type-builder 5.8.1 → 5.10.0

package/dist/admin/chunks/ListView-CDnrvVrV.mjs

@@ -0,0 +1,1184 @@
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useTracking, useRBAC, Layouts, BackButton } from '@strapi/admin/strapi-admin';
+import { Box, Flex, Typography, Table, Thead, Tr as Tr$1, Th, Tbody, Td, EmptyStateLayout, Button, TFooter, IconButton } from '@strapi/design-system';
+import { Cross, Plus, Pencil, Trash, Lock, ListPlus, Check } from '@strapi/icons';
+import get from 'lodash/get';
+import has from 'lodash/has';
+import isEqual from 'lodash/isEqual';
+import upperFirst from 'lodash/upperFirst';
+import { useIntl } from 'react-intl';
+import { useNavigate, useMatch, unstable_usePrompt } from 'react-router-dom';
+import { styled } from 'styled-components';
+import { useState, createElement, Fragment, memo } from 'react';
+import { EmptyDocuments } from '@strapi/icons/symbols';
+import { u as useDataManager, C as COMPONENT_ICONS, g as getTrad, a as useFormModalNavigation, A as AttributeIcon } from './index-Cr5tfW7U.mjs';
+import './index-BhX2euW0.mjs';
+import '@reduxjs/toolkit';
+import 'immer';
+import 'lodash/set';
+import 'lodash/snakeCase';
+import 'pluralize';
+import '@sindresorhus/slugify';
+import 'lodash/cloneDeep';
+import 'yup';
+import 'react-dom';
+import 'lodash/groupBy';
+import 'lodash/size';
+import 'react-redux';
+import 'lodash/toLower';
+import 'qs';
+import 'date-fns/formatISO';
+import 'lodash/truncate';
+import 'lodash/uniq';
+import 'lodash/fp';
+import 'lodash/toNumber';
+import 'lodash/camelCase';
+import 'lodash/omit';
+import 'lodash/sortBy';
+
+const BoxWrapper$1 = styled(Box)`
+  table {
+    width: 100%;
+    white-space: nowrap;
+  }
+
+  thead {
+    border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
+
+    tr {
+      border-top: 0;
+    }
+  }
+
+  tr {
+    border-top: 1px solid ${({ theme })=>theme.colors.neutral150};
+
+    & td,
+    & th {
+      padding: ${({ theme })=>theme.spaces[4]};
+    }
+
+    & td:first-of-type,
+    & th:first-of-type {
+      padding: 0 ${({ theme })=>theme.spaces[1]};
+    }
+  }
+
+  th,
+  td {
+    vertical-align: middle;
+    text-align: left;
+    color: ${({ theme })=>theme.colors.neutral600};
+    outline-offset: -4px;
+  }
+`;
+
+// Keep component-row for css specificity
+const Tr = styled.tr`
+  &.component-row,
+  &.dynamiczone-row {
+    position: relative;
+    border-top: none !important;
+
+    table tr:first-child {
+      border-top: none;
+    }
+
+    > td:first-of-type {
+      padding: 0 0 0 2rem;
+      position: relative;
+
+      &::before {
+        content: '';
+        width: 0.4rem;
+        height: calc(100% - 40px);
+        position: absolute;
+        top: -7px;
+        left: 2.6rem;
+        border-radius: 4px;
+
+        ${({ $isFromDynamicZone, $isChildOfDynamicZone, theme })=>{
+    if ($isChildOfDynamicZone) {
+        return `background-color: ${theme.colors.primary200};`;
+    }
+    if ($isFromDynamicZone) {
+        return `background-color: ${theme.colors.primary200};`;
+    }
+    return `background: ${theme.colors.neutral150};`;
+}}
+      }
+    }
+  }
+
+  &.dynamiczone-row > td:first-of-type {
+    padding: 0;
+  }
+`;
+
+const ComponentList = ({ customRowComponent, component, isFromDynamicZone = false, isNestedInDZComponent = false, firstLoopComponentUid })=>{
+    const { modifiedData } = useDataManager();
+    const { schema: { attributes } } = get(modifiedData, [
+        'components',
+        component
+    ], {
+        schema: {
+            attributes: []
+        }
+    });
+    return /*#__PURE__*/ jsx(Tr, {
+        $isChildOfDynamicZone: isFromDynamicZone,
+        className: "component-row",
+        children: /*#__PURE__*/ jsx("td", {
+            colSpan: 12,
+            children: /*#__PURE__*/ jsx(List, {
+                customRowComponent: customRowComponent,
+                items: attributes,
+                targetUid: component,
+                firstLoopComponentUid: firstLoopComponentUid || component,
+                editTarget: "components",
+                isFromDynamicZone: isFromDynamicZone,
+                isNestedInDZComponent: isNestedInDZComponent,
+                isSub: true,
+                secondLoopComponentUid: firstLoopComponentUid ? component : null
+            })
+        })
+    });
+};
+
+const ComponentIcon = ({ isActive = false, icon = 'dashboard' })=>{
+    const Icon = COMPONENT_ICONS[icon] || COMPONENT_ICONS.dashboard;
+    return /*#__PURE__*/ jsx(Flex, {
+        alignItems: "center",
+        background: isActive ? 'primary200' : 'neutral200',
+        justifyContent: "center",
+        height: 8,
+        width: 8,
+        borderRadius: "50%",
+        children: /*#__PURE__*/ jsx(Icon, {
+            height: "2rem",
+            width: "2rem"
+        })
+    });
+};
+
+const CloseButton = styled(Box)`
+  position: absolute;
+  display: none;
+  top: 5px;
+  right: 0.8rem;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+
+    path {
+      fill: ${({ theme })=>theme.colors.primary600};
+    }
+  }
+`;
+const ComponentBox = styled(Flex)`
+  width: 14rem;
+  height: 8rem;
+  position: relative;
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  background: ${({ theme })=>theme.colors.neutral100};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  max-width: 100%;
+
+  &.active,
+  &:focus,
+  &:hover {
+    border: 1px solid ${({ theme })=>theme.colors.primary200};
+    background: ${({ theme })=>theme.colors.primary100};
+    color: ${({ theme })=>theme.colors.primary600};
+
+    ${CloseButton} {
+      display: block;
+    }
+
+    /* > ComponentIcon */
+    > div:first-child {
+      background: ${({ theme })=>theme.colors.primary200};
+      color: ${({ theme })=>theme.colors.primary600};
+
+      svg {
+        path {
+          fill: ${({ theme })=>theme.colors.primary600};
+        }
+      }
+    }
+  }
+`;
+const ComponentCard = ({ component, dzName, index, isActive = false, isInDevelopmentMode = false, onClick })=>{
+    const { modifiedData, removeComponentFromDynamicZone } = useDataManager();
+    const { schema: { icon, displayName } } = get(modifiedData, [
+        'components',
+        component
+    ], {
+        schema: {}
+    });
+    const onClose = (e)=>{
+        e.stopPropagation();
+        removeComponentFromDynamicZone(dzName, index);
+    };
+    return /*#__PURE__*/ jsxs(ComponentBox, {
+        alignItems: "center",
+        direction: "column",
+        className: isActive ? 'active' : '',
+        borderRadius: "borderRadius",
+        justifyContent: "center",
+        paddingLeft: 4,
+        paddingRight: 4,
+        shrink: 0,
+        onClick: onClick,
+        role: "tab",
+        tabIndex: isActive ? 0 : -1,
+        cursor: "pointer",
+        "aria-selected": isActive,
+        "aria-controls": `dz-${dzName}-panel-${index}`,
+        id: `dz-${dzName}-tab-${index}`,
+        children: [
+            /*#__PURE__*/ jsx(ComponentIcon, {
+                icon: icon,
+                isActive: isActive
+            }),
+            /*#__PURE__*/ jsx(Box, {
+                marginTop: 1,
+                maxWidth: "100%",
+                children: /*#__PURE__*/ jsx(Typography, {
+                    variant: "pi",
+                    fontWeight: "bold",
+                    ellipsis: true,
+                    children: displayName
+                })
+            }),
+            isInDevelopmentMode && /*#__PURE__*/ jsx(CloseButton, {
+                tag: "button",
+                onClick: onClose,
+                children: /*#__PURE__*/ jsx(Cross, {})
+            })
+        ]
+    });
+};
+
+const StyledAddIcon = styled(Plus)`
+  width: 3.2rem;
+  height: 3.2rem;
+  padding: 0.9rem;
+  border-radius: 6.4rem;
+  background: ${({ theme })=>theme.colors.primary100};
+  path {
+    fill: ${({ theme })=>theme.colors.primary600};
+  }
+`;
+const FixedBox = styled(Box)`
+  height: 9rem;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+`;
+const ScrollableStack = styled(Flex)`
+  width: 100%;
+  overflow-x: auto;
+`;
+const ComponentContentBox = styled(Box)`
+  padding-top: 9rem;
+`;
+const ComponentStack = styled(Flex)`
+  flex-shrink: 0;
+  width: 14rem;
+  height: 8rem;
+  justify-content: center;
+  align-items: center;
+`;
+const DynamicZoneList = ({ customRowComponent, components = [], addComponent, name, targetUid })=>{
+    const { isInDevelopmentMode } = useDataManager();
+    const [activeTab, setActiveTab] = useState(0);
+    const { formatMessage } = useIntl();
+    const toggle = (tab)=>{
+        if (activeTab !== tab) {
+            setActiveTab(tab);
+        }
+    };
+    const handleClickAdd = ()=>{
+        addComponent(name);
+    };
+    return /*#__PURE__*/ jsx(Tr, {
+        className: "dynamiczone-row",
+        $isFromDynamicZone: true,
+        children: /*#__PURE__*/ jsxs("td", {
+            colSpan: 12,
+            children: [
+                /*#__PURE__*/ jsx(FixedBox, {
+                    paddingLeft: 8,
+                    children: /*#__PURE__*/ jsxs(ScrollableStack, {
+                        gap: 2,
+                        children: [
+                            isInDevelopmentMode && /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: handleClickAdd,
+                                children: /*#__PURE__*/ jsxs(ComponentStack, {
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    gap: 1,
+                                    children: [
+                                        /*#__PURE__*/ jsx(StyledAddIcon, {}),
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            variant: "pi",
+                                            fontWeight: "bold",
+                                            textColor: "primary600",
+                                            children: formatMessage({
+                                                id: getTrad('button.component.add'),
+                                                defaultMessage: 'Add a component'
+                                            })
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Flex, {
+                                role: "tablist",
+                                gap: 2,
+                                children: components.map((component, index)=>{
+                                    return /*#__PURE__*/ jsx(ComponentCard, {
+                                        dzName: name || '',
+                                        index: index,
+                                        component: component,
+                                        isActive: activeTab === index,
+                                        isInDevelopmentMode: isInDevelopmentMode,
+                                        onClick: ()=>toggle(index)
+                                    }, component);
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(ComponentContentBox, {
+                    children: components.map((component, index)=>{
+                        const props = {
+                            customRowComponent,
+                            component
+                        };
+                        return /*#__PURE__*/ jsx(Box, {
+                            id: `dz-${name}-panel-${index}`,
+                            role: "tabpanel",
+                            "aria-labelledby": `dz-${name}-tab-${index}`,
+                            style: {
+                                display: activeTab === index ? 'block' : 'none'
+                            },
+                            children: /*#__PURE__*/ jsx("table", {
+                                children: /*#__PURE__*/ jsx("tbody", {
+                                    children: /*#__PURE__*/ createElement(ComponentList, {
+                                        ...props,
+                                        isFromDynamicZone: true,
+                                        component: targetUid,
+                                        key: component
+                                    })
+                                })
+                            })
+                        }, component);
+                    })
+                })
+            ]
+        })
+    });
+};
+
+const IconBox = styled(Box)`
+  height: 2.4rem;
+  width: 2.4rem;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  svg path {
+    fill: ${({ theme, color })=>theme.colors[`${color}600`]};
+  }
+`;
+const ButtonBox = styled(Box)`
+  border-radius: 0 0 ${({ theme })=>theme.borderRadius} ${({ theme })=>theme.borderRadius};
+  display: block;
+  width: 100%;
+  border: none;
+  position: relative;
+  left: -0.4rem;
+`;
+const NestedTFooter = ({ children, icon, color, ...props })=>{
+    return /*#__PURE__*/ jsx(ButtonBox, {
+        paddingBottom: 4,
+        paddingTop: 4,
+        tag: "button",
+        type: "button",
+        ...props,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            children: [
+                /*#__PURE__*/ jsx(IconBox, {
+                    color: color,
+                    "aria-hidden": true,
+                    background: `${color}200`,
+                    children: icon
+                }),
+                /*#__PURE__*/ jsx(Box, {
+                    paddingLeft: 3,
+                    children: /*#__PURE__*/ jsx(Typography, {
+                        variant: "pi",
+                        fontWeight: "bold",
+                        textColor: `${color}600`,
+                        children: children
+                    })
+                })
+            ]
+        })
+    });
+};
+
+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$1, {
+                        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$1, {
+                        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$1, {
+                        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$1, {
+                        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$1, {
+        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'
+                })
+            })
+        ]
+    });
+};
+
+const StyledBox = styled(Box)`
+  position: absolute;
+  left: -1.8rem;
+  top: 0px;
+
+  &:before {
+    content: '';
+    width: 0.4rem;
+    height: 1.2rem;
+    background: ${({ theme, color })=>theme.colors[color]};
+    display: block;
+  }
+`;
+const Svg = styled.svg`
+  position: relative;
+  flex-shrink: 0;
+  transform: translate(-0.5px, -1px);
+
+  * {
+    fill: ${({ theme, color })=>theme.colors[color]};
+  }
+`;
+const Curve = (props)=>/*#__PURE__*/ jsx(StyledBox, {
+        children: /*#__PURE__*/ jsx(Svg, {
+            width: "20",
+            height: "23",
+            viewBox: "0 0 20 23",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            ...props,
+            children: /*#__PURE__*/ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M7.02477 14.7513C8.65865 17.0594 11.6046 18.6059 17.5596 18.8856C18.6836 18.9384 19.5976 19.8435 19.5976 20.9688V20.9688C19.5976 22.0941 18.6841 23.0125 17.5599 22.9643C10.9409 22.6805 6.454 20.9387 3.75496 17.1258C0.937988 13.1464 0.486328 7.39309 0.486328 0.593262H4.50974C4.50974 7.54693 5.06394 11.9813 7.02477 14.7513Z"
+            })
+        })
+    });
+
+const DisplayedType = ({ type, customField = null, repeatable = false })=>{
+    const { formatMessage } = useIntl();
+    let readableType = type;
+    if ([
+        'integer',
+        'biginteger',
+        'float',
+        'decimal'
+    ].includes(type)) {
+        readableType = 'number';
+    } else if ([
+        'string'
+    ].includes(type)) {
+        readableType = 'text';
+    }
+    if (customField) {
+        return /*#__PURE__*/ jsx(Typography, {
+            children: formatMessage({
+                id: getTrad('attribute.customField'),
+                defaultMessage: 'Custom field'
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxs(Typography, {
+        textColor: "neutral800",
+        children: [
+            formatMessage({
+                id: getTrad(`attribute.${readableType}`),
+                defaultMessage: type
+            }),
+            " ",
+            repeatable && formatMessage({
+                id: getTrad('component.repeatable'),
+                defaultMessage: '(repeatable)'
+            })
+        ]
+    });
+};
+
+const UpperFirst = ({ content })=>/*#__PURE__*/ jsx(Fragment$1, {
+        children: upperFirst(content)
+    });
+
+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"
+                })
+            })
+        ]
+    });
+});
+
+const getAttributeDisplayedType = (type)=>{
+    let displayedType;
+    switch(type){
+        case 'date':
+        case 'datetime':
+        case 'time':
+        case 'timestamp':
+            displayedType = 'date';
+            break;
+        case 'integer':
+        case 'biginteger':
+        case 'decimal':
+        case 'float':
+            displayedType = 'number';
+            break;
+        case 'string':
+        case 'text':
+            displayedType = 'text';
+            break;
+        case '':
+            displayedType = 'relation';
+            break;
+        default:
+            displayedType = type;
+    }
+    return displayedType;
+};
+
+const cmPermissions = {
+    collectionTypesConfigurations: [
+        {
+            action: 'plugin::content-manager.collection-types.configure-view',
+            subject: null
+        }
+    ],
+    componentsConfigurations: [
+        {
+            action: 'plugin::content-manager.components.configure-layout',
+            subject: null
+        }
+    ],
+    singleTypesConfigurations: [
+        {
+            action: 'plugin::content-manager.single-types.configure-view',
+            subject: null
+        }
+    ]
+};
+const getPermission = ({ isInContentTypeView, contentTypeKind })=>{
+    if (isInContentTypeView) {
+        if (contentTypeKind === 'singleType') {
+            return cmPermissions.singleTypesConfigurations;
+        }
+        return cmPermissions.collectionTypesConfigurations;
+    }
+    return cmPermissions.componentsConfigurations;
+};
+const LinkToCMSettingsView = /*#__PURE__*/ memo(({ disabled, isInContentTypeView = true, contentTypeKind = 'collectionType', targetUid = '' })=>{
+    const { formatMessage } = useIntl();
+    const navigate = useNavigate();
+    const permissionsToApply = getPermission({
+        isInContentTypeView,
+        contentTypeKind
+    });
+    const label = formatMessage({
+        id: 'content-type-builder.form.button.configure-view',
+        defaultMessage: 'Configure the view'
+    });
+    const handleClick = ()=>{
+        if (disabled) {
+            return false;
+        }
+        if (isInContentTypeView) {
+            navigate(`/content-manager/collection-types/${targetUid}/configurations/edit`);
+        } else {
+            navigate(`/content-manager/components/${targetUid}/configurations/edit`);
+        }
+        return false;
+    };
+    const { isLoading, allowedActions } = useRBAC({
+        viewConfig: permissionsToApply
+    });
+    if (isLoading) {
+        return null;
+    }
+    if (!allowedActions.canConfigureView && !allowedActions.canConfigureLayout) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(Button, {
+        startIcon: /*#__PURE__*/ jsx(ListPlus, {}),
+        variant: "tertiary",
+        onClick: handleClick,
+        disabled: disabled,
+        children: label
+    });
+});
+
+const LayoutsHeaderCustom = styled(Layouts.Header)`
+  overflow-wrap: anywhere;
+`;
+const ListView = ()=>{
+    const { initialData, modifiedData, isInDevelopmentMode, isInContentTypeView, submitData } = useDataManager();
+    const { formatMessage } = useIntl();
+    const { trackUsage } = useTracking();
+    const match = useMatch('/plugins/content-type-builder/:kind/:currentUID');
+    const { onOpenModalAddComponentsToDZ, onOpenModalAddField, onOpenModalEditField, onOpenModalEditSchema, onOpenModalEditCustomField } = useFormModalNavigation();
+    const firstMainDataPath = isInContentTypeView ? 'contentType' : 'component';
+    const mainDataTypeAttributesPath = [
+        firstMainDataPath,
+        'schema',
+        'attributes'
+    ];
+    const targetUid = get(modifiedData, [
+        firstMainDataPath,
+        'uid'
+    ]);
+    const isTemporary = get(modifiedData, [
+        firstMainDataPath,
+        'isTemporary'
+    ], false);
+    const contentTypeKind = get(modifiedData, [
+        firstMainDataPath,
+        'schema',
+        'kind'
+    ], null);
+    const attributes = get(modifiedData, mainDataTypeAttributesPath, []);
+    const isFromPlugin = has(initialData, [
+        firstMainDataPath,
+        'plugin'
+    ]);
+    const hasModelBeenModified = !isEqual(modifiedData, initialData);
+    const forTarget = isInContentTypeView ? 'contentType' : 'component';
+    const handleClickAddComponentToDZ = (dynamicZoneTarget)=>{
+        onOpenModalAddComponentsToDZ({
+            dynamicZoneTarget,
+            targetUid
+        });
+    };
+    const handleClickEditField = async (forTarget, targetUid, attributeName, type, customField)=>{
+        const attributeType = getAttributeDisplayedType(type);
+        const step = type === 'component' ? '2' : null;
+        if (customField) {
+            onOpenModalEditCustomField({
+                forTarget,
+                targetUid,
+                attributeName,
+                attributeType,
+                customFieldUid: customField
+            });
+        } else {
+            onOpenModalEditField({
+                forTarget,
+                targetUid,
+                attributeName,
+                attributeType,
+                step
+            });
+        }
+    };
+    let label = get(modifiedData, [
+        firstMainDataPath,
+        'schema',
+        'displayName'
+    ], '');
+    const kind = get(modifiedData, [
+        firstMainDataPath,
+        'schema',
+        'kind'
+    ], '');
+    const isCreatingFirstContentType = match?.params.currentUID === 'create-content-type';
+    if (!label && isCreatingFirstContentType) {
+        label = formatMessage({
+            id: getTrad('button.model.create'),
+            defaultMessage: 'Create new collection type'
+        });
+    }
+    const onEdit = ()=>{
+        const contentType = kind || firstMainDataPath;
+        if (contentType === 'collectionType') {
+            trackUsage('willEditNameOfContentType');
+        }
+        if (contentType === 'singleType') {
+            trackUsage('willEditNameOfSingleType');
+        }
+        onOpenModalEditSchema({
+            modalType: firstMainDataPath,
+            forTarget: firstMainDataPath,
+            targetUid,
+            kind: contentType
+        });
+    };
+    unstable_usePrompt({
+        when: hasModelBeenModified,
+        message: formatMessage({
+            id: getTrad('prompt.unsaved'),
+            defaultMessage: 'Are you sure?'
+        })
+    });
+    const primaryAction = isInDevelopmentMode && /*#__PURE__*/ jsxs(Flex, {
+        gap: 2,
+        marginLeft: 2,
+        children: [
+            !isCreatingFirstContentType && /*#__PURE__*/ jsx(Button, {
+                startIcon: /*#__PURE__*/ jsx(Plus, {}),
+                variant: "secondary",
+                minWidth: "max-content",
+                onClick: ()=>{
+                    onOpenModalAddField({
+                        forTarget,
+                        targetUid
+                    });
+                },
+                children: formatMessage({
+                    id: getTrad('button.attributes.add.another'),
+                    defaultMessage: 'Add another field'
+                })
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                startIcon: /*#__PURE__*/ jsx(Check, {}),
+                onClick: async ()=>await submitData(),
+                type: "submit",
+                disabled: isEqual(modifiedData, initialData),
+                children: formatMessage({
+                    id: 'global.save',
+                    defaultMessage: 'Save'
+                })
+            })
+        ]
+    });
+    const secondaryAction = isInDevelopmentMode && !isFromPlugin && !isCreatingFirstContentType && /*#__PURE__*/ jsx(Button, {
+        startIcon: /*#__PURE__*/ jsx(Pencil, {}),
+        variant: "tertiary",
+        onClick: onEdit,
+        children: formatMessage({
+            id: 'app.utils.edit',
+            defaultMessage: 'Edit'
+        })
+    });
+    return /*#__PURE__*/ jsxs(Fragment$1, {
+        children: [
+            /*#__PURE__*/ jsx(LayoutsHeaderCustom, {
+                id: "title",
+                primaryAction: primaryAction,
+                secondaryAction: secondaryAction,
+                title: upperFirst(label),
+                subtitle: formatMessage({
+                    id: getTrad('listView.headerLayout.description'),
+                    defaultMessage: 'Build the data architecture of your content'
+                }),
+                navigationAction: /*#__PURE__*/ jsx(BackButton, {})
+            }),
+            /*#__PURE__*/ jsx(Layouts.Content, {
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    direction: "column",
+                    alignItems: "stretch",
+                    gap: 4,
+                    children: [
+                        /*#__PURE__*/ jsx(Flex, {
+                            justifyContent: "flex-end",
+                            children: /*#__PURE__*/ jsx(Flex, {
+                                gap: 2,
+                                children: /*#__PURE__*/ jsx(LinkToCMSettingsView, {
+                                    targetUid: targetUid,
+                                    isInContentTypeView: isInContentTypeView,
+                                    contentTypeKind: contentTypeKind,
+                                    disabled: isCreatingFirstContentType || isTemporary
+                                }, "link-to-cm-settings-view")
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Box, {
+                            background: "neutral0",
+                            shadow: "filterShadow",
+                            hasRadius: true,
+                            children: /*#__PURE__*/ jsx(List, {
+                                items: attributes,
+                                customRowComponent: (props)=>/*#__PURE__*/ jsx(ListRow, {
+                                        ...props,
+                                        onClick: handleClickEditField
+                                    }),
+                                addComponentToDZ: handleClickAddComponentToDZ,
+                                targetUid: targetUid,
+                                editTarget: forTarget,
+                                isMain: true
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+export { ListView as default };
+//# sourceMappingURL=ListView-CDnrvVrV.mjs.map