@strapi/upload 5.51.2 → 5.52.0

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":"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"}
+{"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/hooks/useAIMetadataEnabled.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var ee = require('@strapi/admin/strapi-admin/ee');
+var constants = require('../../shared/constants.js');
+var settings = require('../services/settings.js');
+
+/**
+ * Whether the replace flow will actually regenerate AI metadata, so the UI only
+ * promises it when it happens.
+ *
+ * Two independent gates, both required — `GET /upload/settings` returns the
+ * stored `aiMetadata` toggle on its own, which stays `true` (its default) on
+ * licenses without AI, so the setting alone over-promises. The server's own
+ * check (`aiMetadata.isEnabled()`) ANDs the same two conditions.
+ *
+ * Pass `{ mime }` to add the third gate the replace flow applies: it only
+ * regenerates metadata for images the AI provider can read
+ * (`admin-upload.replaceFile` → `aiMetadata.processFiles`, which filters on this
+ * same allowlist). Promising it for a PDF — or for a GIF, which clears the
+ * server's looser `image/*` gate but is skipped by the provider — would describe
+ * something that never happens.
+ *
+ * The argument is an object rather than a bare `mime` so the two intents stay
+ * distinguishable: `File.mime` is optional on the contract, so a positional
+ * parameter let `useAIMetadataEnabled(asset.mime)` collapse into the ungated
+ * call whenever the mime was missing — silently taking the permissive path this
+ * hook exists to close. `useAIMetadataEnabled({ mime: undefined })` still gates
+ * (and fails closed); only an omitted `options` skips the mime check.
+ */ const useAIMetadataEnabled = (options)=>{
+    const isAIAvailable = ee.useAIAvailability();
+    const { data: settings$1 } = settings.useGetUploadSettingsQuery();
+    if (!isAIAvailable || !(settings$1?.data?.aiMetadata ?? false)) {
+        return false;
+    }
+    return options === undefined ? true : constants.isAIMetadataSupportedMime(options.mime);
+};
+
+exports.useAIMetadataEnabled = useAIMetadataEnabled;
+//# sourceMappingURL=useAIMetadataEnabled.js.map

package/dist/admin/future/hooks/useAIMetadataEnabled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAIMetadataEnabled.js","sources":["../../../../admin/src/future/hooks/useAIMetadataEnabled.ts"],"sourcesContent":["import { useAIAvailability } from '@strapi/admin/strapi-admin/ee';\n\nimport { isAIMetadataSupportedMime } from '../../../../shared/constants';\nimport { useGetUploadSettingsQuery } from '../services/settings';\n\n/**\n * Whether the replace flow will actually regenerate AI metadata, so the UI only\n * promises it when it happens.\n *\n * Two independent gates, both required — `GET /upload/settings` returns the\n * stored `aiMetadata` toggle on its own, which stays `true` (its default) on\n * licenses without AI, so the setting alone over-promises. The server's own\n * check (`aiMetadata.isEnabled()`) ANDs the same two conditions.\n *\n * Pass `{ mime }` to add the third gate the replace flow applies: it only\n * regenerates metadata for images the AI provider can read\n * (`admin-upload.replaceFile` → `aiMetadata.processFiles`, which filters on this\n * same allowlist). Promising it for a PDF — or for a GIF, which clears the\n * server's looser `image/*` gate but is skipped by the provider — would describe\n * something that never happens.\n *\n * The argument is an object rather than a bare `mime` so the two intents stay\n * distinguishable: `File.mime` is optional on the contract, so a positional\n * parameter let `useAIMetadataEnabled(asset.mime)` collapse into the ungated\n * call whenever the mime was missing — silently taking the permissive path this\n * hook exists to close. `useAIMetadataEnabled({ mime: undefined })` still gates\n * (and fails closed); only an omitted `options` skips the mime check.\n */\nexport const useAIMetadataEnabled = (options?: { mime?: string | null }): boolean => {\n  const isAIAvailable = useAIAvailability();\n  const { data: settings } = useGetUploadSettingsQuery();\n\n  if (!isAIAvailable || !(settings?.data?.aiMetadata ?? false)) {\n    return false;\n  }\n\n  return options === undefined ? true : isAIMetadataSupportedMime(options.mime);\n};\n"],"names":["useAIMetadataEnabled","options","isAIAvailable","useAIAvailability","data","settings","useGetUploadSettingsQuery","aiMetadata","undefined","isAIMetadataSupportedMime","mime"],"mappings":";;;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;IAuBO,MAAMA,oBAAAA,GAAuB,CAACC,OAAAA,GAAAA;AACnC,IAAA,MAAMC,aAAAA,GAAgBC,oBAAAA,EAAAA;AACtB,IAAA,MAAM,EAAEC,IAAAA,EAAMC,UAAQ,EAAE,GAAGC,kCAAAA,EAAAA;IAE3B,IAAI,CAACJ,iBAAiB,EAAEG,YAAUD,IAAAA,EAAMG,UAAAA,IAAc,KAAI,CAAA,EAAI;QAC5D,OAAO,KAAA;AACT,IAAA;AAEA,IAAA,OAAON,OAAAA,KAAYO,SAAAA,GAAY,IAAA,GAAOC,mCAAAA,CAA0BR,QAAQS,IAAI,CAAA;AAC9E;;;;"}

package/dist/admin/future/hooks/useAIMetadataEnabled.mjs

@@ -0,0 +1,37 @@
+import { useAIAvailability } from '@strapi/admin/strapi-admin/ee';
+import { isAIMetadataSupportedMime } from '../../shared/constants.mjs';
+import { useGetUploadSettingsQuery } from '../services/settings.mjs';
+
+/**
+ * Whether the replace flow will actually regenerate AI metadata, so the UI only
+ * promises it when it happens.
+ *
+ * Two independent gates, both required — `GET /upload/settings` returns the
+ * stored `aiMetadata` toggle on its own, which stays `true` (its default) on
+ * licenses without AI, so the setting alone over-promises. The server's own
+ * check (`aiMetadata.isEnabled()`) ANDs the same two conditions.
+ *
+ * Pass `{ mime }` to add the third gate the replace flow applies: it only
+ * regenerates metadata for images the AI provider can read
+ * (`admin-upload.replaceFile` → `aiMetadata.processFiles`, which filters on this
+ * same allowlist). Promising it for a PDF — or for a GIF, which clears the
+ * server's looser `image/*` gate but is skipped by the provider — would describe
+ * something that never happens.
+ *
+ * The argument is an object rather than a bare `mime` so the two intents stay
+ * distinguishable: `File.mime` is optional on the contract, so a positional
+ * parameter let `useAIMetadataEnabled(asset.mime)` collapse into the ungated
+ * call whenever the mime was missing — silently taking the permissive path this
+ * hook exists to close. `useAIMetadataEnabled({ mime: undefined })` still gates
+ * (and fails closed); only an omitted `options` skips the mime check.
+ */ const useAIMetadataEnabled = (options)=>{
+    const isAIAvailable = useAIAvailability();
+    const { data: settings } = useGetUploadSettingsQuery();
+    if (!isAIAvailable || !(settings?.data?.aiMetadata ?? false)) {
+        return false;
+    }
+    return options === undefined ? true : isAIMetadataSupportedMime(options.mime);
+};
+
+export { useAIMetadataEnabled };
+//# sourceMappingURL=useAIMetadataEnabled.mjs.map

package/dist/admin/future/hooks/useAIMetadataEnabled.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAIMetadataEnabled.mjs","sources":["../../../../admin/src/future/hooks/useAIMetadataEnabled.ts"],"sourcesContent":["import { useAIAvailability } from '@strapi/admin/strapi-admin/ee';\n\nimport { isAIMetadataSupportedMime } from '../../../../shared/constants';\nimport { useGetUploadSettingsQuery } from '../services/settings';\n\n/**\n * Whether the replace flow will actually regenerate AI metadata, so the UI only\n * promises it when it happens.\n *\n * Two independent gates, both required — `GET /upload/settings` returns the\n * stored `aiMetadata` toggle on its own, which stays `true` (its default) on\n * licenses without AI, so the setting alone over-promises. The server's own\n * check (`aiMetadata.isEnabled()`) ANDs the same two conditions.\n *\n * Pass `{ mime }` to add the third gate the replace flow applies: it only\n * regenerates metadata for images the AI provider can read\n * (`admin-upload.replaceFile` → `aiMetadata.processFiles`, which filters on this\n * same allowlist). Promising it for a PDF — or for a GIF, which clears the\n * server's looser `image/*` gate but is skipped by the provider — would describe\n * something that never happens.\n *\n * The argument is an object rather than a bare `mime` so the two intents stay\n * distinguishable: `File.mime` is optional on the contract, so a positional\n * parameter let `useAIMetadataEnabled(asset.mime)` collapse into the ungated\n * call whenever the mime was missing — silently taking the permissive path this\n * hook exists to close. `useAIMetadataEnabled({ mime: undefined })` still gates\n * (and fails closed); only an omitted `options` skips the mime check.\n */\nexport const useAIMetadataEnabled = (options?: { mime?: string | null }): boolean => {\n  const isAIAvailable = useAIAvailability();\n  const { data: settings } = useGetUploadSettingsQuery();\n\n  if (!isAIAvailable || !(settings?.data?.aiMetadata ?? false)) {\n    return false;\n  }\n\n  return options === undefined ? true : isAIMetadataSupportedMime(options.mime);\n};\n"],"names":["useAIMetadataEnabled","options","isAIAvailable","useAIAvailability","data","settings","useGetUploadSettingsQuery","aiMetadata","undefined","isAIMetadataSupportedMime","mime"],"mappings":";;;;AAKA;;;;;;;;;;;;;;;;;;;;;;IAuBO,MAAMA,oBAAAA,GAAuB,CAACC,OAAAA,GAAAA;AACnC,IAAA,MAAMC,aAAAA,GAAgBC,iBAAAA,EAAAA;AACtB,IAAA,MAAM,EAAEC,IAAAA,EAAMC,QAAQ,EAAE,GAAGC,yBAAAA,EAAAA;IAE3B,IAAI,CAACJ,iBAAiB,EAAEG,UAAUD,IAAAA,EAAMG,UAAAA,IAAc,KAAI,CAAA,EAAI;QAC5D,OAAO,KAAA;AACT,IAAA;AAEA,IAAA,OAAON,OAAAA,KAAYO,SAAAA,GAAY,IAAA,GAAOC,yBAAAA,CAA0BR,QAAQS,IAAI,CAAA;AAC9E;;;;"}