@strapi/content-manager 5.53.0 → 5.55.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":"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"}
+{"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/components/LeftMenu.js

@@ -8,6 +8,7 @@ var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
 var useContentManagerInitData = require('../hooks/useContentManagerInitData.js');
 var hooks = require('../modules/hooks.js');
+var contentStructure = require('../utils/contentStructure.js');
 var translations = require('../utils/translations.js');
 
 function _interopNamespace(e) {
@@ -30,8 +31,18 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+const COLLAPSED_FOLDERS_KEY = 'STRAPI_CM_COLLAPSED_FOLDERS';
+const getFolderToken = (sectionId, folderId)=>`${sectionId}/${folderId}`;
+const collectFolderTokens = (sectionId, groups, tokens)=>{
+    for (const group of groups){
+        tokens.add(getFolderToken(sectionId, group.id));
+        const childGroups = group.children.filter((child)=>child.type === 'group');
+        collectFolderTokens(sectionId, childGroups, tokens);
+    }
+};
 const LeftMenu = ({ isFullPage = false })=>{
     const [search, setSearch] = React__namespace.useState('');
+    const [storedCollapsedFolders, setStoredCollapsedFolders] = strapiAdmin.useScopedPersistentState(COLLAPSED_FOLDERS_KEY, []);
     const { formatMessage, locale } = reactIntl.useIntl();
     const { search: locationSearch } = reactRouterDom.useLocation();
     const i18nLocale = new URLSearchParams(locationSearch).get('plugins[i18n][locale]');
@@ -39,56 +50,54 @@ const LeftMenu = ({ isFullPage = false })=>{
     const { isLoading } = useContentManagerInitData.useContentManagerInitData();
     const collectionTypeLinks = hooks.useTypedSelector((state)=>state['content-manager'].app.collectionTypeLinks);
     const singleTypeLinks = hooks.useTypedSelector((state)=>state['content-manager'].app.singleTypeLinks);
+    const contentStructure$1 = hooks.useTypedSelector((state)=>state['content-manager'].app.contentStructure);
     const { contains } = designSystem.useFilter(locale, {
         sensitivity: 'base'
     });
     const formatter = designSystem.useCollator(locale, {
         sensitivity: 'base'
     });
-    const menu = React__namespace.useMemo(()=>[
-            {
-                id: 'collectionTypes',
-                title: formatMessage({
-                    id: translations.getTranslation('components.LeftMenu.collection-types'),
-                    defaultMessage: 'Collection Types'
-                }),
-                searchable: true,
-                links: collectionTypeLinks
-            },
-            {
-                id: 'singleTypes',
-                title: formatMessage({
-                    id: translations.getTranslation('components.LeftMenu.single-types'),
-                    defaultMessage: 'Single Types'
-                }),
-                searchable: true,
-                links: singleTypeLinks
-            }
-        ].map((section)=>({
-                ...section,
-                links: section.links/**
-           * Filter by the search value
-           */ .filter((link)=>contains(link.title, search.trim()))/**
-           * Sort correctly using the language
-           */ .sort((a, b)=>formatter.compare(a.title, b.title))/**
-           * Apply the formated strings to the links from react-intl
-           */ .map((link)=>{
-                    return {
-                        ...link,
-                        title: formatMessage({
-                            id: link.title,
-                            defaultMessage: link.title
-                        })
-                    };
-                })
-            })), [
+    const compareLinks = React__namespace.useCallback((a, b)=>{
+        return formatter.compare(a.title, b.title);
+    }, [
+        formatter
+    ]);
+    const collectionTypesLabel = formatMessage({
+        id: translations.getTranslation('components.LeftMenu.collection-types'),
+        defaultMessage: 'Collection Types'
+    });
+    const singleTypesLabel = formatMessage({
+        id: translations.getTranslation('components.LeftMenu.single-types'),
+        defaultMessage: 'Single Types'
+    });
+    const sections = React__namespace.useMemo(()=>{
+        const collectionTypesSection = contentStructure.buildContentStructureSection({
+            id: 'collectionTypes',
+            groups: contentStructure$1?.collectionTypes ?? [],
+            title: collectionTypesLabel,
+            links: collectionTypeLinks,
+            compareLinks
+        });
+        const singleTypesSection = contentStructure.buildContentStructureSection({
+            id: 'singleTypes',
+            groups: contentStructure$1?.singleTypes ?? [],
+            title: singleTypesLabel,
+            links: singleTypeLinks,
+            compareLinks
+        });
+        return [
+            collectionTypesSection,
+            singleTypesSection
+        ];
+    }, [
+        collectionTypesLabel,
         collectionTypeLinks,
-        search,
+        singleTypesLabel,
+        contentStructure$1,
         singleTypeLinks,
-        contains,
-        formatMessage,
-        formatter
+        compareLinks
     ]);
+    const trimmedSearch = search.trim();
     const handleClear = ()=>{
         setSearch('');
     };
@@ -99,6 +108,64 @@ const LeftMenu = ({ isFullPage = false })=>{
         id: translations.getTranslation('header.name'),
         defaultMessage: 'Content Manager'
     });
+    const formatLinkTitle = (link)=>formatMessage({
+            id: link.title,
+            defaultMessage: link.title
+        });
+    const linkTo = (link)=>({
+            pathname: link.to,
+            search: i18nLocale ? `?plugins[i18n][locale]=${i18nLocale}` : ''
+        });
+    const collapsedFolderTokens = Array.isArray(storedCollapsedFolders) ? storedCollapsedFolders : [];
+    const knownFolderTokens = React__namespace.useMemo(()=>{
+        if (!contentStructure$1) {
+            return null;
+        }
+        try {
+            const tokens = new Set();
+            collectFolderTokens('collectionTypes', contentStructure$1.collectionTypes, tokens);
+            collectFolderTokens('singleTypes', contentStructure$1.singleTypes, tokens);
+            return tokens;
+        } catch  {
+            return null;
+        }
+    }, [
+        contentStructure$1
+    ]);
+    const handleFolderToggle = (token, open)=>{
+        setStoredCollapsedFolders((previous)=>{
+            const collapsed = Array.isArray(previous) ? previous : [];
+            const pruned = knownFolderTokens ? collapsed.filter((storedToken)=>knownFolderTokens.has(storedToken)) : collapsed;
+            if (open) {
+                return pruned.filter((storedToken)=>storedToken !== token);
+            }
+            if (pruned.includes(token)) {
+                return pruned;
+            }
+            return [
+                ...pruned,
+                token
+            ];
+        });
+    };
+    const renderMenuItem = (node, depth, sectionId)=>{
+        if (node.type === 'link') {
+            return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Link, {
+                label: formatLinkTitle(node.link),
+                to: linkTo(node.link),
+                depth: depth,
+                bulleted: true
+            }, node.link.uid);
+        }
+        const token = getFolderToken(sectionId, node.id);
+        return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Folder, {
+            label: node.name,
+            depth: depth,
+            open: !collapsedFolderTokens.includes(token),
+            onToggle: (open)=>handleFolderToggle(token, open),
+            children: node.children.map((child)=>renderMenuItem(child, depth + 1, sectionId))
+        }, node.id);
+    };
     // Show loading state while data is being fetched
     if (isLoading) {
         return /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.SubNav.Main, {
@@ -169,19 +236,31 @@ const LeftMenu = ({ isFullPage = false })=>{
             }),
             /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Content, {
                 children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Sections, {
-                    children: menu.map((section)=>{
+                    children: sections.map((section)=>{
+                        const matches = trimmedSearch ? contentStructure.filterTreeLinks({
+                            nodes: section.tree,
+                            matchLink: (link)=>{
+                                return contains(formatLinkTitle(link), trimmedSearch) || contains(link.uid, trimmedSearch);
+                            },
+                            matchFolderName: (name)=>{
+                                return contains(name, trimmedSearch);
+                            }
+                        }).sort((a, b)=>compareLinks(a.link, b.link)) : null;
+                        const count = matches ? matches.length : contentStructure.countTreeLinks(section.tree);
+                        const sectionItems = matches ? matches.map(({ link, path })=>/*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Link, {
+                                label: formatLinkTitle(link),
+                                to: linkTo(link),
+                                bulleted: true,
+                                endAction: path.length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    variant: "pi",
+                                    textColor: "neutral500",
+                                    children: path.join(' / ')
+                                }) : undefined
+                            }, link.uid)) : section.tree.map((node)=>renderMenuItem(node, 0, section.id));
                         return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Section, {
                             label: section.title,
-                            badgeLabel: section.links.length.toString(),
-                            children: section.links.map((link)=>{
-                                return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Link, {
-                                    to: {
-                                        pathname: link.to,
-                                        search: i18nLocale ? `?plugins[i18n][locale]=${i18nLocale}` : ''
-                                    },
-                                    label: link.title
-                                }, link.uid);
-                            })
+                            badgeLabel: count.toString(),
+                            children: sectionItems
                         }, section.id);
                     })
                 })

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

@@ -1 +1 @@
-{"version":3,"file":"LeftMenu.js","sources":["../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { SubNav } from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Flex,\n  Searchbar,\n  useCollator,\n  useFilter,\n  Divider,\n  Loader,\n} from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useLocation } from 'react-router-dom';\n\nimport { useContentManagerInitData } from '../hooks/useContentManagerInitData';\nimport { useTypedSelector } from '../modules/hooks';\nimport { getTranslation } from '../utils/translations';\n\nconst LeftMenu = ({ isFullPage = false }: { isFullPage?: boolean }) => {\n  const [search, setSearch] = React.useState('');\n  const { formatMessage, locale } = useIntl();\n  const { search: locationSearch } = useLocation();\n  const i18nLocale = new URLSearchParams(locationSearch).get('plugins[i18n][locale]');\n\n  // Initialize Content Manager data to ensure links are available\n  const { isLoading } = useContentManagerInitData();\n\n  const collectionTypeLinks = useTypedSelector(\n    (state) => state['content-manager'].app.collectionTypeLinks\n  );\n\n  const singleTypeLinks = useTypedSelector((state) => state['content-manager'].app.singleTypeLinks);\n\n  const { contains } = useFilter(locale, {\n    sensitivity: 'base',\n  });\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const menu = React.useMemo(\n    () =>\n      [\n        {\n          id: 'collectionTypes',\n          title: formatMessage({\n            id: getTranslation('components.LeftMenu.collection-types'),\n            defaultMessage: 'Collection Types',\n          }),\n          searchable: true,\n          links: collectionTypeLinks,\n        },\n        {\n          id: 'singleTypes',\n          title: formatMessage({\n            id: getTranslation('components.LeftMenu.single-types'),\n            defaultMessage: 'Single Types',\n          }),\n          searchable: true,\n          links: singleTypeLinks,\n        },\n      ].map((section) => ({\n        ...section,\n        links: section.links\n          /**\n           * Filter by the search value\n           */\n          .filter((link) => contains(link.title, search.trim()))\n          /**\n           * Sort correctly using the language\n           */\n          .sort((a, b) => formatter.compare(a.title, b.title))\n          /**\n           * Apply the formated strings to the links from react-intl\n           */\n          .map((link) => {\n            return {\n              ...link,\n              title: formatMessage({ id: link.title, defaultMessage: link.title }),\n            };\n          }),\n      })),\n    [collectionTypeLinks, search, singleTypeLinks, contains, formatMessage, formatter]\n  );\n\n  const handleClear = () => {\n    setSearch('');\n  };\n\n  const handleChangeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setSearch(event.target.value);\n  };\n\n  const label = formatMessage({\n    id: getTranslation('header.name'),\n    defaultMessage: 'Content Manager',\n  });\n\n  // Show loading state while data is being fetched\n  if (isLoading) {\n    return (\n      <SubNav.Main aria-label={label} isFullPage={isFullPage}>\n        <SubNav.Header label={label} />\n        <Divider />\n        <Flex padding={4} justifyContent=\"center\">\n          <Loader />\n        </Flex>\n      </SubNav.Main>\n    );\n  }\n\n  const searchBar = (\n    <Flex\n      paddingLeft={{\n        initial: 3,\n        large: 5,\n      }}\n      paddingRight={{\n        initial: 3,\n        large: 5,\n      }}\n      paddingTop={5}\n      paddingBottom={{ initial: 1, large: 0 }}\n      gap={3}\n      direction=\"column\"\n      alignItems=\"stretch\"\n    >\n      <Searchbar\n        value={search}\n        onChange={handleChangeSearch}\n        onClear={handleClear}\n        placeholder={formatMessage({\n          id: 'search.placeholder',\n          defaultMessage: 'Search',\n        })}\n        size=\"S\"\n        // eslint-disable-next-line react/no-children-prop\n        children={undefined}\n        name={'search_contentType'}\n        clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n      />\n    </Flex>\n  );\n\n  return (\n    <SubNav.Main aria-label={label} isFullPage={isFullPage}>\n      <SubNav.Header label={label} />\n      <Divider />\n      <Box\n        position={isFullPage ? 'sticky' : 'static'}\n        top={isFullPage ? '0px' : undefined}\n        zIndex={isFullPage ? 2 : undefined}\n        background={isFullPage ? 'neutral100' : 'neutral0'}\n      >\n        {searchBar}\n      </Box>\n      <SubNav.Content>\n        <SubNav.Sections>\n          {menu.map((section) => {\n            return (\n              <SubNav.Section\n                key={section.id}\n                label={section.title}\n                badgeLabel={section.links.length.toString()}\n              >\n                {section.links.map((link) => {\n                  return (\n                    <SubNav.Link\n                      key={link.uid}\n                      to={{\n                        pathname: link.to,\n                        search: i18nLocale ? `?plugins[i18n][locale]=${i18nLocale}` : '',\n                      }}\n                      label={link.title}\n                    />\n                  );\n                })}\n              </SubNav.Section>\n            );\n          })}\n        </SubNav.Sections>\n      </SubNav.Content>\n    </SubNav.Main>\n  );\n};\n\nexport { LeftMenu };\n"],"names":["LeftMenu","isFullPage","search","setSearch","React","useState","formatMessage","locale","useIntl","locationSearch","useLocation","i18nLocale","URLSearchParams","get","isLoading","useContentManagerInitData","collectionTypeLinks","useTypedSelector","state","app","singleTypeLinks","contains","useFilter","sensitivity","formatter","useCollator","menu","useMemo","id","title","getTranslation","defaultMessage","searchable","links","map","section","filter","link","trim","sort","a","b","compare","handleClear","handleChangeSearch","event","target","value","label","_jsxs","SubNav","Main","aria-label","_jsx","Header","Divider","Flex","padding","justifyContent","Loader","searchBar","paddingLeft","initial","large","paddingRight","paddingTop","paddingBottom","gap","direction","alignItems","Searchbar","onChange","onClear","placeholder","size","children","undefined","name","clearLabel","Box","position","top","zIndex","background","Content","Sections","Section","badgeLabel","length","toString","Link","to","pathname","uid"],"mappings":"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"}
+{"version":3,"file":"LeftMenu.js","sources":["../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { SubNav, useScopedPersistentState } from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Flex,\n  Searchbar,\n  Typography,\n  useCollator,\n  useFilter,\n  Divider,\n  Loader,\n} from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useLocation } from 'react-router-dom';\n\nimport { useContentManagerInitData } from '../hooks/useContentManagerInitData';\nimport { useTypedSelector } from '../modules/hooks';\nimport {\n  countTreeLinks,\n  buildContentStructureSection,\n  filterTreeLinks,\n  type LinkTreeNode,\n} from '../utils/contentStructure';\nimport { getTranslation } from '../utils/translations';\n\nimport type { ContentManagerLink } from '../hooks/useContentManagerInitData';\nimport type { Modules } from '@strapi/types';\n\nconst COLLAPSED_FOLDERS_KEY = 'STRAPI_CM_COLLAPSED_FOLDERS';\n\ntype SectionId = Modules.ContentStructure.ContentStructureSectionKey;\n\nconst getFolderToken = (sectionId: SectionId, folderId: string) => `${sectionId}/${folderId}`;\n\nconst collectFolderTokens = (\n  sectionId: SectionId,\n  groups: Modules.ContentStructure.ResolvedGroupNode[],\n  tokens: Set<string>\n) => {\n  for (const group of groups) {\n    tokens.add(getFolderToken(sectionId, group.id));\n\n    const childGroups = group.children.filter(\n      (child): child is Modules.ContentStructure.ResolvedGroupNode => child.type === 'group'\n    );\n\n    collectFolderTokens(sectionId, childGroups, tokens);\n  }\n};\n\nconst LeftMenu = ({ isFullPage = false }: { isFullPage?: boolean }) => {\n  const [search, setSearch] = React.useState('');\n  const [storedCollapsedFolders, setStoredCollapsedFolders] = useScopedPersistentState<string[]>(\n    COLLAPSED_FOLDERS_KEY,\n    []\n  );\n  const { formatMessage, locale } = useIntl();\n  const { search: locationSearch } = useLocation();\n  const i18nLocale = new URLSearchParams(locationSearch).get('plugins[i18n][locale]');\n\n  // Initialize Content Manager data to ensure links are available\n  const { isLoading } = useContentManagerInitData();\n\n  const collectionTypeLinks = useTypedSelector(\n    (state) => state['content-manager'].app.collectionTypeLinks\n  );\n\n  const singleTypeLinks = useTypedSelector((state) => state['content-manager'].app.singleTypeLinks);\n\n  const contentStructure = useTypedSelector(\n    (state) => state['content-manager'].app.contentStructure\n  );\n\n  const { contains } = useFilter(locale, {\n    sensitivity: 'base',\n  });\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const compareLinks = React.useCallback(\n    (a: ContentManagerLink, b: ContentManagerLink) => {\n      return formatter.compare(a.title, b.title);\n    },\n    [formatter]\n  );\n\n  const collectionTypesLabel = formatMessage({\n    id: getTranslation('components.LeftMenu.collection-types'),\n    defaultMessage: 'Collection Types',\n  });\n\n  const singleTypesLabel = formatMessage({\n    id: getTranslation('components.LeftMenu.single-types'),\n    defaultMessage: 'Single Types',\n  });\n\n  const sections = React.useMemo(() => {\n    const collectionTypesSection = buildContentStructureSection({\n      id: 'collectionTypes',\n      groups: contentStructure?.collectionTypes ?? [],\n      title: collectionTypesLabel,\n      links: collectionTypeLinks,\n      compareLinks,\n    });\n\n    const singleTypesSection = buildContentStructureSection({\n      id: 'singleTypes',\n      groups: contentStructure?.singleTypes ?? [],\n      title: singleTypesLabel,\n      links: singleTypeLinks,\n      compareLinks,\n    });\n\n    return [collectionTypesSection, singleTypesSection];\n  }, [\n    collectionTypesLabel,\n    collectionTypeLinks,\n    singleTypesLabel,\n    contentStructure,\n    singleTypeLinks,\n    compareLinks,\n  ]);\n\n  const trimmedSearch = search.trim();\n\n  const handleClear = () => {\n    setSearch('');\n  };\n\n  const handleChangeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setSearch(event.target.value);\n  };\n\n  const label = formatMessage({\n    id: getTranslation('header.name'),\n    defaultMessage: 'Content Manager',\n  });\n\n  const formatLinkTitle = (link: ContentManagerLink) =>\n    formatMessage({ id: link.title, defaultMessage: link.title });\n\n  const linkTo = (link: ContentManagerLink) => ({\n    pathname: link.to,\n    search: i18nLocale ? `?plugins[i18n][locale]=${i18nLocale}` : '',\n  });\n\n  const collapsedFolderTokens = Array.isArray(storedCollapsedFolders) ? storedCollapsedFolders : [];\n\n  const knownFolderTokens = React.useMemo(() => {\n    if (!contentStructure) {\n      return null;\n    }\n\n    try {\n      const tokens = new Set<string>();\n\n      collectFolderTokens('collectionTypes', contentStructure.collectionTypes, tokens);\n      collectFolderTokens('singleTypes', contentStructure.singleTypes, tokens);\n\n      return tokens;\n    } catch {\n      return null;\n    }\n  }, [contentStructure]);\n\n  const handleFolderToggle = (token: string, open: boolean) => {\n    setStoredCollapsedFolders((previous) => {\n      const collapsed = Array.isArray(previous) ? previous : [];\n\n      const pruned = knownFolderTokens\n        ? collapsed.filter((storedToken) => knownFolderTokens.has(storedToken))\n        : collapsed;\n\n      if (open) {\n        return pruned.filter((storedToken) => storedToken !== token);\n      }\n\n      if (pruned.includes(token)) {\n        return pruned;\n      }\n\n      return [...pruned, token];\n    });\n  };\n\n  const renderMenuItem = (\n    node: LinkTreeNode,\n    depth: number,\n    sectionId: SectionId\n  ): React.ReactNode => {\n    if (node.type === 'link') {\n      return (\n        <SubNav.Link\n          label={formatLinkTitle(node.link)}\n          to={linkTo(node.link)}\n          key={node.link.uid}\n          depth={depth}\n          bulleted\n        />\n      );\n    }\n\n    const token = getFolderToken(sectionId, node.id);\n\n    return (\n      <SubNav.Folder\n        key={node.id}\n        label={node.name}\n        depth={depth}\n        open={!collapsedFolderTokens.includes(token)}\n        onToggle={(open) => handleFolderToggle(token, open)}\n      >\n        {node.children.map((child) => renderMenuItem(child, depth + 1, sectionId))}\n      </SubNav.Folder>\n    );\n  };\n\n  // Show loading state while data is being fetched\n  if (isLoading) {\n    return (\n      <SubNav.Main aria-label={label} isFullPage={isFullPage}>\n        <SubNav.Header label={label} />\n        <Divider />\n        <Flex padding={4} justifyContent=\"center\">\n          <Loader />\n        </Flex>\n      </SubNav.Main>\n    );\n  }\n\n  const searchBar = (\n    <Flex\n      paddingLeft={{\n        initial: 3,\n        large: 5,\n      }}\n      paddingRight={{\n        initial: 3,\n        large: 5,\n      }}\n      paddingTop={5}\n      paddingBottom={{ initial: 1, large: 0 }}\n      gap={3}\n      direction=\"column\"\n      alignItems=\"stretch\"\n    >\n      <Searchbar\n        value={search}\n        onChange={handleChangeSearch}\n        onClear={handleClear}\n        placeholder={formatMessage({\n          id: 'search.placeholder',\n          defaultMessage: 'Search',\n        })}\n        size=\"S\"\n        // eslint-disable-next-line react/no-children-prop\n        children={undefined}\n        name={'search_contentType'}\n        clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n      />\n    </Flex>\n  );\n\n  return (\n    <SubNav.Main aria-label={label} isFullPage={isFullPage}>\n      <SubNav.Header label={label} />\n      <Divider />\n      <Box\n        position={isFullPage ? 'sticky' : 'static'}\n        top={isFullPage ? '0px' : undefined}\n        zIndex={isFullPage ? 2 : undefined}\n        background={isFullPage ? 'neutral100' : 'neutral0'}\n      >\n        {searchBar}\n      </Box>\n      <SubNav.Content>\n        <SubNav.Sections>\n          {sections.map((section) => {\n            const matches = trimmedSearch\n              ? filterTreeLinks({\n                  nodes: section.tree,\n                  matchLink: (link) => {\n                    return (\n                      contains(formatLinkTitle(link), trimmedSearch) ||\n                      contains(link.uid, trimmedSearch)\n                    );\n                  },\n                  matchFolderName: (name) => {\n                    return contains(name, trimmedSearch);\n                  },\n                }).sort((a, b) => compareLinks(a.link, b.link))\n              : null;\n\n            const count = matches ? matches.length : countTreeLinks(section.tree);\n\n            const sectionItems = matches\n              ? matches.map(({ link, path }) => (\n                  <SubNav.Link\n                    label={formatLinkTitle(link)}\n                    to={linkTo(link)}\n                    key={link.uid}\n                    bulleted\n                    endAction={\n                      path.length > 0 ? (\n                        <Typography variant=\"pi\" textColor=\"neutral500\">\n                          {path.join(' / ')}\n                        </Typography>\n                      ) : undefined\n                    }\n                  />\n                ))\n              : section.tree.map((node) => renderMenuItem(node, 0, section.id));\n\n            return (\n              <SubNav.Section key={section.id} label={section.title} badgeLabel={count.toString()}>\n                {sectionItems}\n              </SubNav.Section>\n            );\n          })}\n        </SubNav.Sections>\n      </SubNav.Content>\n    </SubNav.Main>\n  );\n};\n\nexport { LeftMenu };\n"],"names":["COLLAPSED_FOLDERS_KEY","getFolderToken","sectionId","folderId","collectFolderTokens","groups","tokens","group","add","id","childGroups","children","filter","child","type","LeftMenu","isFullPage","search","setSearch","React","useState","storedCollapsedFolders","setStoredCollapsedFolders","useScopedPersistentState","formatMessage","locale","useIntl","locationSearch","useLocation","i18nLocale","URLSearchParams","get","isLoading","useContentManagerInitData","collectionTypeLinks","useTypedSelector","state","app","singleTypeLinks","contentStructure","contains","useFilter","sensitivity","formatter","useCollator","compareLinks","useCallback","a","b","compare","title","collectionTypesLabel","getTranslation","defaultMessage","singleTypesLabel","sections","useMemo","collectionTypesSection","buildContentStructureSection","collectionTypes","links","singleTypesSection","singleTypes","trimmedSearch","trim","handleClear","handleChangeSearch","event","target","value","label","formatLinkTitle","link","linkTo","pathname","to","collapsedFolderTokens","Array","isArray","knownFolderTokens","Set","handleFolderToggle","token","open","previous","collapsed","pruned","storedToken","has","includes","renderMenuItem","node","depth","_jsx","SubNav","Link","bulleted","uid","Folder","name","onToggle","map","_jsxs","Main","aria-label","Header","Divider","Flex","padding","justifyContent","Loader","searchBar","paddingLeft","initial","large","paddingRight","paddingTop","paddingBottom","gap","direction","alignItems","Searchbar","onChange","onClear","placeholder","size","undefined","clearLabel","Box","position","top","zIndex","background","Content","Sections","section","matches","filterTreeLinks","nodes","tree","matchLink","matchFolderName","sort","count","length","countTreeLinks","sectionItems","path","endAction","Typography","variant","textColor","join","Section","badgeLabel","toString"],"mappings":"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"}