@strapi/upload 5.36.0 → 5.37.0

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

@@ -1,13 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useIsMobile } from '@strapi/admin/strapi-admin';
 import { RawTable, RawThead, RawTh, RawTd, RawTr, VisuallyHidden, Typography, RawTbody, Flex, IconButton } from '@strapi/design-system';
-import { More } from '@strapi/icons';
+import { More, Folder } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { formatBytes } from '../../../utils/files.mjs';
 import { getAssetIcon } from '../../../utils/getAssetIcon.mjs';
 import { getTranslationKey } from '../../../utils/translations.mjs';
 import { TABLE_HEADERS } from '../constants.mjs';
+import { useFolderNavigation } from '../hooks/useFolderNavigation.mjs';
 
 const StyledTable = styled(RawTable)`
   width: 100%;
@@ -139,13 +140,98 @@ const AssetRow = ({ asset })=>{
         ]
     });
 };
-const AssetsTable = ({ assets })=>{
+const FolderTr = styled(StyledTr)`
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme })=>theme.colors.primary100};
+  }
+`;
+const FolderRow = ({ folder })=>{
+    const isMobile = useIsMobile();
+    const { formatDate, formatMessage } = useIntl();
+    const { navigateToFolder } = useFolderNavigation();
+    return /*#__PURE__*/ jsxs(FolderTr, {
+        onClick: ()=>navigateToFolder(folder),
+        children: [
+            /*#__PURE__*/ jsx(StyledTd, {
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    gap: 3,
+                    alignItems: "center",
+                    children: [
+                        /*#__PURE__*/ jsx(Flex, {
+                            justifyContent: "center",
+                            alignItems: "center",
+                            borderRadius: "4px",
+                            color: "neutral600",
+                            width: "3.2rem",
+                            height: "3.2rem",
+                            shrink: 0,
+                            children: /*#__PURE__*/ jsx(Folder, {
+                                width: 20,
+                                height: 20
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral800",
+                            fontWeight: "semiBold",
+                            ellipsis: true,
+                            children: folder.name
+                        })
+                    ]
+                })
+            }),
+            !isMobile && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral600",
+                            children: folder.createdAt ? formatDate(new Date(folder.createdAt), {
+                                dateStyle: 'long'
+                            }) : '-'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral600",
+                            children: folder.updatedAt ? formatDate(new Date(folder.updatedAt), {
+                                dateStyle: 'long'
+                            }) : '-'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral600",
+                            children: "-"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(StyledTd, {
+                children: /*#__PURE__*/ jsx(Flex, {
+                    justifyContent: "flex-end",
+                    children: /*#__PURE__*/ jsx(IconButton, {
+                        label: formatMessage({
+                            id: getTranslationKey('control-card.more-actions'),
+                            defaultMessage: 'More actions'
+                        }),
+                        variant: "ghost",
+                        onClick: (e)=>e.stopPropagation(),
+                        children: /*#__PURE__*/ jsx(More, {})
+                    })
+                })
+            })
+        ]
+    });
+};
+const AssetsTable = ({ assets, folders = [] })=>{
     const isMobile = useIsMobile();
     const { formatMessage } = useIntl();
     const visibleHeaders = isMobile ? TABLE_HEADERS.filter((h)=>h.name === 'name' || h.name === 'actions') : TABLE_HEADERS;
+    const totalRows = folders.length + assets.length;
     return /*#__PURE__*/ jsxs(StyledTable, {
         colCount: visibleHeaders.length,
-        rowCount: assets.length + 1,
+        rowCount: totalRows + 1,
         children: [
             /*#__PURE__*/ jsx(StyledThead, {
                 children: /*#__PURE__*/ jsx(RawTr, {
@@ -173,7 +259,7 @@ const AssetsTable = ({ assets })=>{
                 })
             }),
             /*#__PURE__*/ jsx(RawTbody, {
-                children: assets.length === 0 ? /*#__PURE__*/ jsx(RawTr, {
+                children: totalRows === 0 ? /*#__PURE__*/ jsx(RawTr, {
                     children: /*#__PURE__*/ jsx(StyledBodyTd, {
                         colSpan: visibleHeaders.length,
                         children: /*#__PURE__*/ jsx(Typography, {
@@ -184,9 +270,16 @@ const AssetsTable = ({ assets })=>{
                             })
                         })
                     })
-                }) : assets.map((asset)=>/*#__PURE__*/ jsx(AssetRow, {
-                        asset: asset
-                    }, asset.id))
+                }) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        folders.map((folder)=>/*#__PURE__*/ jsx(FolderRow, {
+                                folder: folder
+                            }, `folder-${folder.id}`)),
+                        assets.map((asset)=>/*#__PURE__*/ jsx(AssetRow, {
+                                asset: asset
+                            }, asset.id))
+                    ]
+                })
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"file":"AssetsTable.mjs","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsTable.tsx"],"sourcesContent":["import { useIsMobile } from '@strapi/admin/strapi-admin';\nimport {\n  Flex,\n  IconButton,\n  RawTable,\n  RawTbody,\n  RawTd,\n  RawTh,\n  RawThead,\n  RawTr,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { formatBytes } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { TABLE_HEADERS } from '../constants';\n\nimport type { File } from '../../../../../../shared/contracts/files';\n\nconst StyledTable = styled(RawTable)`\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n  border-radius: 4px;\n  overflow: hidden;\n`;\n\nconst StyledThead = styled(RawThead)`\n  background: ${({ theme }) => theme.colors.neutral100};\n\n  tr {\n    border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n`;\n\nconst StyledTh = styled(RawTh)`\n  height: 40px;\n  padding: 0 ${({ theme }) => theme.spaces[4]};\n  text-align: left;\n`;\n\nconst StyledTd = styled(RawTd)`\n  padding: 0 ${({ theme }) => theme.spaces[4]};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst StyledTr = styled(RawTr)`\n  height: 48px;\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  &:last-child {\n    ${StyledTd} {\n      border-bottom: 0;\n    }\n  }\n`;\n\nconst StyledBodyTd = styled(RawTd)`\n  padding: ${({ theme }) => theme.spaces[4]};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface AssetPreviewCellProps {\n  asset: File;\n}\n\nconst AssetPreviewCell = ({ asset }: AssetPreviewCellProps) => {\n  const { ext, mime } = asset;\n\n  const DocIcon = getAssetIcon(mime, ext);\n\n  return (\n    <Flex\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      borderRadius=\"4px\"\n      color=\"neutral500\"\n      width=\"3.2rem\"\n      height=\"3.2rem\"\n      shrink={0}\n    >\n      <DocIcon width={16} height={16} />\n    </Flex>\n  );\n};\n\ninterface AssetRowProps {\n  asset: File;\n}\n\nconst AssetRow = ({ asset }: AssetRowProps) => {\n  const isMobile = useIsMobile();\n  const { formatDate, formatMessage } = useIntl();\n\n  return (\n    <StyledTr>\n      <StyledTd>\n        <Flex gap={3} alignItems=\"center\">\n          <AssetPreviewCell asset={asset} />\n          <Flex direction=\"column\" alignItems=\"flex-start\">\n            <Typography textColor=\"neutral800\" fontWeight=\"semiBold\" ellipsis>\n              {asset.name}\n            </Typography>\n            {isMobile && (\n              <Typography textColor=\"neutral600\" variant=\"pi\">\n                {asset.size ? formatBytes(asset.size, 1) : '-'}\n              </Typography>\n            )}\n          </Flex>\n        </Flex>\n      </StyledTd>\n      {!isMobile && (\n        <>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.createdAt ? formatDate(new Date(asset.createdAt), { dateStyle: 'long' }) : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.updatedAt ? formatDate(new Date(asset.updatedAt), { dateStyle: 'long' }) : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.size ? formatBytes(asset.size, 1) : '-'}\n            </Typography>\n          </StyledTd>\n        </>\n      )}\n      <StyledTd>\n        <Flex justifyContent=\"flex-end\">\n          <IconButton\n            label={formatMessage({\n              id: getTranslationKey('control-card.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            variant=\"ghost\"\n          >\n            <More />\n          </IconButton>\n        </Flex>\n      </StyledTd>\n    </StyledTr>\n  );\n};\n\ninterface AssetsTableProps {\n  assets: File[];\n}\n\nexport const AssetsTable = ({ assets }: AssetsTableProps) => {\n  const isMobile = useIsMobile();\n  const { formatMessage } = useIntl();\n\n  const visibleHeaders = isMobile\n    ? TABLE_HEADERS.filter((h) => h.name === 'name' || h.name === 'actions')\n    : TABLE_HEADERS;\n\n  return (\n    <StyledTable colCount={visibleHeaders.length} rowCount={assets.length + 1}>\n      <StyledThead>\n        <RawTr>\n          {visibleHeaders.map((header) => {\n            const tableHeaderLabel = formatMessage(header.label);\n            const isVisuallyHidden = 'isVisuallyHidden' in header && header.isVisuallyHidden;\n\n            if (isVisuallyHidden) {\n              return (\n                <StyledTh key={header.name}>\n                  <VisuallyHidden>\n                    {formatMessage({\n                      id: getTranslationKey('table.header.actions'),\n                      defaultMessage: 'actions',\n                    })}\n                  </VisuallyHidden>\n                </StyledTh>\n              );\n            }\n\n            return (\n              <StyledTh key={header.name}>\n                <Typography textColor=\"neutral600\" variant=\"sigma\">\n                  {tableHeaderLabel}\n                </Typography>\n              </StyledTh>\n            );\n          })}\n        </RawTr>\n      </StyledThead>\n      <RawTbody>\n        {assets.length === 0 ? (\n          <RawTr>\n            <StyledBodyTd colSpan={visibleHeaders.length}>\n              <Typography textColor=\"neutral600\">\n                {formatMessage({\n                  id: 'app.components.EmptyStateLayout.content-document',\n                  defaultMessage: 'No content found',\n                })}\n              </Typography>\n            </StyledBodyTd>\n          </RawTr>\n        ) : (\n          assets.map((asset) => <AssetRow key={asset.id} asset={asset} />)\n        )}\n      </RawTbody>\n    </StyledTable>\n  );\n};\n"],"names":["StyledTable","styled","RawTable","theme","colors","neutral150","StyledThead","RawThead","neutral100","StyledTh","RawTh","spaces","StyledTd","RawTd","StyledTr","RawTr","neutral0","StyledBodyTd","AssetPreviewCell","asset","ext","mime","DocIcon","getAssetIcon","_jsx","Flex","justifyContent","alignItems","borderRadius","color","width","height","shrink","AssetRow","isMobile","useIsMobile","formatDate","formatMessage","useIntl","_jsxs","gap","direction","Typography","textColor","fontWeight","ellipsis","name","variant","size","formatBytes","_Fragment","createdAt","Date","dateStyle","updatedAt","IconButton","label","id","getTranslationKey","defaultMessage","More","AssetsTable","assets","visibleHeaders","TABLE_HEADERS","filter","h","colCount","length","rowCount","map","header","tableHeaderLabel","isVisuallyHidden","VisuallyHidden","RawTbody","colSpan"],"mappings":"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"}
+{"version":3,"file":"AssetsTable.mjs","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsTable.tsx"],"sourcesContent":["import { useIsMobile } from '@strapi/admin/strapi-admin';\nimport {\n  Flex,\n  IconButton,\n  RawTable,\n  RawTbody,\n  RawTd,\n  RawTh,\n  RawThead,\n  RawTr,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { Folder as FolderIcon, More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { formatBytes } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { TABLE_HEADERS } from '../constants';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\n\nimport type { File } from '../../../../../../shared/contracts/files';\nimport type { Folder } from '../../../../../../shared/contracts/folders';\n\nconst StyledTable = styled(RawTable)`\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n  border-radius: 4px;\n  overflow: hidden;\n`;\n\nconst StyledThead = styled(RawThead)`\n  background: ${({ theme }) => theme.colors.neutral100};\n\n  tr {\n    border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n`;\n\nconst StyledTh = styled(RawTh)`\n  height: 40px;\n  padding: 0 ${({ theme }) => theme.spaces[4]};\n  text-align: left;\n`;\n\nconst StyledTd = styled(RawTd)`\n  padding: 0 ${({ theme }) => theme.spaces[4]};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst StyledTr = styled(RawTr)`\n  height: 48px;\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  &:last-child {\n    ${StyledTd} {\n      border-bottom: 0;\n    }\n  }\n`;\n\nconst StyledBodyTd = styled(RawTd)`\n  padding: ${({ theme }) => theme.spaces[4]};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface AssetPreviewCellProps {\n  asset: File;\n}\n\nconst AssetPreviewCell = ({ asset }: AssetPreviewCellProps) => {\n  const { ext, mime } = asset;\n\n  const DocIcon = getAssetIcon(mime, ext);\n\n  return (\n    <Flex\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      borderRadius=\"4px\"\n      color=\"neutral500\"\n      width=\"3.2rem\"\n      height=\"3.2rem\"\n      shrink={0}\n    >\n      <DocIcon width={16} height={16} />\n    </Flex>\n  );\n};\n\ninterface AssetRowProps {\n  asset: File;\n}\n\nconst AssetRow = ({ asset }: AssetRowProps) => {\n  const isMobile = useIsMobile();\n  const { formatDate, formatMessage } = useIntl();\n\n  return (\n    <StyledTr>\n      <StyledTd>\n        <Flex gap={3} alignItems=\"center\">\n          <AssetPreviewCell asset={asset} />\n          <Flex direction=\"column\" alignItems=\"flex-start\">\n            <Typography textColor=\"neutral800\" fontWeight=\"semiBold\" ellipsis>\n              {asset.name}\n            </Typography>\n            {isMobile && (\n              <Typography textColor=\"neutral600\" variant=\"pi\">\n                {asset.size ? formatBytes(asset.size, 1) : '-'}\n              </Typography>\n            )}\n          </Flex>\n        </Flex>\n      </StyledTd>\n      {!isMobile && (\n        <>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.createdAt ? formatDate(new Date(asset.createdAt), { dateStyle: 'long' }) : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.updatedAt ? formatDate(new Date(asset.updatedAt), { dateStyle: 'long' }) : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.size ? formatBytes(asset.size, 1) : '-'}\n            </Typography>\n          </StyledTd>\n        </>\n      )}\n      <StyledTd>\n        <Flex justifyContent=\"flex-end\">\n          <IconButton\n            label={formatMessage({\n              id: getTranslationKey('control-card.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            variant=\"ghost\"\n          >\n            <More />\n          </IconButton>\n        </Flex>\n      </StyledTd>\n    </StyledTr>\n  );\n};\n\nconst FolderTr = styled(StyledTr)`\n  cursor: pointer;\n\n  &:hover {\n    background: ${({ theme }) => theme.colors.primary100};\n  }\n`;\n\ninterface FolderRowProps {\n  folder: Folder;\n}\n\nconst FolderRow = ({ folder }: FolderRowProps) => {\n  const isMobile = useIsMobile();\n  const { formatDate, formatMessage } = useIntl();\n  const { navigateToFolder } = useFolderNavigation();\n\n  return (\n    <FolderTr onClick={() => navigateToFolder(folder)}>\n      <StyledTd>\n        <Flex gap={3} alignItems=\"center\">\n          <Flex\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            borderRadius=\"4px\"\n            color=\"neutral600\"\n            width=\"3.2rem\"\n            height=\"3.2rem\"\n            shrink={0}\n          >\n            <FolderIcon width={20} height={20} />\n          </Flex>\n          <Typography textColor=\"neutral800\" fontWeight=\"semiBold\" ellipsis>\n            {folder.name}\n          </Typography>\n        </Flex>\n      </StyledTd>\n      {!isMobile && (\n        <>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {folder.createdAt\n                ? formatDate(new Date(folder.createdAt), { dateStyle: 'long' })\n                : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {folder.updatedAt\n                ? formatDate(new Date(folder.updatedAt), { dateStyle: 'long' })\n                : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">-</Typography>\n          </StyledTd>\n        </>\n      )}\n      <StyledTd>\n        <Flex justifyContent=\"flex-end\">\n          <IconButton\n            label={formatMessage({\n              id: getTranslationKey('control-card.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            variant=\"ghost\"\n            onClick={(e: React.MouseEvent) => e.stopPropagation()}\n          >\n            <More />\n          </IconButton>\n        </Flex>\n      </StyledTd>\n    </FolderTr>\n  );\n};\n\ninterface AssetsTableProps {\n  assets: File[];\n  folders?: Folder[];\n}\n\nexport const AssetsTable = ({ assets, folders = [] }: AssetsTableProps) => {\n  const isMobile = useIsMobile();\n  const { formatMessage } = useIntl();\n\n  const visibleHeaders = isMobile\n    ? TABLE_HEADERS.filter((h) => h.name === 'name' || h.name === 'actions')\n    : TABLE_HEADERS;\n\n  const totalRows = folders.length + assets.length;\n\n  return (\n    <StyledTable colCount={visibleHeaders.length} rowCount={totalRows + 1}>\n      <StyledThead>\n        <RawTr>\n          {visibleHeaders.map((header) => {\n            const tableHeaderLabel = formatMessage(header.label);\n            const isVisuallyHidden = 'isVisuallyHidden' in header && header.isVisuallyHidden;\n\n            if (isVisuallyHidden) {\n              return (\n                <StyledTh key={header.name}>\n                  <VisuallyHidden>\n                    {formatMessage({\n                      id: getTranslationKey('table.header.actions'),\n                      defaultMessage: 'actions',\n                    })}\n                  </VisuallyHidden>\n                </StyledTh>\n              );\n            }\n\n            return (\n              <StyledTh key={header.name}>\n                <Typography textColor=\"neutral600\" variant=\"sigma\">\n                  {tableHeaderLabel}\n                </Typography>\n              </StyledTh>\n            );\n          })}\n        </RawTr>\n      </StyledThead>\n      <RawTbody>\n        {totalRows === 0 ? (\n          <RawTr>\n            <StyledBodyTd colSpan={visibleHeaders.length}>\n              <Typography textColor=\"neutral600\">\n                {formatMessage({\n                  id: 'app.components.EmptyStateLayout.content-document',\n                  defaultMessage: 'No content found',\n                })}\n              </Typography>\n            </StyledBodyTd>\n          </RawTr>\n        ) : (\n          <>\n            {folders.map((folder) => (\n              <FolderRow key={`folder-${folder.id}`} folder={folder} />\n            ))}\n            {assets.map((asset) => (\n              <AssetRow key={asset.id} asset={asset} />\n            ))}\n          </>\n        )}\n      </RawTbody>\n    </StyledTable>\n  );\n};\n"],"names":["StyledTable","styled","RawTable","theme","colors","neutral150","StyledThead","RawThead","neutral100","StyledTh","RawTh","spaces","StyledTd","RawTd","StyledTr","RawTr","neutral0","StyledBodyTd","AssetPreviewCell","asset","ext","mime","DocIcon","getAssetIcon","_jsx","Flex","justifyContent","alignItems","borderRadius","color","width","height","shrink","AssetRow","isMobile","useIsMobile","formatDate","formatMessage","useIntl","_jsxs","gap","direction","Typography","textColor","fontWeight","ellipsis","name","variant","size","formatBytes","_Fragment","createdAt","Date","dateStyle","updatedAt","IconButton","label","id","getTranslationKey","defaultMessage","More","FolderTr","primary100","FolderRow","folder","navigateToFolder","useFolderNavigation","onClick","FolderIcon","e","stopPropagation","AssetsTable","assets","folders","visibleHeaders","TABLE_HEADERS","filter","h","totalRows","length","colCount","rowCount","map","header","tableHeaderLabel","isVisuallyHidden","VisuallyHidden","RawTbody","colSpan"],"mappings":"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"}

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

@@ -0,0 +1,127 @@
+'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 translations = require('../../../../utils/translations.js');
+var UploadDropZoneContext = require('./UploadDropZoneContext.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+/* -------------------------------------------------------------------------------------------------
+ * DropZoneOverlay
+ * -----------------------------------------------------------------------------------------------*/ const setOpacity = (hex, alpha)=>`${hex}${Math.floor(alpha * 255).toString(16).padStart(2, '0')}`;
+const DropZoneOverlay = styledComponents.styled(designSystem.Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${({ theme })=>setOpacity(theme.colors.primary200, 0.3)};
+  border: 1px solid ${({ theme })=>theme.colors.primary700};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  z-index: 1;
+  pointer-events: none;
+`;
+const DropZoneWithOverlay = ({ children })=>{
+    const { isDragging } = UploadDropZoneContext.useUploadDropZone();
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+        position: "relative",
+        children: [
+            isDragging && /*#__PURE__*/ jsxRuntime.jsx(DropZoneOverlay, {}),
+            children
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * DropZoneMessage
+ * -----------------------------------------------------------------------------------------------*/ const DropFilesMessageImpl = styledComponents.styled(designSystem.Box)`
+  position: fixed;
+  bottom: ${({ theme })=>theme.spaces[8]};
+  left: 50%;
+  transform: translateX(calc(-50% + ${({ $leftContentWidth })=>$leftContentWidth / 2}px));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme })=>theme.spaces[2]};
+  background: ${({ theme })=>theme.colors.primary600};
+  padding: ${({ theme })=>theme.spaces[4]} ${({ theme })=>theme.spaces[6]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  z-index: 2;
+`;
+const DropFilesMessage = ({ uploadDropZoneRef, folderName })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { isDragging } = UploadDropZoneContext.useUploadDropZone();
+    // Dropzone message position (relative to main content)
+    const [leftContentWidth, setLeftContentWidth] = React__namespace.useState(0);
+    // Calculate the left content width to position the dropzone message correctly
+    React__namespace.useEffect(()=>{
+        if (!uploadDropZoneRef?.current) return;
+        const updateRect = ()=>{
+            const rect = uploadDropZoneRef.current?.getBoundingClientRect();
+            if (rect) {
+                setLeftContentWidth((prev)=>prev !== rect.left ? rect.left : prev);
+            }
+        };
+        updateRect();
+        const resizeObserver = new ResizeObserver(updateRect);
+        resizeObserver.observe(uploadDropZoneRef.current);
+        return ()=>resizeObserver.disconnect();
+    }, [
+        uploadDropZoneRef
+    ]);
+    if (!isDragging) return null;
+    return /*#__PURE__*/ jsxRuntime.jsxs(DropFilesMessageImpl, {
+        $leftContentWidth: leftContentWidth,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                textColor: "neutral0",
+                children: formatMessage({
+                    id: translations.getTranslationKey('dropzone.upload.message'),
+                    defaultMessage: 'Drop here to upload to'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                gap: 2,
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {
+                        width: 20,
+                        height: 20,
+                        fill: "neutral0"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        textColor: "neutral0",
+                        fontWeight: "semiBold",
+                        children: folderName
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.DropFilesMessage = DropFilesMessage;
+exports.DropZoneWithOverlay = DropZoneWithOverlay;
+//# sourceMappingURL=UploadDropZone.js.map

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

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

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

@@ -0,0 +1,105 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Box, Typography, Flex } from '@strapi/design-system';
+import { Folder } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { getTranslationKey } from '../../../../utils/translations.mjs';
+import { useUploadDropZone } from './UploadDropZoneContext.mjs';
+
+/* -------------------------------------------------------------------------------------------------
+ * DropZoneOverlay
+ * -----------------------------------------------------------------------------------------------*/ const setOpacity = (hex, alpha)=>`${hex}${Math.floor(alpha * 255).toString(16).padStart(2, '0')}`;
+const DropZoneOverlay = styled(Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${({ theme })=>setOpacity(theme.colors.primary200, 0.3)};
+  border: 1px solid ${({ theme })=>theme.colors.primary700};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  z-index: 1;
+  pointer-events: none;
+`;
+const DropZoneWithOverlay = ({ children })=>{
+    const { isDragging } = useUploadDropZone();
+    return /*#__PURE__*/ jsxs(Box, {
+        position: "relative",
+        children: [
+            isDragging && /*#__PURE__*/ jsx(DropZoneOverlay, {}),
+            children
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * DropZoneMessage
+ * -----------------------------------------------------------------------------------------------*/ const DropFilesMessageImpl = styled(Box)`
+  position: fixed;
+  bottom: ${({ theme })=>theme.spaces[8]};
+  left: 50%;
+  transform: translateX(calc(-50% + ${({ $leftContentWidth })=>$leftContentWidth / 2}px));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme })=>theme.spaces[2]};
+  background: ${({ theme })=>theme.colors.primary600};
+  padding: ${({ theme })=>theme.spaces[4]} ${({ theme })=>theme.spaces[6]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  z-index: 2;
+`;
+const DropFilesMessage = ({ uploadDropZoneRef, folderName })=>{
+    const { formatMessage } = useIntl();
+    const { isDragging } = useUploadDropZone();
+    // Dropzone message position (relative to main content)
+    const [leftContentWidth, setLeftContentWidth] = React.useState(0);
+    // Calculate the left content width to position the dropzone message correctly
+    React.useEffect(()=>{
+        if (!uploadDropZoneRef?.current) return;
+        const updateRect = ()=>{
+            const rect = uploadDropZoneRef.current?.getBoundingClientRect();
+            if (rect) {
+                setLeftContentWidth((prev)=>prev !== rect.left ? rect.left : prev);
+            }
+        };
+        updateRect();
+        const resizeObserver = new ResizeObserver(updateRect);
+        resizeObserver.observe(uploadDropZoneRef.current);
+        return ()=>resizeObserver.disconnect();
+    }, [
+        uploadDropZoneRef
+    ]);
+    if (!isDragging) return null;
+    return /*#__PURE__*/ jsxs(DropFilesMessageImpl, {
+        $leftContentWidth: leftContentWidth,
+        children: [
+            /*#__PURE__*/ jsx(Typography, {
+                textColor: "neutral0",
+                children: formatMessage({
+                    id: getTranslationKey('dropzone.upload.message'),
+                    defaultMessage: 'Drop here to upload to'
+                })
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                gap: 2,
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ jsx(Folder, {
+                        width: 20,
+                        height: 20,
+                        fill: "neutral0"
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        textColor: "neutral0",
+                        fontWeight: "semiBold",
+                        children: folderName
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { DropFilesMessage, DropZoneWithOverlay };
+//# sourceMappingURL=UploadDropZone.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadDropZone.mjs","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/hooks/useFolderInfo.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var reactIntl = require('react-intl');
+var assets = require('../../../services/assets.js');
+var folders = require('../../../services/folders.js');
+var translations = require('../../../utils/translations.js');
+
+const useFolderInfo = (currentFolderId)=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { data: currentFolder, isLoading } = folders.useGetFolderQuery({
+        id: currentFolderId
+    }, {
+        skip: currentFolderId === null
+    });
+    const { data: rootAssetsData, isLoading: isRootAssetsLoading } = assets.useGetAssetsQuery({
+        folder: null,
+        pageSize: 1
+    }, {
+        skip: currentFolderId !== null
+    });
+    const homeLabel = formatMessage({
+        id: translations.getTranslationKey('plugin.home'),
+        defaultMessage: 'Home'
+    });
+    if (currentFolderId === null) {
+        if (isRootAssetsLoading) {
+            return {
+                title: homeLabel,
+                itemCount: 0
+            };
+        }
+        return {
+            title: homeLabel,
+            itemCount: rootAssetsData?.pagination?.total ?? 0
+        };
+    }
+    if (isLoading) {
+        return {
+            title: homeLabel,
+            itemCount: 0
+        };
+    }
+    return {
+        title: currentFolder?.name ?? homeLabel,
+        itemCount: currentFolder?.files?.count ?? 0
+    };
+};
+
+exports.useFolderInfo = useFolderInfo;
+//# sourceMappingURL=useFolderInfo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFolderInfo.js","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useFolderInfo.ts"],"sourcesContent":["import { useIntl } from 'react-intl';\n\nimport { useGetAssetsQuery } from '../../../services/assets';\nimport { useGetFolderQuery } from '../../../services/folders';\nimport { getTranslationKey } from '../../../utils/translations';\n\nexport interface FolderInfo {\n  title: string;\n  itemCount: number;\n}\n\nexport const useFolderInfo = (currentFolderId: number | null): FolderInfo => {\n  const { formatMessage } = useIntl();\n  const { data: currentFolder, isLoading } = useGetFolderQuery(\n    { id: currentFolderId! },\n    { skip: currentFolderId === null }\n  );\n  const { data: rootAssetsData, isLoading: isRootAssetsLoading } = useGetAssetsQuery(\n    { folder: null, pageSize: 1 },\n    { skip: currentFolderId !== null }\n  );\n\n  const homeLabel = formatMessage({\n    id: getTranslationKey('plugin.home'),\n    defaultMessage: 'Home',\n  });\n\n  if (currentFolderId === null) {\n    if (isRootAssetsLoading) {\n      return { title: homeLabel, itemCount: 0 };\n    }\n\n    return { title: homeLabel, itemCount: rootAssetsData?.pagination?.total ?? 0 };\n  }\n\n  if (isLoading) {\n    return { title: homeLabel, itemCount: 0 };\n  }\n\n  return {\n    title: currentFolder?.name ?? homeLabel,\n    itemCount: currentFolder?.files?.count ?? 0,\n  };\n};\n"],"names":["useFolderInfo","currentFolderId","formatMessage","useIntl","data","currentFolder","isLoading","useGetFolderQuery","id","skip","rootAssetsData","isRootAssetsLoading","useGetAssetsQuery","folder","pageSize","homeLabel","getTranslationKey","defaultMessage","title","itemCount","pagination","total","name","files","count"],"mappings":";;;;;;;AAWO,MAAMA,gBAAgB,CAACC,eAAAA,GAAAA;IAC5B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,IAAMC,EAAAA,aAAa,EAAEC,SAAS,EAAE,GAAGC,yBACzC,CAAA;QAAEC,EAAIP,EAAAA;KACN,EAAA;AAAEQ,QAAAA,IAAAA,EAAMR,eAAoB,KAAA;AAAK,KAAA,CAAA;IAEnC,MAAM,EAAEG,MAAMM,cAAc,EAAEJ,WAAWK,mBAAmB,EAAE,GAAGC,wBAC/D,CAAA;QAAEC,MAAQ,EAAA,IAAA;QAAMC,QAAU,EAAA;KAC1B,EAAA;AAAEL,QAAAA,IAAAA,EAAMR,eAAoB,KAAA;AAAK,KAAA,CAAA;AAGnC,IAAA,MAAMc,YAAYb,aAAc,CAAA;AAC9BM,QAAAA,EAAAA,EAAIQ,8BAAkB,CAAA,aAAA,CAAA;QACtBC,cAAgB,EAAA;AAClB,KAAA,CAAA;AAEA,IAAA,IAAIhB,oBAAoB,IAAM,EAAA;AAC5B,QAAA,IAAIU,mBAAqB,EAAA;YACvB,OAAO;gBAAEO,KAAOH,EAAAA,SAAAA;gBAAWI,SAAW,EAAA;AAAE,aAAA;AAC1C;QAEA,OAAO;YAAED,KAAOH,EAAAA,SAAAA;YAAWI,SAAWT,EAAAA,cAAAA,EAAgBU,YAAYC,KAAS,IAAA;AAAE,SAAA;AAC/E;AAEA,IAAA,IAAIf,SAAW,EAAA;QACb,OAAO;YAAEY,KAAOH,EAAAA,SAAAA;YAAWI,SAAW,EAAA;AAAE,SAAA;AAC1C;IAEA,OAAO;AACLD,QAAAA,KAAAA,EAAOb,eAAeiB,IAAQP,IAAAA,SAAAA;QAC9BI,SAAWd,EAAAA,aAAAA,EAAekB,OAAOC,KAAS,IAAA;AAC5C,KAAA;AACF;;;;"}

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

@@ -0,0 +1,48 @@
+import { useIntl } from 'react-intl';
+import { useGetAssetsQuery } from '../../../services/assets.mjs';
+import { useGetFolderQuery } from '../../../services/folders.mjs';
+import { getTranslationKey } from '../../../utils/translations.mjs';
+
+const useFolderInfo = (currentFolderId)=>{
+    const { formatMessage } = useIntl();
+    const { data: currentFolder, isLoading } = useGetFolderQuery({
+        id: currentFolderId
+    }, {
+        skip: currentFolderId === null
+    });
+    const { data: rootAssetsData, isLoading: isRootAssetsLoading } = useGetAssetsQuery({
+        folder: null,
+        pageSize: 1
+    }, {
+        skip: currentFolderId !== null
+    });
+    const homeLabel = formatMessage({
+        id: getTranslationKey('plugin.home'),
+        defaultMessage: 'Home'
+    });
+    if (currentFolderId === null) {
+        if (isRootAssetsLoading) {
+            return {
+                title: homeLabel,
+                itemCount: 0
+            };
+        }
+        return {
+            title: homeLabel,
+            itemCount: rootAssetsData?.pagination?.total ?? 0
+        };
+    }
+    if (isLoading) {
+        return {
+            title: homeLabel,
+            itemCount: 0
+        };
+    }
+    return {
+        title: currentFolder?.name ?? homeLabel,
+        itemCount: currentFolder?.files?.count ?? 0
+    };
+};
+
+export { useFolderInfo };
+//# sourceMappingURL=useFolderInfo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFolderInfo.mjs","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useFolderInfo.ts"],"sourcesContent":["import { useIntl } from 'react-intl';\n\nimport { useGetAssetsQuery } from '../../../services/assets';\nimport { useGetFolderQuery } from '../../../services/folders';\nimport { getTranslationKey } from '../../../utils/translations';\n\nexport interface FolderInfo {\n  title: string;\n  itemCount: number;\n}\n\nexport const useFolderInfo = (currentFolderId: number | null): FolderInfo => {\n  const { formatMessage } = useIntl();\n  const { data: currentFolder, isLoading } = useGetFolderQuery(\n    { id: currentFolderId! },\n    { skip: currentFolderId === null }\n  );\n  const { data: rootAssetsData, isLoading: isRootAssetsLoading } = useGetAssetsQuery(\n    { folder: null, pageSize: 1 },\n    { skip: currentFolderId !== null }\n  );\n\n  const homeLabel = formatMessage({\n    id: getTranslationKey('plugin.home'),\n    defaultMessage: 'Home',\n  });\n\n  if (currentFolderId === null) {\n    if (isRootAssetsLoading) {\n      return { title: homeLabel, itemCount: 0 };\n    }\n\n    return { title: homeLabel, itemCount: rootAssetsData?.pagination?.total ?? 0 };\n  }\n\n  if (isLoading) {\n    return { title: homeLabel, itemCount: 0 };\n  }\n\n  return {\n    title: currentFolder?.name ?? homeLabel,\n    itemCount: currentFolder?.files?.count ?? 0,\n  };\n};\n"],"names":["useFolderInfo","currentFolderId","formatMessage","useIntl","data","currentFolder","isLoading","useGetFolderQuery","id","skip","rootAssetsData","isRootAssetsLoading","useGetAssetsQuery","folder","pageSize","homeLabel","getTranslationKey","defaultMessage","title","itemCount","pagination","total","name","files","count"],"mappings":";;;;;AAWO,MAAMA,gBAAgB,CAACC,eAAAA,GAAAA;IAC5B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,IAAMC,EAAAA,aAAa,EAAEC,SAAS,EAAE,GAAGC,iBACzC,CAAA;QAAEC,EAAIP,EAAAA;KACN,EAAA;AAAEQ,QAAAA,IAAAA,EAAMR,eAAoB,KAAA;AAAK,KAAA,CAAA;IAEnC,MAAM,EAAEG,MAAMM,cAAc,EAAEJ,WAAWK,mBAAmB,EAAE,GAAGC,iBAC/D,CAAA;QAAEC,MAAQ,EAAA,IAAA;QAAMC,QAAU,EAAA;KAC1B,EAAA;AAAEL,QAAAA,IAAAA,EAAMR,eAAoB,KAAA;AAAK,KAAA,CAAA;AAGnC,IAAA,MAAMc,YAAYb,aAAc,CAAA;AAC9BM,QAAAA,EAAAA,EAAIQ,iBAAkB,CAAA,aAAA,CAAA;QACtBC,cAAgB,EAAA;AAClB,KAAA,CAAA;AAEA,IAAA,IAAIhB,oBAAoB,IAAM,EAAA;AAC5B,QAAA,IAAIU,mBAAqB,EAAA;YACvB,OAAO;gBAAEO,KAAOH,EAAAA,SAAAA;gBAAWI,SAAW,EAAA;AAAE,aAAA;AAC1C;QAEA,OAAO;YAAED,KAAOH,EAAAA,SAAAA;YAAWI,SAAWT,EAAAA,cAAAA,EAAgBU,YAAYC,KAAS,IAAA;AAAE,SAAA;AAC/E;AAEA,IAAA,IAAIf,SAAW,EAAA;QACb,OAAO;YAAEY,KAAOH,EAAAA,SAAAA;YAAWI,SAAW,EAAA;AAAE,SAAA;AAC1C;IAEA,OAAO;AACLD,QAAAA,KAAAA,EAAOb,eAAeiB,IAAQP,IAAAA,SAAAA;QAC9BI,SAAWd,EAAAA,aAAAA,EAAekB,OAAOC,KAAS,IAAA;AAC5C,KAAA;AACF;;;;"}

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+
+const useFolderNavigation = ()=>{
+    const [{ query }, setQuery] = strapiAdmin.useQueryParams();
+    const currentFolderId = query?.folder ? Number(query.folder) : null;
+    const navigateToFolder = (folder)=>{
+        setQuery({
+            folder: String(folder.id)
+        });
+    };
+    return {
+        currentFolderId,
+        navigateToFolder
+    };
+};
+
+exports.useFolderNavigation = useFolderNavigation;
+//# sourceMappingURL=useFolderNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFolderNavigation.js","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useFolderNavigation.ts"],"sourcesContent":["import { useQueryParams } from '@strapi/admin/strapi-admin';\n\nimport type { Folder } from '../../../../../../shared/contracts/folders';\n\nexport const useFolderNavigation = () => {\n  const [{ query }, setQuery] = useQueryParams<{ folder?: string }>();\n\n  const currentFolderId = query?.folder ? Number(query.folder) : null;\n\n  const navigateToFolder = (folder: Folder) => {\n    setQuery({ folder: String(folder.id) });\n  };\n\n  return {\n    currentFolderId,\n    navigateToFolder,\n  };\n};\n"],"names":["useFolderNavigation","query","setQuery","useQueryParams","currentFolderId","folder","Number","navigateToFolder","String","id"],"mappings":";;;;MAIaA,mBAAsB,GAAA,IAAA;AACjC,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,EAAEC,SAAS,GAAGC,0BAAAA,EAAAA;AAE9B,IAAA,MAAMC,kBAAkBH,KAAOI,EAAAA,MAAAA,GAASC,MAAOL,CAAAA,KAAAA,CAAMI,MAAM,CAAI,GAAA,IAAA;AAE/D,IAAA,MAAME,mBAAmB,CAACF,MAAAA,GAAAA;QACxBH,QAAS,CAAA;YAAEG,MAAQG,EAAAA,MAAAA,CAAOH,OAAOI,EAAE;AAAE,SAAA,CAAA;AACvC,KAAA;IAEA,OAAO;AACLL,QAAAA,eAAAA;AACAG,QAAAA;AACF,KAAA;AACF;;;;"}