@strapi/upload 5.60.0 → 5.61.0

package/dist/admin/components/EditorFileDropZone/EditorFileDropZone.mjs

@@ -0,0 +1,186 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { useNotification } from '@strapi/admin/strapi-admin';
+import { Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { useAIMetadataEnabled } from '../../hooks/useAIMetadataEnabled.mjs';
+import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions.mjs';
+import { useTracking } from '../../hooks/useTracking.mjs';
+import { useUploadFilesMutation } from '../../services/api.mjs';
+import { useGetUploadSettingsQuery } from '../../services/settings.mjs';
+import { filterAllowedFiles } from '../../utils/allowedMediaTypes.mjs';
+import { getTranslationKey } from '../../utils/translations.mjs';
+import { typeFromMime } from '../../utils/typeFromMime.mjs';
+
+const FRAME_COLORS = {
+    accept: {
+        border: 'primary600',
+        background: 'primary100',
+        text: 'primary600'
+    },
+    reject: {
+        border: 'neutral300',
+        background: 'neutral150',
+        text: 'neutral600'
+    }
+};
+// Takes the place of the editor's content in its layout, so it fills the same
+// space: the editor stacks its parts against the start, sized to their content.
+const Root = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+`;
+const Frame = styled.div`
+  position: absolute;
+  inset: ${({ theme })=>theme.spaces[2]};
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${({ theme, $dragState })=>theme.colors[FRAME_COLORS[$dragState].border]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme, $dragState })=>theme.colors[FRAME_COLORS[$dragState].background]};
+  pointer-events: none;
+`;
+const hasFiles = (event)=>event.dataTransfer.types.includes('Files');
+/**
+ * Lets an editor take files dropped onto it: they upload to the root of the
+ * Media Library, through the global upload progress dialog, and are handed
+ * back to the editor one by one. Drags that carry no file, such as an editor
+ * reordering its own blocks, pass through untouched.
+ */ const EditorFileDropZone = ({ children, disabled = false, allowedTypes, onDropFiles })=>{
+    const { formatMessage } = useIntl();
+    const { toggleNotification } = useNotification();
+    const { trackUsage } = useTracking();
+    const [uploadFiles] = useUploadFilesMutation();
+    const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();
+    const { data: settings } = useGetUploadSettingsQuery(undefined, {
+        skip: !canRead
+    });
+    const isAiMetadataEnabled = useAIMetadataEnabled();
+    const [dragState, setDragState] = useState('idle');
+    // Drag events fire on every descendant crossed, so count enter/leave pairs.
+    const dragDepth = useRef(0);
+    const canUpload = !disabled && !isLoading && canCreate;
+    const handleDragEnter = (event)=>{
+        if (!hasFiles(event)) {
+            return;
+        }
+        event.preventDefault();
+        dragDepth.current += 1;
+        setDragState(canUpload ? 'accept' : 'reject');
+    };
+    const handleDragLeave = (event)=>{
+        if (!hasFiles(event)) {
+            return;
+        }
+        dragDepth.current -= 1;
+        if (dragDepth.current <= 0) {
+            dragDepth.current = 0;
+            setDragState('idle');
+        }
+    };
+    const handleDragOver = (event)=>{
+        if (!hasFiles(event)) {
+            return;
+        }
+        // Without it the browser opens the file in the tab.
+        event.preventDefault();
+        // `none` shows the no-drop cursor, and the browser then fires no `drop`.
+        event.dataTransfer.dropEffect = canUpload ? 'copy' : 'none';
+    };
+    const handleDrop = async (event)=>{
+        if (!hasFiles(event)) {
+            return;
+        }
+        event.preventDefault();
+        dragDepth.current = 0;
+        setDragState('idle');
+        if (!canUpload) {
+            return;
+        }
+        const files = Array.from(event.dataTransfer.files);
+        const allowedFiles = filterAllowedFiles(allowedTypes, files);
+        if (allowedFiles.length < files.length) {
+            toggleNotification({
+                type: 'danger',
+                timeout: 4000,
+                message: formatMessage({
+                    id: getTranslationKey('input.notification.not-supported'),
+                    defaultMessage: `You can't upload this type of file, only the following types are accepted – {fileTypes}`
+                }, {
+                    fileTypes: (allowedTypes ?? []).join(',')
+                })
+            });
+        }
+        if (allowedFiles.length === 0) {
+            return;
+        }
+        const onFileUploaded = onDropFiles(event);
+        const assetsCountByType = allowedFiles.reduce((acc, file)=>{
+            const type = typeFromMime(file.type);
+            acc[type] = (acc[type] ?? 0) + 1;
+            return acc;
+        }, {});
+        trackUsage('didSelectFile', {
+            source: 'computer',
+            location: 'content-manager'
+        });
+        trackUsage('willAddMediaLibraryAssets', {
+            location: 'content-manager',
+            ...assetsCountByType
+        });
+        const formData = new FormData();
+        allowedFiles.forEach((file)=>formData.append('files', file));
+        formData.append('fileInfo', JSON.stringify(allowedFiles.map((file)=>({
+                name: file.name,
+                caption: null,
+                alternativeText: null,
+                folder: null
+            }))));
+        try {
+            await uploadFiles({
+                formData,
+                totalFiles: allowedFiles.length,
+                concurrency: settings?.data?.concurrentUploadRequests ?? 1,
+                generateAiMetadata: Boolean(isAiMetadataEnabled),
+                onFileUploaded
+            }).unwrap();
+        } catch  {
+        // Errors reach the user through the progress dialog, which the mutation
+        // populates itself.
+        }
+    };
+    return /*#__PURE__*/ jsxs(Root, {
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        children: [
+            children,
+            dragState !== 'idle' && /*#__PURE__*/ jsx(Frame, {
+                $dragState: dragState,
+                "data-testid": "editor-file-drop-zone",
+                children: /*#__PURE__*/ jsx(Typography, {
+                    fontWeight: "semiBold",
+                    textColor: FRAME_COLORS[dragState].text,
+                    children: dragState === 'accept' ? formatMessage({
+                        id: getTranslationKey('editor-drop-zone.accept'),
+                        defaultMessage: 'Drop to upload and insert'
+                    }) : formatMessage({
+                        id: getTranslationKey('editor-drop-zone.reject'),
+                        defaultMessage: "You don't have permission to upload files"
+                    })
+                })
+            })
+        ]
+    });
+};
+
+export { EditorFileDropZone };
+//# sourceMappingURL=EditorFileDropZone.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorFileDropZone.mjs","sources":["../../../../admin/src/components/EditorFileDropZone/EditorFileDropZone.tsx"],"sourcesContent":["import { useRef, useState, type DragEvent, type ReactNode } from 'react';\n\nimport { useNotification } from '@strapi/admin/strapi-admin';\nimport { Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useAIMetadataEnabled } from '../../hooks/useAIMetadataEnabled';\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { useTracking } from '../../hooks/useTracking';\nimport { useUploadFilesMutation } from '../../services/api';\nimport { useGetUploadSettingsQuery } from '../../services/settings';\nimport { filterAllowedFiles, type AllowedMediaType } from '../../utils/allowedMediaTypes';\nimport { getTranslationKey } from '../../utils/translations';\nimport { typeFromMime } from '../../utils/typeFromMime';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype DragState = 'idle' | 'accept' | 'reject';\n\nconst FRAME_COLORS = {\n  accept: { border: 'primary600', background: 'primary100', text: 'primary600' },\n  reject: { border: 'neutral300', background: 'neutral150', text: 'neutral600' },\n} as const;\n\n// Takes the place of the editor's content in its layout, so it fills the same\n// space: the editor stacks its parts against the start, sized to their content.\nconst Root = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n`;\n\nconst Frame = styled.div<{ $dragState: Exclude<DragState, 'idle'> }>`\n  position: absolute;\n  inset: ${({ theme }) => theme.spaces[2]};\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid ${({ theme, $dragState }) => theme.colors[FRAME_COLORS[$dragState].border]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme, $dragState }) => theme.colors[FRAME_COLORS[$dragState].background]};\n  pointer-events: none;\n`;\n\nexport interface EditorFileDropZoneProps {\n  children: ReactNode;\n  disabled?: boolean;\n  allowedTypes?: AllowedMediaType[];\n  /**\n   * Called once per accepted drop, while the drop event is still current. It\n   * returns what receives each of that drop's files once uploaded, including\n   * files a Retry in the progress dialog uploads later.\n   */\n  onDropFiles: (event: DragEvent<HTMLElement>) => (file: File) => void;\n}\n\nconst hasFiles = (event: DragEvent<HTMLElement>) => event.dataTransfer.types.includes('Files');\n\n/**\n * Lets an editor take files dropped onto it: they upload to the root of the\n * Media Library, through the global upload progress dialog, and are handed\n * back to the editor one by one. Drags that carry no file, such as an editor\n * reordering its own blocks, pass through untouched.\n */\nexport const EditorFileDropZone = ({\n  children,\n  disabled = false,\n  allowedTypes,\n  onDropFiles,\n}: EditorFileDropZoneProps) => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { trackUsage } = useTracking();\n  const [uploadFiles] = useUploadFilesMutation();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n  const { data: settings } = useGetUploadSettingsQuery(undefined, { skip: !canRead });\n  const isAiMetadataEnabled = useAIMetadataEnabled();\n  const [dragState, setDragState] = useState<DragState>('idle');\n  // Drag events fire on every descendant crossed, so count enter/leave pairs.\n  const dragDepth = useRef(0);\n\n  const canUpload = !disabled && !isLoading && canCreate;\n\n  const handleDragEnter = (event: DragEvent<HTMLElement>) => {\n    if (!hasFiles(event)) {\n      return;\n    }\n\n    event.preventDefault();\n    dragDepth.current += 1;\n    setDragState(canUpload ? 'accept' : 'reject');\n  };\n\n  const handleDragLeave = (event: DragEvent<HTMLElement>) => {\n    if (!hasFiles(event)) {\n      return;\n    }\n\n    dragDepth.current -= 1;\n\n    if (dragDepth.current <= 0) {\n      dragDepth.current = 0;\n      setDragState('idle');\n    }\n  };\n\n  const handleDragOver = (event: DragEvent<HTMLElement>) => {\n    if (!hasFiles(event)) {\n      return;\n    }\n\n    // Without it the browser opens the file in the tab.\n    event.preventDefault();\n    // `none` shows the no-drop cursor, and the browser then fires no `drop`.\n    event.dataTransfer.dropEffect = canUpload ? 'copy' : 'none';\n  };\n\n  const handleDrop = async (event: DragEvent<HTMLElement>) => {\n    if (!hasFiles(event)) {\n      return;\n    }\n\n    event.preventDefault();\n    dragDepth.current = 0;\n    setDragState('idle');\n\n    if (!canUpload) {\n      return;\n    }\n\n    const files = Array.from(event.dataTransfer.files);\n    const allowedFiles = filterAllowedFiles(allowedTypes, files);\n\n    if (allowedFiles.length < files.length) {\n      toggleNotification({\n        type: 'danger',\n        timeout: 4000,\n        message: formatMessage(\n          {\n            id: getTranslationKey('input.notification.not-supported'),\n            defaultMessage: `You can't upload this type of file, only the following types are accepted – {fileTypes}`,\n          },\n          { fileTypes: (allowedTypes ?? []).join(',') }\n        ),\n      });\n    }\n\n    if (allowedFiles.length === 0) {\n      return;\n    }\n\n    const onFileUploaded = onDropFiles(event);\n\n    const assetsCountByType = allowedFiles.reduce<Record<string, number>>((acc, file) => {\n      const type = typeFromMime(file.type);\n      acc[type] = (acc[type] ?? 0) + 1;\n      return acc;\n    }, {});\n    trackUsage('didSelectFile', { source: 'computer', location: 'content-manager' });\n    trackUsage('willAddMediaLibraryAssets', { location: 'content-manager', ...assetsCountByType });\n\n    const formData = new FormData();\n    allowedFiles.forEach((file) => formData.append('files', file));\n    formData.append(\n      'fileInfo',\n      JSON.stringify(\n        allowedFiles.map((file) => ({\n          name: file.name,\n          caption: null,\n          alternativeText: null,\n          folder: null,\n        }))\n      )\n    );\n\n    try {\n      await uploadFiles({\n        formData,\n        totalFiles: allowedFiles.length,\n        concurrency: settings?.data?.concurrentUploadRequests ?? 1,\n        generateAiMetadata: Boolean(isAiMetadataEnabled),\n        onFileUploaded,\n      }).unwrap();\n    } catch {\n      // Errors reach the user through the progress dialog, which the mutation\n      // populates itself.\n    }\n  };\n\n  return (\n    <Root\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n    >\n      {children}\n      {dragState !== 'idle' && (\n        <Frame $dragState={dragState} data-testid=\"editor-file-drop-zone\">\n          <Typography fontWeight=\"semiBold\" textColor={FRAME_COLORS[dragState].text}>\n            {dragState === 'accept'\n              ? formatMessage({\n                  id: getTranslationKey('editor-drop-zone.accept'),\n                  defaultMessage: 'Drop to upload and insert',\n                })\n              : formatMessage({\n                  id: getTranslationKey('editor-drop-zone.reject'),\n                  defaultMessage: \"You don't have permission to upload files\",\n                })}\n          </Typography>\n        </Frame>\n      )}\n    </Root>\n  );\n};\n"],"names":["FRAME_COLORS","accept","border","background","text","reject","Root","styled","div","Frame","theme","spaces","$dragState","colors","borderRadius","hasFiles","event","dataTransfer","types","includes","EditorFileDropZone","children","disabled","allowedTypes","onDropFiles","formatMessage","useIntl","toggleNotification","useNotification","trackUsage","useTracking","uploadFiles","useUploadFilesMutation","canRead","canCreate","isLoading","useMediaLibraryPermissions","data","settings","useGetUploadSettingsQuery","undefined","skip","isAiMetadataEnabled","useAIMetadataEnabled","dragState","setDragState","useState","dragDepth","useRef","canUpload","handleDragEnter","preventDefault","current","handleDragLeave","handleDragOver","dropEffect","handleDrop","files","Array","from","allowedFiles","filterAllowedFiles","length","type","timeout","message","id","getTranslationKey","defaultMessage","fileTypes","join","onFileUploaded","assetsCountByType","reduce","acc","file","typeFromMime","source","location","formData","FormData","forEach","append","JSON","stringify","map","name","caption","alternativeText","folder","totalFiles","concurrency","concurrentUploadRequests","generateAiMetadata","Boolean","unwrap","_jsxs","onDragEnter","onDragLeave","onDragOver","onDrop","_jsx","data-testid","Typography","fontWeight","textColor"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAMA,YAAAA,GAAe;IACnBC,MAAAA,EAAQ;QAAEC,MAAAA,EAAQ,YAAA;QAAcC,UAAAA,EAAY,YAAA;QAAcC,IAAAA,EAAM;AAAa,KAAA;IAC7EC,MAAAA,EAAQ;QAAEH,MAAAA,EAAQ,YAAA;QAAcC,UAAAA,EAAY,YAAA;QAAcC,IAAAA,EAAM;AAAa;AAC/E,CAAA;AAEA;AACA;AACA,MAAME,IAAAA,GAAOC,MAAAA,CAAOC,GAAG;;;;;;;AAOvB,CAAC;AAED,MAAMC,KAAAA,GAAQF,MAAAA,CAAOC,GAA+C;;SAE3D,EAAE,CAAC,EAAEE,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;AAKtB,oBAAA,EAAE,CAAC,EAAED,KAAK,EAAEE,UAAU,EAAE,GAAKF,KAAAA,CAAMG,MAAM,CAACb,YAAY,CAACY,UAAAA,CAAW,CAACV,MAAM,CAAC,CAAC;AAC9E,iBAAA,EAAE,CAAC,EAAEQ,KAAK,EAAE,GAAKA,KAAAA,CAAMI,YAAY,CAAC;AACvC,cAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEE,UAAU,EAAE,GAAKF,KAAAA,CAAMG,MAAM,CAACb,YAAY,CAACY,UAAAA,CAAW,CAACT,UAAU,CAAC,CAAC;;AAE7F,CAAC;AAcD,MAAMY,QAAAA,GAAW,CAACC,KAAAA,GAAkCA,KAAAA,CAAMC,YAAY,CAACC,KAAK,CAACC,QAAQ,CAAC,OAAA,CAAA;AAEtF;;;;;AAKC,IACM,MAAMC,kBAAAA,GAAqB,CAAC,EACjCC,QAAQ,EACRC,QAAAA,GAAW,KAAK,EAChBC,YAAY,EACZC,WAAW,EACa,GAAA;IACxB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,kBAAkB,EAAE,GAAGC,eAAAA,EAAAA;IAC/B,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;IACvB,MAAM,CAACC,YAAY,GAAGC,sBAAAA,EAAAA;AACtB,IAAA,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGC,0BAAAA,EAAAA;AAC1C,IAAA,MAAM,EAAEC,IAAAA,EAAMC,QAAQ,EAAE,GAAGC,0BAA0BC,SAAAA,EAAW;AAAEC,QAAAA,IAAAA,EAAM,CAACR;AAAQ,KAAA,CAAA;AACjF,IAAA,MAAMS,mBAAAA,GAAsBC,oBAAAA,EAAAA;AAC5B,IAAA,MAAM,CAACC,SAAAA,EAAWC,YAAAA,CAAa,GAAGC,QAAAA,CAAoB,MAAA,CAAA;;AAEtD,IAAA,MAAMC,YAAYC,MAAAA,CAAO,CAAA,CAAA;AAEzB,IAAA,MAAMC,SAAAA,GAAY,CAAC3B,QAAAA,IAAY,CAACa,SAAAA,IAAaD,SAAAA;AAE7C,IAAA,MAAMgB,kBAAkB,CAAClC,KAAAA,GAAAA;QACvB,IAAI,CAACD,SAASC,KAAAA,CAAAA,EAAQ;AACpB,YAAA;AACF,QAAA;AAEAA,QAAAA,KAAAA,CAAMmC,cAAc,EAAA;AACpBJ,QAAAA,SAAAA,CAAUK,OAAO,IAAI,CAAA;AACrBP,QAAAA,YAAAA,CAAaI,YAAY,QAAA,GAAW,QAAA,CAAA;AACtC,IAAA,CAAA;AAEA,IAAA,MAAMI,kBAAkB,CAACrC,KAAAA,GAAAA;QACvB,IAAI,CAACD,SAASC,KAAAA,CAAAA,EAAQ;AACpB,YAAA;AACF,QAAA;AAEA+B,QAAAA,SAAAA,CAAUK,OAAO,IAAI,CAAA;QAErB,IAAIL,SAAAA,CAAUK,OAAO,IAAI,CAAA,EAAG;AAC1BL,YAAAA,SAAAA,CAAUK,OAAO,GAAG,CAAA;YACpBP,YAAAA,CAAa,MAAA,CAAA;AACf,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMS,iBAAiB,CAACtC,KAAAA,GAAAA;QACtB,IAAI,CAACD,SAASC,KAAAA,CAAAA,EAAQ;AACpB,YAAA;AACF,QAAA;;AAGAA,QAAAA,KAAAA,CAAMmC,cAAc,EAAA;;AAEpBnC,QAAAA,KAAAA,CAAMC,YAAY,CAACsC,UAAU,GAAGN,YAAY,MAAA,GAAS,MAAA;AACvD,IAAA,CAAA;AAEA,IAAA,MAAMO,aAAa,OAAOxC,KAAAA,GAAAA;QACxB,IAAI,CAACD,SAASC,KAAAA,CAAAA,EAAQ;AACpB,YAAA;AACF,QAAA;AAEAA,QAAAA,KAAAA,CAAMmC,cAAc,EAAA;AACpBJ,QAAAA,SAAAA,CAAUK,OAAO,GAAG,CAAA;QACpBP,YAAAA,CAAa,MAAA,CAAA;AAEb,QAAA,IAAI,CAACI,SAAAA,EAAW;AACd,YAAA;AACF,QAAA;AAEA,QAAA,MAAMQ,QAAQC,KAAAA,CAAMC,IAAI,CAAC3C,KAAAA,CAAMC,YAAY,CAACwC,KAAK,CAAA;QACjD,MAAMG,YAAAA,GAAeC,mBAAmBtC,YAAAA,EAAckC,KAAAA,CAAAA;AAEtD,QAAA,IAAIG,YAAAA,CAAaE,MAAM,GAAGL,KAAAA,CAAMK,MAAM,EAAE;YACtCnC,kBAAAA,CAAmB;gBACjBoC,IAAAA,EAAM,QAAA;gBACNC,OAAAA,EAAS,IAAA;AACTC,gBAAAA,OAAAA,EAASxC,aAAAA,CACP;AACEyC,oBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,kCAAA,CAAA;oBACtBC,cAAAA,EAAgB,CAAC,uFAAuF;iBAC1G,EACA;AAAEC,oBAAAA,SAAAA,EAAW,CAAC9C,YAAAA,IAAgB,EAAE,EAAE+C,IAAI,CAAC,GAAA;AAAK,iBAAA;AAEhD,aAAA,CAAA;AACF,QAAA;QAEA,IAAIV,YAAAA,CAAaE,MAAM,KAAK,CAAA,EAAG;AAC7B,YAAA;AACF,QAAA;AAEA,QAAA,MAAMS,iBAAiB/C,WAAAA,CAAYR,KAAAA,CAAAA;AAEnC,QAAA,MAAMwD,iBAAAA,GAAoBZ,YAAAA,CAAaa,MAAM,CAAyB,CAACC,GAAAA,EAAKC,IAAAA,GAAAA;YAC1E,MAAMZ,IAAAA,GAAOa,YAAAA,CAAaD,IAAAA,CAAKZ,IAAI,CAAA;YACnCW,GAAG,CAACX,IAAAA,CAAK,GAAG,CAACW,GAAG,CAACX,IAAAA,CAAK,IAAI,CAAA,IAAK,CAAA;YAC/B,OAAOW,GAAAA;AACT,QAAA,CAAA,EAAG,EAAC,CAAA;AACJ7C,QAAAA,UAAAA,CAAW,eAAA,EAAiB;YAAEgD,MAAAA,EAAQ,UAAA;YAAYC,QAAAA,EAAU;AAAkB,SAAA,CAAA;AAC9EjD,QAAAA,UAAAA,CAAW,2BAAA,EAA6B;YAAEiD,QAAAA,EAAU,iBAAA;AAAmB,YAAA,GAAGN;AAAkB,SAAA,CAAA;AAE5F,QAAA,MAAMO,WAAW,IAAIC,QAAAA,EAAAA;AACrBpB,QAAAA,YAAAA,CAAaqB,OAAO,CAAC,CAACN,OAASI,QAAAA,CAASG,MAAM,CAAC,OAAA,EAASP,IAAAA,CAAAA,CAAAA;QACxDI,QAAAA,CAASG,MAAM,CACb,UAAA,EACAC,IAAAA,CAAKC,SAAS,CACZxB,YAAAA,CAAayB,GAAG,CAAC,CAACV,IAAAA,IAAU;AAC1BW,gBAAAA,IAAAA,EAAMX,KAAKW,IAAI;gBACfC,OAAAA,EAAS,IAAA;gBACTC,eAAAA,EAAiB,IAAA;gBACjBC,MAAAA,EAAQ;aACV,CAAA,CAAA,CAAA,CAAA;QAIJ,IAAI;AACF,YAAA,MAAM1D,WAAAA,CAAY;AAChBgD,gBAAAA,QAAAA;AACAW,gBAAAA,UAAAA,EAAY9B,aAAaE,MAAM;gBAC/B6B,WAAAA,EAAarD,QAAAA,EAAUD,MAAMuD,wBAAAA,IAA4B,CAAA;AACzDC,gBAAAA,kBAAAA,EAAoBC,OAAAA,CAAQpD,mBAAAA,CAAAA;AAC5B6B,gBAAAA;AACF,aAAA,CAAA,CAAGwB,MAAM,EAAA;AACX,QAAA,CAAA,CAAE,OAAM;;;AAGR,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEC,IAAA,CAAC1F,IAAAA,EAAAA;QACC2F,WAAAA,EAAa/C,eAAAA;QACbgD,WAAAA,EAAa7C,eAAAA;QACb8C,UAAAA,EAAY7C,cAAAA;QACZ8C,MAAAA,EAAQ5C,UAAAA;;AAEPnC,YAAAA,QAAAA;AACAuB,YAAAA,SAAAA,KAAc,wBACbyD,GAAA,CAAC5F,KAAAA,EAAAA;gBAAMG,UAAAA,EAAYgC,SAAAA;gBAAW0D,aAAAA,EAAY,uBAAA;AACxC,gBAAA,QAAA,gBAAAD,GAAA,CAACE,UAAAA,EAAAA;oBAAWC,UAAAA,EAAW,UAAA;AAAWC,oBAAAA,SAAAA,EAAWzG,YAAY,CAAC4C,SAAAA,CAAU,CAACxC,IAAI;AACtEwC,oBAAAA,QAAAA,EAAAA,SAAAA,KAAc,WACXnB,aAAAA,CAAc;AACZyC,wBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,yBAAA,CAAA;wBACtBC,cAAAA,EAAgB;AAClB,qBAAA,CAAA,GACA3C,aAAAA,CAAc;AACZyC,wBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,yBAAA,CAAA;wBACtBC,cAAAA,EAAgB;AAClB,qBAAA;;;;;AAMhB;;;;"}

package/dist/admin/components/MediaLibraryInput/AddAssetMenu.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
@@ -72,9 +73,10 @@ const AddAssetTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
  *
  * The drop zone below keeps working whatever this shows — it is a second way
  * in, not the only one.
- */ const AddAssetMenu = ({ disabled = false, onBrowseLibrary, onUploadFromDevice, onUploadFromUrl })=>{
+ */ const AddAssetMenu = ({ disabled = false, preventOpen = false, onBrowseLibrary, onUploadFromDevice, onUploadFromUrl })=>{
     const { formatMessage } = reactIntl.useIntl();
     const { canRead, canCreate, isLoading } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const [isOpen, setIsOpen] = React.useState(false);
     // `useRBAC` starts every instance at `isLoading: true` with the flags false.
     // Until it settles, every entry shows but none can be picked: hiding them
     // would flash a smaller menu, enabling them would lead to a 403.
@@ -84,6 +86,8 @@ const AddAssetTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
         return null;
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+        open: isOpen,
+        onOpenChange: (open)=>setIsOpen(open && !preventOpen),
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(AddAssetTrigger, {
                 variant: "ghost",

package/dist/admin/components/MediaLibraryInput/AddAssetMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddAssetMenu.js","sources":["../../../../admin/src/components/MediaLibraryInput/AddAssetMenu.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { ChevronDown, Images, Link, Upload } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { FieldMenuItem } from './FieldControls';\n\n// The trigger reads as a link on the label row, not as a button: no padding, no\n// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the\n// colour is set here and forced past the design system's own span rule.\nconst AddAssetTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  // No hover treatment at all: this reads as a link on the label row, and the\n  // design system's ghost button paints a primary100 plate behind it (also while\n  // the menu is open, via data-state).\n  &,\n  &:hover,\n  &[data-state='open'] {\n    background: transparent;\n    background-color: transparent;\n  }\n\n  &,\n  & span,\n  &:hover span {\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n\n  & span {\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n\n  // The chevron needs the fill, not the colour: the design system paints button\n  // icons with its own \"svg path { fill }\" rule per variant, and repaints them\n  // again on hover — both beat an inherited color and the icon's own\n  // fill=\"currentColor\". Doubled specificity so these land after those rules\n  // whatever order they are injected in.\n  && svg path,\n  &&:hover svg path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n\n  // The design system's disabled button is a bordered grey plate; this stays a\n  // greyed-out link instead.\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true'] span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n\ninterface AddAssetMenuProps {\n  disabled?: boolean;\n  onBrowseLibrary: () => void;\n  onUploadFromDevice: () => void;\n  onUploadFromUrl: () => void;\n}\n\n/**\n * The field's \"Add asset\" menu, on the label row.\n *\n * Browsing needs the Media Library's read permission, the two upload entries\n * `assets.create`; each entry disappears without its permission, and the\n * trigger itself goes when nothing is left to offer, rather than opening an\n * empty menu.\n *\n * The drop zone below keeps working whatever this shows — it is a second way\n * in, not the only one.\n */\nexport const AddAssetMenu = ({\n  disabled = false,\n  onBrowseLibrary,\n  onUploadFromDevice,\n  onUploadFromUrl,\n}: AddAssetMenuProps) => {\n  const { formatMessage } = useIntl();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n\n  // `useRBAC` starts every instance at `isLoading: true` with the flags false.\n  // Until it settles, every entry shows but none can be picked: hiding them\n  // would flash a smaller menu, enabling them would lead to a 403.\n  const canBrowse = isLoading || canRead;\n  const canUpload = isLoading || canCreate;\n\n  if (!canBrowse && !canUpload) {\n    return null;\n  }\n\n  return (\n    <Menu.Root>\n      <AddAssetTrigger variant=\"ghost\" disabled={disabled} endIcon={<ChevronDown aria-hidden />}>\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.add-asset'),\n          defaultMessage: 'Add asset',\n        })}\n      </AddAssetTrigger>\n\n      <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n        {canBrowse && (\n          <FieldMenuItem startIcon={<Images />} disabled={isLoading} onSelect={onBrowseLibrary}>\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.add-asset.browse'),\n              defaultMessage: 'Browse library',\n            })}\n          </FieldMenuItem>\n        )}\n\n        {canUpload && (\n          <>\n            <FieldMenuItem\n              startIcon={<Upload />}\n              disabled={isLoading}\n              onSelect={onUploadFromDevice}\n            >\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.device'),\n                defaultMessage: 'Upload from device',\n              })}\n            </FieldMenuItem>\n\n            <FieldMenuItem startIcon={<Link />} disabled={isLoading} onSelect={onUploadFromUrl}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.url'),\n                defaultMessage: 'Upload from URL',\n              })}\n            </FieldMenuItem>\n          </>\n        )}\n      </ActionsMenuContent>\n    </Menu.Root>\n  );\n};\n"],"names":["AddAssetTrigger","styled","Menu","Trigger","theme","colors","primary600","fontWeights","regular","neutral500","AddAssetMenu","disabled","onBrowseLibrary","onUploadFromDevice","onUploadFromUrl","formatMessage","useIntl","canRead","canCreate","isLoading","useMediaLibraryPermissions","canBrowse","canUpload","_jsxs","Root","_jsx","variant","endIcon","ChevronDown","aria-hidden","id","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","FieldMenuItem","startIcon","Images","onSelect","_Fragment","Upload","Link"],"mappings":"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"}
+{"version":3,"file":"AddAssetMenu.js","sources":["../../../../admin/src/components/MediaLibraryInput/AddAssetMenu.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Menu } from '@strapi/design-system';\nimport { ChevronDown, Images, Link, Upload } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { FieldMenuItem } from './FieldControls';\n\n// The trigger reads as a link on the label row, not as a button: no padding, no\n// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the\n// colour is set here and forced past the design system's own span rule.\nconst AddAssetTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  // No hover treatment at all: this reads as a link on the label row, and the\n  // design system's ghost button paints a primary100 plate behind it (also while\n  // the menu is open, via data-state).\n  &,\n  &:hover,\n  &[data-state='open'] {\n    background: transparent;\n    background-color: transparent;\n  }\n\n  &,\n  & span,\n  &:hover span {\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n\n  & span {\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n\n  // The chevron needs the fill, not the colour: the design system paints button\n  // icons with its own \"svg path { fill }\" rule per variant, and repaints them\n  // again on hover — both beat an inherited color and the icon's own\n  // fill=\"currentColor\". Doubled specificity so these land after those rules\n  // whatever order they are injected in.\n  && svg path,\n  &&:hover svg path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n\n  // The design system's disabled button is a bordered grey plate; this stays a\n  // greyed-out link instead.\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true'] span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n\ninterface AddAssetMenuProps {\n  disabled?: boolean;\n  /**\n   * Ignore requests to open, without looking disabled. The press still reaches\n   * whatever listens for presses outside it, so an open drawer closes — or asks\n   * about unsaved edits — instead of having the menu stacked over it.\n   */\n  preventOpen?: boolean;\n  onBrowseLibrary: () => void;\n  onUploadFromDevice: () => void;\n  onUploadFromUrl: () => void;\n}\n\n/**\n * The field's \"Add asset\" menu, on the label row.\n *\n * Browsing needs the Media Library's read permission, the two upload entries\n * `assets.create`; each entry disappears without its permission, and the\n * trigger itself goes when nothing is left to offer, rather than opening an\n * empty menu.\n *\n * The drop zone below keeps working whatever this shows — it is a second way\n * in, not the only one.\n */\nexport const AddAssetMenu = ({\n  disabled = false,\n  preventOpen = false,\n  onBrowseLibrary,\n  onUploadFromDevice,\n  onUploadFromUrl,\n}: AddAssetMenuProps) => {\n  const { formatMessage } = useIntl();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n  const [isOpen, setIsOpen] = useState(false);\n\n  // `useRBAC` starts every instance at `isLoading: true` with the flags false.\n  // Until it settles, every entry shows but none can be picked: hiding them\n  // would flash a smaller menu, enabling them would lead to a 403.\n  const canBrowse = isLoading || canRead;\n  const canUpload = isLoading || canCreate;\n\n  if (!canBrowse && !canUpload) {\n    return null;\n  }\n\n  return (\n    <Menu.Root open={isOpen} onOpenChange={(open) => setIsOpen(open && !preventOpen)}>\n      <AddAssetTrigger variant=\"ghost\" disabled={disabled} endIcon={<ChevronDown aria-hidden />}>\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.add-asset'),\n          defaultMessage: 'Add asset',\n        })}\n      </AddAssetTrigger>\n\n      <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n        {canBrowse && (\n          <FieldMenuItem startIcon={<Images />} disabled={isLoading} onSelect={onBrowseLibrary}>\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.add-asset.browse'),\n              defaultMessage: 'Browse library',\n            })}\n          </FieldMenuItem>\n        )}\n\n        {canUpload && (\n          <>\n            <FieldMenuItem\n              startIcon={<Upload />}\n              disabled={isLoading}\n              onSelect={onUploadFromDevice}\n            >\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.device'),\n                defaultMessage: 'Upload from device',\n              })}\n            </FieldMenuItem>\n\n            <FieldMenuItem startIcon={<Link />} disabled={isLoading} onSelect={onUploadFromUrl}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.url'),\n                defaultMessage: 'Upload from URL',\n              })}\n            </FieldMenuItem>\n          </>\n        )}\n      </ActionsMenuContent>\n    </Menu.Root>\n  );\n};\n"],"names":["AddAssetTrigger","styled","Menu","Trigger","theme","colors","primary600","fontWeights","regular","neutral500","AddAssetMenu","disabled","preventOpen","onBrowseLibrary","onUploadFromDevice","onUploadFromUrl","formatMessage","useIntl","canRead","canCreate","isLoading","useMediaLibraryPermissions","isOpen","setIsOpen","useState","canBrowse","canUpload","_jsxs","Root","open","onOpenChange","_jsx","variant","endIcon","ChevronDown","aria-hidden","id","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","FieldMenuItem","startIcon","Images","onSelect","_Fragment","Upload","Link"],"mappings":"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"}

package/dist/admin/components/MediaLibraryInput/AddAssetMenu.mjs

@@ -1,4 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { Menu } from '@strapi/design-system';
 import { ChevronDown, Images, Upload, Link } from '@strapi/icons';
 import { useIntl } from 'react-intl';
@@ -70,9 +71,10 @@ const AddAssetTrigger = styled(Menu.Trigger)`
  *
  * The drop zone below keeps working whatever this shows — it is a second way
  * in, not the only one.
- */ const AddAssetMenu = ({ disabled = false, onBrowseLibrary, onUploadFromDevice, onUploadFromUrl })=>{
+ */ const AddAssetMenu = ({ disabled = false, preventOpen = false, onBrowseLibrary, onUploadFromDevice, onUploadFromUrl })=>{
     const { formatMessage } = useIntl();
     const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();
+    const [isOpen, setIsOpen] = useState(false);
     // `useRBAC` starts every instance at `isLoading: true` with the flags false.
     // Until it settles, every entry shows but none can be picked: hiding them
     // would flash a smaller menu, enabling them would lead to a 403.
@@ -82,6 +84,8 @@ const AddAssetTrigger = styled(Menu.Trigger)`
         return null;
     }
     return /*#__PURE__*/ jsxs(Menu.Root, {
+        open: isOpen,
+        onOpenChange: (open)=>setIsOpen(open && !preventOpen),
         children: [
             /*#__PURE__*/ jsx(AddAssetTrigger, {
                 variant: "ghost",

package/dist/admin/components/MediaLibraryInput/AddAssetMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AddAssetMenu.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AddAssetMenu.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { ChevronDown, Images, Link, Upload } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { FieldMenuItem } from './FieldControls';\n\n// The trigger reads as a link on the label row, not as a button: no padding, no\n// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the\n// colour is set here and forced past the design system's own span rule.\nconst AddAssetTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  // No hover treatment at all: this reads as a link on the label row, and the\n  // design system's ghost button paints a primary100 plate behind it (also while\n  // the menu is open, via data-state).\n  &,\n  &:hover,\n  &[data-state='open'] {\n    background: transparent;\n    background-color: transparent;\n  }\n\n  &,\n  & span,\n  &:hover span {\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n\n  & span {\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n\n  // The chevron needs the fill, not the colour: the design system paints button\n  // icons with its own \"svg path { fill }\" rule per variant, and repaints them\n  // again on hover — both beat an inherited color and the icon's own\n  // fill=\"currentColor\". Doubled specificity so these land after those rules\n  // whatever order they are injected in.\n  && svg path,\n  &&:hover svg path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n\n  // The design system's disabled button is a bordered grey plate; this stays a\n  // greyed-out link instead.\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true'] span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n\ninterface AddAssetMenuProps {\n  disabled?: boolean;\n  onBrowseLibrary: () => void;\n  onUploadFromDevice: () => void;\n  onUploadFromUrl: () => void;\n}\n\n/**\n * The field's \"Add asset\" menu, on the label row.\n *\n * Browsing needs the Media Library's read permission, the two upload entries\n * `assets.create`; each entry disappears without its permission, and the\n * trigger itself goes when nothing is left to offer, rather than opening an\n * empty menu.\n *\n * The drop zone below keeps working whatever this shows — it is a second way\n * in, not the only one.\n */\nexport const AddAssetMenu = ({\n  disabled = false,\n  onBrowseLibrary,\n  onUploadFromDevice,\n  onUploadFromUrl,\n}: AddAssetMenuProps) => {\n  const { formatMessage } = useIntl();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n\n  // `useRBAC` starts every instance at `isLoading: true` with the flags false.\n  // Until it settles, every entry shows but none can be picked: hiding them\n  // would flash a smaller menu, enabling them would lead to a 403.\n  const canBrowse = isLoading || canRead;\n  const canUpload = isLoading || canCreate;\n\n  if (!canBrowse && !canUpload) {\n    return null;\n  }\n\n  return (\n    <Menu.Root>\n      <AddAssetTrigger variant=\"ghost\" disabled={disabled} endIcon={<ChevronDown aria-hidden />}>\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.add-asset'),\n          defaultMessage: 'Add asset',\n        })}\n      </AddAssetTrigger>\n\n      <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n        {canBrowse && (\n          <FieldMenuItem startIcon={<Images />} disabled={isLoading} onSelect={onBrowseLibrary}>\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.add-asset.browse'),\n              defaultMessage: 'Browse library',\n            })}\n          </FieldMenuItem>\n        )}\n\n        {canUpload && (\n          <>\n            <FieldMenuItem\n              startIcon={<Upload />}\n              disabled={isLoading}\n              onSelect={onUploadFromDevice}\n            >\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.device'),\n                defaultMessage: 'Upload from device',\n              })}\n            </FieldMenuItem>\n\n            <FieldMenuItem startIcon={<Link />} disabled={isLoading} onSelect={onUploadFromUrl}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.url'),\n                defaultMessage: 'Upload from URL',\n              })}\n            </FieldMenuItem>\n          </>\n        )}\n      </ActionsMenuContent>\n    </Menu.Root>\n  );\n};\n"],"names":["AddAssetTrigger","styled","Menu","Trigger","theme","colors","primary600","fontWeights","regular","neutral500","AddAssetMenu","disabled","onBrowseLibrary","onUploadFromDevice","onUploadFromUrl","formatMessage","useIntl","canRead","canCreate","isLoading","useMediaLibraryPermissions","canBrowse","canUpload","_jsxs","Root","_jsx","variant","endIcon","ChevronDown","aria-hidden","id","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","FieldMenuItem","startIcon","Images","onSelect","_Fragment","Upload","Link"],"mappings":"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"}
+{"version":3,"file":"AddAssetMenu.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AddAssetMenu.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Menu } from '@strapi/design-system';\nimport { ChevronDown, Images, Link, Upload } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { FieldMenuItem } from './FieldControls';\n\n// The trigger reads as a link on the label row, not as a button: no padding, no\n// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the\n// colour is set here and forced past the design system's own span rule.\nconst AddAssetTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  // No hover treatment at all: this reads as a link on the label row, and the\n  // design system's ghost button paints a primary100 plate behind it (also while\n  // the menu is open, via data-state).\n  &,\n  &:hover,\n  &[data-state='open'] {\n    background: transparent;\n    background-color: transparent;\n  }\n\n  &,\n  & span,\n  &:hover span {\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n\n  & span {\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n\n  // The chevron needs the fill, not the colour: the design system paints button\n  // icons with its own \"svg path { fill }\" rule per variant, and repaints them\n  // again on hover — both beat an inherited color and the icon's own\n  // fill=\"currentColor\". Doubled specificity so these land after those rules\n  // whatever order they are injected in.\n  && svg path,\n  &&:hover svg path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n\n  // The design system's disabled button is a bordered grey plate; this stays a\n  // greyed-out link instead.\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true'] span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n\ninterface AddAssetMenuProps {\n  disabled?: boolean;\n  /**\n   * Ignore requests to open, without looking disabled. The press still reaches\n   * whatever listens for presses outside it, so an open drawer closes — or asks\n   * about unsaved edits — instead of having the menu stacked over it.\n   */\n  preventOpen?: boolean;\n  onBrowseLibrary: () => void;\n  onUploadFromDevice: () => void;\n  onUploadFromUrl: () => void;\n}\n\n/**\n * The field's \"Add asset\" menu, on the label row.\n *\n * Browsing needs the Media Library's read permission, the two upload entries\n * `assets.create`; each entry disappears without its permission, and the\n * trigger itself goes when nothing is left to offer, rather than opening an\n * empty menu.\n *\n * The drop zone below keeps working whatever this shows — it is a second way\n * in, not the only one.\n */\nexport const AddAssetMenu = ({\n  disabled = false,\n  preventOpen = false,\n  onBrowseLibrary,\n  onUploadFromDevice,\n  onUploadFromUrl,\n}: AddAssetMenuProps) => {\n  const { formatMessage } = useIntl();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n  const [isOpen, setIsOpen] = useState(false);\n\n  // `useRBAC` starts every instance at `isLoading: true` with the flags false.\n  // Until it settles, every entry shows but none can be picked: hiding them\n  // would flash a smaller menu, enabling them would lead to a 403.\n  const canBrowse = isLoading || canRead;\n  const canUpload = isLoading || canCreate;\n\n  if (!canBrowse && !canUpload) {\n    return null;\n  }\n\n  return (\n    <Menu.Root open={isOpen} onOpenChange={(open) => setIsOpen(open && !preventOpen)}>\n      <AddAssetTrigger variant=\"ghost\" disabled={disabled} endIcon={<ChevronDown aria-hidden />}>\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.add-asset'),\n          defaultMessage: 'Add asset',\n        })}\n      </AddAssetTrigger>\n\n      <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n        {canBrowse && (\n          <FieldMenuItem startIcon={<Images />} disabled={isLoading} onSelect={onBrowseLibrary}>\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.add-asset.browse'),\n              defaultMessage: 'Browse library',\n            })}\n          </FieldMenuItem>\n        )}\n\n        {canUpload && (\n          <>\n            <FieldMenuItem\n              startIcon={<Upload />}\n              disabled={isLoading}\n              onSelect={onUploadFromDevice}\n            >\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.device'),\n                defaultMessage: 'Upload from device',\n              })}\n            </FieldMenuItem>\n\n            <FieldMenuItem startIcon={<Link />} disabled={isLoading} onSelect={onUploadFromUrl}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.url'),\n                defaultMessage: 'Upload from URL',\n              })}\n            </FieldMenuItem>\n          </>\n        )}\n      </ActionsMenuContent>\n    </Menu.Root>\n  );\n};\n"],"names":["AddAssetTrigger","styled","Menu","Trigger","theme","colors","primary600","fontWeights","regular","neutral500","AddAssetMenu","disabled","preventOpen","onBrowseLibrary","onUploadFromDevice","onUploadFromUrl","formatMessage","useIntl","canRead","canCreate","isLoading","useMediaLibraryPermissions","isOpen","setIsOpen","useState","canBrowse","canUpload","_jsxs","Root","open","onOpenChange","_jsx","variant","endIcon","ChevronDown","aria-hidden","id","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","FieldMenuItem","startIcon","Images","onSelect","_Fragment","Upload","Link"],"mappings":"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"}

package/dist/admin/components/MediaLibraryInput/MediaLibraryInput.js

@@ -9,7 +9,7 @@ var reactIntl = require('react-intl');
 var useAIMetadataEnabled = require('../../hooks/useAIMetadataEnabled.js');
 var useMediaLibraryPermissions = require('../../hooks/useMediaLibraryPermissions.js');
 var useTracking = require('../../hooks/useTracking.js');
-var EditAssetContent = require('../../legacy/components/EditAssetDialog/EditAssetContent.js');
+var AssetDetailsDrawer = require('../../pages/Assets/components/AssetDetails/AssetDetailsDrawer.js');
 var ImportFromUrlDialog = require('../../pages/Assets/components/ImportFromUrlDialog.js');
 var api = require('../../services/api.js');
 var settings = require('../../services/settings.js');
@@ -23,6 +23,7 @@ var AssetCard = require('./AssetCard.js');
 var AssetCarousel = require('./AssetCarousel.js');
 var AssetDropZone = require('./AssetDropZone.js');
 var AssetRow = require('./AssetRow.js');
+var openAssetDetails = require('./openAssetDetails.js');
 var useFieldUploads = require('./useFieldUploads.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -67,14 +68,15 @@ const EMPTY_ATTRIBUTE = {};
     const { copy } = strapiAdmin.useClipboard();
     const getValues = strapiAdmin.useForm('MediaLibraryInput', (state)=>state.getValues);
     const [step, setStep] = React.useState(undefined);
-    const [editedAsset, setEditedAsset] = React.useState(null);
+    const [editedAssetId, setEditedAssetId] = React.useState(null);
+    const isAnyDrawerOpen = openAssetDetails.useOpenAssetDetails(editedAssetId !== null);
     const [isUrlDialogOpen, setIsUrlDialogOpen] = React.useState(false);
     const fileInputRef = React.useRef(null);
     const [uploadFiles] = api.useUploadFilesMutation();
     const [uploadFromUrls] = api.useUploadFromUrlsMutation();
     // Echoes the app config; a missing payload (still loading) falls back to
     // sequential rather than outpacing what the server asked for.
-    const { isLoading, canRead, canCreate, canUpdate, canCopyLink, canDownload } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const { isLoading, canRead, canCreate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
     // Not while permissions load: `useRBAC` starts with every flag false, and an
     // upload sent before it settles can end in a 403.
     const canUpload = !isLoading && canCreate;
@@ -140,21 +142,30 @@ const EMPTY_ATTRIBUTE = {};
             })
         });
     };
-    const handleEditClose = (result)=>{
-        const asset = editedAsset;
-        setEditedAsset(null);
-        if (!asset) {
-            return;
-        }
-        // `null` means the asset was deleted from the library from inside the dialog.
-        if (result === null) {
-            setAssets(assetsRef.current.filter((current)=>current.id !== asset.id));
-            return;
-        }
-        if (result && typeof result !== 'boolean') {
-            setAssets(assetsRef.current.map((current)=>current.id === asset.id ? result : current));
+    /**
+   * Opens only when no drawer is open, in this field or another. Pressing a row's
+   * button is a press outside the open drawer, which closes it — or, with unsaved
+   * edits, asks first. Opening on the click that follows would put a second
+   * drawer, or a new asset, under that question and drop the edits it is asking
+   * about.
+   */ const handleEdit = (asset)=>{
+        if (!openAssetDetails.isAnyAssetDetailsOpen()) {
+            setEditedAssetId(asset.id);
         }
     };
+    // The drawer saves to the library itself; the field holds its own copy of the
+    // asset, so it takes the server's after every change. Read from the ref: the
+    // drawer reports after a request, by which time this render's `assets` may
+    // be stale.
+    const handleAssetChange = (changedAsset)=>{
+        setAssets(assetsRef.current.map((current)=>// The populated `createdBy` is the one shape difference, and the entry
+            // only keeps the asset's id on save.
+            current.id === changedAsset.id ? changedAsset : current));
+    };
+    // Deleting from the library leaves nothing for the field to point at.
+    const handleAssetDelete = (id)=>{
+        setAssets(assetsRef.current.filter((current)=>current.id !== id));
+    };
     const handleSelect = (selectedAssets)=>{
         setAssets(selectedAssets);
         setStep(undefined);
@@ -344,8 +355,8 @@ const EMPTY_ATTRIBUTE = {};
                 asset: assets[0],
                 disabled: disabled,
                 onCopyLink: handleCopyLink,
-                // The details dialog needs the library's folder tree, which needs read access.
-                onEdit: canRead ? setEditedAsset : undefined,
+                // The details drawer fetches the asset from the library, which needs read access.
+                onEdit: canRead ? handleEdit : undefined,
                 onRemove: handleRemove
             });
         }
@@ -357,7 +368,7 @@ const EMPTY_ATTRIBUTE = {};
                         asset: asset,
                         disabled: disabled,
                         onCopyLink: handleCopyLink,
-                        onEdit: canRead ? setEditedAsset : undefined,
+                        onEdit: canRead ? handleEdit : undefined,
                         onRemove: handleRemove
                     }, asset.id)),
                 uploads.map((upload)=>/*#__PURE__*/ jsxRuntime.jsx(AssetCard.UploadCard, {
@@ -384,6 +395,7 @@ const EMPTY_ATTRIBUTE = {};
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(AddAssetMenu.AddAssetMenu, {
                         disabled: disabled,
+                        preventOpen: isAnyDrawerOpen,
                         onBrowseLibrary: ()=>setStep('browse'),
                         onUploadFromDevice: ()=>fileInputRef.current?.click(),
                         onUploadFromUrl: ()=>setIsUrlDialogOpen(true)
@@ -417,14 +429,12 @@ const EMPTY_ATTRIBUTE = {};
                 onClose: ()=>setStep(undefined),
                 onConfirm: handleSelect
             }),
-            editedAsset && /*#__PURE__*/ jsxRuntime.jsx(EditAssetContent.EditAssetDialog, {
-                open: true,
-                asset: editedAsset,
-                canUpdate: canUpdate && !disabled,
-                canCopyLink: canCopyLink,
-                canDownload: canDownload,
-                trackedLocation: CONTENT_MANAGER_LOCATION,
-                onClose: handleEditClose
+            /*#__PURE__*/ jsxRuntime.jsx(AssetDetailsDrawer.AssetDetailsDrawer, {
+                assetId: editedAssetId,
+                onClose: ()=>setEditedAssetId(null),
+                onAssetChange: handleAssetChange,
+                onAssetDelete: handleAssetDelete,
+                trackedLocation: CONTENT_MANAGER_LOCATION
             }),
             /*#__PURE__*/ jsxRuntime.jsx(ImportFromUrlDialog.ImportFromUrlDialog, {
                 open: isUrlDialogOpen,