@strapi/upload 5.48.1 → 5.50.0

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

@@ -0,0 +1,387 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
+import { Typography, Box, Flex, Loader, IconButton, Tooltip } from '@strapi/design-system';
+import { House, Folder, ChevronDown } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { useGetFolderStructureQuery } from '../../../../services/folders.mjs';
+import { getTranslationKey } from '../../../../utils/translations.mjs';
+
+/* -------------------------------------------------------------------------------------------------
+ * RowButton — shared row styling aligned with admin SubNav.Link
+ * -----------------------------------------------------------------------------------------------*/ const RowButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[2]};
+  width: 100%;
+  min-height: 3.2rem;
+  padding: ${({ theme })=>`${theme.spaces[1]} ${theme.spaces[2]}`};
+  border: 0;
+  background: ${({ $isActive, theme })=>$isActive ? theme.colors.primary100 : 'transparent'};
+  color: ${({ $isActive, theme })=>$isActive ? theme.colors.primary700 : theme.colors.neutral800};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+
+  &:hover {
+    background: ${({ $isActive, theme })=>$isActive ? theme.colors.primary100 : theme.colors.neutral100};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme })=>theme.colors.primary600};
+    outline-offset: -2px;
+  }
+`;
+/* -------------------------------------------------------------------------------------------------
+ * 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 [expandedIds, setExpandedIds] = useState(()=>new Set());
+    useEffect(()=>{
+        if (currentFolderId == null) {
+            return;
+        }
+        const ancestors = findAncestorIds(folderStructure, currentFolderId);
+        if (!ancestors || ancestors.length === 0) {
+            return;
+        }
+        setExpandedIds((prev)=>{
+            const next = new Set(prev);
+            let changed = false;
+            for (const id of ancestors){
+                if (!next.has(id)) {
+                    next.add(id);
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [
+        folderStructure,
+        currentFolderId
+    ]);
+    const toggleExpanded = useCallback((id)=>{
+        setExpandedIds((prev)=>{
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            } else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+    const isExpanded = useCallback((id)=>expandedIds.has(id), [
+        expandedIds
+    ]);
+    return {
+        isExpanded,
+        toggleExpanded
+    };
+};
+/* -------------------------------------------------------------------------------------------------
+ * TruncatedFolderName — tooltip when the label is ellipsized
+ * -----------------------------------------------------------------------------------------------*/ const TruncatedFolderName = ({ name, isActive })=>{
+    const textRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useLayoutEffect(()=>{
+        const el = textRef.current;
+        if (!el) {
+            return;
+        }
+        const checkTruncation = ()=>{
+            setIsTruncated(el.scrollWidth > el.clientWidth);
+        };
+        checkTruncation();
+        const observer = new ResizeObserver(checkTruncation);
+        observer.observe(el);
+        return ()=>observer.disconnect();
+    }, [
+        name
+    ]);
+    const label = /*#__PURE__*/ jsx(Typography, {
+        ref: textRef,
+        variant: "omega",
+        fontWeight: isActive ? 'semiBold' : 'regular',
+        ellipsis: true,
+        children: name
+    });
+    if (isTruncated) {
+        return /*#__PURE__*/ jsx(Tooltip, {
+            label: name,
+            children: label
+        });
+    }
+    return label;
+};
+/* -------------------------------------------------------------------------------------------------
+ * NavList — unstyled list for tree rows
+ * -----------------------------------------------------------------------------------------------*/ const NavList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+/* -------------------------------------------------------------------------------------------------
+ * FolderTreeItem — single tree row (internal)
+ * -----------------------------------------------------------------------------------------------*/ const INDENT_PER_LEVEL_REM = 1.6;
+const RotatingChevron = styled(ChevronDown)`
+  transform: rotate(${({ $expanded })=>$expanded ? '0deg' : '-90deg'});
+  transition: transform 0.2s ease;
+`;
+const FolderTreeItem = ({ node, level, currentFolderId, isExpanded, onToggle, onSelect })=>{
+    const { formatMessage } = useIntl();
+    if (node.id == null) {
+        return null;
+    }
+    const id = node.id;
+    const name = node.name ?? '';
+    const hasChildren = (node.children?.length ?? 0) > 0;
+    const isFolderExpanded = isExpanded(id);
+    const isActive = currentFolderId === id;
+    // TODO: full `role="tree"` + arrow-key treeview navigation before revamp GA
+    // if an accessibility audit requires it (CMS-133 v1 is button rows only).
+    return /*#__PURE__*/ jsxs("li", {
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                alignItems: "center",
+                paddingLeft: `${level * INDENT_PER_LEVEL_REM}rem`,
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsx(IconButton, {
+                        label: formatMessage({
+                            id: getTranslationKey(isFolderExpanded ? 'sidebar.tree.collapse' : 'sidebar.tree.expand'),
+                            defaultMessage: isFolderExpanded ? 'Collapse {name}' : 'Expand {name}'
+                        }, {
+                            name
+                        }),
+                        onClick: (event)=>{
+                            event.stopPropagation();
+                            onToggle(id);
+                        },
+                        variant: "ghost",
+                        withTooltip: false,
+                        "aria-expanded": isFolderExpanded,
+                        children: /*#__PURE__*/ jsx(RotatingChevron, {
+                            $expanded: isFolderExpanded,
+                            fill: "neutral500"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        flex: "1",
+                        minWidth: 0,
+                        children: /*#__PURE__*/ jsx(RowButton, {
+                            type: "button",
+                            $isActive: isActive,
+                            "aria-current": isActive ? 'page' : undefined,
+                            onClick: ()=>onSelect(id),
+                            "data-testid": `folder-tree-node-${id}`,
+                            "data-folder-id": id,
+                            children: /*#__PURE__*/ jsx(TruncatedFolderName, {
+                                name: name,
+                                isActive: isActive
+                            })
+                        })
+                    })
+                ]
+            }),
+            hasChildren && isFolderExpanded && /*#__PURE__*/ jsx(NavList, {
+                children: node.children.map((child)=>/*#__PURE__*/ jsx(FolderTreeItem, {
+                        node: child,
+                        level: level + 1,
+                        currentFolderId: currentFolderId,
+                        isExpanded: isExpanded,
+                        onToggle: onToggle,
+                        onSelect: onSelect
+                    }, child.id ?? child.name))
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * FolderTree — public sidebar component
+ * -----------------------------------------------------------------------------------------------*/ const SidebarNav = styled(Flex)`
+  /* TODO: reconcile 25.6rem (Figma) with admin WIDTH_SIDE_NAVIGATION (23.2rem) */
+  width: 25.6rem;
+  height: 100%;
+  min-height: 100%;
+  background: ${({ theme })=>theme.colors.neutral0};
+  flex-shrink: 0;
+  flex-direction: column;
+  border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
+`;
+const SidebarHeader = styled(Box)`
+  flex-shrink: 0;
+  border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
+`;
+const SidebarBody = styled(Flex)`
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+`;
+/**
+ * Left-rail navigation for the Media Library. Fetches folder structure internally
+ * and renders:
+ *
+ * 1. A "Media library" title
+ * 2. A "Home" entry that clears the folder query param
+ * 3. A "FOLDERS" section header
+ * 4. The folder tree itself
+ *
+ * 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, onSelectFolder })=>{
+    const { formatMessage } = useIntl();
+    const { data: folderStructure = [], isLoading, isError } = useGetFolderStructureQuery();
+    const { isExpanded, toggleExpanded } = useExpandedFolders(folderStructure, currentFolderId);
+    const isHomeActive = currentFolderId == null;
+    return /*#__PURE__*/ jsxs(SidebarNav, {
+        direction: "column",
+        alignItems: "stretch",
+        tag: "nav",
+        "aria-label": formatMessage({
+            id: getTranslationKey('sidebar.tree.aria-label'),
+            defaultMessage: 'Media library folders'
+        }),
+        children: [
+            /*#__PURE__*/ jsx(SidebarHeader, {
+                paddingTop: 4,
+                paddingBottom: 4,
+                paddingLeft: 5,
+                paddingRight: 5,
+                children: /*#__PURE__*/ jsx(Typography, {
+                    variant: "beta",
+                    tag: "h2",
+                    children: formatMessage({
+                        id: getTranslationKey('sidebar.title'),
+                        defaultMessage: 'Media library'
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxs(SidebarBody, {
+                direction: "column",
+                alignItems: "stretch",
+                gap: 1,
+                padding: 3,
+                children: [
+                    /*#__PURE__*/ jsxs(RowButton, {
+                        type: "button",
+                        $isActive: isHomeActive,
+                        "aria-current": isHomeActive ? 'page' : undefined,
+                        onClick: ()=>onSelectFolder(null),
+                        "data-testid": "folder-tree-home",
+                        children: [
+                            /*#__PURE__*/ jsx(House, {
+                                "aria-hidden": true,
+                                width: "1.6rem",
+                                height: "1.6rem"
+                            }),
+                            /*#__PURE__*/ jsx(Typography, {
+                                variant: "omega",
+                                fontWeight: isHomeActive ? 'semiBold' : 'regular',
+                                children: formatMessage({
+                                    id: getTranslationKey('sidebar.home'),
+                                    defaultMessage: 'Home'
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Box, {
+                        children: [
+                            /*#__PURE__*/ jsxs(Flex, {
+                                alignItems: "center",
+                                gap: 1,
+                                padding: 1,
+                                children: [
+                                    /*#__PURE__*/ jsx(Folder, {
+                                        "aria-hidden": true,
+                                        width: "1.6rem",
+                                        height: "1.6rem",
+                                        fill: "neutral500"
+                                    }),
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        variant: "sigma",
+                                        textColor: "neutral600",
+                                        style: {
+                                            textTransform: 'uppercase'
+                                        },
+                                        children: formatMessage({
+                                            id: getTranslationKey('sidebar.folders'),
+                                            defaultMessage: 'Folders'
+                                        })
+                                    })
+                                ]
+                            }),
+                            isLoading ? // TODO: revisit loading state before revamp GA
+                            /*#__PURE__*/ jsx(Flex, {
+                                justifyContent: "center",
+                                padding: 1,
+                                paddingTop: 2,
+                                children: /*#__PURE__*/ jsx(Loader, {
+                                    children: formatMessage({
+                                        id: getTranslationKey('sidebar.tree.loading'),
+                                        defaultMessage: 'Loading folders...'
+                                    })
+                                })
+                            }) : isError ? // TODO: revisit error state before revamp GA
+                            /*#__PURE__*/ jsx(Box, {
+                                padding: 1,
+                                paddingTop: 2,
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    variant: "pi",
+                                    textColor: "danger600",
+                                    children: formatMessage({
+                                        id: getTranslationKey('sidebar.tree.error'),
+                                        defaultMessage: 'Could not load folders.'
+                                    })
+                                })
+                            }) : folderStructure.length === 0 ? // TODO: revisit empty state before revamp GA
+                            /*#__PURE__*/ jsx(Box, {
+                                padding: 1,
+                                paddingTop: 2,
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    variant: "pi",
+                                    textColor: "neutral500",
+                                    children: formatMessage({
+                                        id: getTranslationKey('sidebar.tree.empty'),
+                                        defaultMessage: 'No folders yet'
+                                    })
+                                })
+                            }) : /*#__PURE__*/ jsx(NavList, {
+                                children: folderStructure.map((node)=>/*#__PURE__*/ jsx(FolderTreeItem, {
+                                        node: node,
+                                        level: 0,
+                                        currentFolderId: currentFolderId,
+                                        isExpanded: isExpanded,
+                                        onToggle: toggleExpanded,
+                                        onSelect: onSelectFolder
+                                    }, node.id ?? node.name))
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { FolderTree };
+//# sourceMappingURL=FolderTree.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderTree.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/FolderTree/FolderTree.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { Box, Flex, IconButton, Loader, Tooltip, Typography } from '@strapi/design-system';\nimport { ChevronDown, Folder as FolderIcon, House } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useGetFolderStructureQuery } from '../../../../services/folders';\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport type { FolderNode } from '../../../../../../../shared/contracts/folders';\n\n/* -------------------------------------------------------------------------------------------------\n * RowButton — shared row styling aligned with admin SubNav.Link\n * -----------------------------------------------------------------------------------------------*/\n\nconst RowButton = styled.button<{ $isActive: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  width: 100%;\n  min-height: 3.2rem;\n  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};\n  border: 0;\n  background: ${({ $isActive, theme }) => ($isActive ? theme.colors.primary100 : 'transparent')};\n  color: ${({ $isActive, theme }) =>\n    $isActive ? theme.colors.primary700 : theme.colors.neutral800};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  cursor: pointer;\n  text-align: left;\n  font: inherit;\n\n  &:hover {\n    background: ${({ $isActive, theme }) =>\n      $isActive ? theme.colors.primary100 : theme.colors.neutral100};\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.primary600};\n    outline-offset: -2px;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * useExpandedFolders — local expand/collapse state\n * -----------------------------------------------------------------------------------------------*/\n\nconst findAncestorIds = (\n  nodes: FolderNode[],\n  targetId: number,\n  trail: number[] = []\n): number[] | null => {\n  for (const node of nodes) {\n    if (node.id === targetId) {\n      return trail;\n    }\n\n    if (node.children?.length) {\n      const nextTrail = node.id != null ? [...trail, node.id] : trail;\n      const found = findAncestorIds(node.children, targetId, nextTrail);\n      if (found !== null) {\n        return found;\n      }\n    }\n  }\n\n  return null;\n};\n\nconst useExpandedFolders = (folderStructure: FolderNode[], currentFolderId: number | null) => {\n  const [expandedIds, setExpandedIds] = useState<Set<number>>(() => new Set());\n\n  useEffect(() => {\n    if (currentFolderId == null) {\n      return;\n    }\n\n    const ancestors = findAncestorIds(folderStructure, currentFolderId);\n    if (!ancestors || ancestors.length === 0) {\n      return;\n    }\n\n    setExpandedIds((prev) => {\n      const next = new Set(prev);\n      let changed = false;\n      for (const id of ancestors) {\n        if (!next.has(id)) {\n          next.add(id);\n          changed = true;\n        }\n      }\n      return changed ? next : prev;\n    });\n  }, [folderStructure, currentFolderId]);\n\n  const toggleExpanded = useCallback((id: number) => {\n    setExpandedIds((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        next.add(id);\n      }\n      return next;\n    });\n  }, []);\n\n  const isExpanded = useCallback((id: number) => expandedIds.has(id), [expandedIds]);\n\n  return { isExpanded, toggleExpanded };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * TruncatedFolderName — tooltip when the label is ellipsized\n * -----------------------------------------------------------------------------------------------*/\n\nconst TruncatedFolderName = ({ name, isActive }: { name: string; isActive: boolean }) => {\n  const textRef = useRef<HTMLSpanElement>(null);\n  const [isTruncated, setIsTruncated] = useState(false);\n\n  useLayoutEffect(() => {\n    const el = textRef.current;\n    if (!el) {\n      return;\n    }\n\n    const checkTruncation = () => {\n      setIsTruncated(el.scrollWidth > el.clientWidth);\n    };\n\n    checkTruncation();\n\n    const observer = new ResizeObserver(checkTruncation);\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [name]);\n\n  const label = (\n    <Typography\n      ref={textRef}\n      variant=\"omega\"\n      fontWeight={isActive ? 'semiBold' : 'regular'}\n      ellipsis\n    >\n      {name}\n    </Typography>\n  );\n\n  if (isTruncated) {\n    return <Tooltip label={name}>{label}</Tooltip>;\n  }\n\n  return label;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * NavList — unstyled list for tree rows\n * -----------------------------------------------------------------------------------------------*/\n\nconst NavList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * FolderTreeItem — single tree row (internal)\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDENT_PER_LEVEL_REM = 1.6;\n\nconst RotatingChevron = styled(ChevronDown)<{ $expanded: boolean }>`\n  transform: rotate(${({ $expanded }) => ($expanded ? '0deg' : '-90deg')});\n  transition: transform 0.2s ease;\n`;\n\ninterface FolderTreeItemProps {\n  node: FolderNode;\n  level: number;\n  currentFolderId: number | null;\n  isExpanded: (id: number) => boolean;\n  onToggle: (id: number) => void;\n  onSelect: (folderId: number) => void;\n}\n\nconst FolderTreeItem = ({\n  node,\n  level,\n  currentFolderId,\n  isExpanded,\n  onToggle,\n  onSelect,\n}: FolderTreeItemProps) => {\n  const { formatMessage } = useIntl();\n\n  if (node.id == null) {\n    return null;\n  }\n\n  const id = node.id;\n  const name = node.name ?? '';\n  const hasChildren = (node.children?.length ?? 0) > 0;\n  const isFolderExpanded = isExpanded(id);\n  const isActive = currentFolderId === id;\n\n  // TODO: full `role=\"tree\"` + arrow-key treeview navigation before revamp GA\n  // if an accessibility audit requires it (CMS-133 v1 is button rows only).\n  return (\n    <li>\n      <Flex alignItems=\"center\" paddingLeft={`${level * INDENT_PER_LEVEL_REM}rem`} gap={1}>\n        <IconButton\n          label={formatMessage(\n            {\n              id: getTranslationKey(\n                isFolderExpanded ? 'sidebar.tree.collapse' : 'sidebar.tree.expand'\n              ),\n              defaultMessage: isFolderExpanded ? 'Collapse {name}' : 'Expand {name}',\n            },\n            { name }\n          )}\n          onClick={(event: React.MouseEvent) => {\n            event.stopPropagation();\n            onToggle(id);\n          }}\n          variant=\"ghost\"\n          withTooltip={false}\n          aria-expanded={isFolderExpanded}\n        >\n          <RotatingChevron $expanded={isFolderExpanded} fill=\"neutral500\" />\n        </IconButton>\n\n        <Box flex=\"1\" minWidth={0}>\n          <RowButton\n            type=\"button\"\n            $isActive={isActive}\n            aria-current={isActive ? 'page' : undefined}\n            onClick={() => onSelect(id)}\n            data-testid={`folder-tree-node-${id}`}\n            data-folder-id={id}\n          >\n            <TruncatedFolderName name={name} isActive={isActive} />\n          </RowButton>\n        </Box>\n      </Flex>\n\n      {hasChildren && isFolderExpanded && (\n        <NavList>\n          {node.children.map((child) => (\n            <FolderTreeItem\n              key={child.id ?? child.name}\n              node={child}\n              level={level + 1}\n              currentFolderId={currentFolderId}\n              isExpanded={isExpanded}\n              onToggle={onToggle}\n              onSelect={onSelect}\n            />\n          ))}\n        </NavList>\n      )}\n    </li>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * FolderTree — public sidebar component\n * -----------------------------------------------------------------------------------------------*/\n\nconst SidebarNav = styled(Flex)`\n  /* TODO: reconcile 25.6rem (Figma) with admin WIDTH_SIDE_NAVIGATION (23.2rem) */\n  width: 25.6rem;\n  height: 100%;\n  min-height: 100%;\n  background: ${({ theme }) => theme.colors.neutral0};\n  flex-shrink: 0;\n  flex-direction: column;\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst SidebarHeader = styled(Box)`\n  flex-shrink: 0;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst SidebarBody = styled(Flex)`\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n`;\n\ninterface FolderTreeProps {\n  currentFolderId: number | null;\n  onSelectFolder: (folderId: number | null) => void;\n}\n\n/**\n * Left-rail navigation for the Media Library. Fetches folder structure internally\n * and renders:\n *\n * 1. A \"Media library\" title\n * 2. A \"Home\" entry that clears the folder query param\n * 3. A \"FOLDERS\" section header\n * 4. The folder tree itself\n *\n * Presentational with respect to routing — navigation is delegated to the parent\n * via `onSelectFolder` so the URL stays the single source of truth (see\n * `useFolderNavigation`).\n */\nexport const FolderTree = ({ currentFolderId, onSelectFolder }: FolderTreeProps) => {\n  const { formatMessage } = useIntl();\n  const { data: folderStructure = [], isLoading, isError } = useGetFolderStructureQuery();\n  const { isExpanded, toggleExpanded } = useExpandedFolders(folderStructure, currentFolderId);\n\n  const isHomeActive = currentFolderId == null;\n\n  return (\n    <SidebarNav\n      direction=\"column\"\n      alignItems=\"stretch\"\n      tag=\"nav\"\n      aria-label={formatMessage({\n        id: getTranslationKey('sidebar.tree.aria-label'),\n        defaultMessage: 'Media library folders',\n      })}\n    >\n      <SidebarHeader paddingTop={4} paddingBottom={4} paddingLeft={5} paddingRight={5}>\n        <Typography variant=\"beta\" tag=\"h2\">\n          {formatMessage({\n            id: getTranslationKey('sidebar.title'),\n            defaultMessage: 'Media library',\n          })}\n        </Typography>\n      </SidebarHeader>\n\n      <SidebarBody direction=\"column\" alignItems=\"stretch\" gap={1} padding={3}>\n        <RowButton\n          type=\"button\"\n          $isActive={isHomeActive}\n          aria-current={isHomeActive ? 'page' : undefined}\n          onClick={() => onSelectFolder(null)}\n          data-testid=\"folder-tree-home\"\n        >\n          <House aria-hidden width=\"1.6rem\" height=\"1.6rem\" />\n          <Typography variant=\"omega\" fontWeight={isHomeActive ? 'semiBold' : 'regular'}>\n            {formatMessage({\n              id: getTranslationKey('sidebar.home'),\n              defaultMessage: 'Home',\n            })}\n          </Typography>\n        </RowButton>\n\n        <Box>\n          <Flex alignItems=\"center\" gap={1} padding={1}>\n            <FolderIcon aria-hidden width=\"1.6rem\" height=\"1.6rem\" fill=\"neutral500\" />\n            <Typography\n              variant=\"sigma\"\n              textColor=\"neutral600\"\n              style={{ textTransform: 'uppercase' }}\n            >\n              {formatMessage({\n                id: getTranslationKey('sidebar.folders'),\n                defaultMessage: 'Folders',\n              })}\n            </Typography>\n          </Flex>\n\n          {isLoading ? (\n            // TODO: revisit loading state before revamp GA\n            <Flex justifyContent=\"center\" padding={1} paddingTop={2}>\n              <Loader>\n                {formatMessage({\n                  id: getTranslationKey('sidebar.tree.loading'),\n                  defaultMessage: 'Loading folders...',\n                })}\n              </Loader>\n            </Flex>\n          ) : isError ? (\n            // TODO: revisit error state before revamp GA\n            <Box padding={1} paddingTop={2}>\n              <Typography variant=\"pi\" textColor=\"danger600\">\n                {formatMessage({\n                  id: getTranslationKey('sidebar.tree.error'),\n                  defaultMessage: 'Could not load folders.',\n                })}\n              </Typography>\n            </Box>\n          ) : folderStructure.length === 0 ? (\n            // TODO: revisit empty state before revamp GA\n            <Box padding={1} paddingTop={2}>\n              <Typography variant=\"pi\" textColor=\"neutral500\">\n                {formatMessage({\n                  id: getTranslationKey('sidebar.tree.empty'),\n                  defaultMessage: 'No folders yet',\n                })}\n              </Typography>\n            </Box>\n          ) : (\n            <NavList>\n              {folderStructure.map((node) => (\n                <FolderTreeItem\n                  key={node.id ?? node.name}\n                  node={node}\n                  level={0}\n                  currentFolderId={currentFolderId}\n                  isExpanded={isExpanded}\n                  onToggle={toggleExpanded}\n                  onSelect={onSelectFolder}\n                />\n              ))}\n            </NavList>\n          )}\n        </Box>\n      </SidebarBody>\n    </SidebarNav>\n  );\n};\n"],"names":["RowButton","styled","button","theme","spaces","$isActive","colors","primary100","primary700","neutral800","borderRadius","neutral100","primary600","findAncestorIds","nodes","targetId","trail","node","id","children","length","nextTrail","found","useExpandedFolders","folderStructure","currentFolderId","expandedIds","setExpandedIds","useState","Set","useEffect","ancestors","prev","next","changed","has","add","toggleExpanded","useCallback","delete","isExpanded","TruncatedFolderName","name","isActive","textRef","useRef","isTruncated","setIsTruncated","useLayoutEffect","el","current","checkTruncation","scrollWidth","clientWidth","observer","ResizeObserver","observe","disconnect","label","_jsx","Typography","ref","variant","fontWeight","ellipsis","Tooltip","NavList","ul","INDENT_PER_LEVEL_REM","RotatingChevron","ChevronDown","$expanded","FolderTreeItem","level","onToggle","onSelect","formatMessage","useIntl","hasChildren","isFolderExpanded","_jsxs","li","Flex","alignItems","paddingLeft","gap","IconButton","getTranslationKey","defaultMessage","onClick","event","stopPropagation","withTooltip","aria-expanded","fill","Box","flex","minWidth","type","aria-current","undefined","data-testid","data-folder-id","map","child","SidebarNav","neutral0","neutral150","SidebarHeader","SidebarBody","FolderTree","onSelectFolder","data","isLoading","isError","useGetFolderStructureQuery","isHomeActive","direction","tag","aria-label","paddingTop","paddingBottom","paddingRight","padding","House","aria-hidden","width","height","FolderIcon","textColor","style","textTransform","justifyContent","Loader"],"mappings":"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"}

package/dist/admin/future/pages/Assets/components/ImportFromUrlDialog.js

@@ -7,7 +7,8 @@ var reactIntl = require('react-intl');
 var files = require('../../../utils/files.js');
 var translations = require('../../../utils/translations.js');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -24,7 +25,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 const ImportFromUrlDialog = ({ open, onClose, onUpload })=>{
     const { formatMessage } = reactIntl.useIntl();

package/dist/admin/future/pages/Assets/components/ImportFromUrlDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImportFromUrlDialog.js","sources":["../../../../../../admin/src/future/pages/Assets/components/ImportFromUrlDialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { validateUrls } from '../../../utils/files';\nimport { getTranslationKey } from '../../../utils/translations';\n\ninterface ImportFromUrlDialogProps {\n  open: boolean;\n  onClose: () => void;\n  onUpload: (urls: string[]) => Promise<void>;\n}\n\nexport const ImportFromUrlDialog = ({ open, onClose, onUpload }: ImportFromUrlDialogProps) => {\n  const { formatMessage } = useIntl();\n  const [urls, setUrls] = React.useState('');\n  const [error, setError] = React.useState<string | null>(null);\n\n  const handleClose = () => {\n    setUrls('');\n    setError(null);\n    onClose();\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    // Validate URLs\n    const { urls: validUrls, error: validationError } = validateUrls(urls);\n    if (validationError) {\n      setError(validationError);\n      return;\n    }\n\n    setError(null);\n\n    // Close dialog and let the mutation handle fetching and uploading\n    handleClose();\n\n    // Pass URLs to mutation which handles fetching and upload progress\n    await onUpload(validUrls);\n  };\n\n  return (\n    <Modal.Root open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>\n      <Modal.Content>\n        <form onSubmit={handleSubmit}>\n          <Modal.Header>\n            <Modal.Title>\n              {formatMessage({\n                id: getTranslationKey('modal.url.title'),\n                defaultMessage: 'Import from URL',\n              })}\n            </Modal.Title>\n          </Modal.Header>\n\n          <Modal.Body>\n            <Field.Root\n              error={error || undefined}\n              hint={formatMessage({\n                id: getTranslationKey('input.url.description'),\n                defaultMessage: 'Separate your URL links by a carriage return.',\n              })}\n            >\n              <Field.Label>\n                {formatMessage({\n                  id: getTranslationKey('input.url.label'),\n                  defaultMessage: 'URL(s)',\n                })}\n              </Field.Label>\n              <Textarea\n                name=\"urls\"\n                minHeight=\"unset\"\n                rows={Math.min(urls.split('\\n').length, 7)}\n                maxHeight=\"10.5rem\"\n                placeholder={formatMessage({\n                  id: getTranslationKey('input.url.placeholder'),\n                  defaultMessage: 'Empty',\n                })}\n                value={urls}\n                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {\n                  setUrls(e.target.value);\n                  setError(null);\n                }}\n              />\n              <Field.Hint />\n              <Field.Error />\n            </Field.Root>\n          </Modal.Body>\n\n          <Modal.Footer>\n            <Button variant=\"tertiary\" onClick={handleClose}>\n              {formatMessage({\n                id: 'app.components.Button.cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n            <Button type=\"submit\">\n              {formatMessage({\n                id: getTranslationKey('modal.url.upload'),\n                defaultMessage: 'Upload',\n              })}\n            </Button>\n          </Modal.Footer>\n        </form>\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n"],"names":["ImportFromUrlDialog","open","onClose","onUpload","formatMessage","useIntl","urls","setUrls","React","useState","error","setError","handleClose","handleSubmit","e","preventDefault","validUrls","validationError","validateUrls","_jsx","Modal","Root","onOpenChange","isOpen","Content","_jsxs","form","onSubmit","Header","Title","id","getTranslationKey","defaultMessage","Body","Field","undefined","hint","Label","Textarea","name","minHeight","rows","Math","min","split","length","maxHeight","placeholder","value","onChange","target","Hint","Error","Footer","Button","variant","onClick","type"],"mappings":"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"}
+{"version":3,"file":"ImportFromUrlDialog.js","sources":["../../../../../../admin/src/future/pages/Assets/components/ImportFromUrlDialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { validateUrls } from '../../../utils/files';\nimport { getTranslationKey } from '../../../utils/translations';\n\ninterface ImportFromUrlDialogProps {\n  open: boolean;\n  onClose: () => void;\n  onUpload: (urls: string[]) => Promise<void>;\n}\n\nexport const ImportFromUrlDialog = ({ open, onClose, onUpload }: ImportFromUrlDialogProps) => {\n  const { formatMessage } = useIntl();\n  const [urls, setUrls] = React.useState('');\n  const [error, setError] = React.useState<string | null>(null);\n\n  const handleClose = () => {\n    setUrls('');\n    setError(null);\n    onClose();\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    // Validate URLs\n    const { urls: validUrls, error: validationError } = validateUrls(urls);\n    if (validationError) {\n      setError(validationError);\n      return;\n    }\n\n    setError(null);\n\n    // Close dialog and let the mutation handle fetching and uploading\n    handleClose();\n\n    // Pass URLs to mutation which handles fetching and upload progress\n    await onUpload(validUrls);\n  };\n\n  return (\n    <Modal.Root open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>\n      <Modal.Content>\n        <form onSubmit={handleSubmit}>\n          <Modal.Header>\n            <Modal.Title>\n              {formatMessage({\n                id: getTranslationKey('modal.url.title'),\n                defaultMessage: 'Import from URL',\n              })}\n            </Modal.Title>\n          </Modal.Header>\n\n          <Modal.Body>\n            <Field.Root\n              error={error || undefined}\n              hint={formatMessage({\n                id: getTranslationKey('input.url.description'),\n                defaultMessage: 'Separate your URL links by a carriage return.',\n              })}\n            >\n              <Field.Label>\n                {formatMessage({\n                  id: getTranslationKey('input.url.label'),\n                  defaultMessage: 'URL(s)',\n                })}\n              </Field.Label>\n              <Textarea\n                name=\"urls\"\n                minHeight=\"unset\"\n                rows={Math.min(urls.split('\\n').length, 7)}\n                maxHeight=\"10.5rem\"\n                placeholder={formatMessage({\n                  id: getTranslationKey('input.url.placeholder'),\n                  defaultMessage: 'Empty',\n                })}\n                value={urls}\n                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {\n                  setUrls(e.target.value);\n                  setError(null);\n                }}\n              />\n              <Field.Hint />\n              <Field.Error />\n            </Field.Root>\n          </Modal.Body>\n\n          <Modal.Footer>\n            <Button variant=\"tertiary\" onClick={handleClose}>\n              {formatMessage({\n                id: 'app.components.Button.cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n            <Button type=\"submit\">\n              {formatMessage({\n                id: getTranslationKey('modal.url.upload'),\n                defaultMessage: 'Upload',\n              })}\n            </Button>\n          </Modal.Footer>\n        </form>\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n"],"names":["ImportFromUrlDialog","open","onClose","onUpload","formatMessage","useIntl","urls","setUrls","React","useState","error","setError","handleClose","handleSubmit","e","preventDefault","validUrls","validationError","validateUrls","_jsx","Modal","Root","onOpenChange","isOpen","Content","_jsxs","form","onSubmit","Header","Title","id","getTranslationKey","defaultMessage","Body","Field","undefined","hint","Label","Textarea","name","minHeight","rows","Math","min","split","length","maxHeight","placeholder","value","onChange","target","Hint","Error","Footer","Button","variant","onClick","type"],"mappings":"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"}

package/dist/admin/future/pages/Assets/hooks/useFolderInfo.js

@@ -34,15 +34,15 @@ const useFolderInfo = (currentFolderId)=>{
             itemCount: rootAssetsData?.pagination?.total ?? 0
         };
     }
-    if (isLoading) {
+    if (isLoading || !currentFolder) {
         return {
-            title: homeLabel,
+            title: '',
             itemCount: 0
         };
     }
     return {
-        title: currentFolder?.name ?? homeLabel,
-        itemCount: currentFolder?.files?.count ?? 0
+        title: currentFolder.name,
+        itemCount: currentFolder.files?.count ?? 0
     };
 };
 

package/dist/admin/future/pages/Assets/hooks/useFolderInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFolderInfo.js","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useFolderInfo.ts"],"sourcesContent":["import { useIntl } from 'react-intl';\n\nimport { useGetAssetsQuery } from '../../../services/assets';\nimport { useGetFolderQuery } from '../../../services/folders';\nimport { getTranslationKey } from '../../../utils/translations';\n\nexport interface FolderInfo {\n  title: string;\n  itemCount: number;\n}\n\nexport const useFolderInfo = (currentFolderId: number | null): FolderInfo => {\n  const { formatMessage } = useIntl();\n  const { data: currentFolder, isLoading } = useGetFolderQuery(\n    { id: currentFolderId! },\n    { skip: currentFolderId === null }\n  );\n  const { data: rootAssetsData, isLoading: isRootAssetsLoading } = useGetAssetsQuery(\n    { folder: null, pageSize: 1 },\n    { skip: currentFolderId !== null }\n  );\n\n  const homeLabel = formatMessage({\n    id: getTranslationKey('plugin.home'),\n    defaultMessage: 'Home',\n  });\n\n  if (currentFolderId === null) {\n    if (isRootAssetsLoading) {\n      return { title: homeLabel, itemCount: 0 };\n    }\n\n    return { title: homeLabel, itemCount: rootAssetsData?.pagination?.total ?? 0 };\n  }\n\n  if (isLoading) {\n    return { title: homeLabel, itemCount: 0 };\n  }\n\n  return {\n    title: currentFolder?.name ?? homeLabel,\n    itemCount: currentFolder?.files?.count ?? 0,\n  };\n};\n"],"names":["useFolderInfo","currentFolderId","formatMessage","useIntl","data","currentFolder","isLoading","useGetFolderQuery","id","skip","rootAssetsData","isRootAssetsLoading","useGetAssetsQuery","folder","pageSize","homeLabel","getTranslationKey","defaultMessage","title","itemCount","pagination","total","name","files","count"],"mappings":";;;;;;;AAWO,MAAMA,gBAAgB,CAACC,eAAAA,GAAAA;IAC5B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,IAAAA,EAAMC,aAAa,EAAEC,SAAS,EAAE,GAAGC,yBAAAA,CACzC;QAAEC,EAAAA,EAAIP;KAAiB,EACvB;AAAEQ,QAAAA,IAAAA,EAAMR,eAAAA,KAAoB;AAAK,KAAA,CAAA;IAEnC,MAAM,EAAEG,MAAMM,cAAc,EAAEJ,WAAWK,mBAAmB,EAAE,GAAGC,wBAAAA,CAC/D;QAAEC,MAAAA,EAAQ,IAAA;QAAMC,QAAAA,EAAU;KAAE,EAC5B;AAAEL,QAAAA,IAAAA,EAAMR,eAAAA,KAAoB;AAAK,KAAA,CAAA;AAGnC,IAAA,MAAMc,YAAYb,aAAAA,CAAc;AAC9BM,QAAAA,EAAAA,EAAIQ,8BAAAA,CAAkB,aAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA,CAAA;AAEA,IAAA,IAAIhB,oBAAoB,IAAA,EAAM;AAC5B,QAAA,IAAIU,mBAAAA,EAAqB;YACvB,OAAO;gBAAEO,KAAAA,EAAOH,SAAAA;gBAAWI,SAAAA,EAAW;AAAE,aAAA;AAC1C,QAAA;QAEA,OAAO;YAAED,KAAAA,EAAOH,SAAAA;YAAWI,SAAAA,EAAWT,cAAAA,EAAgBU,YAAYC,KAAAA,IAAS;AAAE,SAAA;AAC/E,IAAA;AAEA,IAAA,IAAIf,SAAAA,EAAW;QACb,OAAO;YAAEY,KAAAA,EAAOH,SAAAA;YAAWI,SAAAA,EAAW;AAAE,SAAA;AAC1C,IAAA;IAEA,OAAO;AACLD,QAAAA,KAAAA,EAAOb,eAAeiB,IAAAA,IAAQP,SAAAA;QAC9BI,SAAAA,EAAWd,aAAAA,EAAekB,OAAOC,KAAAA,IAAS;AAC5C,KAAA;AACF;;;;"}
+{"version":3,"file":"useFolderInfo.js","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useFolderInfo.ts"],"sourcesContent":["import { useIntl } from 'react-intl';\n\nimport { useGetAssetsQuery } from '../../../services/assets';\nimport { useGetFolderQuery } from '../../../services/folders';\nimport { getTranslationKey } from '../../../utils/translations';\n\nexport interface FolderInfo {\n  title: string;\n  itemCount: number;\n}\n\nexport const useFolderInfo = (currentFolderId: number | null): FolderInfo => {\n  const { formatMessage } = useIntl();\n  const { data: currentFolder, isLoading } = useGetFolderQuery(\n    { id: currentFolderId! },\n    { skip: currentFolderId === null }\n  );\n  const { data: rootAssetsData, isLoading: isRootAssetsLoading } = useGetAssetsQuery(\n    { folder: null, pageSize: 1 },\n    { skip: currentFolderId !== null }\n  );\n\n  const homeLabel = formatMessage({\n    id: getTranslationKey('plugin.home'),\n    defaultMessage: 'Home',\n  });\n\n  if (currentFolderId === null) {\n    if (isRootAssetsLoading) {\n      return { title: homeLabel, itemCount: 0 };\n    }\n\n    return { title: homeLabel, itemCount: rootAssetsData?.pagination?.total ?? 0 };\n  }\n\n  if (isLoading || !currentFolder) {\n    return { title: '', itemCount: 0 };\n  }\n\n  return {\n    title: currentFolder.name,\n    itemCount: currentFolder.files?.count ?? 0,\n  };\n};\n"],"names":["useFolderInfo","currentFolderId","formatMessage","useIntl","data","currentFolder","isLoading","useGetFolderQuery","id","skip","rootAssetsData","isRootAssetsLoading","useGetAssetsQuery","folder","pageSize","homeLabel","getTranslationKey","defaultMessage","title","itemCount","pagination","total","name","files","count"],"mappings":";;;;;;;AAWO,MAAMA,gBAAgB,CAACC,eAAAA,GAAAA;IAC5B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,IAAAA,EAAMC,aAAa,EAAEC,SAAS,EAAE,GAAGC,yBAAAA,CACzC;QAAEC,EAAAA,EAAIP;KAAiB,EACvB;AAAEQ,QAAAA,IAAAA,EAAMR,eAAAA,KAAoB;AAAK,KAAA,CAAA;IAEnC,MAAM,EAAEG,MAAMM,cAAc,EAAEJ,WAAWK,mBAAmB,EAAE,GAAGC,wBAAAA,CAC/D;QAAEC,MAAAA,EAAQ,IAAA;QAAMC,QAAAA,EAAU;KAAE,EAC5B;AAAEL,QAAAA,IAAAA,EAAMR,eAAAA,KAAoB;AAAK,KAAA,CAAA;AAGnC,IAAA,MAAMc,YAAYb,aAAAA,CAAc;AAC9BM,QAAAA,EAAAA,EAAIQ,8BAAAA,CAAkB,aAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA,CAAA;AAEA,IAAA,IAAIhB,oBAAoB,IAAA,EAAM;AAC5B,QAAA,IAAIU,mBAAAA,EAAqB;YACvB,OAAO;gBAAEO,KAAAA,EAAOH,SAAAA;gBAAWI,SAAAA,EAAW;AAAE,aAAA;AAC1C,QAAA;QAEA,OAAO;YAAED,KAAAA,EAAOH,SAAAA;YAAWI,SAAAA,EAAWT,cAAAA,EAAgBU,YAAYC,KAAAA,IAAS;AAAE,SAAA;AAC/E,IAAA;IAEA,IAAIf,SAAAA,IAAa,CAACD,aAAAA,EAAe;QAC/B,OAAO;YAAEa,KAAAA,EAAO,EAAA;YAAIC,SAAAA,EAAW;AAAE,SAAA;AACnC,IAAA;IAEA,OAAO;AACLD,QAAAA,KAAAA,EAAOb,cAAciB,IAAI;QACzBH,SAAAA,EAAWd,aAAAA,CAAckB,KAAK,EAAEC,KAAAA,IAAS;AAC3C,KAAA;AACF;;;;"}

package/dist/admin/future/pages/Assets/hooks/useFolderInfo.mjs

@@ -32,15 +32,15 @@ const useFolderInfo = (currentFolderId)=>{
             itemCount: rootAssetsData?.pagination?.total ?? 0
         };
     }
-    if (isLoading) {
+    if (isLoading || !currentFolder) {
         return {
-            title: homeLabel,
+            title: '',
             itemCount: 0
         };
     }
     return {
-        title: currentFolder?.name ?? homeLabel,
-        itemCount: currentFolder?.files?.count ?? 0
+        title: currentFolder.name,
+        itemCount: currentFolder.files?.count ?? 0
     };
 };
 

package/dist/admin/future/pages/Assets/hooks/useFolderInfo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFolderInfo.mjs","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useFolderInfo.ts"],"sourcesContent":["import { useIntl } from 'react-intl';\n\nimport { useGetAssetsQuery } from '../../../services/assets';\nimport { useGetFolderQuery } from '../../../services/folders';\nimport { getTranslationKey } from '../../../utils/translations';\n\nexport interface FolderInfo {\n  title: string;\n  itemCount: number;\n}\n\nexport const useFolderInfo = (currentFolderId: number | null): FolderInfo => {\n  const { formatMessage } = useIntl();\n  const { data: currentFolder, isLoading } = useGetFolderQuery(\n    { id: currentFolderId! },\n    { skip: currentFolderId === null }\n  );\n  const { data: rootAssetsData, isLoading: isRootAssetsLoading } = useGetAssetsQuery(\n    { folder: null, pageSize: 1 },\n    { skip: currentFolderId !== null }\n  );\n\n  const homeLabel = formatMessage({\n    id: getTranslationKey('plugin.home'),\n    defaultMessage: 'Home',\n  });\n\n  if (currentFolderId === null) {\n    if (isRootAssetsLoading) {\n      return { title: homeLabel, itemCount: 0 };\n    }\n\n    return { title: homeLabel, itemCount: rootAssetsData?.pagination?.total ?? 0 };\n  }\n\n  if (isLoading) {\n    return { title: homeLabel, itemCount: 0 };\n  }\n\n  return {\n    title: currentFolder?.name ?? homeLabel,\n    itemCount: currentFolder?.files?.count ?? 0,\n  };\n};\n"],"names":["useFolderInfo","currentFolderId","formatMessage","useIntl","data","currentFolder","isLoading","useGetFolderQuery","id","skip","rootAssetsData","isRootAssetsLoading","useGetAssetsQuery","folder","pageSize","homeLabel","getTranslationKey","defaultMessage","title","itemCount","pagination","total","name","files","count"],"mappings":";;;;;AAWO,MAAMA,gBAAgB,CAACC,eAAAA,GAAAA;IAC5B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,IAAAA,EAAMC,aAAa,EAAEC,SAAS,EAAE,GAAGC,iBAAAA,CACzC;QAAEC,EAAAA,EAAIP;KAAiB,EACvB;AAAEQ,QAAAA,IAAAA,EAAMR,eAAAA,KAAoB;AAAK,KAAA,CAAA;IAEnC,MAAM,EAAEG,MAAMM,cAAc,EAAEJ,WAAWK,mBAAmB,EAAE,GAAGC,iBAAAA,CAC/D;QAAEC,MAAAA,EAAQ,IAAA;QAAMC,QAAAA,EAAU;KAAE,EAC5B;AAAEL,QAAAA,IAAAA,EAAMR,eAAAA,KAAoB;AAAK,KAAA,CAAA;AAGnC,IAAA,MAAMc,YAAYb,aAAAA,CAAc;AAC9BM,QAAAA,EAAAA,EAAIQ,iBAAAA,CAAkB,aAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA,CAAA;AAEA,IAAA,IAAIhB,oBAAoB,IAAA,EAAM;AAC5B,QAAA,IAAIU,mBAAAA,EAAqB;YACvB,OAAO;gBAAEO,KAAAA,EAAOH,SAAAA;gBAAWI,SAAAA,EAAW;AAAE,aAAA;AAC1C,QAAA;QAEA,OAAO;YAAED,KAAAA,EAAOH,SAAAA;YAAWI,SAAAA,EAAWT,cAAAA,EAAgBU,YAAYC,KAAAA,IAAS;AAAE,SAAA;AAC/E,IAAA;AAEA,IAAA,IAAIf,SAAAA,EAAW;QACb,OAAO;YAAEY,KAAAA,EAAOH,SAAAA;YAAWI,SAAAA,EAAW;AAAE,SAAA;AAC1C,IAAA;IAEA,OAAO;AACLD,QAAAA,KAAAA,EAAOb,eAAeiB,IAAAA,IAAQP,SAAAA;QAC9BI,SAAAA,EAAWd,aAAAA,EAAekB,OAAOC,KAAAA,IAAS;AAC5C,KAAA;AACF;;;;"}
+{"version":3,"file":"useFolderInfo.mjs","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useFolderInfo.ts"],"sourcesContent":["import { useIntl } from 'react-intl';\n\nimport { useGetAssetsQuery } from '../../../services/assets';\nimport { useGetFolderQuery } from '../../../services/folders';\nimport { getTranslationKey } from '../../../utils/translations';\n\nexport interface FolderInfo {\n  title: string;\n  itemCount: number;\n}\n\nexport const useFolderInfo = (currentFolderId: number | null): FolderInfo => {\n  const { formatMessage } = useIntl();\n  const { data: currentFolder, isLoading } = useGetFolderQuery(\n    { id: currentFolderId! },\n    { skip: currentFolderId === null }\n  );\n  const { data: rootAssetsData, isLoading: isRootAssetsLoading } = useGetAssetsQuery(\n    { folder: null, pageSize: 1 },\n    { skip: currentFolderId !== null }\n  );\n\n  const homeLabel = formatMessage({\n    id: getTranslationKey('plugin.home'),\n    defaultMessage: 'Home',\n  });\n\n  if (currentFolderId === null) {\n    if (isRootAssetsLoading) {\n      return { title: homeLabel, itemCount: 0 };\n    }\n\n    return { title: homeLabel, itemCount: rootAssetsData?.pagination?.total ?? 0 };\n  }\n\n  if (isLoading || !currentFolder) {\n    return { title: '', itemCount: 0 };\n  }\n\n  return {\n    title: currentFolder.name,\n    itemCount: currentFolder.files?.count ?? 0,\n  };\n};\n"],"names":["useFolderInfo","currentFolderId","formatMessage","useIntl","data","currentFolder","isLoading","useGetFolderQuery","id","skip","rootAssetsData","isRootAssetsLoading","useGetAssetsQuery","folder","pageSize","homeLabel","getTranslationKey","defaultMessage","title","itemCount","pagination","total","name","files","count"],"mappings":";;;;;AAWO,MAAMA,gBAAgB,CAACC,eAAAA,GAAAA;IAC5B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,IAAAA,EAAMC,aAAa,EAAEC,SAAS,EAAE,GAAGC,iBAAAA,CACzC;QAAEC,EAAAA,EAAIP;KAAiB,EACvB;AAAEQ,QAAAA,IAAAA,EAAMR,eAAAA,KAAoB;AAAK,KAAA,CAAA;IAEnC,MAAM,EAAEG,MAAMM,cAAc,EAAEJ,WAAWK,mBAAmB,EAAE,GAAGC,iBAAAA,CAC/D;QAAEC,MAAAA,EAAQ,IAAA;QAAMC,QAAAA,EAAU;KAAE,EAC5B;AAAEL,QAAAA,IAAAA,EAAMR,eAAAA,KAAoB;AAAK,KAAA,CAAA;AAGnC,IAAA,MAAMc,YAAYb,aAAAA,CAAc;AAC9BM,QAAAA,EAAAA,EAAIQ,iBAAAA,CAAkB,aAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA,CAAA;AAEA,IAAA,IAAIhB,oBAAoB,IAAA,EAAM;AAC5B,QAAA,IAAIU,mBAAAA,EAAqB;YACvB,OAAO;gBAAEO,KAAAA,EAAOH,SAAAA;gBAAWI,SAAAA,EAAW;AAAE,aAAA;AAC1C,QAAA;QAEA,OAAO;YAAED,KAAAA,EAAOH,SAAAA;YAAWI,SAAAA,EAAWT,cAAAA,EAAgBU,YAAYC,KAAAA,IAAS;AAAE,SAAA;AAC/E,IAAA;IAEA,IAAIf,SAAAA,IAAa,CAACD,aAAAA,EAAe;QAC/B,OAAO;YAAEa,KAAAA,EAAO,EAAA;YAAIC,SAAAA,EAAW;AAAE,SAAA;AACnC,IAAA;IAEA,OAAO;AACLD,QAAAA,KAAAA,EAAOb,cAAciB,IAAI;QACzBH,SAAAA,EAAWd,aAAAA,CAAckB,KAAK,EAAEC,KAAAA,IAAS;AAC3C,KAAA;AACF;;;;"}

package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.js

@@ -1,18 +1,64 @@
 'use strict';
 
+var React = require('react');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
 
+const parseFolderIdFromQuery = (folder)=>{
+    if (!folder) {
+        return null;
+    }
+    const id = Number(folder);
+    return Number.isFinite(id) ? id : null;
+};
 const useFolderNavigation = ()=>{
     const [{ query }, setQuery] = strapiAdmin.useQueryParams();
-    const currentFolderId = query?.folder ? Number(query.folder) : null;
+    const currentFolderId = parseFolderIdFromQuery(query?.folder);
     const navigateToFolder = (folder)=>{
         setQuery({
             folder: String(folder.id)
         });
     };
+    /**
+   * Move to the Media Library root by removing the `folder` query param.
+   * `setQuery(_, 'remove')` deletes the keys present on the first argument
+   * (value is ignored), so any other query state (filters, pagination, etc.)
+   * is preserved.
+   */ const navigateToRoot = React.useCallback(()=>{
+        setQuery({
+            folder: ''
+        }, 'remove');
+    }, [
+        setQuery
+    ]);
+    // Malformed ?folder= values (e.g. abc) parse as null; strip the param from the URL.
+    // Deleted/missing folders (404) are handled in AssetsPage — that needs a fetch.
+    React.useEffect(()=>{
+        if (query?.folder && currentFolderId === null) {
+            navigateToRoot();
+        }
+    }, [
+        query?.folder,
+        currentFolderId,
+        navigateToRoot
+    ]);
+    /**
+   * Convenience for the FolderTree sidebar: a single entry point that handles
+   * both "go home" and "go to folder X" without forcing the caller to know
+   * whether to call navigateToFolder or navigateToRoot.
+   */ const navigateToFolderId = (folderId)=>{
+        if (folderId == null) {
+            navigateToRoot();
+        } else {
+            setQuery({
+                folder: String(folderId)
+            });
+        }
+    };
     return {
         currentFolderId,
-        navigateToFolder
+        navigateToFolder,
+        navigateToRoot,
+        navigateToFolderId
     };
 };