npm - @strapi/content-manager - Versions diffs - 5.35.0 → 5.36.1 - Mend

@strapi/content-manager 5.35.0 → 5.36.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/dist/admin/history/components/VersionsList.js CHANGED Viewed

@@ -7,6 +7,7 @@ var designSystem = require('@strapi/design-system');
 var qs = require('qs');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
+var ActionsDrawer = require('../../components/ActionsDrawer.js');
 var RelativeTime = require('../../components/RelativeTime.js');
 var DocumentStatus = require('../../pages/EditView/components/DocumentStatus.js');
 var users = require('../../utils/users.js');
@@ -19,11 +20,34 @@ var History = require('../pages/History.js');
         variant: "pi",
         children: children
     });
+/* -------------------------------------------------------------------------------------------------
+ * VersionAuthor
+ * -----------------------------------------------------------------------------------------------*/ const VersionAuthor = ({ version, isCurrent })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const author = version.createdBy && users.getDisplayName(version.createdBy);
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: formatMessage({
+            id: 'content-manager.history.sidebar.versionDescription',
+            defaultMessage: '{distanceToNow}{isAnonymous, select, true {} other { by {author}}}{isCurrent, select, true { <b>(current)</b>} other {}}'
+        }, {
+            distanceToNow: /*#__PURE__*/ jsxRuntime.jsx(RelativeTime.RelativeTime, {
+                timestamp: new Date(version.createdAt)
+            }),
+            author,
+            isAnonymous: !Boolean(version.createdBy),
+            isCurrent,
+            b: BlueText
+        })
+    });
+};
 const VersionCard = ({ version, isCurrent })=>{
-    const { formatDate, formatMessage } = reactIntl.useIntl();
+    const { formatDate } = reactIntl.useIntl();
     const [{ query }] = strapiAdmin.useQueryParams();
+    const setIsOpen = ActionsDrawer.useActionsDrawer('VersionCard', (s)=>s?.setIsOpen, false);
     const isActive = query.id === version.id.toString();
-    const author = version.createdBy && users.getDisplayName(version.createdBy);
+    const handleClick = ()=>{
+        setIsOpen?.(false);
+    };
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
         direction: "column",
         alignItems: "flex-start",
@@ -42,6 +66,7 @@ const VersionCard = ({ version, isCurrent })=>{
         style: {
             textDecoration: 'none'
         },
+        onClick: handleClick,
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                 direction: "column",
@@ -63,17 +88,9 @@ const VersionCard = ({ version, isCurrent })=>{
                         tag: "p",
                         variant: "pi",
                         textColor: "neutral600",
-                        children: formatMessage({
-                            id: 'content-manager.history.sidebar.versionDescription',
-                            defaultMessage: '{distanceToNow}{isAnonymous, select, true {} other { by {author}}}{isCurrent, select, true { <b>(current)</b>} other {}}'
-                        }, {
-                            distanceToNow: /*#__PURE__*/ jsxRuntime.jsx(RelativeTime.RelativeTime, {
-                                timestamp: new Date(version.createdAt)
-                            }),
-                            author,
-                            isAnonymous: !Boolean(version.createdBy),
-                            isCurrent,
-                            b: BlueText
+                        children: /*#__PURE__*/ jsxRuntime.jsx(VersionAuthor, {
+                            version: version,
+                            isCurrent: isCurrent
                         })
                     })
                 ]
@@ -107,6 +124,63 @@ const PaginationButton = ({ page, children })=>{
         })
     });
 };
+/* -------------------------------------------------------------------------------------------------
+ * VersionsListItems
+ * -----------------------------------------------------------------------------------------------*/ const VersionsListItems = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { versions, page } = History.useHistoryContext('VersionsListItems', (state)=>({
+            versions: state.versions,
+            page: state.page
+        }));
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+        flex: 1,
+        overflow: "auto",
+        children: [
+            versions.meta.pagination.page > 1 && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                paddingTop: 4,
+                textAlign: "center",
+                children: /*#__PURE__*/ jsxRuntime.jsx(PaginationButton, {
+                    page: page - 1,
+                    children: formatMessage({
+                        id: 'content-manager.history.sidebar.show-newer',
+                        defaultMessage: 'Show newer versions'
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                direction: "column",
+                gap: 3,
+                padding: {
+                    initial: 0,
+                    medium: 4
+                },
+                tag: "ul",
+                alignItems: "stretch",
+                children: versions.data.map((version, index)=>/*#__PURE__*/ jsxRuntime.jsx("li", {
+                        "aria-label": formatMessage({
+                            id: 'content-manager.history.sidebar.title.version-card.aria-label',
+                            defaultMessage: 'Version card'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(VersionCard, {
+                            version: version,
+                            isCurrent: page === 1 && index === 0
+                        })
+                    }, version.id))
+            }),
+            versions.meta.pagination.page < versions.meta.pagination.pageCount && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                paddingBottom: 4,
+                textAlign: "center",
+                children: /*#__PURE__*/ jsxRuntime.jsx(PaginationButton, {
+                    page: page + 1,
+                    children: formatMessage({
+                        id: 'content-manager.history.sidebar.show-older',
+                        defaultMessage: 'Show older versions'
+                    })
+                })
+            })
+        ]
+    });
+};
 /* -------------------------------------------------------------------------------------------------
  * VersionsList
  * -----------------------------------------------------------------------------------------------*/ const VersionsList = ()=>{
@@ -115,12 +189,19 @@ const PaginationButton = ({ page, children })=>{
             versions: state.versions,
             page: state.page
         }));
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+    const isMobile = strapiAdmin.useIsMobile();
+    const [{ query }] = strapiAdmin.useQueryParams();
+    const currentVersion = versions.data.find((version)=>version.id.toString() === query.id);
+    return !isMobile ? /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
         shrink: 0,
         direction: "column",
         alignItems: "stretch",
-        width: "320px",
-        height: "100dvh",
+        width: {
+            initial: '28rem',
+            large: '32rem'
+        },
+        height: "100%",
+        overflow: "hidden",
         background: "neutral0",
         borderColor: "neutral200",
         borderWidth: "0 0 0 1px",
@@ -135,6 +216,7 @@ const PaginationButton = ({ page, children })=>{
                 borderWidth: "0 0 1px",
                 borderStyle: "solid",
                 tag: "header",
+                role: "banner",
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                         tag: "h2",
@@ -157,50 +239,53 @@ const PaginationButton = ({ page, children })=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
-                flex: 1,
-                overflow: "auto",
+            /*#__PURE__*/ jsxRuntime.jsx(VersionsListItems, {})
+        ]
+    }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(ActionsDrawer.ActionsDrawer.Root, {
+                hasContent: true,
+                hasSideNav: true,
                 children: [
-                    versions.meta.pagination.page > 1 && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                        paddingTop: 4,
-                        textAlign: "center",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(PaginationButton, {
-                            page: page - 1,
-                            children: formatMessage({
-                                id: 'content-manager.history.sidebar.show-newer',
-                                defaultMessage: 'Show newer versions'
-                            })
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                        direction: "column",
-                        gap: 3,
-                        padding: 4,
-                        tag: "ul",
-                        alignItems: "stretch",
-                        children: versions.data.map((version, index)=>/*#__PURE__*/ jsxRuntime.jsx("li", {
-                                "aria-label": formatMessage({
-                                    id: 'content-manager.history.sidebar.title.version-card.aria-label',
-                                    defaultMessage: 'Version card'
+                    /*#__PURE__*/ jsxRuntime.jsx(ActionsDrawer.ActionsDrawer.Overlay, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(ActionsDrawer.ActionsDrawer.Header, {
+                        children: currentVersion && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            gap: 2,
+                            overflow: "hidden",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    flex: 1,
+                                    overflow: "hidden",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        display: "block",
+                                        variant: "omega",
+                                        textColor: "neutral600",
+                                        overflow: "hidden",
+                                        style: {
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap'
+                                        },
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(VersionAuthor, {
+                                            version: currentVersion,
+                                            isCurrent: page === 1 && versions.data.indexOf(currentVersion) === 0
+                                        })
+                                    })
                                 }),
-                                children: /*#__PURE__*/ jsxRuntime.jsx(VersionCard, {
-                                    version: version,
-                                    isCurrent: page === 1 && index === 0
+                                currentVersion.status && /*#__PURE__*/ jsxRuntime.jsx(DocumentStatus.DocumentStatus, {
+                                    status: currentVersion.status,
+                                    size: "XS"
                                 })
-                            }, version.id))
-                    }),
-                    versions.meta.pagination.page < versions.meta.pagination.pageCount && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                        paddingBottom: 4,
-                        textAlign: "center",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(PaginationButton, {
-                            page: page + 1,
-                            children: formatMessage({
-                                id: 'content-manager.history.sidebar.show-older',
-                                defaultMessage: 'Show older versions'
-                            })
+                            ]
                         })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(ActionsDrawer.ActionsDrawer.Content, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(VersionsListItems, {})
                     })
                 ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                width: "100%",
+                height: "5.7rem"
             })
         ]
     });

package/dist/admin/history/components/VersionsList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VersionsList.js","sources":["../../../../admin/src/history/components/VersionsList.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link } from 'react-router-dom';\n\nimport { RelativeTime } from '../../components/RelativeTime';\nimport { DocumentStatus } from '../../pages/EditView/components/DocumentStatus';\nimport { getDisplayName } from '../../utils/users';\nimport { useHistoryContext } from '../pages/History';\n\nimport type { HistoryVersions } from '../../../../shared/contracts';\n\n/* -------------------------------------------------------------------------------------------------\n * BlueText\n * -----------------------------------------------------------------------------------------------/\n\nconst BlueText = (children: React.ReactNode) => (\n <Typography textColor=\"primary600\" variant=\"pi\">\n {children}\n </Typography>\n);\n\n/ -------------------------------------------------------------------------------------------------\n * VersionCard\n * -----------------------------------------------------------------------------------------------/\n\ninterface VersionCardProps {\n version: HistoryVersions.HistoryVersionDataResponse;\n isCurrent: boolean;\n}\n\nconst VersionCard = ({ version, isCurrent }: VersionCardProps) => {\n const { formatDate, formatMessage } = useIntl();\n const [{ query }] = useQueryParams<{ id?: string }>();\n const isActive = query.id === version.id.toString();\n const author = version.createdBy && getDisplayName(version.createdBy);\n\n return (\n <Flex\n direction=\"column\"\n alignItems=\"flex-start\"\n gap={3}\n hasRadius\n borderWidth=\"1px\"\n borderStyle=\"solid\"\n borderColor={isActive ? 'primary600' : 'neutral200'}\n color=\"neutral800\"\n padding={5}\n tag={Link}\n to={`?${stringify({ ...query, id: version.id })}`}\n style={{ textDecoration: 'none' }}\n >\n <Flex direction=\"column\" gap={1} alignItems=\"flex-start\">\n <Typography tag=\"h3\" fontWeight=\"semiBold\">\n {formatDate(version.createdAt, {\n day: 'numeric',\n month: 'numeric',\n year: 'numeric',\n hour: '2-digit',\n minute: '2-digit',\n })}\n </Typography>\n <Typography tag=\"p\" variant=\"pi\" textColor=\"neutral600\">\n {formatMessage(\n {\n id: 'content-manager.history.sidebar.versionDescription',\n defaultMessage:\n '{distanceToNow}{isAnonymous, select, true {} other { by {author}}}{isCurrent, select, true { <b>(current)</b>} other {}}',\n },\n {\n distanceToNow: <RelativeTime timestamp={new Date(version.createdAt)} />,\n author,\n isAnonymous: !Boolean(version.createdBy),\n isCurrent,\n b: BlueText,\n }\n )}\n </Typography>\n </Flex>\n {version.status && <DocumentStatus status={version.status} size=\"XS\" />}\n </Flex>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * PaginationButton\n * -----------------------------------------------------------------------------------------------/\n\ninterface PaginationButtonProps {\n page: number;\n children: React.ReactNode;\n}\n\nconst PaginationButton = ({ page, children }: PaginationButtonProps) => {\n const [{ query }] = useQueryParams<{ id?: string }>();\n\n // Remove the id from the pagination link, so that the history page can redirect\n // to the id of the first history version in the new page once it's loaded\n const { id: _id, ...queryRest } = query;\n\n return (\n <Link to={{ search: stringify({ ...queryRest, page }) }} style={{ textDecoration: 'none' }}>\n <Typography variant=\"omega\" textColor=\"primary600\">\n {children}\n </Typography>\n </Link>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * VersionsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst VersionsList = () => {\n const { formatMessage } = useIntl();\n const { versions, page } = useHistoryContext('VersionsList', (state) => ({\n versions: state.versions,\n page: state.page,\n }));\n\n return (\n <Flex\n shrink={0}\n direction=\"column\"\n alignItems=\"stretch\"\n width=\"320px\"\n height=\"100dvh\"\n background=\"neutral0\"\n borderColor=\"neutral200\"\n borderWidth=\"0 0 0 1px\"\n borderStyle=\"solid\"\n tag=\"aside\"\n >\n <Flex\n direction=\"row\"\n justifyContent=\"space-between\"\n padding={4}\n borderColor=\"neutral200\"\n borderWidth=\"0 0 1px\"\n borderStyle=\"solid\"\n tag=\"header\"\n >\n <Typography tag=\"h2\" variant=\"omega\" fontWeight=\"semiBold\">\n {formatMessage({\n id: 'content-manager.history.sidebar.title',\n defaultMessage: 'Versions',\n })}\n </Typography>\n <Box background=\"neutral150\" hasRadius padding={1}>\n <Typography variant=\"sigma\" textColor=\"neutral600\">\n {versions.meta.pagination.total}\n </Typography>\n </Box>\n </Flex>\n <Box flex={1} overflow=\"auto\">\n {versions.meta.pagination.page > 1 && (\n <Box paddingTop={4} textAlign=\"center\">\n <PaginationButton page={page - 1}>\n {formatMessage({\n id: 'content-manager.history.sidebar.show-newer',\n defaultMessage: 'Show newer versions',\n })}\n </PaginationButton>\n </Box>\n )}\n <Flex direction=\"column\" gap={3} padding={4} tag=\"ul\" alignItems=\"stretch\">\n {versions.data.map((version, index) => (\n <li\n key={version.id}\n aria-label={formatMessage({\n id: 'content-manager.history.sidebar.title.version-card.aria-label',\n defaultMessage: 'Version card',\n })}\n >\n <VersionCard version={version} isCurrent={page === 1 && index === 0} />\n </li>\n ))}\n </Flex>\n {versions.meta.pagination.page < versions.meta.pagination.pageCount && (\n <Box paddingBottom={4} textAlign=\"center\">\n <PaginationButton page={page + 1}>\n {formatMessage({\n id: 'content-manager.history.sidebar.show-older',\n defaultMessage: 'Show older versions',\n })}\n </PaginationButton>\n </Box>\n )}\n </Box>\n </Flex>\n );\n};\n\nexport { VersionsList };\n"],"names":["BlueText","children","_jsx","Typography","textColor","variant","VersionCard","version","isCurrent","formatDate","formatMessage","useIntl","query","useQueryParams","isActive","id","toString","author","createdBy","getDisplayName","_jsxs","Flex","direction","alignItems","gap","hasRadius","borderWidth","borderStyle","borderColor","color","padding","tag","Link","to","stringify","style","textDecoration","fontWeight","createdAt","day","month","year","hour","minute","defaultMessage","distanceToNow","RelativeTime","timestamp","Date","isAnonymous","Boolean","b","status","DocumentStatus","size","PaginationButton","page","_id","queryRest","search","VersionsList","versions","useHistoryContext","state","shrink","width","height","background","justifyContent","Box","meta","pagination","total","flex","overflow","paddingTop","textAlign","data","map","index","li","aria-label","pageCount","paddingBottom"],"mappings":"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"}
1	+ {"version":3,"file":"VersionsList.js","sources":["../../../../admin/src/history/components/VersionsList.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link } from 'react-router-dom';\n\nimport { ActionsDrawer, useActionsDrawer } from '../../components/ActionsDrawer';\nimport { RelativeTime } from '../../components/RelativeTime';\nimport { DocumentStatus } from '../../pages/EditView/components/DocumentStatus';\nimport { getDisplayName } from '../../utils/users';\nimport { useHistoryContext } from '../pages/History';\n\nimport type { HistoryVersions } from '../../../../shared/contracts';\n\n/* -------------------------------------------------------------------------------------------------\n * BlueText\n * -----------------------------------------------------------------------------------------------/\n\nconst BlueText = (children: React.ReactNode) => (\n <Typography textColor=\"primary600\" variant=\"pi\">\n {children}\n </Typography>\n);\n\n/ -------------------------------------------------------------------------------------------------\n * VersionAuthor\n * -----------------------------------------------------------------------------------------------/\n\nconst VersionAuthor = ({\n version,\n isCurrent,\n}: {\n version: HistoryVersions.HistoryVersionDataResponse;\n isCurrent: boolean;\n}) => {\n const { formatMessage } = useIntl();\n const author = version.createdBy && getDisplayName(version.createdBy);\n return (\n <>\n {formatMessage(\n {\n id: 'content-manager.history.sidebar.versionDescription',\n defaultMessage:\n '{distanceToNow}{isAnonymous, select, true {} other { by {author}}}{isCurrent, select, true { <b>(current)</b>} other {}}',\n },\n {\n distanceToNow: <RelativeTime timestamp={new Date(version.createdAt)} />,\n author,\n isAnonymous: !Boolean(version.createdBy),\n isCurrent,\n b: BlueText,\n }\n )}\n </>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * VersionCard\n * -----------------------------------------------------------------------------------------------/\n\ninterface VersionCardProps {\n version: HistoryVersions.HistoryVersionDataResponse;\n isCurrent: boolean;\n}\n\nconst VersionCard = ({ version, isCurrent }: VersionCardProps) => {\n const { formatDate } = useIntl();\n const [{ query }] = useQueryParams<{ id?: string }>();\n const setIsOpen = useActionsDrawer('VersionCard', (s) => s?.setIsOpen, false);\n const isActive = query.id === version.id.toString();\n\n const handleClick = () => {\n setIsOpen?.(false);\n };\n\n return (\n <Flex\n direction=\"column\"\n alignItems=\"flex-start\"\n gap={3}\n hasRadius\n borderWidth=\"1px\"\n borderStyle=\"solid\"\n borderColor={isActive ? 'primary600' : 'neutral200'}\n color=\"neutral800\"\n padding={5}\n tag={Link}\n to={`?${stringify({ ...query, id: version.id })}`}\n style={{ textDecoration: 'none' }}\n onClick={handleClick}\n >\n <Flex direction=\"column\" gap={1} alignItems=\"flex-start\">\n <Typography tag=\"h3\" fontWeight=\"semiBold\">\n {formatDate(version.createdAt, {\n day: 'numeric',\n month: 'numeric',\n year: 'numeric',\n hour: '2-digit',\n minute: '2-digit',\n })}\n </Typography>\n <Typography tag=\"p\" variant=\"pi\" textColor=\"neutral600\">\n <VersionAuthor version={version} isCurrent={isCurrent} />\n </Typography>\n </Flex>\n {version.status && <DocumentStatus status={version.status} size=\"XS\" />}\n </Flex>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * PaginationButton\n * -----------------------------------------------------------------------------------------------/\n\ninterface PaginationButtonProps {\n page: number;\n children: React.ReactNode;\n}\n\nconst PaginationButton = ({ page, children }: PaginationButtonProps) => {\n const [{ query }] = useQueryParams<{ id?: string }>();\n\n // Remove the id from the pagination link, so that the history page can redirect\n // to the id of the first history version in the new page once it's loaded\n const { id: _id, ...queryRest } = query;\n\n return (\n <Link to={{ search: stringify({ ...queryRest, page }) }} style={{ textDecoration: 'none' }}>\n <Typography variant=\"omega\" textColor=\"primary600\">\n {children}\n </Typography>\n </Link>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * VersionsListItems\n * -----------------------------------------------------------------------------------------------/\n\nconst VersionsListItems = () => {\n const { formatMessage } = useIntl();\n const { versions, page } = useHistoryContext('VersionsListItems', (state) => ({\n versions: state.versions,\n page: state.page,\n }));\n\n return (\n <Box flex={1} overflow=\"auto\">\n {versions.meta.pagination.page > 1 && (\n <Box paddingTop={4} textAlign=\"center\">\n <PaginationButton page={page - 1}>\n {formatMessage({\n id: 'content-manager.history.sidebar.show-newer',\n defaultMessage: 'Show newer versions',\n })}\n </PaginationButton>\n </Box>\n )}\n <Flex\n direction=\"column\"\n gap={3}\n padding={{ initial: 0, medium: 4 }}\n tag=\"ul\"\n alignItems=\"stretch\"\n >\n {versions.data.map((version, index) => (\n <li\n key={version.id}\n aria-label={formatMessage({\n id: 'content-manager.history.sidebar.title.version-card.aria-label',\n defaultMessage: 'Version card',\n })}\n >\n <VersionCard version={version} isCurrent={page === 1 && index === 0} />\n </li>\n ))}\n </Flex>\n {versions.meta.pagination.page < versions.meta.pagination.pageCount && (\n <Box paddingBottom={4} textAlign=\"center\">\n <PaginationButton page={page + 1}>\n {formatMessage({\n id: 'content-manager.history.sidebar.show-older',\n defaultMessage: 'Show older versions',\n })}\n </PaginationButton>\n </Box>\n )}\n </Box>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * VersionsList\n * -----------------------------------------------------------------------------------------------/\n\nconst VersionsList = () => {\n const { formatMessage } = useIntl();\n const { versions, page } = useHistoryContext('VersionsList', (state) => ({\n versions: state.versions,\n page: state.page,\n }));\n const isMobile = useIsMobile();\n\n const [{ query }] = useQueryParams<{ id?: string }>();\n const currentVersion = versions.data.find((version) => version.id.toString() === query.id);\n\n return !isMobile ? (\n <Flex\n shrink={0}\n direction=\"column\"\n alignItems=\"stretch\"\n width={{ initial: '28rem', large: '32rem' }}\n height=\"100%\"\n overflow=\"hidden\"\n background=\"neutral0\"\n borderColor=\"neutral200\"\n borderWidth=\"0 0 0 1px\"\n borderStyle=\"solid\"\n tag=\"aside\"\n >\n <Flex\n direction=\"row\"\n justifyContent=\"space-between\"\n padding={4}\n borderColor=\"neutral200\"\n borderWidth=\"0 0 1px\"\n borderStyle=\"solid\"\n tag=\"header\"\n role=\"banner\"\n >\n <Typography tag=\"h2\" variant=\"omega\" fontWeight=\"semiBold\">\n {formatMessage({\n id: 'content-manager.history.sidebar.title',\n defaultMessage: 'Versions',\n })}\n </Typography>\n <Box background=\"neutral150\" hasRadius padding={1}>\n <Typography variant=\"sigma\" textColor=\"neutral600\">\n {versions.meta.pagination.total}\n </Typography>\n </Box>\n </Flex>\n <VersionsListItems />\n </Flex>\n ) : (\n <>\n <ActionsDrawer.Root hasContent hasSideNav>\n <ActionsDrawer.Overlay />\n <ActionsDrawer.Header>\n {currentVersion && (\n <Flex gap={2} overflow=\"hidden\">\n <Box flex={1} overflow=\"hidden\">\n <Typography\n display=\"block\"\n variant=\"omega\"\n textColor=\"neutral600\"\n overflow=\"hidden\"\n style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n >\n <VersionAuthor\n version={currentVersion}\n isCurrent={page === 1 && versions.data.indexOf(currentVersion) === 0}\n />\n </Typography>\n </Box>\n {currentVersion.status && <DocumentStatus status={currentVersion.status} size=\"XS\" />}\n </Flex>\n )}\n </ActionsDrawer.Header>\n <ActionsDrawer.Content>\n <VersionsListItems />\n </ActionsDrawer.Content>\n </ActionsDrawer.Root>\n {/ Adding a fixed height to the bottom of the page to prevent \n the actions drawer from covering the content\n (32px + 12px * 2 padding + 1px border) */}\n <Box width=\"100%\" height=\"5.7rem\" />\n </>\n );\n};\n\nexport { VersionsList };\n"],"names":["BlueText","children","_jsx","Typography","textColor","variant","VersionAuthor","version","isCurrent","formatMessage","useIntl","author","createdBy","getDisplayName","_Fragment","id","defaultMessage","distanceToNow","RelativeTime","timestamp","Date","createdAt","isAnonymous","Boolean","b","VersionCard","formatDate","query","useQueryParams","setIsOpen","useActionsDrawer","s","isActive","toString","handleClick","_jsxs","Flex","direction","alignItems","gap","hasRadius","borderWidth","borderStyle","borderColor","color","padding","tag","Link","to","stringify","style","textDecoration","onClick","fontWeight","day","month","year","hour","minute","status","DocumentStatus","size","PaginationButton","page","_id","queryRest","search","VersionsListItems","versions","useHistoryContext","state","Box","flex","overflow","meta","pagination","paddingTop","textAlign","initial","medium","data","map","index","li","aria-label","pageCount","paddingBottom","VersionsList","isMobile","useIsMobile","currentVersion","find","shrink","width","large","height","background","justifyContent","role","total","ActionsDrawer","Root","hasContent","hasSideNav","Overlay","Header","display","textOverflow","whiteSpace","indexOf","Content"],"mappings":"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"}

package/dist/admin/history/components/VersionsList.mjs CHANGED Viewed

@@ -1,10 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import 'react';
-import { useQueryParams } from '@strapi/admin/strapi-admin';
+import { useIsMobile, useQueryParams } from '@strapi/admin/strapi-admin';
 import { Flex, Typography, Box } from '@strapi/design-system';
 import { stringify } from 'qs';
 import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
+import { ActionsDrawer, useActionsDrawer } from '../../components/ActionsDrawer.mjs';
 import { RelativeTime } from '../../components/RelativeTime.mjs';
 import { DocumentStatus } from '../../pages/EditView/components/DocumentStatus.mjs';
 import { getDisplayName } from '../../utils/users.mjs';
@@ -17,11 +18,34 @@ import { useHistoryContext } from '../pages/History.mjs';
         variant: "pi",
         children: children
     });
+/* -------------------------------------------------------------------------------------------------
+ * VersionAuthor
+ * -----------------------------------------------------------------------------------------------*/ const VersionAuthor = ({ version, isCurrent })=>{
+    const { formatMessage } = useIntl();
+    const author = version.createdBy && getDisplayName(version.createdBy);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: formatMessage({
+            id: 'content-manager.history.sidebar.versionDescription',
+            defaultMessage: '{distanceToNow}{isAnonymous, select, true {} other { by {author}}}{isCurrent, select, true { <b>(current)</b>} other {}}'
+        }, {
+            distanceToNow: /*#__PURE__*/ jsx(RelativeTime, {
+                timestamp: new Date(version.createdAt)
+            }),
+            author,
+            isAnonymous: !Boolean(version.createdBy),
+            isCurrent,
+            b: BlueText
+        })
+    });
+};
 const VersionCard = ({ version, isCurrent })=>{
-    const { formatDate, formatMessage } = useIntl();
+    const { formatDate } = useIntl();
     const [{ query }] = useQueryParams();
+    const setIsOpen = useActionsDrawer('VersionCard', (s)=>s?.setIsOpen, false);
     const isActive = query.id === version.id.toString();
-    const author = version.createdBy && getDisplayName(version.createdBy);
+    const handleClick = ()=>{
+        setIsOpen?.(false);
+    };
     return /*#__PURE__*/ jsxs(Flex, {
         direction: "column",
         alignItems: "flex-start",
@@ -40,6 +64,7 @@ const VersionCard = ({ version, isCurrent })=>{
         style: {
             textDecoration: 'none'
         },
+        onClick: handleClick,
         children: [
             /*#__PURE__*/ jsxs(Flex, {
                 direction: "column",
@@ -61,17 +86,9 @@ const VersionCard = ({ version, isCurrent })=>{
                         tag: "p",
                         variant: "pi",
                         textColor: "neutral600",
-                        children: formatMessage({
-                            id: 'content-manager.history.sidebar.versionDescription',
-                            defaultMessage: '{distanceToNow}{isAnonymous, select, true {} other { by {author}}}{isCurrent, select, true { <b>(current)</b>} other {}}'
-                        }, {
-                            distanceToNow: /*#__PURE__*/ jsx(RelativeTime, {
-                                timestamp: new Date(version.createdAt)
-                            }),
-                            author,
-                            isAnonymous: !Boolean(version.createdBy),
-                            isCurrent,
-                            b: BlueText
+                        children: /*#__PURE__*/ jsx(VersionAuthor, {
+                            version: version,
+                            isCurrent: isCurrent
                         })
                     })
                 ]
@@ -105,6 +122,63 @@ const PaginationButton = ({ page, children })=>{
         })
     });
 };
+/* -------------------------------------------------------------------------------------------------
+ * VersionsListItems
+ * -----------------------------------------------------------------------------------------------*/ const VersionsListItems = ()=>{
+    const { formatMessage } = useIntl();
+    const { versions, page } = useHistoryContext('VersionsListItems', (state)=>({
+            versions: state.versions,
+            page: state.page
+        }));
+    return /*#__PURE__*/ jsxs(Box, {
+        flex: 1,
+        overflow: "auto",
+        children: [
+            versions.meta.pagination.page > 1 && /*#__PURE__*/ jsx(Box, {
+                paddingTop: 4,
+                textAlign: "center",
+                children: /*#__PURE__*/ jsx(PaginationButton, {
+                    page: page - 1,
+                    children: formatMessage({
+                        id: 'content-manager.history.sidebar.show-newer',
+                        defaultMessage: 'Show newer versions'
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Flex, {
+                direction: "column",
+                gap: 3,
+                padding: {
+                    initial: 0,
+                    medium: 4
+                },
+                tag: "ul",
+                alignItems: "stretch",
+                children: versions.data.map((version, index)=>/*#__PURE__*/ jsx("li", {
+                        "aria-label": formatMessage({
+                            id: 'content-manager.history.sidebar.title.version-card.aria-label',
+                            defaultMessage: 'Version card'
+                        }),
+                        children: /*#__PURE__*/ jsx(VersionCard, {
+                            version: version,
+                            isCurrent: page === 1 && index === 0
+                        })
+                    }, version.id))
+            }),
+            versions.meta.pagination.page < versions.meta.pagination.pageCount && /*#__PURE__*/ jsx(Box, {
+                paddingBottom: 4,
+                textAlign: "center",
+                children: /*#__PURE__*/ jsx(PaginationButton, {
+                    page: page + 1,
+                    children: formatMessage({
+                        id: 'content-manager.history.sidebar.show-older',
+                        defaultMessage: 'Show older versions'
+                    })
+                })
+            })
+        ]
+    });
+};
 /* -------------------------------------------------------------------------------------------------
  * VersionsList
  * -----------------------------------------------------------------------------------------------*/ const VersionsList = ()=>{
@@ -113,12 +187,19 @@ const PaginationButton = ({ page, children })=>{
             versions: state.versions,
             page: state.page
         }));
-    return /*#__PURE__*/ jsxs(Flex, {
+    const isMobile = useIsMobile();
+    const [{ query }] = useQueryParams();
+    const currentVersion = versions.data.find((version)=>version.id.toString() === query.id);
+    return !isMobile ? /*#__PURE__*/ jsxs(Flex, {
         shrink: 0,
         direction: "column",
         alignItems: "stretch",
-        width: "320px",
-        height: "100dvh",
+        width: {
+            initial: '28rem',
+            large: '32rem'
+        },
+        height: "100%",
+        overflow: "hidden",
         background: "neutral0",
         borderColor: "neutral200",
         borderWidth: "0 0 0 1px",
@@ -133,6 +214,7 @@ const PaginationButton = ({ page, children })=>{
                 borderWidth: "0 0 1px",
                 borderStyle: "solid",
                 tag: "header",
+                role: "banner",
                 children: [
                     /*#__PURE__*/ jsx(Typography, {
                         tag: "h2",
@@ -155,50 +237,53 @@ const PaginationButton = ({ page, children })=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxs(Box, {
-                flex: 1,
-                overflow: "auto",
+            /*#__PURE__*/ jsx(VersionsListItems, {})
+        ]
+    }) : /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(ActionsDrawer.Root, {
+                hasContent: true,
+                hasSideNav: true,
                 children: [
-                    versions.meta.pagination.page > 1 && /*#__PURE__*/ jsx(Box, {
-                        paddingTop: 4,
-                        textAlign: "center",
-                        children: /*#__PURE__*/ jsx(PaginationButton, {
-                            page: page - 1,
-                            children: formatMessage({
-                                id: 'content-manager.history.sidebar.show-newer',
-                                defaultMessage: 'Show newer versions'
-                            })
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(Flex, {
-                        direction: "column",
-                        gap: 3,
-                        padding: 4,
-                        tag: "ul",
-                        alignItems: "stretch",
-                        children: versions.data.map((version, index)=>/*#__PURE__*/ jsx("li", {
-                                "aria-label": formatMessage({
-                                    id: 'content-manager.history.sidebar.title.version-card.aria-label',
-                                    defaultMessage: 'Version card'
+                    /*#__PURE__*/ jsx(ActionsDrawer.Overlay, {}),
+                    /*#__PURE__*/ jsx(ActionsDrawer.Header, {
+                        children: currentVersion && /*#__PURE__*/ jsxs(Flex, {
+                            gap: 2,
+                            overflow: "hidden",
+                            children: [
+                                /*#__PURE__*/ jsx(Box, {
+                                    flex: 1,
+                                    overflow: "hidden",
+                                    children: /*#__PURE__*/ jsx(Typography, {
+                                        display: "block",
+                                        variant: "omega",
+                                        textColor: "neutral600",
+                                        overflow: "hidden",
+                                        style: {
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap'
+                                        },
+                                        children: /*#__PURE__*/ jsx(VersionAuthor, {
+                                            version: currentVersion,
+                                            isCurrent: page === 1 && versions.data.indexOf(currentVersion) === 0
+                                        })
+                                    })
                                 }),
-                                children: /*#__PURE__*/ jsx(VersionCard, {
-                                    version: version,
-                                    isCurrent: page === 1 && index === 0
+                                currentVersion.status && /*#__PURE__*/ jsx(DocumentStatus, {
+                                    status: currentVersion.status,
+                                    size: "XS"
                                 })
-                            }, version.id))
-                    }),
-                    versions.meta.pagination.page < versions.meta.pagination.pageCount && /*#__PURE__*/ jsx(Box, {
-                        paddingBottom: 4,
-                        textAlign: "center",
-                        children: /*#__PURE__*/ jsx(PaginationButton, {
-                            page: page + 1,
-                            children: formatMessage({
-                                id: 'content-manager.history.sidebar.show-older',
-                                defaultMessage: 'Show older versions'
-                            })
+                            ]
                         })
+                    }),
+                    /*#__PURE__*/ jsx(ActionsDrawer.Content, {
+                        children: /*#__PURE__*/ jsx(VersionsListItems, {})
                     })
                 ]
+            }),
+            /*#__PURE__*/ jsx(Box, {
+                width: "100%",
+                height: "5.7rem"
             })
         ]
     });