@strapi/upload 5.55.1 → 5.57.0

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))
         ]
     });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MainAreaContextMenu.mjs","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":";;;;;;;;AAUA;;;;;;AAMC,IACD,MAAMA,oBAAAA,GAAuB,4BAAA;AAE7B;;;;;;;;;;;;AAYC,IACD,MAAMC,4BAAAA,GAA+B;AACnC,IAAA,4BAAA;AACA,IAAA,OAAA;AACA,IAAA,GAAA;AACA,IAAA,QAAA;AACA,IAAA,OAAA;AACA,IAAA,UAAA;AACA,IAAA,QAAA;AACA,IAAA;AACD,CAAA,CAACC,IAAI,CAAC,IAAA,CAAA;AAEP;;;;;;;;AAQC,IACD,MAAMC,mBAAAA,GAAqC;IACzCC,QAAAA,EAAU,OAAA;IACVC,KAAAA,EAAO,CAAA;IACPC,MAAAA,EAAQ,CAAA;IACRC,QAAAA,EAAU,CAAA;IACVC,SAAAA,EAAW,CAAA;IACXC,OAAAA,EAAS,CAAA;IACTC,MAAAA,EAAQ,CAAA;IACRC,OAAAA,EAAS,CAAA;IACTC,QAAAA,EAAU,QAAA;IACVC,aAAAA,EAAe;AACjB,CAAA;AAEA,MAAMC,aAAAA,GAA+B;IAAER,MAAAA,EAAQ;AAAE,CAAA;AAsBjD;;;;;;;;;;;AAWC,IACM,MAAMS,mBAAAA,GAAsB,CAAC,EAClCC,cAAc,EACdC,aAAa,EACbC,eAAe,EACfC,QAAQ,EACiB,GAAA;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACjB,QAAAA,EAAUkB,WAAAA,CAAY,GAAGC,QAAAA,CAAgC,IAAA,CAAA;AAChE,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGF,QAAAA,CAA6B,IAAA,CAAA;AAE3D,IAAA,MAAMG,YAAYC,WAAAA,CAAY,CAACC,IAAAA,GAA6BH,UAAAA,CAAWG,OAAO,EAAE,CAAA;IAEhFC,SAAAA,CAAU,IAAA;QACR,MAAMC,SAAAA,GAAYN,SAASO,OAAAA,CAAqB/B,oBAAAA,CAAAA;QAEhD,IAAI,CAAC8B,aAAaX,QAAAA,EAAU;AAC1B,YAAA;AACF,QAAA;AAEA,QAAA,MAAMa,oBAAoB,CAACC,KAAAA,GAAAA;AACzB,YAAA,IAAI,EAAEA,KAAAA,CAAMC,MAAM,YAAYC,OAAM,CAAA,EAAI;AACtC,gBAAA;AACF,YAAA;AAEA,YAAA,IAAIF,KAAAA,CAAMC,MAAM,CAACH,OAAO,CAAC9B,4BAAAA,CAAAA,EAA+B;AACtD,gBAAA;AACF,YAAA;AAEAgC,YAAAA,KAAAA,CAAMG,cAAc,EAAA;;;;YAIpBd,WAAAA,CAAY;AAAEe,gBAAAA,CAAAA,EAAGJ,MAAMK,OAAO;AAAEC,gBAAAA,CAAAA,EAAGN,MAAMO;AAAQ,aAAA,CAAA;AACnD,QAAA,CAAA;QAEAV,SAAAA,CAAUW,gBAAgB,CAAC,aAAA,EAAeT,iBAAAA,CAAAA;AAE1C,QAAA,OAAO,IAAMF,SAAAA,CAAUY,mBAAmB,CAAC,aAAA,EAAeV,iBAAAA,CAAAA;IAC5D,CAAA,EAAG;AAACR,QAAAA,OAAAA;AAASL,QAAAA;AAAS,KAAA,CAAA;IAEtB,qBACEwB,IAAA,CAAAC,QAAA,EAAA;;0BACEC,GAAA,CAACC,KAAAA,EAAAA;gBAAIC,GAAAA,EAAKrB,SAAAA;gBAAWsB,KAAAA,EAAOlC,aAAAA;gBAAemC,aAAW,EAAA;;YAMrD,CAAC9B,QAAAA,kBACAwB,IAAA,CAACO,IAAAA,CAAKC,IAAI,EAAA;gBACRC,KAAAA,EAAO,KAAA;AACPC,gBAAAA,IAAAA,EAAMjD,QAAAA,KAAa,IAAA;AACnBkD,gBAAAA,YAAAA,EAAc,CAACD,IAAAA,GAAAA;AACb,oBAAA,IAAI,CAACA,IAAAA,EAAM;wBACT/B,WAAAA,CAAY,IAAA,CAAA;AACd,oBAAA;AACF,gBAAA,CAAA;;AAEA,kCAAAuB,GAAA,CAACK,KAAKK,OAAO,EAAA;AACXC,wBAAAA,QAAAA,EAAU,EAAC;;;;;wBAKXC,OAAAA,EAAS,IAAA;AACTC,wBAAAA,YAAAA,EAAYtC,aAAAA,CAAc;AACxBuC,4BAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,yBAAA,CAAA;4BACtBC,cAAAA,EAAgB;AAClB,yBAAA,CAAA;wBACAb,KAAAA,EAAO;AAAE,4BAAA,GAAG7C,mBAAmB;AAAE2D,4BAAAA,GAAAA,EAAK1D,UAAUmC,CAAAA,IAAK,CAAA;AAAGwB,4BAAAA,IAAAA,EAAM3D,UAAUiC,CAAAA,IAAK;AAAE;;kCAEjFM,IAAA,CAACqB,kBAAAA,EAAAA;wBACCC,gBAAAA,EAAiB,cAAA;wBACjBC,MAAAA,EAAQ,CAAA;wBACR3D,QAAAA,EAAS,OAAA;;;;wBAIT4D,gBAAAA,EAAkB,CAAClC,KAAAA,GAAUA,KAAAA,CAAMG,cAAc,EAAA;;AAEjD,0CAAAS,GAAA,CAACK,KAAKkB,IAAI,EAAA;gCAACC,QAAAA,EAAUrD,cAAAA;AAAgBsD,gCAAAA,SAAAA,gBAAWzB,GAAA,CAAC0B,MAAAA,EAAAA,EAAAA,CAAAA;0CAC9CnD,aAAAA,CAAc;AACbuC,oCAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,qBAAA,CAAA;oCACtBC,cAAAA,EAAgB;AAClB,iCAAA;;AAEF,0CAAAhB,GAAA,CAACK,KAAKkB,IAAI,EAAA;gCAACC,QAAAA,EAAUpD,aAAAA;AAAeqD,gCAAAA,SAAAA,gBAAWzB,GAAA,CAAC2B,KAAAA,EAAAA,EAAAA,CAAAA;0CAC7CpD,aAAAA,CAAc;AACbuC,oCAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,cAAA,CAAA;oCACtBC,cAAAA,EAAgB;AAClB,iCAAA;;AAEF,0CAAAhB,GAAA,CAACK,KAAKkB,IAAI,EAAA;gCAACC,QAAAA,EAAUnD,eAAAA;AAAiBoD,gCAAAA,SAAAA,gBAAWzB,GAAA,CAAC4B,IAAAA,EAAAA,EAAAA,CAAAA;0CAC/CrD,aAAAA,CAAc;AACbuC,oCAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,iBAAA,CAAA;oCACtBC,cAAAA,EAAgB;AAClB,iCAAA;;;;;;;;AAOd;;;;"}
+{"version":3,"file":"MainAreaContextMenu.mjs","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/SelectionActions.js

@@ -0,0 +1,111 @@
+'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');
+var useMediaLibraryPermissions = require('../../../hooks/useMediaLibraryPermissions.js');
+var buildDragSetFromSelection = require('../../../utils/buildDragSetFromSelection.js');
+var translations = require('../../../utils/translations.js');
+var useAssetSelection = require('../hooks/useAssetSelection.js');
+var useFolderNavigation = require('../hooks/useFolderNavigation.js');
+var BulkMoveDialog = require('./BulkMoveDialog.js');
+var DeleteItemsDialog = require('./DeleteItemsDialog.js');
+
+/**
+ * The actions that apply to the current selection — move and delete — with no
+ * opinion about which menu shows them.
+ *
+ * Two menus offer them: the one a right-click on a selected item opens, and the
+ * background menu, which prepends them to its own creation actions whenever
+ * something is selected. Sharing the items keeps the two from drifting, and
+ * keeps one copy of the dialogs they open.
+ *
+ * Only move and delete: the rest of an item's menu has no meaning for a set —
+ * there is no one link to copy and no one file to replace.
+ */ const SelectionActions = ({ locations, children })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    // Move and delete are both `assets.update` server-side — one flag gates both.
+    const { canUpdate, isLoading: isLoadingPermissions } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const { selectedIds, selectedFolderIds, clear } = useAssetSelection.useAssetSelection();
+    const { currentFolderId } = useFolderNavigation.useFolderNavigation();
+    const [isMoveOpen, setIsMoveOpen] = React.useState(false);
+    const [isDeleteOpen, setIsDeleteOpen] = React.useState(false);
+    const count = selectedIds.size + selectedFolderIds.size;
+    const isBusy = isMoveOpen || isDeleteOpen;
+    // `canUpdate` is `false` until the RBAC check settles. Reading it before then
+    // would hide the actions on first render, or close a menu before it paints.
+    const hasActions = isLoadingPermissions || canUpdate;
+    const moveItems = React.useMemo(()=>buildDragSetFromSelection.buildDragSetFromSelection(selectedIds, selectedFolderIds, locations, currentFolderId), [
+        selectedIds,
+        selectedFolderIds,
+        locations,
+        currentFolderId
+    ]);
+    const items = /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Label, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "sigma",
+                    textColor: "neutral600",
+                    children: formatMessage({
+                        id: translations.getTranslationKey('list.bulk-actions.selected-count'),
+                        defaultMessage: '{count, plural, =1 {# item selected} other {# items selected}}'
+                    }, {
+                        count
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ArrowRight, {}),
+                onSelect: ()=>setIsMoveOpen(true),
+                children: formatMessage({
+                    id: translations.getTranslationKey('list.bulk-actions.move'),
+                    defaultMessage: 'Move'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {}),
+                variant: "danger",
+                onSelect: ()=>setIsDeleteOpen(true),
+                children: formatMessage({
+                    id: translations.getTranslationKey('list.bulk-actions.delete'),
+                    defaultMessage: 'Delete'
+                })
+            })
+        ]
+    });
+    const dialogs = /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            isMoveOpen && /*#__PURE__*/ jsxRuntime.jsx(BulkMoveDialog.BulkMoveDialog, {
+                open: true,
+                onClose: ()=>setIsMoveOpen(false),
+                items: moveItems,
+                onSuccess: clear
+            }),
+            isDeleteOpen && /*#__PURE__*/ jsxRuntime.jsx(DeleteItemsDialog.DeleteItemsDialog, {
+                open: true,
+                onClose: ()=>setIsDeleteOpen(false),
+                target: {
+                    fileIds: Array.from(selectedIds),
+                    folderIds: Array.from(selectedFolderIds)
+                },
+                onSuccess: clear
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: children({
+            count,
+            hasActions,
+            items,
+            dialogs,
+            isBusy
+        })
+    });
+};
+
+exports.SelectionActions = SelectionActions;
+//# sourceMappingURL=SelectionActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionActions.js","sources":["../../../../../admin/src/pages/Assets/components/SelectionActions.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from 'react';\n\nimport { Menu, Typography } from '@strapi/design-system';\nimport { ArrowRight, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions';\nimport { buildDragSetFromSelection } from '../../../utils/buildDragSetFromSelection';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useAssetSelection } from '../hooks/useAssetSelection';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\n\nimport { BulkMoveDialog } from './BulkMoveDialog';\nimport { DeleteItemsDialog } from './DeleteItemsDialog';\n\nimport type { ItemLocations } from '../../../utils/itemLocations';\n\ninterface SelectionActionsRender {\n  /** How many items the actions would act on. Zero means nothing is selected. */\n  count: number;\n  /**\n   * Whether there is anything to offer. False for a role that can read but not\n   * update; true while the RBAC check is still settling, so a menu built on it\n   * does not flash empty.\n   */\n  hasActions: boolean;\n  /** The count label, a separator, then Move and Delete. */\n  items: ReactNode;\n  /** Rendered outside `Menu.Root` — a dialog has to outlive the menu that opened it. */\n  dialogs: ReactNode;\n  /** True while a dialog is open, for callers that unmount once nothing is on screen. */\n  isBusy: boolean;\n}\n\ninterface SelectionActionsProps {\n  /**\n   * Real location of every loaded row, so the move dialog validates each\n   * selected item against its own parent — same input the bulk bar takes.\n   */\n  locations: ItemLocations;\n  children: (actions: SelectionActionsRender) => ReactNode;\n}\n\n/**\n * The actions that apply to the current selection — move and delete — with no\n * opinion about which menu shows them.\n *\n * Two menus offer them: the one a right-click on a selected item opens, and the\n * background menu, which prepends them to its own creation actions whenever\n * something is selected. Sharing the items keeps the two from drifting, and\n * keeps one copy of the dialogs they open.\n *\n * Only move and delete: the rest of an item's menu has no meaning for a set —\n * there is no one link to copy and no one file to replace.\n */\nexport const SelectionActions = ({ locations, children }: SelectionActionsProps) => {\n  const { formatMessage } = useIntl();\n  // Move and delete are both `assets.update` server-side — one flag gates both.\n  const { canUpdate, isLoading: isLoadingPermissions } = useMediaLibraryPermissions();\n  const { selectedIds, selectedFolderIds, clear } = useAssetSelection();\n  const { currentFolderId } = useFolderNavigation();\n  const [isMoveOpen, setIsMoveOpen] = useState(false);\n  const [isDeleteOpen, setIsDeleteOpen] = useState(false);\n\n  const count = selectedIds.size + selectedFolderIds.size;\n  const isBusy = isMoveOpen || isDeleteOpen;\n  // `canUpdate` is `false` until the RBAC check settles. Reading it before then\n  // would hide the actions on first render, or close a menu before it paints.\n  const hasActions = isLoadingPermissions || canUpdate;\n\n  const moveItems = useMemo(\n    () => buildDragSetFromSelection(selectedIds, selectedFolderIds, locations, currentFolderId),\n    [selectedIds, selectedFolderIds, locations, currentFolderId]\n  );\n\n  const items = (\n    <>\n      {/* A label rather than a `Menu.Item`: it states what the actions below\n          will act on and is not itself selectable. */}\n      <Menu.Label>\n        <Typography variant=\"sigma\" textColor=\"neutral600\">\n          {formatMessage(\n            {\n              id: getTranslationKey('list.bulk-actions.selected-count'),\n              defaultMessage: '{count, plural, =1 {# item selected} other {# items selected}}',\n            },\n            { count }\n          )}\n        </Typography>\n      </Menu.Label>\n      <Menu.Separator />\n      <Menu.Item startIcon={<ArrowRight />} onSelect={() => setIsMoveOpen(true)}>\n        {formatMessage({\n          id: getTranslationKey('list.bulk-actions.move'),\n          defaultMessage: 'Move',\n        })}\n      </Menu.Item>\n      <Menu.Item startIcon={<Trash />} variant=\"danger\" onSelect={() => setIsDeleteOpen(true)}>\n        {formatMessage({\n          id: getTranslationKey('list.bulk-actions.delete'),\n          defaultMessage: 'Delete',\n        })}\n      </Menu.Item>\n    </>\n  );\n\n  const dialogs = (\n    <>\n      {isMoveOpen && (\n        <BulkMoveDialog\n          open\n          onClose={() => setIsMoveOpen(false)}\n          items={moveItems}\n          onSuccess={clear}\n        />\n      )}\n      {isDeleteOpen && (\n        <DeleteItemsDialog\n          open\n          onClose={() => setIsDeleteOpen(false)}\n          target={{\n            fileIds: Array.from(selectedIds),\n            folderIds: Array.from(selectedFolderIds),\n          }}\n          onSuccess={clear}\n        />\n      )}\n    </>\n  );\n\n  return <>{children({ count, hasActions, items, dialogs, isBusy })}</>;\n};\n"],"names":["SelectionActions","locations","children","formatMessage","useIntl","canUpdate","isLoading","isLoadingPermissions","useMediaLibraryPermissions","selectedIds","selectedFolderIds","clear","useAssetSelection","currentFolderId","useFolderNavigation","isMoveOpen","setIsMoveOpen","useState","isDeleteOpen","setIsDeleteOpen","count","size","isBusy","hasActions","moveItems","useMemo","buildDragSetFromSelection","items","_jsxs","_Fragment","_jsx","Menu","Label","Typography","variant","textColor","id","getTranslationKey","defaultMessage","Separator","Item","startIcon","ArrowRight","onSelect","Trash","dialogs","BulkMoveDialog","open","onClose","onSuccess","DeleteItemsDialog","target","fileIds","Array","from","folderIds"],"mappings":";;;;;;;;;;;;;;;AA2CA;;;;;;;;;;;UAYaA,gBAAAA,GAAmB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAyB,GAAA;IAC7E,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;;AAE1B,IAAA,MAAM,EAAEC,SAAS,EAAEC,SAAAA,EAAWC,oBAAoB,EAAE,GAAGC,qDAAAA,EAAAA;AACvD,IAAA,MAAM,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,KAAK,EAAE,GAAGC,mCAAAA,EAAAA;IAClD,MAAM,EAAEC,eAAe,EAAE,GAAGC,uCAAAA,EAAAA;AAC5B,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,cAAAA,CAAS,KAAA,CAAA;AAC7C,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGF,cAAAA,CAAS,KAAA,CAAA;AAEjD,IAAA,MAAMG,KAAAA,GAAQX,WAAAA,CAAYY,IAAI,GAAGX,kBAAkBW,IAAI;AACvD,IAAA,MAAMC,SAASP,UAAAA,IAAcG,YAAAA;;;AAG7B,IAAA,MAAMK,aAAahB,oBAAAA,IAAwBF,SAAAA;AAE3C,IAAA,MAAMmB,YAAYC,aAAAA,CAChB,IAAMC,oDAA0BjB,WAAAA,EAAaC,iBAAAA,EAAmBT,WAAWY,eAAAA,CAAAA,EAC3E;AAACJ,QAAAA,WAAAA;AAAaC,QAAAA,iBAAAA;AAAmBT,QAAAA,SAAAA;AAAWY,QAAAA;AAAgB,KAAA,CAAA;AAG9D,IAAA,MAAMc,KAAAA,iBACJC,eAAA,CAAAC,mBAAA,EAAA;;AAGE,0BAAAC,cAAA,CAACC,kBAAKC,KAAK,EAAA;AACT,gBAAA,QAAA,gBAAAF,cAAA,CAACG,uBAAAA,EAAAA;oBAAWC,OAAAA,EAAQ,OAAA;oBAAQC,SAAAA,EAAU,YAAA;8BACnChC,aAAAA,CACC;AACEiC,wBAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,kCAAA,CAAA;wBACtBC,cAAAA,EAAgB;qBAClB,EACA;AAAElB,wBAAAA;AAAM,qBAAA;;;AAId,0BAAAU,cAAA,CAACC,kBAAKQ,SAAS,EAAA,EAAA,CAAA;AACf,0BAAAT,cAAA,CAACC,kBAAKS,IAAI,EAAA;AAACC,gBAAAA,SAAAA,gBAAWX,cAAA,CAACY,gBAAAA,EAAAA,EAAAA,CAAAA;AAAeC,gBAAAA,QAAAA,EAAU,IAAM3B,aAAAA,CAAc,IAAA,CAAA;0BACjEb,aAAAA,CAAc;AACbiC,oBAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,wBAAA,CAAA;oBACtBC,cAAAA,EAAgB;AAClB,iBAAA;;AAEF,0BAAAR,cAAA,CAACC,kBAAKS,IAAI,EAAA;AAACC,gBAAAA,SAAAA,gBAAWX,cAAA,CAACc,WAAAA,EAAAA,EAAAA,CAAAA;gBAAUV,OAAAA,EAAQ,QAAA;AAASS,gBAAAA,QAAAA,EAAU,IAAMxB,eAAAA,CAAgB,IAAA,CAAA;0BAC/EhB,aAAAA,CAAc;AACbiC,oBAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,0BAAA,CAAA;oBACtBC,cAAAA,EAAgB;AAClB,iBAAA;;;;AAKN,IAAA,MAAMO,OAAAA,iBACJjB,eAAA,CAAAC,mBAAA,EAAA;;AACGd,YAAAA,UAAAA,kBACCe,cAAA,CAACgB,6BAAAA,EAAAA;gBACCC,IAAI,EAAA,IAAA;AACJC,gBAAAA,OAAAA,EAAS,IAAMhC,aAAAA,CAAc,KAAA,CAAA;gBAC7BW,KAAAA,EAAOH,SAAAA;gBACPyB,SAAAA,EAAWtC;;AAGdO,YAAAA,YAAAA,kBACCY,cAAA,CAACoB,mCAAAA,EAAAA;gBACCH,IAAI,EAAA,IAAA;AACJC,gBAAAA,OAAAA,EAAS,IAAM7B,eAAAA,CAAgB,KAAA,CAAA;gBAC/BgC,MAAAA,EAAQ;oBACNC,OAAAA,EAASC,KAAAA,CAAMC,IAAI,CAAC7C,WAAAA,CAAAA;oBACpB8C,SAAAA,EAAWF,KAAAA,CAAMC,IAAI,CAAC5C,iBAAAA;AACxB,iBAAA;gBACAuC,SAAAA,EAAWtC;;;;IAMnB,qBAAOmB,cAAA,CAAAD,mBAAA,EAAA;kBAAG3B,QAAAA,CAAS;AAAEkB,YAAAA,KAAAA;AAAOG,YAAAA,UAAAA;AAAYI,YAAAA,KAAAA;AAAOkB,YAAAA,OAAAA;AAASvB,YAAAA;AAAO,SAAA;;AACjE;;;;"}

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

@@ -0,0 +1,109 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { Menu, Typography } from '@strapi/design-system';
+import { ArrowRight, Trash } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions.mjs';
+import { buildDragSetFromSelection } from '../../../utils/buildDragSetFromSelection.mjs';
+import { getTranslationKey } from '../../../utils/translations.mjs';
+import { useAssetSelection } from '../hooks/useAssetSelection.mjs';
+import { useFolderNavigation } from '../hooks/useFolderNavigation.mjs';
+import { BulkMoveDialog } from './BulkMoveDialog.mjs';
+import { DeleteItemsDialog } from './DeleteItemsDialog.mjs';
+
+/**
+ * The actions that apply to the current selection — move and delete — with no
+ * opinion about which menu shows them.
+ *
+ * Two menus offer them: the one a right-click on a selected item opens, and the
+ * background menu, which prepends them to its own creation actions whenever
+ * something is selected. Sharing the items keeps the two from drifting, and
+ * keeps one copy of the dialogs they open.
+ *
+ * Only move and delete: the rest of an item's menu has no meaning for a set —
+ * there is no one link to copy and no one file to replace.
+ */ const SelectionActions = ({ locations, children })=>{
+    const { formatMessage } = useIntl();
+    // Move and delete are both `assets.update` server-side — one flag gates both.
+    const { canUpdate, isLoading: isLoadingPermissions } = useMediaLibraryPermissions();
+    const { selectedIds, selectedFolderIds, clear } = useAssetSelection();
+    const { currentFolderId } = useFolderNavigation();
+    const [isMoveOpen, setIsMoveOpen] = useState(false);
+    const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+    const count = selectedIds.size + selectedFolderIds.size;
+    const isBusy = isMoveOpen || isDeleteOpen;
+    // `canUpdate` is `false` until the RBAC check settles. Reading it before then
+    // would hide the actions on first render, or close a menu before it paints.
+    const hasActions = isLoadingPermissions || canUpdate;
+    const moveItems = useMemo(()=>buildDragSetFromSelection(selectedIds, selectedFolderIds, locations, currentFolderId), [
+        selectedIds,
+        selectedFolderIds,
+        locations,
+        currentFolderId
+    ]);
+    const items = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Menu.Label, {
+                children: /*#__PURE__*/ jsx(Typography, {
+                    variant: "sigma",
+                    textColor: "neutral600",
+                    children: formatMessage({
+                        id: getTranslationKey('list.bulk-actions.selected-count'),
+                        defaultMessage: '{count, plural, =1 {# item selected} other {# items selected}}'
+                    }, {
+                        count
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Menu.Separator, {}),
+            /*#__PURE__*/ jsx(Menu.Item, {
+                startIcon: /*#__PURE__*/ jsx(ArrowRight, {}),
+                onSelect: ()=>setIsMoveOpen(true),
+                children: formatMessage({
+                    id: getTranslationKey('list.bulk-actions.move'),
+                    defaultMessage: 'Move'
+                })
+            }),
+            /*#__PURE__*/ jsx(Menu.Item, {
+                startIcon: /*#__PURE__*/ jsx(Trash, {}),
+                variant: "danger",
+                onSelect: ()=>setIsDeleteOpen(true),
+                children: formatMessage({
+                    id: getTranslationKey('list.bulk-actions.delete'),
+                    defaultMessage: 'Delete'
+                })
+            })
+        ]
+    });
+    const dialogs = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            isMoveOpen && /*#__PURE__*/ jsx(BulkMoveDialog, {
+                open: true,
+                onClose: ()=>setIsMoveOpen(false),
+                items: moveItems,
+                onSuccess: clear
+            }),
+            isDeleteOpen && /*#__PURE__*/ jsx(DeleteItemsDialog, {
+                open: true,
+                onClose: ()=>setIsDeleteOpen(false),
+                target: {
+                    fileIds: Array.from(selectedIds),
+                    folderIds: Array.from(selectedFolderIds)
+                },
+                onSuccess: clear
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: children({
+            count,
+            hasActions,
+            items,
+            dialogs,
+            isBusy
+        })
+    });
+};
+
+export { SelectionActions };
+//# sourceMappingURL=SelectionActions.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionActions.mjs","sources":["../../../../../admin/src/pages/Assets/components/SelectionActions.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from 'react';\n\nimport { Menu, Typography } from '@strapi/design-system';\nimport { ArrowRight, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions';\nimport { buildDragSetFromSelection } from '../../../utils/buildDragSetFromSelection';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useAssetSelection } from '../hooks/useAssetSelection';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\n\nimport { BulkMoveDialog } from './BulkMoveDialog';\nimport { DeleteItemsDialog } from './DeleteItemsDialog';\n\nimport type { ItemLocations } from '../../../utils/itemLocations';\n\ninterface SelectionActionsRender {\n  /** How many items the actions would act on. Zero means nothing is selected. */\n  count: number;\n  /**\n   * Whether there is anything to offer. False for a role that can read but not\n   * update; true while the RBAC check is still settling, so a menu built on it\n   * does not flash empty.\n   */\n  hasActions: boolean;\n  /** The count label, a separator, then Move and Delete. */\n  items: ReactNode;\n  /** Rendered outside `Menu.Root` — a dialog has to outlive the menu that opened it. */\n  dialogs: ReactNode;\n  /** True while a dialog is open, for callers that unmount once nothing is on screen. */\n  isBusy: boolean;\n}\n\ninterface SelectionActionsProps {\n  /**\n   * Real location of every loaded row, so the move dialog validates each\n   * selected item against its own parent — same input the bulk bar takes.\n   */\n  locations: ItemLocations;\n  children: (actions: SelectionActionsRender) => ReactNode;\n}\n\n/**\n * The actions that apply to the current selection — move and delete — with no\n * opinion about which menu shows them.\n *\n * Two menus offer them: the one a right-click on a selected item opens, and the\n * background menu, which prepends them to its own creation actions whenever\n * something is selected. Sharing the items keeps the two from drifting, and\n * keeps one copy of the dialogs they open.\n *\n * Only move and delete: the rest of an item's menu has no meaning for a set —\n * there is no one link to copy and no one file to replace.\n */\nexport const SelectionActions = ({ locations, children }: SelectionActionsProps) => {\n  const { formatMessage } = useIntl();\n  // Move and delete are both `assets.update` server-side — one flag gates both.\n  const { canUpdate, isLoading: isLoadingPermissions } = useMediaLibraryPermissions();\n  const { selectedIds, selectedFolderIds, clear } = useAssetSelection();\n  const { currentFolderId } = useFolderNavigation();\n  const [isMoveOpen, setIsMoveOpen] = useState(false);\n  const [isDeleteOpen, setIsDeleteOpen] = useState(false);\n\n  const count = selectedIds.size + selectedFolderIds.size;\n  const isBusy = isMoveOpen || isDeleteOpen;\n  // `canUpdate` is `false` until the RBAC check settles. Reading it before then\n  // would hide the actions on first render, or close a menu before it paints.\n  const hasActions = isLoadingPermissions || canUpdate;\n\n  const moveItems = useMemo(\n    () => buildDragSetFromSelection(selectedIds, selectedFolderIds, locations, currentFolderId),\n    [selectedIds, selectedFolderIds, locations, currentFolderId]\n  );\n\n  const items = (\n    <>\n      {/* A label rather than a `Menu.Item`: it states what the actions below\n          will act on and is not itself selectable. */}\n      <Menu.Label>\n        <Typography variant=\"sigma\" textColor=\"neutral600\">\n          {formatMessage(\n            {\n              id: getTranslationKey('list.bulk-actions.selected-count'),\n              defaultMessage: '{count, plural, =1 {# item selected} other {# items selected}}',\n            },\n            { count }\n          )}\n        </Typography>\n      </Menu.Label>\n      <Menu.Separator />\n      <Menu.Item startIcon={<ArrowRight />} onSelect={() => setIsMoveOpen(true)}>\n        {formatMessage({\n          id: getTranslationKey('list.bulk-actions.move'),\n          defaultMessage: 'Move',\n        })}\n      </Menu.Item>\n      <Menu.Item startIcon={<Trash />} variant=\"danger\" onSelect={() => setIsDeleteOpen(true)}>\n        {formatMessage({\n          id: getTranslationKey('list.bulk-actions.delete'),\n          defaultMessage: 'Delete',\n        })}\n      </Menu.Item>\n    </>\n  );\n\n  const dialogs = (\n    <>\n      {isMoveOpen && (\n        <BulkMoveDialog\n          open\n          onClose={() => setIsMoveOpen(false)}\n          items={moveItems}\n          onSuccess={clear}\n        />\n      )}\n      {isDeleteOpen && (\n        <DeleteItemsDialog\n          open\n          onClose={() => setIsDeleteOpen(false)}\n          target={{\n            fileIds: Array.from(selectedIds),\n            folderIds: Array.from(selectedFolderIds),\n          }}\n          onSuccess={clear}\n        />\n      )}\n    </>\n  );\n\n  return <>{children({ count, hasActions, items, dialogs, isBusy })}</>;\n};\n"],"names":["SelectionActions","locations","children","formatMessage","useIntl","canUpdate","isLoading","isLoadingPermissions","useMediaLibraryPermissions","selectedIds","selectedFolderIds","clear","useAssetSelection","currentFolderId","useFolderNavigation","isMoveOpen","setIsMoveOpen","useState","isDeleteOpen","setIsDeleteOpen","count","size","isBusy","hasActions","moveItems","useMemo","buildDragSetFromSelection","items","_jsxs","_Fragment","_jsx","Menu","Label","Typography","variant","textColor","id","getTranslationKey","defaultMessage","Separator","Item","startIcon","ArrowRight","onSelect","Trash","dialogs","BulkMoveDialog","open","onClose","onSuccess","DeleteItemsDialog","target","fileIds","Array","from","folderIds"],"mappings":"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"}