@strapi/content-manager 0.0.0-next.d65d44102fd32871728c0d74ec4f2519b7cc0a16 → 0.0.0-next.d6c661f8ab4a198d3e4c6a387b9b8f267a100766

package/dist/admin/pages/EditView/components/FormLayout.mjs

@@ -0,0 +1,127 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { useForm, createRulesEngine } from '@strapi/admin/strapi-admin';
+import { Grid, Flex, Box } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { InputRenderer as MemoizedInputRenderer } from './InputRenderer.mjs';
+
+const ResponsiveGridRoot = styled(Grid.Root)`
+  container-type: inline-size;
+`;
+const ResponsiveGridItem = /**
+   * TODO:
+   * JSDOM cannot handle container queries.
+   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error
+   * for failing to parse the stylesheet.
+   */ process.env.NODE_ENV !== 'test' ? styled(Grid.Item)`
+        grid-column: span 12;
+        ${({ theme })=>theme.breakpoints.medium} {
+          ${({ col })=>col && `grid-column: span ${col};`}
+        }
+      ` : styled(Grid.Item)`
+        grid-column: span 12;
+      `;
+const panelStyles = {
+    padding: {
+        initial: 4,
+        medium: 6
+    },
+    borderColor: 'neutral150',
+    background: 'neutral0',
+    hasRadius: true,
+    shadow: 'tableShadow'
+};
+const FormLayout = ({ layout, document, hasBackground = true })=>{
+    const { formatMessage } = useIntl();
+    const modelUid = document.schema?.uid;
+    const fieldValues = useForm('Fields', (state)=>state.values);
+    const rulesEngine = createRulesEngine();
+    const getLabel = (name, label)=>{
+        return formatMessage({
+            id: `content-manager.content-types.${modelUid}.${name}`,
+            defaultMessage: label
+        });
+    };
+    return /*#__PURE__*/ jsx(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: {
+            initial: 4,
+            large: 6
+        },
+        children: layout.map((panel, index)=>{
+            if (panel.some((row)=>row.some((field)=>field.type === 'dynamiczone'))) {
+                const [row] = panel;
+                const [field] = row;
+                const attribute = document.schema?.attributes[field.name];
+                const condition = attribute?.conditions?.visible;
+                if (condition) {
+                    const isVisible = rulesEngine.evaluate(condition, fieldValues);
+                    if (!isVisible) {
+                        return null; // Skip rendering the dynamic zone if the condition is not met
+                    }
+                }
+                return /*#__PURE__*/ jsx(Grid.Root, {
+                    gap: 4,
+                    children: /*#__PURE__*/ jsx(Grid.Item, {
+                        col: 12,
+                        s: 12,
+                        xs: 12,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
+                            ...field,
+                            label: getLabel(field.name, field.label),
+                            document: document
+                        })
+                    })
+                }, field.name);
+            }
+            return /*#__PURE__*/ jsx(Box, {
+                ...hasBackground && panelStyles,
+                children: /*#__PURE__*/ jsx(Flex, {
+                    direction: "column",
+                    alignItems: "stretch",
+                    gap: {
+                        initial: 4,
+                        large: 6
+                    },
+                    children: panel.map((row, gridRowIndex)=>{
+                        const visibleFields = row.filter(({ name })=>{
+                            const attribute = document.schema?.attributes[name];
+                            const condition = attribute?.conditions?.visible;
+                            if (condition) {
+                                return rulesEngine.evaluate(condition, fieldValues);
+                            }
+                            return true;
+                        });
+                        if (visibleFields.length === 0) {
+                            return null; // Skip rendering the entire grid row
+                        }
+                        return /*#__PURE__*/ jsx(ResponsiveGridRoot, {
+                            gap: 4,
+                            children: visibleFields.map(({ size, ...field })=>{
+                                return /*#__PURE__*/ jsx(ResponsiveGridItem, {
+                                    col: size,
+                                    s: 12,
+                                    xs: 12,
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
+                                        ...field,
+                                        label: getLabel(field.name, field.label),
+                                        document: document
+                                    })
+                                }, field.name);
+                            })
+                        }, gridRowIndex);
+                    })
+                })
+            }, index);
+        })
+    });
+};
+
+export { FormLayout, ResponsiveGridItem, ResponsiveGridRoot };
+//# sourceMappingURL=FormLayout.mjs.map

package/dist/admin/pages/EditView/components/FormLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.mjs","sources":["../../../../../admin/src/pages/EditView/components/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, createRulesEngine } from '@strapi/admin/strapi-admin';\nimport { Box, BoxProps, Flex, Grid } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { EditLayout } from '../../../hooks/useDocumentLayout';\n\nimport { InputRenderer } from './InputRenderer';\n\nimport type { UseDocument } from '../../../hooks/useDocument';\n\nexport const ResponsiveGridRoot = styled(Grid.Root)`\n  container-type: inline-size;\n`;\n\nexport const ResponsiveGridItem =\n  /**\n   * TODO:\n   * JSDOM cannot handle container queries.\n   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n   * for failing to parse the stylesheet.\n   */\n  process.env.NODE_ENV !== 'test'\n    ? styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n        ${({ theme }) => theme.breakpoints.medium} {\n          ${({ col }) => col && `grid-column: span ${col};`}\n        }\n      `\n    : styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n      `;\n\nconst panelStyles = {\n  padding: {\n    initial: 4,\n    medium: 6,\n  },\n  borderColor: 'neutral150',\n  background: 'neutral0',\n  hasRadius: true,\n  shadow: 'tableShadow',\n} satisfies BoxProps;\n\ninterface FormLayoutProps extends Pick<EditLayout, 'layout'> {\n  hasBackground?: boolean;\n  document: ReturnType<UseDocument>;\n}\n\nconst FormLayout = ({ layout, document, hasBackground = true }: FormLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const modelUid = document.schema?.uid;\n  const fieldValues = useForm('Fields', (state) => state.values);\n  const rulesEngine = createRulesEngine();\n\n  const getLabel = (name: string, label: string) => {\n    return formatMessage({\n      id: `content-manager.content-types.${modelUid}.${name}`,\n      defaultMessage: label,\n    });\n  };\n\n  return (\n    <Flex\n      direction=\"column\"\n      alignItems=\"stretch\"\n      gap={{\n        initial: 4,\n        large: 6,\n      }}\n    >\n      {layout.map((panel, index) => {\n        if (panel.some((row) => row.some((field) => field.type === 'dynamiczone'))) {\n          const [row] = panel;\n          const [field] = row;\n          const attribute = document.schema?.attributes[field.name];\n          const condition = attribute?.conditions?.visible;\n\n          if (condition) {\n            const isVisible = rulesEngine.evaluate(condition, fieldValues);\n            if (!isVisible) {\n              return null; // Skip rendering the dynamic zone if the condition is not met\n            }\n          }\n\n          return (\n            <Grid.Root key={field.name} gap={4}>\n              <Grid.Item col={12} s={12} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <InputRenderer\n                  {...field}\n                  label={getLabel(field.name, field.label)}\n                  document={document}\n                />\n              </Grid.Item>\n            </Grid.Root>\n          );\n        }\n\n        return (\n          <Box key={index} {...(hasBackground && panelStyles)}>\n            <Flex\n              direction=\"column\"\n              alignItems=\"stretch\"\n              gap={{\n                initial: 4,\n                large: 6,\n              }}\n            >\n              {panel.map((row, gridRowIndex) => {\n                const visibleFields = row.filter(({ name }) => {\n                  const attribute = document.schema?.attributes[name];\n                  const condition = attribute?.conditions?.visible;\n\n                  if (condition) {\n                    return rulesEngine.evaluate(condition, fieldValues);\n                  }\n\n                  return true;\n                });\n\n                if (visibleFields.length === 0) {\n                  return null; // Skip rendering the entire grid row\n                }\n\n                return (\n                  <ResponsiveGridRoot key={gridRowIndex} gap={4}>\n                    {visibleFields.map(({ size, ...field }) => {\n                      return (\n                        <ResponsiveGridItem\n                          col={size}\n                          key={field.name}\n                          s={12}\n                          xs={12}\n                          direction=\"column\"\n                          alignItems=\"stretch\"\n                        >\n                          <InputRenderer\n                            {...field}\n                            label={getLabel(field.name, field.label)}\n                            document={document}\n                          />\n                        </ResponsiveGridItem>\n                      );\n                    })}\n                  </ResponsiveGridRoot>\n                );\n              })}\n            </Flex>\n          </Box>\n        );\n      })}\n    </Flex>\n  );\n};\n\nexport { FormLayout, FormLayoutProps };\n"],"names":["ResponsiveGridRoot","styled","Grid","Root","ResponsiveGridItem","process","env","NODE_ENV","Item","theme","breakpoints","medium","col","panelStyles","padding","initial","borderColor","background","hasRadius","shadow","FormLayout","layout","document","hasBackground","formatMessage","useIntl","modelUid","schema","uid","fieldValues","useForm","state","values","rulesEngine","createRulesEngine","getLabel","name","label","id","defaultMessage","_jsx","Flex","direction","alignItems","gap","large","map","panel","index","some","row","field","type","attribute","attributes","condition","conditions","visible","isVisible","evaluate","s","xs","InputRenderer","Box","gridRowIndex","visibleFields","filter","length","size"],"mappings":"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"}

package/dist/admin/pages/EditView/components/Header.js

@@ -0,0 +1,487 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var RelativeTime = require('../../../components/RelativeTime.js');
+var attributes = require('../../../constants/attributes.js');
+var collections = require('../../../constants/collections.js');
+var DocumentRBAC = require('../../../features/DocumentRBAC.js');
+var useDocument = require('../../../hooks/useDocument.js');
+var useDocumentActions = require('../../../hooks/useDocumentActions.js');
+var router = require('../../../router.js');
+var users = require('../../../utils/users.js');
+var DocumentActions = require('./DocumentActions.js');
+var DocumentStatus = require('./DocumentStatus.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Header = ({ isCreating, status, title: documentTitle = 'Untitled' })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const isCloning = reactRouterDom.useMatch(router.CLONE_PATH) !== null;
+    const params = reactRouterDom.useParams();
+    const title = isCreating ? formatMessage({
+        id: 'content-manager.containers.edit.title.new',
+        defaultMessage: 'Create an entry'
+    }) : documentTitle;
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        alignItems: "flex-start",
+        paddingTop: {
+            initial: 4,
+            large: 6
+        },
+        paddingBottom: {
+            initial: 0,
+            large: 4
+        },
+        gap: 2,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.BackButton, {
+                fallback: params.collectionType === collections.SINGLE_TYPES ? undefined : `../${collections.COLLECTION_TYPES}/${params.slug}`
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                width: "100%",
+                justifyContent: "space-between",
+                gap: {
+                    initial: 2,
+                    medium: '8rem'
+                },
+                alignItems: "flex-start",
+                direction: {
+                    initial: 'column',
+                    medium: 'row'
+                },
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        variant: "alpha",
+                        tag: "h1",
+                        children: title
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(HeaderToolbar, {})
+                ]
+            }),
+            status ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                marginTop: 1,
+                children: /*#__PURE__*/ jsxRuntime.jsx(DocumentStatus.DocumentStatus, {
+                    status: isCloning ? 'draft' : status
+                })
+            }) : null
+        ]
+    });
+};
+/**
+ * @description Contains the document actions that have `position: header`, if there are
+ * none we still render the menu because we render the information about the document there.
+ */ const HeaderToolbar = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const isCloning = reactRouterDom.useMatch(router.CLONE_PATH) !== null;
+    const [{ query: { status = 'draft' } }] = strapiAdmin.useQueryParams();
+    const { model, id, document, meta, collectionType } = useDocument.useDoc();
+    const plugins = strapiAdmin.useStrapiApp('HeaderToolbar', (state)=>state.plugins);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        gap: 2,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.DescriptionComponentRenderer, {
+                props: {
+                    activeTab: status,
+                    model,
+                    documentId: id,
+                    document: isCloning ? undefined : document,
+                    meta: isCloning ? undefined : meta,
+                    collectionType
+                },
+                descriptions: plugins['content-manager'].apis.getHeaderActions(),
+                children: (actions)=>{
+                    if (actions.length > 0) {
+                        return /*#__PURE__*/ jsxRuntime.jsx(HeaderActions, {
+                            actions: actions
+                        });
+                    } else {
+                        return null;
+                    }
+                }
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.DescriptionComponentRenderer, {
+                props: {
+                    activeTab: status,
+                    model,
+                    documentId: id,
+                    document: isCloning ? undefined : document,
+                    meta: isCloning ? undefined : meta,
+                    collectionType
+                },
+                descriptions: plugins['content-manager'].apis.getDocumentActions('header'),
+                children: (actions)=>{
+                    const headerActions = actions.filter((action)=>{
+                        const positions = Array.isArray(action.position) ? action.position : [
+                            action.position
+                        ];
+                        return positions.includes('header');
+                    });
+                    return /*#__PURE__*/ jsxRuntime.jsx(DocumentActions.DocumentActionsMenu, {
+                        actions: headerActions,
+                        label: formatMessage({
+                            id: 'content-manager.containers.edit.header.more-actions',
+                            defaultMessage: 'More actions'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Information, {
+                            activeTab: status
+                        })
+                    });
+                }
+            })
+        ]
+    });
+};
+const Information = ({ activeTab })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { document, meta } = useDocument.useDoc();
+    if (!document || !document.id) {
+        return null;
+    }
+    /**
+   * Because in the backend separate entries are made for draft and published
+   * documents, the creator fields are different for each of them. For example,
+   * you could make your draft in January and then publish it for the first time
+   * in Feb. This would make the createdAt value for the published entry in Feb
+   * but really we want to show the document as a whole. The draft entry will also
+   * never have the publishedAt values.
+   *
+   * So, we decipher which document to show the creator for based on the activeTab.
+   */ const createAndUpdateDocument = activeTab === 'draft' ? document : meta?.availableStatus.find((status)=>status.publishedAt === null);
+    const publishDocument = activeTab === 'published' ? document : meta?.availableStatus.find((status)=>status.publishedAt !== null);
+    const creator = createAndUpdateDocument?.[attributes.CREATED_BY_ATTRIBUTE_NAME] ? users.getDisplayName(createAndUpdateDocument[attributes.CREATED_BY_ATTRIBUTE_NAME]) : null;
+    const updator = createAndUpdateDocument?.[attributes.UPDATED_BY_ATTRIBUTE_NAME] ? users.getDisplayName(createAndUpdateDocument[attributes.UPDATED_BY_ATTRIBUTE_NAME]) : null;
+    const information = [
+        {
+            isDisplayed: !!publishDocument?.[attributes.PUBLISHED_AT_ATTRIBUTE_NAME],
+            label: formatMessage({
+                id: 'content-manager.containers.edit.information.last-published.label',
+                defaultMessage: 'Published'
+            }),
+            value: formatMessage({
+                id: 'content-manager.containers.edit.information.last-published.value',
+                defaultMessage: `{time}{isAnonymous, select, true {} other { by {author}}}`
+            }, {
+                time: /*#__PURE__*/ jsxRuntime.jsx(RelativeTime.RelativeTime, {
+                    timestamp: new Date(publishDocument?.[attributes.PUBLISHED_AT_ATTRIBUTE_NAME])
+                }),
+                isAnonymous: !publishDocument?.[attributes.PUBLISHED_BY_ATTRIBUTE_NAME],
+                author: publishDocument?.[attributes.PUBLISHED_BY_ATTRIBUTE_NAME] ? users.getDisplayName(publishDocument?.[attributes.PUBLISHED_BY_ATTRIBUTE_NAME]) : null
+            })
+        },
+        {
+            isDisplayed: !!createAndUpdateDocument?.[attributes.UPDATED_AT_ATTRIBUTE_NAME],
+            label: formatMessage({
+                id: 'content-manager.containers.edit.information.last-draft.label',
+                defaultMessage: 'Updated'
+            }),
+            value: formatMessage({
+                id: 'content-manager.containers.edit.information.last-draft.value',
+                defaultMessage: `{time}{isAnonymous, select, true {} other { by {author}}}`
+            }, {
+                time: /*#__PURE__*/ jsxRuntime.jsx(RelativeTime.RelativeTime, {
+                    timestamp: new Date(createAndUpdateDocument?.[attributes.UPDATED_AT_ATTRIBUTE_NAME])
+                }),
+                isAnonymous: !updator,
+                author: updator
+            })
+        },
+        {
+            isDisplayed: !!createAndUpdateDocument?.[attributes.CREATED_AT_ATTRIBUTE_NAME],
+            label: formatMessage({
+                id: 'content-manager.containers.edit.information.document.label',
+                defaultMessage: 'Created'
+            }),
+            value: formatMessage({
+                id: 'content-manager.containers.edit.information.document.value',
+                defaultMessage: `{time}{isAnonymous, select, true {} other { by {author}}}`
+            }, {
+                time: /*#__PURE__*/ jsxRuntime.jsx(RelativeTime.RelativeTime, {
+                    timestamp: new Date(createAndUpdateDocument?.[attributes.CREATED_AT_ATTRIBUTE_NAME])
+                }),
+                isAnonymous: !creator,
+                author: creator
+            })
+        }
+    ].filter((info)=>info.isDisplayed);
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        borderWidth: "1px 0 0 0",
+        borderStyle: "solid",
+        borderColor: "neutral150",
+        direction: "column",
+        marginTop: 2,
+        tag: "dl",
+        padding: 5,
+        gap: 3,
+        alignItems: "flex-start",
+        /**
+       * The menu content has a padding of 4px, but we want our divider (the border top applied) to
+       * be flush with the menu content. So we need to adjust the margin & width to account for the padding.
+       */ marginLeft: "-0.4rem",
+        marginRight: "-0.4rem",
+        width: "calc(100% + 8px)",
+        children: information.map((info)=>/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                gap: 1,
+                direction: "column",
+                alignItems: "flex-start",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        tag: "dt",
+                        variant: "pi",
+                        fontWeight: "bold",
+                        children: info.label
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        tag: "dd",
+                        variant: "pi",
+                        textColor: "neutral600",
+                        children: info.value
+                    })
+                ]
+            }, info.label))
+    });
+};
+const HeaderActions = ({ actions })=>{
+    const [dialogId, setDialogId] = React__namespace.useState(null);
+    const handleClick = (action)=>async (e)=>{
+            if (!('options' in action)) {
+                const { onClick = ()=>false, dialog, id } = action;
+                const muteDialog = await onClick(e);
+                if (dialog && !muteDialog) {
+                    e.preventDefault();
+                    setDialogId(id);
+                }
+            }
+        };
+    const handleClose = ()=>{
+        setDialogId(null);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        gap: 1,
+        children: actions.map((action)=>{
+            if (action.options) {
+                return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelect, {
+                    size: "S",
+                    // @ts-expect-error – the DS will handle numbers, but we're not allowing the API.
+                    onChange: action.onSelect,
+                    "aria-label": action.label,
+                    ...action,
+                    children: action.options.map(({ label, ...option })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                            ...option,
+                            children: label
+                        }, option.value))
+                }, action.id);
+            } else {
+                if (action.type === 'icon') {
+                    return /*#__PURE__*/ jsxRuntime.jsxs(React__namespace.Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                disabled: action.disabled,
+                                label: action.label,
+                                size: "S",
+                                onClick: handleClick(action),
+                                children: action.icon
+                            }),
+                            action.dialog ? /*#__PURE__*/ jsxRuntime.jsx(HeaderActionDialog, {
+                                ...action.dialog,
+                                isOpen: dialogId === action.id,
+                                onClose: handleClose
+                            }) : null
+                        ]
+                    }, action.id);
+                }
+            }
+        })
+    });
+};
+const HeaderActionDialog = ({ onClose, onCancel, title, content: Content, isOpen })=>{
+    const handleClose = async ()=>{
+        if (onCancel) {
+            await onCancel();
+        }
+        onClose();
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
+        open: isOpen,
+        onOpenChange: handleClose,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Dialog.Content, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Header, {
+                    children: title
+                }),
+                typeof Content === 'function' ? /*#__PURE__*/ jsxRuntime.jsx(Content, {
+                    onClose: handleClose
+                }) : Content
+            ]
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * DocumentActionComponents
+ * -----------------------------------------------------------------------------------------------*/ const ConfigureTheViewAction = ({ collectionType, model })=>{
+    const navigate = reactRouterDom.useNavigate();
+    const { formatMessage } = reactIntl.useIntl();
+    const isDesktop = strapiAdmin.useIsDesktop();
+    return isDesktop ? {
+        label: formatMessage({
+            id: 'app.links.configure-view',
+            defaultMessage: 'Configure the view'
+        }),
+        icon: /*#__PURE__*/ jsxRuntime.jsx(Icons.ListPlus, {}),
+        onClick: ()=>{
+            navigate(`../${collectionType}/${model}/configurations/edit`);
+        },
+        position: 'header'
+    } : null;
+};
+ConfigureTheViewAction.type = 'configure-the-view';
+ConfigureTheViewAction.position = 'header';
+const EditTheModelAction = ({ model })=>{
+    const navigate = reactRouterDom.useNavigate();
+    const { formatMessage } = reactIntl.useIntl();
+    const isDesktop = strapiAdmin.useIsDesktop();
+    return isDesktop ? {
+        label: formatMessage({
+            id: 'content-manager.link-to-ctb',
+            defaultMessage: 'Edit the model'
+        }),
+        icon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Pencil, {}),
+        onClick: ()=>{
+            navigate(`/plugins/content-type-builder/content-types/${model}`);
+        },
+        position: 'header'
+    } : null;
+};
+EditTheModelAction.type = 'edit-the-model';
+EditTheModelAction.position = 'header';
+const DeleteAction = ({ documentId, model, collectionType, document })=>{
+    const navigate = reactRouterDom.useNavigate();
+    const { formatMessage } = reactIntl.useIntl();
+    const listViewPathMatch = reactRouterDom.useMatch(router.LIST_PATH);
+    const canDelete = DocumentRBAC.useDocumentRBAC('DeleteAction', (state)=>state.canDelete);
+    const { delete: deleteAction, isLoading } = useDocumentActions.useDocumentActions();
+    const { toggleNotification } = strapiAdmin.useNotification();
+    const setSubmitting = strapiAdmin.useForm('DeleteAction', (state)=>state.setSubmitting);
+    const isLocalized = document?.locale != null;
+    return {
+        disabled: !canDelete || !document,
+        label: formatMessage({
+            id: 'content-manager.actions.delete.label',
+            defaultMessage: 'Delete entry{isLocalized, select, true { (all locales)} other {}}'
+        }, {
+            isLocalized
+        }),
+        icon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Trash, {}),
+        dialog: {
+            type: 'dialog',
+            title: formatMessage({
+                id: 'app.components.ConfirmDialog.title',
+                defaultMessage: 'Confirmation'
+            }),
+            content: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "column",
+                gap: 2,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(Icons.WarningCircle, {
+                        width: "24px",
+                        height: "24px",
+                        fill: "danger600"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        tag: "p",
+                        variant: "omega",
+                        textAlign: "center",
+                        children: formatMessage({
+                            id: 'content-manager.actions.delete.dialog.body',
+                            defaultMessage: 'Are you sure?'
+                        })
+                    })
+                ]
+            }),
+            loading: isLoading,
+            onConfirm: async ()=>{
+                /**
+         * If we have a match, we're in the list view
+         * and therefore not in a form and shouldn't be
+         * trying to set the submitting value.
+         */ if (!listViewPathMatch) {
+                    setSubmitting(true);
+                }
+                try {
+                    if (!documentId && collectionType !== collections.SINGLE_TYPES) {
+                        console.error("You're trying to delete a document without an id, this is likely a bug with Strapi. Please open an issue.");
+                        toggleNotification({
+                            message: formatMessage({
+                                id: 'content-manager.actions.delete.error',
+                                defaultMessage: 'An error occurred while trying to delete the document.'
+                            }),
+                            type: 'danger'
+                        });
+                        return;
+                    }
+                    const res = await deleteAction({
+                        documentId,
+                        model,
+                        collectionType,
+                        params: {
+                            locale: '*'
+                        }
+                    });
+                    if (!('error' in res)) {
+                        navigate({
+                            pathname: `../${collectionType}/${model}`
+                        }, {
+                            replace: true
+                        });
+                    }
+                } finally{
+                    if (!listViewPathMatch) {
+                        setSubmitting(false);
+                    }
+                }
+            }
+        },
+        variant: 'danger',
+        position: [
+            'header',
+            'table-row'
+        ]
+    };
+};
+DeleteAction.type = 'delete';
+DeleteAction.position = [
+    'header',
+    'table-row'
+];
+const DEFAULT_HEADER_ACTIONS = [
+    EditTheModelAction,
+    ConfigureTheViewAction,
+    DeleteAction
+];
+
+exports.DEFAULT_HEADER_ACTIONS = DEFAULT_HEADER_ACTIONS;
+exports.Header = Header;
+//# sourceMappingURL=Header.js.map