@strapi/upload 5.48.0 → 5.49.0

package/dist/admin/future/pages/Assets/components/AssetDetails/AssetPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetPreview.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/AssetDetails/AssetPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Loader, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/files';\nimport { getAssetIcon } from '../../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport type {\n  File,\n  AssetWithPopulatedCreatedBy,\n} from '../../../../../../../shared/contracts/files';\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewContainer = styled(Box)`\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  max-height: 24rem;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  padding: ${({ theme }) => theme.spaces[3]};\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n`;\n\nconst AssetContainer = styled(Flex)`\n  justify-content: center;\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n`;\n\nconst StyledImage = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n`;\n\n/**\n * Top-right overlay slot for image actions (crop / rotate). Sits above the\n * image (z-index 3 > AssetContainer 2) so the buttons stay clickable.\n */\nconst ActionsOverlay = styled(Flex)`\n  position: absolute;\n  top: ${({ theme }) => theme.spaces[3]};\n  right: ${({ theme }) => theme.spaces[3]};\n  z-index: 3;\n`;\n\nconst StyledVideo = styled.video`\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n`;\n\nconst StyledAudio = styled.audio`\n  width: 100%;\n`;\n\nconst StyledPdfIframe = styled.iframe`\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  border: none;\n`;\n\nconst IconFallback = styled(Flex)`\n  height: 100%;\n  aspect-ratio: 1;\n  width: auto;\n  max-width: 100%;\n  margin: 0 auto;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst LoaderOverlay = styled(Flex)`\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * AssetLoader\n * -----------------------------------------------------------------------------------------------*/\n\nconst AssetLoader = () => {\n  const { formatMessage } = useIntl();\n  return (\n    <LoaderOverlay justifyContent=\"center\" alignItems=\"center\">\n      <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n    </LoaderOverlay>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetPreviewContent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetPreviewProps {\n  asset: File | AssetWithPopulatedCreatedBy;\n  actions?: React.ReactNode;\n  isLoading?: boolean;\n}\n\nexport const AssetPreview = ({ asset, actions, isLoading = false }: AssetPreviewProps) => {\n  const { formatMessage } = useIntl();\n  const { alternativeText, ext, mime, url, updatedAt } = asset;\n  // Append the asset's `updatedAt` as a cache-buster so a freshly replaced\n  // file (often served at the same URL) shows the new content instead of the\n  // browser-cached old version.\n  const cacheKey = updatedAt ? new Date(updatedAt).getTime() : undefined;\n  const appendCacheBuster = (raw: string | undefined) => {\n    if (!raw || cacheKey === undefined) return raw;\n    return raw.includes('?') ? `${raw}&v=${cacheKey}` : `${raw}?v=${cacheKey}`;\n  };\n  const mediaUrl = appendCacheBuster(prefixFileUrlWithBackendUrl(url));\n\n  const [isMediaLoaded, setIsMediaLoaded] = React.useState(false);\n  React.useEffect(() => {\n    setIsMediaLoaded(false);\n  }, [mediaUrl]);\n\n  if (mime?.includes(AssetType.Image)) {\n    const imageUrl = appendCacheBuster(prefixFileUrlWithBackendUrl(url));\n\n    if (imageUrl) {\n      return (\n        <PreviewContainer>\n          {(!isMediaLoaded || isLoading) && <AssetLoader />}\n          {actions ? <ActionsOverlay>{actions}</ActionsOverlay> : null}\n          <AssetContainer>\n            <StyledImage\n              src={imageUrl}\n              alt={alternativeText || asset.name || ''}\n              onLoad={() => setIsMediaLoaded(true)}\n              onError={() => setIsMediaLoaded(true)}\n            />\n          </AssetContainer>\n        </PreviewContainer>\n      );\n    }\n  }\n\n  if (mime?.includes(AssetType.Video) && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <StyledVideo\n            src={mediaUrl}\n            controls\n            title={asset.name}\n            onLoadedData={() => setIsMediaLoaded(true)}\n            onError={() => setIsMediaLoaded(true)}\n          >\n            {formatMessage({\n              id: getTranslationKey('asset-details.videoNotSupported'),\n              defaultMessage: 'Your browser does not support the video tag.',\n            })}\n          </StyledVideo>\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  if (mime?.includes(AssetType.Audio) && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <Flex\n            width=\"100%\"\n            padding={4}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            height=\"100%\"\n            minHeight=\"12rem\"\n          >\n            <StyledAudio\n              src={mediaUrl}\n              controls\n              onLoadedData={() => setIsMediaLoaded(true)}\n              onError={() => setIsMediaLoaded(true)}\n            />\n          </Flex>\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  const isPdf =\n    ext?.toLowerCase() === 'pdf' || ext?.toLowerCase() === '.pdf' || mime === 'application/pdf';\n  if (isPdf && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <StyledPdfIframe\n            src={`${mediaUrl}#toolbar=0`}\n            title={asset.name}\n            onLoad={() => setIsMediaLoaded(true)}\n          />\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  const DocIcon = getAssetIcon(mime, ext);\n  return (\n    <PreviewContainer>\n      <IconFallback\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        gap={1}\n        direction=\"column\"\n        hasRadius\n      >\n        <DocIcon width={24} height={24} />\n        <Typography variant=\"pi\">\n          {formatMessage({\n            id: getTranslationKey('asset-details.noPreview'),\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </IconFallback>\n    </PreviewContainer>\n  );\n};\n"],"names":["PreviewContainer","styled","Box","theme","borderRadius","spaces","colors","neutral100","AssetContainer","Flex","StyledImage","img","ActionsOverlay","StyledVideo","video","StyledAudio","audio","StyledPdfIframe","iframe","IconFallback","neutral500","neutral150","LoaderOverlay","AssetLoader","formatMessage","useIntl","_jsx","justifyContent","alignItems","Loader","id","defaultMessage","AssetPreview","asset","actions","isLoading","alternativeText","ext","mime","url","updatedAt","cacheKey","Date","getTime","undefined","appendCacheBuster","raw","includes","mediaUrl","prefixFileUrlWithBackendUrl","isMediaLoaded","setIsMediaLoaded","React","useState","useEffect","AssetType","Image","imageUrl","_jsxs","src","alt","name","onLoad","onError","Video","controls","title","onLoadedData","getTranslationKey","Audio","width","padding","height","minHeight","isPdf","toLowerCase","DocIcon","getAssetIcon","gap","direction","hasRadius","Typography","variant"],"mappings":"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"}
+{"version":3,"file":"AssetPreview.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/AssetDetails/AssetPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Loader, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/files';\nimport { getAssetIcon } from '../../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport type {\n  File,\n  AssetWithPopulatedCreatedBy,\n} from '../../../../../../../shared/contracts/files';\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewContainer = styled(Box)`\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  max-height: 24rem;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  padding: ${({ theme }) => theme.spaces[3]};\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n`;\n\nconst AssetContainer = styled(Flex)`\n  justify-content: center;\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n`;\n\nconst StyledImage = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n`;\n\n/**\n * Top-right overlay slot for image actions (crop / rotate). Sits above the\n * image (z-index 3 > AssetContainer 2) so the buttons stay clickable.\n */\nconst ActionsOverlay = styled(Flex)`\n  position: absolute;\n  top: ${({ theme }) => theme.spaces[3]};\n  right: ${({ theme }) => theme.spaces[3]};\n  z-index: 3;\n`;\n\nconst StyledVideo = styled.video`\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n`;\n\nconst StyledAudio = styled.audio`\n  width: 100%;\n`;\n\nconst StyledPdfIframe = styled.iframe`\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  border: none;\n`;\n\nconst IconFallback = styled(Flex)`\n  height: 100%;\n  aspect-ratio: 1;\n  width: auto;\n  max-width: 100%;\n  margin: 0 auto;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst LoaderOverlay = styled(Flex)`\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * AssetLoader\n * -----------------------------------------------------------------------------------------------*/\n\nconst AssetLoader = () => {\n  const { formatMessage } = useIntl();\n  return (\n    <LoaderOverlay justifyContent=\"center\" alignItems=\"center\">\n      <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n    </LoaderOverlay>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetPreviewContent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetPreviewProps {\n  asset: File | AssetWithPopulatedCreatedBy;\n  actions?: React.ReactNode;\n  isLoading?: boolean;\n}\n\nexport const AssetPreview = ({ asset, actions, isLoading = false }: AssetPreviewProps) => {\n  const { formatMessage } = useIntl();\n  const { alternativeText, ext, mime, url, updatedAt } = asset;\n  // Append the asset's `updatedAt` as a cache-buster so a freshly replaced\n  // file (often served at the same URL) shows the new content instead of the\n  // browser-cached old version.\n  const cacheKey = updatedAt ? new Date(updatedAt).getTime() : undefined;\n  const appendCacheBuster = (raw: string | undefined) => {\n    if (!raw || cacheKey === undefined) return raw;\n    return raw.includes('?') ? `${raw}&v=${cacheKey}` : `${raw}?v=${cacheKey}`;\n  };\n  const mediaUrl = appendCacheBuster(prefixFileUrlWithBackendUrl(url));\n\n  const [isMediaLoaded, setIsMediaLoaded] = React.useState(false);\n  React.useEffect(() => {\n    setIsMediaLoaded(false);\n  }, [mediaUrl]);\n\n  if (mime?.includes(AssetType.Image)) {\n    const imageUrl = appendCacheBuster(prefixFileUrlWithBackendUrl(url));\n\n    if (imageUrl) {\n      return (\n        <PreviewContainer>\n          {(!isMediaLoaded || isLoading) && <AssetLoader />}\n          {actions ? <ActionsOverlay>{actions}</ActionsOverlay> : null}\n          <AssetContainer>\n            <StyledImage\n              src={imageUrl}\n              alt={alternativeText || asset.name || ''}\n              onLoad={() => setIsMediaLoaded(true)}\n              onError={() => setIsMediaLoaded(true)}\n            />\n          </AssetContainer>\n        </PreviewContainer>\n      );\n    }\n  }\n\n  if (mime?.includes(AssetType.Video) && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <StyledVideo\n            src={mediaUrl}\n            controls\n            title={asset.name}\n            onLoadedData={() => setIsMediaLoaded(true)}\n            onError={() => setIsMediaLoaded(true)}\n          >\n            {formatMessage({\n              id: getTranslationKey('asset-details.videoNotSupported'),\n              defaultMessage: 'Your browser does not support the video tag.',\n            })}\n          </StyledVideo>\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  if (mime?.includes(AssetType.Audio) && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <Flex\n            width=\"100%\"\n            padding={4}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            height=\"100%\"\n            minHeight=\"12rem\"\n          >\n            <StyledAudio\n              src={mediaUrl}\n              controls\n              onLoadedData={() => setIsMediaLoaded(true)}\n              onError={() => setIsMediaLoaded(true)}\n            />\n          </Flex>\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  const isPdf =\n    ext?.toLowerCase() === 'pdf' || ext?.toLowerCase() === '.pdf' || mime === 'application/pdf';\n  if (isPdf && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <StyledPdfIframe\n            src={`${mediaUrl}#toolbar=0`}\n            title={asset.name}\n            onLoad={() => setIsMediaLoaded(true)}\n          />\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  const DocIcon = getAssetIcon(mime, ext);\n  return (\n    <PreviewContainer>\n      <IconFallback\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        gap={1}\n        direction=\"column\"\n        hasRadius\n      >\n        <DocIcon width={24} height={24} />\n        <Typography variant=\"pi\">\n          {formatMessage({\n            id: getTranslationKey('asset-details.noPreview'),\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </IconFallback>\n    </PreviewContainer>\n  );\n};\n"],"names":["PreviewContainer","styled","Box","theme","borderRadius","spaces","colors","neutral100","AssetContainer","Flex","StyledImage","img","ActionsOverlay","StyledVideo","video","StyledAudio","audio","StyledPdfIframe","iframe","IconFallback","neutral500","neutral150","LoaderOverlay","AssetLoader","formatMessage","useIntl","_jsx","justifyContent","alignItems","Loader","id","defaultMessage","AssetPreview","asset","actions","isLoading","alternativeText","ext","mime","url","updatedAt","cacheKey","Date","getTime","undefined","appendCacheBuster","raw","includes","mediaUrl","prefixFileUrlWithBackendUrl","isMediaLoaded","setIsMediaLoaded","React","useState","useEffect","AssetType","Image","imageUrl","_jsxs","src","alt","name","onLoad","onError","Video","controls","title","onLoadedData","getTranslationKey","Audio","width","padding","height","minHeight","isPdf","toLowerCase","DocIcon","getAssetIcon","gap","direction","hasRadius","Typography","variant"],"mappings":"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"}

package/dist/admin/future/pages/Assets/components/DropZone/UploadDropZone.js

@@ -9,7 +9,8 @@ var styledComponents = require('styled-components');
 var translations = require('../../../../utils/translations.js');
 var UploadDropZoneContext = require('./UploadDropZoneContext.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) {
@@ -26,7 +27,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 /* -------------------------------------------------------------------------------------------------
  * DropZoneOverlay

package/dist/admin/future/pages/Assets/components/DropZone/UploadDropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadDropZone.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/DropZone/UploadDropZone.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Folder } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport { useUploadDropZone } from './UploadDropZoneContext';\n\n/* -------------------------------------------------------------------------------------------------\n * DropZoneOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst setOpacity = (hex: string, alpha: number) =>\n  `${hex}${Math.floor(alpha * 255)\n    .toString(16)\n    .padStart(2, '0')}`;\n\nconst DropZoneOverlay = styled(Box)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: ${({ theme }) => setOpacity(theme.colors.primary200, 0.3)};\n  border: 1px solid ${({ theme }) => theme.colors.primary700};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 1;\n  pointer-events: none;\n`;\n\nconst DropZoneWithOverlay = ({ children }: { children: React.ReactNode }) => {\n  const { isDragging } = useUploadDropZone();\n  return (\n    <Box position=\"relative\">\n      {isDragging && <DropZoneOverlay />}\n      {children}\n    </Box>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * DropZoneMessage\n * -----------------------------------------------------------------------------------------------*/\n\nconst DropFilesMessageImpl = styled(Box)<{ $leftContentWidth: number }>`\n  position: fixed;\n  bottom: ${({ theme }) => theme.spaces[8]};\n  left: 50%;\n  transform: translateX(calc(-50% + ${({ $leftContentWidth }) => $leftContentWidth / 2}px));\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  background: ${({ theme }) => theme.colors.primary600};\n  padding: ${({ theme }) => theme.spaces[4]} ${({ theme }) => theme.spaces[6]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 2;\n`;\n\ninterface DropFilesMessageProps {\n  uploadDropZoneRef?: React.RefObject<HTMLDivElement>;\n  folderName: string;\n}\n\nconst DropFilesMessage = ({ uploadDropZoneRef, folderName }: DropFilesMessageProps) => {\n  const { formatMessage } = useIntl();\n  const { isDragging } = useUploadDropZone();\n\n  // Dropzone message position (relative to main content)\n  const [leftContentWidth, setLeftContentWidth] = React.useState(0);\n\n  // Calculate the left content width to position the dropzone message correctly\n  React.useEffect(() => {\n    if (!uploadDropZoneRef?.current) return;\n\n    const updateRect = () => {\n      const rect = uploadDropZoneRef.current?.getBoundingClientRect();\n      if (rect) {\n        setLeftContentWidth((prev) => (prev !== rect.left ? rect.left : prev));\n      }\n    };\n\n    updateRect();\n    const resizeObserver = new ResizeObserver(updateRect);\n    resizeObserver.observe(uploadDropZoneRef.current);\n    return () => resizeObserver.disconnect();\n  }, [uploadDropZoneRef]);\n\n  if (!isDragging) return null;\n\n  return (\n    <DropFilesMessageImpl $leftContentWidth={leftContentWidth}>\n      <Typography textColor=\"neutral0\">\n        {formatMessage({\n          id: getTranslationKey('dropzone.upload.message'),\n          defaultMessage: 'Drop here to upload to',\n        })}\n      </Typography>\n      <Flex gap={2} alignItems=\"center\">\n        <Folder width={20} height={20} fill=\"neutral0\" />\n        <Typography textColor=\"neutral0\" fontWeight=\"semiBold\">\n          {folderName}\n        </Typography>\n      </Flex>\n    </DropFilesMessageImpl>\n  );\n};\n\nexport { DropZoneWithOverlay, DropFilesMessage };\n"],"names":["setOpacity","hex","alpha","Math","floor","toString","padStart","DropZoneOverlay","styled","Box","theme","colors","primary200","primary700","borderRadius","DropZoneWithOverlay","children","isDragging","useUploadDropZone","_jsxs","position","_jsx","DropFilesMessageImpl","spaces","$leftContentWidth","primary600","DropFilesMessage","uploadDropZoneRef","folderName","formatMessage","useIntl","leftContentWidth","setLeftContentWidth","React","useState","useEffect","current","updateRect","rect","getBoundingClientRect","prev","left","resizeObserver","ResizeObserver","observe","disconnect","Typography","textColor","id","getTranslationKey","defaultMessage","Flex","gap","alignItems","Folder","width","height","fill","fontWeight"],"mappings":"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"}
+{"version":3,"file":"UploadDropZone.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/DropZone/UploadDropZone.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Folder } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport { useUploadDropZone } from './UploadDropZoneContext';\n\n/* -------------------------------------------------------------------------------------------------\n * DropZoneOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst setOpacity = (hex: string, alpha: number) =>\n  `${hex}${Math.floor(alpha * 255)\n    .toString(16)\n    .padStart(2, '0')}`;\n\nconst DropZoneOverlay = styled(Box)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: ${({ theme }) => setOpacity(theme.colors.primary200, 0.3)};\n  border: 1px solid ${({ theme }) => theme.colors.primary700};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 1;\n  pointer-events: none;\n`;\n\nconst DropZoneWithOverlay = ({ children }: { children: React.ReactNode }) => {\n  const { isDragging } = useUploadDropZone();\n  return (\n    <Box position=\"relative\">\n      {isDragging && <DropZoneOverlay />}\n      {children}\n    </Box>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * DropZoneMessage\n * -----------------------------------------------------------------------------------------------*/\n\nconst DropFilesMessageImpl = styled(Box)<{ $leftContentWidth: number }>`\n  position: fixed;\n  bottom: ${({ theme }) => theme.spaces[8]};\n  left: 50%;\n  transform: translateX(calc(-50% + ${({ $leftContentWidth }) => $leftContentWidth / 2}px));\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  background: ${({ theme }) => theme.colors.primary600};\n  padding: ${({ theme }) => theme.spaces[4]} ${({ theme }) => theme.spaces[6]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 2;\n`;\n\ninterface DropFilesMessageProps {\n  uploadDropZoneRef?: React.RefObject<HTMLDivElement>;\n  folderName: string;\n}\n\nconst DropFilesMessage = ({ uploadDropZoneRef, folderName }: DropFilesMessageProps) => {\n  const { formatMessage } = useIntl();\n  const { isDragging } = useUploadDropZone();\n\n  // Dropzone message position (relative to main content)\n  const [leftContentWidth, setLeftContentWidth] = React.useState(0);\n\n  // Calculate the left content width to position the dropzone message correctly\n  React.useEffect(() => {\n    if (!uploadDropZoneRef?.current) return;\n\n    const updateRect = () => {\n      const rect = uploadDropZoneRef.current?.getBoundingClientRect();\n      if (rect) {\n        setLeftContentWidth((prev) => (prev !== rect.left ? rect.left : prev));\n      }\n    };\n\n    updateRect();\n    const resizeObserver = new ResizeObserver(updateRect);\n    resizeObserver.observe(uploadDropZoneRef.current);\n    return () => resizeObserver.disconnect();\n  }, [uploadDropZoneRef]);\n\n  if (!isDragging) return null;\n\n  return (\n    <DropFilesMessageImpl $leftContentWidth={leftContentWidth}>\n      <Typography textColor=\"neutral0\">\n        {formatMessage({\n          id: getTranslationKey('dropzone.upload.message'),\n          defaultMessage: 'Drop here to upload to',\n        })}\n      </Typography>\n      <Flex gap={2} alignItems=\"center\">\n        <Folder width={20} height={20} fill=\"neutral0\" />\n        <Typography textColor=\"neutral0\" fontWeight=\"semiBold\">\n          {folderName}\n        </Typography>\n      </Flex>\n    </DropFilesMessageImpl>\n  );\n};\n\nexport { DropZoneWithOverlay, DropFilesMessage };\n"],"names":["setOpacity","hex","alpha","Math","floor","toString","padStart","DropZoneOverlay","styled","Box","theme","colors","primary200","primary700","borderRadius","DropZoneWithOverlay","children","isDragging","useUploadDropZone","_jsxs","position","_jsx","DropFilesMessageImpl","spaces","$leftContentWidth","primary600","DropFilesMessage","uploadDropZoneRef","folderName","formatMessage","useIntl","leftContentWidth","setLeftContentWidth","React","useState","useEffect","current","updateRect","rect","getBoundingClientRect","prev","left","resizeObserver","ResizeObserver","observe","disconnect","Typography","textColor","id","getTranslationKey","defaultMessage","Flex","gap","alignItems","Folder","width","height","fill","fontWeight"],"mappings":"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"}

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

@@ -0,0 +1,389 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var folders = require('../../../../services/folders.js');
+var translations = require('../../../../utils/translations.js');
+
+/* -------------------------------------------------------------------------------------------------
+ * RowButton — shared row styling aligned with admin SubNav.Link
+ * -----------------------------------------------------------------------------------------------*/ const RowButton = styledComponents.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] = React.useState(()=>new Set());
+    React.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 = React.useCallback((id)=>{
+        setExpandedIds((prev)=>{
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            } else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+    const isExpanded = React.useCallback((id)=>expandedIds.has(id), [
+        expandedIds
+    ]);
+    return {
+        isExpanded,
+        toggleExpanded
+    };
+};
+/* -------------------------------------------------------------------------------------------------
+ * TruncatedFolderName — tooltip when the label is ellipsized
+ * -----------------------------------------------------------------------------------------------*/ const TruncatedFolderName = ({ name, isActive })=>{
+    const textRef = React.useRef(null);
+    const [isTruncated, setIsTruncated] = React.useState(false);
+    React.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__*/ jsxRuntime.jsx(designSystem.Typography, {
+        ref: textRef,
+        variant: "omega",
+        fontWeight: isActive ? 'semiBold' : 'regular',
+        ellipsis: true,
+        children: name
+    });
+    if (isTruncated) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+            label: name,
+            children: label
+        });
+    }
+    return label;
+};
+/* -------------------------------------------------------------------------------------------------
+ * NavList — unstyled list for tree rows
+ * -----------------------------------------------------------------------------------------------*/ const NavList = styledComponents.styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+/* -------------------------------------------------------------------------------------------------
+ * FolderTreeItem — single tree row (internal)
+ * -----------------------------------------------------------------------------------------------*/ const INDENT_PER_LEVEL_REM = 1.6;
+const RotatingChevron = styledComponents.styled(icons.ChevronDown)`
+  transform: rotate(${({ $expanded })=>$expanded ? '0deg' : '-90deg'});
+  transition: transform 0.2s ease;
+`;
+const FolderTreeItem = ({ node, level, currentFolderId, isExpanded, onToggle, onSelect })=>{
+    const { formatMessage } = reactIntl.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__*/ jsxRuntime.jsxs("li", {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                alignItems: "center",
+                paddingLeft: `${level * INDENT_PER_LEVEL_REM}rem`,
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        label: formatMessage({
+                            id: translations.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__*/ jsxRuntime.jsx(RotatingChevron, {
+                            $expanded: isFolderExpanded,
+                            fill: "neutral500"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        flex: "1",
+                        minWidth: 0,
+                        children: /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(TruncatedFolderName, {
+                                name: name,
+                                isActive: isActive
+                            })
+                        })
+                    })
+                ]
+            }),
+            hasChildren && isFolderExpanded && /*#__PURE__*/ jsxRuntime.jsx(NavList, {
+                children: node.children.map((child)=>/*#__PURE__*/ jsxRuntime.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 = styledComponents.styled(designSystem.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 = styledComponents.styled(designSystem.Box)`
+  flex-shrink: 0;
+  border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
+`;
+const SidebarBody = styledComponents.styled(designSystem.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 } = reactIntl.useIntl();
+    const { data: folderStructure = [], isLoading, isError } = folders.useGetFolderStructureQuery();
+    const { isExpanded, toggleExpanded } = useExpandedFolders(folderStructure, currentFolderId);
+    const isHomeActive = currentFolderId == null;
+    return /*#__PURE__*/ jsxRuntime.jsxs(SidebarNav, {
+        direction: "column",
+        alignItems: "stretch",
+        tag: "nav",
+        "aria-label": formatMessage({
+            id: translations.getTranslationKey('sidebar.tree.aria-label'),
+            defaultMessage: 'Media library folders'
+        }),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(SidebarHeader, {
+                paddingTop: 4,
+                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'
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(SidebarBody, {
+                direction: "column",
+                alignItems: "stretch",
+                gap: 1,
+                padding: 3,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(RowButton, {
+                        type: "button",
+                        $isActive: isHomeActive,
+                        "aria-current": isHomeActive ? 'page' : undefined,
+                        onClick: ()=>onSelectFolder(null),
+                        "data-testid": "folder-tree-home",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(icons.House, {
+                                "aria-hidden": true,
+                                width: "1.6rem",
+                                height: "1.6rem"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                variant: "omega",
+                                fontWeight: isHomeActive ? 'semiBold' : 'regular',
+                                children: formatMessage({
+                                    id: translations.getTranslationKey('sidebar.home'),
+                                    defaultMessage: 'Home'
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                alignItems: "center",
+                                gap: 1,
+                                padding: 1,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {
+                                        "aria-hidden": true,
+                                        width: "1.6rem",
+                                        height: "1.6rem",
+                                        fill: "neutral500"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "sigma",
+                                        textColor: "neutral600",
+                                        style: {
+                                            textTransform: 'uppercase'
+                                        },
+                                        children: formatMessage({
+                                            id: translations.getTranslationKey('sidebar.folders'),
+                                            defaultMessage: 'Folders'
+                                        })
+                                    })
+                                ]
+                            }),
+                            isLoading ? // TODO: revisit loading state before revamp GA
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                justifyContent: "center",
+                                padding: 1,
+                                paddingTop: 2,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
+                                    children: formatMessage({
+                                        id: translations.getTranslationKey('sidebar.tree.loading'),
+                                        defaultMessage: 'Loading folders...'
+                                    })
+                                })
+                            }) : isError ? // TODO: revisit error state before revamp GA
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                padding: 1,
+                                paddingTop: 2,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    variant: "pi",
+                                    textColor: "danger600",
+                                    children: formatMessage({
+                                        id: translations.getTranslationKey('sidebar.tree.error'),
+                                        defaultMessage: 'Could not load folders.'
+                                    })
+                                })
+                            }) : folderStructure.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({
+                                        id: translations.getTranslationKey('sidebar.tree.empty'),
+                                        defaultMessage: 'No folders yet'
+                                    })
+                                })
+                            }) : /*#__PURE__*/ jsxRuntime.jsx(NavList, {
+                                children: folderStructure.map((node)=>/*#__PURE__*/ jsxRuntime.jsx(FolderTreeItem, {
+                                        node: node,
+                                        level: 0,
+                                        currentFolderId: currentFolderId,
+                                        isExpanded: isExpanded,
+                                        onToggle: toggleExpanded,
+                                        onSelect: onSelectFolder
+                                    }, node.id ?? node.name))
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.FolderTree = FolderTree;
+//# sourceMappingURL=FolderTree.js.map

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

@@ -0,0 +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 { 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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"}