@strapi/upload 5.56.0 → 5.57.0

package/dist/admin/pages/Assets/components/ItemContextMenu.mjs

@@ -0,0 +1,122 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useMemo, createContext, useContext } from 'react';
+import { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions.mjs';
+import { useAssetSelection } from '../hooks/useAssetSelection.mjs';
+import { AssetContextMenu } from './AssetContextMenu.mjs';
+import { FolderContextMenu } from './FolderContextMenu.mjs';
+import { SelectionContextMenu } from './SelectionContextMenu.mjs';
+
+const ItemContextMenuContext = /*#__PURE__*/ createContext(null);
+/**
+ * Called by the list items. Returns `null` outside the provider — the asset
+ * picker renders the same cards without a context menu, and a missing provider
+ * there should be a no-op rather than a crash.
+ */ const useItemContextMenuTrigger = ()=>useContext(ItemContextMenuContext);
+/**
+ * Mirrors what each menu would render once open. Folders have no gated actions
+ * yet, so they always have a menu.
+ */ const hasItemActions = (permissions, isForSelection, payload)=>{
+    if (isForSelection) {
+        return permissions.canUpdate;
+    }
+    if (payload.kind === 'asset') {
+        return permissions.canUpdate || permissions.canCopyLink || permissions.canDownload;
+    }
+    return true;
+};
+/**
+ * Owns the right-click menu for the list, above both the grid and the table so
+ * one instance serves either view and the selection case has the `locations` it
+ * needs.
+ *
+ * The rule, in one place:
+ *
+ * - right-clicking an item **inside a multi-selection** opens the selection
+ *   menu, acting on all of it — the file-manager behaviour, and the menu leads
+ *   with the count so what it acts on is stated before the actions are
+ * - **anything else** replaces the selection with the clicked item and opens
+ *   that item's own menu. That includes right-clicking an unselected item while
+ *   others are selected: every file manager drops the old selection there, and
+ *   the visible deselection is what stops the menu looking like it applies to
+ *   items it doesn't
+ */ const ItemContextMenuProvider = ({ locations, children })=>{
+    const { isSelected, selectOnly, selectedKeys } = useAssetSelection();
+    // Resolved here, once, and handed to each menu as it opens. Mounted with the
+    // list, so by the time anyone right-clicks the answer is in — a menu that
+    // asked for itself would render empty for a tick.
+    const permissions = useMediaLibraryPermissions();
+    const [state, setState] = useState(null);
+    const nextId = useRef(0);
+    const openForItem = useCallback((event, key, payload)=>{
+        const isForSelection = isSelected(key) && selectedKeys.size > 1;
+        if (!permissions.isLoading && !hasItemActions(permissions, isForSelection, payload)) {
+            return;
+        }
+        // Only once we know we're handling it — declining would otherwise cost the
+        // browser's own menu too.
+        event.preventDefault();
+        const position = {
+            x: event.clientX,
+            y: event.clientY
+        };
+        const returnFocusTo = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
+        nextId.current += 1;
+        const id = nextId.current;
+        if (isForSelection) {
+            setState({
+                id,
+                position,
+                returnFocusTo,
+                payload: null
+            });
+            return;
+        }
+        // Replace the selection *before* the menu renders, so the highlight has
+        // already moved by the time the user reads the menu.
+        selectOnly(key);
+        setState({
+            id,
+            position,
+            returnFocusTo,
+            payload
+        });
+    }, [
+        isSelected,
+        selectOnly,
+        selectedKeys,
+        permissions
+    ]);
+    // Only the menu that is still on screen may close it.
+    const close = useCallback((id)=>setState((prev)=>prev?.id === id ? null : prev), []);
+    const value = useMemo(()=>openForItem, [
+        openForItem
+    ]);
+    return /*#__PURE__*/ jsxs(ItemContextMenuContext.Provider, {
+        value: value,
+        children: [
+            children,
+            state !== null && (state.payload === null ? /*#__PURE__*/ jsx(SelectionContextMenu, {
+                position: state.position,
+                returnFocusTo: state.returnFocusTo,
+                locations: locations,
+                onClose: ()=>close(state.id)
+            }, state.id) : state.payload.kind === 'asset' ? /*#__PURE__*/ jsx(AssetContextMenu, {
+                asset: state.payload.asset,
+                dragData: state.payload.dragData,
+                permissions: permissions,
+                position: state.position,
+                returnFocusTo: state.returnFocusTo,
+                onClose: ()=>close(state.id)
+            }, state.id) : /*#__PURE__*/ jsx(FolderContextMenu, {
+                folder: state.payload.folder,
+                dragData: state.payload.dragData,
+                position: state.position,
+                returnFocusTo: state.returnFocusTo,
+                onClose: ()=>close(state.id)
+            }, state.id))
+        ]
+    });
+};
+
+export { ItemContextMenuProvider, useItemContextMenuTrigger };
+//# sourceMappingURL=ItemContextMenu.mjs.map

package/dist/admin/pages/Assets/components/ItemContextMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemContextMenu.mjs","sources":["../../../../../admin/src/pages/Assets/components/ItemContextMenu.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions';\nimport { useAssetSelection } from '../hooks/useAssetSelection';\n\nimport { AssetContextMenu } from './AssetContextMenu';\nimport { FolderContextMenu } from './FolderContextMenu';\nimport { SelectionContextMenu } from './SelectionContextMenu';\n\nimport type { AssetActionPermissions } from './AssetActions';\nimport type { CursorPosition } from './CursorAnchoredMenu';\nimport type { File } from '../../../../../shared/contracts/files';\nimport type { Folder } from '../../../../../shared/contracts/folders';\nimport type { DragFileData, DragFolderData } from '../../../types/dnd';\nimport type { ItemLocations } from '../../../utils/itemLocations';\nimport type { ItemKey } from '../utils/selection';\n\n/**\n * What a card or row hands over when it is right-clicked. It passes its own\n * asset rather than a key alone, so nothing here has to resolve keys back to\n * items — the item is already in scope where the gesture happens.\n */\nexport type ContextMenuPayload =\n  | { kind: 'asset'; asset: File; dragData: DragFileData }\n  | { kind: 'folder'; folder: Folder; dragData: DragFolderData };\n\ntype OpenForItem = (event: React.MouseEvent, key: ItemKey, payload: ContextMenuPayload) => void;\n\nconst ItemContextMenuContext = createContext<OpenForItem | null>(null);\n\n/**\n * Called by the list items. Returns `null` outside the provider — the asset\n * picker renders the same cards without a context menu, and a missing provider\n * there should be a no-op rather than a crash.\n */\nexport const useItemContextMenuTrigger = (): OpenForItem | null =>\n  useContext(ItemContextMenuContext);\n\ninterface OpenState {\n  /**\n   * Distinguishes one opening from the next.\n   *\n   * A right-click while a menu is open is two events: `pointerdown`, which\n   * Radix treats as \"dismiss\", then `contextmenu`, which opens the next menu.\n   * The dismissed menu's own effect runs *after* the new one has mounted, so a\n   * plain `close()` would clear state that no longer belongs to it — and the\n   * second right-click would appear to do nothing.\n   */\n  id: number;\n  position: CursorPosition;\n  /** The card or row that was right-clicked. */\n  returnFocusTo: HTMLElement | null;\n  payload: ContextMenuPayload | null;\n}\n\n/**\n * Mirrors what each menu would render once open. Folders have no gated actions\n * yet, so they always have a menu.\n */\nconst hasItemActions = (\n  permissions: AssetActionPermissions,\n  isForSelection: boolean,\n  payload: ContextMenuPayload\n) => {\n  if (isForSelection) {\n    return permissions.canUpdate;\n  }\n\n  if (payload.kind === 'asset') {\n    return permissions.canUpdate || permissions.canCopyLink || permissions.canDownload;\n  }\n\n  return true;\n};\n\ninterface ItemContextMenuProviderProps {\n  /**\n   * Real location of every loaded row, so a selection move validates each item\n   * against its own parent — same input the bulk bar takes.\n   */\n  locations: ItemLocations;\n  children: ReactNode;\n}\n\n/**\n * Owns the right-click menu for the list, above both the grid and the table so\n * one instance serves either view and the selection case has the `locations` it\n * needs.\n *\n * The rule, in one place:\n *\n * - right-clicking an item **inside a multi-selection** opens the selection\n *   menu, acting on all of it — the file-manager behaviour, and the menu leads\n *   with the count so what it acts on is stated before the actions are\n * - **anything else** replaces the selection with the clicked item and opens\n *   that item's own menu. That includes right-clicking an unselected item while\n *   others are selected: every file manager drops the old selection there, and\n *   the visible deselection is what stops the menu looking like it applies to\n *   items it doesn't\n */\nexport const ItemContextMenuProvider = ({ locations, children }: ItemContextMenuProviderProps) => {\n  const { isSelected, selectOnly, selectedKeys } = useAssetSelection();\n  // Resolved here, once, and handed to each menu as it opens. Mounted with the\n  // list, so by the time anyone right-clicks the answer is in — a menu that\n  // asked for itself would render empty for a tick.\n  const permissions = useMediaLibraryPermissions();\n  const [state, setState] = useState<OpenState | null>(null);\n  const nextId = useRef(0);\n\n  const openForItem = useCallback<OpenForItem>(\n    (event, key, payload) => {\n      const isForSelection = isSelected(key) && selectedKeys.size > 1;\n\n      if (!permissions.isLoading && !hasItemActions(permissions, isForSelection, payload)) {\n        return;\n      }\n\n      // Only once we know we're handling it — declining would otherwise cost the\n      // browser's own menu too.\n      event.preventDefault();\n\n      const position = { x: event.clientX, y: event.clientY };\n      const returnFocusTo = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;\n      nextId.current += 1;\n      const id = nextId.current;\n\n      if (isForSelection) {\n        setState({ id, position, returnFocusTo, payload: null });\n        return;\n      }\n\n      // Replace the selection *before* the menu renders, so the highlight has\n      // already moved by the time the user reads the menu.\n      selectOnly(key);\n      setState({ id, position, returnFocusTo, payload });\n    },\n    [isSelected, selectOnly, selectedKeys, permissions]\n  );\n\n  // Only the menu that is still on screen may close it.\n  const close = useCallback(\n    (id: number) => setState((prev) => (prev?.id === id ? null : prev)),\n    []\n  );\n\n  const value = useMemo(() => openForItem, [openForItem]);\n\n  return (\n    <ItemContextMenuContext.Provider value={value}>\n      {children}\n      {state !== null &&\n        (state.payload === null ? (\n          <SelectionContextMenu\n            key={state.id}\n            position={state.position}\n            returnFocusTo={state.returnFocusTo}\n            locations={locations}\n            onClose={() => close(state.id)}\n          />\n        ) : state.payload.kind === 'asset' ? (\n          <AssetContextMenu\n            // A fresh menu per gesture: the actions carry dialog state, and\n            // reusing the instance across two right-clicks would carry it over.\n            // Keyed on the opening rather than the item, so right-clicking the\n            // same card twice still remounts.\n            key={state.id}\n            asset={state.payload.asset}\n            dragData={state.payload.dragData}\n            permissions={permissions}\n            position={state.position}\n            returnFocusTo={state.returnFocusTo}\n            onClose={() => close(state.id)}\n          />\n        ) : (\n          <FolderContextMenu\n            key={state.id}\n            folder={state.payload.folder}\n            dragData={state.payload.dragData}\n            position={state.position}\n            returnFocusTo={state.returnFocusTo}\n            onClose={() => close(state.id)}\n          />\n        ))}\n    </ItemContextMenuContext.Provider>\n  );\n};\n"],"names":["ItemContextMenuContext","createContext","useItemContextMenuTrigger","useContext","hasItemActions","permissions","isForSelection","payload","canUpdate","kind","canCopyLink","canDownload","ItemContextMenuProvider","locations","children","isSelected","selectOnly","selectedKeys","useAssetSelection","useMediaLibraryPermissions","state","setState","useState","nextId","useRef","openForItem","useCallback","event","key","size","isLoading","preventDefault","position","x","clientX","y","clientY","returnFocusTo","currentTarget","HTMLElement","current","id","close","prev","value","useMemo","_jsxs","Provider","_jsx","SelectionContextMenu","onClose","AssetContextMenu","asset","dragData","FolderContextMenu","folder"],"mappings":";;;;;;;;AAoCA,MAAMA,uCAAyBC,aAAAA,CAAkC,IAAA,CAAA;AAEjE;;;;AAIC,IACM,MAAMC,yBAAAA,GAA4B,IACvCC,WAAWH,sBAAAA;AAmBb;;;AAGC,IACD,MAAMI,cAAAA,GAAiB,CACrBC,WAAAA,EACAC,cAAAA,EACAC,OAAAA,GAAAA;AAEA,IAAA,IAAID,cAAAA,EAAgB;AAClB,QAAA,OAAOD,YAAYG,SAAS;AAC9B,IAAA;IAEA,IAAID,OAAAA,CAAQE,IAAI,KAAK,OAAA,EAAS;AAC5B,QAAA,OAAOJ,YAAYG,SAAS,IAAIH,YAAYK,WAAW,IAAIL,YAAYM,WAAW;AACpF,IAAA;IAEA,OAAO,IAAA;AACT,CAAA;AAWA;;;;;;;;;;;;;;;UAgBaC,uBAAAA,GAA0B,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAgC,GAAA;AAC3F,IAAA,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGC,iBAAAA,EAAAA;;;;AAIjD,IAAA,MAAMb,WAAAA,GAAcc,0BAAAA,EAAAA;AACpB,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,QAAAA,CAA2B,IAAA,CAAA;AACrD,IAAA,MAAMC,SAASC,MAAAA,CAAO,CAAA,CAAA;AAEtB,IAAA,MAAMC,WAAAA,GAAcC,WAAAA,CAClB,CAACC,KAAAA,EAAOC,GAAAA,EAAKrB,OAAAA,GAAAA;AACX,QAAA,MAAMD,cAAAA,GAAiBS,UAAAA,CAAWa,GAAAA,CAAAA,IAAQX,YAAAA,CAAaY,IAAI,GAAG,CAAA;QAE9D,IAAI,CAACxB,YAAYyB,SAAS,IAAI,CAAC1B,cAAAA,CAAeC,WAAAA,EAAaC,gBAAgBC,OAAAA,CAAAA,EAAU;AACnF,YAAA;AACF,QAAA;;;AAIAoB,QAAAA,KAAAA,CAAMI,cAAc,EAAA;AAEpB,QAAA,MAAMC,QAAAA,GAAW;AAAEC,YAAAA,CAAAA,EAAGN,MAAMO,OAAO;AAAEC,YAAAA,CAAAA,EAAGR,MAAMS;AAAQ,SAAA;AACtD,QAAA,MAAMC,gBAAgBV,KAAAA,CAAMW,aAAa,YAAYC,WAAAA,GAAcZ,KAAAA,CAAMW,aAAa,GAAG,IAAA;AACzFf,QAAAA,MAAAA,CAAOiB,OAAO,IAAI,CAAA;QAClB,MAAMC,EAAAA,GAAKlB,OAAOiB,OAAO;AAEzB,QAAA,IAAIlC,cAAAA,EAAgB;YAClBe,QAAAA,CAAS;AAAEoB,gBAAAA,EAAAA;AAAIT,gBAAAA,QAAAA;AAAUK,gBAAAA,aAAAA;gBAAe9B,OAAAA,EAAS;AAAK,aAAA,CAAA;AACtD,YAAA;AACF,QAAA;;;QAIAS,UAAAA,CAAWY,GAAAA,CAAAA;QACXP,QAAAA,CAAS;AAAEoB,YAAAA,EAAAA;AAAIT,YAAAA,QAAAA;AAAUK,YAAAA,aAAAA;AAAe9B,YAAAA;AAAQ,SAAA,CAAA;IAClD,CAAA,EACA;AAACQ,QAAAA,UAAAA;AAAYC,QAAAA,UAAAA;AAAYC,QAAAA,YAAAA;AAAcZ,QAAAA;AAAY,KAAA,CAAA;;AAIrD,IAAA,MAAMqC,KAAAA,GAAQhB,WAAAA,CACZ,CAACe,EAAAA,GAAepB,QAAAA,CAAS,CAACsB,IAAAA,GAAUA,IAAAA,EAAMF,EAAAA,KAAOA,EAAAA,GAAK,IAAA,GAAOE,IAAAA,CAAAA,EAC7D,EAAE,CAAA;IAGJ,MAAMC,KAAAA,GAAQC,OAAAA,CAAQ,IAAMpB,WAAAA,EAAa;AAACA,QAAAA;AAAY,KAAA,CAAA;IAEtD,qBACEqB,IAAA,CAAC9C,uBAAuB+C,QAAQ,EAAA;QAACH,KAAAA,EAAOA,KAAAA;;AACrC9B,YAAAA,QAAAA;AACAM,YAAAA,KAAAA,KAAU,SACRA,KAAAA,CAAMb,OAAO,KAAK,qBACjByC,GAAA,CAACC,oBAAAA,EAAAA;AAECjB,gBAAAA,QAAAA,EAAUZ,MAAMY,QAAQ;AACxBK,gBAAAA,aAAAA,EAAejB,MAAMiB,aAAa;gBAClCxB,SAAAA,EAAWA,SAAAA;gBACXqC,OAAAA,EAAS,IAAMR,KAAAA,CAAMtB,KAAAA,CAAMqB,EAAE;eAJxBrB,KAAAA,CAAMqB,EAAE,IAMbrB,KAAAA,CAAMb,OAAO,CAACE,IAAI,KAAK,wBACzBuC,GAAA,CAACG,gBAAAA,EAAAA;gBAMCC,KAAAA,EAAOhC,KAAAA,CAAMb,OAAO,CAAC6C,KAAK;gBAC1BC,QAAAA,EAAUjC,KAAAA,CAAMb,OAAO,CAAC8C,QAAQ;gBAChChD,WAAAA,EAAaA,WAAAA;AACb2B,gBAAAA,QAAAA,EAAUZ,MAAMY,QAAQ;AACxBK,gBAAAA,aAAAA,EAAejB,MAAMiB,aAAa;gBAClCa,OAAAA,EAAS,IAAMR,KAAAA,CAAMtB,KAAAA,CAAMqB,EAAE;eANxBrB,KAAAA,CAAMqB,EAAE,kBASfO,GAAA,CAACM,iBAAAA,EAAAA;gBAECC,MAAAA,EAAQnC,KAAAA,CAAMb,OAAO,CAACgD,MAAM;gBAC5BF,QAAAA,EAAUjC,KAAAA,CAAMb,OAAO,CAAC8C,QAAQ;AAChCrB,gBAAAA,QAAAA,EAAUZ,MAAMY,QAAQ;AACxBK,gBAAAA,aAAAA,EAAejB,MAAMiB,aAAa;gBAClCa,OAAAA,EAAS,IAAMR,KAAAA,CAAMtB,KAAAA,CAAMqB,EAAE;AALxBrB,aAAAA,EAAAA,KAAAA,CAAMqB,EAAE,CAOjB;;;AAGR;;;;"}

package/dist/admin/pages/Assets/components/MainAreaContextMenu.js

@@ -7,6 +7,7 @@ var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var translations = require('../../../utils/translations.js');
 var ActionsMenuContent = require('./ActionsMenuContent.js');
+var SelectionActions = require('./SelectionActions.js');
 
 /**
  * The admin layout marks the element that scrolls the main column. Listening on
@@ -71,13 +72,13 @@ const LOCATOR_STYLE = {
  * Deliberately background-only. Right-clicking an asset, a folder or a table
  * row is left alone — those carry `data-native-context-menu` and keep the
  * browser's menu (which is what you want over a thumbnail or a filename).
- */ const MainAreaContextMenu = ({ onCreateFolder, onImportFiles, onImportFromUrl, disabled })=>{
+ */ const MainAreaContextMenu = ({ onCreateFolder, onImportFiles, onImportFromUrl, disabled, containerSelector = SCROLL_ROOT_SELECTOR, locations })=>{
     const { formatMessage } = reactIntl.useIntl();
     const [position, setPosition] = React.useState(null);
     const [locator, setLocator] = React.useState(null);
     const anchorRef = React.useCallback((node)=>setLocator(node), []);
     React.useEffect(()=>{
-        const container = locator?.closest(SCROLL_ROOT_SELECTOR);
+        const container = locator?.closest(containerSelector);
         if (!container || disabled) {
             return;
         }
@@ -101,8 +102,81 @@ const LOCATOR_STYLE = {
         return ()=>container.removeEventListener('contextmenu', handleContextMenu);
     }, [
         locator,
-        disabled
+        disabled,
+        containerSelector
     ]);
+    const createItems = /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                onSelect: onCreateFolder,
+                startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {}),
+                children: formatMessage({
+                    id: translations.getTranslationKey('folder.create.title'),
+                    defaultMessage: 'New folder'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                onSelect: onImportFiles,
+                startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Files, {}),
+                children: formatMessage({
+                    id: translations.getTranslationKey('import-files'),
+                    defaultMessage: 'File upload'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                onSelect: onImportFromUrl,
+                startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {}),
+                children: formatMessage({
+                    id: translations.getTranslationKey('import-from-url'),
+                    defaultMessage: 'File upload from URL'
+                })
+            })
+        ]
+    });
+    /**
+   * `selectionItems` leads the menu when something is selected, so the actions
+   * that apply to the selection come before the ones that create new things.
+   */ const renderMenu = (selectionItems)=>/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+            modal: false,
+            open: position !== null,
+            onOpenChange: (open)=>{
+                if (!open) {
+                    setPosition(null);
+                }
+            },
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Trigger, {
+                    tabIndex: -1,
+                    // No visible content, so the name has to come from `aria-label` —
+                    // the trigger's `label` prop renders as button text, which would
+                    // defeat the point of an invisible anchor. Radix points the menu's
+                    // `aria-labelledby` at this element, so it names the menu too.
+                    endIcon: null,
+                    "aria-label": formatMessage({
+                        id: translations.getTranslationKey('list.context-menu.label'),
+                        defaultMessage: 'Media library actions'
+                    }),
+                    style: {
+                        ...CURSOR_ANCHOR_STYLE,
+                        top: position?.y ?? 0,
+                        left: position?.x ?? 0
+                    }
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(ActionsMenuContent.ActionsMenuContent, {
+                    popoverPlacement: "bottom-start",
+                    zIndex: 2,
+                    minWidth: "22rem",
+                    // The anchor is invisible and sits wherever the cursor was, so
+                    // handing focus back to it on close would be a focus ring nobody can
+                    // see. Let it fall to the body instead.
+                    onCloseAutoFocus: (event)=>event.preventDefault(),
+                    children: [
+                        selectionItems,
+                        createItems
+                    ]
+                })
+            ]
+        });
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -110,69 +184,20 @@ const LOCATOR_STYLE = {
                 style: LOCATOR_STYLE,
                 "aria-hidden": true
             }),
-            !disabled && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
-                modal: false,
-                open: position !== null,
-                onOpenChange: (open)=>{
-                    if (!open) {
-                        setPosition(null);
-                    }
-                },
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Trigger, {
-                        tabIndex: -1,
-                        // No visible content, so the name has to come from `aria-label` —
-                        // the trigger's `label` prop renders as button text, which would
-                        // defeat the point of an invisible anchor. Radix points the menu's
-                        // `aria-labelledby` at this element, so it names the menu too.
-                        endIcon: null,
-                        "aria-label": formatMessage({
-                            id: translations.getTranslationKey('list.context-menu.label'),
-                            defaultMessage: 'Media library actions'
-                        }),
-                        style: {
-                            ...CURSOR_ANCHOR_STYLE,
-                            top: position?.y ?? 0,
-                            left: position?.x ?? 0
-                        }
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsxs(ActionsMenuContent.ActionsMenuContent, {
-                        popoverPlacement: "bottom-start",
-                        zIndex: 2,
-                        minWidth: "22rem",
-                        // The anchor is invisible and sits wherever the cursor was, so
-                        // handing focus back to it on close would be a focus ring nobody can
-                        // see. Let it fall to the body instead.
-                        onCloseAutoFocus: (event)=>event.preventDefault(),
+            !disabled && (locations ? /*#__PURE__*/ jsxRuntime.jsx(SelectionActions.SelectionActions, {
+                locations: locations,
+                children: ({ count, hasActions, items, dialogs })=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                                onSelect: onCreateFolder,
-                                startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {}),
-                                children: formatMessage({
-                                    id: translations.getTranslationKey('folder.create.title'),
-                                    defaultMessage: 'New folder'
-                                })
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                                onSelect: onImportFiles,
-                                startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Files, {}),
-                                children: formatMessage({
-                                    id: translations.getTranslationKey('import-files'),
-                                    defaultMessage: 'File upload'
-                                })
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                                onSelect: onImportFromUrl,
-                                startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {}),
-                                children: formatMessage({
-                                    id: translations.getTranslationKey('import-from-url'),
-                                    defaultMessage: 'File upload from URL'
-                                })
-                            })
+                            renderMenu(count > 0 && hasActions ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                children: [
+                                    items,
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {})
+                                ]
+                            }) : null),
+                            dialogs
                         ]
                     })
-                ]
-            })
+            }) : renderMenu(null))
         ]
     });
 };

package/dist/admin/pages/Assets/components/MainAreaContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"MainAreaContextMenu.js","sources":["../../../../../admin/src/pages/Assets/components/MainAreaContextMenu.tsx"],"sourcesContent":["import { useCallback, useEffect, useState, type CSSProperties } from 'react';\n\nimport { Menu } from '@strapi/design-system';\nimport { Files, Folder as FolderIcon, Link } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslationKey } from '../../../utils/translations';\n\nimport { ActionsMenuContent } from './ActionsMenuContent';\n\n/**\n * The admin layout marks the element that scrolls the main column. Listening on\n * it rather than a wrapper of our own is what makes the whole column part of the\n * hit area: it carries a responsive `padding-bottom` (16 / 24 / 40px) that no\n * descendant can cover, and that strip is exactly where a right-click \"below the\n * list\" lands.\n */\nconst SCROLL_ROOT_SELECTOR = '[data-strapi-main-content]';\n\n/**\n * Subtrees that keep the browser's own context menu instead of opening the\n * create menu.\n *\n * `data-native-context-menu` is the explicit opt-out carried by the list items\n * themselves (asset cards, folder cards, table rows) and by the bulk actions\n * bar — right-clicking one of those must behave exactly as it does today. The\n * rest are the generic cases where the native menu is the useful one: links,\n * buttons and anything the user can type into or select text in.\n *\n * `thead` covers the table's header row, which is chrome rather than empty\n * background even though it carries no `data-native-context-menu` item.\n */\nconst NATIVE_CONTEXT_MENU_SELECTOR = [\n  '[data-native-context-menu]',\n  'thead',\n  'a',\n  'button',\n  'input',\n  'textarea',\n  'select',\n  '[contenteditable=\"true\"]',\n].join(', ');\n\n/**\n * The menu is anchored to a zero-sized element parked at the cursor, because\n * the design system's `Menu` is a dropdown: it positions its content against a\n * trigger, and there is no real trigger for a right-click on empty space.\n *\n * Inline styles rather than a `styled` wrapper — the trigger renders a design\n * system `Button`, and losing the specificity race with its own class would put\n * a stray button on the page.\n */\nconst CURSOR_ANCHOR_STYLE: CSSProperties = {\n  position: 'fixed',\n  width: 0,\n  height: 0,\n  minWidth: 0,\n  minHeight: 0,\n  padding: 0,\n  border: 0,\n  opacity: 0,\n  overflow: 'hidden',\n  pointerEvents: 'none',\n};\n\nconst LOCATOR_STYLE: CSSProperties = { height: 0 };\n\ninterface CursorPosition {\n  x: number;\n  y: number;\n}\n\ninterface MainAreaContextMenuProps {\n  /** Opens the \"new folder\" dialog in the folder currently on screen. */\n  onCreateFolder: () => void;\n  /** Opens the native file picker — same entry point as the header \"New\" menu. */\n  onImportFiles: () => void;\n  /** Opens the \"import from URL\" dialog. */\n  onImportFromUrl: () => void;\n  /**\n   * RBAC gate — without `assets.create` there is nothing to offer, so the\n   * right-click falls through to the browser. Required (not defaulted) so a\n   * permission gate can't silently regress to permissive.\n   */\n  disabled: boolean;\n}\n\n/**\n * Drive/Dropbox-style right-click on the empty parts of the assets area: the\n * same creation actions the header \"New\" menu offers, acting on the folder\n * currently open.\n *\n * Renders no wrapper — it finds the scrolling column and listens there, so the\n * hit area is the whole column including the padding below the list.\n *\n * Deliberately background-only. Right-clicking an asset, a folder or a table\n * row is left alone — those carry `data-native-context-menu` and keep the\n * browser's menu (which is what you want over a thumbnail or a filename).\n */\nexport const MainAreaContextMenu = ({\n  onCreateFolder,\n  onImportFiles,\n  onImportFromUrl,\n  disabled,\n}: MainAreaContextMenuProps) => {\n  const { formatMessage } = useIntl();\n  const [position, setPosition] = useState<CursorPosition | null>(null);\n  const [locator, setLocator] = useState<HTMLElement | null>(null);\n\n  const anchorRef = useCallback((node: HTMLElement | null) => setLocator(node), []);\n\n  useEffect(() => {\n    const container = locator?.closest<HTMLElement>(SCROLL_ROOT_SELECTOR);\n\n    if (!container || disabled) {\n      return;\n    }\n\n    const handleContextMenu = (event: MouseEvent) => {\n      if (!(event.target instanceof Element)) {\n        return;\n      }\n\n      if (event.target.closest(NATIVE_CONTEXT_MENU_SELECTOR)) {\n        return;\n      }\n\n      event.preventDefault();\n      // A right-click while the menu is open reaches Radix's dismiss listener\n      // first, which closes it; re-anchoring here reopens it under the new\n      // cursor rather than leaving the user with a menu that just vanished.\n      setPosition({ x: event.clientX, y: event.clientY });\n    };\n\n    container.addEventListener('contextmenu', handleContextMenu);\n\n    return () => container.removeEventListener('contextmenu', handleContextMenu);\n  }, [locator, disabled]);\n\n  return (\n    <>\n      <div ref={anchorRef} style={LOCATOR_STYLE} aria-hidden />\n      {/* Non-modal, like the row-level menus: a right-click elsewhere is both\n          \"close this\" and \"open that\", which a modal layer would swallow.\n          Skipped entirely without the permission — the anchor is a real\n          (if invisible) button, and one that can never open is noise in the\n          accessibility tree. */}\n      {!disabled && (\n        <Menu.Root\n          modal={false}\n          open={position !== null}\n          onOpenChange={(open) => {\n            if (!open) {\n              setPosition(null);\n            }\n          }}\n        >\n          <Menu.Trigger\n            tabIndex={-1}\n            // No visible content, so the name has to come from `aria-label` —\n            // the trigger's `label` prop renders as button text, which would\n            // defeat the point of an invisible anchor. Radix points the menu's\n            // `aria-labelledby` at this element, so it names the menu too.\n            endIcon={null}\n            aria-label={formatMessage({\n              id: getTranslationKey('list.context-menu.label'),\n              defaultMessage: 'Media library actions',\n            })}\n            style={{ ...CURSOR_ANCHOR_STYLE, top: position?.y ?? 0, left: position?.x ?? 0 }}\n          />\n          <ActionsMenuContent\n            popoverPlacement=\"bottom-start\"\n            zIndex={2}\n            minWidth=\"22rem\"\n            // The anchor is invisible and sits wherever the cursor was, so\n            // handing focus back to it on close would be a focus ring nobody can\n            // see. Let it fall to the body instead.\n            onCloseAutoFocus={(event) => event.preventDefault()}\n          >\n            <Menu.Item onSelect={onCreateFolder} startIcon={<FolderIcon />}>\n              {formatMessage({\n                id: getTranslationKey('folder.create.title'),\n                defaultMessage: 'New folder',\n              })}\n            </Menu.Item>\n            <Menu.Item onSelect={onImportFiles} startIcon={<Files />}>\n              {formatMessage({\n                id: getTranslationKey('import-files'),\n                defaultMessage: 'File upload',\n              })}\n            </Menu.Item>\n            <Menu.Item onSelect={onImportFromUrl} startIcon={<Link />}>\n              {formatMessage({\n                id: getTranslationKey('import-from-url'),\n                defaultMessage: 'File upload from URL',\n              })}\n            </Menu.Item>\n          </ActionsMenuContent>\n        </Menu.Root>\n      )}\n    </>\n  );\n};\n"],"names":["SCROLL_ROOT_SELECTOR","NATIVE_CONTEXT_MENU_SELECTOR","join","CURSOR_ANCHOR_STYLE","position","width","height","minWidth","minHeight","padding","border","opacity","overflow","pointerEvents","LOCATOR_STYLE","MainAreaContextMenu","onCreateFolder","onImportFiles","onImportFromUrl","disabled","formatMessage","useIntl","setPosition","useState","locator","setLocator","anchorRef","useCallback","node","useEffect","container","closest","handleContextMenu","event","target","Element","preventDefault","x","clientX","y","clientY","addEventListener","removeEventListener","_jsxs","_Fragment","_jsx","div","ref","style","aria-hidden","Menu","Root","modal","open","onOpenChange","Trigger","tabIndex","endIcon","aria-label","id","getTranslationKey","defaultMessage","top","left","ActionsMenuContent","popoverPlacement","zIndex","onCloseAutoFocus","Item","onSelect","startIcon","FolderIcon","Files","Link"],"mappings":"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"}
+{"version":3,"file":"MainAreaContextMenu.js","sources":["../../../../../admin/src/pages/Assets/components/MainAreaContextMenu.tsx"],"sourcesContent":["import { useCallback, useEffect, useState, type CSSProperties, type ReactNode } from 'react';\n\nimport { Menu } from '@strapi/design-system';\nimport { Files, Folder as FolderIcon, Link } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslationKey } from '../../../utils/translations';\n\nimport { ActionsMenuContent } from './ActionsMenuContent';\nimport { SelectionActions } from './SelectionActions';\n\nimport type { ItemLocations } from '../../../utils/itemLocations';\n\n/**\n * The admin layout marks the element that scrolls the main column. Listening on\n * it rather than a wrapper of our own is what makes the whole column part of the\n * hit area: it carries a responsive `padding-bottom` (16 / 24 / 40px) that no\n * descendant can cover, and that strip is exactly where a right-click \"below the\n * list\" lands.\n */\nconst SCROLL_ROOT_SELECTOR = '[data-strapi-main-content]';\n\n/**\n * Subtrees that keep the browser's own context menu instead of opening the\n * create menu.\n *\n * `data-native-context-menu` is the explicit opt-out carried by the list items\n * themselves (asset cards, folder cards, table rows) and by the bulk actions\n * bar — right-clicking one of those must behave exactly as it does today. The\n * rest are the generic cases where the native menu is the useful one: links,\n * buttons and anything the user can type into or select text in.\n *\n * `thead` covers the table's header row, which is chrome rather than empty\n * background even though it carries no `data-native-context-menu` item.\n */\nconst NATIVE_CONTEXT_MENU_SELECTOR = [\n  '[data-native-context-menu]',\n  'thead',\n  'a',\n  'button',\n  'input',\n  'textarea',\n  'select',\n  '[contenteditable=\"true\"]',\n].join(', ');\n\n/**\n * The menu is anchored to a zero-sized element parked at the cursor, because\n * the design system's `Menu` is a dropdown: it positions its content against a\n * trigger, and there is no real trigger for a right-click on empty space.\n *\n * Inline styles rather than a `styled` wrapper — the trigger renders a design\n * system `Button`, and losing the specificity race with its own class would put\n * a stray button on the page.\n */\nconst CURSOR_ANCHOR_STYLE: CSSProperties = {\n  position: 'fixed',\n  width: 0,\n  height: 0,\n  minWidth: 0,\n  minHeight: 0,\n  padding: 0,\n  border: 0,\n  opacity: 0,\n  overflow: 'hidden',\n  pointerEvents: 'none',\n};\n\nconst LOCATOR_STYLE: CSSProperties = { height: 0 };\n\ninterface CursorPosition {\n  x: number;\n  y: number;\n}\n\ninterface MainAreaContextMenuProps {\n  /** Opens the \"new folder\" dialog in the folder currently on screen. */\n  onCreateFolder: () => void;\n  /** Opens the native file picker — same entry point as the header \"New\" menu. */\n  onImportFiles: () => void;\n  /** Opens the \"import from URL\" dialog. */\n  onImportFromUrl: () => void;\n  /**\n   * RBAC gate — without `assets.create` there is nothing to offer, so the\n   * right-click falls through to the browser. Required (not defaulted) so a\n   * permission gate can't silently regress to permissive.\n   */\n  disabled: boolean;\n  /**\n   * The element to listen on, found from where this renders. Defaults to the\n   * scrolling main column.\n   */\n  containerSelector?: string;\n  /**\n   * Real location of every loaded row. Supplying it turns on the selection\n   * section: with items selected, their bulk actions lead the menu, above the\n   * creation ones. Omitted, the menu offers creation only — which is what the\n   * folder tree wants, where the asset selection is not what you are pointing\n   * at.\n   */\n  locations?: ItemLocations;\n}\n\n/**\n * Drive/Dropbox-style right-click on the empty parts of the assets area: the\n * same creation actions the header \"New\" menu offers, acting on the folder\n * currently open.\n *\n * Renders no wrapper — it finds the scrolling column and listens there, so the\n * hit area is the whole column including the padding below the list.\n *\n * Deliberately background-only. Right-clicking an asset, a folder or a table\n * row is left alone — those carry `data-native-context-menu` and keep the\n * browser's menu (which is what you want over a thumbnail or a filename).\n */\nexport const MainAreaContextMenu = ({\n  onCreateFolder,\n  onImportFiles,\n  onImportFromUrl,\n  disabled,\n  containerSelector = SCROLL_ROOT_SELECTOR,\n  locations,\n}: MainAreaContextMenuProps) => {\n  const { formatMessage } = useIntl();\n  const [position, setPosition] = useState<CursorPosition | null>(null);\n  const [locator, setLocator] = useState<HTMLElement | null>(null);\n\n  const anchorRef = useCallback((node: HTMLElement | null) => setLocator(node), []);\n\n  useEffect(() => {\n    const container = locator?.closest<HTMLElement>(containerSelector);\n\n    if (!container || disabled) {\n      return;\n    }\n\n    const handleContextMenu = (event: MouseEvent) => {\n      if (!(event.target instanceof Element)) {\n        return;\n      }\n\n      if (event.target.closest(NATIVE_CONTEXT_MENU_SELECTOR)) {\n        return;\n      }\n\n      event.preventDefault();\n      // A right-click while the menu is open reaches Radix's dismiss listener\n      // first, which closes it; re-anchoring here reopens it under the new\n      // cursor rather than leaving the user with a menu that just vanished.\n      setPosition({ x: event.clientX, y: event.clientY });\n    };\n\n    container.addEventListener('contextmenu', handleContextMenu);\n\n    return () => container.removeEventListener('contextmenu', handleContextMenu);\n  }, [locator, disabled, containerSelector]);\n\n  const createItems = (\n    <>\n      <Menu.Item onSelect={onCreateFolder} startIcon={<FolderIcon />}>\n        {formatMessage({\n          id: getTranslationKey('folder.create.title'),\n          defaultMessage: 'New folder',\n        })}\n      </Menu.Item>\n      <Menu.Item onSelect={onImportFiles} startIcon={<Files />}>\n        {formatMessage({\n          id: getTranslationKey('import-files'),\n          defaultMessage: 'File upload',\n        })}\n      </Menu.Item>\n      <Menu.Item onSelect={onImportFromUrl} startIcon={<Link />}>\n        {formatMessage({\n          id: getTranslationKey('import-from-url'),\n          defaultMessage: 'File upload from URL',\n        })}\n      </Menu.Item>\n    </>\n  );\n\n  /**\n   * `selectionItems` leads the menu when something is selected, so the actions\n   * that apply to the selection come before the ones that create new things.\n   */\n  const renderMenu = (selectionItems: ReactNode) => (\n    <Menu.Root\n      modal={false}\n      open={position !== null}\n      onOpenChange={(open) => {\n        if (!open) {\n          setPosition(null);\n        }\n      }}\n    >\n      <Menu.Trigger\n        tabIndex={-1}\n        // No visible content, so the name has to come from `aria-label` —\n        // the trigger's `label` prop renders as button text, which would\n        // defeat the point of an invisible anchor. Radix points the menu's\n        // `aria-labelledby` at this element, so it names the menu too.\n        endIcon={null}\n        aria-label={formatMessage({\n          id: getTranslationKey('list.context-menu.label'),\n          defaultMessage: 'Media library actions',\n        })}\n        style={{ ...CURSOR_ANCHOR_STYLE, top: position?.y ?? 0, left: position?.x ?? 0 }}\n      />\n      <ActionsMenuContent\n        popoverPlacement=\"bottom-start\"\n        zIndex={2}\n        minWidth=\"22rem\"\n        // The anchor is invisible and sits wherever the cursor was, so\n        // handing focus back to it on close would be a focus ring nobody can\n        // see. Let it fall to the body instead.\n        onCloseAutoFocus={(event) => event.preventDefault()}\n      >\n        {selectionItems}\n        {createItems}\n      </ActionsMenuContent>\n    </Menu.Root>\n  );\n\n  return (\n    <>\n      <div ref={anchorRef} style={LOCATOR_STYLE} aria-hidden />\n      {/* Non-modal, like the row-level menus: a right-click elsewhere is both\n          \"close this\" and \"open that\", which a modal layer would swallow.\n          Skipped entirely without the permission — the anchor is a real\n          (if invisible) button, and one that can never open is noise in the\n          accessibility tree. */}\n      {!disabled &&\n        (locations ? (\n          <SelectionActions locations={locations}>\n            {({ count, hasActions, items, dialogs }) => (\n              <>\n                {renderMenu(\n                  count > 0 && hasActions ? (\n                    <>\n                      {items}\n                      <Menu.Separator />\n                    </>\n                  ) : null\n                )}\n                {/* Outside the menu: Radix unmounts its content on close, and a\n                    dialog opened from an item has to outlive it. */}\n                {dialogs}\n              </>\n            )}\n          </SelectionActions>\n        ) : (\n          renderMenu(null)\n        ))}\n    </>\n  );\n};\n"],"names":["SCROLL_ROOT_SELECTOR","NATIVE_CONTEXT_MENU_SELECTOR","join","CURSOR_ANCHOR_STYLE","position","width","height","minWidth","minHeight","padding","border","opacity","overflow","pointerEvents","LOCATOR_STYLE","MainAreaContextMenu","onCreateFolder","onImportFiles","onImportFromUrl","disabled","containerSelector","locations","formatMessage","useIntl","setPosition","useState","locator","setLocator","anchorRef","useCallback","node","useEffect","container","closest","handleContextMenu","event","target","Element","preventDefault","x","clientX","y","clientY","addEventListener","removeEventListener","createItems","_jsxs","_Fragment","_jsx","Menu","Item","onSelect","startIcon","FolderIcon","id","getTranslationKey","defaultMessage","Files","Link","renderMenu","selectionItems","Root","modal","open","onOpenChange","Trigger","tabIndex","endIcon","aria-label","style","top","left","ActionsMenuContent","popoverPlacement","zIndex","onCloseAutoFocus","div","ref","aria-hidden","SelectionActions","count","hasActions","items","dialogs","Separator"],"mappings":"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"}

package/dist/admin/pages/Assets/components/MainAreaContextMenu.mjs

@@ -5,6 +5,7 @@ import { Folder, Files, Link } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { getTranslationKey } from '../../../utils/translations.mjs';
 import { ActionsMenuContent } from './ActionsMenuContent.mjs';
+import { SelectionActions } from './SelectionActions.mjs';
 
 /**
  * The admin layout marks the element that scrolls the main column. Listening on
@@ -69,13 +70,13 @@ const LOCATOR_STYLE = {
  * Deliberately background-only. Right-clicking an asset, a folder or a table
  * row is left alone — those carry `data-native-context-menu` and keep the
  * browser's menu (which is what you want over a thumbnail or a filename).
- */ const MainAreaContextMenu = ({ onCreateFolder, onImportFiles, onImportFromUrl, disabled })=>{
+ */ const MainAreaContextMenu = ({ onCreateFolder, onImportFiles, onImportFromUrl, disabled, containerSelector = SCROLL_ROOT_SELECTOR, locations })=>{
     const { formatMessage } = useIntl();
     const [position, setPosition] = useState(null);
     const [locator, setLocator] = useState(null);
     const anchorRef = useCallback((node)=>setLocator(node), []);
     useEffect(()=>{
-        const container = locator?.closest(SCROLL_ROOT_SELECTOR);
+        const container = locator?.closest(containerSelector);
         if (!container || disabled) {
             return;
         }
@@ -99,8 +100,81 @@ const LOCATOR_STYLE = {
         return ()=>container.removeEventListener('contextmenu', handleContextMenu);
     }, [
         locator,
-        disabled
+        disabled,
+        containerSelector
     ]);
+    const createItems = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Menu.Item, {
+                onSelect: onCreateFolder,
+                startIcon: /*#__PURE__*/ jsx(Folder, {}),
+                children: formatMessage({
+                    id: getTranslationKey('folder.create.title'),
+                    defaultMessage: 'New folder'
+                })
+            }),
+            /*#__PURE__*/ jsx(Menu.Item, {
+                onSelect: onImportFiles,
+                startIcon: /*#__PURE__*/ jsx(Files, {}),
+                children: formatMessage({
+                    id: getTranslationKey('import-files'),
+                    defaultMessage: 'File upload'
+                })
+            }),
+            /*#__PURE__*/ jsx(Menu.Item, {
+                onSelect: onImportFromUrl,
+                startIcon: /*#__PURE__*/ jsx(Link, {}),
+                children: formatMessage({
+                    id: getTranslationKey('import-from-url'),
+                    defaultMessage: 'File upload from URL'
+                })
+            })
+        ]
+    });
+    /**
+   * `selectionItems` leads the menu when something is selected, so the actions
+   * that apply to the selection come before the ones that create new things.
+   */ const renderMenu = (selectionItems)=>/*#__PURE__*/ jsxs(Menu.Root, {
+            modal: false,
+            open: position !== null,
+            onOpenChange: (open)=>{
+                if (!open) {
+                    setPosition(null);
+                }
+            },
+            children: [
+                /*#__PURE__*/ jsx(Menu.Trigger, {
+                    tabIndex: -1,
+                    // No visible content, so the name has to come from `aria-label` —
+                    // the trigger's `label` prop renders as button text, which would
+                    // defeat the point of an invisible anchor. Radix points the menu's
+                    // `aria-labelledby` at this element, so it names the menu too.
+                    endIcon: null,
+                    "aria-label": formatMessage({
+                        id: getTranslationKey('list.context-menu.label'),
+                        defaultMessage: 'Media library actions'
+                    }),
+                    style: {
+                        ...CURSOR_ANCHOR_STYLE,
+                        top: position?.y ?? 0,
+                        left: position?.x ?? 0
+                    }
+                }),
+                /*#__PURE__*/ jsxs(ActionsMenuContent, {
+                    popoverPlacement: "bottom-start",
+                    zIndex: 2,
+                    minWidth: "22rem",
+                    // The anchor is invisible and sits wherever the cursor was, so
+                    // handing focus back to it on close would be a focus ring nobody can
+                    // see. Let it fall to the body instead.
+                    onCloseAutoFocus: (event)=>event.preventDefault(),
+                    children: [
+                        selectionItems,
+                        createItems
+                    ]
+                })
+            ]
+        });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("div", {
@@ -108,69 +182,20 @@ const LOCATOR_STYLE = {
                 style: LOCATOR_STYLE,
                 "aria-hidden": true
             }),
-            !disabled && /*#__PURE__*/ jsxs(Menu.Root, {
-                modal: false,
-                open: position !== null,
-                onOpenChange: (open)=>{
-                    if (!open) {
-                        setPosition(null);
-                    }
-                },
-                children: [
-                    /*#__PURE__*/ jsx(Menu.Trigger, {
-                        tabIndex: -1,
-                        // No visible content, so the name has to come from `aria-label` —
-                        // the trigger's `label` prop renders as button text, which would
-                        // defeat the point of an invisible anchor. Radix points the menu's
-                        // `aria-labelledby` at this element, so it names the menu too.
-                        endIcon: null,
-                        "aria-label": formatMessage({
-                            id: getTranslationKey('list.context-menu.label'),
-                            defaultMessage: 'Media library actions'
-                        }),
-                        style: {
-                            ...CURSOR_ANCHOR_STYLE,
-                            top: position?.y ?? 0,
-                            left: position?.x ?? 0
-                        }
-                    }),
-                    /*#__PURE__*/ jsxs(ActionsMenuContent, {
-                        popoverPlacement: "bottom-start",
-                        zIndex: 2,
-                        minWidth: "22rem",
-                        // The anchor is invisible and sits wherever the cursor was, so
-                        // handing focus back to it on close would be a focus ring nobody can
-                        // see. Let it fall to the body instead.
-                        onCloseAutoFocus: (event)=>event.preventDefault(),
+            !disabled && (locations ? /*#__PURE__*/ jsx(SelectionActions, {
+                locations: locations,
+                children: ({ count, hasActions, items, dialogs })=>/*#__PURE__*/ jsxs(Fragment, {
                         children: [
-                            /*#__PURE__*/ jsx(Menu.Item, {
-                                onSelect: onCreateFolder,
-                                startIcon: /*#__PURE__*/ jsx(Folder, {}),
-                                children: formatMessage({
-                                    id: getTranslationKey('folder.create.title'),
-                                    defaultMessage: 'New folder'
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(Menu.Item, {
-                                onSelect: onImportFiles,
-                                startIcon: /*#__PURE__*/ jsx(Files, {}),
-                                children: formatMessage({
-                                    id: getTranslationKey('import-files'),
-                                    defaultMessage: 'File upload'
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(Menu.Item, {
-                                onSelect: onImportFromUrl,
-                                startIcon: /*#__PURE__*/ jsx(Link, {}),
-                                children: formatMessage({
-                                    id: getTranslationKey('import-from-url'),
-                                    defaultMessage: 'File upload from URL'
-                                })
-                            })
+                            renderMenu(count > 0 && hasActions ? /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    items,
+                                    /*#__PURE__*/ jsx(Menu.Separator, {})
+                                ]
+                            }) : null),
+                            dialogs
                         ]
                     })
-                ]
-            })
+            }) : renderMenu(null))
         ]
     });
 };