@strapi/upload 5.51.2 → 5.52.1

package/dist/admin/future/App.js

@@ -8,13 +8,13 @@ var reactRouterDom = require('react-router-dom');
 var AssetsPage = require('./pages/Assets/AssetsPage.js');
 var translations = require('./utils/translations.js');
 
-const UnstableMediaLibrary = ()=>{
+const BetaMediaLibrary = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const title = formatMessage({
         id: translations.getTranslationKey('plugin.name'),
         defaultMessage: 'Media Library'
     });
-    return /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Page.Main, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Title, {
                 children: title
@@ -29,5 +29,5 @@ const UnstableMediaLibrary = ()=>{
     });
 };
 
-exports.UnstableMediaLibrary = UnstableMediaLibrary;
+exports.BetaMediaLibrary = BetaMediaLibrary;
 //# sourceMappingURL=App.js.map

package/dist/admin/future/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { AssetsPage } from './pages/Assets/AssetsPage';\nimport { getTranslationKey } from './utils/translations';\n\nexport const UnstableMediaLibrary = () => {\n  const { formatMessage } = useIntl();\n  const title = formatMessage({\n    id: getTranslationKey('plugin.name'),\n    defaultMessage: 'Media Library',\n  });\n\n  return (\n    <Page.Main>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<AssetsPage />} />\n      </Routes>\n    </Page.Main>\n  );\n};\n"],"names":["UnstableMediaLibrary","formatMessage","useIntl","title","id","getTranslationKey","defaultMessage","_jsxs","Page","Main","_jsx","Title","Routes","Route","index","element","AssetsPage"],"mappings":";;;;;;;;;;MASaA,oBAAAA,GAAuB,IAAA;IAClC,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQF,aAAAA,CAAc;AAC1BG,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,aAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA,CAAA;IAEA,qBACEC,eAAA,CAACC,iBAAKC,IAAI,EAAA;;AACR,0BAAAC,cAAA,CAACF,iBAAKG,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbO,cAAA,CAACE,qBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAF,cAAA,CAACG,oBAAAA,EAAAA;oBAAMC,KAAK,EAAA,IAAA;AAACC,oBAAAA,OAAAA,gBAASL,cAAA,CAACM,qBAAAA,EAAAA,EAAAA;;;;;AAI/B;;;;"}
+{"version":3,"file":"App.js","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { AssetsPage } from './pages/Assets/AssetsPage';\nimport { getTranslationKey } from './utils/translations';\n\nexport const BetaMediaLibrary = () => {\n  const { formatMessage } = useIntl();\n\n  const title = formatMessage({\n    id: getTranslationKey('plugin.name'),\n    defaultMessage: 'Media Library',\n  });\n\n  return (\n    <>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<AssetsPage />} />\n      </Routes>\n    </>\n  );\n};\n"],"names":["BetaMediaLibrary","formatMessage","useIntl","title","id","getTranslationKey","defaultMessage","_jsxs","_Fragment","_jsx","Page","Title","Routes","Route","index","element","AssetsPage"],"mappings":";;;;;;;;;;MASaA,gBAAAA,GAAmB,IAAA;IAC9B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,MAAMC,QAAQF,aAAAA,CAAc;AAC1BG,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,aAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA,CAAA;IAEA,qBACEC,eAAA,CAAAC,mBAAA,EAAA;;AACE,0BAAAC,cAAA,CAACC,iBAAKC,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbM,cAAA,CAACG,qBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAH,cAAA,CAACI,oBAAAA,EAAAA;oBAAMC,KAAK,EAAA,IAAA;AAACC,oBAAAA,OAAAA,gBAASN,cAAA,CAACO,qBAAAA,EAAAA,EAAAA;;;;;AAI/B;;;;"}

package/dist/admin/future/App.mjs

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'react';
 import { Page } from '@strapi/admin/strapi-admin';
 import { useIntl } from 'react-intl';
@@ -6,13 +6,13 @@ import { Routes, Route } from 'react-router-dom';
 import { AssetsPage } from './pages/Assets/AssetsPage.mjs';
 import { getTranslationKey } from './utils/translations.mjs';
 
-const UnstableMediaLibrary = ()=>{
+const BetaMediaLibrary = ()=>{
     const { formatMessage } = useIntl();
     const title = formatMessage({
         id: getTranslationKey('plugin.name'),
         defaultMessage: 'Media Library'
     });
-    return /*#__PURE__*/ jsxs(Page.Main, {
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(Page.Title, {
                 children: title
@@ -27,5 +27,5 @@ const UnstableMediaLibrary = ()=>{
     });
 };
 
-export { UnstableMediaLibrary };
+export { BetaMediaLibrary };
 //# sourceMappingURL=App.mjs.map

package/dist/admin/future/App.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"App.mjs","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { AssetsPage } from './pages/Assets/AssetsPage';\nimport { getTranslationKey } from './utils/translations';\n\nexport const UnstableMediaLibrary = () => {\n  const { formatMessage } = useIntl();\n  const title = formatMessage({\n    id: getTranslationKey('plugin.name'),\n    defaultMessage: 'Media Library',\n  });\n\n  return (\n    <Page.Main>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<AssetsPage />} />\n      </Routes>\n    </Page.Main>\n  );\n};\n"],"names":["UnstableMediaLibrary","formatMessage","useIntl","title","id","getTranslationKey","defaultMessage","_jsxs","Page","Main","_jsx","Title","Routes","Route","index","element","AssetsPage"],"mappings":";;;;;;;;MASaA,oBAAAA,GAAuB,IAAA;IAClC,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQF,aAAAA,CAAc;AAC1BG,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,aAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA,CAAA;IAEA,qBACEC,IAAA,CAACC,KAAKC,IAAI,EAAA;;AACR,0BAAAC,GAAA,CAACF,KAAKG,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbO,GAAA,CAACE,MAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAF,GAAA,CAACG,KAAAA,EAAAA;oBAAMC,KAAK,EAAA,IAAA;AAACC,oBAAAA,OAAAA,gBAASL,GAAA,CAACM,UAAAA,EAAAA,EAAAA;;;;;AAI/B;;;;"}
+{"version":3,"file":"App.mjs","sources":["../../../admin/src/future/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { AssetsPage } from './pages/Assets/AssetsPage';\nimport { getTranslationKey } from './utils/translations';\n\nexport const BetaMediaLibrary = () => {\n  const { formatMessage } = useIntl();\n\n  const title = formatMessage({\n    id: getTranslationKey('plugin.name'),\n    defaultMessage: 'Media Library',\n  });\n\n  return (\n    <>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<AssetsPage />} />\n      </Routes>\n    </>\n  );\n};\n"],"names":["BetaMediaLibrary","formatMessage","useIntl","title","id","getTranslationKey","defaultMessage","_jsxs","_Fragment","_jsx","Page","Title","Routes","Route","index","element","AssetsPage"],"mappings":";;;;;;;;MASaA,gBAAAA,GAAmB,IAAA;IAC9B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,QAAQF,aAAAA,CAAc;AAC1BG,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,aAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA,CAAA;IAEA,qBACEC,IAAA,CAAAC,QAAA,EAAA;;AACE,0BAAAC,GAAA,CAACC,KAAKC,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbM,GAAA,CAACG,MAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAH,GAAA,CAACI,KAAAA,EAAAA;oBAAMC,KAAK,EAAA,IAAA;AAACC,oBAAAA,OAAAA,gBAASN,GAAA,CAACO,UAAAA,EAAAA,EAAAA;;;;;AAI/B;;;;"}

package/dist/admin/future/components/BetaNotice.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var translations = require('../utils/translations.js');
+
+/**
+ * The beta indicator is a notice rather than a badge on the page header: that
+ * header's title follows the folder you are in, so a badge attached to it would
+ * read as "this folder is beta". This notice covers the whole Media Library, and
+ * stays dismissed once a tester has read it.
+ *
+ * It renders inside `Layouts.Content` so it picks up the content column's gutter.
+ * Rendered above the layout instead, it would span the full viewport width and
+ * sit over the folder sidebar.
+ */ const BetaNotice = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const [isBetaNoticeDismissed, setIsBetaNoticeDismissed] = strapiAdmin.usePersistentState('STRAPI_UPLOAD_LIBRARY_BETA_NOTICE_DISMISSED', false);
+    if (isBetaNoticeDismissed) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        paddingBottom: 4,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Alert, {
+            variant: "default",
+            onClose: ()=>setIsBetaNoticeDismissed(true),
+            closeLabel: formatMessage({
+                id: translations.getTranslationKey('beta.notice.close'),
+                defaultMessage: 'Close'
+            }),
+            title: formatMessage({
+                id: translations.getTranslationKey('plugin.name'),
+                defaultMessage: 'Media Library'
+            }),
+            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                tag: "span",
+                gap: 2,
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        tag: "span",
+                        background: "neutral150",
+                        hasRadius: true,
+                        paddingLeft: 2,
+                        paddingRight: 2,
+                        shrink: 0,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            variant: "sigma",
+                            textColor: "neutral600",
+                            children: formatMessage({
+                                id: translations.getTranslationKey('beta.badge'),
+                                defaultMessage: 'Beta'
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        tag: "span",
+                        children: formatMessage({
+                            id: translations.getTranslationKey('beta.notice.content'),
+                            defaultMessage: 'This is a beta version of the Media Library. Some features are still in progress — please report any issue you run into.'
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+
+exports.BetaNotice = BetaNotice;
+//# sourceMappingURL=BetaNotice.js.map

package/dist/admin/future/components/BetaNotice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BetaNotice.js","sources":["../../../../admin/src/future/components/BetaNotice.tsx"],"sourcesContent":["import { usePersistentState } from '@strapi/admin/strapi-admin';\nimport { Alert, Box, Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslationKey } from '../utils/translations';\n\n/**\n * The beta indicator is a notice rather than a badge on the page header: that\n * header's title follows the folder you are in, so a badge attached to it would\n * read as \"this folder is beta\". This notice covers the whole Media Library, and\n * stays dismissed once a tester has read it.\n *\n * It renders inside `Layouts.Content` so it picks up the content column's gutter.\n * Rendered above the layout instead, it would span the full viewport width and\n * sit over the folder sidebar.\n */\nexport const BetaNotice = () => {\n  const { formatMessage } = useIntl();\n  const [isBetaNoticeDismissed, setIsBetaNoticeDismissed] = usePersistentState(\n    'STRAPI_UPLOAD_LIBRARY_BETA_NOTICE_DISMISSED',\n    false\n  );\n\n  if (isBetaNoticeDismissed) {\n    return null;\n  }\n\n  return (\n    <Box paddingBottom={4}>\n      <Alert\n        variant=\"default\"\n        onClose={() => setIsBetaNoticeDismissed(true)}\n        closeLabel={formatMessage({\n          id: getTranslationKey('beta.notice.close'),\n          defaultMessage: 'Close',\n        })}\n        title={formatMessage({\n          id: getTranslationKey('plugin.name'),\n          defaultMessage: 'Media Library',\n        })}\n      >\n        {/* `Alert` renders its children inside a `<p>`, so everything here stays\n            inline to keep the markup valid. That rules out `Badge`, which always\n            renders a `<div>` — the badge below reproduces its look on a `<span>`. */}\n        <Flex tag=\"span\" gap={2} alignItems=\"center\">\n          <Box\n            tag=\"span\"\n            background=\"neutral150\"\n            hasRadius\n            paddingLeft={2}\n            paddingRight={2}\n            shrink={0}\n          >\n            <Typography variant=\"sigma\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTranslationKey('beta.badge'),\n                defaultMessage: 'Beta',\n              })}\n            </Typography>\n          </Box>\n          <Typography tag=\"span\">\n            {formatMessage({\n              id: getTranslationKey('beta.notice.content'),\n              defaultMessage:\n                'This is a beta version of the Media Library. Some features are still in progress — please report any issue you run into.',\n            })}\n          </Typography>\n        </Flex>\n      </Alert>\n    </Box>\n  );\n};\n"],"names":["BetaNotice","formatMessage","useIntl","isBetaNoticeDismissed","setIsBetaNoticeDismissed","usePersistentState","_jsx","Box","paddingBottom","Alert","variant","onClose","closeLabel","id","getTranslationKey","defaultMessage","title","_jsxs","Flex","tag","gap","alignItems","background","hasRadius","paddingLeft","paddingRight","shrink","Typography","textColor"],"mappings":";;;;;;;;AAMA;;;;;;;;;UAUaA,UAAAA,GAAa,IAAA;IACxB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,qBAAAA,EAAuBC,wBAAAA,CAAyB,GAAGC,+BACxD,6CAAA,EACA,KAAA,CAAA;AAGF,IAAA,IAAIF,qBAAAA,EAAuB;QACzB,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEG,cAAA,CAACC,gBAAAA,EAAAA;QAAIC,aAAAA,EAAe,CAAA;AAClB,QAAA,QAAA,gBAAAF,cAAA,CAACG,kBAAAA,EAAAA;YACCC,OAAAA,EAAQ,SAAA;AACRC,YAAAA,OAAAA,EAAS,IAAMP,wBAAAA,CAAyB,IAAA,CAAA;AACxCQ,YAAAA,UAAAA,EAAYX,aAAAA,CAAc;AACxBY,gBAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,mBAAA,CAAA;gBACtBC,cAAAA,EAAgB;AAClB,aAAA,CAAA;AACAC,YAAAA,KAAAA,EAAOf,aAAAA,CAAc;AACnBY,gBAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,aAAA,CAAA;gBACtBC,cAAAA,EAAgB;AAClB,aAAA,CAAA;AAKA,YAAA,QAAA,gBAAAE,eAAA,CAACC,iBAAAA,EAAAA;gBAAKC,GAAAA,EAAI,MAAA;gBAAOC,GAAAA,EAAK,CAAA;gBAAGC,UAAAA,EAAW,QAAA;;kCAClCf,cAAA,CAACC,gBAAAA,EAAAA;wBACCY,GAAAA,EAAI,MAAA;wBACJG,UAAAA,EAAW,YAAA;wBACXC,SAAS,EAAA,IAAA;wBACTC,WAAAA,EAAa,CAAA;wBACbC,YAAAA,EAAc,CAAA;wBACdC,MAAAA,EAAQ,CAAA;AAER,wBAAA,QAAA,gBAAApB,cAAA,CAACqB,uBAAAA,EAAAA;4BAAWjB,OAAAA,EAAQ,OAAA;4BAAQkB,SAAAA,EAAU,YAAA;sCACnC3B,aAAAA,CAAc;AACbY,gCAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,YAAA,CAAA;gCACtBC,cAAAA,EAAgB;AAClB,6BAAA;;;kCAGJT,cAAA,CAACqB,uBAAAA,EAAAA;wBAAWR,GAAAA,EAAI,MAAA;kCACblB,aAAAA,CAAc;AACbY,4BAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,qBAAA,CAAA;4BACtBC,cAAAA,EACE;AACJ,yBAAA;;;;;;AAMZ;;;;"}

package/dist/admin/future/components/BetaNotice.mjs

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { usePersistentState } from '@strapi/admin/strapi-admin';
+import { Box, Alert, Flex, Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTranslationKey } from '../utils/translations.mjs';
+
+/**
+ * The beta indicator is a notice rather than a badge on the page header: that
+ * header's title follows the folder you are in, so a badge attached to it would
+ * read as "this folder is beta". This notice covers the whole Media Library, and
+ * stays dismissed once a tester has read it.
+ *
+ * It renders inside `Layouts.Content` so it picks up the content column's gutter.
+ * Rendered above the layout instead, it would span the full viewport width and
+ * sit over the folder sidebar.
+ */ const BetaNotice = ()=>{
+    const { formatMessage } = useIntl();
+    const [isBetaNoticeDismissed, setIsBetaNoticeDismissed] = usePersistentState('STRAPI_UPLOAD_LIBRARY_BETA_NOTICE_DISMISSED', false);
+    if (isBetaNoticeDismissed) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(Box, {
+        paddingBottom: 4,
+        children: /*#__PURE__*/ jsx(Alert, {
+            variant: "default",
+            onClose: ()=>setIsBetaNoticeDismissed(true),
+            closeLabel: formatMessage({
+                id: getTranslationKey('beta.notice.close'),
+                defaultMessage: 'Close'
+            }),
+            title: formatMessage({
+                id: getTranslationKey('plugin.name'),
+                defaultMessage: 'Media Library'
+            }),
+            children: /*#__PURE__*/ jsxs(Flex, {
+                tag: "span",
+                gap: 2,
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        tag: "span",
+                        background: "neutral150",
+                        hasRadius: true,
+                        paddingLeft: 2,
+                        paddingRight: 2,
+                        shrink: 0,
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            variant: "sigma",
+                            textColor: "neutral600",
+                            children: formatMessage({
+                                id: getTranslationKey('beta.badge'),
+                                defaultMessage: 'Beta'
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        tag: "span",
+                        children: formatMessage({
+                            id: getTranslationKey('beta.notice.content'),
+                            defaultMessage: 'This is a beta version of the Media Library. Some features are still in progress — please report any issue you run into.'
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+
+export { BetaNotice };
+//# sourceMappingURL=BetaNotice.mjs.map

package/dist/admin/future/components/BetaNotice.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BetaNotice.mjs","sources":["../../../../admin/src/future/components/BetaNotice.tsx"],"sourcesContent":["import { usePersistentState } from '@strapi/admin/strapi-admin';\nimport { Alert, Box, Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslationKey } from '../utils/translations';\n\n/**\n * The beta indicator is a notice rather than a badge on the page header: that\n * header's title follows the folder you are in, so a badge attached to it would\n * read as \"this folder is beta\". This notice covers the whole Media Library, and\n * stays dismissed once a tester has read it.\n *\n * It renders inside `Layouts.Content` so it picks up the content column's gutter.\n * Rendered above the layout instead, it would span the full viewport width and\n * sit over the folder sidebar.\n */\nexport const BetaNotice = () => {\n  const { formatMessage } = useIntl();\n  const [isBetaNoticeDismissed, setIsBetaNoticeDismissed] = usePersistentState(\n    'STRAPI_UPLOAD_LIBRARY_BETA_NOTICE_DISMISSED',\n    false\n  );\n\n  if (isBetaNoticeDismissed) {\n    return null;\n  }\n\n  return (\n    <Box paddingBottom={4}>\n      <Alert\n        variant=\"default\"\n        onClose={() => setIsBetaNoticeDismissed(true)}\n        closeLabel={formatMessage({\n          id: getTranslationKey('beta.notice.close'),\n          defaultMessage: 'Close',\n        })}\n        title={formatMessage({\n          id: getTranslationKey('plugin.name'),\n          defaultMessage: 'Media Library',\n        })}\n      >\n        {/* `Alert` renders its children inside a `<p>`, so everything here stays\n            inline to keep the markup valid. That rules out `Badge`, which always\n            renders a `<div>` — the badge below reproduces its look on a `<span>`. */}\n        <Flex tag=\"span\" gap={2} alignItems=\"center\">\n          <Box\n            tag=\"span\"\n            background=\"neutral150\"\n            hasRadius\n            paddingLeft={2}\n            paddingRight={2}\n            shrink={0}\n          >\n            <Typography variant=\"sigma\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTranslationKey('beta.badge'),\n                defaultMessage: 'Beta',\n              })}\n            </Typography>\n          </Box>\n          <Typography tag=\"span\">\n            {formatMessage({\n              id: getTranslationKey('beta.notice.content'),\n              defaultMessage:\n                'This is a beta version of the Media Library. Some features are still in progress — please report any issue you run into.',\n            })}\n          </Typography>\n        </Flex>\n      </Alert>\n    </Box>\n  );\n};\n"],"names":["BetaNotice","formatMessage","useIntl","isBetaNoticeDismissed","setIsBetaNoticeDismissed","usePersistentState","_jsx","Box","paddingBottom","Alert","variant","onClose","closeLabel","id","getTranslationKey","defaultMessage","title","_jsxs","Flex","tag","gap","alignItems","background","hasRadius","paddingLeft","paddingRight","shrink","Typography","textColor"],"mappings":";;;;;;AAMA;;;;;;;;;UAUaA,UAAAA,GAAa,IAAA;IACxB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,qBAAAA,EAAuBC,wBAAAA,CAAyB,GAAGC,mBACxD,6CAAA,EACA,KAAA,CAAA;AAGF,IAAA,IAAIF,qBAAAA,EAAuB;QACzB,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEG,GAAA,CAACC,GAAAA,EAAAA;QAAIC,aAAAA,EAAe,CAAA;AAClB,QAAA,QAAA,gBAAAF,GAAA,CAACG,KAAAA,EAAAA;YACCC,OAAAA,EAAQ,SAAA;AACRC,YAAAA,OAAAA,EAAS,IAAMP,wBAAAA,CAAyB,IAAA,CAAA;AACxCQ,YAAAA,UAAAA,EAAYX,aAAAA,CAAc;AACxBY,gBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,mBAAA,CAAA;gBACtBC,cAAAA,EAAgB;AAClB,aAAA,CAAA;AACAC,YAAAA,KAAAA,EAAOf,aAAAA,CAAc;AACnBY,gBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,aAAA,CAAA;gBACtBC,cAAAA,EAAgB;AAClB,aAAA,CAAA;AAKA,YAAA,QAAA,gBAAAE,IAAA,CAACC,IAAAA,EAAAA;gBAAKC,GAAAA,EAAI,MAAA;gBAAOC,GAAAA,EAAK,CAAA;gBAAGC,UAAAA,EAAW,QAAA;;kCAClCf,GAAA,CAACC,GAAAA,EAAAA;wBACCY,GAAAA,EAAI,MAAA;wBACJG,UAAAA,EAAW,YAAA;wBACXC,SAAS,EAAA,IAAA;wBACTC,WAAAA,EAAa,CAAA;wBACbC,YAAAA,EAAc,CAAA;wBACdC,MAAAA,EAAQ,CAAA;AAER,wBAAA,QAAA,gBAAApB,GAAA,CAACqB,UAAAA,EAAAA;4BAAWjB,OAAAA,EAAQ,OAAA;4BAAQkB,SAAAA,EAAU,YAAA;sCACnC3B,aAAAA,CAAc;AACbY,gCAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,YAAA,CAAA;gCACtBC,cAAAA,EAAgB;AAClB,6BAAA;;;kCAGJT,GAAA,CAACqB,UAAAA,EAAAA;wBAAWR,GAAAA,EAAI,MAAA;kCACblB,aAAAA,CAAc;AACbY,4BAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,qBAAA,CAAA;4BACtBC,cAAAA,EACE;AACJ,yBAAA;;;;;;AAMZ;;;;"}

package/dist/admin/future/components/Drawer.js

@@ -78,7 +78,14 @@ const DrawerContainer = styledComponents.styled(designSystem.Flex)`
   flex-direction: column;
   position: fixed;
   bottom: 0;
+  /* Mobile: full-bleed sheet. Anchoring to the right at a fixed width left a
+     dead gutter on every phone wider than the panel, and the panel only filled
+     the screen once the viewport happened to be narrower than it. Below the
+     medium breakpoint the panel is the screen; medium+ restores the
+     right-anchored rail. */
+  left: 0;
   right: 0;
+  width: 100%;
   padding: ${({ theme })=>theme.spaces[2]};
   max-width: 100%;
   /* Sit just below the overlay token (300) so that:
@@ -88,10 +95,14 @@ const DrawerContainer = styledComponents.styled(designSystem.Flex)`
        drawer (e.g. the asset details "delete" confirm) cover the drawer. */
   z-index: 200;
   overflow: hidden;
-  width: ${({ width })=>width ?? '400px'};
   /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual
      viewport < 100vh under the URL bar) would push the drawer top off-screen. */
-  max-height: ${({ maxHeight })=>maxHeight ?? '100dvh'};
+  max-height: ${({ $maxHeight })=>$maxHeight ?? '100dvh'};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    left: auto;
+    width: ${({ $width })=>$width ?? '400px'};
+  }
 
   &:focus {
     outline: none;
@@ -139,7 +150,7 @@ const CloseIconButton = styledComponents.styled(designSystem.IconButton)`
     background: transparent;
   }
 `;
-const DrawerBody = /*#__PURE__*/ React__namespace.forwardRef(({ animationDirection, children, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Content, {
+const DrawerBody = /*#__PURE__*/ React__namespace.forwardRef(({ animationDirection, width, maxHeight, children, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Content, {
         ref: ref,
         forceMount: true,
         asChild: true,
@@ -148,6 +159,8 @@ const DrawerBody = /*#__PURE__*/ React__namespace.forwardRef(({ animationDirecti
         "data-animation-direction": animationDirection,
         children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContainer, {
             $animationDirection: animationDirection,
+            $width: width,
+            $maxHeight: maxHeight,
             ...props,
             children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContent, {
                 children: children

package/dist/admin/future/components/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../admin/src/future/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* Sit just below the overlay token (300) so that:\n     - popovers (500) and tooltips (1000) rendered from descendant components\n       surface above the drawer panel,\n     - AlertDialog overlays (300) and contents (310) opened from inside the\n       drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n  z-index: 200;\n  overflow: hidden;\n  width: ${({ width }) => width ?? '400px'};\n  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual\n     viewport < 100vh under the URL bar) would push the drawer top off-screen. */\n  max-height: ${({ maxHeight }) => maxHeight ?? '100dvh'};\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerBodyProps extends FlexProps {\n  animationDirection?: 'up' | 'left';\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  ({ animationDirection, children, ...props }, ref) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={(e) => e.preventDefault()}\n      onInteractOutside={(e) => e.preventDefault()}\n      data-animation-direction={animationDirection}\n    >\n      <DrawerContainer $animationDirection={animationDirection} {...props}>\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","width","maxHeight","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","DrawerBody","React","forwardRef","animationDirection","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,iGACO,MAAMA,yBAAAA,GAA4B;AAEzC;;AAEkG;AAGlG,MAAMC,mBAAAA,GAAsBC,0BAAS;;;;;;;;;AASrC,CAAC;AAED,MAAMC,oBAAAA,GAAuBD,0BAAS;;;;;;;;;AAStC,CAAC;AAED;AACA,MAAME,oBAAAA,GAAuBF,0BAAS;;;;;;;;;AAStC,CAAC;AAED,MAAMG,qBAAAA,GAAwBH,0BAAS;;;;;;;;;AASvC,CAAC;AAUD,MAAMI,eAAAA,GAAkBC,uBAAAA,CAAOC,iBAAAA,CAA2B;;;;;WAK/C,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;AASnC,SAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,SAAS,OAAA,CAAQ;;;AAG7B,cAAA,EAAE,CAAC,EAAEC,SAAS,EAAE,GAAKA,aAAa,QAAA,CAAS;;;;;;;;iBAQxC,EAAE,CAAC,EAAEC,mBAAmB,EAAE,GACjCA,mBAAAA,KAAwB,IAAA,GAAOZ,sBAAsBG,oBAAAA;AACvD,QAAA,EAAEJ,yBAAAA,CAA0B;;;;iBAInB,EAAE,CAAC,EAAEa,mBAAmB,EAAE,GACjCA,mBAAAA,KAAwB,IAAA,GAAOV,uBAAuBE,qBAAAA;AACxD,QAAA,EAAEL,yBAAAA,CAA0B;;;;AAIpC,CAAC;AAED,MAAMc,aAAAA,GAAgBP,uBAAAA,CAAOQ,gBAAAA,CAAI;;;;;;oBAMb,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAAA,CAAMO,MAAM,CAACC,QAAQ,CAAC;AAC1C,iBAAA,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAAA,CAAMS,YAAY,CAAC;cACvC,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAAA,CAAMU,OAAO,CAACC,WAAW,CAAC;;oBAErC,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAAA,CAAMO,MAAM,CAACK,UAAU,CAAC;AAC7D,CAAC;AAMD,MAAMC,kBAAAA,GAAqBf,uBAAAA,CAAOQ,gBAAAA,CAA6B;;;;AAIzC,sBAAA,EAAE,CAAC,EAAEQ,UAAU,EAAE,GAAMA,UAAAA,GAAa,QAAQ,KAAA,CAAO;;;;;;;AAOzE,CAAC;AAED,MAAMC,eAAAA,GAAkBjB,uBAAAA,CAAOkB,uBAAAA,CAAW;;;;AAI1C,CAAC;AAWD,MAAMC,2BAAaC,gBAAAA,CAAMC,UAAU,CACjC,CAAC,EAAEC,kBAAkB,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAAO,EAAEC,GAAAA,iBAC3CC,cAAA,CAACC,kBAAOC,OAAO,EAAA;QACbH,GAAAA,EAAKA,GAAAA;QACLI,UAAU,EAAA,IAAA;QACVC,OAAO,EAAA,IAAA;QACPC,oBAAAA,EAAsB,CAACC,CAAAA,GAAMA,CAAAA,CAAEC,cAAc,EAAA;QAC7CC,iBAAAA,EAAmB,CAACF,CAAAA,GAAMA,CAAAA,CAAEC,cAAc,EAAA;QAC1CE,0BAAAA,EAA0Bb,kBAAAA;AAE1B,QAAA,QAAA,gBAAAI,cAAA,CAAC3B,eAAAA,EAAAA;YAAgBO,mBAAAA,EAAqBgB,kBAAAA;AAAqB,YAAA,GAAGE,KAAK;AACjE,YAAA,QAAA,gBAAAE,cAAA,CAACnB,aAAAA,EAAAA;AAAegB,gBAAAA,QAAAA,EAAAA;;;;AAKxBJ,UAAAA,CAAWiB,WAAW,GAAG,YAAA;AAYzB,MAAMC,UAAAA,GAAa,CAAC,EAAEC,SAAS,EAAEC,OAAO,EAAEhB,QAAQ,EAAmB,iBACnEG,cAAA,CAACC,iBAAAA,CAAOa,IAAI,EAAA;QACVC,IAAAA,EAAMH,SAAAA;QACNI,YAAAA,EAAc,CAACC,WAAAA,GAAgB,CAACA,WAAAA,IAAeJ,OAAAA,IAAAA;QAC/CK,KAAAA,EAAO,KAAA;gCAEPlB,cAAA,CAACC,kBAAOkB,MAAM,EAAA;AAAEtB,YAAAA,QAAAA,EAAAA;;;AAepB,MAAMuB,uBAAAA,GAA0B,CAAC,EAC/BvB,QAAQ,EACRwB,iBAAAA,GAAoB,IAAI,EACK,iBAC7BrB,cAAA,CAACX,kBAAAA,EAAAA;QAAmBC,UAAAA,EAAY+B,iBAAAA;AAAmBC,QAAAA,gBAAAA,EAAgB,CAACD,iBAAAA;AAClE,QAAA,QAAA,gBAAArB,cAAA,CAACuB,uBAAAA,EAAAA;AAAY1B,YAAAA,QAAAA,EAAAA;;;AAajB,MAAM2B,iBAAAA,GAAoB,CAAC,EAAEX,OAAO,EAAEY,KAAK,EAAE5B,QAAQ,EAA0B,GAAA;IAC7E,MAAM,EAAE6B,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAMC,YAAAA,GAAeH,SAASC,aAAAA,CAAc;QAAEG,EAAAA,EAAI,cAAA;QAAgBC,cAAAA,EAAgB;AAAQ,KAAA,CAAA;AAC1F,IAAA,qBACE9B,cAAA,CAACT,eAAAA,EAAAA;QAAgBwC,OAAAA,EAASlB,OAAAA;QAASY,KAAAA,EAAOG,YAAAA;QAAcI,OAAAA,EAAQ,OAAA;AAC7DnC,QAAAA,QAAAA,EAAAA,QAAAA,kBAAYG,cAAA,CAACiC,WAAAA,EAAAA,EAAAA;;AAGpB,CAAA;AAEA,MAAMC,MAAAA,GAAS;IACbpB,IAAAA,EAAMH,UAAAA;IACNwB,IAAAA,EAAM1C,UAAAA;IACN2C,iBAAAA,EAAmBhB,uBAAAA;IACnBiB,WAAAA,EAAab,iBAAAA;AACbc,IAAAA,KAAAA,EAAOrC,kBAAOqC,KAAK;AACnBC,IAAAA,WAAAA,EAAatC,kBAAOsC;AACtB;;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../admin/src/future/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n  $width?: string;\n  $maxHeight?: string;\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  /* Mobile: full-bleed sheet. Anchoring to the right at a fixed width left a\n     dead gutter on every phone wider than the panel, and the panel only filled\n     the screen once the viewport happened to be narrower than it. Below the\n     medium breakpoint the panel is the screen; medium+ restores the\n     right-anchored rail. */\n  left: 0;\n  right: 0;\n  width: 100%;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* Sit just below the overlay token (300) so that:\n     - popovers (500) and tooltips (1000) rendered from descendant components\n       surface above the drawer panel,\n     - AlertDialog overlays (300) and contents (310) opened from inside the\n       drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n  z-index: 200;\n  overflow: hidden;\n  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual\n     viewport < 100vh under the URL bar) would push the drawer top off-screen. */\n  max-height: ${({ $maxHeight }) => $maxHeight ?? '100dvh'};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    left: auto;\n    width: ${({ $width }) => $width ?? '400px'};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerBodyProps extends Omit<FlexProps, 'width' | 'maxHeight'> {\n  animationDirection?: 'up' | 'left';\n  /** Width of the panel from the medium breakpoint up. Mobile is always full-bleed. */\n  width?: string;\n  /** Cap on the panel height. Defaults to the dynamic viewport height. */\n  maxHeight?: string;\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  ({ animationDirection, width, maxHeight, children, ...props }, ref) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={(e) => e.preventDefault()}\n      onInteractOutside={(e) => e.preventDefault()}\n      data-animation-direction={animationDirection}\n    >\n      {/* width/maxHeight go through transient props so the DS Flex never emits a\n          competing `width` rule that would outrank the mobile full-bleed one. */}\n      <DrawerContainer\n        $animationDirection={animationDirection}\n        $width={width}\n        $maxHeight={maxHeight}\n        {...props}\n      >\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","$maxHeight","breakpoints","medium","$width","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","DrawerBody","React","forwardRef","animationDirection","width","maxHeight","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":"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"}

package/dist/admin/future/components/Drawer.mjs

@@ -55,7 +55,14 @@ const DrawerContainer = styled(Flex)`
   flex-direction: column;
   position: fixed;
   bottom: 0;
+  /* Mobile: full-bleed sheet. Anchoring to the right at a fixed width left a
+     dead gutter on every phone wider than the panel, and the panel only filled
+     the screen once the viewport happened to be narrower than it. Below the
+     medium breakpoint the panel is the screen; medium+ restores the
+     right-anchored rail. */
+  left: 0;
   right: 0;
+  width: 100%;
   padding: ${({ theme })=>theme.spaces[2]};
   max-width: 100%;
   /* Sit just below the overlay token (300) so that:
@@ -65,10 +72,14 @@ const DrawerContainer = styled(Flex)`
        drawer (e.g. the asset details "delete" confirm) cover the drawer. */
   z-index: 200;
   overflow: hidden;
-  width: ${({ width })=>width ?? '400px'};
   /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual
      viewport < 100vh under the URL bar) would push the drawer top off-screen. */
-  max-height: ${({ maxHeight })=>maxHeight ?? '100dvh'};
+  max-height: ${({ $maxHeight })=>$maxHeight ?? '100dvh'};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    left: auto;
+    width: ${({ $width })=>$width ?? '400px'};
+  }
 
   &:focus {
     outline: none;
@@ -116,7 +127,7 @@ const CloseIconButton = styled(IconButton)`
     background: transparent;
   }
 `;
-const DrawerBody = /*#__PURE__*/ React.forwardRef(({ animationDirection, children, ...props }, ref)=>/*#__PURE__*/ jsx(Dialog.Content, {
+const DrawerBody = /*#__PURE__*/ React.forwardRef(({ animationDirection, width, maxHeight, children, ...props }, ref)=>/*#__PURE__*/ jsx(Dialog.Content, {
         ref: ref,
         forceMount: true,
         asChild: true,
@@ -125,6 +136,8 @@ const DrawerBody = /*#__PURE__*/ React.forwardRef(({ animationDirection, childre
         "data-animation-direction": animationDirection,
         children: /*#__PURE__*/ jsx(DrawerContainer, {
             $animationDirection: animationDirection,
+            $width: width,
+            $maxHeight: maxHeight,
             ...props,
             children: /*#__PURE__*/ jsx(DrawerContent, {
                 children: children

package/dist/admin/future/components/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","sources":["../../../../admin/src/future/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* Sit just below the overlay token (300) so that:\n     - popovers (500) and tooltips (1000) rendered from descendant components\n       surface above the drawer panel,\n     - AlertDialog overlays (300) and contents (310) opened from inside the\n       drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n  z-index: 200;\n  overflow: hidden;\n  width: ${({ width }) => width ?? '400px'};\n  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual\n     viewport < 100vh under the URL bar) would push the drawer top off-screen. */\n  max-height: ${({ maxHeight }) => maxHeight ?? '100dvh'};\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerBodyProps extends FlexProps {\n  animationDirection?: 'up' | 'left';\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  ({ animationDirection, children, ...props }, ref) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={(e) => e.preventDefault()}\n      onInteractOutside={(e) => e.preventDefault()}\n      data-animation-direction={animationDirection}\n    >\n      <DrawerContainer $animationDirection={animationDirection} {...props}>\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","width","maxHeight","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","DrawerBody","React","forwardRef","animationDirection","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":"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"}
+{"version":3,"file":"Drawer.mjs","sources":["../../../../admin/src/future/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n  $width?: string;\n  $maxHeight?: string;\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  /* Mobile: full-bleed sheet. Anchoring to the right at a fixed width left a\n     dead gutter on every phone wider than the panel, and the panel only filled\n     the screen once the viewport happened to be narrower than it. Below the\n     medium breakpoint the panel is the screen; medium+ restores the\n     right-anchored rail. */\n  left: 0;\n  right: 0;\n  width: 100%;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* Sit just below the overlay token (300) so that:\n     - popovers (500) and tooltips (1000) rendered from descendant components\n       surface above the drawer panel,\n     - AlertDialog overlays (300) and contents (310) opened from inside the\n       drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n  z-index: 200;\n  overflow: hidden;\n  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual\n     viewport < 100vh under the URL bar) would push the drawer top off-screen. */\n  max-height: ${({ $maxHeight }) => $maxHeight ?? '100dvh'};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    left: auto;\n    width: ${({ $width }) => $width ?? '400px'};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerBodyProps extends Omit<FlexProps, 'width' | 'maxHeight'> {\n  animationDirection?: 'up' | 'left';\n  /** Width of the panel from the medium breakpoint up. Mobile is always full-bleed. */\n  width?: string;\n  /** Cap on the panel height. Defaults to the dynamic viewport height. */\n  maxHeight?: string;\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  ({ animationDirection, width, maxHeight, children, ...props }, ref) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={(e) => e.preventDefault()}\n      onInteractOutside={(e) => e.preventDefault()}\n      data-animation-direction={animationDirection}\n    >\n      {/* width/maxHeight go through transient props so the DS Flex never emits a\n          competing `width` rule that would outrank the mobile full-bleed one. */}\n      <DrawerContainer\n        $animationDirection={animationDirection}\n        $width={width}\n        $maxHeight={maxHeight}\n        {...props}\n      >\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","$maxHeight","breakpoints","medium","$width","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","DrawerBody","React","forwardRef","animationDirection","width","maxHeight","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":"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"}

package/dist/admin/future/components/TruncatedText.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+
+/**
+ * Text that ellipsizes, with a tooltip carrying the full value once it actually
+ * does. Used for folder and asset names, which are user-supplied and routinely
+ * longer than the column, card or rail holding them.
+ *
+ * The tooltip is conditional rather than always-on: a permanent tooltip would
+ * make every short name hoverable for no reason, and would announce a
+ * description that merely repeats the visible text.
+ *
+ * Whether the text is truncated can't be derived from the string — it depends on
+ * the rendered width — so it has to be measured. That measurement happens when
+ * the pointer or focus arrives, not at mount.
+ *
+ * Measuring at mount is the obvious approach and it does not work here. The
+ * reading is only correct once the row's width constraint has reached this span,
+ * and the tree remounts its rows during first render: the instance that survives
+ * can take its one measurement while still unconstrained, conclude it fits, and
+ * be stuck there. Nothing corrects it afterwards, because a ResizeObserver on
+ * this span never fires again — an ancestor clamps the row, so the text
+ * overflows inside a box whose own size stops changing.
+ *
+ * Reading on hover sidesteps all of that. It is the only moment the answer is
+ * needed, the layout is settled by then, and nothing is cached across remounts
+ * or resizes that could go stale.
+ */ const TruncatedText = ({ children, ...props })=>{
+    const textRef = React.useRef(null);
+    const [isTruncated, setIsTruncated] = React.useState(false);
+    const checkTruncation = ()=>{
+        const el = textRef.current;
+        if (el) {
+            setIsTruncated(el.scrollWidth > el.clientWidth);
+        }
+    };
+    // A ref callback rather than useRef alone, so the first measurement happens
+    // when the node attaches and again whenever it is replaced. The tree remounts
+    // its rows during first render, and a value measured against the discarded
+    // node would never be revisited — this re-runs against the node that survives.
+    const attachRef = (el)=>{
+        textRef.current = el;
+        if (el) {
+            checkTruncation();
+        }
+    };
+    // The Tooltip stays mounted and the *label* is what's conditional, rather than
+    // swapping between a wrapped and unwrapped span. Swapping loses the first
+    // hover: the measurement that decides to show a tooltip is itself triggered by
+    // the pointer arriving, so the trigger would mount underneath a pointer that
+    // has already entered, and Radix — which starts watching at mount — sees no
+    // enter event and stays closed until the pointer leaves and returns.
+    //
+    // With `label` empty the DS Tooltip renders its child as-is and attaches
+    // nothing, so untruncated text still costs no DOM node and announces no
+    // description duplicating what is already on screen.
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+        label: isTruncated ? children : undefined,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+            ref: attachRef,
+            ellipsis: true,
+            // Focus is covered as well as hover: the tooltip has to be reachable by
+            // keyboard, and these rows are buttons.
+            onPointerEnter: checkTruncation,
+            onFocus: checkTruncation,
+            ...props,
+            children: children
+        })
+    });
+};
+
+exports.TruncatedText = TruncatedText;
+//# sourceMappingURL=TruncatedText.js.map

package/dist/admin/future/components/TruncatedText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedText.js","sources":["../../../../admin/src/future/components/TruncatedText.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport { Tooltip, Typography, type TypographyProps } from '@strapi/design-system';\n\ninterface TruncatedTextProps extends Omit<TypographyProps, 'children' | 'ellipsis'> {\n  /** The full text. Doubles as the tooltip content once it no longer fits. */\n  children: string;\n}\n\n/**\n * Text that ellipsizes, with a tooltip carrying the full value once it actually\n * does. Used for folder and asset names, which are user-supplied and routinely\n * longer than the column, card or rail holding them.\n *\n * The tooltip is conditional rather than always-on: a permanent tooltip would\n * make every short name hoverable for no reason, and would announce a\n * description that merely repeats the visible text.\n *\n * Whether the text is truncated can't be derived from the string — it depends on\n * the rendered width — so it has to be measured. That measurement happens when\n * the pointer or focus arrives, not at mount.\n *\n * Measuring at mount is the obvious approach and it does not work here. The\n * reading is only correct once the row's width constraint has reached this span,\n * and the tree remounts its rows during first render: the instance that survives\n * can take its one measurement while still unconstrained, conclude it fits, and\n * be stuck there. Nothing corrects it afterwards, because a ResizeObserver on\n * this span never fires again — an ancestor clamps the row, so the text\n * overflows inside a box whose own size stops changing.\n *\n * Reading on hover sidesteps all of that. It is the only moment the answer is\n * needed, the layout is settled by then, and nothing is cached across remounts\n * or resizes that could go stale.\n */\nexport const TruncatedText = ({ children, ...props }: TruncatedTextProps) => {\n  const textRef = useRef<HTMLSpanElement | null>(null);\n  const [isTruncated, setIsTruncated] = useState(false);\n\n  const checkTruncation = () => {\n    const el = textRef.current;\n\n    if (el) {\n      setIsTruncated(el.scrollWidth > el.clientWidth);\n    }\n  };\n\n  // A ref callback rather than useRef alone, so the first measurement happens\n  // when the node attaches and again whenever it is replaced. The tree remounts\n  // its rows during first render, and a value measured against the discarded\n  // node would never be revisited — this re-runs against the node that survives.\n  const attachRef = (el: HTMLSpanElement | null) => {\n    textRef.current = el;\n\n    if (el) {\n      checkTruncation();\n    }\n  };\n\n  // The Tooltip stays mounted and the *label* is what's conditional, rather than\n  // swapping between a wrapped and unwrapped span. Swapping loses the first\n  // hover: the measurement that decides to show a tooltip is itself triggered by\n  // the pointer arriving, so the trigger would mount underneath a pointer that\n  // has already entered, and Radix — which starts watching at mount — sees no\n  // enter event and stays closed until the pointer leaves and returns.\n  //\n  // With `label` empty the DS Tooltip renders its child as-is and attaches\n  // nothing, so untruncated text still costs no DOM node and announces no\n  // description duplicating what is already on screen.\n  return (\n    <Tooltip label={isTruncated ? children : undefined}>\n      <Typography\n        ref={attachRef}\n        ellipsis\n        // Focus is covered as well as hover: the tooltip has to be reachable by\n        // keyboard, and these rows are buttons.\n        onPointerEnter={checkTruncation}\n        onFocus={checkTruncation}\n        {...props}\n      >\n        {children}\n      </Typography>\n    </Tooltip>\n  );\n};\n"],"names":["TruncatedText","children","props","textRef","useRef","isTruncated","setIsTruncated","useState","checkTruncation","el","current","scrollWidth","clientWidth","attachRef","_jsx","Tooltip","label","undefined","Typography","ref","ellipsis","onPointerEnter","onFocus"],"mappings":";;;;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;UAyBaA,aAAAA,GAAgB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAA2B,GAAA;AACtE,IAAA,MAAMC,UAAUC,YAAAA,CAA+B,IAAA,CAAA;AAC/C,IAAA,MAAM,CAACC,WAAAA,EAAaC,cAAAA,CAAe,GAAGC,cAAAA,CAAS,KAAA,CAAA;AAE/C,IAAA,MAAMC,eAAAA,GAAkB,IAAA;QACtB,MAAMC,EAAAA,GAAKN,QAAQO,OAAO;AAE1B,QAAA,IAAID,EAAAA,EAAI;AACNH,YAAAA,cAAAA,CAAeG,EAAAA,CAAGE,WAAW,GAAGF,EAAAA,CAAGG,WAAW,CAAA;AAChD,QAAA;AACF,IAAA,CAAA;;;;;AAMA,IAAA,MAAMC,YAAY,CAACJ,EAAAA,GAAAA;AACjBN,QAAAA,OAAAA,CAAQO,OAAO,GAAGD,EAAAA;AAElB,QAAA,IAAIA,EAAAA,EAAI;AACND,YAAAA,eAAAA,EAAAA;AACF,QAAA;AACF,IAAA,CAAA;;;;;;;;;;;AAYA,IAAA,qBACEM,cAAA,CAACC,oBAAAA,EAAAA;AAAQC,QAAAA,KAAAA,EAAOX,cAAcJ,QAAAA,GAAWgB,SAAAA;AACvC,QAAA,QAAA,gBAAAH,cAAA,CAACI,uBAAAA,EAAAA;YACCC,GAAAA,EAAKN,SAAAA;YACLO,QAAQ,EAAA,IAAA;;;YAGRC,cAAAA,EAAgBb,eAAAA;YAChBc,OAAAA,EAASd,eAAAA;AACR,YAAA,GAAGN,KAAK;AAERD,YAAAA,QAAAA,EAAAA;;;AAIT;;;;"}