@strapi/upload 5.56.0 → 5.57.0

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

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactIntl = require('react-intl');
+var translations = require('../../../utils/translations.js');
+var CursorAnchoredMenu = require('./CursorAnchoredMenu.js');
+var FolderActions = require('./FolderActions.js');
+
+/**
+ * The right-click twin of `FolderActionsMenu`: same actions, opened at the
+ * cursor. Mirrors `AssetContextMenu`, including keeping "the menu is shut" and
+ * "this is unmounted" as separate things — a dialog opened from an item is
+ * rendered here and would go with an early unmount.
+ */ const FolderContextMenu = ({ folder, dragData, showRename, position, returnFocusTo, onClose })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const [isMenuOpen, setIsMenuOpen] = React.useState(true);
+    return /*#__PURE__*/ jsxRuntime.jsx(FolderActions.FolderActions, {
+        folder: folder,
+        dragData: dragData,
+        showRename: showRename,
+        children: ({ items, dialogs, isBusy })=>/*#__PURE__*/ jsxRuntime.jsx(FolderContextMenuBody, {
+                isBusy: isBusy,
+                isMenuOpen: isMenuOpen,
+                onMenuClose: ()=>setIsMenuOpen(false),
+                onClose: onClose,
+                position: position,
+                returnFocusTo: returnFocusTo,
+                label: formatMessage({
+                    id: translations.getTranslationKey('list.folder.context-menu.label'),
+                    defaultMessage: 'Folder actions'
+                }),
+                items: items,
+                dialogs: dialogs
+            })
+    });
+};
+/**
+ * Split out because the "nothing left on screen" effect can't run inside the
+ * render prop above — hooks don't belong in a callback.
+ */ const FolderContextMenuBody = ({ isBusy, isMenuOpen, onMenuClose, onClose, position, returnFocusTo, label, items, dialogs })=>{
+    React.useEffect(()=>{
+        if (!isMenuOpen && !isBusy) {
+            onClose();
+        }
+    }, [
+        isMenuOpen,
+        isBusy,
+        onClose
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(CursorAnchoredMenu.CursorAnchoredMenu, {
+                position: position,
+                open: isMenuOpen,
+                label: label,
+                returnFocusTo: returnFocusTo,
+                onClose: onMenuClose,
+                children: items
+            }),
+            dialogs
+        ]
+    });
+};
+
+exports.FolderContextMenu = FolderContextMenu;
+//# sourceMappingURL=FolderContextMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderContextMenu.js","sources":["../../../../../admin/src/pages/Assets/components/FolderContextMenu.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from 'react';\n\nimport { useIntl } from 'react-intl';\n\nimport { getTranslationKey } from '../../../utils/translations';\n\nimport { CursorAnchoredMenu, type CursorPosition } from './CursorAnchoredMenu';\nimport { FolderActions } from './FolderActions';\n\nimport type { Folder } from '../../../../../shared/contracts/folders';\nimport type { DragFolderData } from '../../../types/dnd';\n\ninterface FolderContextMenuProps {\n  folder: Pick<Folder, 'id' | 'name'>;\n  dragData: DragFolderData;\n  /** Passed through — the folder tree offers the menu without Rename. */\n  showRename?: boolean;\n  position: CursorPosition;\n  returnFocusTo: HTMLElement | null;\n  /** Mounted only while it has something on screen, so the parent drops it on this. */\n  onClose: () => void;\n}\n\n/**\n * The right-click twin of `FolderActionsMenu`: same actions, opened at the\n * cursor. Mirrors `AssetContextMenu`, including keeping \"the menu is shut\" and\n * \"this is unmounted\" as separate things — a dialog opened from an item is\n * rendered here and would go with an early unmount.\n */\nexport const FolderContextMenu = ({\n  folder,\n  dragData,\n  showRename,\n  position,\n  returnFocusTo,\n  onClose,\n}: FolderContextMenuProps) => {\n  const { formatMessage } = useIntl();\n  const [isMenuOpen, setIsMenuOpen] = useState(true);\n\n  return (\n    <FolderActions folder={folder} dragData={dragData} showRename={showRename}>\n      {({ items, dialogs, isBusy }) => (\n        <FolderContextMenuBody\n          isBusy={isBusy}\n          isMenuOpen={isMenuOpen}\n          onMenuClose={() => setIsMenuOpen(false)}\n          onClose={onClose}\n          position={position}\n          returnFocusTo={returnFocusTo}\n          label={formatMessage({\n            id: getTranslationKey('list.folder.context-menu.label'),\n            defaultMessage: 'Folder actions',\n          })}\n          items={items}\n          dialogs={dialogs}\n        />\n      )}\n    </FolderActions>\n  );\n};\n\ninterface FolderContextMenuBodyProps {\n  isBusy: boolean;\n  isMenuOpen: boolean;\n  onMenuClose: () => void;\n  onClose: () => void;\n  position: CursorPosition;\n  returnFocusTo: HTMLElement | null;\n  label: string;\n  items: ReactNode;\n  dialogs: ReactNode;\n}\n\n/**\n * Split out because the \"nothing left on screen\" effect can't run inside the\n * render prop above — hooks don't belong in a callback.\n */\nconst FolderContextMenuBody = ({\n  isBusy,\n  isMenuOpen,\n  onMenuClose,\n  onClose,\n  position,\n  returnFocusTo,\n  label,\n  items,\n  dialogs,\n}: FolderContextMenuBodyProps) => {\n  useEffect(() => {\n    if (!isMenuOpen && !isBusy) {\n      onClose();\n    }\n  }, [isMenuOpen, isBusy, onClose]);\n\n  return (\n    <>\n      <CursorAnchoredMenu\n        position={position}\n        open={isMenuOpen}\n        label={label}\n        returnFocusTo={returnFocusTo}\n        onClose={onMenuClose}\n      >\n        {items}\n      </CursorAnchoredMenu>\n      {dialogs}\n    </>\n  );\n};\n"],"names":["FolderContextMenu","folder","dragData","showRename","position","returnFocusTo","onClose","formatMessage","useIntl","isMenuOpen","setIsMenuOpen","useState","_jsx","FolderActions","items","dialogs","isBusy","FolderContextMenuBody","onMenuClose","label","id","getTranslationKey","defaultMessage","useEffect","_jsxs","_Fragment","CursorAnchoredMenu","open"],"mappings":";;;;;;;;;AAuBA;;;;;AAKC,IACM,MAAMA,iBAAAA,GAAoB,CAAC,EAChCC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,aAAa,EACbC,OAAO,EACgB,GAAA;IACvB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,cAAAA,CAAS,IAAA,CAAA;AAE7C,IAAA,qBACEC,cAAA,CAACC,2BAAAA,EAAAA;QAAcZ,MAAAA,EAAQA,MAAAA;QAAQC,QAAAA,EAAUA,QAAAA;QAAUC,UAAAA,EAAYA,UAAAA;kBAC5D,CAAC,EAAEW,KAAK,EAAEC,OAAO,EAAEC,MAAM,EAAE,iBAC1BJ,cAAA,CAACK,qBAAAA,EAAAA;gBACCD,MAAAA,EAAQA,MAAAA;gBACRP,UAAAA,EAAYA,UAAAA;AACZS,gBAAAA,WAAAA,EAAa,IAAMR,aAAAA,CAAc,KAAA,CAAA;gBACjCJ,OAAAA,EAASA,OAAAA;gBACTF,QAAAA,EAAUA,QAAAA;gBACVC,aAAAA,EAAeA,aAAAA;AACfc,gBAAAA,KAAAA,EAAOZ,aAAAA,CAAc;AACnBa,oBAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,gCAAA,CAAA;oBACtBC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;gBACAR,KAAAA,EAAOA,KAAAA;gBACPC,OAAAA,EAASA;;;AAKnB;AAcA;;;IAIA,MAAME,wBAAwB,CAAC,EAC7BD,MAAM,EACNP,UAAU,EACVS,WAAW,EACXZ,OAAO,EACPF,QAAQ,EACRC,aAAa,EACbc,KAAK,EACLL,KAAK,EACLC,OAAO,EACoB,GAAA;IAC3BQ,eAAAA,CAAU,IAAA;QACR,IAAI,CAACd,UAAAA,IAAc,CAACO,MAAAA,EAAQ;AAC1BV,YAAAA,OAAAA,EAAAA;AACF,QAAA;IACF,CAAA,EAAG;AAACG,QAAAA,UAAAA;AAAYO,QAAAA,MAAAA;AAAQV,QAAAA;AAAQ,KAAA,CAAA;IAEhC,qBACEkB,eAAA,CAAAC,mBAAA,EAAA;;0BACEb,cAAA,CAACc,qCAAAA,EAAAA;gBACCtB,QAAAA,EAAUA,QAAAA;gBACVuB,IAAAA,EAAMlB,UAAAA;gBACNU,KAAAA,EAAOA,KAAAA;gBACPd,aAAAA,EAAeA,aAAAA;gBACfC,OAAAA,EAASY,WAAAA;AAERJ,gBAAAA,QAAAA,EAAAA;;AAEFC,YAAAA;;;AAGP,CAAA;;;;"}

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

@@ -0,0 +1,65 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { getTranslationKey } from '../../../utils/translations.mjs';
+import { CursorAnchoredMenu } from './CursorAnchoredMenu.mjs';
+import { FolderActions } from './FolderActions.mjs';
+
+/**
+ * The right-click twin of `FolderActionsMenu`: same actions, opened at the
+ * cursor. Mirrors `AssetContextMenu`, including keeping "the menu is shut" and
+ * "this is unmounted" as separate things — a dialog opened from an item is
+ * rendered here and would go with an early unmount.
+ */ const FolderContextMenu = ({ folder, dragData, showRename, position, returnFocusTo, onClose })=>{
+    const { formatMessage } = useIntl();
+    const [isMenuOpen, setIsMenuOpen] = useState(true);
+    return /*#__PURE__*/ jsx(FolderActions, {
+        folder: folder,
+        dragData: dragData,
+        showRename: showRename,
+        children: ({ items, dialogs, isBusy })=>/*#__PURE__*/ jsx(FolderContextMenuBody, {
+                isBusy: isBusy,
+                isMenuOpen: isMenuOpen,
+                onMenuClose: ()=>setIsMenuOpen(false),
+                onClose: onClose,
+                position: position,
+                returnFocusTo: returnFocusTo,
+                label: formatMessage({
+                    id: getTranslationKey('list.folder.context-menu.label'),
+                    defaultMessage: 'Folder actions'
+                }),
+                items: items,
+                dialogs: dialogs
+            })
+    });
+};
+/**
+ * Split out because the "nothing left on screen" effect can't run inside the
+ * render prop above — hooks don't belong in a callback.
+ */ const FolderContextMenuBody = ({ isBusy, isMenuOpen, onMenuClose, onClose, position, returnFocusTo, label, items, dialogs })=>{
+    useEffect(()=>{
+        if (!isMenuOpen && !isBusy) {
+            onClose();
+        }
+    }, [
+        isMenuOpen,
+        isBusy,
+        onClose
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(CursorAnchoredMenu, {
+                position: position,
+                open: isMenuOpen,
+                label: label,
+                returnFocusTo: returnFocusTo,
+                onClose: onMenuClose,
+                children: items
+            }),
+            dialogs
+        ]
+    });
+};
+
+export { FolderContextMenu };
+//# sourceMappingURL=FolderContextMenu.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderContextMenu.mjs","sources":["../../../../../admin/src/pages/Assets/components/FolderContextMenu.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from 'react';\n\nimport { useIntl } from 'react-intl';\n\nimport { getTranslationKey } from '../../../utils/translations';\n\nimport { CursorAnchoredMenu, type CursorPosition } from './CursorAnchoredMenu';\nimport { FolderActions } from './FolderActions';\n\nimport type { Folder } from '../../../../../shared/contracts/folders';\nimport type { DragFolderData } from '../../../types/dnd';\n\ninterface FolderContextMenuProps {\n  folder: Pick<Folder, 'id' | 'name'>;\n  dragData: DragFolderData;\n  /** Passed through — the folder tree offers the menu without Rename. */\n  showRename?: boolean;\n  position: CursorPosition;\n  returnFocusTo: HTMLElement | null;\n  /** Mounted only while it has something on screen, so the parent drops it on this. */\n  onClose: () => void;\n}\n\n/**\n * The right-click twin of `FolderActionsMenu`: same actions, opened at the\n * cursor. Mirrors `AssetContextMenu`, including keeping \"the menu is shut\" and\n * \"this is unmounted\" as separate things — a dialog opened from an item is\n * rendered here and would go with an early unmount.\n */\nexport const FolderContextMenu = ({\n  folder,\n  dragData,\n  showRename,\n  position,\n  returnFocusTo,\n  onClose,\n}: FolderContextMenuProps) => {\n  const { formatMessage } = useIntl();\n  const [isMenuOpen, setIsMenuOpen] = useState(true);\n\n  return (\n    <FolderActions folder={folder} dragData={dragData} showRename={showRename}>\n      {({ items, dialogs, isBusy }) => (\n        <FolderContextMenuBody\n          isBusy={isBusy}\n          isMenuOpen={isMenuOpen}\n          onMenuClose={() => setIsMenuOpen(false)}\n          onClose={onClose}\n          position={position}\n          returnFocusTo={returnFocusTo}\n          label={formatMessage({\n            id: getTranslationKey('list.folder.context-menu.label'),\n            defaultMessage: 'Folder actions',\n          })}\n          items={items}\n          dialogs={dialogs}\n        />\n      )}\n    </FolderActions>\n  );\n};\n\ninterface FolderContextMenuBodyProps {\n  isBusy: boolean;\n  isMenuOpen: boolean;\n  onMenuClose: () => void;\n  onClose: () => void;\n  position: CursorPosition;\n  returnFocusTo: HTMLElement | null;\n  label: string;\n  items: ReactNode;\n  dialogs: ReactNode;\n}\n\n/**\n * Split out because the \"nothing left on screen\" effect can't run inside the\n * render prop above — hooks don't belong in a callback.\n */\nconst FolderContextMenuBody = ({\n  isBusy,\n  isMenuOpen,\n  onMenuClose,\n  onClose,\n  position,\n  returnFocusTo,\n  label,\n  items,\n  dialogs,\n}: FolderContextMenuBodyProps) => {\n  useEffect(() => {\n    if (!isMenuOpen && !isBusy) {\n      onClose();\n    }\n  }, [isMenuOpen, isBusy, onClose]);\n\n  return (\n    <>\n      <CursorAnchoredMenu\n        position={position}\n        open={isMenuOpen}\n        label={label}\n        returnFocusTo={returnFocusTo}\n        onClose={onMenuClose}\n      >\n        {items}\n      </CursorAnchoredMenu>\n      {dialogs}\n    </>\n  );\n};\n"],"names":["FolderContextMenu","folder","dragData","showRename","position","returnFocusTo","onClose","formatMessage","useIntl","isMenuOpen","setIsMenuOpen","useState","_jsx","FolderActions","items","dialogs","isBusy","FolderContextMenuBody","onMenuClose","label","id","getTranslationKey","defaultMessage","useEffect","_jsxs","_Fragment","CursorAnchoredMenu","open"],"mappings":";;;;;;;AAuBA;;;;;AAKC,IACM,MAAMA,iBAAAA,GAAoB,CAAC,EAChCC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,aAAa,EACbC,OAAO,EACgB,GAAA;IACvB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,QAAAA,CAAS,IAAA,CAAA;AAE7C,IAAA,qBACEC,GAAA,CAACC,aAAAA,EAAAA;QAAcZ,MAAAA,EAAQA,MAAAA;QAAQC,QAAAA,EAAUA,QAAAA;QAAUC,UAAAA,EAAYA,UAAAA;kBAC5D,CAAC,EAAEW,KAAK,EAAEC,OAAO,EAAEC,MAAM,EAAE,iBAC1BJ,GAAA,CAACK,qBAAAA,EAAAA;gBACCD,MAAAA,EAAQA,MAAAA;gBACRP,UAAAA,EAAYA,UAAAA;AACZS,gBAAAA,WAAAA,EAAa,IAAMR,aAAAA,CAAc,KAAA,CAAA;gBACjCJ,OAAAA,EAASA,OAAAA;gBACTF,QAAAA,EAAUA,QAAAA;gBACVC,aAAAA,EAAeA,aAAAA;AACfc,gBAAAA,KAAAA,EAAOZ,aAAAA,CAAc;AACnBa,oBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,gCAAA,CAAA;oBACtBC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;gBACAR,KAAAA,EAAOA,KAAAA;gBACPC,OAAAA,EAASA;;;AAKnB;AAcA;;;IAIA,MAAME,wBAAwB,CAAC,EAC7BD,MAAM,EACNP,UAAU,EACVS,WAAW,EACXZ,OAAO,EACPF,QAAQ,EACRC,aAAa,EACbc,KAAK,EACLL,KAAK,EACLC,OAAO,EACoB,GAAA;IAC3BQ,SAAAA,CAAU,IAAA;QACR,IAAI,CAACd,UAAAA,IAAc,CAACO,MAAAA,EAAQ;AAC1BV,YAAAA,OAAAA,EAAAA;AACF,QAAA;IACF,CAAA,EAAG;AAACG,QAAAA,UAAAA;AAAYO,QAAAA,MAAAA;AAAQV,QAAAA;AAAQ,KAAA,CAAA;IAEhC,qBACEkB,IAAA,CAAAC,QAAA,EAAA;;0BACEb,GAAA,CAACc,kBAAAA,EAAAA;gBACCtB,QAAAA,EAAUA,QAAAA;gBACVuB,IAAAA,EAAMlB,UAAAA;gBACNU,KAAAA,EAAOA,KAAAA;gBACPd,aAAAA,EAAeA,aAAAA;gBACfC,OAAAA,EAASY,WAAAA;AAERJ,gBAAAA,QAAAA,EAAAA;;AAEFC,YAAAA;;;AAGP,CAAA;;;;"}

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

@@ -9,9 +9,11 @@ var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var TruncatedText = require('../../../../components/TruncatedText.js');
 var folders = require('../../../../services/folders.js');
+var isEventFromWithin = require('../../../../utils/isEventFromWithin.js');
 var translations = require('../../../../utils/translations.js');
 var AssetsDndProvider = require('../Dnd/AssetsDndProvider.js');
 var useFolderTreeDroppable = require('../Dnd/useFolderTreeDroppable.js');
+var FolderTreeRowMenu = require('./FolderTreeRowMenu.js');
 var useSpringLoadedExpand = require('./useSpringLoadedExpand.js');
 
 /* -------------------------------------------------------------------------------------------------
@@ -19,17 +21,19 @@ var useSpringLoadedExpand = require('./useSpringLoadedExpand.js');
  * -----------------------------------------------------------------------------------------------*/ const RowButton = styledComponents.styled.button`
   display: flex;
   align-items: center;
-  gap: ${({ theme })=>theme.spaces[2]};
+  // Matches the row's own gap, so Home — the one row whose icon sits inside
+  // this button rather than beside it — puts its label on the same line as a
+  // folder's.
+  gap: ${({ theme })=>theme.spaces[1]};
   width: 100%;
   min-height: 3.2rem;
-  padding: ${({ theme })=>`${theme.spaces[1]} ${theme.spaces[2]}`};
+  // No padding of its own: the row owns the inset, so the label lines up with
+  // the icon boxes instead of being pushed in by a second layer of spacing.
+  padding: 0;
   border: 0;
-  background: ${({ $isActive, $isValidDropTarget, theme })=>{
-    if ($isValidDropTarget) {
-        return theme.colors.primary100;
-    }
-    return $isActive ? theme.colors.primary100 : 'transparent';
-}};
+  // The surface — hover, active, drop target — is painted by the row behind
+  // this, so it spans the chevron and the actions menu too, not just the label.
+  background: transparent;
   color: ${({ $isActive, theme })=>$isActive ? theme.colors.primary700 : theme.colors.neutral800};
   border-radius: ${({ theme })=>theme.borderRadius};
   cursor: ${({ $isMovePending, $isInvalidDropCursor })=>{
@@ -47,15 +51,6 @@ var useSpringLoadedExpand = require('./useSpringLoadedExpand.js');
       outline-offset: -1px;
     `}
 
-  &:hover {
-    background: ${({ $isActive, $isValidDropTarget, theme })=>{
-    if ($isValidDropTarget) {
-        return theme.colors.primary100;
-    }
-    return $isActive ? theme.colors.primary100 : theme.colors.neutral100;
-}};
-  }
-
   &:focus-visible {
     outline: 2px solid ${({ theme })=>theme.colors.primary600};
     outline-offset: -2px;
@@ -70,11 +65,22 @@ const TreeRow = styledComponents.styled(designSystem.Flex)`
 }};
   pointer-events: ${({ $isMovePending })=>$isMovePending ? 'none' : 'auto'};
   border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ $isActive, theme })=>$isActive ? theme.colors.primary100 : 'transparent'};
+
+  // The whole row lights up, so pointing anywhere along it — chevron, label or
+  // the actions trigger — reads as one target.
+  &:hover {
+    background: ${({ $isActive, theme })=>$isActive ? theme.colors.primary100 : theme.colors.neutral100};
+  }
 
   ${({ $isValidDropTarget, theme })=>$isValidDropTarget && styledComponents.css`
       background: ${theme.colors.primary100};
       outline: 1px dashed ${theme.colors.primary600};
       outline-offset: -1px;
+
+      &:hover {
+        background: ${theme.colors.primary100};
+      }
     `}
 `;
 /* -------------------------------------------------------------------------------------------------
@@ -178,12 +184,46 @@ const useExpandedFolders = (folderStructure, currentFolderId)=>{
 /* -------------------------------------------------------------------------------------------------
  * FolderTreeItem — single tree row (internal)
  * -----------------------------------------------------------------------------------------------*/ const INDENT_PER_LEVEL_REM = 1.6;
+/**
+ * Breathing room between the row's highlight and the controls at either end.
+ * Asymmetric on purpose: the chevron reads as part of the indent, while the
+ * actions trigger sits closer to the edge so it stays out of the name's way.
+ */ const ROW_INSET_LEFT_REM = 0.8;
+const ROW_INSET_RIGHT_REM = 0.4;
+/**
+ * Every icon in the rail occupies the same 24px box, whether or not it is a
+ * control: the chevron and the actions trigger are buttons, the home and folder
+ * marks are not. Sizing the box rather than the glyph is what keeps the labels
+ * on one vertical line across rows that mix the two.
+ */ const IconSlot = styledComponents.styled(designSystem.Flex)`
+  width: 2.4rem;
+  height: 2.4rem;
+  min-width: 2.4rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+`;
 /**
  * A leaf's chevron is present only to keep the folder names aligned, so it
  * should read as absent. The design system's disabled state is built for real
  * controls — a filled, bordered pill — which draws more attention than the
  * enabled chevron next to it. Doubled selector to outrank that rule.
  */ const ChevronButton = styledComponents.styled(designSystem.IconButton)`
+  // Square, so it and the actions trigger read as one pair of controls.
+  && {
+    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 control needs a stronger one of its own
+  // to read as a separate target sitting on top of it.
+  &&:hover:not([aria-disabled='true']) {
+    background: ${({ theme })=>theme.colors.primary200};
+  }
+
   &&[aria-disabled='true'] {
     background: transparent;
     border-color: transparent;
@@ -194,10 +234,13 @@ const RotatingChevron = styledComponents.styled(icons.ChevronDown)`
   transform: rotate(${({ $expanded })=>$expanded ? '0deg' : '-90deg'});
   transition: transform 0.2s ease;
 `;
-const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId, showActiveFolder, isExpanded, onToggle, onExpand, onSelect, isMovePending })=>{
+const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, currentFolderId, showActiveFolder, isExpanded, onToggle, onExpand, onSelect, isMovePending })=>{
     const { formatMessage } = reactIntl.useIntl();
     const hasChildren = folderChildren.length > 0;
-    const isFolderExpanded = isExpanded(id);
+    // A folder keeps its entry in the expanded set after its last subfolder is
+    // moved away, so "expanded" has to mean "expanded *and* still has something to
+    // show" — otherwise the chevron stays rotated on what is now a leaf.
+    const isFolderExpanded = isExpanded(id) && hasChildren;
     const isActive = showActiveFolder && currentFolderId === id;
     const { droppable: { setNodeRef }, isOver, showValidDropHighlight, showInvalidDropCursor } = useFolderTreeDroppable.useFolderTreeDroppable({
         id,
@@ -207,6 +250,10 @@ const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId,
         id,
         onExpand
     ]);
+    // Tree rows carry no selection, so a right-click always means "this folder" —
+    // none of the list's selection rules apply here.
+    const [menuPosition, setMenuPosition] = React.useState(null);
+    const rowButtonRef = React.useRef(null);
     useSpringLoadedExpand.useSpringLoadedExpand({
         isOver,
         canExpand: hasChildren && !isFolderExpanded,
@@ -218,12 +265,27 @@ const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId,
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(TreeRow, {
                 ref: setNodeRef,
+                "data-native-context-menu": true,
                 alignItems: "center",
-                paddingLeft: `${level * INDENT_PER_LEVEL_REM}rem`,
+                // Indent plus the row's own inset, so the chevron never sits flush
+                // against the edge of the highlight at any depth.
+                paddingLeft: `${level * INDENT_PER_LEVEL_REM + ROW_INSET_LEFT_REM}rem`,
+                paddingRight: `${ROW_INSET_RIGHT_REM}rem`,
                 gap: 1,
+                $isActive: isActive,
                 $isValidDropTarget: showValidDropHighlight,
                 $isInvalidDropCursor: showInvalidDropCursor,
                 $isMovePending: isMovePending,
+                onContextMenu: (event)=>{
+                    if (!isEventFromWithin.isEventFromWithin(event)) {
+                        return;
+                    }
+                    event.preventDefault();
+                    setMenuPosition({
+                        x: event.clientX,
+                        y: event.clientY
+                    });
+                },
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(ChevronButton, {
                         label: hasChildren ? formatMessage({
@@ -254,6 +316,7 @@ const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId,
                         flex: "1",
                         minWidth: 0,
                         children: /*#__PURE__*/ jsxRuntime.jsx(RowButton, {
+                            ref: rowButtonRef,
                             type: "button",
                             $isActive: isActive,
                             $isValidDropTarget: showValidDropHighlight,
@@ -269,12 +332,23 @@ const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId,
                                 children: name
                             })
                         })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(FolderTreeRowMenu.FolderTreeRowMenu, {
+                        folder: {
+                            id,
+                            name
+                        },
+                        parentId: parentId,
+                        menuPosition: menuPosition,
+                        returnFocusTo: rowButtonRef.current,
+                        onCloseMenu: ()=>setMenuPosition(null)
                     })
                 ]
             }),
             hasChildren && isFolderExpanded && /*#__PURE__*/ jsxRuntime.jsx(NavList, {
                 children: folderChildren.map((child)=>/*#__PURE__*/ jsxRuntime.jsx(FolderTreeItem, {
                         node: child,
+                        parentId: id,
                         level: level + 1,
                         currentFolderId: currentFolderId,
                         showActiveFolder: showActiveFolder,
@@ -299,6 +373,7 @@ const FolderTreeItem = ({ node, ...props })=>{
         folderChildren: node.children ?? []
     });
 };
+const FOLDER_TREE_ROOT_SELECTOR = '[data-folder-tree-root]';
 /**
  * Left-rail navigation for the Media Library. Fetches folder structure internally
  * and renders:
@@ -315,7 +390,7 @@ const FolderTreeItem = ({ node, ...props })=>{
  * Presentational with respect to routing — navigation is delegated to the parent
  * via `onSelectFolder` so the URL stays the single source of truth (see
  * `useFolderNavigation`).
- */ const FolderTree = ({ currentFolderId, showActiveFolder = true, onSelectFolder })=>{
+ */ const FolderTree = ({ currentFolderId, showActiveFolder = true, onSelectFolder, backgroundContextMenu })=>{
     const { formatMessage } = reactIntl.useIntl();
     const { data: folderStructure = [], isLoading, isError } = folders.useGetFolderStructureQuery();
     const { isExpanded, toggleExpanded, expandFolder } = useExpandedFolders(folderStructure, currentFolderId);
@@ -332,11 +407,13 @@ const FolderTreeItem = ({ node, ...props })=>{
         name: homeLabel
     });
     return /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.SubNav.Main, {
+        "data-folder-tree-root": true,
         "aria-label": formatMessage({
             id: translations.getTranslationKey('sidebar.tree.aria-label'),
             defaultMessage: 'Media library folders'
         }),
         children: [
+            backgroundContextMenu,
             /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Header, {
                 label: formatMessage({
                     id: translations.getTranslationKey('sidebar.title'),
@@ -347,31 +424,44 @@ const FolderTreeItem = ({ node, ...props })=>{
                 children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                     direction: "column",
                     alignItems: "stretch",
-                    gap: 1,
                     padding: 3,
                     children: [
-                        /*#__PURE__*/ jsxRuntime.jsxs(RowButton, {
+                        /*#__PURE__*/ jsxRuntime.jsx(TreeRow, {
                             ref: setHomeDropRef,
-                            type: "button",
+                            "data-native-context-menu": true,
+                            alignItems: "center",
+                            // Level 0, so the indent contributes nothing — but the row's own
+                            // inset still applies, exactly as it does for a top-level folder.
+                            paddingLeft: `${ROW_INSET_LEFT_REM}rem`,
+                            paddingRight: `${ROW_INSET_RIGHT_REM}rem`,
                             $isActive: isHomeActive,
                             $isValidDropTarget: showHomeValidDropHighlight,
                             $isInvalidDropCursor: showHomeInvalidDropCursor,
                             $isMovePending: isMovePending,
-                            "aria-current": isHomeActive ? 'page' : undefined,
-                            onClick: ()=>onSelectFolder(null),
-                            "data-testid": "folder-tree-home",
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(icons.House, {
-                                    "aria-hidden": true,
-                                    width: "1.6rem",
-                                    height: "1.6rem"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                    variant: "omega",
-                                    fontWeight: isHomeActive ? 'semiBold' : 'regular',
-                                    children: homeLabel
-                                })
-                            ]
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(RowButton, {
+                                type: "button",
+                                $isActive: isHomeActive,
+                                $isValidDropTarget: showHomeValidDropHighlight,
+                                $isInvalidDropCursor: showHomeInvalidDropCursor,
+                                $isMovePending: isMovePending,
+                                "aria-current": isHomeActive ? 'page' : undefined,
+                                onClick: ()=>onSelectFolder(null),
+                                "data-testid": "folder-tree-home",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(IconSlot, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.House, {
+                                            "aria-hidden": true,
+                                            width: "1.6rem",
+                                            height: "1.6rem"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "omega",
+                                        fontWeight: isHomeActive ? 'semiBold' : 'regular',
+                                        children: homeLabel
+                                    })
+                                ]
+                            })
                         }),
                         /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
                             marginTop: 4,
@@ -383,13 +473,14 @@ const FolderTreeItem = ({ node, ...props })=>{
                                     paddingBottom: 1,
                                     paddingLeft: 2,
                                     paddingRight: 2,
-                                    marginBottom: 2,
                                     children: [
-                                        /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {
-                                            "aria-hidden": true,
-                                            width: "1.6rem",
-                                            height: "1.6rem",
-                                            fill: "neutral500"
+                                        /*#__PURE__*/ jsxRuntime.jsx(IconSlot, {
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {
+                                                "aria-hidden": true,
+                                                width: "1.6rem",
+                                                height: "1.6rem",
+                                                fill: "neutral500"
+                                            })
                                         }),
                                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                                             variant: "sigma",
@@ -442,6 +533,8 @@ const FolderTreeItem = ({ node, ...props })=>{
                                 }) : /*#__PURE__*/ jsxRuntime.jsx(NavList, {
                                     children: folderStructure.map((node)=>/*#__PURE__*/ jsxRuntime.jsx(FolderTreeItem, {
                                             node: node,
+                                            // Top of the tree — these sit at the library root.
+                                            parentId: null,
                                             level: 0,
                                             currentFolderId: currentFolderId,
                                             showActiveFolder: showActiveFolder,
@@ -461,5 +554,6 @@ const FolderTreeItem = ({ node, ...props })=>{
     });
 };
 
+exports.FOLDER_TREE_ROOT_SELECTOR = FOLDER_TREE_ROOT_SELECTOR;
 exports.FolderTree = FolderTree;
 //# sourceMappingURL=FolderTree.js.map