@strapi/upload 5.51.1 → 5.51.2

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

@@ -10,6 +10,7 @@ var folders = require('../../../../services/folders.js');
 var translations = require('../../../../utils/translations.js');
 var AssetsDndProvider = require('../Dnd/AssetsDndProvider.js');
 var useFolderTreeDroppable = require('../Dnd/useFolderTreeDroppable.js');
+var filterFolderTree = require('./filterFolderTree.js');
 var useSpringLoadedExpand = require('./useSpringLoadedExpand.js');
 
 /* -------------------------------------------------------------------------------------------------
@@ -199,11 +200,11 @@ const RotatingChevron = styledComponents.styled(icons.ChevronDown)`
   transform: rotate(${({ $expanded })=>$expanded ? '0deg' : '-90deg'});
   transition: transform 0.2s ease;
 `;
-const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId, isExpanded, onToggle, onExpand, onSelect, isMovePending })=>{
+const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId, showActiveFolder, isExpanded, onToggle, onExpand, onSelect, isMovePending })=>{
     const { formatMessage } = reactIntl.useIntl();
     const hasChildren = folderChildren.length > 0;
     const isFolderExpanded = isExpanded(id);
-    const isActive = currentFolderId === id;
+    const isActive = showActiveFolder && currentFolderId === id;
     const { droppable: { setNodeRef }, isOver, showValidDropHighlight, showInvalidDropCursor } = useFolderTreeDroppable.useFolderTreeDroppable({
         id,
         name
@@ -275,6 +276,7 @@ const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId,
                         node: child,
                         level: level + 1,
                         currentFolderId: currentFolderId,
+                        showActiveFolder: showActiveFolder,
                         isExpanded: isExpanded,
                         onToggle: onToggle,
                         onExpand: onExpand,
@@ -322,21 +324,44 @@ const SidebarBody = styledComponents.styled(designSystem.Flex)`
  * 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
+ * 2. A filter input that prunes the tree to matching destinations
+ * 3. A "Home" entry that clears the folder query param
+ * 4. A "FOLDERS" section header
+ * 5. The folder tree itself
+ *
+ * The filter is purely local: it never touches the URL and never affects the
+ * asset list, which has its own independent search in the content toolbar.
  *
  * 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 } = reactIntl.useIntl();
+ */ const FolderTree = ({ currentFolderId, showActiveFolder = true, onSelectFolder })=>{
+    const { formatMessage, locale } = reactIntl.useIntl();
     const { data: folderStructure = [], isLoading, isError } = folders.useGetFolderStructureQuery();
     const { isExpanded, toggleExpanded, expandFolder } = useExpandedFolders(folderStructure, currentFolderId);
     const { isMovePending } = AssetsDndProvider.useAssetsDndOptional() ?? {
         isMovePending: false
     };
-    const isHomeActive = currentFolderId == null;
+    const [treeFilter, setTreeFilter] = React.useState('');
+    const { contains } = designSystem.useFilter(locale, {
+        sensitivity: 'base'
+    });
+    const trimmedFilter = treeFilter.trim();
+    const { nodes: visibleNodes, expandedIds: filterExpandedIds } = React.useMemo(()=>trimmedFilter ? filterFolderTree.filterFolderTree(folderStructure, (name)=>contains(name, trimmedFilter)) : {
+            nodes: folderStructure,
+            expandedIds: []
+        }, [
+        folderStructure,
+        trimmedFilter,
+        contains
+    ]);
+    // An override layered on top of the user's own expansion rather than written
+    // into it, so clearing the filter restores exactly what they had open.
+    const isExpandedForRender = React.useCallback((id)=>filterExpandedIds.includes(id) || isExpanded(id), [
+        filterExpandedIds,
+        isExpanded
+    ]);
+    const isHomeActive = showActiveFolder && currentFolderId == null;
     const homeLabel = formatMessage({
         id: translations.getTranslationKey('sidebar.home'),
         defaultMessage: 'Home'
@@ -359,13 +384,39 @@ const SidebarBody = styledComponents.styled(designSystem.Flex)`
                 paddingBottom: 4,
                 paddingLeft: 5,
                 paddingRight: 5,
-                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                    variant: "beta",
-                    tag: "h2",
-                    children: formatMessage({
-                        id: translations.getTranslationKey('sidebar.title'),
-                        defaultMessage: 'Media library'
-                    })
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    direction: "column",
+                    alignItems: "stretch",
+                    gap: 4,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            variant: "beta",
+                            tag: "h2",
+                            children: formatMessage({
+                                id: translations.getTranslationKey('sidebar.title'),
+                                defaultMessage: 'Media library'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Searchbar, {
+                            name: "search-folders",
+                            value: treeFilter,
+                            onChange: (event)=>setTreeFilter(event.target.value),
+                            onClear: ()=>setTreeFilter(''),
+                            clearLabel: formatMessage({
+                                id: 'clearLabel',
+                                defaultMessage: 'Clear'
+                            }),
+                            placeholder: formatMessage({
+                                id: translations.getTranslationKey('sidebar.search.placeholder'),
+                                defaultMessage: 'Search folders'
+                            }),
+                            size: "S",
+                            children: formatMessage({
+                                id: translations.getTranslationKey('sidebar.search.label'),
+                                defaultMessage: 'Search folders'
+                            })
+                        })
+                    ]
                 })
             }),
             /*#__PURE__*/ jsxRuntime.jsxs(SidebarBody, {
@@ -451,24 +502,30 @@ const SidebarBody = styledComponents.styled(designSystem.Flex)`
                                         defaultMessage: 'Could not load folders.'
                                     })
                                 })
-                            }) : folderStructure.length === 0 ? // TODO: revisit empty state before revamp GA
+                            }) : visibleNodes.length === 0 ? // TODO: revisit empty state before revamp GA
                             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
                                 padding: 1,
                                 paddingTop: 2,
                                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                                     variant: "pi",
                                     textColor: "neutral500",
-                                    children: formatMessage({
+                                    children: trimmedFilter ? formatMessage({
+                                        id: translations.getTranslationKey('sidebar.tree.no-results'),
+                                        defaultMessage: 'No folders match "{query}"'
+                                    }, {
+                                        query: trimmedFilter
+                                    }) : formatMessage({
                                         id: translations.getTranslationKey('sidebar.tree.empty'),
                                         defaultMessage: 'No folders yet'
                                     })
                                 })
                             }) : /*#__PURE__*/ jsxRuntime.jsx(NavList, {
-                                children: folderStructure.map((node)=>/*#__PURE__*/ jsxRuntime.jsx(FolderTreeItem, {
+                                children: visibleNodes.map((node)=>/*#__PURE__*/ jsxRuntime.jsx(FolderTreeItem, {
                                         node: node,
                                         level: 0,
                                         currentFolderId: currentFolderId,
-                                        isExpanded: isExpanded,
+                                        showActiveFolder: showActiveFolder,
+                                        isExpanded: isExpandedForRender,
                                         onToggle: toggleExpanded,
                                         onExpand: expandFolder,
                                         onSelect: onSelectFolder,

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

@@ -1 +1 @@
-{"version":3,"file":"FolderTree.js","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 { css, styled } from 'styled-components';\n\nimport { useGetFolderStructureQuery } from '../../../../services/folders';\nimport { getTranslationKey } from '../../../../utils/translations';\nimport { useAssetsDndOptional } from '../Dnd/AssetsDndProvider';\nimport { useFolderTreeDroppable } from '../Dnd/useFolderTreeDroppable';\n\nimport { useSpringLoadedExpand } from './useSpringLoadedExpand';\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<{\n  $isActive: boolean;\n  $isValidDropTarget?: boolean;\n  $isInvalidDropCursor?: boolean;\n  $isMovePending?: boolean;\n}>`\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, $isValidDropTarget, theme }) => {\n    if ($isValidDropTarget) {\n      return theme.colors.primary100;\n    }\n\n    return $isActive ? theme.colors.primary100 : 'transparent';\n  }};\n  color: ${({ $isActive, theme }) =>\n    $isActive ? theme.colors.primary700 : theme.colors.neutral800};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  cursor: ${({ $isMovePending, $isInvalidDropCursor }) => {\n    if ($isMovePending) {\n      return 'wait';\n    }\n\n    return $isInvalidDropCursor ? 'not-allowed' : 'pointer';\n  }};\n  text-align: left;\n  font: inherit;\n  pointer-events: ${({ $isMovePending }) => ($isMovePending ? 'none' : 'auto')};\n\n  ${({ $isValidDropTarget, theme }) =>\n    $isValidDropTarget &&\n    css`\n      outline: 1px dashed ${theme.colors.primary600};\n      outline-offset: -1px;\n    `}\n\n  &:hover {\n    background: ${({ $isActive, $isValidDropTarget, theme }) => {\n      if ($isValidDropTarget) {\n        return theme.colors.primary100;\n      }\n\n      return $isActive ? theme.colors.primary100 : theme.colors.neutral100;\n    }};\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.primary600};\n    outline-offset: -2px;\n  }\n`;\n\nconst TreeRow = styled(Flex)<{\n  $isValidDropTarget?: boolean;\n  $isInvalidDropCursor?: boolean;\n  $isMovePending?: boolean;\n}>`\n  cursor: ${({ $isMovePending, $isInvalidDropCursor }) => {\n    if ($isMovePending) {\n      return 'wait';\n    }\n\n    return $isInvalidDropCursor ? 'not-allowed' : 'default';\n  }};\n  pointer-events: ${({ $isMovePending }) => ($isMovePending ? 'none' : 'auto')};\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  ${({ $isValidDropTarget, theme }) =>\n    $isValidDropTarget &&\n    css`\n      background: ${theme.colors.primary100};\n      outline: 1px dashed ${theme.colors.primary600};\n      outline-offset: -1px;\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 expandFolder = useCallback((id: number) => {\n    setExpandedIds((prev) => {\n      if (prev.has(id)) {\n        return prev;\n      }\n\n      const next = new Set(prev);\n      next.add(id);\n      return next;\n    });\n  }, []);\n\n  const isExpanded = useCallback((id: number) => expandedIds.has(id), [expandedIds]);\n\n  return { isExpanded, toggleExpanded, expandFolder };\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  onExpand: (id: number) => void;\n  onSelect: (folderId: number) => void;\n  isMovePending: boolean;\n}\n\ninterface FolderTreeItemInnerProps extends Omit<FolderTreeItemProps, 'node'> {\n  id: number;\n  name: string;\n  folderChildren: FolderNode[];\n}\n\nconst FolderTreeItemInner = ({\n  id,\n  name,\n  folderChildren,\n  level,\n  currentFolderId,\n  isExpanded,\n  onToggle,\n  onExpand,\n  onSelect,\n  isMovePending,\n}: FolderTreeItemInnerProps) => {\n  const { formatMessage } = useIntl();\n  const hasChildren = folderChildren.length > 0;\n  const isFolderExpanded = isExpanded(id);\n  const isActive = currentFolderId === id;\n\n  const {\n    droppable: { setNodeRef },\n    isOver,\n    showValidDropHighlight,\n    showInvalidDropCursor,\n  } = useFolderTreeDroppable({ id, name });\n\n  const handleExpand = useCallback(() => onExpand(id), [id, onExpand]);\n\n  useSpringLoadedExpand({\n    isOver,\n    canExpand: hasChildren && !isFolderExpanded,\n    onExpand: handleExpand,\n  });\n\n  // TODO: full `role=\"tree\"` + arrow-key treeview navigation before revamp GA\n  // if an accessibility audit requires it (v1 is button rows only).\n  return (\n    <li>\n      <TreeRow\n        ref={setNodeRef}\n        alignItems=\"center\"\n        paddingLeft={`${level * INDENT_PER_LEVEL_REM}rem`}\n        gap={1}\n        $isValidDropTarget={showValidDropHighlight}\n        $isInvalidDropCursor={showInvalidDropCursor}\n        $isMovePending={isMovePending}\n      >\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            $isValidDropTarget={showValidDropHighlight}\n            $isInvalidDropCursor={showInvalidDropCursor}\n            $isMovePending={isMovePending}\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      </TreeRow>\n\n      {hasChildren && isFolderExpanded && (\n        <NavList>\n          {folderChildren.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              onExpand={onExpand}\n              onSelect={onSelect}\n              isMovePending={isMovePending}\n            />\n          ))}\n        </NavList>\n      )}\n    </li>\n  );\n};\n\nconst FolderTreeItem = ({ node, ...props }: FolderTreeItemProps) => {\n  if (node.id == null) {\n    return null;\n  }\n\n  return (\n    <FolderTreeItemInner\n      {...props}\n      id={node.id}\n      name={node.name ?? ''}\n      folderChildren={node.children ?? []}\n    />\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, expandFolder } = useExpandedFolders(\n    folderStructure,\n    currentFolderId\n  );\n  const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n\n  const isHomeActive = currentFolderId == null;\n  const homeLabel = formatMessage({\n    id: getTranslationKey('sidebar.home'),\n    defaultMessage: 'Home',\n  });\n\n  const {\n    droppable: { setNodeRef: setHomeDropRef },\n    showValidDropHighlight: showHomeValidDropHighlight,\n    showInvalidDropCursor: showHomeInvalidDropCursor,\n  } = useFolderTreeDroppable({ id: null, name: homeLabel });\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          ref={setHomeDropRef}\n          type=\"button\"\n          $isActive={isHomeActive}\n          $isValidDropTarget={showHomeValidDropHighlight}\n          $isInvalidDropCursor={showHomeInvalidDropCursor}\n          $isMovePending={isMovePending}\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            {homeLabel}\n          </Typography>\n        </RowButton>\n\n        <Box marginTop={4}>\n          <Flex\n            alignItems=\"center\"\n            gap={1}\n            paddingTop={1}\n            paddingBottom={1}\n            paddingLeft={2}\n            paddingRight={2}\n            marginBottom={2}\n          >\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                  onExpand={expandFolder}\n                  onSelect={onSelectFolder}\n                  isMovePending={isMovePending}\n                />\n              ))}\n            </NavList>\n          )}\n        </Box>\n      </SidebarBody>\n    </SidebarNav>\n  );\n};\n"],"names":["RowButton","styled","button","theme","spaces","$isActive","$isValidDropTarget","colors","primary100","primary700","neutral800","borderRadius","$isMovePending","$isInvalidDropCursor","css","primary600","neutral100","TreeRow","Flex","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","expandFolder","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","FolderTreeItemInner","folderChildren","level","onToggle","onExpand","onSelect","isMovePending","formatMessage","useIntl","hasChildren","isFolderExpanded","droppable","setNodeRef","isOver","showValidDropHighlight","showInvalidDropCursor","useFolderTreeDroppable","handleExpand","useSpringLoadedExpand","canExpand","_jsxs","li","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","FolderTreeItem","props","SidebarNav","neutral0","neutral150","SidebarHeader","SidebarBody","FolderTree","onSelectFolder","data","isLoading","isError","useGetFolderStructureQuery","useAssetsDndOptional","isHomeActive","homeLabel","setHomeDropRef","showHomeValidDropHighlight","showHomeInvalidDropCursor","direction","tag","aria-label","paddingTop","paddingBottom","paddingRight","padding","House","aria-hidden","width","height","marginTop","marginBottom","FolderIcon","textColor","style","textTransform","justifyContent","Loader"],"mappings":"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"}
+{"version":3,"file":"FolderTree.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/FolderTree/FolderTree.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  Box,\n  Flex,\n  IconButton,\n  Loader,\n  Searchbar,\n  Tooltip,\n  Typography,\n  useFilter,\n} from '@strapi/design-system';\nimport { ChevronDown, Folder as FolderIcon, House } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { useGetFolderStructureQuery } from '../../../../services/folders';\nimport { getTranslationKey } from '../../../../utils/translations';\nimport { useAssetsDndOptional } from '../Dnd/AssetsDndProvider';\nimport { useFolderTreeDroppable } from '../Dnd/useFolderTreeDroppable';\n\nimport { filterFolderTree } from './filterFolderTree';\nimport { useSpringLoadedExpand } from './useSpringLoadedExpand';\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<{\n  $isActive: boolean;\n  $isValidDropTarget?: boolean;\n  $isInvalidDropCursor?: boolean;\n  $isMovePending?: boolean;\n}>`\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, $isValidDropTarget, theme }) => {\n    if ($isValidDropTarget) {\n      return theme.colors.primary100;\n    }\n\n    return $isActive ? theme.colors.primary100 : 'transparent';\n  }};\n  color: ${({ $isActive, theme }) =>\n    $isActive ? theme.colors.primary700 : theme.colors.neutral800};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  cursor: ${({ $isMovePending, $isInvalidDropCursor }) => {\n    if ($isMovePending) {\n      return 'wait';\n    }\n\n    return $isInvalidDropCursor ? 'not-allowed' : 'pointer';\n  }};\n  text-align: left;\n  font: inherit;\n  pointer-events: ${({ $isMovePending }) => ($isMovePending ? 'none' : 'auto')};\n\n  ${({ $isValidDropTarget, theme }) =>\n    $isValidDropTarget &&\n    css`\n      outline: 1px dashed ${theme.colors.primary600};\n      outline-offset: -1px;\n    `}\n\n  &:hover {\n    background: ${({ $isActive, $isValidDropTarget, theme }) => {\n      if ($isValidDropTarget) {\n        return theme.colors.primary100;\n      }\n\n      return $isActive ? theme.colors.primary100 : theme.colors.neutral100;\n    }};\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.primary600};\n    outline-offset: -2px;\n  }\n`;\n\nconst TreeRow = styled(Flex)<{\n  $isValidDropTarget?: boolean;\n  $isInvalidDropCursor?: boolean;\n  $isMovePending?: boolean;\n}>`\n  cursor: ${({ $isMovePending, $isInvalidDropCursor }) => {\n    if ($isMovePending) {\n      return 'wait';\n    }\n\n    return $isInvalidDropCursor ? 'not-allowed' : 'default';\n  }};\n  pointer-events: ${({ $isMovePending }) => ($isMovePending ? 'none' : 'auto')};\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  ${({ $isValidDropTarget, theme }) =>\n    $isValidDropTarget &&\n    css`\n      background: ${theme.colors.primary100};\n      outline: 1px dashed ${theme.colors.primary600};\n      outline-offset: -1px;\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 expandFolder = useCallback((id: number) => {\n    setExpandedIds((prev) => {\n      if (prev.has(id)) {\n        return prev;\n      }\n\n      const next = new Set(prev);\n      next.add(id);\n      return next;\n    });\n  }, []);\n\n  const isExpanded = useCallback((id: number) => expandedIds.has(id), [expandedIds]);\n\n  return { isExpanded, toggleExpanded, expandFolder };\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  showActiveFolder: boolean;\n  isExpanded: (id: number) => boolean;\n  onToggle: (id: number) => void;\n  onExpand: (id: number) => void;\n  onSelect: (folderId: number) => void;\n  isMovePending: boolean;\n}\n\ninterface FolderTreeItemInnerProps extends Omit<FolderTreeItemProps, 'node'> {\n  id: number;\n  name: string;\n  folderChildren: FolderNode[];\n}\n\nconst FolderTreeItemInner = ({\n  id,\n  name,\n  folderChildren,\n  level,\n  currentFolderId,\n  showActiveFolder,\n  isExpanded,\n  onToggle,\n  onExpand,\n  onSelect,\n  isMovePending,\n}: FolderTreeItemInnerProps) => {\n  const { formatMessage } = useIntl();\n  const hasChildren = folderChildren.length > 0;\n  const isFolderExpanded = isExpanded(id);\n  const isActive = showActiveFolder && currentFolderId === id;\n\n  const {\n    droppable: { setNodeRef },\n    isOver,\n    showValidDropHighlight,\n    showInvalidDropCursor,\n  } = useFolderTreeDroppable({ id, name });\n\n  const handleExpand = useCallback(() => onExpand(id), [id, onExpand]);\n\n  useSpringLoadedExpand({\n    isOver,\n    canExpand: hasChildren && !isFolderExpanded,\n    onExpand: handleExpand,\n  });\n\n  // TODO: full `role=\"tree\"` + arrow-key treeview navigation before revamp GA\n  // if an accessibility audit requires it (v1 is button rows only).\n  return (\n    <li>\n      <TreeRow\n        ref={setNodeRef}\n        alignItems=\"center\"\n        paddingLeft={`${level * INDENT_PER_LEVEL_REM}rem`}\n        gap={1}\n        $isValidDropTarget={showValidDropHighlight}\n        $isInvalidDropCursor={showInvalidDropCursor}\n        $isMovePending={isMovePending}\n      >\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            $isValidDropTarget={showValidDropHighlight}\n            $isInvalidDropCursor={showInvalidDropCursor}\n            $isMovePending={isMovePending}\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      </TreeRow>\n\n      {hasChildren && isFolderExpanded && (\n        <NavList>\n          {folderChildren.map((child) => (\n            <FolderTreeItem\n              key={child.id ?? child.name}\n              node={child}\n              level={level + 1}\n              currentFolderId={currentFolderId}\n              showActiveFolder={showActiveFolder}\n              isExpanded={isExpanded}\n              onToggle={onToggle}\n              onExpand={onExpand}\n              onSelect={onSelect}\n              isMovePending={isMovePending}\n            />\n          ))}\n        </NavList>\n      )}\n    </li>\n  );\n};\n\nconst FolderTreeItem = ({ node, ...props }: FolderTreeItemProps) => {\n  if (node.id == null) {\n    return null;\n  }\n\n  return (\n    <FolderTreeItemInner\n      {...props}\n      id={node.id}\n      name={node.name ?? ''}\n      folderChildren={node.children ?? []}\n    />\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  /**\n   * Set to `false` while a global asset search is active: the results span the\n   * whole library, so highlighting one folder would misrepresent them.\n   * */\n  showActiveFolder?: boolean;\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 filter input that prunes the tree to matching destinations\n * 3. A \"Home\" entry that clears the folder query param\n * 4. A \"FOLDERS\" section header\n * 5. The folder tree itself\n *\n * The filter is purely local: it never touches the URL and never affects the\n * asset list, which has its own independent search in the content toolbar.\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 = ({\n  currentFolderId,\n  showActiveFolder = true,\n  onSelectFolder,\n}: FolderTreeProps) => {\n  const { formatMessage, locale } = useIntl();\n  const { data: folderStructure = [], isLoading, isError } = useGetFolderStructureQuery();\n  const { isExpanded, toggleExpanded, expandFolder } = useExpandedFolders(\n    folderStructure,\n    currentFolderId\n  );\n  const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n\n  const [treeFilter, setTreeFilter] = useState('');\n  const { contains } = useFilter(locale, { sensitivity: 'base' });\n  const trimmedFilter = treeFilter.trim();\n\n  const { nodes: visibleNodes, expandedIds: filterExpandedIds } = useMemo(\n    () =>\n      trimmedFilter\n        ? filterFolderTree(folderStructure, (name) => contains(name, trimmedFilter))\n        : { nodes: folderStructure, expandedIds: [] },\n    [folderStructure, trimmedFilter, contains]\n  );\n\n  // An override layered on top of the user's own expansion rather than written\n  // into it, so clearing the filter restores exactly what they had open.\n  const isExpandedForRender = useCallback(\n    (id: number) => filterExpandedIds.includes(id) || isExpanded(id),\n    [filterExpandedIds, isExpanded]\n  );\n\n  const isHomeActive = showActiveFolder && currentFolderId == null;\n  const homeLabel = formatMessage({\n    id: getTranslationKey('sidebar.home'),\n    defaultMessage: 'Home',\n  });\n\n  const {\n    droppable: { setNodeRef: setHomeDropRef },\n    showValidDropHighlight: showHomeValidDropHighlight,\n    showInvalidDropCursor: showHomeInvalidDropCursor,\n  } = useFolderTreeDroppable({ id: null, name: homeLabel });\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        <Flex direction=\"column\" alignItems=\"stretch\" gap={4}>\n          <Typography variant=\"beta\" tag=\"h2\">\n            {formatMessage({\n              id: getTranslationKey('sidebar.title'),\n              defaultMessage: 'Media library',\n            })}\n          </Typography>\n\n          <Searchbar\n            name=\"search-folders\"\n            value={treeFilter}\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>\n              setTreeFilter(event.target.value)\n            }\n            onClear={() => setTreeFilter('')}\n            clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n            placeholder={formatMessage({\n              id: getTranslationKey('sidebar.search.placeholder'),\n              defaultMessage: 'Search folders',\n            })}\n            size=\"S\"\n          >\n            {formatMessage({\n              id: getTranslationKey('sidebar.search.label'),\n              defaultMessage: 'Search folders',\n            })}\n          </Searchbar>\n        </Flex>\n      </SidebarHeader>\n\n      <SidebarBody direction=\"column\" alignItems=\"stretch\" gap={1} padding={3}>\n        <RowButton\n          ref={setHomeDropRef}\n          type=\"button\"\n          $isActive={isHomeActive}\n          $isValidDropTarget={showHomeValidDropHighlight}\n          $isInvalidDropCursor={showHomeInvalidDropCursor}\n          $isMovePending={isMovePending}\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            {homeLabel}\n          </Typography>\n        </RowButton>\n\n        <Box marginTop={4}>\n          <Flex\n            alignItems=\"center\"\n            gap={1}\n            paddingTop={1}\n            paddingBottom={1}\n            paddingLeft={2}\n            paddingRight={2}\n            marginBottom={2}\n          >\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          ) : visibleNodes.length === 0 ? (\n            // TODO: revisit empty state before revamp GA\n            <Box padding={1} paddingTop={2}>\n              <Typography variant=\"pi\" textColor=\"neutral500\">\n                {trimmedFilter\n                  ? formatMessage(\n                      {\n                        id: getTranslationKey('sidebar.tree.no-results'),\n                        defaultMessage: 'No folders match \"{query}\"',\n                      },\n                      { query: trimmedFilter }\n                    )\n                  : formatMessage({\n                      id: getTranslationKey('sidebar.tree.empty'),\n                      defaultMessage: 'No folders yet',\n                    })}\n              </Typography>\n            </Box>\n          ) : (\n            <NavList>\n              {visibleNodes.map((node) => (\n                <FolderTreeItem\n                  key={node.id ?? node.name}\n                  node={node}\n                  level={0}\n                  currentFolderId={currentFolderId}\n                  showActiveFolder={showActiveFolder}\n                  isExpanded={isExpandedForRender}\n                  onToggle={toggleExpanded}\n                  onExpand={expandFolder}\n                  onSelect={onSelectFolder}\n                  isMovePending={isMovePending}\n                />\n              ))}\n            </NavList>\n          )}\n        </Box>\n      </SidebarBody>\n    </SidebarNav>\n  );\n};\n"],"names":["RowButton","styled","button","theme","spaces","$isActive","$isValidDropTarget","colors","primary100","primary700","neutral800","borderRadius","$isMovePending","$isInvalidDropCursor","css","primary600","neutral100","TreeRow","Flex","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","expandFolder","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","FolderTreeItemInner","folderChildren","level","showActiveFolder","onToggle","onExpand","onSelect","isMovePending","formatMessage","useIntl","hasChildren","isFolderExpanded","droppable","setNodeRef","isOver","showValidDropHighlight","showInvalidDropCursor","useFolderTreeDroppable","handleExpand","useSpringLoadedExpand","canExpand","_jsxs","li","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","FolderTreeItem","props","SidebarNav","neutral0","neutral150","SidebarHeader","SidebarBody","FolderTree","onSelectFolder","locale","data","isLoading","isError","useGetFolderStructureQuery","useAssetsDndOptional","treeFilter","setTreeFilter","contains","useFilter","sensitivity","trimmedFilter","trim","visibleNodes","filterExpandedIds","useMemo","filterFolderTree","isExpandedForRender","includes","isHomeActive","homeLabel","setHomeDropRef","showHomeValidDropHighlight","showHomeInvalidDropCursor","direction","tag","aria-label","paddingTop","paddingBottom","paddingRight","Searchbar","value","onChange","target","onClear","clearLabel","placeholder","size","padding","House","aria-hidden","width","height","marginTop","marginBottom","FolderIcon","textColor","style","textTransform","justifyContent","Loader","query"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 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 { useState, useMemo, useCallback, useEffect, useRef, useLayoutEffect } from 'react';
+import { useFilter, Flex, Typography, Searchbar, Box, Loader, IconButton, Tooltip } from '@strapi/design-system';
 import { House, Folder, ChevronDown } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled, css } from 'styled-components';
@@ -8,6 +8,7 @@ import { useGetFolderStructureQuery } from '../../../../services/folders.mjs';
 import { getTranslationKey } from '../../../../utils/translations.mjs';
 import { useAssetsDndOptional } from '../Dnd/AssetsDndProvider.mjs';
 import { useFolderTreeDroppable } from '../Dnd/useFolderTreeDroppable.mjs';
+import { filterFolderTree } from './filterFolderTree.mjs';
 import { useSpringLoadedExpand } from './useSpringLoadedExpand.mjs';
 
 /* -------------------------------------------------------------------------------------------------
@@ -197,11 +198,11 @@ const RotatingChevron = styled(ChevronDown)`
   transform: rotate(${({ $expanded })=>$expanded ? '0deg' : '-90deg'});
   transition: transform 0.2s ease;
 `;
-const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId, isExpanded, onToggle, onExpand, onSelect, isMovePending })=>{
+const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId, showActiveFolder, isExpanded, onToggle, onExpand, onSelect, isMovePending })=>{
     const { formatMessage } = useIntl();
     const hasChildren = folderChildren.length > 0;
     const isFolderExpanded = isExpanded(id);
-    const isActive = currentFolderId === id;
+    const isActive = showActiveFolder && currentFolderId === id;
     const { droppable: { setNodeRef }, isOver, showValidDropHighlight, showInvalidDropCursor } = useFolderTreeDroppable({
         id,
         name
@@ -273,6 +274,7 @@ const FolderTreeItemInner = ({ id, name, folderChildren, level, currentFolderId,
                         node: child,
                         level: level + 1,
                         currentFolderId: currentFolderId,
+                        showActiveFolder: showActiveFolder,
                         isExpanded: isExpanded,
                         onToggle: onToggle,
                         onExpand: onExpand,
@@ -320,21 +322,44 @@ const SidebarBody = styled(Flex)`
  * 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
+ * 2. A filter input that prunes the tree to matching destinations
+ * 3. A "Home" entry that clears the folder query param
+ * 4. A "FOLDERS" section header
+ * 5. The folder tree itself
+ *
+ * The filter is purely local: it never touches the URL and never affects the
+ * asset list, which has its own independent search in the content toolbar.
  *
  * 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 FolderTree = ({ currentFolderId, showActiveFolder = true, onSelectFolder })=>{
+    const { formatMessage, locale } = useIntl();
     const { data: folderStructure = [], isLoading, isError } = useGetFolderStructureQuery();
     const { isExpanded, toggleExpanded, expandFolder } = useExpandedFolders(folderStructure, currentFolderId);
     const { isMovePending } = useAssetsDndOptional() ?? {
         isMovePending: false
     };
-    const isHomeActive = currentFolderId == null;
+    const [treeFilter, setTreeFilter] = useState('');
+    const { contains } = useFilter(locale, {
+        sensitivity: 'base'
+    });
+    const trimmedFilter = treeFilter.trim();
+    const { nodes: visibleNodes, expandedIds: filterExpandedIds } = useMemo(()=>trimmedFilter ? filterFolderTree(folderStructure, (name)=>contains(name, trimmedFilter)) : {
+            nodes: folderStructure,
+            expandedIds: []
+        }, [
+        folderStructure,
+        trimmedFilter,
+        contains
+    ]);
+    // An override layered on top of the user's own expansion rather than written
+    // into it, so clearing the filter restores exactly what they had open.
+    const isExpandedForRender = useCallback((id)=>filterExpandedIds.includes(id) || isExpanded(id), [
+        filterExpandedIds,
+        isExpanded
+    ]);
+    const isHomeActive = showActiveFolder && currentFolderId == null;
     const homeLabel = formatMessage({
         id: getTranslationKey('sidebar.home'),
         defaultMessage: 'Home'
@@ -357,13 +382,39 @@ const SidebarBody = styled(Flex)`
                 paddingBottom: 4,
                 paddingLeft: 5,
                 paddingRight: 5,
-                children: /*#__PURE__*/ jsx(Typography, {
-                    variant: "beta",
-                    tag: "h2",
-                    children: formatMessage({
-                        id: getTranslationKey('sidebar.title'),
-                        defaultMessage: 'Media library'
-                    })
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    direction: "column",
+                    alignItems: "stretch",
+                    gap: 4,
+                    children: [
+                        /*#__PURE__*/ jsx(Typography, {
+                            variant: "beta",
+                            tag: "h2",
+                            children: formatMessage({
+                                id: getTranslationKey('sidebar.title'),
+                                defaultMessage: 'Media library'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Searchbar, {
+                            name: "search-folders",
+                            value: treeFilter,
+                            onChange: (event)=>setTreeFilter(event.target.value),
+                            onClear: ()=>setTreeFilter(''),
+                            clearLabel: formatMessage({
+                                id: 'clearLabel',
+                                defaultMessage: 'Clear'
+                            }),
+                            placeholder: formatMessage({
+                                id: getTranslationKey('sidebar.search.placeholder'),
+                                defaultMessage: 'Search folders'
+                            }),
+                            size: "S",
+                            children: formatMessage({
+                                id: getTranslationKey('sidebar.search.label'),
+                                defaultMessage: 'Search folders'
+                            })
+                        })
+                    ]
                 })
             }),
             /*#__PURE__*/ jsxs(SidebarBody, {
@@ -449,24 +500,30 @@ const SidebarBody = styled(Flex)`
                                         defaultMessage: 'Could not load folders.'
                                     })
                                 })
-                            }) : folderStructure.length === 0 ? // TODO: revisit empty state before revamp GA
+                            }) : visibleNodes.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({
+                                    children: trimmedFilter ? formatMessage({
+                                        id: getTranslationKey('sidebar.tree.no-results'),
+                                        defaultMessage: 'No folders match "{query}"'
+                                    }, {
+                                        query: trimmedFilter
+                                    }) : formatMessage({
                                         id: getTranslationKey('sidebar.tree.empty'),
                                         defaultMessage: 'No folders yet'
                                     })
                                 })
                             }) : /*#__PURE__*/ jsx(NavList, {
-                                children: folderStructure.map((node)=>/*#__PURE__*/ jsx(FolderTreeItem, {
+                                children: visibleNodes.map((node)=>/*#__PURE__*/ jsx(FolderTreeItem, {
                                         node: node,
                                         level: 0,
                                         currentFolderId: currentFolderId,
-                                        isExpanded: isExpanded,
+                                        showActiveFolder: showActiveFolder,
+                                        isExpanded: isExpandedForRender,
                                         onToggle: toggleExpanded,
                                         onExpand: expandFolder,
                                         onSelect: onSelectFolder,