@strapi/upload 5.59.0 → 5.61.0

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

@@ -2,17 +2,20 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var core = require('@dnd-kit/core');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
-var TruncatedText = require('../../../../components/TruncatedText.js');
 var folders = require('../../../../services/folders.js');
+var findFolderPath = require('../../../../utils/findFolderPath.js');
 var isEventFromWithin = require('../../../../utils/isEventFromWithin.js');
 var translations = require('../../../../utils/translations.js');
 var AssetsDndProvider = require('../Dnd/AssetsDndProvider.js');
+var dndIds = require('../Dnd/dndIds.js');
 var useFolderTreeDroppable = require('../Dnd/useFolderTreeDroppable.js');
+var collapsedBranch = require('./collapsedBranch.js');
 var FolderTreeRowMenu = require('./FolderTreeRowMenu.js');
 var useSpringLoadedExpand = require('./useSpringLoadedExpand.js');
 
@@ -56,6 +59,13 @@ var useSpringLoadedExpand = require('./useSpringLoadedExpand.js');
     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 = styledComponents.styled(designSystem.Flex)`
   cursor: ${({ $isMovePending, $isInvalidDropCursor })=>{
     if ($isMovePending) {
@@ -64,13 +74,28 @@ const TreeRow = styledComponents.styled(designSystem.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 && styledComponents.css`
@@ -85,31 +110,14 @@ const TreeRow = styledComponents.styled(designSystem.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] = React.useState(()=>new Set());
     React.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.findFolderPath(folderStructure, currentFolderId)?.slice(0, -1).map((folder)=>folder.id).filter((id)=>id != null);
         if (!ancestors || ancestors.length === 0) {
             return;
         }
@@ -184,6 +192,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
@@ -234,7 +247,7 @@ const RotatingChevron = styledComponents.styled(icons.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 } = reactIntl.useIntl();
     const hasChildren = folderChildren.length > 0;
     // A folder keeps its entry in the expanded set after its last subfolder is
@@ -242,6 +255,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: translations.getTranslationKey('plugin.name'),
+            defaultMessage: 'Media Library'
+        }),
+        ...ancestorNames,
+        name
+    ].join(' / ');
     const { droppable: { setNodeRef }, isOver, showValidDropHighlight, showInvalidDropCursor } = useFolderTreeDroppable.useFolderTreeDroppable({
         id,
         name
@@ -256,7 +277,7 @@ const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, curren
     const rowButtonRef = React.useRef(null);
     useSpringLoadedExpand.useSpringLoadedExpand({
         isOver,
-        canExpand: hasChildren && !isFolderExpanded,
+        canExpand: !isHiddenAncestor && hasChildren && !isFolderExpanded,
         onExpand: handleExpand
     });
     // TODO: full `role="tree"` + arrow-key treeview navigation before revamp GA
@@ -269,10 +290,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,
@@ -287,7 +309,9 @@ const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, curren
                     });
                 },
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(ChevronButton, {
+                    isHiddenAncestor ? /*#__PURE__*/ jsxRuntime.jsx(IconSlot, {
+                        "aria-hidden": true
+                    }) : /*#__PURE__*/ jsxRuntime.jsx(ChevronButton, {
                         label: hasChildren ? formatMessage({
                             id: translations.getTranslationKey(isFolderExpanded ? 'sidebar.tree.collapse' : 'sidebar.tree.expand'),
                             defaultMessage: isFolderExpanded ? 'Collapse {name}' : 'Expand {name}'
@@ -315,21 +339,25 @@ const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, curren
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
                         flex: "1",
                         minWidth: 0,
-                        children: /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(TruncatedText.TruncatedText, {
-                                variant: "omega",
-                                fontWeight: isActive ? 'semiBold' : 'regular',
-                                children: name
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                            label: pathLabel,
+                            children: /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    ellipsis: true,
+                                    variant: "omega",
+                                    fontWeight: isActive ? 'semiBold' : 'regular',
+                                    children: name
+                                })
                             })
                         })
                     }),
@@ -345,7 +373,7 @@ const FolderTreeItemInner = ({ id, name, parentId, folderChildren, level, curren
                     })
                 ]
             }),
-            hasChildren && isFolderExpanded && /*#__PURE__*/ jsxRuntime.jsx(NavList, {
+            hasChildren && isFolderExpanded && !isHiddenAncestor && (subtree ?? /*#__PURE__*/ jsxRuntime.jsx(NavList, {
                 children: folderChildren.map((child)=>/*#__PURE__*/ jsxRuntime.jsx(FolderTreeItem, {
                         node: child,
                         parentId: id,
@@ -356,9 +384,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))
-            })
+            }))
         ]
     });
 };
@@ -373,6 +405,155 @@ const FolderTreeItem = ({ node, ...props })=>{
         folderChildren: node.children ?? []
     });
 };
+/* -------------------------------------------------------------------------------------------------
+ * CollapsedAncestors — the "N parent folders" row of a deep branch (internal)
+ * -----------------------------------------------------------------------------------------------*/ const SummaryLabel = styledComponents.styled(designSystem.Typography)`
+  font-style: italic;
+`;
+const SummaryChevron = styledComponents.styled(icons.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 } = reactIntl.useIntl();
+    const listId = React.useId();
+    const open = React.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 } = core.useDroppable({
+        id: dndIds.toFolderTreeSummaryId(branch.root.id),
+        disabled: itemProps.isMovePending
+    });
+    useSpringLoadedExpand.useSpringLoadedExpand({
+        isOver,
+        canExpand: !isOpen,
+        onExpand: open
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs("li", {
+        children: [
+            /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                    label: hiddenNames.join(' / '),
+                    children: /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(IconSlot, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.More, {
+                                    "aria-hidden": true,
+                                    fill: "neutral500"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                flex: "1",
+                                minWidth: 0,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(SummaryLabel, {
+                                    ellipsis: true,
+                                    variant: "omega",
+                                    textColor: "neutral600",
+                                    children: formatMessage({
+                                        id: translations.getTranslationKey('sidebar.tree.hidden-ancestors'),
+                                        defaultMessage: '{count, plural, one {# parent folder} other {# parent folders}}'
+                                    }, {
+                                        count: branch.hidden.length
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(IconSlot, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(SummaryChevron, {
+                                    "aria-hidden": true,
+                                    $expanded: isOpen,
+                                    fill: "neutral500"
+                                })
+                            })
+                        ]
+                    })
+                })
+            }),
+            isOpen && /*#__PURE__*/ jsxRuntime.jsx(NavList, {
+                id: listId,
+                children: branch.hidden.map((node, index)=>/*#__PURE__*/ React.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] = React.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] = React.useState(currentFolderId);
+    if (openedOn !== currentFolderId) {
+        setOpenedOn(currentFolderId);
+        setIsOpen(false);
+    }
+    const ancestorNamesOfParent = [
+        branch.root,
+        ...branch.hidden
+    ].map((node)=>node.name ?? '');
+    return /*#__PURE__*/ jsxRuntime.jsx(FolderTreeItem, {
+        ...itemProps,
+        node: branch.root,
+        parentId: null,
+        level: 0,
+        ancestorNames: [],
+        subtree: /*#__PURE__*/ jsxRuntime.jsxs(NavList, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(CollapsedAncestors, {
+                    ...itemProps,
+                    branch: branch,
+                    isOpen: isOpen,
+                    onOpenChange: setIsOpen
+                }),
+                /*#__PURE__*/ jsxRuntime.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
@@ -397,6 +578,45 @@ const FOLDER_TREE_ROOT_SELECTOR = '[data-folder-tree-root]';
     const { isMovePending } = AssetsDndProvider.useAssetsDndOptional() ?? {
         isMovePending: false
     };
+    const collapsedBranch$1 = React.useMemo(()=>collapsedBranch.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 = React.useRef(false);
+    const handleSelectFolder = React.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
+    ]);
+    React.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: translations.getTranslationKey('sidebar.home'),
@@ -531,18 +751,16 @@ const FOLDER_TREE_ROOT_SELECTOR = '[data-folder-tree-root]';
                                         })
                                     })
                                 }) : /*#__PURE__*/ jsxRuntime.jsx(NavList, {
-                                    children: folderStructure.map((node)=>/*#__PURE__*/ jsxRuntime.jsx(FolderTreeItem, {
+                                    children: folderStructure.map((node)=>collapsedBranch$1 && node.id === collapsedBranch$1.root.id ? /*#__PURE__*/ jsxRuntime.jsx(CollapsedBranchItem, {
+                                            branch: collapsedBranch$1,
+                                            ...sharedItemProps
+                                        }, node.id) : /*#__PURE__*/ jsxRuntime.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))
                                 })
                             ]
@@ -556,4 +774,5 @@ const FOLDER_TREE_ROOT_SELECTOR = '[data-folder-tree-root]';
 
 exports.FOLDER_TREE_ROOT_SELECTOR = FOLDER_TREE_ROOT_SELECTOR;
 exports.FolderTree = FolderTree;
+exports.getIndentRem = getIndentRem;
 //# sourceMappingURL=FolderTree.js.map