@strapi/upload 5.58.0 → 5.60.0

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

@@ -1,16 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useMemo, useRef, useCallback, useEffect, useState, useId, createElement } from 'react';
+import { useDroppable } from '@dnd-kit/core';
 import { SubNav } from '@strapi/admin/strapi-admin';
-import { Flex, Typography, Box, Loader, IconButton } from '@strapi/design-system';
-import { House, Folder, ChevronDown } from '@strapi/icons';
+import { Flex, Typography, Box, Loader, Tooltip, IconButton } from '@strapi/design-system';
+import { House, Folder, More, ChevronRight, ChevronDown } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { css, styled } from 'styled-components';
-import { TruncatedText } from '../../../../components/TruncatedText.mjs';
 import { useGetFolderStructureQuery } from '../../../../services/folders.mjs';
+import { findFolderPath } from '../../../../utils/findFolderPath.mjs';
 import { isEventFromWithin } from '../../../../utils/isEventFromWithin.mjs';
 import { getTranslationKey } from '../../../../utils/translations.mjs';
 import { useAssetsDndOptional } from '../Dnd/AssetsDndProvider.mjs';
+import { toFolderTreeSummaryId } from '../Dnd/dndIds.mjs';
 import { useFolderTreeDroppable } from '../Dnd/useFolderTreeDroppable.mjs';
+import { getCollapsedBranch } from './collapsedBranch.mjs';
 import { FolderTreeRowMenu } from './FolderTreeRowMenu.mjs';
 import { useSpringLoadedExpand } from './useSpringLoadedExpand.mjs';
 
@@ -54,6 +57,13 @@ import { useSpringLoadedExpand } from './useSpringLoadedExpand.mjs';
     outline-offset: -2px;
   }
 `;
+// Squared where path rows meet, so the path reads as one block rather than a
+// stack of separately highlighted rows.
+const getOpenPathRadius = (segment, radius)=>({
+        start: `${radius} ${radius} 0 0`,
+        middle: '0',
+        end: `0 0 ${radius} ${radius}`
+    })[segment];
 const TreeRow = styled(Flex)`
   cursor: ${({ $isMovePending, $isInvalidDropCursor })=>{
     if ($isMovePending) {
@@ -62,13 +72,28 @@ const TreeRow = styled(Flex)`
     return $isInvalidDropCursor ? 'not-allowed' : 'default';
 }};
   pointer-events: ${({ $isMovePending })=>$isMovePending ? 'none' : 'auto'};
-  border-radius: ${({ theme })=>theme.borderRadius};
-  background: ${({ $isActive, theme })=>$isActive ? theme.colors.primary100 : 'transparent'};
+  border-radius: ${({ $openPathSegment, theme })=>$openPathSegment ? getOpenPathRadius($openPathSegment, theme.borderRadius) : theme.borderRadius};
+  background: ${({ $isActive, $openPathSegment, theme })=>{
+    if ($isActive) {
+        return theme.colors.primary100;
+    }
+    // While a summary row is open, the path down to the open folder is tinted —
+    // the folders it reveals plus the parent — so the tint reads as "on the way
+    // here" and the open folder's own highlight as "here".
+    return $openPathSegment ? theme.colors.neutral100 : 'transparent';
+}};
 
   // The whole row lights up, so pointing anywhere along it — chevron, label or
-  // the actions trigger — reads as one target.
+  // the actions trigger — reads as one target. A path row steps past its tint
+  // rather than to primary100, which would make it look like a second open
+  // folder (and, in dark mode, is the same colour as the tint).
   &:hover {
-    background: ${({ $isActive, theme })=>$isActive ? theme.colors.primary100 : theme.colors.neutral100};
+    background: ${({ $isActive, $openPathSegment, theme })=>{
+    if ($isActive) {
+        return theme.colors.primary100;
+    }
+    return $openPathSegment ? theme.colors.neutral150 : theme.colors.neutral100;
+}};
   }
 
   ${({ $isValidDropTarget, theme })=>$isValidDropTarget && css`
@@ -83,31 +108,14 @@ const TreeRow = styled(Flex)`
 `;
 /* -------------------------------------------------------------------------------------------------
  * useExpandedFolders — local expand/collapse state
- * -----------------------------------------------------------------------------------------------*/ const findAncestorIds = (nodes, targetId, trail = [])=>{
-    for (const node of nodes){
-        if (node.id === targetId) {
-            return trail;
-        }
-        if (node.children?.length) {
-            const nextTrail = node.id != null ? [
-                ...trail,
-                node.id
-            ] : trail;
-            const found = findAncestorIds(node.children, targetId, nextTrail);
-            if (found !== null) {
-                return found;
-            }
-        }
-    }
-    return null;
-};
-const useExpandedFolders = (folderStructure, currentFolderId)=>{
+ * -----------------------------------------------------------------------------------------------*/ const useExpandedFolders = (folderStructure, currentFolderId)=>{
     const [expandedIds, setExpandedIds] = useState(()=>new Set());
     useEffect(()=>{
         if (currentFolderId == null) {
             return;
         }
-        const ancestors = findAncestorIds(folderStructure, currentFolderId);
+        // The path ends with the current folder itself, which needs no expanding.
+        const ancestors = findFolderPath(folderStructure, currentFolderId)?.slice(0, -1).map((folder)=>folder.id).filter((id)=>id != null);
         if (!ancestors || ancestors.length === 0) {
             return;
         }
@@ -182,6 +190,11 @@ const useExpandedFolders = (folderStructure, currentFolderId)=>{
 /* -------------------------------------------------------------------------------------------------
  * FolderTreeItem — single tree row (internal)
  * -----------------------------------------------------------------------------------------------*/ const INDENT_PER_LEVEL_REM = 1.6;
+/**
+ * Deeper rows keep this level's indent, so a name never runs out of room however
+ * deep the tree goes. Rows past it stay readable through their path tooltip.
+ */ const MAX_VISUAL_LEVEL = 4;
+const getIndentRem = (level)=>Math.min(level, MAX_VISUAL_LEVEL) * INDENT_PER_LEVEL_REM;
 /**
  * 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
@@ -232,7 +245,7 @@ const RotatingChevron = styled(ChevronDown)`
   transform: rotate(${({ $expanded })=>$expanded ? '0deg' : '-90deg'});
   transition: transform 0.2s ease;
 `;
-const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, currentFolderId, showActiveFolder, isExpanded, onToggle, onExpand, onSelect, isMovePending })=>{
+const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, currentFolderId, showActiveFolder, isExpanded, onToggle, onExpand, onSelect, isMovePending, ancestorNames, isHiddenAncestor = false, openPathSegment, subtree })=>{
     const { formatMessage } = useIntl();
     const hasChildren = folderChildren.length > 0;
     // A folder keeps its entry in the expanded set after its last subfolder is
@@ -240,6 +253,14 @@ const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, curren
     // show" — otherwise the chevron stays rotated on what is now a leaf.
     const isFolderExpanded = isExpanded(id) && hasChildren;
     const isActive = showActiveFolder && currentFolderId === id;
+    const pathLabel = [
+        formatMessage({
+            id: getTranslationKey('plugin.name'),
+            defaultMessage: 'Media Library'
+        }),
+        ...ancestorNames,
+        name
+    ].join(' / ');
     const { droppable: { setNodeRef }, isOver, showValidDropHighlight, showInvalidDropCursor } = useFolderTreeDroppable({
         id,
         name
@@ -254,7 +275,7 @@ const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, curren
     const rowButtonRef = useRef(null);
     useSpringLoadedExpand({
         isOver,
-        canExpand: hasChildren && !isFolderExpanded,
+        canExpand: !isHiddenAncestor && hasChildren && !isFolderExpanded,
         onExpand: handleExpand
     });
     // TODO: full `role="tree"` + arrow-key treeview navigation before revamp GA
@@ -267,10 +288,11 @@ const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, curren
                 alignItems: "center",
                 // 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`,
+                paddingLeft: `${getIndentRem(level) + ROW_INSET_LEFT_REM}rem`,
                 paddingRight: `${ROW_INSET_RIGHT_REM}rem`,
                 gap: 1,
                 $isActive: isActive,
+                $openPathSegment: openPathSegment,
                 $isValidDropTarget: showValidDropHighlight,
                 $isInvalidDropCursor: showInvalidDropCursor,
                 $isMovePending: isMovePending,
@@ -285,7 +307,9 @@ const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, curren
                     });
                 },
                 children: [
-                    /*#__PURE__*/ jsx(ChevronButton, {
+                    isHiddenAncestor ? /*#__PURE__*/ jsx(IconSlot, {
+                        "aria-hidden": true
+                    }) : /*#__PURE__*/ jsx(ChevronButton, {
                         label: hasChildren ? formatMessage({
                             id: getTranslationKey(isFolderExpanded ? 'sidebar.tree.collapse' : 'sidebar.tree.expand'),
                             defaultMessage: isFolderExpanded ? 'Collapse {name}' : 'Expand {name}'
@@ -313,21 +337,25 @@ const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, curren
                     /*#__PURE__*/ jsx(Box, {
                         flex: "1",
                         minWidth: 0,
-                        children: /*#__PURE__*/ jsx(RowButton, {
-                            ref: rowButtonRef,
-                            type: "button",
-                            $isActive: isActive,
-                            $isValidDropTarget: showValidDropHighlight,
-                            $isInvalidDropCursor: showInvalidDropCursor,
-                            $isMovePending: isMovePending,
-                            "aria-current": isActive ? 'page' : undefined,
-                            onClick: ()=>onSelect(id),
-                            "data-testid": `folder-tree-node-${id}`,
-                            "data-folder-id": id,
-                            children: /*#__PURE__*/ jsx(TruncatedText, {
-                                variant: "omega",
-                                fontWeight: isActive ? 'semiBold' : 'regular',
-                                children: name
+                        children: /*#__PURE__*/ jsx(Tooltip, {
+                            label: pathLabel,
+                            children: /*#__PURE__*/ jsx(RowButton, {
+                                ref: rowButtonRef,
+                                type: "button",
+                                $isActive: isActive,
+                                $isValidDropTarget: showValidDropHighlight,
+                                $isInvalidDropCursor: showInvalidDropCursor,
+                                $isMovePending: isMovePending,
+                                "aria-current": isActive ? 'page' : undefined,
+                                onClick: ()=>onSelect(id),
+                                "data-testid": `folder-tree-node-${id}`,
+                                "data-folder-id": id,
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    ellipsis: true,
+                                    variant: "omega",
+                                    fontWeight: isActive ? 'semiBold' : 'regular',
+                                    children: name
+                                })
                             })
                         })
                     }),
@@ -343,7 +371,7 @@ const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, curren
                     })
                 ]
             }),
-            hasChildren && isFolderExpanded && /*#__PURE__*/ jsx(NavList, {
+            hasChildren && isFolderExpanded && !isHiddenAncestor && (subtree ?? /*#__PURE__*/ jsx(NavList, {
                 children: folderChildren.map((child)=>/*#__PURE__*/ jsx(FolderTreeItem, {
                         node: child,
                         parentId: id,
@@ -354,9 +382,13 @@ const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, curren
                         onToggle: onToggle,
                         onExpand: onExpand,
                         onSelect: onSelect,
-                        isMovePending: isMovePending
+                        isMovePending: isMovePending,
+                        ancestorNames: [
+                            ...ancestorNames,
+                            name
+                        ]
                     }, child.id ?? child.name))
-            })
+            }))
         ]
     });
 };
@@ -371,6 +403,155 @@ const FolderTreeItem = ({ node, ...props })=>{
         folderChildren: node.children ?? []
     });
 };
+/* -------------------------------------------------------------------------------------------------
+ * CollapsedAncestors — the "N parent folders" row of a deep branch (internal)
+ * -----------------------------------------------------------------------------------------------*/ const SummaryLabel = styled(Typography)`
+  font-style: italic;
+`;
+const SummaryChevron = styled(ChevronRight)`
+  transform: rotate(${({ $expanded })=>$expanded ? '90deg' : '0deg'});
+  transition: transform 0.2s ease;
+`;
+/**
+ * Stands in for the folders between a deep branch's root and the selected
+ * folder's parent, and lists them in place when opened.
+ */ const CollapsedAncestors = ({ branch, isOpen, onOpenChange, ...itemProps })=>{
+    const { formatMessage } = useIntl();
+    const listId = useId();
+    const open = useCallback(()=>onOpenChange(true), [
+        onOpenChange
+    ]);
+    const rootName = branch.root.name ?? '';
+    const hiddenNames = branch.hidden.map((node)=>node.name ?? '');
+    // Without this the hidden folders would be unreachable mid-drag, since the row
+    // can't be clicked while dragging. It never resolves to a destination.
+    const { setNodeRef, isOver } = useDroppable({
+        id: toFolderTreeSummaryId(branch.root.id),
+        disabled: itemProps.isMovePending
+    });
+    useSpringLoadedExpand({
+        isOver,
+        canExpand: !isOpen,
+        onExpand: open
+    });
+    return /*#__PURE__*/ jsxs("li", {
+        children: [
+            /*#__PURE__*/ jsx(TreeRow, {
+                ref: setNodeRef,
+                "data-native-context-menu": true,
+                alignItems: "center",
+                paddingLeft: `${getIndentRem(1) + ROW_INSET_LEFT_REM}rem`,
+                paddingRight: `${ROW_INSET_RIGHT_REM}rem`,
+                $isInvalidDropCursor: isOver,
+                $isMovePending: itemProps.isMovePending,
+                children: /*#__PURE__*/ jsx(Tooltip, {
+                    label: hiddenNames.join(' / '),
+                    children: /*#__PURE__*/ jsxs(RowButton, {
+                        type: "button",
+                        $isActive: false,
+                        $isInvalidDropCursor: isOver,
+                        $isMovePending: itemProps.isMovePending,
+                        "aria-expanded": isOpen,
+                        "aria-controls": isOpen ? listId : undefined,
+                        onClick: ()=>onOpenChange(!isOpen),
+                        "data-testid": "folder-tree-hidden-ancestors",
+                        children: [
+                            /*#__PURE__*/ jsx(IconSlot, {
+                                children: /*#__PURE__*/ jsx(More, {
+                                    "aria-hidden": true,
+                                    fill: "neutral500"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Box, {
+                                flex: "1",
+                                minWidth: 0,
+                                children: /*#__PURE__*/ jsx(SummaryLabel, {
+                                    ellipsis: true,
+                                    variant: "omega",
+                                    textColor: "neutral600",
+                                    children: formatMessage({
+                                        id: getTranslationKey('sidebar.tree.hidden-ancestors'),
+                                        defaultMessage: '{count, plural, one {# parent folder} other {# parent folders}}'
+                                    }, {
+                                        count: branch.hidden.length
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(IconSlot, {
+                                children: /*#__PURE__*/ jsx(SummaryChevron, {
+                                    "aria-hidden": true,
+                                    $expanded: isOpen,
+                                    fill: "neutral500"
+                                })
+                            })
+                        ]
+                    })
+                })
+            }),
+            isOpen && /*#__PURE__*/ jsx(NavList, {
+                id: listId,
+                children: branch.hidden.map((node, index)=>/*#__PURE__*/ createElement(FolderTreeItem, {
+                        ...itemProps,
+                        key: node.id ?? node.name,
+                        node: node,
+                        parentId: (index === 0 ? branch.root.id : branch.hidden[index - 1].id) ?? null,
+                        // All at one level: they are a list of the path, not a nested tree.
+                        level: 2,
+                        ancestorNames: [
+                            rootName,
+                            ...hiddenNames.slice(0, index)
+                        ],
+                        isHiddenAncestor: true,
+                        openPathSegment: index === 0 ? 'start' : 'middle'
+                    }))
+            })
+        ]
+    });
+};
+/**
+ * The root folder of a deep branch, with everything between it and the selected
+ * folder's parent folded into one row. See `getCollapsedBranch`.
+ */ const CollapsedBranchItem = ({ branch, ...itemProps })=>{
+    const { currentFolderId } = itemProps;
+    const [isOpen, setIsOpen] = useState(false);
+    // Closed again on every new selection, clicking a hidden folder included.
+    // Reset during render rather than in an effect, so the list never paints open
+    // for a folder it wasn't opened on.
+    const [openedOn, setOpenedOn] = useState(currentFolderId);
+    if (openedOn !== currentFolderId) {
+        setOpenedOn(currentFolderId);
+        setIsOpen(false);
+    }
+    const ancestorNamesOfParent = [
+        branch.root,
+        ...branch.hidden
+    ].map((node)=>node.name ?? '');
+    return /*#__PURE__*/ jsx(FolderTreeItem, {
+        ...itemProps,
+        node: branch.root,
+        parentId: null,
+        level: 0,
+        ancestorNames: [],
+        subtree: /*#__PURE__*/ jsxs(NavList, {
+            children: [
+                /*#__PURE__*/ jsx(CollapsedAncestors, {
+                    ...itemProps,
+                    branch: branch,
+                    isOpen: isOpen,
+                    onOpenChange: setIsOpen
+                }),
+                /*#__PURE__*/ jsx(FolderTreeItem, {
+                    ...itemProps,
+                    node: branch.parent,
+                    parentId: branch.hidden[branch.hidden.length - 1]?.id ?? branch.root.id ?? null,
+                    level: 2,
+                    ancestorNames: ancestorNamesOfParent,
+                    openPathSegment: isOpen ? 'end' : undefined
+                })
+            ]
+        })
+    });
+};
 const FOLDER_TREE_ROOT_SELECTOR = '[data-folder-tree-root]';
 /**
  * Left-rail navigation for the Media Library. Fetches folder structure internally
@@ -395,6 +576,45 @@ const FOLDER_TREE_ROOT_SELECTOR = '[data-folder-tree-root]';
     const { isMovePending } = useAssetsDndOptional() ?? {
         isMovePending: false
     };
+    const collapsedBranch = useMemo(()=>getCollapsedBranch(folderStructure, currentFolderId), [
+        folderStructure,
+        currentFolderId
+    ]);
+    // A selection that folds or unfolds a branch remounts the selected row, which
+    // drops focus to <body>. Whether focus was in the tree has to be read before
+    // the selection, since by the time the new row renders the old one is gone.
+    const restoreFocusRef = useRef(false);
+    const handleSelectFolder = useCallback((folderId)=>{
+        // Re-selecting the open folder renders nothing new, so a flag set here
+        // would linger and pull focus back on a later, unrelated navigation.
+        restoreFocusRef.current = folderId !== currentFolderId && document.activeElement?.closest(FOLDER_TREE_ROOT_SELECTOR) != null;
+        onSelectFolder(folderId);
+    }, [
+        currentFolderId,
+        onSelectFolder
+    ]);
+    useEffect(()=>{
+        if (!restoreFocusRef.current || currentFolderId == null) {
+            return;
+        }
+        restoreFocusRef.current = false;
+        // Only take back the focus the remount dropped, never steal it from elsewhere.
+        if (document.activeElement !== document.body) {
+            return;
+        }
+        document.querySelector(`${FOLDER_TREE_ROOT_SELECTOR} [data-folder-id="${currentFolderId}"]`)?.focus();
+    }, [
+        currentFolderId
+    ]);
+    const sharedItemProps = {
+        currentFolderId,
+        showActiveFolder,
+        isExpanded,
+        onToggle: toggleExpanded,
+        onExpand: expandFolder,
+        onSelect: handleSelectFolder,
+        isMovePending
+    };
     const isHomeActive = showActiveFolder && currentFolderId == null;
     const homeLabel = formatMessage({
         id: getTranslationKey('sidebar.home'),
@@ -529,18 +749,16 @@ const FOLDER_TREE_ROOT_SELECTOR = '[data-folder-tree-root]';
                                         })
                                     })
                                 }) : /*#__PURE__*/ jsx(NavList, {
-                                    children: folderStructure.map((node)=>/*#__PURE__*/ jsx(FolderTreeItem, {
+                                    children: folderStructure.map((node)=>collapsedBranch && node.id === collapsedBranch.root.id ? /*#__PURE__*/ jsx(CollapsedBranchItem, {
+                                            branch: collapsedBranch,
+                                            ...sharedItemProps
+                                        }, node.id) : /*#__PURE__*/ jsx(FolderTreeItem, {
                                             node: node,
                                             // Top of the tree — these sit at the library root.
                                             parentId: null,
                                             level: 0,
-                                            currentFolderId: currentFolderId,
-                                            showActiveFolder: showActiveFolder,
-                                            isExpanded: isExpanded,
-                                            onToggle: toggleExpanded,
-                                            onExpand: expandFolder,
-                                            onSelect: onSelectFolder,
-                                            isMovePending: isMovePending
+                                            ancestorNames: [],
+                                            ...sharedItemProps
                                         }, node.id ?? node.name))
                                 })
                             ]
@@ -552,5 +770,5 @@ const FOLDER_TREE_ROOT_SELECTOR = '[data-folder-tree-root]';
     });
 };
 
-export { FOLDER_TREE_ROOT_SELECTOR, FolderTree };
+export { FOLDER_TREE_ROOT_SELECTOR, FolderTree, getIndentRem };
 //# sourceMappingURL=FolderTree.mjs.map