@strapi/admin 5.26.0 → 5.27.0

package/dist/admin/admin/src/components/Layouts/ContentLayout.js

@@ -3,11 +3,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
+var theme = require('../../constants/theme.js');
 
 const ContentLayout = ({ children })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-        paddingLeft: 10,
-        paddingRight: 10,
+        paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
         children: children
     });
 };

package/dist/admin/admin/src/components/Layouts/ContentLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.js","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={10} paddingRight={10}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","paddingRight"],"mappings":";;;;;;AAQA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;QAAIC,WAAa,EAAA,EAAA;QAAIC,YAAc,EAAA,EAAA;AACjCJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}
+{"version":3,"file":"ContentLayout.js","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={RESPONSIVE_DEFAULT_SPACING} paddingRight={RESPONSIVE_DEFAULT_SPACING}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight"],"mappings":";;;;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;QAAIC,WAAaC,EAAAA,gCAAAA;QAA4BC,YAAcD,EAAAA,gCAAAA;AACzDJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/admin/src/components/Layouts/ContentLayout.mjs

@@ -1,11 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { Box } from '@strapi/design-system';
+import { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme.mjs';
 
 const ContentLayout = ({ children })=>{
     return /*#__PURE__*/ jsx(Box, {
-        paddingLeft: 10,
-        paddingRight: 10,
+        paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: RESPONSIVE_DEFAULT_SPACING,
         children: children
     });
 };

package/dist/admin/admin/src/components/Layouts/ContentLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={10} paddingRight={10}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","paddingRight"],"mappings":";;;;AAQA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;QAAIC,WAAa,EAAA,EAAA;QAAIC,YAAc,EAAA,EAAA;AACjCJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}
+{"version":3,"file":"ContentLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={RESPONSIVE_DEFAULT_SPACING} paddingRight={RESPONSIVE_DEFAULT_SPACING}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight"],"mappings":";;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;QAAIC,WAAaC,EAAAA,0BAAAA;QAA4BC,YAAcD,EAAAA,0BAAAA;AACzDJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/admin/src/components/Layouts/HeaderLayout.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystem = require('@strapi/design-system');
+var theme = require('../../constants/theme.js');
 var useElementOnScreen = require('../../hooks/useElementOnScreen.js');
 
 function _interopNamespaceDefault(e) {
@@ -28,20 +29,27 @@ const BaseHeaderLayout = /*#__PURE__*/ React__namespace.forwardRef(({ navigation
     const isSubtitleString = typeof subtitle === 'string';
     if (sticky) {
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            display: {
+                initial: 'none',
+                large: 'flex'
+            },
             paddingLeft: 6,
             paddingRight: 6,
-            paddingTop: 3,
-            paddingBottom: 3,
+            paddingTop: 2,
+            paddingBottom: 2,
             position: "fixed",
             top: 0,
-            right: 0,
             background: "neutral0",
             shadow: "tableShadow",
             width: `${width}px`,
-            zIndex: 3,
+            zIndex: 2,
+            minHeight: theme.HEIGHT_TOP_NAVIGATION,
             "data-strapi-header-sticky": true,
             children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                alignItems: "center",
                 justifyContent: "space-between",
+                wrap: "wrap",
+                width: "100%",
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                         children: [
@@ -82,42 +90,58 @@ const BaseHeaderLayout = /*#__PURE__*/ React__namespace.forwardRef(({ navigation
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
         ref: ref,
-        paddingLeft: 10,
-        paddingRight: 10,
-        paddingBottom: 8,
-        paddingTop: navigationAction ? 6 : 8,
+        paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingBottom: {
+            initial: 4,
+            large: 8
+        },
+        paddingTop: {
+            initial: 4,
+            large: navigationAction ? 6 : 8
+        },
         background: "neutral100",
         "data-strapi-header": true,
         children: [
-            navigationAction ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                paddingBottom: 2,
-                children: navigationAction
-            }) : null,
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                justifyContent: "space-between",
+                direction: "column",
+                alignItems: "initial",
+                gap: 2,
                 children: [
+                    navigationAction,
                     /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                        minWidth: 0,
+                        justifyContent: "space-between",
+                        wrap: "wrap",
+                        gap: 4,
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                tag: "h1",
-                                variant: "alpha",
-                                ...props,
-                                children: title
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                minWidth: 0,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        tag: "h1",
+                                        variant: "alpha",
+                                        ...props,
+                                        children: title
+                                    }),
+                                    secondaryAction ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                        paddingLeft: 4,
+                                        children: secondaryAction
+                                    }) : null
+                                ]
                             }),
-                            secondaryAction ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                paddingLeft: 4,
-                                children: secondaryAction
-                            }) : null
+                            primaryAction
                         ]
-                    }),
-                    primaryAction
+                    })
                 ]
             }),
             isSubtitleString ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                 variant: "epsilon",
                 textColor: "neutral600",
                 tag: "p",
+                paddingTop: {
+                    initial: 4,
+                    large: 0
+                },
                 children: subtitle
             }) : subtitle
         ]
@@ -132,25 +156,34 @@ const HeaderLayout = (props)=>{
         rootMargin: '0px',
         threshold: 0
     });
-    useResizeObserver(containerRef, ()=>{
+    useResizeObserver([
+        containerRef
+    ], ()=>{
         if (containerRef.current) {
-            setHeaderSize(containerRef.current.getBoundingClientRect());
+            const newSize = containerRef.current.getBoundingClientRect();
+            setHeaderSize((prevSize)=>{
+                // Only update if size actually changed
+                if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {
+                    return newSize;
+                }
+                return prevSize;
+            });
         }
     });
     React__namespace.useEffect(()=>{
-        if (baseHeaderLayoutRef.current) {
-            setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());
+        if (containerRef.current) {
+            setHeaderSize(containerRef.current.getBoundingClientRect());
         }
     }, [
-        baseHeaderLayoutRef
+        containerRef
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        ref: containerRef,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 style: {
                     height: headerSize?.height
                 },
-                ref: containerRef,
                 children: isVisible && /*#__PURE__*/ jsxRuntime.jsx(BaseHeaderLayout, {
                     ref: baseHeaderLayoutRef,
                     ...props

package/dist/admin/admin/src/components/Layouts/HeaderLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLayout.js","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={3}\n          paddingBottom={3}\n          position=\"fixed\"\n          top={0}\n          right={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={3}\n          data-strapi-header-sticky\n        >\n          <Flex justifyContent=\"space-between\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={10}\n        paddingRight={10}\n        paddingBottom={8}\n        paddingTop={navigationAction ? 6 : 8}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        {navigationAction ? <Box paddingBottom={2}>{navigationAction}</Box> : null}\n        <Flex justifyContent=\"space-between\">\n          <Flex minWidth={0}>\n            <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n              {title}\n            </Typography>\n            {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n          </Flex>\n          {primaryAction}\n        </Flex>\n        {isSubtitleString ? (\n          <Typography variant=\"epsilon\" textColor=\"neutral600\" tag=\"p\">\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver(containerRef, () => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  });\n\n  React.useEffect(() => {\n    if (baseHeaderLayoutRef.current) {\n      setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());\n    }\n  }, [baseHeaderLayoutRef]);\n\n  return (\n    <>\n      <div style={{ height: headerSize?.height }} ref={containerRef}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","right","background","shadow","zIndex","data-strapi-header-sticky","_jsxs","Flex","justifyContent","Typography","variant","tag","textColor","undefined","data-strapi-header","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","getBoundingClientRect","useEffect","_Fragment","div","style","height","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}
+{"version":3,"file":"HeaderLayout.js","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display={{\n            initial: 'none',\n            large: 'flex',\n          }}\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef], () => {\n    if (containerRef.current) {\n      const newSize = containerRef.current.getBoundingClientRect();\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  }, [containerRef]);\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","initial","large","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","data-strapi-header","direction","gap","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","style","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}

package/dist/admin/admin/src/components/Layouts/HeaderLayout.mjs

@@ -1,26 +1,34 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Box, Flex, Typography, useCallbackRef } from '@strapi/design-system';
+import { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme.mjs';
 import { useElementOnScreen } from '../../hooks/useElementOnScreen.mjs';
 
 const BaseHeaderLayout = /*#__PURE__*/ React.forwardRef(({ navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props }, ref)=>{
     const isSubtitleString = typeof subtitle === 'string';
     if (sticky) {
         return /*#__PURE__*/ jsx(Box, {
+            display: {
+                initial: 'none',
+                large: 'flex'
+            },
             paddingLeft: 6,
             paddingRight: 6,
-            paddingTop: 3,
-            paddingBottom: 3,
+            paddingTop: 2,
+            paddingBottom: 2,
             position: "fixed",
             top: 0,
-            right: 0,
             background: "neutral0",
             shadow: "tableShadow",
             width: `${width}px`,
-            zIndex: 3,
+            zIndex: 2,
+            minHeight: HEIGHT_TOP_NAVIGATION,
             "data-strapi-header-sticky": true,
             children: /*#__PURE__*/ jsxs(Flex, {
+                alignItems: "center",
                 justifyContent: "space-between",
+                wrap: "wrap",
+                width: "100%",
                 children: [
                     /*#__PURE__*/ jsxs(Flex, {
                         children: [
@@ -61,42 +69,58 @@ const BaseHeaderLayout = /*#__PURE__*/ React.forwardRef(({ navigationAction, pri
     }
     return /*#__PURE__*/ jsxs(Box, {
         ref: ref,
-        paddingLeft: 10,
-        paddingRight: 10,
-        paddingBottom: 8,
-        paddingTop: navigationAction ? 6 : 8,
+        paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: RESPONSIVE_DEFAULT_SPACING,
+        paddingBottom: {
+            initial: 4,
+            large: 8
+        },
+        paddingTop: {
+            initial: 4,
+            large: navigationAction ? 6 : 8
+        },
         background: "neutral100",
         "data-strapi-header": true,
         children: [
-            navigationAction ? /*#__PURE__*/ jsx(Box, {
-                paddingBottom: 2,
-                children: navigationAction
-            }) : null,
             /*#__PURE__*/ jsxs(Flex, {
-                justifyContent: "space-between",
+                direction: "column",
+                alignItems: "initial",
+                gap: 2,
                 children: [
+                    navigationAction,
                     /*#__PURE__*/ jsxs(Flex, {
-                        minWidth: 0,
+                        justifyContent: "space-between",
+                        wrap: "wrap",
+                        gap: 4,
                         children: [
-                            /*#__PURE__*/ jsx(Typography, {
-                                tag: "h1",
-                                variant: "alpha",
-                                ...props,
-                                children: title
+                            /*#__PURE__*/ jsxs(Flex, {
+                                minWidth: 0,
+                                children: [
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        tag: "h1",
+                                        variant: "alpha",
+                                        ...props,
+                                        children: title
+                                    }),
+                                    secondaryAction ? /*#__PURE__*/ jsx(Box, {
+                                        paddingLeft: 4,
+                                        children: secondaryAction
+                                    }) : null
+                                ]
                             }),
-                            secondaryAction ? /*#__PURE__*/ jsx(Box, {
-                                paddingLeft: 4,
-                                children: secondaryAction
-                            }) : null
+                            primaryAction
                         ]
-                    }),
-                    primaryAction
+                    })
                 ]
             }),
             isSubtitleString ? /*#__PURE__*/ jsx(Typography, {
                 variant: "epsilon",
                 textColor: "neutral600",
                 tag: "p",
+                paddingTop: {
+                    initial: 4,
+                    large: 0
+                },
                 children: subtitle
             }) : subtitle
         ]
@@ -111,25 +135,34 @@ const HeaderLayout = (props)=>{
         rootMargin: '0px',
         threshold: 0
     });
-    useResizeObserver(containerRef, ()=>{
+    useResizeObserver([
+        containerRef
+    ], ()=>{
         if (containerRef.current) {
-            setHeaderSize(containerRef.current.getBoundingClientRect());
+            const newSize = containerRef.current.getBoundingClientRect();
+            setHeaderSize((prevSize)=>{
+                // Only update if size actually changed
+                if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {
+                    return newSize;
+                }
+                return prevSize;
+            });
         }
     });
     React.useEffect(()=>{
-        if (baseHeaderLayoutRef.current) {
-            setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());
+        if (containerRef.current) {
+            setHeaderSize(containerRef.current.getBoundingClientRect());
         }
     }, [
-        baseHeaderLayoutRef
+        containerRef
     ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
+    return /*#__PURE__*/ jsxs("div", {
+        ref: containerRef,
         children: [
             /*#__PURE__*/ jsx("div", {
                 style: {
                     height: headerSize?.height
                 },
-                ref: containerRef,
                 children: isVisible && /*#__PURE__*/ jsx(BaseHeaderLayout, {
                     ref: baseHeaderLayoutRef,
                     ...props

package/dist/admin/admin/src/components/Layouts/HeaderLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={3}\n          paddingBottom={3}\n          position=\"fixed\"\n          top={0}\n          right={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={3}\n          data-strapi-header-sticky\n        >\n          <Flex justifyContent=\"space-between\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={10}\n        paddingRight={10}\n        paddingBottom={8}\n        paddingTop={navigationAction ? 6 : 8}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        {navigationAction ? <Box paddingBottom={2}>{navigationAction}</Box> : null}\n        <Flex justifyContent=\"space-between\">\n          <Flex minWidth={0}>\n            <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n              {title}\n            </Typography>\n            {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n          </Flex>\n          {primaryAction}\n        </Flex>\n        {isSubtitleString ? (\n          <Typography variant=\"epsilon\" textColor=\"neutral600\" tag=\"p\">\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver(containerRef, () => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  });\n\n  React.useEffect(() => {\n    if (baseHeaderLayoutRef.current) {\n      setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());\n    }\n  }, [baseHeaderLayoutRef]);\n\n  return (\n    <>\n      <div style={{ height: headerSize?.height }} ref={containerRef}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","right","background","shadow","zIndex","data-strapi-header-sticky","_jsxs","Flex","justifyContent","Typography","variant","tag","textColor","undefined","data-strapi-header","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","getBoundingClientRect","useEffect","_Fragment","div","style","height","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}
+{"version":3,"file":"HeaderLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/HeaderLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography, TypographyProps, useCallbackRef } from '@strapi/design-system';\n\nimport { HEIGHT_TOP_NAVIGATION, RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\nimport { useElementOnScreen } from '../../hooks/useElementOnScreen';\n\n/* -------------------------------------------------------------------------------------------------\n * BaseHeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseHeaderLayoutProps extends Omit<TypographyProps<'div'>, 'tag'> {\n  navigationAction?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  sticky?: boolean;\n  width?: number;\n}\n\nconst BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(\n  (\n    { navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props },\n    ref\n  ) => {\n    const isSubtitleString = typeof subtitle === 'string';\n\n    if (sticky) {\n      return (\n        <Box\n          display={{\n            initial: 'none',\n            large: 'flex',\n          }}\n          paddingLeft={6}\n          paddingRight={6}\n          paddingTop={2}\n          paddingBottom={2}\n          position=\"fixed\"\n          top={0}\n          background=\"neutral0\"\n          shadow=\"tableShadow\"\n          width={`${width}px`}\n          zIndex={2}\n          minHeight={HEIGHT_TOP_NAVIGATION}\n          data-strapi-header-sticky\n        >\n          <Flex alignItems=\"center\" justifyContent=\"space-between\" wrap=\"wrap\" width=\"100%\">\n            <Flex>\n              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}\n              <Box>\n                <Typography variant=\"beta\" tag=\"h1\" {...props}>\n                  {title}\n                </Typography>\n                {isSubtitleString ? (\n                  <Typography variant=\"pi\" textColor=\"neutral600\">\n                    {subtitle}\n                  </Typography>\n                ) : (\n                  subtitle\n                )}\n              </Box>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>\n          </Flex>\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n        paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        paddingBottom={{\n          initial: 4,\n          large: 8,\n        }}\n        paddingTop={{\n          initial: 4,\n          large: navigationAction ? 6 : 8,\n        }}\n        background=\"neutral100\"\n        data-strapi-header\n      >\n        <Flex direction=\"column\" alignItems=\"initial\" gap={2}>\n          {navigationAction}\n          <Flex justifyContent=\"space-between\" wrap=\"wrap\" gap={4}>\n            <Flex minWidth={0}>\n              <Typography tag=\"h1\" variant=\"alpha\" {...props}>\n                {title}\n              </Typography>\n              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}\n            </Flex>\n            {primaryAction}\n          </Flex>\n        </Flex>\n        {isSubtitleString ? (\n          <Typography\n            variant=\"epsilon\"\n            textColor=\"neutral600\"\n            tag=\"p\"\n            paddingTop={{ initial: 4, large: 0 }}\n          >\n            {subtitle}\n          </Typography>\n        ) : (\n          subtitle\n        )}\n      </Box>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderLayout\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderLayoutProps extends BaseHeaderLayoutProps {}\n\nconst HeaderLayout = (props: HeaderLayoutProps) => {\n  const baseHeaderLayoutRef = React.useRef<HTMLDivElement>(null);\n  const [headerSize, setHeaderSize] = React.useState<DOMRect | null>(null);\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(setIsVisible, {\n    root: null,\n    rootMargin: '0px',\n    threshold: 0,\n  });\n\n  useResizeObserver([containerRef], () => {\n    if (containerRef.current) {\n      const newSize = containerRef.current.getBoundingClientRect();\n      setHeaderSize((prevSize) => {\n        // Only update if size actually changed\n        if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {\n          return newSize;\n        }\n        return prevSize;\n      });\n    }\n  });\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      setHeaderSize(containerRef.current.getBoundingClientRect());\n    }\n  }, [containerRef]);\n\n  return (\n    <div ref={containerRef}>\n      <div style={{ height: headerSize?.height }}>\n        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}\n      </div>\n\n      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}\n    </div>\n  );\n};\n\nHeaderLayout.displayName = 'HeaderLayout';\n\n/**\n * useResizeObserver: hook that observes the size of an element and calls a callback when it changes.\n */\nconst useResizeObserver = (\n  sources: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  onResize: ResizeObserverCallback\n) => {\n  const handleResize = useCallbackRef(onResize);\n\n  React.useLayoutEffect(() => {\n    const resizeObs = new ResizeObserver(handleResize);\n\n    if (Array.isArray(sources)) {\n      sources.forEach((source) => {\n        if (source.current) {\n          resizeObs.observe(source.current);\n        }\n      });\n    } else if (sources.current) {\n      resizeObs.observe(sources.current);\n    }\n\n    return () => {\n      resizeObs.disconnect();\n    };\n  }, [sources, handleResize]);\n};\n\nexport type { HeaderLayoutProps, BaseHeaderLayoutProps };\nexport { HeaderLayout, BaseHeaderLayout };\n"],"names":["BaseHeaderLayout","React","forwardRef","navigationAction","primaryAction","secondaryAction","subtitle","title","sticky","width","props","ref","isSubtitleString","_jsx","Box","display","initial","large","paddingLeft","paddingRight","paddingTop","paddingBottom","position","top","background","shadow","zIndex","minHeight","HEIGHT_TOP_NAVIGATION","data-strapi-header-sticky","_jsxs","Flex","alignItems","justifyContent","wrap","Typography","variant","tag","textColor","undefined","RESPONSIVE_DEFAULT_SPACING","data-strapi-header","direction","gap","minWidth","HeaderLayout","baseHeaderLayoutRef","useRef","headerSize","setHeaderSize","useState","isVisible","setIsVisible","containerRef","useElementOnScreen","root","rootMargin","threshold","useResizeObserver","current","newSize","getBoundingClientRect","prevSize","height","useEffect","div","style","displayName","sources","onResize","handleResize","useCallbackRef","useLayoutEffect","resizeObs","ResizeObserver","Array","isArray","forEach","source","observe","disconnect"],"mappings":"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"}

package/dist/admin/admin/src/components/Layouts/Layout.js

@@ -4,30 +4,53 @@ var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
 var styled = require('styled-components');
+var theme = require('../../constants/theme.js');
 var ActionLayout = require('./ActionLayout.js');
 var ContentLayout = require('./ContentLayout.js');
 var GridLayout = require('./GridLayout.js');
 var HeaderLayout = require('./HeaderLayout.js');
 
 const GridContainer = styled.styled(designSystem.Box)`
+  max-width: 100%;
   display: grid;
-  grid-template-columns: ${({ $hasSideNav })=>$hasSideNav ? `auto 1fr` : '1fr'};
+  grid-template-columns: 1fr;
+  padding: 0;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    grid-template-columns: ${({ $hasSideNav })=>$hasSideNav ? `auto 1fr` : '1fr'};
+  }
+`;
+const SideNavContainer = styled.styled(designSystem.Flex)`
+  display: none;
+  background: ${({ theme })=>theme.colors.neutral0};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    display: block;
+    box-shadow: none;
+    transform: none;
+  }
 `;
 const OverflowingItem = styled.styled(designSystem.Box)`
   overflow-x: hidden;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    transform: none;
+    width: auto;
+  }
 `;
-const RootLayout = ({ sideNav, children })=>{
-    return /*#__PURE__*/ jsxRuntime.jsxs(GridContainer, {
+const RootLayout = ({ sideNav, children })=>/*#__PURE__*/ jsxRuntime.jsxs(GridContainer, {
         $hasSideNav: Boolean(sideNav),
         children: [
-            sideNav,
+            sideNav && /*#__PURE__*/ jsxRuntime.jsx(SideNavContainer, {
+                children: sideNav
+            }),
             /*#__PURE__*/ jsxRuntime.jsx(OverflowingItem, {
-                paddingBottom: 10,
+                paddingBottom: theme.RESPONSIVE_DEFAULT_SPACING,
+                "data-strapi-main-content": true,
                 children: children
             })
         ]
     });
-};
 const Layouts = {
     Root: RootLayout,
     Header: HeaderLayout.HeaderLayout,

package/dist/admin/admin/src/components/Layouts/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../../../../../../admin/src/components/Layouts/Layout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { ActionLayout } from './ActionLayout';\nimport { ContentLayout } from './ContentLayout';\nimport { GridLayout, GridLayoutProps } from './GridLayout';\nimport { HeaderLayout, BaseHeaderLayout } from './HeaderLayout';\n\ninterface LayoutProps {\n  children: React.ReactNode;\n  sideNav?: React.ReactNode;\n}\n\nconst GridContainer = styled(Box)<{ $hasSideNav: boolean }>`\n  display: grid;\n  grid-template-columns: ${({ $hasSideNav }) => ($hasSideNav ? `auto 1fr` : '1fr')};\n`;\n\nconst OverflowingItem = styled(Box)`\n  overflow-x: hidden;\n`;\n\nconst RootLayout = ({ sideNav, children }: LayoutProps) => {\n  return (\n    <GridContainer $hasSideNav={Boolean(sideNav)}>\n      {sideNav}\n      <OverflowingItem paddingBottom={10}>{children}</OverflowingItem>\n    </GridContainer>\n  );\n};\n\nconst Layouts = {\n  Root: RootLayout,\n  Header: HeaderLayout,\n  BaseHeader: BaseHeaderLayout,\n  Grid: GridLayout,\n  Action: ActionLayout,\n  Content: ContentLayout,\n};\n\nexport { Layouts, type LayoutProps, type GridLayoutProps };\n"],"names":["GridContainer","styled","Box","$hasSideNav","OverflowingItem","RootLayout","sideNav","children","_jsxs","Boolean","_jsx","paddingBottom","Layouts","Root","Header","HeaderLayout","BaseHeader","BaseHeaderLayout","Grid","GridLayout","Action","ActionLayout","Content","ContentLayout"],"mappings":";;;;;;;;;;;AAeA,MAAMA,aAAAA,GAAgBC,aAAOC,CAAAA,gBAAAA,CAA8B;;yBAElC,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,cAAc,CAAC,QAAQ,CAAC,GAAG,KAAO,CAAA;AACnF,CAAC;AAED,MAAMC,eAAAA,GAAkBH,aAAOC,CAAAA,gBAAAA,CAAI;;AAEnC,CAAC;AAED,MAAMG,aAAa,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAe,GAAA;AACpD,IAAA,qBACEC,eAACR,CAAAA,aAAAA,EAAAA;AAAcG,QAAAA,WAAAA,EAAaM,OAAQH,CAAAA,OAAAA,CAAAA;;AACjCA,YAAAA,OAAAA;0BACDI,cAACN,CAAAA,eAAAA,EAAAA;gBAAgBO,aAAe,EAAA,EAAA;AAAKJ,gBAAAA,QAAAA,EAAAA;;;;AAG3C,CAAA;AAEA,MAAMK,OAAU,GAAA;IACdC,IAAMR,EAAAA,UAAAA;IACNS,MAAQC,EAAAA,yBAAAA;IACRC,UAAYC,EAAAA,6BAAAA;IACZC,IAAMC,EAAAA,qBAAAA;IACNC,MAAQC,EAAAA,yBAAAA;IACRC,OAASC,EAAAA;AACX;;;;"}
+{"version":3,"file":"Layout.js","sources":["../../../../../../admin/src/components/Layouts/Layout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\nimport { ActionLayout } from './ActionLayout';\nimport { ContentLayout } from './ContentLayout';\nimport { GridLayout, GridLayoutProps } from './GridLayout';\nimport { HeaderLayout, BaseHeaderLayout } from './HeaderLayout';\n\ninterface LayoutProps {\n  children: React.ReactNode;\n  sideNav?: React.ReactNode;\n}\n\nconst GridContainer = styled(Box)<{ $hasSideNav: boolean }>`\n  max-width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  padding: 0;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    grid-template-columns: ${({ $hasSideNav }) => ($hasSideNav ? `auto 1fr` : '1fr')};\n  }\n`;\n\nconst SideNavContainer = styled(Flex)`\n  display: none;\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    display: block;\n    box-shadow: none;\n    transform: none;\n  }\n`;\n\nconst OverflowingItem = styled(Box)`\n  overflow-x: hidden;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    transform: none;\n    width: auto;\n  }\n`;\n\nconst RootLayout = ({ sideNav, children }: LayoutProps) => (\n  <GridContainer $hasSideNav={Boolean(sideNav)}>\n    {sideNav && <SideNavContainer>{sideNav}</SideNavContainer>}\n    <OverflowingItem paddingBottom={RESPONSIVE_DEFAULT_SPACING} data-strapi-main-content>\n      {children}\n    </OverflowingItem>\n  </GridContainer>\n);\n\nconst Layouts = {\n  Root: RootLayout,\n  Header: HeaderLayout,\n  BaseHeader: BaseHeaderLayout,\n  Grid: GridLayout,\n  Action: ActionLayout,\n  Content: ContentLayout,\n};\n\nexport { Layouts, type LayoutProps, type GridLayoutProps };\n"],"names":["GridContainer","styled","Box","theme","breakpoints","medium","$hasSideNav","SideNavContainer","Flex","colors","neutral0","OverflowingItem","RootLayout","sideNav","children","_jsxs","Boolean","_jsx","paddingBottom","RESPONSIVE_DEFAULT_SPACING","data-strapi-main-content","Layouts","Root","Header","HeaderLayout","BaseHeader","BaseHeaderLayout","Grid","GridLayout","Action","ActionLayout","Content","ContentLayout"],"mappings":";;;;;;;;;;;;AAiBA,MAAMA,aAAAA,GAAgBC,aAAOC,CAAAA,gBAAAA,CAA8B;;;;;;EAMzD,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,MAAM,CAAC;2BACjB,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,cAAc,CAAC,QAAQ,CAAC,GAAG,KAAO,CAAA;;AAErF,CAAC;AAED,MAAMC,gBAAAA,GAAmBN,aAAOO,CAAAA,iBAAAA,CAAK;;cAEvB,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMM,CAAAA,MAAM,CAACC,QAAQ,CAAC;;EAEnD,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,MAAM,CAAC;;;;;AAK5C,CAAC;AAED,MAAMM,eAAAA,GAAkBV,aAAOC,CAAAA,gBAAAA,CAAI;;;EAGjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,MAAM,CAAC;;;;AAI5C,CAAC;AAED,MAAMO,UAAAA,GAAa,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAe,iBACpDC,eAACf,CAAAA,aAAAA,EAAAA;AAAcM,QAAAA,WAAAA,EAAaU,OAAQH,CAAAA,OAAAA,CAAAA;;AACjCA,YAAAA,OAAAA,kBAAWI,cAACV,CAAAA,gBAAAA,EAAAA;AAAkBM,gBAAAA,QAAAA,EAAAA;;0BAC/BI,cAACN,CAAAA,eAAAA,EAAAA;gBAAgBO,aAAeC,EAAAA,gCAAAA;gBAA4BC,0BAAwB,EAAA,IAAA;AACjFN,gBAAAA,QAAAA,EAAAA;;;;AAKP,MAAMO,OAAU,GAAA;IACdC,IAAMV,EAAAA,UAAAA;IACNW,MAAQC,EAAAA,yBAAAA;IACRC,UAAYC,EAAAA,6BAAAA;IACZC,IAAMC,EAAAA,qBAAAA;IACNC,MAAQC,EAAAA,yBAAAA;IACRC,OAASC,EAAAA;AACX;;;;"}

package/dist/admin/admin/src/components/Layouts/Layout.mjs

@@ -1,31 +1,54 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
-import { Box } from '@strapi/design-system';
+import { Box, Flex } from '@strapi/design-system';
 import { styled } from 'styled-components';
+import { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme.mjs';
 import { ActionLayout } from './ActionLayout.mjs';
 import { ContentLayout } from './ContentLayout.mjs';
 import { GridLayout } from './GridLayout.mjs';
 import { HeaderLayout, BaseHeaderLayout } from './HeaderLayout.mjs';
 
 const GridContainer = styled(Box)`
+  max-width: 100%;
   display: grid;
-  grid-template-columns: ${({ $hasSideNav })=>$hasSideNav ? `auto 1fr` : '1fr'};
+  grid-template-columns: 1fr;
+  padding: 0;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    grid-template-columns: ${({ $hasSideNav })=>$hasSideNav ? `auto 1fr` : '1fr'};
+  }
+`;
+const SideNavContainer = styled(Flex)`
+  display: none;
+  background: ${({ theme })=>theme.colors.neutral0};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    display: block;
+    box-shadow: none;
+    transform: none;
+  }
 `;
 const OverflowingItem = styled(Box)`
   overflow-x: hidden;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    transform: none;
+    width: auto;
+  }
 `;
-const RootLayout = ({ sideNav, children })=>{
-    return /*#__PURE__*/ jsxs(GridContainer, {
+const RootLayout = ({ sideNav, children })=>/*#__PURE__*/ jsxs(GridContainer, {
         $hasSideNav: Boolean(sideNav),
         children: [
-            sideNav,
+            sideNav && /*#__PURE__*/ jsx(SideNavContainer, {
+                children: sideNav
+            }),
             /*#__PURE__*/ jsx(OverflowingItem, {
-                paddingBottom: 10,
+                paddingBottom: RESPONSIVE_DEFAULT_SPACING,
+                "data-strapi-main-content": true,
                 children: children
             })
         ]
     });
-};
 const Layouts = {
     Root: RootLayout,
     Header: HeaderLayout,