@strapi/upload 5.55.1 → 5.57.0

package/dist/admin/pages/Assets/components/FolderTree/FolderTreeRowMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderTreeRowMenu.js","sources":["../../../../../../admin/src/pages/Assets/components/FolderTree/FolderTreeRowMenu.tsx"],"sourcesContent":["import { IconButton, Menu } from '@strapi/design-system';\nimport { More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../../../utils/translations';\nimport { ActionsMenuContent } from '../ActionsMenuContent';\nimport { CursorAnchoredMenu } from '../CursorAnchoredMenu';\nimport { FolderActions } from '../FolderActions';\n\nimport type { CursorPosition } from '../CursorAnchoredMenu';\n\n/**\n * Hidden until the row is hovered or something inside it has focus, so the tree\n * stays quiet at rest. Wraps the trigger rather than styling it: `Menu.Trigger`\n * types its `tag` against the design system's own component, which a styled\n * wrapper of it no longer satisfies.\n *\n * `:focus-within` keeps it on screen while its own menu is open, since the\n * trigger holds focus for as long as the menu does.\n */\nconst MenuSlot = styled.div`\n  opacity: 0;\n\n  li:hover > div > &,\n  &:focus-within,\n  &:has([data-state='open']) {\n    opacity: 1;\n  }\n\n  // Square, matching the chevron at the other end of the row. Descendant rather\n  // than child: Menu.Root renders no element today, but that is Radix's\n  // business, not something to depend on.\n  && button {\n    width: 2.4rem;\n    height: 2.4rem;\n    min-width: 2.4rem;\n    min-height: 2.4rem;\n    padding: 0.4rem;\n  }\n\n  // The row paints its own hover, so the trigger needs a stronger one of its own\n  // to read as a separate target sitting on top of it.\n  && button:hover,\n  && button[data-state='open'] {\n    background: ${({ theme }) => theme.colors.primary200};\n  }\n`;\n\ninterface FolderTreeRowMenuProps {\n  folder: { id: number; name: string };\n  /** Its parent's id, so a move validates against where it actually lives. */\n  parentId: number | null;\n  /** Set by the row's right-click; null when the menu is closed. */\n  menuPosition: CursorPosition | null;\n  returnFocusTo: HTMLElement | null;\n  onCloseMenu: () => void;\n}\n\n/**\n * Folder actions on a tree row, from either the `•••` or a right-click.\n *\n * Both render the same `FolderActions`, minus Rename — renaming is a list\n * affordance and the tree does not offer it. Unlike the list, a tree row has no\n * selection, so a right-click always means the row it landed on.\n *\n * One `FolderActions` serves both triggers here rather than two instances, so\n * the dialogs it owns are not duplicated per row.\n */\nexport const FolderTreeRowMenu = ({\n  folder,\n  parentId,\n  menuPosition,\n  returnFocusTo,\n  onCloseMenu,\n}: FolderTreeRowMenuProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <FolderActions\n      folder={folder}\n      dragData={{ kind: 'folder', id: folder.id, name: folder.name, parentId }}\n      showRename={false}\n    >\n      {({ items, dialogs }) => (\n        <>\n          <MenuSlot>\n            <Menu.Root modal={false}>\n              <Menu.Trigger\n                tag={IconButton}\n                icon={<More />}\n                variant=\"ghost\"\n                size=\"S\"\n                // The row itself is a button; keep the trigger's click off it.\n                onClick={(event: React.MouseEvent) => event.stopPropagation()}\n                label={formatMessage(\n                  {\n                    id: getTranslationKey('sidebar.tree.actions'),\n                    defaultMessage: 'Actions for {name}',\n                  },\n                  { name: folder.name }\n                )}\n              />\n              <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n                {items}\n              </ActionsMenuContent>\n            </Menu.Root>\n          </MenuSlot>\n\n          {menuPosition !== null && (\n            <CursorAnchoredMenu\n              position={menuPosition}\n              open\n              label={formatMessage({\n                id: getTranslationKey('list.folder.context-menu.label'),\n                defaultMessage: 'Folder actions',\n              })}\n              returnFocusTo={returnFocusTo}\n              onClose={onCloseMenu}\n            >\n              {items}\n            </CursorAnchoredMenu>\n          )}\n\n          {dialogs}\n        </>\n      )}\n    </FolderActions>\n  );\n};\n"],"names":["MenuSlot","styled","div","theme","colors","primary200","FolderTreeRowMenu","folder","parentId","menuPosition","returnFocusTo","onCloseMenu","formatMessage","useIntl","_jsx","FolderActions","dragData","kind","id","name","showRename","items","dialogs","_jsxs","_Fragment","Menu","Root","modal","Trigger","tag","IconButton","icon","More","variant","size","onClick","event","stopPropagation","label","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","CursorAnchoredMenu","position","open","onClose"],"mappings":";;;;;;;;;;;;AAYA;;;;;;;;AAQC,IACD,MAAMA,QAAAA,GAAWC,uBAAAA,CAAOC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;gBAwBX,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;AAEzD,CAAC;AAYD;;;;;;;;;AASC,IACM,MAAMC,iBAAAA,GAAoB,CAAC,EAChCC,MAAM,EACNC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,WAAW,EACY,GAAA;IACvB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEC,cAAA,CAACC,2BAAAA,EAAAA;QACCR,MAAAA,EAAQA,MAAAA;QACRS,QAAAA,EAAU;YAAEC,IAAAA,EAAM,QAAA;AAAUC,YAAAA,EAAAA,EAAIX,OAAOW,EAAE;AAAEC,YAAAA,IAAAA,EAAMZ,OAAOY,IAAI;AAAEX,YAAAA;AAAS,SAAA;QACvEY,UAAAA,EAAY,KAAA;AAEX,QAAA,QAAA,EAAA,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAE,iBAClBC,eAAA,CAAAC,mBAAA,EAAA;;kCACEV,cAAA,CAACd,QAAAA,EAAAA;gDACCuB,eAAA,CAACE,kBAAKC,IAAI,EAAA;4BAACC,KAAAA,EAAO,KAAA;;AAChB,8CAAAb,cAAA,CAACW,kBAAKG,OAAO,EAAA;oCACXC,GAAAA,EAAKC,uBAAAA;AACLC,oCAAAA,IAAAA,gBAAMjB,cAAA,CAACkB,UAAAA,EAAAA,EAAAA,CAAAA;oCACPC,OAAAA,EAAQ,OAAA;oCACRC,IAAAA,EAAK,GAAA;;oCAELC,OAAAA,EAAS,CAACC,KAAAA,GAA4BA,KAAAA,CAAMC,eAAe,EAAA;AAC3DC,oCAAAA,KAAAA,EAAO1B,aAAAA,CACL;AACEM,wCAAAA,EAAAA,EAAIqB,8BAAAA,CAAkB,sBAAA,CAAA;wCACtBC,cAAAA,EAAgB;qCAClB,EACA;AAAErB,wCAAAA,IAAAA,EAAMZ,OAAOY;AAAK,qCAAA;;8CAGxBL,cAAA,CAAC2B,qCAAAA,EAAAA;oCAAmBC,gBAAAA,EAAiB,YAAA;oCAAaC,MAAAA,EAAQ,CAAA;oCAAGC,QAAAA,EAAS,OAAA;AACnEvB,oCAAAA,QAAAA,EAAAA;;;;;AAKNZ,oBAAAA,YAAAA,KAAiB,sBAChBK,cAAA,CAAC+B,qCAAAA,EAAAA;wBACCC,QAAAA,EAAUrC,YAAAA;wBACVsC,IAAI,EAAA,IAAA;AACJT,wBAAAA,KAAAA,EAAO1B,aAAAA,CAAc;AACnBM,4BAAAA,EAAAA,EAAIqB,8BAAAA,CAAkB,gCAAA,CAAA;4BACtBC,cAAAA,EAAgB;AAClB,yBAAA,CAAA;wBACA9B,aAAAA,EAAeA,aAAAA;wBACfsC,OAAAA,EAASrC,WAAAA;AAERU,wBAAAA,QAAAA,EAAAA;;AAIJC,oBAAAA;;;;AAKX;;;;"}

package/dist/admin/pages/Assets/components/FolderTree/FolderTreeRowMenu.mjs

@@ -0,0 +1,113 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Menu, IconButton } from '@strapi/design-system';
+import { More } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { getTranslationKey } from '../../../../utils/translations.mjs';
+import { ActionsMenuContent } from '../ActionsMenuContent.mjs';
+import { CursorAnchoredMenu } from '../CursorAnchoredMenu.mjs';
+import { FolderActions } from '../FolderActions.mjs';
+
+/**
+ * Hidden until the row is hovered or something inside it has focus, so the tree
+ * stays quiet at rest. Wraps the trigger rather than styling it: `Menu.Trigger`
+ * types its `tag` against the design system's own component, which a styled
+ * wrapper of it no longer satisfies.
+ *
+ * `:focus-within` keeps it on screen while its own menu is open, since the
+ * trigger holds focus for as long as the menu does.
+ */ const MenuSlot = styled.div`
+  opacity: 0;
+
+  li:hover > div > &,
+  &:focus-within,
+  &:has([data-state='open']) {
+    opacity: 1;
+  }
+
+  // Square, matching the chevron at the other end of the row. Descendant rather
+  // than child: Menu.Root renders no element today, but that is Radix's
+  // business, not something to depend on.
+  && button {
+    width: 2.4rem;
+    height: 2.4rem;
+    min-width: 2.4rem;
+    min-height: 2.4rem;
+    padding: 0.4rem;
+  }
+
+  // The row paints its own hover, so the trigger needs a stronger one of its own
+  // to read as a separate target sitting on top of it.
+  && button:hover,
+  && button[data-state='open'] {
+    background: ${({ theme })=>theme.colors.primary200};
+  }
+`;
+/**
+ * Folder actions on a tree row, from either the `•••` or a right-click.
+ *
+ * Both render the same `FolderActions`, minus Rename — renaming is a list
+ * affordance and the tree does not offer it. Unlike the list, a tree row has no
+ * selection, so a right-click always means the row it landed on.
+ *
+ * One `FolderActions` serves both triggers here rather than two instances, so
+ * the dialogs it owns are not duplicated per row.
+ */ const FolderTreeRowMenu = ({ folder, parentId, menuPosition, returnFocusTo, onCloseMenu })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(FolderActions, {
+        folder: folder,
+        dragData: {
+            kind: 'folder',
+            id: folder.id,
+            name: folder.name,
+            parentId
+        },
+        showRename: false,
+        children: ({ items, dialogs })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(MenuSlot, {
+                        children: /*#__PURE__*/ jsxs(Menu.Root, {
+                            modal: false,
+                            children: [
+                                /*#__PURE__*/ jsx(Menu.Trigger, {
+                                    tag: IconButton,
+                                    icon: /*#__PURE__*/ jsx(More, {}),
+                                    variant: "ghost",
+                                    size: "S",
+                                    // The row itself is a button; keep the trigger's click off it.
+                                    onClick: (event)=>event.stopPropagation(),
+                                    label: formatMessage({
+                                        id: getTranslationKey('sidebar.tree.actions'),
+                                        defaultMessage: 'Actions for {name}'
+                                    }, {
+                                        name: folder.name
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(ActionsMenuContent, {
+                                    popoverPlacement: "bottom-end",
+                                    zIndex: 2,
+                                    minWidth: "22rem",
+                                    children: items
+                                })
+                            ]
+                        })
+                    }),
+                    menuPosition !== null && /*#__PURE__*/ jsx(CursorAnchoredMenu, {
+                        position: menuPosition,
+                        open: true,
+                        label: formatMessage({
+                            id: getTranslationKey('list.folder.context-menu.label'),
+                            defaultMessage: 'Folder actions'
+                        }),
+                        returnFocusTo: returnFocusTo,
+                        onClose: onCloseMenu,
+                        children: items
+                    }),
+                    dialogs
+                ]
+            })
+    });
+};
+
+export { FolderTreeRowMenu };
+//# sourceMappingURL=FolderTreeRowMenu.mjs.map

package/dist/admin/pages/Assets/components/FolderTree/FolderTreeRowMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderTreeRowMenu.mjs","sources":["../../../../../../admin/src/pages/Assets/components/FolderTree/FolderTreeRowMenu.tsx"],"sourcesContent":["import { IconButton, Menu } from '@strapi/design-system';\nimport { More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../../../utils/translations';\nimport { ActionsMenuContent } from '../ActionsMenuContent';\nimport { CursorAnchoredMenu } from '../CursorAnchoredMenu';\nimport { FolderActions } from '../FolderActions';\n\nimport type { CursorPosition } from '../CursorAnchoredMenu';\n\n/**\n * Hidden until the row is hovered or something inside it has focus, so the tree\n * stays quiet at rest. Wraps the trigger rather than styling it: `Menu.Trigger`\n * types its `tag` against the design system's own component, which a styled\n * wrapper of it no longer satisfies.\n *\n * `:focus-within` keeps it on screen while its own menu is open, since the\n * trigger holds focus for as long as the menu does.\n */\nconst MenuSlot = styled.div`\n  opacity: 0;\n\n  li:hover > div > &,\n  &:focus-within,\n  &:has([data-state='open']) {\n    opacity: 1;\n  }\n\n  // Square, matching the chevron at the other end of the row. Descendant rather\n  // than child: Menu.Root renders no element today, but that is Radix's\n  // business, not something to depend on.\n  && button {\n    width: 2.4rem;\n    height: 2.4rem;\n    min-width: 2.4rem;\n    min-height: 2.4rem;\n    padding: 0.4rem;\n  }\n\n  // The row paints its own hover, so the trigger needs a stronger one of its own\n  // to read as a separate target sitting on top of it.\n  && button:hover,\n  && button[data-state='open'] {\n    background: ${({ theme }) => theme.colors.primary200};\n  }\n`;\n\ninterface FolderTreeRowMenuProps {\n  folder: { id: number; name: string };\n  /** Its parent's id, so a move validates against where it actually lives. */\n  parentId: number | null;\n  /** Set by the row's right-click; null when the menu is closed. */\n  menuPosition: CursorPosition | null;\n  returnFocusTo: HTMLElement | null;\n  onCloseMenu: () => void;\n}\n\n/**\n * Folder actions on a tree row, from either the `•••` or a right-click.\n *\n * Both render the same `FolderActions`, minus Rename — renaming is a list\n * affordance and the tree does not offer it. Unlike the list, a tree row has no\n * selection, so a right-click always means the row it landed on.\n *\n * One `FolderActions` serves both triggers here rather than two instances, so\n * the dialogs it owns are not duplicated per row.\n */\nexport const FolderTreeRowMenu = ({\n  folder,\n  parentId,\n  menuPosition,\n  returnFocusTo,\n  onCloseMenu,\n}: FolderTreeRowMenuProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <FolderActions\n      folder={folder}\n      dragData={{ kind: 'folder', id: folder.id, name: folder.name, parentId }}\n      showRename={false}\n    >\n      {({ items, dialogs }) => (\n        <>\n          <MenuSlot>\n            <Menu.Root modal={false}>\n              <Menu.Trigger\n                tag={IconButton}\n                icon={<More />}\n                variant=\"ghost\"\n                size=\"S\"\n                // The row itself is a button; keep the trigger's click off it.\n                onClick={(event: React.MouseEvent) => event.stopPropagation()}\n                label={formatMessage(\n                  {\n                    id: getTranslationKey('sidebar.tree.actions'),\n                    defaultMessage: 'Actions for {name}',\n                  },\n                  { name: folder.name }\n                )}\n              />\n              <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n                {items}\n              </ActionsMenuContent>\n            </Menu.Root>\n          </MenuSlot>\n\n          {menuPosition !== null && (\n            <CursorAnchoredMenu\n              position={menuPosition}\n              open\n              label={formatMessage({\n                id: getTranslationKey('list.folder.context-menu.label'),\n                defaultMessage: 'Folder actions',\n              })}\n              returnFocusTo={returnFocusTo}\n              onClose={onCloseMenu}\n            >\n              {items}\n            </CursorAnchoredMenu>\n          )}\n\n          {dialogs}\n        </>\n      )}\n    </FolderActions>\n  );\n};\n"],"names":["MenuSlot","styled","div","theme","colors","primary200","FolderTreeRowMenu","folder","parentId","menuPosition","returnFocusTo","onCloseMenu","formatMessage","useIntl","_jsx","FolderActions","dragData","kind","id","name","showRename","items","dialogs","_jsxs","_Fragment","Menu","Root","modal","Trigger","tag","IconButton","icon","More","variant","size","onClick","event","stopPropagation","label","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","CursorAnchoredMenu","position","open","onClose"],"mappings":";;;;;;;;;;AAYA;;;;;;;;AAQC,IACD,MAAMA,QAAAA,GAAWC,MAAAA,CAAOC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;gBAwBX,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;AAEzD,CAAC;AAYD;;;;;;;;;AASC,IACM,MAAMC,iBAAAA,GAAoB,CAAC,EAChCC,MAAM,EACNC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,WAAW,EACY,GAAA;IACvB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,GAAA,CAACC,aAAAA,EAAAA;QACCR,MAAAA,EAAQA,MAAAA;QACRS,QAAAA,EAAU;YAAEC,IAAAA,EAAM,QAAA;AAAUC,YAAAA,EAAAA,EAAIX,OAAOW,EAAE;AAAEC,YAAAA,IAAAA,EAAMZ,OAAOY,IAAI;AAAEX,YAAAA;AAAS,SAAA;QACvEY,UAAAA,EAAY,KAAA;AAEX,QAAA,QAAA,EAAA,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAE,iBAClBC,IAAA,CAAAC,QAAA,EAAA;;kCACEV,GAAA,CAACd,QAAAA,EAAAA;gDACCuB,IAAA,CAACE,KAAKC,IAAI,EAAA;4BAACC,KAAAA,EAAO,KAAA;;AAChB,8CAAAb,GAAA,CAACW,KAAKG,OAAO,EAAA;oCACXC,GAAAA,EAAKC,UAAAA;AACLC,oCAAAA,IAAAA,gBAAMjB,GAAA,CAACkB,IAAAA,EAAAA,EAAAA,CAAAA;oCACPC,OAAAA,EAAQ,OAAA;oCACRC,IAAAA,EAAK,GAAA;;oCAELC,OAAAA,EAAS,CAACC,KAAAA,GAA4BA,KAAAA,CAAMC,eAAe,EAAA;AAC3DC,oCAAAA,KAAAA,EAAO1B,aAAAA,CACL;AACEM,wCAAAA,EAAAA,EAAIqB,iBAAAA,CAAkB,sBAAA,CAAA;wCACtBC,cAAAA,EAAgB;qCAClB,EACA;AAAErB,wCAAAA,IAAAA,EAAMZ,OAAOY;AAAK,qCAAA;;8CAGxBL,GAAA,CAAC2B,kBAAAA,EAAAA;oCAAmBC,gBAAAA,EAAiB,YAAA;oCAAaC,MAAAA,EAAQ,CAAA;oCAAGC,QAAAA,EAAS,OAAA;AACnEvB,oCAAAA,QAAAA,EAAAA;;;;;AAKNZ,oBAAAA,YAAAA,KAAiB,sBAChBK,GAAA,CAAC+B,kBAAAA,EAAAA;wBACCC,QAAAA,EAAUrC,YAAAA;wBACVsC,IAAI,EAAA,IAAA;AACJT,wBAAAA,KAAAA,EAAO1B,aAAAA,CAAc;AACnBM,4BAAAA,EAAAA,EAAIqB,iBAAAA,CAAkB,gCAAA,CAAA;4BACtBC,cAAAA,EAAgB;AAClB,yBAAA,CAAA;wBACA9B,aAAAA,EAAeA,aAAAA;wBACfsC,OAAAA,EAASrC,WAAAA;AAERU,wBAAAA,QAAAA,EAAAA;;AAIJC,oBAAAA;;;;AAKX;;;;"}

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

@@ -0,0 +1,125 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useMediaLibraryPermissions = require('../../../hooks/useMediaLibraryPermissions.js');
+var useAssetSelection = require('../hooks/useAssetSelection.js');
+var AssetContextMenu = require('./AssetContextMenu.js');
+var FolderContextMenu = require('./FolderContextMenu.js');
+var SelectionContextMenu = require('./SelectionContextMenu.js');
+
+const ItemContextMenuContext = /*#__PURE__*/ React.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 = ()=>React.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.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.useMediaLibraryPermissions();
+    const [state, setState] = React.useState(null);
+    const nextId = React.useRef(0);
+    const openForItem = React.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 = React.useCallback((id)=>setState((prev)=>prev?.id === id ? null : prev), []);
+    const value = React.useMemo(()=>openForItem, [
+        openForItem
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(ItemContextMenuContext.Provider, {
+        value: value,
+        children: [
+            children,
+            state !== null && (state.payload === null ? /*#__PURE__*/ jsxRuntime.jsx(SelectionContextMenu.SelectionContextMenu, {
+                position: state.position,
+                returnFocusTo: state.returnFocusTo,
+                locations: locations,
+                onClose: ()=>close(state.id)
+            }, state.id) : state.payload.kind === 'asset' ? /*#__PURE__*/ jsxRuntime.jsx(AssetContextMenu.AssetContextMenu, {
+                asset: state.payload.asset,
+                dragData: state.payload.dragData,
+                permissions: permissions,
+                position: state.position,
+                returnFocusTo: state.returnFocusTo,
+                onClose: ()=>close(state.id)
+            }, state.id) : /*#__PURE__*/ jsxRuntime.jsx(FolderContextMenu.FolderContextMenu, {
+                folder: state.payload.folder,
+                dragData: state.payload.dragData,
+                position: state.position,
+                returnFocusTo: state.returnFocusTo,
+                onClose: ()=>close(state.id)
+            }, state.id))
+        ]
+    });
+};
+
+exports.ItemContextMenuProvider = ItemContextMenuProvider;
+exports.useItemContextMenuTrigger = useItemContextMenuTrigger;
+//# sourceMappingURL=ItemContextMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemContextMenu.js","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,mBAAAA,CAAkC,IAAA,CAAA;AAEjE;;;;AAIC,IACM,MAAMC,yBAAAA,GAA4B,IACvCC,iBAAWH,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,mCAAAA,EAAAA;;;;AAIjD,IAAA,MAAMb,WAAAA,GAAcc,qDAAAA,EAAAA;AACpB,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,CAA2B,IAAA,CAAA;AACrD,IAAA,MAAMC,SAASC,YAAAA,CAAO,CAAA,CAAA;AAEtB,IAAA,MAAMC,WAAAA,GAAcC,iBAAAA,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,iBAAAA,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,aAAAA,CAAQ,IAAMpB,WAAAA,EAAa;AAACA,QAAAA;AAAY,KAAA,CAAA;IAEtD,qBACEqB,eAAA,CAAC9C,uBAAuB+C,QAAQ,EAAA;QAACH,KAAAA,EAAOA,KAAAA;;AACrC9B,YAAAA,QAAAA;AACAM,YAAAA,KAAAA,KAAU,SACRA,KAAAA,CAAMb,OAAO,KAAK,qBACjByC,cAAA,CAACC,yCAAAA,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,cAAA,CAACG,iCAAAA,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,cAAA,CAACM,mCAAAA,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/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":"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"}

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