@strapi/content-manager 5.33.4 → 5.35.0

package/dist/admin/components/ActionsDrawer.js

@@ -0,0 +1,204 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const [ActionsDrawerProvider, useActionsDrawer] = strapiAdmin.createContext('ActionsDrawer', null);
+/* -------------------------------------------------------------------------------------------------
+ * Styled Components
+ * -----------------------------------------------------------------------------------------------*/ const DrawerContainer = styledComponents.styled(designSystem.Portal)`
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-end;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    left: ${({ $hasSideNav })=>$hasSideNav ? strapiAdmin.WIDTH_SIDE_NAVIGATION : 0};
+  }
+`;
+const DrawerOverlay = styledComponents.styled(designSystem.Box)`
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity ${(props)=>props.theme.motion.timings['200']}
+    ${(props)=>props.theme.motion.easings.easeInOutQuad};
+  opacity: ${({ $isOpen })=>$isOpen ? 1 : 0};
+  pointer-events: ${({ $isOpen })=>$isOpen ? 'auto' : 'none'};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    left: ${({ $hasSideNav })=>$hasSideNav ? strapiAdmin.WIDTH_SIDE_NAVIGATION : 0};
+  }
+`;
+const ToggleButton = styledComponents.styled(designSystem.IconButton)`
+  padding: 0;
+  border: none;
+  background: ${({ theme })=>theme.colors.neutral200};
+  width: 3.2rem;
+  height: 3.2rem;
+  border-radius: 1.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const DrawerContent = styledComponents.styled(designSystem.Flex)`
+  flex-direction: column;
+  align-items: stretch;
+  position: relative;
+  z-index: 1;
+  pointer-events: auto;
+`;
+const DrawerContentInner = styledComponents.styled(designSystem.ScrollArea)`
+  max-height: ${({ $isOpen })=>$isOpen ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)
+     : '0'};
+  overflow: hidden;
+  transition: max-height ${(props)=>props.theme.motion.timings['200']}
+    ${(props)=>props.theme.motion.easings.easeInOutQuad};
+  z-index: 1;
+  pointer-events: auto;
+`;
+const Root = ({ children, hasContent = false, hasSideNav = false })=>{
+    const [isOpen, setIsOpen] = React__namespace.useState(false);
+    // Close drawer when there's no content
+    React__namespace.useEffect(()=>{
+        if (!hasContent) {
+            setIsOpen(false);
+        }
+    }, [
+        hasContent
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(ActionsDrawerProvider, {
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        hasContent: hasContent,
+        hasSideNav: hasSideNav,
+        children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContainer, {
+            $hasSideNav: hasSideNav,
+            children: children
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Overlay
+ * -----------------------------------------------------------------------------------------------*/ const Overlay = ()=>{
+    const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s)=>s, false);
+    const isOpen = ctx?.isOpen ?? false;
+    const hasContent = ctx?.hasContent ?? false;
+    const hasSideNav = ctx?.hasSideNav ?? false;
+    const setIsOpen = ctx?.setIsOpen;
+    if (!hasContent) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(DrawerOverlay, {
+        $isOpen: isOpen,
+        $hasSideNav: hasSideNav,
+        onClick: ()=>setIsOpen?.(false),
+        "data-testid": "actions-drawer-overlay"
+    });
+};
+const Header = ({ children })=>{
+    const ctx = useActionsDrawer('ActionsDrawer.Header', (s)=>s, false);
+    const isOpen = ctx?.isOpen ?? false;
+    const hasContent = ctx?.hasContent ?? false;
+    const setIsOpen = ctx?.setIsOpen;
+    const { formatMessage } = reactIntl.useIntl();
+    const toggleOpen = ()=>{
+        setIsOpen?.((prev)=>!prev);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(DrawerContent, {
+        background: "neutral0",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            paddingTop: 3,
+            paddingBottom: 3,
+            paddingLeft: 4,
+            paddingRight: 4,
+            gap: 3,
+            borderStyle: "solid",
+            borderWidth: isOpen ? '1px 0' : '1px 0 0 0',
+            borderColor: "neutral150",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    flex: 1,
+                    gap: 2,
+                    alignItems: "center",
+                    children: children
+                }),
+                hasContent && /*#__PURE__*/ jsxRuntime.jsx(ToggleButton, {
+                    onClick: toggleOpen,
+                    label: isOpen ? formatMessage({
+                        id: 'content-manager.actions-drawer.close',
+                        defaultMessage: 'Close more actions'
+                    }) : formatMessage({
+                        id: 'content-manager.actions-drawer.open',
+                        defaultMessage: 'Open more actions'
+                    }),
+                    children: isOpen ? /*#__PURE__*/ jsxRuntime.jsx(Icons.CaretUp, {
+                        fill: "neutral600"
+                    }) : /*#__PURE__*/ jsxRuntime.jsx(Icons.CaretDown, {
+                        fill: "neutral600"
+                    })
+                })
+            ]
+        })
+    });
+};
+const Content = ({ children })=>{
+    const ctx = useActionsDrawer('ActionsDrawer.Content', (s)=>s, false);
+    const isOpen = ctx?.isOpen ?? false;
+    return /*#__PURE__*/ jsxRuntime.jsx(DrawerContentInner, {
+        $isOpen: isOpen,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            justifyContent: "flex-start",
+            padding: {
+                initial: 4,
+                large: 0
+            },
+            background: "neutral0",
+            children: children
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * ActionsDrawer
+ * -----------------------------------------------------------------------------------------------*/ const ActionsDrawer = {
+    Root,
+    Overlay,
+    Header,
+    Content
+};
+
+exports.ActionsDrawer = ActionsDrawer;
+//# sourceMappingURL=ActionsDrawer.js.map

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

@@ -0,0 +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 }>`\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: flex-end;\n\n  ${({ theme }) => theme.breakpoints.medium} {\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}>{children}</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\">\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 };\n"],"names":["ActionsDrawerProvider","useActionsDrawer","createContext","DrawerContainer","styled","Portal","theme","breakpoints","medium","$hasSideNav","WIDTH_SIDE_NAVIGATION","DrawerOverlay","Box","props","motion","timings","easings","easeInOutQuad","$isOpen","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","label","id","defaultMessage","CaretUp","fill","CaretDown","Content","direction","justifyContent","padding","initial","large","ActionsDrawer"],"mappings":"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"}

package/dist/admin/components/ActionsDrawer.mjs

@@ -0,0 +1,183 @@
+import { jsx, jsxs } 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 { CaretUp, CaretDown } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+
+const [ActionsDrawerProvider, useActionsDrawer] = createContext('ActionsDrawer', null);
+/* -------------------------------------------------------------------------------------------------
+ * Styled Components
+ * -----------------------------------------------------------------------------------------------*/ const DrawerContainer = styled(Portal)`
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-end;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    left: ${({ $hasSideNav })=>$hasSideNav ? WIDTH_SIDE_NAVIGATION : 0};
+  }
+`;
+const DrawerOverlay = styled(Box)`
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity ${(props)=>props.theme.motion.timings['200']}
+    ${(props)=>props.theme.motion.easings.easeInOutQuad};
+  opacity: ${({ $isOpen })=>$isOpen ? 1 : 0};
+  pointer-events: ${({ $isOpen })=>$isOpen ? 'auto' : 'none'};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    left: ${({ $hasSideNav })=>$hasSideNav ? WIDTH_SIDE_NAVIGATION : 0};
+  }
+`;
+const ToggleButton = styled(IconButton)`
+  padding: 0;
+  border: none;
+  background: ${({ theme })=>theme.colors.neutral200};
+  width: 3.2rem;
+  height: 3.2rem;
+  border-radius: 1.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const DrawerContent = styled(Flex)`
+  flex-direction: column;
+  align-items: stretch;
+  position: relative;
+  z-index: 1;
+  pointer-events: auto;
+`;
+const DrawerContentInner = styled(ScrollArea)`
+  max-height: ${({ $isOpen })=>$isOpen ? 'calc(100vh - 25rem)' // 25rem is arbitrary, to be able to see a bit of the content behind (navigation and header)
+     : '0'};
+  overflow: hidden;
+  transition: max-height ${(props)=>props.theme.motion.timings['200']}
+    ${(props)=>props.theme.motion.easings.easeInOutQuad};
+  z-index: 1;
+  pointer-events: auto;
+`;
+const Root = ({ children, hasContent = false, hasSideNav = false })=>{
+    const [isOpen, setIsOpen] = React.useState(false);
+    // Close drawer when there's no content
+    React.useEffect(()=>{
+        if (!hasContent) {
+            setIsOpen(false);
+        }
+    }, [
+        hasContent
+    ]);
+    return /*#__PURE__*/ jsx(ActionsDrawerProvider, {
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        hasContent: hasContent,
+        hasSideNav: hasSideNav,
+        children: /*#__PURE__*/ jsx(DrawerContainer, {
+            $hasSideNav: hasSideNav,
+            children: children
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Overlay
+ * -----------------------------------------------------------------------------------------------*/ const Overlay = ()=>{
+    const ctx = useActionsDrawer('ActionsDrawer.Overlay', (s)=>s, false);
+    const isOpen = ctx?.isOpen ?? false;
+    const hasContent = ctx?.hasContent ?? false;
+    const hasSideNav = ctx?.hasSideNav ?? false;
+    const setIsOpen = ctx?.setIsOpen;
+    if (!hasContent) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(DrawerOverlay, {
+        $isOpen: isOpen,
+        $hasSideNav: hasSideNav,
+        onClick: ()=>setIsOpen?.(false),
+        "data-testid": "actions-drawer-overlay"
+    });
+};
+const Header = ({ children })=>{
+    const ctx = useActionsDrawer('ActionsDrawer.Header', (s)=>s, false);
+    const isOpen = ctx?.isOpen ?? false;
+    const hasContent = ctx?.hasContent ?? false;
+    const setIsOpen = ctx?.setIsOpen;
+    const { formatMessage } = useIntl();
+    const toggleOpen = ()=>{
+        setIsOpen?.((prev)=>!prev);
+    };
+    return /*#__PURE__*/ jsx(DrawerContent, {
+        background: "neutral0",
+        children: /*#__PURE__*/ jsxs(Flex, {
+            paddingTop: 3,
+            paddingBottom: 3,
+            paddingLeft: 4,
+            paddingRight: 4,
+            gap: 3,
+            borderStyle: "solid",
+            borderWidth: isOpen ? '1px 0' : '1px 0 0 0',
+            borderColor: "neutral150",
+            children: [
+                /*#__PURE__*/ jsx(Flex, {
+                    flex: 1,
+                    gap: 2,
+                    alignItems: "center",
+                    children: children
+                }),
+                hasContent && /*#__PURE__*/ jsx(ToggleButton, {
+                    onClick: toggleOpen,
+                    label: isOpen ? formatMessage({
+                        id: 'content-manager.actions-drawer.close',
+                        defaultMessage: 'Close more actions'
+                    }) : formatMessage({
+                        id: 'content-manager.actions-drawer.open',
+                        defaultMessage: 'Open more actions'
+                    }),
+                    children: isOpen ? /*#__PURE__*/ jsx(CaretUp, {
+                        fill: "neutral600"
+                    }) : /*#__PURE__*/ jsx(CaretDown, {
+                        fill: "neutral600"
+                    })
+                })
+            ]
+        })
+    });
+};
+const Content = ({ children })=>{
+    const ctx = useActionsDrawer('ActionsDrawer.Content', (s)=>s, false);
+    const isOpen = ctx?.isOpen ?? false;
+    return /*#__PURE__*/ jsx(DrawerContentInner, {
+        $isOpen: isOpen,
+        children: /*#__PURE__*/ jsx(Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            justifyContent: "flex-start",
+            padding: {
+                initial: 4,
+                large: 0
+            },
+            background: "neutral0",
+            children: children
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * ActionsDrawer
+ * -----------------------------------------------------------------------------------------------*/ const ActionsDrawer = {
+    Root,
+    Overlay,
+    Header,
+    Content
+};
+
+export { ActionsDrawer };
+//# sourceMappingURL=ActionsDrawer.mjs.map

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

@@ -0,0 +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 }>`\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: flex-end;\n\n  ${({ theme }) => theme.breakpoints.medium} {\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}>{children}</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\">\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 };\n"],"names":["ActionsDrawerProvider","useActionsDrawer","createContext","DrawerContainer","styled","Portal","theme","breakpoints","medium","$hasSideNav","WIDTH_SIDE_NAVIGATION","DrawerOverlay","Box","props","motion","timings","easings","easeInOutQuad","$isOpen","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","label","id","defaultMessage","CaretUp","fill","CaretDown","Content","direction","justifyContent","padding","initial","large","ActionsDrawer"],"mappings":";;;;;;;;AA6BA,MAAM,CAACA,qBAAAA,EAAuBC,gBAAiB,CAAA,GAAGC,cAChD,eACA,EAAA,IAAA,CAAA;AAGF;;AAEkG,qGAElG,MAAMC,eAAAA,GAAkBC,MAAOC,CAAAA,MAAAA,CAAiC;;;;;;;;;;;EAW9D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,MAAM,CAAC;AAClC,UAAA,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,WAAAA,GAAcC,wBAAwB,CAAG,CAAA;;AAE3E,CAAC;AAED,MAAMC,aAAAA,GAAgBP,MAAOQ,CAAAA,GAAAA,CAAgD;;;;;;;sBAOvD,EAAE,CAACC,KAAUA,GAAAA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACC,OAAO,CAAC,KAAA,CAAM;IAChE,EAAE,CAACF,KAAUA,GAAAA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACE,OAAO,CAACC,aAAa,CAAC;AAC/C,WAAA,EAAE,CAAC,EAAEC,OAAO,EAAE,GAAMA,OAAAA,GAAU,IAAI,CAAG,CAAA;AAC9B,kBAAA,EAAE,CAAC,EAAEA,OAAO,EAAE,GAAMA,OAAAA,GAAU,SAAS,MAAQ,CAAA;;EAE/D,EAAE,CAAC,EAAEZ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,MAAM,CAAC;AAClC,UAAA,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,WAAAA,GAAcC,wBAAwB,CAAG,CAAA;;AAE3E,CAAC;AAED,MAAMS,YAAAA,GAAef,MAAOgB,CAAAA,UAAAA,CAAW;;;cAGzB,EAAE,CAAC,EAAEd,KAAK,EAAE,GAAKA,KAAMe,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;;AAOvD,CAAC;AAED,MAAMC,aAAAA,GAAgBnB,MAAOoB,CAAAA,IAAAA,CAAK;;;;;;AAMlC,CAAC;AAED,MAAMC,kBAAAA,GAAqBrB,MAAOsB,CAAAA,UAAAA,CAAiC;AACrD,cAAA,EAAE,CAAC,EAAER,OAAO,EAAE,GACxBA,OAAAA,GACI;OACA,GAAI,CAAA;;yBAEa,EAAE,CAACL,KAAUA,GAAAA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACC,OAAO,CAAC,KAAA,CAAM;IACnE,EAAE,CAACF,KAAUA,GAAAA,KAAAA,CAAMP,KAAK,CAACQ,MAAM,CAACE,OAAO,CAACC,aAAa,CAAC;;;AAG1D,CAAC;AAYD,MAAMU,IAAAA,GAAO,CAAC,EAAEC,QAAQ,EAAEC,aAAa,KAAK,EAAEC,UAAa,GAAA,KAAK,EAAa,GAAA;AAC3E,IAAA,MAAM,CAACC,MAAQC,EAAAA,SAAAA,CAAU,GAAGC,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;;AAG3CD,IAAAA,KAAAA,CAAME,SAAS,CAAC,IAAA;AACd,QAAA,IAAI,CAACN,UAAY,EAAA;YACfG,SAAU,CAAA,KAAA,CAAA;AACZ;KACC,EAAA;AAACH,QAAAA;AAAW,KAAA,CAAA;AAEf,IAAA,qBACEO,GAACpC,CAAAA,qBAAAA,EAAAA;QACC+B,MAAQA,EAAAA,MAAAA;QACRC,SAAWA,EAAAA,SAAAA;QACXH,UAAYA,EAAAA,UAAAA;QACZC,UAAYA,EAAAA,UAAAA;AAEZ,QAAA,QAAA,gBAAAM,GAACjC,CAAAA,eAAAA,EAAAA;YAAgBM,WAAaqB,EAAAA,UAAAA;AAAaF,YAAAA,QAAAA,EAAAA;;;AAGjD,CAAA;AAEA;;AAEkG,qGAElG,MAAMS,OAAU,GAAA,IAAA;AACd,IAAA,MAAMC,GAAMrC,GAAAA,gBAAAA,CAAiB,uBAAyB,EAAA,CAACsC,IAAMA,CAAG,EAAA,KAAA,CAAA;IAChE,MAAMR,MAAAA,GAASO,KAAKP,MAAU,IAAA,KAAA;IAC9B,MAAMF,UAAAA,GAAaS,KAAKT,UAAc,IAAA,KAAA;IACtC,MAAMC,UAAAA,GAAaQ,KAAKR,UAAc,IAAA,KAAA;AACtC,IAAA,MAAME,YAAYM,GAAKN,EAAAA,SAAAA;AAEvB,IAAA,IAAI,CAACH,UAAY,EAAA;QACf,OAAO,IAAA;AACT;AAEA,IAAA,qBACEO,GAACzB,CAAAA,aAAAA,EAAAA;QACCO,OAASa,EAAAA,MAAAA;QACTtB,WAAaqB,EAAAA,UAAAA;AACbU,QAAAA,OAAAA,EAAS,IAAMR,SAAY,GAAA,KAAA,CAAA;QAC3BS,aAAY,EAAA;;AAGlB,CAAA;AAUA,MAAMC,MAAS,GAAA,CAAC,EAAEd,QAAQ,EAAe,GAAA;AACvC,IAAA,MAAMU,GAAMrC,GAAAA,gBAAAA,CAAiB,sBAAwB,EAAA,CAACsC,IAAMA,CAAG,EAAA,KAAA,CAAA;IAC/D,MAAMR,MAAAA,GAASO,KAAKP,MAAU,IAAA,KAAA;IAC9B,MAAMF,UAAAA,GAAaS,KAAKT,UAAc,IAAA,KAAA;AACtC,IAAA,MAAMG,YAAYM,GAAKN,EAAAA,SAAAA;IACvB,MAAM,EAAEW,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,UAAa,GAAA,IAAA;QACjBb,SAAY,GAAA,CAACc,OAAkB,CAACA,IAAAA,CAAAA;AAClC,KAAA;AAEA,IAAA,qBACEV,GAACb,CAAAA,aAAAA,EAAAA;QAAcwB,UAAW,EAAA,UAAA;AACxB,QAAA,QAAA,gBAAAC,IAACxB,CAAAA,IAAAA,EAAAA;YACCyB,UAAY,EAAA,CAAA;YACZC,aAAe,EAAA,CAAA;YACfC,WAAa,EAAA,CAAA;YACbC,YAAc,EAAA,CAAA;YACdC,GAAK,EAAA,CAAA;YACLC,WAAY,EAAA,OAAA;AACZC,YAAAA,WAAAA,EAAaxB,SAAS,OAAU,GAAA,WAAA;YAChCyB,WAAY,EAAA,YAAA;;8BAEZpB,GAACZ,CAAAA,IAAAA,EAAAA;oBAAKiC,IAAM,EAAA,CAAA;oBAAGJ,GAAK,EAAA,CAAA;oBAAGK,UAAW,EAAA,QAAA;AAC/B9B,oBAAAA,QAAAA,EAAAA;;AAEFC,gBAAAA,UAAAA,kBACCO,GAACjB,CAAAA,YAAAA,EAAAA;oBACCqB,OAASK,EAAAA,UAAAA;AACTc,oBAAAA,KAAAA,EACE5B,SACIY,aAAc,CAAA;wBACZiB,EAAI,EAAA,sCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA,CAAA,GACAlB,aAAc,CAAA;wBACZiB,EAAI,EAAA,qCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA,CAAA;AAGL9B,oBAAAA,QAAAA,EAAAA,MAAAA,iBAASK,GAAC0B,CAAAA,OAAAA,EAAAA;wBAAQC,IAAK,EAAA;uCAAkB3B,GAAC4B,CAAAA,SAAAA,EAAAA;wBAAUD,IAAK,EAAA;;;;;;AAMtE,CAAA;AAUA,MAAME,OAAU,GAAA,CAAC,EAAErC,QAAQ,EAAgB,GAAA;AACzC,IAAA,MAAMU,GAAMrC,GAAAA,gBAAAA,CAAiB,uBAAyB,EAAA,CAACsC,IAAMA,CAAG,EAAA,KAAA,CAAA;IAChE,MAAMR,MAAAA,GAASO,KAAKP,MAAU,IAAA,KAAA;AAE9B,IAAA,qBACEK,GAACX,CAAAA,kBAAAA,EAAAA;QAAmBP,OAASa,EAAAA,MAAAA;AAC3B,QAAA,QAAA,gBAAAK,GAACZ,CAAAA,IAAAA,EAAAA;YACC0C,SAAU,EAAA,QAAA;YACVR,UAAW,EAAA,SAAA;YACXS,cAAe,EAAA,YAAA;YACfC,OAAS,EAAA;gBAAEC,OAAS,EAAA,CAAA;gBAAGC,KAAO,EAAA;AAAE,aAAA;YAChCvB,UAAW,EAAA,UAAA;AAEVnB,YAAAA,QAAAA,EAAAA;;;AAIT,CAAA;AAEA;;AAEkG,2GAE5F2C,aAAgB,GAAA;AACpB5C,IAAAA,IAAAA;AACAU,IAAAA,OAAAA;AACAK,IAAAA,MAAAA;AACAuB,IAAAA;AACF;;;;"}

package/dist/admin/components/LeftMenu.js

@@ -148,23 +148,28 @@ const LeftMenu = ({ isFullPage = false })=>{
             }),
             /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.SubNav.Content, {
                 children: [
-                    isFullPage && /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Header, {
-                        label: label
+                    isFullPage && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Header, {
+                                label: label
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {})
+                        ]
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                         paddingLeft: {
-                            initial: 4,
+                            initial: 3,
                             large: 5
                         },
                         paddingRight: {
-                            initial: 4,
+                            initial: 3,
                             large: 5
                         },
-                        paddingTop: isFullPage ? 0 : {
-                            initial: 4,
-                            large: 5
+                        paddingTop: 5,
+                        paddingBottom: {
+                            initial: 1,
+                            large: 0
                         },
-                        paddingBottom: 0,
                         gap: 3,
                         direction: "column",
                         alignItems: "stretch",

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 { useQueryParams, SubNav } from '@strapi/admin/strapi-admin';\nimport { Flex, Searchbar, useCollator, useFilter, Divider, Loader } from '@strapi/design-system';\nimport { parse, stringify } from 'qs';\nimport { useIntl } from 'react-intl';\n\nimport { useContentManagerInitData } from '../hooks/useContentManagerInitData';\nimport { useContentTypeSchema } from '../hooks/useContentTypeSchema';\nimport { useTypedSelector } from '../modules/hooks';\nimport { getTranslation } from '../utils/translations';\n\nimport type { ContentManagerLink } from '../hooks/useContentManagerInitData';\n\nconst LeftMenu = ({ isFullPage = false }: { isFullPage?: boolean }) => {\n  const [search, setSearch] = React.useState('');\n  const [{ query }] = useQueryParams<{ plugins?: object }>();\n  const { formatMessage, locale } = useIntl();\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  const { schemas } = useContentTypeSchema();\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  const getPluginsParamsForLink = (link: ContentManagerLink) => {\n    const schema = schemas.find((schema) => schema.uid === link.uid);\n    const isI18nEnabled = Boolean((schema?.pluginOptions?.i18n as any)?.localized);\n\n    // The search params have the i18n plugin\n    if (query.plugins && 'i18n' in query.plugins) {\n      // Prepare removal of i18n from the plugins search params\n      const { i18n, ...restPlugins } = query.plugins;\n\n      // i18n is not enabled, remove it from the plugins search params\n      if (!isI18nEnabled) {\n        return restPlugins;\n      }\n\n      // i18n is enabled, put the plugins search params back together\n      return { i18n, ...restPlugins };\n    }\n\n    return query.plugins;\n  };\n\n  // Show loading state while data is being fetched\n  if (isLoading) {\n    return (\n      <SubNav.Main aria-label={label}>\n        <SubNav.Header label={label} />\n        <Divider />\n        <Flex padding={4} justifyContent=\"center\">\n          <Loader />\n        </Flex>\n      </SubNav.Main>\n    );\n  }\n\n  return (\n    <SubNav.Main aria-label={label}>\n      {!isFullPage && (\n        <>\n          <SubNav.Header label={label} />\n          <Divider />\n        </>\n      )}\n      <SubNav.Content>\n        {isFullPage && <SubNav.Header label={label} />}\n        <Flex\n          paddingLeft={{\n            initial: 4,\n            large: 5,\n          }}\n          paddingRight={{\n            initial: 4,\n            large: 5,\n          }}\n          paddingTop={\n            isFullPage\n              ? 0\n              : {\n                  initial: 4,\n                  large: 5,\n                }\n          }\n          paddingBottom={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        <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: stringify({\n                          ...parse(link.search ?? ''),\n                          plugins: getPluginsParamsForLink(link),\n                        }),\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","query","useQueryParams","formatMessage","locale","useIntl","isLoading","useContentManagerInitData","collectionTypeLinks","useTypedSelector","state","app","singleTypeLinks","schemas","useContentTypeSchema","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","getPluginsParamsForLink","schema","find","uid","isI18nEnabled","Boolean","pluginOptions","i18n","localized","plugins","restPlugins","_jsxs","SubNav","Main","aria-label","_jsx","Header","Divider","Flex","padding","justifyContent","Loader","_Fragment","Content","paddingLeft","initial","large","paddingRight","paddingTop","paddingBottom","gap","direction","alignItems","Searchbar","onChange","onClear","placeholder","size","children","undefined","name","clearLabel","Sections","Section","badgeLabel","length","toString","Link","to","pathname","stringify","parse"],"mappings":"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"}
+{"version":3,"file":"LeftMenu.js","sources":["../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, SubNav } from '@strapi/admin/strapi-admin';\nimport { Flex, Searchbar, useCollator, useFilter, Divider, Loader } from '@strapi/design-system';\nimport { parse, stringify } from 'qs';\nimport { useIntl } from 'react-intl';\n\nimport { useContentManagerInitData } from '../hooks/useContentManagerInitData';\nimport { useContentTypeSchema } from '../hooks/useContentTypeSchema';\nimport { useTypedSelector } from '../modules/hooks';\nimport { getTranslation } from '../utils/translations';\n\nimport type { ContentManagerLink } from '../hooks/useContentManagerInitData';\n\nconst LeftMenu = ({ isFullPage = false }: { isFullPage?: boolean }) => {\n  const [search, setSearch] = React.useState('');\n  const [{ query }] = useQueryParams<{ plugins?: object }>();\n  const { formatMessage, locale } = useIntl();\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  const { schemas } = useContentTypeSchema();\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  const getPluginsParamsForLink = (link: ContentManagerLink) => {\n    const schema = schemas.find((schema) => schema.uid === link.uid);\n    const isI18nEnabled = Boolean((schema?.pluginOptions?.i18n as any)?.localized);\n\n    // The search params have the i18n plugin\n    if (query.plugins && 'i18n' in query.plugins) {\n      // Prepare removal of i18n from the plugins search params\n      const { i18n, ...restPlugins } = query.plugins;\n\n      // i18n is not enabled, remove it from the plugins search params\n      if (!isI18nEnabled) {\n        return restPlugins;\n      }\n\n      // i18n is enabled, put the plugins search params back together\n      return { i18n, ...restPlugins };\n    }\n\n    return query.plugins;\n  };\n\n  // Show loading state while data is being fetched\n  if (isLoading) {\n    return (\n      <SubNav.Main aria-label={label}>\n        <SubNav.Header label={label} />\n        <Divider />\n        <Flex padding={4} justifyContent=\"center\">\n          <Loader />\n        </Flex>\n      </SubNav.Main>\n    );\n  }\n\n  return (\n    <SubNav.Main aria-label={label}>\n      {!isFullPage && (\n        <>\n          <SubNav.Header label={label} />\n          <Divider />\n        </>\n      )}\n      <SubNav.Content>\n        {isFullPage && (\n          <>\n            <SubNav.Header label={label} />\n            <Divider />\n          </>\n        )}\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        <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: stringify({\n                          ...parse(link.search ?? ''),\n                          plugins: getPluginsParamsForLink(link),\n                        }),\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","query","useQueryParams","formatMessage","locale","useIntl","isLoading","useContentManagerInitData","collectionTypeLinks","useTypedSelector","state","app","singleTypeLinks","schemas","useContentTypeSchema","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","getPluginsParamsForLink","schema","find","uid","isI18nEnabled","Boolean","pluginOptions","i18n","localized","plugins","restPlugins","_jsxs","SubNav","Main","aria-label","_jsx","Header","Divider","Flex","padding","justifyContent","Loader","_Fragment","Content","paddingLeft","initial","large","paddingRight","paddingTop","paddingBottom","gap","direction","alignItems","Searchbar","onChange","onClear","placeholder","size","children","undefined","name","clearLabel","Sections","Section","badgeLabel","length","toString","Link","to","pathname","stringify","parse"],"mappings":"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"}

package/dist/admin/components/LeftMenu.mjs

@@ -127,23 +127,28 @@ const LeftMenu = ({ isFullPage = false })=>{
             }),
             /*#__PURE__*/ jsxs(SubNav.Content, {
                 children: [
-                    isFullPage && /*#__PURE__*/ jsx(SubNav.Header, {
-                        label: label
+                    isFullPage && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(SubNav.Header, {
+                                label: label
+                            }),
+                            /*#__PURE__*/ jsx(Divider, {})
+                        ]
                     }),
                     /*#__PURE__*/ jsx(Flex, {
                         paddingLeft: {
-                            initial: 4,
+                            initial: 3,
                             large: 5
                         },
                         paddingRight: {
-                            initial: 4,
+                            initial: 3,
                             large: 5
                         },
-                        paddingTop: isFullPage ? 0 : {
-                            initial: 4,
-                            large: 5
+                        paddingTop: 5,
+                        paddingBottom: {
+                            initial: 1,
+                            large: 0
                         },
-                        paddingBottom: 0,
                         gap: 3,
                         direction: "column",
                         alignItems: "stretch",