@strapi/upload 5.35.0 → 5.36.1

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

@@ -0,0 +1,196 @@
+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 { 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';
+
+const StyledTable = styled(RawTable)`
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid ${({ theme })=>theme.colors.neutral150};
+  border-radius: 4px;
+  overflow: hidden;
+`;
+const StyledThead = styled(RawThead)`
+  background: ${({ theme })=>theme.colors.neutral100};
+
+  tr {
+    border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
+  }
+`;
+const StyledTh = styled(RawTh)`
+  height: 40px;
+  padding: 0 ${({ theme })=>theme.spaces[4]};
+  text-align: left;
+`;
+const StyledTd = styled(RawTd)`
+  padding: 0 ${({ theme })=>theme.spaces[4]};
+  border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
+`;
+const StyledTr = styled(RawTr)`
+  height: 48px;
+  background: ${({ theme })=>theme.colors.neutral0};
+
+  &:last-child {
+    ${StyledTd} {
+      border-bottom: 0;
+    }
+  }
+`;
+const StyledBodyTd = styled(RawTd)`
+  padding: ${({ theme })=>theme.spaces[4]};
+  border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
+`;
+const AssetPreviewCell = ({ asset })=>{
+    const { ext, mime } = asset;
+    const DocIcon = getAssetIcon(mime, ext);
+    return /*#__PURE__*/ jsx(Flex, {
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "4px",
+        color: "neutral500",
+        width: "3.2rem",
+        height: "3.2rem",
+        shrink: 0,
+        children: /*#__PURE__*/ jsx(DocIcon, {
+            width: 16,
+            height: 16
+        })
+    });
+};
+const AssetRow = ({ asset })=>{
+    const isMobile = useIsMobile();
+    const { formatDate, formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(StyledTr, {
+        children: [
+            /*#__PURE__*/ jsx(StyledTd, {
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    gap: 3,
+                    alignItems: "center",
+                    children: [
+                        /*#__PURE__*/ jsx(AssetPreviewCell, {
+                            asset: asset
+                        }),
+                        /*#__PURE__*/ jsxs(Flex, {
+                            direction: "column",
+                            alignItems: "flex-start",
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    textColor: "neutral800",
+                                    fontWeight: "semiBold",
+                                    ellipsis: true,
+                                    children: asset.name
+                                }),
+                                isMobile && /*#__PURE__*/ jsx(Typography, {
+                                    textColor: "neutral600",
+                                    variant: "pi",
+                                    children: asset.size ? formatBytes(asset.size, 1) : '-'
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            !isMobile && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral600",
+                            children: asset.createdAt ? formatDate(new Date(asset.createdAt), {
+                                dateStyle: 'long'
+                            }) : '-'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral600",
+                            children: asset.updatedAt ? formatDate(new Date(asset.updatedAt), {
+                                dateStyle: 'long'
+                            }) : '-'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral600",
+                            children: asset.size ? formatBytes(asset.size, 1) : '-'
+                        })
+                    })
+                ]
+            }),
+            /*#__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",
+                        children: /*#__PURE__*/ jsx(More, {})
+                    })
+                })
+            })
+        ]
+    });
+};
+const AssetsTable = ({ assets })=>{
+    const isMobile = useIsMobile();
+    const { formatMessage } = useIntl();
+    const visibleHeaders = isMobile ? TABLE_HEADERS.filter((h)=>h.name === 'name' || h.name === 'actions') : TABLE_HEADERS;
+    return /*#__PURE__*/ jsxs(StyledTable, {
+        colCount: visibleHeaders.length,
+        rowCount: assets.length + 1,
+        children: [
+            /*#__PURE__*/ jsx(StyledThead, {
+                children: /*#__PURE__*/ jsx(RawTr, {
+                    children: visibleHeaders.map((header)=>{
+                        const tableHeaderLabel = formatMessage(header.label);
+                        const isVisuallyHidden = 'isVisuallyHidden' in header && header.isVisuallyHidden;
+                        if (isVisuallyHidden) {
+                            return /*#__PURE__*/ jsx(StyledTh, {
+                                children: /*#__PURE__*/ jsx(VisuallyHidden, {
+                                    children: formatMessage({
+                                        id: getTranslationKey('table.header.actions'),
+                                        defaultMessage: 'actions'
+                                    })
+                                })
+                            }, header.name);
+                        }
+                        return /*#__PURE__*/ jsx(StyledTh, {
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                textColor: "neutral600",
+                                variant: "sigma",
+                                children: tableHeaderLabel
+                            })
+                        }, header.name);
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(RawTbody, {
+                children: assets.length === 0 ? /*#__PURE__*/ jsx(RawTr, {
+                    children: /*#__PURE__*/ jsx(StyledBodyTd, {
+                        colSpan: visibleHeaders.length,
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral600",
+                            children: formatMessage({
+                                id: 'app.components.EmptyStateLayout.content-document',
+                                defaultMessage: 'No content found'
+                            })
+                        })
+                    })
+                }) : assets.map((asset)=>/*#__PURE__*/ jsx(AssetRow, {
+                        asset: asset
+                    }, asset.id))
+            })
+        ]
+    });
+};
+
+export { AssetsTable };
+//# sourceMappingURL=AssetsTable.mjs.map

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

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

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 })=>{
+    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: "Current folder"
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+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}\n\nconst DropFilesMessage = ({ uploadDropZoneRef }: 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          Current folder{/* TODO: Replace this later with the current folder name */}\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","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 })=>{
+    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: "Current folder"
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+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}\n\nconst DropFilesMessage = ({ uploadDropZoneRef }: 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          Current folder{/* TODO: Replace this later with the current folder name */}\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","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/UploadDropZoneContext.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+
+/* -------------------------------------------------------------------------------------------------
+ * Context
+ * -----------------------------------------------------------------------------------------------*/ const UploadDropZoneContext = /*#__PURE__*/ React.createContext(null);
+/* -------------------------------------------------------------------------------------------------
+ * Components
+ * -----------------------------------------------------------------------------------------------*/ const DropZoneWrapper = styledComponents.styled(designSystem.Box)`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+`;
+const UploadDropZoneProvider = ({ children, onDrop })=>{
+    const [isDragging, setIsDragging] = React.useState(false);
+    const dragCounterRef = React.useRef(0);
+    const contextValue = {
+        isDragging
+    };
+    React.useEffect(()=>{
+        const handleDragEnd = ()=>{
+            setIsDragging(false);
+            dragCounterRef.current = 0;
+        };
+        // Handle drag leaving the entire document/window
+        const handleDocumentDragLeave = (e)=>{
+            // When relatedTarget is null, we're leaving the document entirely
+            if (!e.relatedTarget) {
+                setIsDragging(false);
+                dragCounterRef.current = 0;
+            }
+        };
+        document.addEventListener('dragend', handleDragEnd);
+        document.addEventListener('dragleave', handleDocumentDragLeave);
+        return ()=>{
+            document.removeEventListener('dragend', handleDragEnd);
+            document.removeEventListener('dragleave', handleDocumentDragLeave);
+        };
+    }, []);
+    const handleDragEnter = React.useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current += 1;
+        if (e.dataTransfer.types.includes('Files')) {
+            setIsDragging(true);
+        }
+    }, []);
+    const handleDragLeave = React.useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current -= 1;
+        // Only set dragging to false if we've left the dropzone completely
+        // (counter reaches 0 or negative)
+        if (dragCounterRef.current <= 0) {
+            setIsDragging(false);
+            dragCounterRef.current = 0;
+        }
+    }, []);
+    const handleDragOver = React.useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'copy';
+    }, []);
+    const handleDrop = React.useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        dragCounterRef.current = 0;
+        const { files } = e.dataTransfer;
+        if (files?.length && onDrop) {
+            onDrop(Array.from(files));
+        }
+    }, [
+        onDrop
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(UploadDropZoneContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsxRuntime.jsx(DropZoneWrapper, {
+            "data-testid": "assets-dropzone",
+            onDragEnter: handleDragEnter,
+            onDragLeave: handleDragLeave,
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
+            children: children
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Hook
+ * -----------------------------------------------------------------------------------------------*/ const useUploadDropZone = ()=>{
+    const context = React.useContext(UploadDropZoneContext);
+    if (!context) {
+        throw new Error('useUploadDropZone must be used within UploadDropZone');
+    }
+    return {
+        isDragging: context.isDragging
+    };
+};
+
+exports.UploadDropZoneProvider = UploadDropZoneProvider;
+exports.useUploadDropZone = useUploadDropZone;
+//# sourceMappingURL=UploadDropZoneContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadDropZoneContext.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/DropZone/UploadDropZoneContext.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type DragEvent,\n  type ReactNode,\n} from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\n/* -------------------------------------------------------------------------------------------------\n * Types\n * -----------------------------------------------------------------------------------------------*/\n\ntype DropHandler = (files: File[]) => void | Promise<void>;\n\ninterface UploadDropZoneContextValue {\n  isDragging: boolean;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Context\n * -----------------------------------------------------------------------------------------------*/\n\nconst UploadDropZoneContext = createContext<UploadDropZoneContextValue | null>(null);\n\n/* -------------------------------------------------------------------------------------------------\n * Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst DropZoneWrapper = styled(Box)`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Provider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface UploadDropZoneProps {\n  children: ReactNode;\n  onDrop?: DropHandler;\n}\n\nexport const UploadDropZoneProvider = ({ children, onDrop }: UploadDropZoneProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const dragCounterRef = useRef(0);\n\n  const contextValue: UploadDropZoneContextValue = {\n    isDragging,\n  };\n\n  useEffect(() => {\n    const handleDragEnd = () => {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    };\n\n    // Handle drag leaving the entire document/window\n    const handleDocumentDragLeave = (e: globalThis.DragEvent) => {\n      // When relatedTarget is null, we're leaving the document entirely\n      if (!e.relatedTarget) {\n        setIsDragging(false);\n        dragCounterRef.current = 0;\n      }\n    };\n\n    document.addEventListener('dragend', handleDragEnd);\n    document.addEventListener('dragleave', handleDocumentDragLeave);\n\n    return () => {\n      document.removeEventListener('dragend', handleDragEnd);\n      document.removeEventListener('dragleave', handleDocumentDragLeave);\n    };\n  }, []);\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    dragCounterRef.current += 1;\n\n    if (e.dataTransfer.types.includes('Files')) {\n      setIsDragging(true);\n    }\n  }, []);\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    dragCounterRef.current -= 1;\n\n    // Only set dragging to false if we've left the dropzone completely\n    // (counter reaches 0 or negative)\n    if (dragCounterRef.current <= 0) {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    }\n  }, []);\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    e.dataTransfer.dropEffect = 'copy';\n  }, []);\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n\n      const { files } = e.dataTransfer;\n      if (files?.length && onDrop) {\n        onDrop(Array.from(files));\n      }\n    },\n    [onDrop]\n  );\n\n  return (\n    <UploadDropZoneContext.Provider value={contextValue}>\n      <DropZoneWrapper\n        data-testid=\"assets-dropzone\"\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        {children}\n      </DropZoneWrapper>\n    </UploadDropZoneContext.Provider>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Hook\n * -----------------------------------------------------------------------------------------------*/\n\nexport const useUploadDropZone = () => {\n  const context = useContext(UploadDropZoneContext);\n\n  if (!context) {\n    throw new Error('useUploadDropZone must be used within UploadDropZone');\n  }\n\n  return {\n    isDragging: context.isDragging,\n  };\n};\n"],"names":["UploadDropZoneContext","createContext","DropZoneWrapper","styled","Box","UploadDropZoneProvider","children","onDrop","isDragging","setIsDragging","useState","dragCounterRef","useRef","contextValue","useEffect","handleDragEnd","current","handleDocumentDragLeave","e","relatedTarget","document","addEventListener","removeEventListener","handleDragEnter","useCallback","preventDefault","stopPropagation","dataTransfer","types","includes","handleDragLeave","handleDragOver","dropEffect","handleDrop","files","length","Array","from","_jsx","Provider","value","data-testid","onDragEnter","onDragLeave","onDragOver","useUploadDropZone","context","useContext","Error"],"mappings":"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"}