@strapi/content-manager 5.52.3 → 5.54.0

package/dist/admin/components/ActionsDrawer.js

@@ -92,6 +92,7 @@ const DrawerContentInner = styledComponents.styled(designSystem.ScrollArea)`
 `;
 const Root = ({ children, hasContent = false, hasSideNav = false })=>{
     const [isOpen, setIsOpen] = React__namespace.useState(false);
+    const [headerRef, { height: headerHeight }] = designSystem.useMeasure();
     // Close drawer when there's no content
     React__namespace.useEffect(()=>{
         if (!hasContent) {
@@ -100,16 +101,24 @@ const Root = ({ children, hasContent = false, hasSideNav = false })=>{
     }, [
         hasContent
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsx(ActionsDrawerProvider, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(ActionsDrawerProvider, {
         isOpen: isOpen,
         setIsOpen: setIsOpen,
         hasContent: hasContent,
         hasSideNav: hasSideNav,
-        children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContainer, {
-            $hasSideNav: hasSideNav,
-            $isOpen: isOpen,
-            children: children
-        })
+        headerRef: headerRef,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                height: `${headerHeight}px`,
+                shrink: 0,
+                "data-testid": "actions-drawer-spacer"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(DrawerContainer, {
+                $hasSideNav: hasSideNav,
+                $isOpen: isOpen,
+                children: children
+            })
+        ]
     });
 };
 /* -------------------------------------------------------------------------------------------------
@@ -135,11 +144,13 @@ const Header = ({ children })=>{
     const isOpen = ctx?.isOpen ?? false;
     const hasContent = ctx?.hasContent ?? false;
     const setIsOpen = ctx?.setIsOpen;
+    const headerRef = ctx?.headerRef;
     const { formatMessage } = reactIntl.useIntl();
     const toggleOpen = ()=>{
         setIsOpen?.((prev)=>!prev);
     };
     return /*#__PURE__*/ jsxRuntime.jsx(DrawerContent, {
+        ref: headerRef,
         background: "neutral0",
         children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
             paddingTop: 3,

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

@@ -1 +1 @@
-{"version":3,"file":"ActionsDrawer.js","sources":["../../../admin/src/components/ActionsDrawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { WIDTH_SIDE_NAVIGATION, createContext } from '@strapi/admin/strapi-admin';\nimport { Portal, Flex, Box, ScrollArea, IconButton } from '@strapi/design-system';\nimport { CaretDown, CaretUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/**\n * ActionsDrawer is a component used in the content manager edit view page and content history page.\n * It's a sticky banner that can expand to reveal more actions. It's used only in mobile and tablet.\n *\n * A similar component is currently in development in the design-system but it's not ready yet.\n * Using the Panels for the edit view page brought some complexity and for the moment, we decided to go with this custom implementation.\n *\n * @TODO: Replace this component with the one in the design-system when it's ready.\n */\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ActionsDrawerContextValue {\n  isOpen: boolean;\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  hasContent: boolean;\n  hasSideNav: boolean;\n}\n\nconst [ActionsDrawerProvider, useActionsDrawer] = createContext<ActionsDrawerContextValue | null>(\n  'ActionsDrawer',\n  null\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Styled Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst DrawerContainer = styled(Portal)<{ $hasSideNav: boolean; $isOpen: boolean }>`\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${({ $isOpen }) => ($isOpen ? 4 : 2)};\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: flex-end;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    z-index: 2;\n    left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n  }\n`;\n\nconst DrawerOverlay = styled(Box)<{ $isOpen: boolean; $hasSideNav: boolean }>`\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: opacity ${(props) => props.theme.motion.timings['200']}\n    ${(props) => props.theme.motion.easings.easeInOutQuad};\n  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};\n  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n  }\n`;\n\nconst ToggleButton = styled(IconButton)`\n  padding: 0;\n  border: none;\n  background: ${({ theme }) => theme.colors.neutral200};\n  width: 3.2rem;\n  height: 3.2rem;\n  border-radius: 1.6rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst DrawerContent = styled(Flex)`\n  flex-direction: column;\n  align-items: stretch;\n  position: relative;\n  z-index: 1;\n  pointer-events: auto;\n`;\n\nconst DrawerContentInner = styled(ScrollArea)<{ $isOpen: boolean }>`\n  max-height: ${({ $isOpen }) =>\n    $isOpen\n      ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)\n      : '0'};\n  overflow: hidden;\n  transition: max-height ${(props) => props.theme.motion.timings['200']}\n    ${(props) => props.theme.motion.easings.easeInOutQuad};\n  z-index: 1;\n  pointer-events: auto;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RootProps {\n  children: React.ReactNode;\n  hasContent?: boolean;\n  hasSideNav?: boolean;\n}\n\nconst Root = ({ children, hasContent = false, hasSideNav = false }: RootProps) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  // Close drawer when there's no content\n  React.useEffect(() => {\n    if (!hasContent) {\n      setIsOpen(false);\n    }\n  }, [hasContent]);\n\n  return (\n    <ActionsDrawerProvider\n      isOpen={isOpen}\n      setIsOpen={setIsOpen}\n      hasContent={hasContent}\n      hasSideNav={hasSideNav}\n    >\n      <DrawerContainer $hasSideNav={hasSideNav} $isOpen={isOpen}>\n        {children}\n      </DrawerContainer>\n    </ActionsDrawerProvider>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Overlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst Overlay = () => {\n  const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n  const hasContent = ctx?.hasContent ?? false;\n  const hasSideNav = ctx?.hasSideNav ?? false;\n  const setIsOpen = ctx?.setIsOpen;\n\n  if (!hasContent) {\n    return null;\n  }\n\n  return (\n    <DrawerOverlay\n      $isOpen={isOpen}\n      $hasSideNav={hasSideNav}\n      onClick={() => setIsOpen?.(false)}\n      data-testid=\"actions-drawer-overlay\"\n    />\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n  children: React.ReactNode;\n}\n\nconst Header = ({ children }: HeaderProps) => {\n  const ctx = useActionsDrawer('ActionsDrawer.Header', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n  const hasContent = ctx?.hasContent ?? false;\n  const setIsOpen = ctx?.setIsOpen;\n  const { formatMessage } = useIntl();\n\n  const toggleOpen = () => {\n    setIsOpen?.((prev: boolean) => !prev);\n  };\n\n  return (\n    <DrawerContent background=\"neutral0\">\n      <Flex\n        paddingTop={3}\n        paddingBottom={3}\n        paddingLeft={4}\n        paddingRight={4}\n        gap={3}\n        borderStyle=\"solid\"\n        borderWidth={isOpen ? '1px 0' : '1px 0 0 0'}\n        borderColor=\"neutral150\"\n      >\n        <Flex flex={1} gap={2} alignItems=\"center\" overflow=\"hidden\">\n          {children}\n        </Flex>\n        {hasContent && (\n          <ToggleButton\n            onClick={toggleOpen}\n            label={\n              isOpen\n                ? formatMessage({\n                    id: 'content-manager.actions-drawer.close',\n                    defaultMessage: 'Close more actions',\n                  })\n                : formatMessage({\n                    id: 'content-manager.actions-drawer.open',\n                    defaultMessage: 'Open more actions',\n                  })\n            }\n          >\n            {isOpen ? <CaretUp fill=\"neutral600\" /> : <CaretDown fill=\"neutral600\" />}\n          </ToggleButton>\n        )}\n      </Flex>\n    </DrawerContent>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ContentProps {\n  children: React.ReactNode;\n}\n\nconst Content = ({ children }: ContentProps) => {\n  const ctx = useActionsDrawer('ActionsDrawer.Content', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n\n  return (\n    <DrawerContentInner $isOpen={isOpen}>\n      <Flex\n        direction=\"column\"\n        alignItems=\"stretch\"\n        justifyContent=\"flex-start\"\n        padding={{ initial: 4, large: 0 }}\n        background=\"neutral0\"\n      >\n        {children}\n      </Flex>\n    </DrawerContentInner>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer\n * -----------------------------------------------------------------------------------------------*/\n\nconst ActionsDrawer = {\n  Root,\n  Overlay,\n  Header,\n  Content,\n};\n\nexport { ActionsDrawer, useActionsDrawer };\n"],"names":["ActionsDrawerProvider","useActionsDrawer","createContext","DrawerContainer","styled","Portal","$isOpen","theme","breakpoints","medium","$hasSideNav","WIDTH_SIDE_NAVIGATION","DrawerOverlay","Box","props","motion","timings","easings","easeInOutQuad","ToggleButton","IconButton","colors","neutral200","DrawerContent","Flex","DrawerContentInner","ScrollArea","Root","children","hasContent","hasSideNav","isOpen","setIsOpen","React","useState","useEffect","_jsx","Overlay","ctx","s","onClick","data-testid","Header","formatMessage","useIntl","toggleOpen","prev","background","_jsxs","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","borderStyle","borderWidth","borderColor","flex","alignItems","overflow","label","id","defaultMessage","CaretUp","fill","CaretDown","Content","direction","justifyContent","padding","initial","large","ActionsDrawer"],"mappings":"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"}
+{"version":3,"file":"ActionsDrawer.js","sources":["../../../admin/src/components/ActionsDrawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { WIDTH_SIDE_NAVIGATION, createContext } from '@strapi/admin/strapi-admin';\nimport { Portal, Flex, Box, ScrollArea, IconButton, useMeasure } from '@strapi/design-system';\nimport { CaretDown, CaretUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/**\n * ActionsDrawer is a component used in the content manager edit view page and content history page.\n * It's a sticky banner that can expand to reveal more actions. It's used only in mobile and tablet.\n *\n * A similar component is currently in development in the design-system but it's not ready yet.\n * Using the Panels for the edit view page brought some complexity and for the moment, we decided to go with this custom implementation.\n *\n * @TODO: Replace this component with the one in the design-system when it's ready.\n */\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ActionsDrawerContextValue {\n  isOpen: boolean;\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  hasContent: boolean;\n  hasSideNav: boolean;\n  headerRef: (element: HTMLDivElement) => void;\n}\n\nconst [ActionsDrawerProvider, useActionsDrawer] = createContext<ActionsDrawerContextValue | null>(\n  'ActionsDrawer',\n  null\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Styled Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst DrawerContainer = styled(Portal)<{ $hasSideNav: boolean; $isOpen: boolean }>`\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${({ $isOpen }) => ($isOpen ? 4 : 2)};\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: flex-end;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    z-index: 2;\n    left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n  }\n`;\n\nconst DrawerOverlay = styled(Box)<{ $isOpen: boolean; $hasSideNav: boolean }>`\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: opacity ${(props) => props.theme.motion.timings['200']}\n    ${(props) => props.theme.motion.easings.easeInOutQuad};\n  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};\n  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n  }\n`;\n\nconst ToggleButton = styled(IconButton)`\n  padding: 0;\n  border: none;\n  background: ${({ theme }) => theme.colors.neutral200};\n  width: 3.2rem;\n  height: 3.2rem;\n  border-radius: 1.6rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst DrawerContent = styled(Flex)`\n  flex-direction: column;\n  align-items: stretch;\n  position: relative;\n  z-index: 1;\n  pointer-events: auto;\n`;\n\nconst DrawerContentInner = styled(ScrollArea)<{ $isOpen: boolean }>`\n  max-height: ${({ $isOpen }) =>\n    $isOpen\n      ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)\n      : '0'};\n  overflow: hidden;\n  transition: max-height ${(props) => props.theme.motion.timings['200']}\n    ${(props) => props.theme.motion.easings.easeInOutQuad};\n  z-index: 1;\n  pointer-events: auto;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RootProps {\n  children: React.ReactNode;\n  hasContent?: boolean;\n  hasSideNav?: boolean;\n}\n\nconst Root = ({ children, hasContent = false, hasSideNav = false }: RootProps) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [headerRef, { height: headerHeight }] = useMeasure<HTMLDivElement>();\n\n  // Close drawer when there's no content\n  React.useEffect(() => {\n    if (!hasContent) {\n      setIsOpen(false);\n    }\n  }, [hasContent]);\n\n  return (\n    <ActionsDrawerProvider\n      isOpen={isOpen}\n      setIsOpen={setIsOpen}\n      hasContent={hasContent}\n      hasSideNav={hasSideNav}\n      headerRef={headerRef}\n    >\n      <Box height={`${headerHeight}px`} shrink={0} data-testid=\"actions-drawer-spacer\" />\n      <DrawerContainer $hasSideNav={hasSideNav} $isOpen={isOpen}>\n        {children}\n      </DrawerContainer>\n    </ActionsDrawerProvider>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Overlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst Overlay = () => {\n  const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n  const hasContent = ctx?.hasContent ?? false;\n  const hasSideNav = ctx?.hasSideNav ?? false;\n  const setIsOpen = ctx?.setIsOpen;\n\n  if (!hasContent) {\n    return null;\n  }\n\n  return (\n    <DrawerOverlay\n      $isOpen={isOpen}\n      $hasSideNav={hasSideNav}\n      onClick={() => setIsOpen?.(false)}\n      data-testid=\"actions-drawer-overlay\"\n    />\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n  children: React.ReactNode;\n}\n\nconst Header = ({ children }: HeaderProps) => {\n  const ctx = useActionsDrawer('ActionsDrawer.Header', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n  const hasContent = ctx?.hasContent ?? false;\n  const setIsOpen = ctx?.setIsOpen;\n  const headerRef = ctx?.headerRef;\n  const { formatMessage } = useIntl();\n\n  const toggleOpen = () => {\n    setIsOpen?.((prev: boolean) => !prev);\n  };\n\n  return (\n    <DrawerContent ref={headerRef} background=\"neutral0\">\n      <Flex\n        paddingTop={3}\n        paddingBottom={3}\n        paddingLeft={4}\n        paddingRight={4}\n        gap={3}\n        borderStyle=\"solid\"\n        borderWidth={isOpen ? '1px 0' : '1px 0 0 0'}\n        borderColor=\"neutral150\"\n      >\n        <Flex flex={1} gap={2} alignItems=\"center\" overflow=\"hidden\">\n          {children}\n        </Flex>\n        {hasContent && (\n          <ToggleButton\n            onClick={toggleOpen}\n            label={\n              isOpen\n                ? formatMessage({\n                    id: 'content-manager.actions-drawer.close',\n                    defaultMessage: 'Close more actions',\n                  })\n                : formatMessage({\n                    id: 'content-manager.actions-drawer.open',\n                    defaultMessage: 'Open more actions',\n                  })\n            }\n          >\n            {isOpen ? <CaretUp fill=\"neutral600\" /> : <CaretDown fill=\"neutral600\" />}\n          </ToggleButton>\n        )}\n      </Flex>\n    </DrawerContent>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ContentProps {\n  children: React.ReactNode;\n}\n\nconst Content = ({ children }: ContentProps) => {\n  const ctx = useActionsDrawer('ActionsDrawer.Content', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n\n  return (\n    <DrawerContentInner $isOpen={isOpen}>\n      <Flex\n        direction=\"column\"\n        alignItems=\"stretch\"\n        justifyContent=\"flex-start\"\n        padding={{ initial: 4, large: 0 }}\n        background=\"neutral0\"\n      >\n        {children}\n      </Flex>\n    </DrawerContentInner>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer\n * -----------------------------------------------------------------------------------------------*/\n\nconst ActionsDrawer = {\n  Root,\n  Overlay,\n  Header,\n  Content,\n};\n\nexport { ActionsDrawer, useActionsDrawer };\n"],"names":["ActionsDrawerProvider","useActionsDrawer","createContext","DrawerContainer","styled","Portal","$isOpen","theme","breakpoints","medium","$hasSideNav","WIDTH_SIDE_NAVIGATION","DrawerOverlay","Box","props","motion","timings","easings","easeInOutQuad","ToggleButton","IconButton","colors","neutral200","DrawerContent","Flex","DrawerContentInner","ScrollArea","Root","children","hasContent","hasSideNav","isOpen","setIsOpen","React","useState","headerRef","height","headerHeight","useMeasure","useEffect","_jsxs","_jsx","shrink","data-testid","Overlay","ctx","s","onClick","Header","formatMessage","useIntl","toggleOpen","prev","ref","background","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","borderStyle","borderWidth","borderColor","flex","alignItems","overflow","label","id","defaultMessage","CaretUp","fill","CaretDown","Content","direction","justifyContent","padding","initial","large","ActionsDrawer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,CAACA,qBAAAA,EAAuBC,gBAAAA,CAAiB,GAAGC,0BAChD,eAAA,EACA,IAAA;AAGF;;AAEkG,qGAElG,MAAMC,eAAAA,GAAkBC,uBAAAA,CAAOC,mBAAAA,CAAmD;;;;;AAKvE,WAAA,EAAE,CAAC,EAAEC,OAAO,EAAE,GAAMA,OAAAA,GAAU,IAAI,CAAA,CAAG;;;;;;EAM9C,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;AAElC,UAAA,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,WAAAA,GAAcC,oCAAwB,CAAA,CAAG;;AAE3E,CAAC;AAED,MAAMC,aAAAA,GAAgBR,uBAAAA,CAAOS,gBAAAA,CAAgD;;;;;;;sBAOvD,EAAE,CAACC,KAAAA,GAAUA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACC,OAAO,CAAC,KAAA,CAAM;IAChE,EAAE,CAACF,KAAAA,GAAUA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACE,OAAO,CAACC,aAAa,CAAC;AAC/C,WAAA,EAAE,CAAC,EAAEZ,OAAO,EAAE,GAAMA,OAAAA,GAAU,IAAI,CAAA,CAAG;AAC9B,kBAAA,EAAE,CAAC,EAAEA,OAAO,EAAE,GAAMA,OAAAA,GAAU,SAAS,MAAA,CAAQ;;EAE/D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;AAClC,UAAA,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,WAAAA,GAAcC,oCAAwB,CAAA,CAAG;;AAE3E,CAAC;AAED,MAAMQ,YAAAA,GAAef,uBAAAA,CAAOgB,uBAAAA,CAAW;;;cAGzB,EAAE,CAAC,EAAEb,KAAK,EAAE,GAAKA,KAAAA,CAAMc,MAAM,CAACC,UAAU,CAAC;;;;;;;AAOvD,CAAC;AAED,MAAMC,aAAAA,GAAgBnB,uBAAAA,CAAOoB,iBAAAA,CAAK;;;;;;AAMlC,CAAC;AAED,MAAMC,kBAAAA,GAAqBrB,uBAAAA,CAAOsB,uBAAAA,CAAiC;AACrD,cAAA,EAAE,CAAC,EAAEpB,OAAO,EAAE,GACxBA,OAAAA,GACI;OACA,GAAA,CAAI;;yBAEa,EAAE,CAACQ,KAAAA,GAAUA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACC,OAAO,CAAC,KAAA,CAAM;IACnE,EAAE,CAACF,KAAAA,GAAUA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACE,OAAO,CAACC,aAAa,CAAC;;;AAG1D,CAAC;AAYD,MAAMS,IAAAA,GAAO,CAAC,EAAEC,QAAQ,EAAEC,aAAa,KAAK,EAAEC,UAAAA,GAAa,KAAK,EAAa,GAAA;AAC3E,IAAA,MAAM,CAACC,MAAAA,EAAQC,SAAAA,CAAU,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;AAC3C,IAAA,MAAM,CAACC,SAAAA,EAAW,EAAEC,QAAQC,YAAY,EAAE,CAAC,GAAGC,uBAAAA,EAAAA;;AAG9CL,IAAAA,gBAAAA,CAAMM,SAAS,CAAC,IAAA;AACd,QAAA,IAAI,CAACV,UAAAA,EAAY;YACfG,SAAAA,CAAU,KAAA,CAAA;AACZ,QAAA;IACF,CAAA,EAAG;AAACH,QAAAA;AAAW,KAAA,CAAA;AAEf,IAAA,qBACEW,eAAA,CAACxC,qBAAAA,EAAAA;QACC+B,MAAAA,EAAQA,MAAAA;QACRC,SAAAA,EAAWA,SAAAA;QACXH,UAAAA,EAAYA,UAAAA;QACZC,UAAAA,EAAYA,UAAAA;QACZK,SAAAA,EAAWA,SAAAA;;0BAEXM,cAAA,CAAC5B,gBAAAA,EAAAA;gBAAIuB,MAAAA,EAAQ,CAAA,EAAGC,YAAAA,CAAa,EAAE,CAAC;gBAAEK,MAAAA,EAAQ,CAAA;gBAAGC,aAAAA,EAAY;;0BACzDF,cAAA,CAACtC,eAAAA,EAAAA;gBAAgBO,WAAAA,EAAaoB,UAAAA;gBAAYxB,OAAAA,EAASyB,MAAAA;AAChDH,gBAAAA,QAAAA,EAAAA;;;;AAIT,CAAA;AAEA;;AAEkG,qGAElG,MAAMgB,OAAAA,GAAU,IAAA;AACd,IAAA,MAAMC,GAAAA,GAAM5C,gBAAAA,CAAiB,uBAAA,EAAyB,CAAC6C,IAAMA,CAAAA,EAAG,KAAA,CAAA;IAChE,MAAMf,MAAAA,GAASc,KAAKd,MAAAA,IAAU,KAAA;IAC9B,MAAMF,UAAAA,GAAagB,KAAKhB,UAAAA,IAAc,KAAA;IACtC,MAAMC,UAAAA,GAAae,KAAKf,UAAAA,IAAc,KAAA;AACtC,IAAA,MAAME,YAAYa,GAAAA,EAAKb,SAAAA;AAEvB,IAAA,IAAI,CAACH,UAAAA,EAAY;QACf,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEY,cAAA,CAAC7B,aAAAA,EAAAA;QACCN,OAAAA,EAASyB,MAAAA;QACTrB,WAAAA,EAAaoB,UAAAA;AACbiB,QAAAA,OAAAA,EAAS,IAAMf,SAAAA,GAAY,KAAA,CAAA;QAC3BW,aAAAA,EAAY;;AAGlB,CAAA;AAUA,MAAMK,MAAAA,GAAS,CAAC,EAAEpB,QAAQ,EAAe,GAAA;AACvC,IAAA,MAAMiB,GAAAA,GAAM5C,gBAAAA,CAAiB,sBAAA,EAAwB,CAAC6C,IAAMA,CAAAA,EAAG,KAAA,CAAA;IAC/D,MAAMf,MAAAA,GAASc,KAAKd,MAAAA,IAAU,KAAA;IAC9B,MAAMF,UAAAA,GAAagB,KAAKhB,UAAAA,IAAc,KAAA;AACtC,IAAA,MAAMG,YAAYa,GAAAA,EAAKb,SAAAA;AACvB,IAAA,MAAMG,YAAYU,GAAAA,EAAKV,SAAAA;IACvB,MAAM,EAAEc,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,MAAMC,UAAAA,GAAa,IAAA;QACjBnB,SAAAA,GAAY,CAACoB,OAAkB,CAACA,IAAAA,CAAAA;AAClC,IAAA,CAAA;AAEA,IAAA,qBACEX,cAAA,CAAClB,aAAAA,EAAAA;QAAc8B,GAAAA,EAAKlB,SAAAA;QAAWmB,UAAAA,EAAW,UAAA;AACxC,QAAA,QAAA,gBAAAd,eAAA,CAAChB,iBAAAA,EAAAA;YACC+B,UAAAA,EAAY,CAAA;YACZC,aAAAA,EAAe,CAAA;YACfC,WAAAA,EAAa,CAAA;YACbC,YAAAA,EAAc,CAAA;YACdC,GAAAA,EAAK,CAAA;YACLC,WAAAA,EAAY,OAAA;AACZC,YAAAA,WAAAA,EAAa9B,SAAS,OAAA,GAAU,WAAA;YAChC+B,WAAAA,EAAY,YAAA;;8BAEZrB,cAAA,CAACjB,iBAAAA,EAAAA;oBAAKuC,IAAAA,EAAM,CAAA;oBAAGJ,GAAAA,EAAK,CAAA;oBAAGK,UAAAA,EAAW,QAAA;oBAASC,QAAAA,EAAS,QAAA;AACjDrC,oBAAAA,QAAAA,EAAAA;;AAEFC,gBAAAA,UAAAA,kBACCY,cAAA,CAACtB,YAAAA,EAAAA;oBACC4B,OAAAA,EAASI,UAAAA;AACTe,oBAAAA,KAAAA,EACEnC,SACIkB,aAAAA,CAAc;wBACZkB,EAAAA,EAAI,sCAAA;wBACJC,cAAAA,EAAgB;AAClB,qBAAA,CAAA,GACAnB,aAAAA,CAAc;wBACZkB,EAAAA,EAAI,qCAAA;wBACJC,cAAAA,EAAgB;AAClB,qBAAA,CAAA;AAGLrC,oBAAAA,QAAAA,EAAAA,MAAAA,iBAASU,cAAA,CAAC4B,aAAAA,EAAAA;wBAAQC,IAAAA,EAAK;uCAAkB7B,cAAA,CAAC8B,eAAAA,EAAAA;wBAAUD,IAAAA,EAAK;;;;;;AAMtE,CAAA;AAUA,MAAME,OAAAA,GAAU,CAAC,EAAE5C,QAAQ,EAAgB,GAAA;AACzC,IAAA,MAAMiB,GAAAA,GAAM5C,gBAAAA,CAAiB,uBAAA,EAAyB,CAAC6C,IAAMA,CAAAA,EAAG,KAAA,CAAA;IAChE,MAAMf,MAAAA,GAASc,KAAKd,MAAAA,IAAU,KAAA;AAE9B,IAAA,qBACEU,cAAA,CAAChB,kBAAAA,EAAAA;QAAmBnB,OAAAA,EAASyB,MAAAA;AAC3B,QAAA,QAAA,gBAAAU,cAAA,CAACjB,iBAAAA,EAAAA;YACCiD,SAAAA,EAAU,QAAA;YACVT,UAAAA,EAAW,SAAA;YACXU,cAAAA,EAAe,YAAA;YACfC,OAAAA,EAAS;gBAAEC,OAAAA,EAAS,CAAA;gBAAGC,KAAAA,EAAO;AAAE,aAAA;YAChCvB,UAAAA,EAAW,UAAA;AAEV1B,YAAAA,QAAAA,EAAAA;;;AAIT,CAAA;AAEA;;AAEkG,2GAE5FkD,aAAAA,GAAgB;AACpBnD,IAAAA,IAAAA;AACAiB,IAAAA,OAAAA;AACAI,IAAAA,MAAAA;AACAwB,IAAAA;AACF;;;;;"}

package/dist/admin/components/ActionsDrawer.mjs

@@ -1,7 +1,7 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { createContext, WIDTH_SIDE_NAVIGATION } from '@strapi/admin/strapi-admin';
-import { Portal, Box, IconButton, Flex, ScrollArea } from '@strapi/design-system';
+import { Portal, Box, IconButton, Flex, ScrollArea, useMeasure } from '@strapi/design-system';
 import { CaretUp, CaretDown } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
@@ -70,6 +70,7 @@ const DrawerContentInner = styled(ScrollArea)`
 `;
 const Root = ({ children, hasContent = false, hasSideNav = false })=>{
     const [isOpen, setIsOpen] = React.useState(false);
+    const [headerRef, { height: headerHeight }] = useMeasure();
     // Close drawer when there's no content
     React.useEffect(()=>{
         if (!hasContent) {
@@ -78,16 +79,24 @@ const Root = ({ children, hasContent = false, hasSideNav = false })=>{
     }, [
         hasContent
     ]);
-    return /*#__PURE__*/ jsx(ActionsDrawerProvider, {
+    return /*#__PURE__*/ jsxs(ActionsDrawerProvider, {
         isOpen: isOpen,
         setIsOpen: setIsOpen,
         hasContent: hasContent,
         hasSideNav: hasSideNav,
-        children: /*#__PURE__*/ jsx(DrawerContainer, {
-            $hasSideNav: hasSideNav,
-            $isOpen: isOpen,
-            children: children
-        })
+        headerRef: headerRef,
+        children: [
+            /*#__PURE__*/ jsx(Box, {
+                height: `${headerHeight}px`,
+                shrink: 0,
+                "data-testid": "actions-drawer-spacer"
+            }),
+            /*#__PURE__*/ jsx(DrawerContainer, {
+                $hasSideNav: hasSideNav,
+                $isOpen: isOpen,
+                children: children
+            })
+        ]
     });
 };
 /* -------------------------------------------------------------------------------------------------
@@ -113,11 +122,13 @@ const Header = ({ children })=>{
     const isOpen = ctx?.isOpen ?? false;
     const hasContent = ctx?.hasContent ?? false;
     const setIsOpen = ctx?.setIsOpen;
+    const headerRef = ctx?.headerRef;
     const { formatMessage } = useIntl();
     const toggleOpen = ()=>{
         setIsOpen?.((prev)=>!prev);
     };
     return /*#__PURE__*/ jsx(DrawerContent, {
+        ref: headerRef,
         background: "neutral0",
         children: /*#__PURE__*/ jsxs(Flex, {
             paddingTop: 3,

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

@@ -1 +1 @@
-{"version":3,"file":"ActionsDrawer.mjs","sources":["../../../admin/src/components/ActionsDrawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { WIDTH_SIDE_NAVIGATION, createContext } from '@strapi/admin/strapi-admin';\nimport { Portal, Flex, Box, ScrollArea, IconButton } from '@strapi/design-system';\nimport { CaretDown, CaretUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/**\n * ActionsDrawer is a component used in the content manager edit view page and content history page.\n * It's a sticky banner that can expand to reveal more actions. It's used only in mobile and tablet.\n *\n * A similar component is currently in development in the design-system but it's not ready yet.\n * Using the Panels for the edit view page brought some complexity and for the moment, we decided to go with this custom implementation.\n *\n * @TODO: Replace this component with the one in the design-system when it's ready.\n */\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ActionsDrawerContextValue {\n  isOpen: boolean;\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  hasContent: boolean;\n  hasSideNav: boolean;\n}\n\nconst [ActionsDrawerProvider, useActionsDrawer] = createContext<ActionsDrawerContextValue | null>(\n  'ActionsDrawer',\n  null\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Styled Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst DrawerContainer = styled(Portal)<{ $hasSideNav: boolean; $isOpen: boolean }>`\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${({ $isOpen }) => ($isOpen ? 4 : 2)};\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: flex-end;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    z-index: 2;\n    left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n  }\n`;\n\nconst DrawerOverlay = styled(Box)<{ $isOpen: boolean; $hasSideNav: boolean }>`\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: opacity ${(props) => props.theme.motion.timings['200']}\n    ${(props) => props.theme.motion.easings.easeInOutQuad};\n  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};\n  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n  }\n`;\n\nconst ToggleButton = styled(IconButton)`\n  padding: 0;\n  border: none;\n  background: ${({ theme }) => theme.colors.neutral200};\n  width: 3.2rem;\n  height: 3.2rem;\n  border-radius: 1.6rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst DrawerContent = styled(Flex)`\n  flex-direction: column;\n  align-items: stretch;\n  position: relative;\n  z-index: 1;\n  pointer-events: auto;\n`;\n\nconst DrawerContentInner = styled(ScrollArea)<{ $isOpen: boolean }>`\n  max-height: ${({ $isOpen }) =>\n    $isOpen\n      ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)\n      : '0'};\n  overflow: hidden;\n  transition: max-height ${(props) => props.theme.motion.timings['200']}\n    ${(props) => props.theme.motion.easings.easeInOutQuad};\n  z-index: 1;\n  pointer-events: auto;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RootProps {\n  children: React.ReactNode;\n  hasContent?: boolean;\n  hasSideNav?: boolean;\n}\n\nconst Root = ({ children, hasContent = false, hasSideNav = false }: RootProps) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  // Close drawer when there's no content\n  React.useEffect(() => {\n    if (!hasContent) {\n      setIsOpen(false);\n    }\n  }, [hasContent]);\n\n  return (\n    <ActionsDrawerProvider\n      isOpen={isOpen}\n      setIsOpen={setIsOpen}\n      hasContent={hasContent}\n      hasSideNav={hasSideNav}\n    >\n      <DrawerContainer $hasSideNav={hasSideNav} $isOpen={isOpen}>\n        {children}\n      </DrawerContainer>\n    </ActionsDrawerProvider>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Overlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst Overlay = () => {\n  const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n  const hasContent = ctx?.hasContent ?? false;\n  const hasSideNav = ctx?.hasSideNav ?? false;\n  const setIsOpen = ctx?.setIsOpen;\n\n  if (!hasContent) {\n    return null;\n  }\n\n  return (\n    <DrawerOverlay\n      $isOpen={isOpen}\n      $hasSideNav={hasSideNav}\n      onClick={() => setIsOpen?.(false)}\n      data-testid=\"actions-drawer-overlay\"\n    />\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n  children: React.ReactNode;\n}\n\nconst Header = ({ children }: HeaderProps) => {\n  const ctx = useActionsDrawer('ActionsDrawer.Header', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n  const hasContent = ctx?.hasContent ?? false;\n  const setIsOpen = ctx?.setIsOpen;\n  const { formatMessage } = useIntl();\n\n  const toggleOpen = () => {\n    setIsOpen?.((prev: boolean) => !prev);\n  };\n\n  return (\n    <DrawerContent background=\"neutral0\">\n      <Flex\n        paddingTop={3}\n        paddingBottom={3}\n        paddingLeft={4}\n        paddingRight={4}\n        gap={3}\n        borderStyle=\"solid\"\n        borderWidth={isOpen ? '1px 0' : '1px 0 0 0'}\n        borderColor=\"neutral150\"\n      >\n        <Flex flex={1} gap={2} alignItems=\"center\" overflow=\"hidden\">\n          {children}\n        </Flex>\n        {hasContent && (\n          <ToggleButton\n            onClick={toggleOpen}\n            label={\n              isOpen\n                ? formatMessage({\n                    id: 'content-manager.actions-drawer.close',\n                    defaultMessage: 'Close more actions',\n                  })\n                : formatMessage({\n                    id: 'content-manager.actions-drawer.open',\n                    defaultMessage: 'Open more actions',\n                  })\n            }\n          >\n            {isOpen ? <CaretUp fill=\"neutral600\" /> : <CaretDown fill=\"neutral600\" />}\n          </ToggleButton>\n        )}\n      </Flex>\n    </DrawerContent>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ContentProps {\n  children: React.ReactNode;\n}\n\nconst Content = ({ children }: ContentProps) => {\n  const ctx = useActionsDrawer('ActionsDrawer.Content', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n\n  return (\n    <DrawerContentInner $isOpen={isOpen}>\n      <Flex\n        direction=\"column\"\n        alignItems=\"stretch\"\n        justifyContent=\"flex-start\"\n        padding={{ initial: 4, large: 0 }}\n        background=\"neutral0\"\n      >\n        {children}\n      </Flex>\n    </DrawerContentInner>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer\n * -----------------------------------------------------------------------------------------------*/\n\nconst ActionsDrawer = {\n  Root,\n  Overlay,\n  Header,\n  Content,\n};\n\nexport { ActionsDrawer, useActionsDrawer };\n"],"names":["ActionsDrawerProvider","useActionsDrawer","createContext","DrawerContainer","styled","Portal","$isOpen","theme","breakpoints","medium","$hasSideNav","WIDTH_SIDE_NAVIGATION","DrawerOverlay","Box","props","motion","timings","easings","easeInOutQuad","ToggleButton","IconButton","colors","neutral200","DrawerContent","Flex","DrawerContentInner","ScrollArea","Root","children","hasContent","hasSideNav","isOpen","setIsOpen","React","useState","useEffect","_jsx","Overlay","ctx","s","onClick","data-testid","Header","formatMessage","useIntl","toggleOpen","prev","background","_jsxs","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","borderStyle","borderWidth","borderColor","flex","alignItems","overflow","label","id","defaultMessage","CaretUp","fill","CaretDown","Content","direction","justifyContent","padding","initial","large","ActionsDrawer"],"mappings":";;;;;;;;AA6BA,MAAM,CAACA,qBAAAA,EAAuBC,gBAAAA,CAAiB,GAAGC,cAChD,eAAA,EACA,IAAA;AAGF;;AAEkG,qGAElG,MAAMC,eAAAA,GAAkBC,MAAAA,CAAOC,MAAAA,CAAmD;;;;;AAKvE,WAAA,EAAE,CAAC,EAAEC,OAAO,EAAE,GAAMA,OAAAA,GAAU,IAAI,CAAA,CAAG;;;;;;EAM9C,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;AAElC,UAAA,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,WAAAA,GAAcC,wBAAwB,CAAA,CAAG;;AAE3E,CAAC;AAED,MAAMC,aAAAA,GAAgBR,MAAAA,CAAOS,GAAAA,CAAgD;;;;;;;sBAOvD,EAAE,CAACC,KAAAA,GAAUA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACC,OAAO,CAAC,KAAA,CAAM;IAChE,EAAE,CAACF,KAAAA,GAAUA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACE,OAAO,CAACC,aAAa,CAAC;AAC/C,WAAA,EAAE,CAAC,EAAEZ,OAAO,EAAE,GAAMA,OAAAA,GAAU,IAAI,CAAA,CAAG;AAC9B,kBAAA,EAAE,CAAC,EAAEA,OAAO,EAAE,GAAMA,OAAAA,GAAU,SAAS,MAAA,CAAQ;;EAE/D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;AAClC,UAAA,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,WAAAA,GAAcC,wBAAwB,CAAA,CAAG;;AAE3E,CAAC;AAED,MAAMQ,YAAAA,GAAef,MAAAA,CAAOgB,UAAAA,CAAW;;;cAGzB,EAAE,CAAC,EAAEb,KAAK,EAAE,GAAKA,KAAAA,CAAMc,MAAM,CAACC,UAAU,CAAC;;;;;;;AAOvD,CAAC;AAED,MAAMC,aAAAA,GAAgBnB,MAAAA,CAAOoB,IAAAA,CAAK;;;;;;AAMlC,CAAC;AAED,MAAMC,kBAAAA,GAAqBrB,MAAAA,CAAOsB,UAAAA,CAAiC;AACrD,cAAA,EAAE,CAAC,EAAEpB,OAAO,EAAE,GACxBA,OAAAA,GACI;OACA,GAAA,CAAI;;yBAEa,EAAE,CAACQ,KAAAA,GAAUA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACC,OAAO,CAAC,KAAA,CAAM;IACnE,EAAE,CAACF,KAAAA,GAAUA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACE,OAAO,CAACC,aAAa,CAAC;;;AAG1D,CAAC;AAYD,MAAMS,IAAAA,GAAO,CAAC,EAAEC,QAAQ,EAAEC,aAAa,KAAK,EAAEC,UAAAA,GAAa,KAAK,EAAa,GAAA;AAC3E,IAAA,MAAM,CAACC,MAAAA,EAAQC,SAAAA,CAAU,GAAGC,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;;AAG3CD,IAAAA,KAAAA,CAAME,SAAS,CAAC,IAAA;AACd,QAAA,IAAI,CAACN,UAAAA,EAAY;YACfG,SAAAA,CAAU,KAAA,CAAA;AACZ,QAAA;IACF,CAAA,EAAG;AAACH,QAAAA;AAAW,KAAA,CAAA;AAEf,IAAA,qBACEO,GAAA,CAACpC,qBAAAA,EAAAA;QACC+B,MAAAA,EAAQA,MAAAA;QACRC,SAAAA,EAAWA,SAAAA;QACXH,UAAAA,EAAYA,UAAAA;QACZC,UAAAA,EAAYA,UAAAA;AAEZ,QAAA,QAAA,gBAAAM,GAAA,CAACjC,eAAAA,EAAAA;YAAgBO,WAAAA,EAAaoB,UAAAA;YAAYxB,OAAAA,EAASyB,MAAAA;AAChDH,YAAAA,QAAAA,EAAAA;;;AAIT,CAAA;AAEA;;AAEkG,qGAElG,MAAMS,OAAAA,GAAU,IAAA;AACd,IAAA,MAAMC,GAAAA,GAAMrC,gBAAAA,CAAiB,uBAAA,EAAyB,CAACsC,IAAMA,CAAAA,EAAG,KAAA,CAAA;IAChE,MAAMR,MAAAA,GAASO,KAAKP,MAAAA,IAAU,KAAA;IAC9B,MAAMF,UAAAA,GAAaS,KAAKT,UAAAA,IAAc,KAAA;IACtC,MAAMC,UAAAA,GAAaQ,KAAKR,UAAAA,IAAc,KAAA;AACtC,IAAA,MAAME,YAAYM,GAAAA,EAAKN,SAAAA;AAEvB,IAAA,IAAI,CAACH,UAAAA,EAAY;QACf,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEO,GAAA,CAACxB,aAAAA,EAAAA;QACCN,OAAAA,EAASyB,MAAAA;QACTrB,WAAAA,EAAaoB,UAAAA;AACbU,QAAAA,OAAAA,EAAS,IAAMR,SAAAA,GAAY,KAAA,CAAA;QAC3BS,aAAAA,EAAY;;AAGlB,CAAA;AAUA,MAAMC,MAAAA,GAAS,CAAC,EAAEd,QAAQ,EAAe,GAAA;AACvC,IAAA,MAAMU,GAAAA,GAAMrC,gBAAAA,CAAiB,sBAAA,EAAwB,CAACsC,IAAMA,CAAAA,EAAG,KAAA,CAAA;IAC/D,MAAMR,MAAAA,GAASO,KAAKP,MAAAA,IAAU,KAAA;IAC9B,MAAMF,UAAAA,GAAaS,KAAKT,UAAAA,IAAc,KAAA;AACtC,IAAA,MAAMG,YAAYM,GAAAA,EAAKN,SAAAA;IACvB,MAAM,EAAEW,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,UAAAA,GAAa,IAAA;QACjBb,SAAAA,GAAY,CAACc,OAAkB,CAACA,IAAAA,CAAAA;AAClC,IAAA,CAAA;AAEA,IAAA,qBACEV,GAAA,CAACb,aAAAA,EAAAA;QAAcwB,UAAAA,EAAW,UAAA;AACxB,QAAA,QAAA,gBAAAC,IAAA,CAACxB,IAAAA,EAAAA;YACCyB,UAAAA,EAAY,CAAA;YACZC,aAAAA,EAAe,CAAA;YACfC,WAAAA,EAAa,CAAA;YACbC,YAAAA,EAAc,CAAA;YACdC,GAAAA,EAAK,CAAA;YACLC,WAAAA,EAAY,OAAA;AACZC,YAAAA,WAAAA,EAAaxB,SAAS,OAAA,GAAU,WAAA;YAChCyB,WAAAA,EAAY,YAAA;;8BAEZpB,GAAA,CAACZ,IAAAA,EAAAA;oBAAKiC,IAAAA,EAAM,CAAA;oBAAGJ,GAAAA,EAAK,CAAA;oBAAGK,UAAAA,EAAW,QAAA;oBAASC,QAAAA,EAAS,QAAA;AACjD/B,oBAAAA,QAAAA,EAAAA;;AAEFC,gBAAAA,UAAAA,kBACCO,GAAA,CAACjB,YAAAA,EAAAA;oBACCqB,OAAAA,EAASK,UAAAA;AACTe,oBAAAA,KAAAA,EACE7B,SACIY,aAAAA,CAAc;wBACZkB,EAAAA,EAAI,sCAAA;wBACJC,cAAAA,EAAgB;AAClB,qBAAA,CAAA,GACAnB,aAAAA,CAAc;wBACZkB,EAAAA,EAAI,qCAAA;wBACJC,cAAAA,EAAgB;AAClB,qBAAA,CAAA;AAGL/B,oBAAAA,QAAAA,EAAAA,MAAAA,iBAASK,GAAA,CAAC2B,OAAAA,EAAAA;wBAAQC,IAAAA,EAAK;uCAAkB5B,GAAA,CAAC6B,SAAAA,EAAAA;wBAAUD,IAAAA,EAAK;;;;;;AAMtE,CAAA;AAUA,MAAME,OAAAA,GAAU,CAAC,EAAEtC,QAAQ,EAAgB,GAAA;AACzC,IAAA,MAAMU,GAAAA,GAAMrC,gBAAAA,CAAiB,uBAAA,EAAyB,CAACsC,IAAMA,CAAAA,EAAG,KAAA,CAAA;IAChE,MAAMR,MAAAA,GAASO,KAAKP,MAAAA,IAAU,KAAA;AAE9B,IAAA,qBACEK,GAAA,CAACX,kBAAAA,EAAAA;QAAmBnB,OAAAA,EAASyB,MAAAA;AAC3B,QAAA,QAAA,gBAAAK,GAAA,CAACZ,IAAAA,EAAAA;YACC2C,SAAAA,EAAU,QAAA;YACVT,UAAAA,EAAW,SAAA;YACXU,cAAAA,EAAe,YAAA;YACfC,OAAAA,EAAS;gBAAEC,OAAAA,EAAS,CAAA;gBAAGC,KAAAA,EAAO;AAAE,aAAA;YAChCxB,UAAAA,EAAW,UAAA;AAEVnB,YAAAA,QAAAA,EAAAA;;;AAIT,CAAA;AAEA;;AAEkG,2GAE5F4C,aAAAA,GAAgB;AACpB7C,IAAAA,IAAAA;AACAU,IAAAA,OAAAA;AACAK,IAAAA,MAAAA;AACAwB,IAAAA;AACF;;;;"}
+{"version":3,"file":"ActionsDrawer.mjs","sources":["../../../admin/src/components/ActionsDrawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { WIDTH_SIDE_NAVIGATION, createContext } from '@strapi/admin/strapi-admin';\nimport { Portal, Flex, Box, ScrollArea, IconButton, useMeasure } from '@strapi/design-system';\nimport { CaretDown, CaretUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/**\n * ActionsDrawer is a component used in the content manager edit view page and content history page.\n * It's a sticky banner that can expand to reveal more actions. It's used only in mobile and tablet.\n *\n * A similar component is currently in development in the design-system but it's not ready yet.\n * Using the Panels for the edit view page brought some complexity and for the moment, we decided to go with this custom implementation.\n *\n * @TODO: Replace this component with the one in the design-system when it's ready.\n */\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ActionsDrawerContextValue {\n  isOpen: boolean;\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  hasContent: boolean;\n  hasSideNav: boolean;\n  headerRef: (element: HTMLDivElement) => void;\n}\n\nconst [ActionsDrawerProvider, useActionsDrawer] = createContext<ActionsDrawerContextValue | null>(\n  'ActionsDrawer',\n  null\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Styled Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst DrawerContainer = styled(Portal)<{ $hasSideNav: boolean; $isOpen: boolean }>`\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${({ $isOpen }) => ($isOpen ? 4 : 2)};\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: flex-end;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    z-index: 2;\n    left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n  }\n`;\n\nconst DrawerOverlay = styled(Box)<{ $isOpen: boolean; $hasSideNav: boolean }>`\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: opacity ${(props) => props.theme.motion.timings['200']}\n    ${(props) => props.theme.motion.easings.easeInOutQuad};\n  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};\n  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)};\n  }\n`;\n\nconst ToggleButton = styled(IconButton)`\n  padding: 0;\n  border: none;\n  background: ${({ theme }) => theme.colors.neutral200};\n  width: 3.2rem;\n  height: 3.2rem;\n  border-radius: 1.6rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst DrawerContent = styled(Flex)`\n  flex-direction: column;\n  align-items: stretch;\n  position: relative;\n  z-index: 1;\n  pointer-events: auto;\n`;\n\nconst DrawerContentInner = styled(ScrollArea)<{ $isOpen: boolean }>`\n  max-height: ${({ $isOpen }) =>\n    $isOpen\n      ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)\n      : '0'};\n  overflow: hidden;\n  transition: max-height ${(props) => props.theme.motion.timings['200']}\n    ${(props) => props.theme.motion.easings.easeInOutQuad};\n  z-index: 1;\n  pointer-events: auto;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RootProps {\n  children: React.ReactNode;\n  hasContent?: boolean;\n  hasSideNav?: boolean;\n}\n\nconst Root = ({ children, hasContent = false, hasSideNav = false }: RootProps) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [headerRef, { height: headerHeight }] = useMeasure<HTMLDivElement>();\n\n  // Close drawer when there's no content\n  React.useEffect(() => {\n    if (!hasContent) {\n      setIsOpen(false);\n    }\n  }, [hasContent]);\n\n  return (\n    <ActionsDrawerProvider\n      isOpen={isOpen}\n      setIsOpen={setIsOpen}\n      hasContent={hasContent}\n      hasSideNav={hasSideNav}\n      headerRef={headerRef}\n    >\n      <Box height={`${headerHeight}px`} shrink={0} data-testid=\"actions-drawer-spacer\" />\n      <DrawerContainer $hasSideNav={hasSideNav} $isOpen={isOpen}>\n        {children}\n      </DrawerContainer>\n    </ActionsDrawerProvider>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Overlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst Overlay = () => {\n  const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n  const hasContent = ctx?.hasContent ?? false;\n  const hasSideNav = ctx?.hasSideNav ?? false;\n  const setIsOpen = ctx?.setIsOpen;\n\n  if (!hasContent) {\n    return null;\n  }\n\n  return (\n    <DrawerOverlay\n      $isOpen={isOpen}\n      $hasSideNav={hasSideNav}\n      onClick={() => setIsOpen?.(false)}\n      data-testid=\"actions-drawer-overlay\"\n    />\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n  children: React.ReactNode;\n}\n\nconst Header = ({ children }: HeaderProps) => {\n  const ctx = useActionsDrawer('ActionsDrawer.Header', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n  const hasContent = ctx?.hasContent ?? false;\n  const setIsOpen = ctx?.setIsOpen;\n  const headerRef = ctx?.headerRef;\n  const { formatMessage } = useIntl();\n\n  const toggleOpen = () => {\n    setIsOpen?.((prev: boolean) => !prev);\n  };\n\n  return (\n    <DrawerContent ref={headerRef} background=\"neutral0\">\n      <Flex\n        paddingTop={3}\n        paddingBottom={3}\n        paddingLeft={4}\n        paddingRight={4}\n        gap={3}\n        borderStyle=\"solid\"\n        borderWidth={isOpen ? '1px 0' : '1px 0 0 0'}\n        borderColor=\"neutral150\"\n      >\n        <Flex flex={1} gap={2} alignItems=\"center\" overflow=\"hidden\">\n          {children}\n        </Flex>\n        {hasContent && (\n          <ToggleButton\n            onClick={toggleOpen}\n            label={\n              isOpen\n                ? formatMessage({\n                    id: 'content-manager.actions-drawer.close',\n                    defaultMessage: 'Close more actions',\n                  })\n                : formatMessage({\n                    id: 'content-manager.actions-drawer.open',\n                    defaultMessage: 'Open more actions',\n                  })\n            }\n          >\n            {isOpen ? <CaretUp fill=\"neutral600\" /> : <CaretDown fill=\"neutral600\" />}\n          </ToggleButton>\n        )}\n      </Flex>\n    </DrawerContent>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Content\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ContentProps {\n  children: React.ReactNode;\n}\n\nconst Content = ({ children }: ContentProps) => {\n  const ctx = useActionsDrawer('ActionsDrawer.Content', (s) => s, false);\n  const isOpen = ctx?.isOpen ?? false;\n\n  return (\n    <DrawerContentInner $isOpen={isOpen}>\n      <Flex\n        direction=\"column\"\n        alignItems=\"stretch\"\n        justifyContent=\"flex-start\"\n        padding={{ initial: 4, large: 0 }}\n        background=\"neutral0\"\n      >\n        {children}\n      </Flex>\n    </DrawerContentInner>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ActionsDrawer\n * -----------------------------------------------------------------------------------------------*/\n\nconst ActionsDrawer = {\n  Root,\n  Overlay,\n  Header,\n  Content,\n};\n\nexport { ActionsDrawer, useActionsDrawer };\n"],"names":["ActionsDrawerProvider","useActionsDrawer","createContext","DrawerContainer","styled","Portal","$isOpen","theme","breakpoints","medium","$hasSideNav","WIDTH_SIDE_NAVIGATION","DrawerOverlay","Box","props","motion","timings","easings","easeInOutQuad","ToggleButton","IconButton","colors","neutral200","DrawerContent","Flex","DrawerContentInner","ScrollArea","Root","children","hasContent","hasSideNav","isOpen","setIsOpen","React","useState","headerRef","height","headerHeight","useMeasure","useEffect","_jsxs","_jsx","shrink","data-testid","Overlay","ctx","s","onClick","Header","formatMessage","useIntl","toggleOpen","prev","ref","background","paddingTop","paddingBottom","paddingLeft","paddingRight","gap","borderStyle","borderWidth","borderColor","flex","alignItems","overflow","label","id","defaultMessage","CaretUp","fill","CaretDown","Content","direction","justifyContent","padding","initial","large","ActionsDrawer"],"mappings":"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"}

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

@@ -241,53 +241,47 @@ const PaginationButton = ({ page, children })=>{
             }),
             /*#__PURE__*/ jsxRuntime.jsx(VersionsListItems, {})
         ]
-    }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsxs(ActionsDrawer.ActionsDrawer.Root, {
-                hasContent: true,
-                hasSideNav: true,
-                children: [
-                    /*#__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,
+    }) : /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(ActionsDrawer.ActionsDrawer.Root, {
+            hasContent: true,
+            hasSideNav: true,
+            children: [
+                /*#__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",
-                                    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
-                                        })
+                                    style: {
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap'
+                                    },
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(VersionAuthor, {
+                                        version: currentVersion,
+                                        isCurrent: page === 1 && versions.data.indexOf(currentVersion) === 0
                                     })
-                                }),
-                                currentVersion.status && /*#__PURE__*/ jsxRuntime.jsx(DocumentStatus.DocumentStatus, {
-                                    status: currentVersion.status,
-                                    size: "XS"
                                 })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(ActionsDrawer.ActionsDrawer.Content, {
-                        children: /*#__PURE__*/ jsxRuntime.jsx(VersionsListItems, {})
+                            }),
+                            currentVersion.status && /*#__PURE__*/ jsxRuntime.jsx(DocumentStatus.DocumentStatus, {
+                                status: currentVersion.status,
+                                size: "XS"
+                            })
+                        ]
                     })
-                ]
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                width: "100%",
-                height: "5.7rem"
-            })
-        ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(ActionsDrawer.ActionsDrawer.Content, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(VersionsListItems, {})
+                })
+            ]
+        })
     });
 };
 

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

@@ -1 +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: !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","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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"}
+{"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: !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    </>\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","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

@@ -239,53 +239,47 @@ const PaginationButton = ({ page, children })=>{
             }),
             /*#__PURE__*/ jsx(VersionsListItems, {})
         ]
-    }) : /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsxs(ActionsDrawer.Root, {
-                hasContent: true,
-                hasSideNav: true,
-                children: [
-                    /*#__PURE__*/ jsx(ActionsDrawer.Overlay, {}),
-                    /*#__PURE__*/ jsx(ActionsDrawer.Header, {
-                        children: currentVersion && /*#__PURE__*/ jsxs(Flex, {
-                            gap: 2,
-                            overflow: "hidden",
-                            children: [
-                                /*#__PURE__*/ jsx(Box, {
-                                    flex: 1,
+    }) : /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs(ActionsDrawer.Root, {
+            hasContent: true,
+            hasSideNav: true,
+            children: [
+                /*#__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",
-                                    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
-                                        })
+                                    style: {
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap'
+                                    },
+                                    children: /*#__PURE__*/ jsx(VersionAuthor, {
+                                        version: currentVersion,
+                                        isCurrent: page === 1 && versions.data.indexOf(currentVersion) === 0
                                     })
-                                }),
-                                currentVersion.status && /*#__PURE__*/ jsx(DocumentStatus, {
-                                    status: currentVersion.status,
-                                    size: "XS"
                                 })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(ActionsDrawer.Content, {
-                        children: /*#__PURE__*/ jsx(VersionsListItems, {})
+                            }),
+                            currentVersion.status && /*#__PURE__*/ jsx(DocumentStatus, {
+                                status: currentVersion.status,
+                                size: "XS"
+                            })
+                        ]
                     })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Box, {
-                width: "100%",
-                height: "5.7rem"
-            })
-        ]
+                }),
+                /*#__PURE__*/ jsx(ActionsDrawer.Content, {
+                    children: /*#__PURE__*/ jsx(VersionsListItems, {})
+                })
+            ]
+        })
     });
 };