@strapi/admin 5.36.1 → 5.37.0

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

@@ -3,36 +3,69 @@
 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');
 
-const ActionLayout = ({ startActions, endActions })=>{
+/** On mobile: first item stays left, rest stick to the right (margin-right: auto on first child). */ const EndActionsFlex = styled.styled(designSystem.Flex)`
+  width: 100%;
+  & > *:first-child {
+    margin-right: auto;
+  }
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    width: auto;
+    & > *:first-child {
+      margin-right: 0;
+    }
+  }
+`;
+const ActionLayout = ({ startActions, endActions, bottomActions })=>{
     if (!startActions && !endActions) {
         return null;
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-        justifyContent: "space-between",
+        direction: {
+            initial: 'column',
+            medium: 'row'
+        },
+        gap: {
+            initial: 4,
+            medium: 3
+        },
         alignItems: "flex-start",
         paddingBottom: {
             initial: 2,
             medium: 4
         },
-        paddingTop: {
-            initial: 4,
-            medium: 0
-        },
+        paddingTop: 0,
         paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
         paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
+        wrap: {
+            initial: 'nowrap',
+            medium: 'wrap'
+        },
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                 gap: 2,
                 wrap: "wrap",
+                flex: 1,
+                width: "100%",
                 children: startActions
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                gap: 2,
+            /*#__PURE__*/ jsxRuntime.jsx(EndActionsFlex, {
+                gap: {
+                    initial: 3,
+                    medium: 2
+                },
                 shrink: 0,
                 wrap: "wrap",
                 children: endActions
+            }),
+            bottomActions && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                gap: 2,
+                wrap: "wrap",
+                width: "100%",
+                children: bottomActions
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"file":"ActionLayout.js","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={{ initial: 2, medium: 4 }}\n      paddingTop={{ initial: 4, medium: 0 }}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","initial","medium","paddingTop","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;;;AAWA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA;YAAEC,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACvCC,UAAY,EAAA;YAAEF,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACpCE,WAAaC,EAAAA,gCAAAA;QACbC,YAAcD,EAAAA,gCAAAA;;0BAEdE,cAACV,CAAAA,iBAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBf,gBAAAA,QAAAA,EAAAA;;0BAGHa,cAACV,CAAAA,iBAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3Bd,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}
+{"version":3,"file":"ActionLayout.js","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\n/** On mobile: first item stays left, rest stick to the right (margin-right: auto on first child). */\nconst EndActionsFlex = styled(Flex)`\n  width: 100%;\n  & > *:first-child {\n    margin-right: auto;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    width: auto;\n    & > *:first-child {\n      margin-right: 0;\n    }\n  }\n`;\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n  bottomActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions, bottomActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      direction={{ initial: 'column', medium: 'row' }}\n      gap={{ initial: 4, medium: 3 }}\n      alignItems=\"flex-start\"\n      paddingBottom={{ initial: 2, medium: 4 }}\n      paddingTop={0}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n      wrap={{ initial: 'nowrap', medium: 'wrap' }}\n    >\n      <Flex gap={2} wrap=\"wrap\" flex={1} width=\"100%\">\n        {startActions}\n      </Flex>\n      <EndActionsFlex gap={{ initial: 3, medium: 2 }} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </EndActionsFlex>\n      {bottomActions && (\n        <Flex gap={2} wrap=\"wrap\" width=\"100%\">\n          {bottomActions}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["EndActionsFlex","styled","Flex","theme","breakpoints","medium","ActionLayout","startActions","endActions","bottomActions","_jsxs","direction","initial","gap","alignItems","paddingBottom","paddingTop","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","wrap","_jsx","flex","width","shrink"],"mappings":";;;;;;;;AAOA,sGACA,MAAMA,cAAiBC,GAAAA,aAAAA,CAAOC,kBAAK;;;;;;EAMjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,MAAM,CAAC;;;;;;AAM5C,CAAC;AAQKC,MAAAA,YAAAA,GAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAEC,aAAa,EAAqB,GAAA;IAClF,IAAI,CAACF,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEE,eAACR,CAAAA,iBAAAA,EAAAA;QACCS,SAAW,EAAA;YAAEC,OAAS,EAAA,QAAA;YAAUP,MAAQ,EAAA;AAAM,SAAA;QAC9CQ,GAAK,EAAA;YAAED,OAAS,EAAA,CAAA;YAAGP,MAAQ,EAAA;AAAE,SAAA;QAC7BS,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA;YAAEH,OAAS,EAAA,CAAA;YAAGP,MAAQ,EAAA;AAAE,SAAA;QACvCW,UAAY,EAAA,CAAA;QACZC,WAAaC,EAAAA,gCAAAA;QACbC,YAAcD,EAAAA,gCAAAA;QACdE,IAAM,EAAA;YAAER,OAAS,EAAA,QAAA;YAAUP,MAAQ,EAAA;AAAO,SAAA;;0BAE1CgB,cAACnB,CAAAA,iBAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGO,IAAK,EAAA,MAAA;gBAAOE,IAAM,EAAA,CAAA;gBAAGC,KAAM,EAAA,MAAA;AACtChB,gBAAAA,QAAAA,EAAAA;;0BAEHc,cAACrB,CAAAA,cAAAA,EAAAA;gBAAea,GAAK,EAAA;oBAAED,OAAS,EAAA,CAAA;oBAAGP,MAAQ,EAAA;AAAE,iBAAA;gBAAGmB,MAAQ,EAAA,CAAA;gBAAGJ,IAAK,EAAA,MAAA;AAC7DZ,gBAAAA,QAAAA,EAAAA;;AAEFC,YAAAA,aAAAA,kBACCY,cAACnB,CAAAA,iBAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGO,IAAK,EAAA,MAAA;gBAAOG,KAAM,EAAA,MAAA;AAC7Bd,gBAAAA,QAAAA,EAAAA;;;;AAKX;;;;"}

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

@@ -1,36 +1,69 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import { Flex } from '@strapi/design-system';
+import { styled } from 'styled-components';
 import { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme.mjs';
 
-const ActionLayout = ({ startActions, endActions })=>{
+/** On mobile: first item stays left, rest stick to the right (margin-right: auto on first child). */ const EndActionsFlex = styled(Flex)`
+  width: 100%;
+  & > *:first-child {
+    margin-right: auto;
+  }
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    width: auto;
+    & > *:first-child {
+      margin-right: 0;
+    }
+  }
+`;
+const ActionLayout = ({ startActions, endActions, bottomActions })=>{
     if (!startActions && !endActions) {
         return null;
     }
     return /*#__PURE__*/ jsxs(Flex, {
-        justifyContent: "space-between",
+        direction: {
+            initial: 'column',
+            medium: 'row'
+        },
+        gap: {
+            initial: 4,
+            medium: 3
+        },
         alignItems: "flex-start",
         paddingBottom: {
             initial: 2,
             medium: 4
         },
-        paddingTop: {
-            initial: 4,
-            medium: 0
-        },
+        paddingTop: 0,
         paddingLeft: RESPONSIVE_DEFAULT_SPACING,
         paddingRight: RESPONSIVE_DEFAULT_SPACING,
+        wrap: {
+            initial: 'nowrap',
+            medium: 'wrap'
+        },
         children: [
             /*#__PURE__*/ jsx(Flex, {
                 gap: 2,
                 wrap: "wrap",
+                flex: 1,
+                width: "100%",
                 children: startActions
             }),
-            /*#__PURE__*/ jsx(Flex, {
-                gap: 2,
+            /*#__PURE__*/ jsx(EndActionsFlex, {
+                gap: {
+                    initial: 3,
+                    medium: 2
+                },
                 shrink: 0,
                 wrap: "wrap",
                 children: endActions
+            }),
+            bottomActions && /*#__PURE__*/ jsx(Flex, {
+                gap: 2,
+                wrap: "wrap",
+                width: "100%",
+                children: bottomActions
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"file":"ActionLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={{ initial: 2, medium: 4 }}\n      paddingTop={{ initial: 4, medium: 0 }}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","initial","medium","paddingTop","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;AAWA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA;YAAEC,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACvCC,UAAY,EAAA;YAAEF,OAAS,EAAA,CAAA;YAAGC,MAAQ,EAAA;AAAE,SAAA;QACpCE,WAAaC,EAAAA,0BAAAA;QACbC,YAAcD,EAAAA,0BAAAA;;0BAEdE,GAACV,CAAAA,IAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBf,gBAAAA,QAAAA,EAAAA;;0BAGHa,GAACV,CAAAA,IAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3Bd,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}
+{"version":3,"file":"ActionLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\n/** On mobile: first item stays left, rest stick to the right (margin-right: auto on first child). */\nconst EndActionsFlex = styled(Flex)`\n  width: 100%;\n  & > *:first-child {\n    margin-right: auto;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    width: auto;\n    & > *:first-child {\n      margin-right: 0;\n    }\n  }\n`;\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n  bottomActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions, bottomActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      direction={{ initial: 'column', medium: 'row' }}\n      gap={{ initial: 4, medium: 3 }}\n      alignItems=\"flex-start\"\n      paddingBottom={{ initial: 2, medium: 4 }}\n      paddingTop={0}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n      wrap={{ initial: 'nowrap', medium: 'wrap' }}\n    >\n      <Flex gap={2} wrap=\"wrap\" flex={1} width=\"100%\">\n        {startActions}\n      </Flex>\n      <EndActionsFlex gap={{ initial: 3, medium: 2 }} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </EndActionsFlex>\n      {bottomActions && (\n        <Flex gap={2} wrap=\"wrap\" width=\"100%\">\n          {bottomActions}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["EndActionsFlex","styled","Flex","theme","breakpoints","medium","ActionLayout","startActions","endActions","bottomActions","_jsxs","direction","initial","gap","alignItems","paddingBottom","paddingTop","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","wrap","_jsx","flex","width","shrink"],"mappings":";;;;;;AAOA,sGACA,MAAMA,cAAiBC,GAAAA,MAAAA,CAAOC,KAAK;;;;;;EAMjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,MAAM,CAAC;;;;;;AAM5C,CAAC;AAQKC,MAAAA,YAAAA,GAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAEC,aAAa,EAAqB,GAAA;IAClF,IAAI,CAACF,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEE,IAACR,CAAAA,IAAAA,EAAAA;QACCS,SAAW,EAAA;YAAEC,OAAS,EAAA,QAAA;YAAUP,MAAQ,EAAA;AAAM,SAAA;QAC9CQ,GAAK,EAAA;YAAED,OAAS,EAAA,CAAA;YAAGP,MAAQ,EAAA;AAAE,SAAA;QAC7BS,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA;YAAEH,OAAS,EAAA,CAAA;YAAGP,MAAQ,EAAA;AAAE,SAAA;QACvCW,UAAY,EAAA,CAAA;QACZC,WAAaC,EAAAA,0BAAAA;QACbC,YAAcD,EAAAA,0BAAAA;QACdE,IAAM,EAAA;YAAER,OAAS,EAAA,QAAA;YAAUP,MAAQ,EAAA;AAAO,SAAA;;0BAE1CgB,GAACnB,CAAAA,IAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGO,IAAK,EAAA,MAAA;gBAAOE,IAAM,EAAA,CAAA;gBAAGC,KAAM,EAAA,MAAA;AACtChB,gBAAAA,QAAAA,EAAAA;;0BAEHc,GAACrB,CAAAA,cAAAA,EAAAA;gBAAea,GAAK,EAAA;oBAAED,OAAS,EAAA,CAAA;oBAAGP,MAAQ,EAAA;AAAE,iBAAA;gBAAGmB,MAAQ,EAAA,CAAA;gBAAGJ,IAAK,EAAA,MAAA;AAC7DZ,gBAAAA,QAAAA,EAAAA;;AAEFC,YAAAA,aAAAA,kBACCY,GAACnB,CAAAA,IAAAA,EAAAA;gBAAKW,GAAK,EAAA,CAAA;gBAAGO,IAAK,EAAA,MAAA;gBAAOG,KAAM,EAAA,MAAA;AAC7Bd,gBAAAA,QAAAA,EAAAA;;;;AAKX;;;;"}

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

@@ -11,16 +11,19 @@ var GridLayout = require('./GridLayout.js');
 var HeaderLayout = require('./HeaderLayout.js');
 
 const GridContainer = styled.styled(designSystem.Box)`
-  max-width: 100%;
+  width: 100%;
+  flex: 1;
   display: grid;
   grid-template-columns: 1fr;
   padding: 0;
 
   ${({ theme })=>theme.breakpoints.medium} {
+    overflow: hidden;
     grid-template-columns: ${({ $hasSideNav })=>$hasSideNav ? `auto 1fr` : '1fr'};
   }
 `;
 const SideNavContainer = styled.styled(designSystem.Flex)`
+  overflow: hidden;
   display: none;
   background: ${({ theme })=>theme.colors.neutral0};
 

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, BoxProps, 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 extends BoxProps {\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, ...restProps }: LayoutProps) => (\n  <GridContainer $hasSideNav={Boolean(sideNav)} {...restProps}>\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","restProps","_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,GAAGC,SAAwB,EAAA,iBAClEC,eAAChB,CAAAA,aAAAA,EAAAA;AAAcM,QAAAA,WAAAA,EAAaW,OAAQJ,CAAAA,OAAAA,CAAAA;AAAW,QAAA,GAAGE,SAAS;;AACxDF,YAAAA,OAAAA,kBAAWK,cAACX,CAAAA,gBAAAA,EAAAA;AAAkBM,gBAAAA,QAAAA,EAAAA;;0BAC/BK,cAACP,CAAAA,eAAAA,EAAAA;gBAAgBQ,aAAeC,EAAAA,gCAAAA;gBAA4BC,0BAAwB,EAAA,IAAA;AACjFP,gBAAAA,QAAAA,EAAAA;;;;AAKP,MAAMQ,OAAU,GAAA;IACdC,IAAMX,EAAAA,UAAAA;IACNY,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, BoxProps, 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 extends BoxProps {\n  children: React.ReactNode;\n  sideNav?: React.ReactNode;\n}\n\nconst GridContainer = styled(Box)<{ $hasSideNav: boolean }>`\n  width: 100%;\n  flex: 1;\n  display: grid;\n  grid-template-columns: 1fr;\n  padding: 0;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    overflow: hidden;\n    grid-template-columns: ${({ $hasSideNav }) => ($hasSideNav ? `auto 1fr` : '1fr')};\n  }\n`;\n\nconst SideNavContainer = styled(Flex)`\n  overflow: hidden;\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, ...restProps }: LayoutProps) => (\n  <GridContainer $hasSideNav={Boolean(sideNav)} {...restProps}>\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","restProps","_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;;;;;;;EAOzD,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,MAAM,CAAC;;2BAEjB,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,cAAc,CAAC,QAAQ,CAAC,GAAG,KAAO,CAAA;;AAErF,CAAC;AAED,MAAMC,gBAAAA,GAAmBN,aAAOO,CAAAA,iBAAAA,CAAK;;;cAGvB,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,GAAGC,SAAwB,EAAA,iBAClEC,eAAChB,CAAAA,aAAAA,EAAAA;AAAcM,QAAAA,WAAAA,EAAaW,OAAQJ,CAAAA,OAAAA,CAAAA;AAAW,QAAA,GAAGE,SAAS;;AACxDF,YAAAA,OAAAA,kBAAWK,cAACX,CAAAA,gBAAAA,EAAAA;AAAkBM,gBAAAA,QAAAA,EAAAA;;0BAC/BK,cAACP,CAAAA,eAAAA,EAAAA;gBAAgBQ,aAAeC,EAAAA,gCAAAA;gBAA4BC,0BAAwB,EAAA,IAAA;AACjFP,gBAAAA,QAAAA,EAAAA;;;;AAKP,MAAMQ,OAAU,GAAA;IACdC,IAAMX,EAAAA,UAAAA;IACNY,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

@@ -9,16 +9,19 @@ import { GridLayout } from './GridLayout.mjs';
 import { HeaderLayout, BaseHeaderLayout } from './HeaderLayout.mjs';
 
 const GridContainer = styled(Box)`
-  max-width: 100%;
+  width: 100%;
+  flex: 1;
   display: grid;
   grid-template-columns: 1fr;
   padding: 0;
 
   ${({ theme })=>theme.breakpoints.medium} {
+    overflow: hidden;
     grid-template-columns: ${({ $hasSideNav })=>$hasSideNav ? `auto 1fr` : '1fr'};
   }
 `;
 const SideNavContainer = styled(Flex)`
+  overflow: hidden;
   display: none;
   background: ${({ theme })=>theme.colors.neutral0};
 

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

@@ -1 +1 @@
-{"version":3,"file":"Layout.mjs","sources":["../../../../../../admin/src/components/Layouts/Layout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, BoxProps, 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 extends BoxProps {\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, ...restProps }: LayoutProps) => (\n  <GridContainer $hasSideNav={Boolean(sideNav)} {...restProps}>\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","restProps","_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,MAAOC,CAAAA,GAAAA,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,MAAOO,CAAAA,IAAAA,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,MAAOC,CAAAA,GAAAA,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,GAAGC,SAAwB,EAAA,iBAClEC,IAAChB,CAAAA,aAAAA,EAAAA;AAAcM,QAAAA,WAAAA,EAAaW,OAAQJ,CAAAA,OAAAA,CAAAA;AAAW,QAAA,GAAGE,SAAS;;AACxDF,YAAAA,OAAAA,kBAAWK,GAACX,CAAAA,gBAAAA,EAAAA;AAAkBM,gBAAAA,QAAAA,EAAAA;;0BAC/BK,GAACP,CAAAA,eAAAA,EAAAA;gBAAgBQ,aAAeC,EAAAA,0BAAAA;gBAA4BC,0BAAwB,EAAA,IAAA;AACjFP,gBAAAA,QAAAA,EAAAA;;;;AAKP,MAAMQ,OAAU,GAAA;IACdC,IAAMX,EAAAA,UAAAA;IACNY,MAAQC,EAAAA,YAAAA;IACRC,UAAYC,EAAAA,gBAAAA;IACZC,IAAMC,EAAAA,UAAAA;IACNC,MAAQC,EAAAA,YAAAA;IACRC,OAASC,EAAAA;AACX;;;;"}
+{"version":3,"file":"Layout.mjs","sources":["../../../../../../admin/src/components/Layouts/Layout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, BoxProps, 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 extends BoxProps {\n  children: React.ReactNode;\n  sideNav?: React.ReactNode;\n}\n\nconst GridContainer = styled(Box)<{ $hasSideNav: boolean }>`\n  width: 100%;\n  flex: 1;\n  display: grid;\n  grid-template-columns: 1fr;\n  padding: 0;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    overflow: hidden;\n    grid-template-columns: ${({ $hasSideNav }) => ($hasSideNav ? `auto 1fr` : '1fr')};\n  }\n`;\n\nconst SideNavContainer = styled(Flex)`\n  overflow: hidden;\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, ...restProps }: LayoutProps) => (\n  <GridContainer $hasSideNav={Boolean(sideNav)} {...restProps}>\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","restProps","_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,MAAOC,CAAAA,GAAAA,CAA8B;;;;;;;EAOzD,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAACC,MAAM,CAAC;;2BAEjB,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,cAAc,CAAC,QAAQ,CAAC,GAAG,KAAO,CAAA;;AAErF,CAAC;AAED,MAAMC,gBAAAA,GAAmBN,MAAOO,CAAAA,IAAAA,CAAK;;;cAGvB,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,MAAOC,CAAAA,GAAAA,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,GAAGC,SAAwB,EAAA,iBAClEC,IAAChB,CAAAA,aAAAA,EAAAA;AAAcM,QAAAA,WAAAA,EAAaW,OAAQJ,CAAAA,OAAAA,CAAAA;AAAW,QAAA,GAAGE,SAAS;;AACxDF,YAAAA,OAAAA,kBAAWK,GAACX,CAAAA,gBAAAA,EAAAA;AAAkBM,gBAAAA,QAAAA,EAAAA;;0BAC/BK,GAACP,CAAAA,eAAAA,EAAAA;gBAAgBQ,aAAeC,EAAAA,0BAAAA;gBAA4BC,0BAAwB,EAAA,IAAA;AACjFP,gBAAAA,QAAAA,EAAAA;;;;AAKP,MAAMQ,OAAU,GAAA;IACdC,IAAMX,EAAAA,UAAAA;IACNY,MAAQC,EAAAA,YAAAA;IACRC,UAAYC,EAAAA,gBAAAA;IACZC,IAAMC,EAAAA,UAAAA;IACNC,MAAQC,EAAAA,YAAAA;IACRC,OAASC,EAAAA;AACX;;;;"}

package/dist/admin/admin/src/components/SearchInput.js

@@ -6,6 +6,7 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var Tracking = require('../features/Tracking.js');
+var useMediaQuery = require('../hooks/useMediaQuery.js');
 var useQueryParams = require('../hooks/useQueryParams.js');
 
 function _interopNamespaceDefault(e) {
@@ -35,6 +36,7 @@ const SearchInput = ({ disabled, label, placeholder, trackedEvent, trackedEventD
     const [isOpen, setIsOpen] = React__namespace.useState(!!value);
     const { formatMessage } = reactIntl.useIntl();
     const { trackUsage } = Tracking.useTracking();
+    const isMobile = useMediaQuery.useIsMobile();
     const handleToggle = ()=>setIsOpen((prev)=>!prev);
     React__namespace.useLayoutEffect(()=>{
         if (isOpen && inputRef.current) {
@@ -67,8 +69,7 @@ const SearchInput = ({ disabled, label, placeholder, trackedEvent, trackedEventD
             }, 'remove');
         }
     };
-    if (isOpen) {
-        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SearchForm, {
+    const renderSearchForm = (opts)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.SearchForm, {
             onSubmit: handleSubmit,
             children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Searchbar, {
                 ref: inputRef,
@@ -80,15 +81,27 @@ const SearchInput = ({ disabled, label, placeholder, trackedEvent, trackedEventD
                     defaultMessage: 'Clear'
                 }),
                 onClear: handleClear,
-                placeholder: placeholder,
-                onBlur: (e)=>{
+                placeholder: isMobile ? undefined : placeholder,
+                disabled: disabled,
+                onBlur: opts?.enableBlurClose ? (e)=>{
                     if (!e.currentTarget.contains(e.relatedTarget) && e.currentTarget.value === '') {
                         setIsOpen(false);
                     }
-                },
+                } : undefined,
                 children: label
             })
         });
+    if (isMobile) {
+        // Add wrapper so that the Searchbar takes up the rest of the available space.
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            width: "100%",
+            children: renderSearchForm()
+        });
+    }
+    if (isOpen) {
+        return renderSearchForm({
+            enableBlurClose: true
+        });
     }
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
         ref: iconButtonRef,

package/dist/admin/admin/src/components/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../../../admin/src/components/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { IconButton, Searchbar, SearchForm } from '@strapi/design-system';\nimport { Search as SearchIcon } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { TrackingEvent, useTracking } from '../features/Tracking';\nimport { useQueryParams } from '../hooks/useQueryParams';\n\ninterface SearchInputProps {\n  disabled?: boolean;\n  label: string;\n  placeholder?: string;\n  trackedEvent?: TrackingEvent['name'] | null;\n  trackedEventDetails?: TrackingEvent['properties'];\n}\n\nconst SearchInput = ({\n  disabled,\n  label,\n  placeholder,\n  trackedEvent,\n  trackedEventDetails,\n}: SearchInputProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const iconButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const [{ query }, setQuery] = useQueryParams<{ _q: string; page?: number }>();\n\n  const [value, setValue] = React.useState(query?._q || '');\n  const [isOpen, setIsOpen] = React.useState(!!value);\n\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n\n  const handleToggle = () => setIsOpen((prev) => !prev);\n\n  React.useLayoutEffect(() => {\n    if (isOpen && inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, [isOpen]);\n\n  const handleClear = () => {\n    setValue('');\n    setQuery({ _q: '' }, 'remove');\n  };\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    // Ensure value is a string\n    if (value) {\n      if (trackedEvent) {\n        trackUsage(trackedEvent, trackedEventDetails);\n      }\n      setQuery({ _q: encodeURIComponent(value), page: 1 });\n    } else {\n      handleToggle();\n      setQuery({ _q: '' }, 'remove');\n    }\n  };\n\n  if (isOpen) {\n    return (\n      <SearchForm onSubmit={handleSubmit}>\n        <Searchbar\n          ref={inputRef}\n          name=\"search\"\n          onChange={(e) => setValue(e.target.value)}\n          value={value}\n          clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n          onClear={handleClear}\n          placeholder={placeholder}\n          onBlur={(e) => {\n            if (!e.currentTarget.contains(e.relatedTarget) && e.currentTarget.value === '') {\n              setIsOpen(false);\n            }\n          }}\n        >\n          {label}\n        </Searchbar>\n      </SearchForm>\n    );\n  }\n\n  return (\n    <IconButton\n      ref={iconButtonRef}\n      disabled={disabled}\n      label={formatMessage({ id: 'global.search', defaultMessage: 'Search' })}\n      onClick={handleToggle}\n    >\n      <SearchIcon />\n    </IconButton>\n  );\n};\n\nexport { SearchInput };\nexport type { SearchInputProps };\n"],"names":["SearchInput","disabled","label","placeholder","trackedEvent","trackedEventDetails","inputRef","React","useRef","iconButtonRef","query","setQuery","useQueryParams","value","setValue","useState","_q","isOpen","setIsOpen","formatMessage","useIntl","trackUsage","useTracking","handleToggle","prev","useLayoutEffect","current","focus","handleClear","handleSubmit","e","preventDefault","encodeURIComponent","page","_jsx","SearchForm","onSubmit","Searchbar","ref","name","onChange","target","clearLabel","id","defaultMessage","onClear","onBlur","currentTarget","contains","relatedTarget","IconButton","onClick","SearchIcon"],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sources":["../../../../../admin/src/components/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, IconButton, Searchbar, SearchForm } from '@strapi/design-system';\nimport { Search as SearchIcon } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { TrackingEvent, useTracking } from '../features/Tracking';\nimport { useIsMobile } from '../hooks/useMediaQuery';\nimport { useQueryParams } from '../hooks/useQueryParams';\n\ninterface SearchInputProps {\n  disabled?: boolean;\n  label: string;\n  placeholder?: string;\n  trackedEvent?: TrackingEvent['name'] | null;\n  trackedEventDetails?: TrackingEvent['properties'];\n}\n\nconst SearchInput = ({\n  disabled,\n  label,\n  placeholder,\n  trackedEvent,\n  trackedEventDetails,\n}: SearchInputProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const iconButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const [{ query }, setQuery] = useQueryParams<{ _q: string; page?: number }>();\n\n  const [value, setValue] = React.useState(query?._q || '');\n  const [isOpen, setIsOpen] = React.useState(!!value);\n\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const isMobile = useIsMobile();\n\n  const handleToggle = () => setIsOpen((prev) => !prev);\n\n  React.useLayoutEffect(() => {\n    if (isOpen && inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, [isOpen]);\n\n  const handleClear = () => {\n    setValue('');\n    setQuery({ _q: '' }, 'remove');\n  };\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    // Ensure value is a string\n    if (value) {\n      if (trackedEvent) {\n        trackUsage(trackedEvent, trackedEventDetails);\n      }\n      setQuery({ _q: encodeURIComponent(value), page: 1 });\n    } else {\n      handleToggle();\n      setQuery({ _q: '' }, 'remove');\n    }\n  };\n\n  const renderSearchForm = (opts?: { enableBlurClose?: boolean }) => (\n    <SearchForm onSubmit={handleSubmit}>\n      <Searchbar\n        ref={inputRef}\n        name=\"search\"\n        onChange={(e) => setValue(e.target.value)}\n        value={value}\n        clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n        onClear={handleClear}\n        placeholder={isMobile ? undefined : placeholder}\n        disabled={disabled}\n        onBlur={\n          opts?.enableBlurClose\n            ? (e) => {\n                if (!e.currentTarget.contains(e.relatedTarget) && e.currentTarget.value === '') {\n                  setIsOpen(false);\n                }\n              }\n            : undefined\n        }\n      >\n        {label}\n      </Searchbar>\n    </SearchForm>\n  );\n\n  if (isMobile) {\n    // Add wrapper so that the Searchbar takes up the rest of the available space.\n    return <Box width=\"100%\">{renderSearchForm()}</Box>;\n  }\n\n  if (isOpen) {\n    return renderSearchForm({ enableBlurClose: true });\n  }\n\n  return (\n    <IconButton\n      ref={iconButtonRef}\n      disabled={disabled}\n      label={formatMessage({ id: 'global.search', defaultMessage: 'Search' })}\n      onClick={handleToggle}\n    >\n      <SearchIcon />\n    </IconButton>\n  );\n};\n\nexport { SearchInput };\nexport type { SearchInputProps };\n"],"names":["SearchInput","disabled","label","placeholder","trackedEvent","trackedEventDetails","inputRef","React","useRef","iconButtonRef","query","setQuery","useQueryParams","value","setValue","useState","_q","isOpen","setIsOpen","formatMessage","useIntl","trackUsage","useTracking","isMobile","useIsMobile","handleToggle","prev","useLayoutEffect","current","focus","handleClear","handleSubmit","e","preventDefault","encodeURIComponent","page","renderSearchForm","opts","_jsx","SearchForm","onSubmit","Searchbar","ref","name","onChange","target","clearLabel","id","defaultMessage","onClear","undefined","onBlur","enableBlurClose","currentTarget","contains","relatedTarget","Box","width","IconButton","onClick","SearchIcon"],"mappings":"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"}

package/dist/admin/admin/src/components/SearchInput.mjs

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { SearchForm, Searchbar, IconButton } from '@strapi/design-system';
+import { Box, IconButton, SearchForm, Searchbar } from '@strapi/design-system';
 import { Search } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useTracking } from '../features/Tracking.mjs';
+import { useIsMobile } from '../hooks/useMediaQuery.mjs';
 import { useQueryParams } from '../hooks/useQueryParams.mjs';
 
 const SearchInput = ({ disabled, label, placeholder, trackedEvent, trackedEventDetails })=>{
@@ -14,6 +15,7 @@ const SearchInput = ({ disabled, label, placeholder, trackedEvent, trackedEventD
     const [isOpen, setIsOpen] = React.useState(!!value);
     const { formatMessage } = useIntl();
     const { trackUsage } = useTracking();
+    const isMobile = useIsMobile();
     const handleToggle = ()=>setIsOpen((prev)=>!prev);
     React.useLayoutEffect(()=>{
         if (isOpen && inputRef.current) {
@@ -46,8 +48,7 @@ const SearchInput = ({ disabled, label, placeholder, trackedEvent, trackedEventD
             }, 'remove');
         }
     };
-    if (isOpen) {
-        return /*#__PURE__*/ jsx(SearchForm, {
+    const renderSearchForm = (opts)=>/*#__PURE__*/ jsx(SearchForm, {
             onSubmit: handleSubmit,
             children: /*#__PURE__*/ jsx(Searchbar, {
                 ref: inputRef,
@@ -59,15 +60,27 @@ const SearchInput = ({ disabled, label, placeholder, trackedEvent, trackedEventD
                     defaultMessage: 'Clear'
                 }),
                 onClear: handleClear,
-                placeholder: placeholder,
-                onBlur: (e)=>{
+                placeholder: isMobile ? undefined : placeholder,
+                disabled: disabled,
+                onBlur: opts?.enableBlurClose ? (e)=>{
                     if (!e.currentTarget.contains(e.relatedTarget) && e.currentTarget.value === '') {
                         setIsOpen(false);
                     }
-                },
+                } : undefined,
                 children: label
             })
         });
+    if (isMobile) {
+        // Add wrapper so that the Searchbar takes up the rest of the available space.
+        return /*#__PURE__*/ jsx(Box, {
+            width: "100%",
+            children: renderSearchForm()
+        });
+    }
+    if (isOpen) {
+        return renderSearchForm({
+            enableBlurClose: true
+        });
     }
     return /*#__PURE__*/ jsx(IconButton, {
         ref: iconButtonRef,

package/dist/admin/admin/src/components/SearchInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.mjs","sources":["../../../../../admin/src/components/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { IconButton, Searchbar, SearchForm } from '@strapi/design-system';\nimport { Search as SearchIcon } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { TrackingEvent, useTracking } from '../features/Tracking';\nimport { useQueryParams } from '../hooks/useQueryParams';\n\ninterface SearchInputProps {\n  disabled?: boolean;\n  label: string;\n  placeholder?: string;\n  trackedEvent?: TrackingEvent['name'] | null;\n  trackedEventDetails?: TrackingEvent['properties'];\n}\n\nconst SearchInput = ({\n  disabled,\n  label,\n  placeholder,\n  trackedEvent,\n  trackedEventDetails,\n}: SearchInputProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const iconButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const [{ query }, setQuery] = useQueryParams<{ _q: string; page?: number }>();\n\n  const [value, setValue] = React.useState(query?._q || '');\n  const [isOpen, setIsOpen] = React.useState(!!value);\n\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n\n  const handleToggle = () => setIsOpen((prev) => !prev);\n\n  React.useLayoutEffect(() => {\n    if (isOpen && inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, [isOpen]);\n\n  const handleClear = () => {\n    setValue('');\n    setQuery({ _q: '' }, 'remove');\n  };\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    // Ensure value is a string\n    if (value) {\n      if (trackedEvent) {\n        trackUsage(trackedEvent, trackedEventDetails);\n      }\n      setQuery({ _q: encodeURIComponent(value), page: 1 });\n    } else {\n      handleToggle();\n      setQuery({ _q: '' }, 'remove');\n    }\n  };\n\n  if (isOpen) {\n    return (\n      <SearchForm onSubmit={handleSubmit}>\n        <Searchbar\n          ref={inputRef}\n          name=\"search\"\n          onChange={(e) => setValue(e.target.value)}\n          value={value}\n          clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n          onClear={handleClear}\n          placeholder={placeholder}\n          onBlur={(e) => {\n            if (!e.currentTarget.contains(e.relatedTarget) && e.currentTarget.value === '') {\n              setIsOpen(false);\n            }\n          }}\n        >\n          {label}\n        </Searchbar>\n      </SearchForm>\n    );\n  }\n\n  return (\n    <IconButton\n      ref={iconButtonRef}\n      disabled={disabled}\n      label={formatMessage({ id: 'global.search', defaultMessage: 'Search' })}\n      onClick={handleToggle}\n    >\n      <SearchIcon />\n    </IconButton>\n  );\n};\n\nexport { SearchInput };\nexport type { SearchInputProps };\n"],"names":["SearchInput","disabled","label","placeholder","trackedEvent","trackedEventDetails","inputRef","React","useRef","iconButtonRef","query","setQuery","useQueryParams","value","setValue","useState","_q","isOpen","setIsOpen","formatMessage","useIntl","trackUsage","useTracking","handleToggle","prev","useLayoutEffect","current","focus","handleClear","handleSubmit","e","preventDefault","encodeURIComponent","page","_jsx","SearchForm","onSubmit","Searchbar","ref","name","onChange","target","clearLabel","id","defaultMessage","onClear","onBlur","currentTarget","contains","relatedTarget","IconButton","onClick","SearchIcon"],"mappings":"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"}
+{"version":3,"file":"SearchInput.mjs","sources":["../../../../../admin/src/components/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, IconButton, Searchbar, SearchForm } from '@strapi/design-system';\nimport { Search as SearchIcon } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { TrackingEvent, useTracking } from '../features/Tracking';\nimport { useIsMobile } from '../hooks/useMediaQuery';\nimport { useQueryParams } from '../hooks/useQueryParams';\n\ninterface SearchInputProps {\n  disabled?: boolean;\n  label: string;\n  placeholder?: string;\n  trackedEvent?: TrackingEvent['name'] | null;\n  trackedEventDetails?: TrackingEvent['properties'];\n}\n\nconst SearchInput = ({\n  disabled,\n  label,\n  placeholder,\n  trackedEvent,\n  trackedEventDetails,\n}: SearchInputProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const iconButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const [{ query }, setQuery] = useQueryParams<{ _q: string; page?: number }>();\n\n  const [value, setValue] = React.useState(query?._q || '');\n  const [isOpen, setIsOpen] = React.useState(!!value);\n\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const isMobile = useIsMobile();\n\n  const handleToggle = () => setIsOpen((prev) => !prev);\n\n  React.useLayoutEffect(() => {\n    if (isOpen && inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, [isOpen]);\n\n  const handleClear = () => {\n    setValue('');\n    setQuery({ _q: '' }, 'remove');\n  };\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    // Ensure value is a string\n    if (value) {\n      if (trackedEvent) {\n        trackUsage(trackedEvent, trackedEventDetails);\n      }\n      setQuery({ _q: encodeURIComponent(value), page: 1 });\n    } else {\n      handleToggle();\n      setQuery({ _q: '' }, 'remove');\n    }\n  };\n\n  const renderSearchForm = (opts?: { enableBlurClose?: boolean }) => (\n    <SearchForm onSubmit={handleSubmit}>\n      <Searchbar\n        ref={inputRef}\n        name=\"search\"\n        onChange={(e) => setValue(e.target.value)}\n        value={value}\n        clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n        onClear={handleClear}\n        placeholder={isMobile ? undefined : placeholder}\n        disabled={disabled}\n        onBlur={\n          opts?.enableBlurClose\n            ? (e) => {\n                if (!e.currentTarget.contains(e.relatedTarget) && e.currentTarget.value === '') {\n                  setIsOpen(false);\n                }\n              }\n            : undefined\n        }\n      >\n        {label}\n      </Searchbar>\n    </SearchForm>\n  );\n\n  if (isMobile) {\n    // Add wrapper so that the Searchbar takes up the rest of the available space.\n    return <Box width=\"100%\">{renderSearchForm()}</Box>;\n  }\n\n  if (isOpen) {\n    return renderSearchForm({ enableBlurClose: true });\n  }\n\n  return (\n    <IconButton\n      ref={iconButtonRef}\n      disabled={disabled}\n      label={formatMessage({ id: 'global.search', defaultMessage: 'Search' })}\n      onClick={handleToggle}\n    >\n      <SearchIcon />\n    </IconButton>\n  );\n};\n\nexport { SearchInput };\nexport type { SearchInputProps };\n"],"names":["SearchInput","disabled","label","placeholder","trackedEvent","trackedEventDetails","inputRef","React","useRef","iconButtonRef","query","setQuery","useQueryParams","value","setValue","useState","_q","isOpen","setIsOpen","formatMessage","useIntl","trackUsage","useTracking","isMobile","useIsMobile","handleToggle","prev","useLayoutEffect","current","focus","handleClear","handleSubmit","e","preventDefault","encodeURIComponent","page","renderSearchForm","opts","_jsx","SearchForm","onSubmit","Searchbar","ref","name","onChange","target","clearLabel","id","defaultMessage","onClear","undefined","onBlur","enableBlurClose","currentTarget","contains","relatedTarget","Box","width","IconButton","onClick","SearchIcon"],"mappings":"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"}

package/dist/admin/admin/src/components/SubNav.js

@@ -11,17 +11,14 @@ var Tours = require('./GuidedTour/Tours.js');
 
 const MainSubNav = styled.styled(designSystem.SubNav)`
   width: 100%;
-  height: calc(100dvh - ${theme.HEIGHT_TOP_NAVIGATION} - 1px);
+  height: 100%;
   overflow: hidden;
   background-color: ${({ theme })=>theme.colors.neutral0};
   display: flex;
   flex-direction: column;
   border-right: 0;
   box-shadow: none;
-  position: fixed;
-  top: calc(${theme.HEIGHT_TOP_NAVIGATION} + 1px);
-  left: 0;
-  z-index: 2;
+  position: relative;
 
   ${({ theme })=>theme.breakpoints.medium} {
     width: ${theme.WIDTH_SIDE_NAVIGATION};
@@ -30,9 +27,6 @@ const MainSubNav = styled.styled(designSystem.SubNav)`
     border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
     overscroll-behavior: contain;
   }
-  ${({ theme })=>theme.breakpoints.large} {
-    height: 100dvh;
-  }
 `;
 const Main = ({ children, ...props })=>/*#__PURE__*/ jsxRuntime.jsx(MainSubNav, {
         ...props,
@@ -376,12 +370,16 @@ const SubSection = ({ label, children })=>{
     });
 };
 const PageWrapper = styled.styled(designSystem.Box)`
+  width: 100%;
+
   ${MainSubNav} {
     background-color: transparent;
     border-right: none;
   }
 
   ${({ theme })=>theme.breakpoints.medium} {
+    overflow: hidden;
+
     ${MainSubNav} {
       top: 0;
     }