@strapi/upload 5.49.0 → 5.50.1

package/dist/admin/future/pages/Assets/components/Dnd/AssetsDndProvider.mjs

@@ -0,0 +1,192 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo, createContext, useContext } from 'react';
+import { useSensors, useSensor, PointerSensor, DndContext, pointerWithin, DragOverlay } from '@dnd-kit/core';
+import { useNotification } from '@strapi/admin/strapi-admin';
+import { VisuallyHidden, Box } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useGetFolderStructureQuery, useBulkMoveMutation } from '../../../../services/folders.mjs';
+import { buildBulkMovePayload } from '../../../../utils/buildBulkMovePayload.mjs';
+import { canDropItemOnFolder } from '../../../../utils/canDropItemOnFolder.mjs';
+import { getBulkMoveErrorMessage } from '../../../../utils/getBulkMoveErrorMessage.mjs';
+import { getTranslationKey } from '../../../../utils/translations.mjs';
+import { parseFolderTargetId } from './dndIds.mjs';
+import { DragOverlayChip } from './DragOverlayChip.mjs';
+
+const AssetsDndContext = /*#__PURE__*/ createContext(null);
+const useAssetsDndOptional = ()=>useContext(AssetsDndContext);
+const getDragItems = (activeData)=>{
+    if (!activeData) {
+        return [];
+    }
+    // TODO(CMS-433): include selectedItems from active data for multi-drag payload members.
+    return [
+        activeData
+    ];
+};
+const AssetsDndProvider = ({ children })=>{
+    const { formatMessage } = useIntl();
+    const { toggleNotification } = useNotification();
+    const { data: folderStructure = [] } = useGetFolderStructureQuery();
+    const [bulkMove, { isLoading: isMovePending }] = useBulkMoveMutation();
+    const [activeItem, setActiveItem] = useState(null);
+    const [liveAnnouncement, setLiveAnnouncement] = useState('');
+    const announceToLiveRegion = useCallback((message)=>{
+        setLiveAnnouncement('');
+        requestAnimationFrame(()=>setLiveAnnouncement(message));
+    }, []);
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8
+        }
+    }));
+    const contextValue = useMemo(()=>({
+            isInternalDragActive: activeItem !== null,
+            isMovePending
+        }), [
+        activeItem,
+        isMovePending
+    ]);
+    const handleDragStart = useCallback((event)=>{
+        const data = event.active.data.current;
+        setActiveItem(data ?? null);
+    }, []);
+    const handleDragEnd = useCallback(async (event)=>{
+        const { active, over } = event;
+        setActiveItem(null);
+        if (isMovePending || !over) {
+            return;
+        }
+        const targetFolderId = parseFolderTargetId(over.id);
+        const activeData = active.data.current;
+        if (targetFolderId == null || !activeData) {
+            return;
+        }
+        const items = getDragItems(activeData);
+        if (!canDropItemOnFolder({
+            items,
+            targetFolderId,
+            folderStructure
+        })) {
+            return;
+        }
+        const payload = buildBulkMovePayload(items);
+        const successMessage = formatMessage({
+            id: getTranslationKey('modal.move.success-label'),
+            defaultMessage: 'Elements have been moved successfully.'
+        });
+        const errorFallback = formatMessage({
+            id: getTranslationKey('modal.move.error-label'),
+            defaultMessage: 'An error occurred while moving the elements.'
+        });
+        try {
+            await bulkMove({
+                ...payload,
+                destinationFolderId: targetFolderId
+            }).unwrap();
+            announceToLiveRegion(successMessage);
+            toggleNotification({
+                type: 'success',
+                message: successMessage
+            });
+        } catch (error) {
+            const errorMessage = getBulkMoveErrorMessage(error, errorFallback);
+            announceToLiveRegion(formatMessage({
+                id: getTranslationKey('dnd.announce.move-failure'),
+                defaultMessage: 'Move failed. {message}'
+            }, {
+                message: errorMessage
+            }));
+            toggleNotification({
+                type: 'danger',
+                message: errorMessage
+            });
+        }
+    }, [
+        announceToLiveRegion,
+        bulkMove,
+        folderStructure,
+        formatMessage,
+        isMovePending,
+        toggleNotification
+    ]);
+    const handleDragCancel = useCallback(()=>{
+        setActiveItem(null);
+    }, []);
+    const announcements = useMemo(()=>({
+            onDragStart: ({ active })=>{
+                const data = active.data.current;
+                return data ? formatMessage({
+                    id: getTranslationKey('dnd.announce.drag-start'),
+                    defaultMessage: 'Picked up {name}. Drop on a folder to move.'
+                }, {
+                    name: data.name
+                }) : '';
+            },
+            onDragOver: ()=>'',
+            onDragEnd: ({ active, over })=>{
+                if (!over) {
+                    return formatMessage({
+                        id: getTranslationKey('dnd.announce.cancel'),
+                        defaultMessage: 'Drag cancelled.'
+                    });
+                }
+                const targetFolderId = parseFolderTargetId(over.id);
+                const activeData = active.data.current;
+                if (targetFolderId == null || !activeData) {
+                    return '';
+                }
+                const items = getDragItems(activeData);
+                if (!canDropItemOnFolder({
+                    items,
+                    targetFolderId,
+                    folderStructure
+                })) {
+                    return formatMessage({
+                        id: getTranslationKey('dnd.announce.invalid-drop'),
+                        defaultMessage: 'Cannot move item to this folder.'
+                    });
+                }
+                return '';
+            },
+            onDragCancel: ()=>formatMessage({
+                    id: getTranslationKey('dnd.announce.cancel'),
+                    defaultMessage: 'Drag cancelled.'
+                })
+        }), [
+        folderStructure,
+        formatMessage
+    ]);
+    return /*#__PURE__*/ jsx(AssetsDndContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsxs(DndContext, {
+            sensors: sensors,
+            collisionDetection: pointerWithin,
+            onDragStart: handleDragStart,
+            onDragEnd: handleDragEnd,
+            onDragCancel: handleDragCancel,
+            accessibility: {
+                announcements
+            },
+            children: [
+                /*#__PURE__*/ jsx(VisuallyHidden, {
+                    "aria-live": "polite",
+                    "aria-atomic": "true",
+                    children: liveAnnouncement
+                }),
+                /*#__PURE__*/ jsx(Box, {
+                    position: "relative",
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(DragOverlay, {
+                    dropAnimation: null,
+                    children: activeItem ? /*#__PURE__*/ jsx(DragOverlayChip, {
+                        item: activeItem
+                    }) : null
+                })
+            ]
+        })
+    });
+}; // TODO(CMS-229): FolderTree droppables + keyboard move path.
+
+export { AssetsDndProvider, useAssetsDndOptional };
+//# sourceMappingURL=AssetsDndProvider.mjs.map

package/dist/admin/future/pages/Assets/components/Dnd/AssetsDndProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetsDndProvider.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/Dnd/AssetsDndProvider.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';\n\nimport {\n  DndContext,\n  DragOverlay,\n  PointerSensor,\n  pointerWithin,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from '@dnd-kit/core';\nimport { useNotification } from '@strapi/admin/strapi-admin';\nimport { Box, VisuallyHidden } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useBulkMoveMutation, useGetFolderStructureQuery } from '../../../../services/folders';\nimport { buildBulkMovePayload } from '../../../../utils/buildBulkMovePayload';\nimport { canDropItemOnFolder } from '../../../../utils/canDropItemOnFolder';\nimport { getBulkMoveErrorMessage } from '../../../../utils/getBulkMoveErrorMessage';\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport { parseFolderTargetId } from './dndIds';\nimport { DragOverlayChip } from './DragOverlayChip';\n\nimport type { DragItemData } from '../../../../types/dnd';\n\n/* -------------------------------------------------------------------------------------------------\n * Context — shared with UploadDropZoneProvider for bidirectional drag guard.\n * See UploadDropZoneContext.tsx TODO linking both providers.\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsDndContextValue {\n  isInternalDragActive: boolean;\n  isMovePending: boolean;\n}\n\nconst AssetsDndContext = createContext<AssetsDndContextValue | null>(null);\n\nexport const useAssetsDnd = () => {\n  const context = useContext(AssetsDndContext);\n\n  if (!context) {\n    throw new Error('useAssetsDnd must be used within AssetsDndProvider');\n  }\n\n  return context;\n};\n\nexport const useAssetsDndOptional = () => useContext(AssetsDndContext);\n\n/* -------------------------------------------------------------------------------------------------\n * Provider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsDndProviderProps {\n  children: ReactNode;\n}\n\nconst getDragItems = (activeData: DragItemData | undefined): DragItemData[] => {\n  if (!activeData) {\n    return [];\n  }\n\n  // TODO(CMS-433): include selectedItems from active data for multi-drag payload members.\n  return [activeData];\n};\n\nexport const AssetsDndProvider = ({ children }: AssetsDndProviderProps) => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { data: folderStructure = [] } = useGetFolderStructureQuery();\n  const [bulkMove, { isLoading: isMovePending }] = useBulkMoveMutation();\n  const [activeItem, setActiveItem] = useState<DragItemData | null>(null);\n  const [liveAnnouncement, setLiveAnnouncement] = useState('');\n\n  const announceToLiveRegion = useCallback((message: string) => {\n    setLiveAnnouncement('');\n    requestAnimationFrame(() => setLiveAnnouncement(message));\n  }, []);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: { distance: 8 },\n    })\n  );\n\n  const contextValue = useMemo<AssetsDndContextValue>(\n    () => ({\n      isInternalDragActive: activeItem !== null,\n      isMovePending,\n    }),\n    [activeItem, isMovePending]\n  );\n\n  const handleDragStart = useCallback((event: DragStartEvent) => {\n    const data = event.active.data.current as DragItemData | undefined;\n    setActiveItem(data ?? null);\n  }, []);\n\n  const handleDragEnd = useCallback(\n    async (event: DragEndEvent) => {\n      const { active, over } = event;\n      setActiveItem(null);\n\n      if (isMovePending || !over) {\n        return;\n      }\n\n      const targetFolderId = parseFolderTargetId(over.id);\n      const activeData = active.data.current as DragItemData | undefined;\n\n      if (targetFolderId == null || !activeData) {\n        return;\n      }\n\n      const items = getDragItems(activeData);\n\n      if (\n        !canDropItemOnFolder({\n          items,\n          targetFolderId,\n          folderStructure,\n        })\n      ) {\n        return;\n      }\n\n      const payload = buildBulkMovePayload(items);\n      const successMessage = formatMessage({\n        id: getTranslationKey('modal.move.success-label'),\n        defaultMessage: 'Elements have been moved successfully.',\n      });\n      const errorFallback = formatMessage({\n        id: getTranslationKey('modal.move.error-label'),\n        defaultMessage: 'An error occurred while moving the elements.',\n      });\n\n      try {\n        await bulkMove({ ...payload, destinationFolderId: targetFolderId }).unwrap();\n\n        announceToLiveRegion(successMessage);\n\n        toggleNotification({\n          type: 'success',\n          message: successMessage,\n        });\n      } catch (error) {\n        const errorMessage = getBulkMoveErrorMessage(error, errorFallback);\n\n        announceToLiveRegion(\n          formatMessage(\n            {\n              id: getTranslationKey('dnd.announce.move-failure'),\n              defaultMessage: 'Move failed. {message}',\n            },\n            { message: errorMessage }\n          )\n        );\n\n        toggleNotification({\n          type: 'danger',\n          message: errorMessage,\n        });\n      }\n    },\n    [\n      announceToLiveRegion,\n      bulkMove,\n      folderStructure,\n      formatMessage,\n      isMovePending,\n      toggleNotification,\n    ]\n  );\n\n  const handleDragCancel = useCallback(() => {\n    setActiveItem(null);\n  }, []);\n\n  const announcements = useMemo(\n    () => ({\n      onDragStart: ({ active }: DragStartEvent) => {\n        const data = active.data.current as DragItemData | undefined;\n        return data\n          ? formatMessage(\n              {\n                id: getTranslationKey('dnd.announce.drag-start'),\n                defaultMessage: 'Picked up {name}. Drop on a folder to move.',\n              },\n              { name: data.name }\n            )\n          : '';\n      },\n      onDragOver: () => '',\n      onDragEnd: ({ active, over }: DragEndEvent) => {\n        if (!over) {\n          return formatMessage({\n            id: getTranslationKey('dnd.announce.cancel'),\n            defaultMessage: 'Drag cancelled.',\n          });\n        }\n\n        const targetFolderId = parseFolderTargetId(over.id);\n        const activeData = active.data.current as DragItemData | undefined;\n\n        if (targetFolderId == null || !activeData) {\n          return '';\n        }\n\n        const items = getDragItems(activeData);\n\n        if (\n          !canDropItemOnFolder({\n            items,\n            targetFolderId,\n            folderStructure,\n          })\n        ) {\n          return formatMessage({\n            id: getTranslationKey('dnd.announce.invalid-drop'),\n            defaultMessage: 'Cannot move item to this folder.',\n          });\n        }\n\n        return '';\n      },\n      onDragCancel: () =>\n        formatMessage({\n          id: getTranslationKey('dnd.announce.cancel'),\n          defaultMessage: 'Drag cancelled.',\n        }),\n    }),\n    [folderStructure, formatMessage]\n  );\n\n  return (\n    <AssetsDndContext.Provider value={contextValue}>\n      <DndContext\n        sensors={sensors}\n        collisionDetection={pointerWithin}\n        onDragStart={handleDragStart}\n        onDragEnd={handleDragEnd}\n        onDragCancel={handleDragCancel}\n        accessibility={{ announcements }}\n      >\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n          {liveAnnouncement}\n        </VisuallyHidden>\n        <Box position=\"relative\">{children}</Box>\n        <DragOverlay dropAnimation={null}>\n          {activeItem ? <DragOverlayChip item={activeItem} /> : null}\n        </DragOverlay>\n      </DndContext>\n    </AssetsDndContext.Provider>\n  );\n};\n\n// TODO(CMS-229): FolderTree droppables + keyboard move path.\n"],"names":["AssetsDndContext","createContext","useAssetsDndOptional","useContext","getDragItems","activeData","AssetsDndProvider","children","formatMessage","useIntl","toggleNotification","useNotification","data","folderStructure","useGetFolderStructureQuery","bulkMove","isLoading","isMovePending","useBulkMoveMutation","activeItem","setActiveItem","useState","liveAnnouncement","setLiveAnnouncement","announceToLiveRegion","useCallback","message","requestAnimationFrame","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","contextValue","useMemo","isInternalDragActive","handleDragStart","event","active","current","handleDragEnd","over","targetFolderId","parseFolderTargetId","id","items","canDropItemOnFolder","payload","buildBulkMovePayload","successMessage","getTranslationKey","defaultMessage","errorFallback","destinationFolderId","unwrap","type","error","errorMessage","getBulkMoveErrorMessage","handleDragCancel","announcements","onDragStart","name","onDragOver","onDragEnd","onDragCancel","_jsx","Provider","value","_jsxs","DndContext","collisionDetection","pointerWithin","accessibility","VisuallyHidden","aria-live","aria-atomic","Box","position","DragOverlay","dropAnimation","DragOverlayChip","item"],"mappings":"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"}

package/dist/admin/future/pages/Assets/components/Dnd/DragOverlayChip.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var styledComponents = require('styled-components');
+
+const Chip = styledComponents.styled(designSystem.Flex)`
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[2]};
+  padding: ${({ theme })=>`${theme.spaces[2]} ${theme.spaces[3]}`};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.primary100};
+  box-shadow: ${({ theme })=>theme.shadows.tableShadow};
+  cursor: grabbing;
+  max-width: 24rem;
+`;
+const DragOverlayChip = ({ item })=>{
+    const Icon = item.kind === 'folder' ? icons.Folder : icons.File;
+    return /*#__PURE__*/ jsxRuntime.jsxs(Chip, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(Icon, {
+                width: 20,
+                height: 20
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                textColor: "neutral800",
+                fontWeight: "semiBold",
+                ellipsis: true,
+                children: item.name
+            })
+        ]
+    });
+}; // TODO composite overlay with folder/file counts + total badge.
+
+exports.DragOverlayChip = DragOverlayChip;
+//# sourceMappingURL=DragOverlayChip.js.map

package/dist/admin/future/pages/Assets/components/Dnd/DragOverlayChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragOverlayChip.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/Dnd/DragOverlayChip.tsx"],"sourcesContent":["import { Flex, Typography } from '@strapi/design-system';\nimport { File as FileIcon, Folder as FolderIcon } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport type { DragItemData } from '../../../../types/dnd';\n\nconst Chip = styled(Flex)`\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[3]}`};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.primary100};\n  box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  cursor: grabbing;\n  max-width: 24rem;\n`;\n\ninterface DragOverlayChipProps {\n  item: DragItemData;\n}\n\nexport const DragOverlayChip = ({ item }: DragOverlayChipProps) => {\n  const Icon = item.kind === 'folder' ? FolderIcon : FileIcon;\n\n  return (\n    <Chip>\n      <Icon width={20} height={20} />\n      <Typography textColor=\"neutral800\" fontWeight=\"semiBold\" ellipsis>\n        {item.name}\n      </Typography>\n    </Chip>\n  );\n};\n\n// TODO composite overlay with folder/file counts + total badge.\n"],"names":["Chip","styled","Flex","theme","spaces","borderRadius","colors","primary100","shadows","tableShadow","DragOverlayChip","item","Icon","kind","FolderIcon","FileIcon","_jsxs","_jsx","width","height","Typography","textColor","fontWeight","ellipsis","name"],"mappings":";;;;;;;AAMA,MAAMA,IAAAA,GAAOC,uBAAAA,CAAOC,iBAAAA,CAAK;;OAElB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7B,WAAA,EAAE,CAAC,EAAED,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMC,MAAM,CAAC,CAAA,CAAE,CAAC,CAAC,EAAED,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,EAAE,CAAC;AACnD,iBAAA,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAME,YAAY,CAAC;cACvC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAACC,UAAU,CAAC;cACzC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,OAAO,CAACC,WAAW,CAAC;;;AAGzD,CAAC;AAMM,MAAMC,eAAAA,GAAkB,CAAC,EAAEC,IAAI,EAAwB,GAAA;AAC5D,IAAA,MAAMC,IAAAA,GAAOD,IAAAA,CAAKE,IAAI,KAAK,WAAWC,YAAAA,GAAaC,UAAAA;AAEnD,IAAA,qBACEC,eAAA,CAAChB,IAAAA,EAAAA;;0BACCiB,cAAA,CAACL,IAAAA,EAAAA;gBAAKM,KAAAA,EAAO,EAAA;gBAAIC,MAAAA,EAAQ;;0BACzBF,cAAA,CAACG,uBAAAA,EAAAA;gBAAWC,SAAAA,EAAU,YAAA;gBAAaC,UAAAA,EAAW,UAAA;gBAAWC,QAAQ,EAAA,IAAA;AAC9DZ,gBAAAA,QAAAA,EAAAA,IAAAA,CAAKa;;;;AAId,EAAE;;;;"}

package/dist/admin/future/pages/Assets/components/Dnd/DragOverlayChip.mjs

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography, Flex } from '@strapi/design-system';
+import { Folder, File } from '@strapi/icons';
+import { styled } from 'styled-components';
+
+const Chip = styled(Flex)`
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[2]};
+  padding: ${({ theme })=>`${theme.spaces[2]} ${theme.spaces[3]}`};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.primary100};
+  box-shadow: ${({ theme })=>theme.shadows.tableShadow};
+  cursor: grabbing;
+  max-width: 24rem;
+`;
+const DragOverlayChip = ({ item })=>{
+    const Icon = item.kind === 'folder' ? Folder : File;
+    return /*#__PURE__*/ jsxs(Chip, {
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                width: 20,
+                height: 20
+            }),
+            /*#__PURE__*/ jsx(Typography, {
+                textColor: "neutral800",
+                fontWeight: "semiBold",
+                ellipsis: true,
+                children: item.name
+            })
+        ]
+    });
+}; // TODO composite overlay with folder/file counts + total badge.
+
+export { DragOverlayChip };
+//# sourceMappingURL=DragOverlayChip.mjs.map

package/dist/admin/future/pages/Assets/components/Dnd/DragOverlayChip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragOverlayChip.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/Dnd/DragOverlayChip.tsx"],"sourcesContent":["import { Flex, Typography } from '@strapi/design-system';\nimport { File as FileIcon, Folder as FolderIcon } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport type { DragItemData } from '../../../../types/dnd';\n\nconst Chip = styled(Flex)`\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[3]}`};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.primary100};\n  box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  cursor: grabbing;\n  max-width: 24rem;\n`;\n\ninterface DragOverlayChipProps {\n  item: DragItemData;\n}\n\nexport const DragOverlayChip = ({ item }: DragOverlayChipProps) => {\n  const Icon = item.kind === 'folder' ? FolderIcon : FileIcon;\n\n  return (\n    <Chip>\n      <Icon width={20} height={20} />\n      <Typography textColor=\"neutral800\" fontWeight=\"semiBold\" ellipsis>\n        {item.name}\n      </Typography>\n    </Chip>\n  );\n};\n\n// TODO composite overlay with folder/file counts + total badge.\n"],"names":["Chip","styled","Flex","theme","spaces","borderRadius","colors","primary100","shadows","tableShadow","DragOverlayChip","item","Icon","kind","FolderIcon","FileIcon","_jsxs","_jsx","width","height","Typography","textColor","fontWeight","ellipsis","name"],"mappings":";;;;;AAMA,MAAMA,IAAAA,GAAOC,MAAAA,CAAOC,IAAAA,CAAK;;OAElB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7B,WAAA,EAAE,CAAC,EAAED,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMC,MAAM,CAAC,CAAA,CAAE,CAAC,CAAC,EAAED,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,EAAE,CAAC;AACnD,iBAAA,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAME,YAAY,CAAC;cACvC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAACC,UAAU,CAAC;cACzC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,OAAO,CAACC,WAAW,CAAC;;;AAGzD,CAAC;AAMM,MAAMC,eAAAA,GAAkB,CAAC,EAAEC,IAAI,EAAwB,GAAA;AAC5D,IAAA,MAAMC,IAAAA,GAAOD,IAAAA,CAAKE,IAAI,KAAK,WAAWC,MAAAA,GAAaC,IAAAA;AAEnD,IAAA,qBACEC,IAAA,CAAChB,IAAAA,EAAAA;;0BACCiB,GAAA,CAACL,IAAAA,EAAAA;gBAAKM,KAAAA,EAAO,EAAA;gBAAIC,MAAAA,EAAQ;;0BACzBF,GAAA,CAACG,UAAAA,EAAAA;gBAAWC,SAAAA,EAAU,YAAA;gBAAaC,UAAAA,EAAW,UAAA;gBAAWC,QAAQ,EAAA,IAAA;AAC9DZ,gBAAAA,QAAAA,EAAAA,IAAAA,CAAKa;;;;AAId,EAAE;;;;"}

package/dist/admin/future/pages/Assets/components/Dnd/dndIds.js

@@ -0,0 +1,18 @@
+'use strict';
+
+const toFileDraggableId = (id)=>`file:${id}`;
+const toFolderDraggableId = (id)=>`folder:${id}`;
+const toFolderTargetId = (id)=>`folder-target:${id}`;
+const parseFolderTargetId = (dndId)=>{
+    if (typeof dndId !== 'string') {
+        return null;
+    }
+    const match = /^folder-target:(\d+)$/.exec(dndId);
+    return match ? Number(match[1]) : null;
+};
+
+exports.parseFolderTargetId = parseFolderTargetId;
+exports.toFileDraggableId = toFileDraggableId;
+exports.toFolderDraggableId = toFolderDraggableId;
+exports.toFolderTargetId = toFolderTargetId;
+//# sourceMappingURL=dndIds.js.map

package/dist/admin/future/pages/Assets/components/Dnd/dndIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dndIds.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/Dnd/dndIds.ts"],"sourcesContent":["export const toFileDraggableId = (id: number) => `file:${id}` as const;\n\nexport const toFolderDraggableId = (id: number) => `folder:${id}` as const;\n\nexport const toFolderTargetId = (id: number) => `folder-target:${id}` as const;\n\nexport const parseFolderTargetId = (dndId: string | number): number | null => {\n  if (typeof dndId !== 'string') {\n    return null;\n  }\n\n  const match = /^folder-target:(\\d+)$/.exec(dndId);\n  return match ? Number(match[1]) : null;\n};\n"],"names":["toFileDraggableId","id","toFolderDraggableId","toFolderTargetId","parseFolderTargetId","dndId","match","exec","Number"],"mappings":";;AAAO,MAAMA,oBAAoB,CAACC,EAAAA,GAAe,CAAC,KAAK,EAAEA;AAElD,MAAMC,sBAAsB,CAACD,EAAAA,GAAe,CAAC,OAAO,EAAEA;AAEtD,MAAME,mBAAmB,CAACF,EAAAA,GAAe,CAAC,cAAc,EAAEA;AAE1D,MAAMG,sBAAsB,CAACC,KAAAA,GAAAA;IAClC,IAAI,OAAOA,UAAU,QAAA,EAAU;QAC7B,OAAO,IAAA;AACT,IAAA;IAEA,MAAMC,KAAAA,GAAQ,uBAAA,CAAwBC,IAAI,CAACF,KAAAA,CAAAA;AAC3C,IAAA,OAAOC,KAAAA,GAAQE,MAAAA,CAAOF,KAAK,CAAC,EAAE,CAAA,GAAI,IAAA;AACpC;;;;;;;"}

package/dist/admin/future/pages/Assets/components/Dnd/dndIds.mjs

@@ -0,0 +1,13 @@
+const toFileDraggableId = (id)=>`file:${id}`;
+const toFolderDraggableId = (id)=>`folder:${id}`;
+const toFolderTargetId = (id)=>`folder-target:${id}`;
+const parseFolderTargetId = (dndId)=>{
+    if (typeof dndId !== 'string') {
+        return null;
+    }
+    const match = /^folder-target:(\d+)$/.exec(dndId);
+    return match ? Number(match[1]) : null;
+};
+
+export { parseFolderTargetId, toFileDraggableId, toFolderDraggableId, toFolderTargetId };
+//# sourceMappingURL=dndIds.mjs.map

package/dist/admin/future/pages/Assets/components/Dnd/dndIds.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dndIds.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/Dnd/dndIds.ts"],"sourcesContent":["export const toFileDraggableId = (id: number) => `file:${id}` as const;\n\nexport const toFolderDraggableId = (id: number) => `folder:${id}` as const;\n\nexport const toFolderTargetId = (id: number) => `folder-target:${id}` as const;\n\nexport const parseFolderTargetId = (dndId: string | number): number | null => {\n  if (typeof dndId !== 'string') {\n    return null;\n  }\n\n  const match = /^folder-target:(\\d+)$/.exec(dndId);\n  return match ? Number(match[1]) : null;\n};\n"],"names":["toFileDraggableId","id","toFolderDraggableId","toFolderTargetId","parseFolderTargetId","dndId","match","exec","Number"],"mappings":"AAAO,MAAMA,oBAAoB,CAACC,EAAAA,GAAe,CAAC,KAAK,EAAEA;AAElD,MAAMC,sBAAsB,CAACD,EAAAA,GAAe,CAAC,OAAO,EAAEA;AAEtD,MAAME,mBAAmB,CAACF,EAAAA,GAAe,CAAC,cAAc,EAAEA;AAE1D,MAAMG,sBAAsB,CAACC,KAAAA,GAAAA;IAClC,IAAI,OAAOA,UAAU,QAAA,EAAU;QAC7B,OAAO,IAAA;AACT,IAAA;IAEA,MAAMC,KAAAA,GAAQ,uBAAA,CAAwBC,IAAI,CAACF,KAAAA,CAAAA;AAC3C,IAAA,OAAOC,KAAAA,GAAQE,MAAAA,CAAOF,KAAK,CAAC,EAAE,CAAA,GAAI,IAAA;AACpC;;;;"}

package/dist/admin/future/pages/Assets/components/Dnd/useAssetDnd.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var React = require('react');
+var core = require('@dnd-kit/core');
+var folders = require('../../../../services/folders.js');
+var canDropItemOnFolder = require('../../../../utils/canDropItemOnFolder.js');
+var AssetsDndProvider = require('./AssetsDndProvider.js');
+var dndIds = require('./dndIds.js');
+
+const useFileDraggable = (asset)=>{
+    const { isMovePending } = AssetsDndProvider.useAssetsDndOptional() ?? {
+        isMovePending: false
+    };
+    const data = React.useMemo(()=>({
+            kind: 'file',
+            id: asset.id,
+            name: asset.name,
+            folderId: asset.folder == null ? null : typeof asset.folder === 'number' ? asset.folder : Number(asset.folder) || null
+        }), [
+        asset.folder,
+        asset.id,
+        asset.name
+    ]);
+    return core.useDraggable({
+        id: dndIds.toFileDraggableId(asset.id),
+        data,
+        disabled: isMovePending
+    });
+};
+const useFolderDraggableDroppable = (folder)=>{
+    const { isMovePending } = AssetsDndProvider.useAssetsDndOptional() ?? {
+        isMovePending: false
+    };
+    const { active } = core.useDndContext();
+    const { data: folderStructure = [] } = folders.useGetFolderStructureQuery();
+    const parentId = typeof folder.parent === 'object' && folder.parent != null ? folder.parent.id ?? null : folder.parent ?? null;
+    const dragData = React.useMemo(()=>({
+            kind: 'folder',
+            id: folder.id,
+            name: folder.name,
+            parentId
+        }), [
+        folder.id,
+        folder.name,
+        parentId
+    ]);
+    const dropData = React.useMemo(()=>({
+            kind: 'folder-target',
+            id: folder.id,
+            name: folder.name
+        }), [
+        folder.id,
+        folder.name
+    ]);
+    const draggable = core.useDraggable({
+        id: dndIds.toFolderDraggableId(folder.id),
+        data: dragData,
+        disabled: isMovePending
+    });
+    const droppable = core.useDroppable({
+        id: dndIds.toFolderTargetId(folder.id),
+        data: dropData,
+        disabled: isMovePending
+    });
+    const activeData = active?.data.current;
+    const isValidDropTarget = React.useMemo(()=>{
+        if (!activeData || activeData.id === folder.id && activeData.kind === 'folder') {
+            return false;
+        }
+        return canDropItemOnFolder.canDropItemOnFolder({
+            items: [
+                activeData
+            ],
+            targetFolderId: folder.id,
+            folderStructure
+        });
+    }, [
+        activeData,
+        folder.id,
+        folderStructure
+    ]);
+    const isOver = droppable.isOver;
+    const showValidDropHighlight = isOver && isValidDropTarget;
+    const showInvalidDropCursor = isOver && !isValidDropTarget && active != null;
+    return {
+        dragData,
+        draggable,
+        droppable,
+        isDragging: draggable.isDragging,
+        showValidDropHighlight,
+        showInvalidDropCursor
+    };
+};
+
+exports.useFileDraggable = useFileDraggable;
+exports.useFolderDraggableDroppable = useFolderDraggableDroppable;
+//# sourceMappingURL=useAssetDnd.js.map

package/dist/admin/future/pages/Assets/components/Dnd/useAssetDnd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetDnd.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/Dnd/useAssetDnd.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useDndContext, useDraggable, useDroppable } from '@dnd-kit/core';\n\nimport { useGetFolderStructureQuery } from '../../../../services/folders';\nimport { canDropItemOnFolder } from '../../../../utils/canDropItemOnFolder';\n\nimport { useAssetsDndOptional } from './AssetsDndProvider';\nimport { toFileDraggableId, toFolderDraggableId, toFolderTargetId } from './dndIds';\n\nimport type {\n  DragFileData,\n  DragFolderData,\n  DragItemData,\n  FolderTargetData,\n} from '../../../../types/dnd';\n\nexport const useFileDraggable = (asset: {\n  id: number;\n  name: string;\n  folder?: number | string | null;\n}) => {\n  const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n\n  const data = useMemo<DragFileData>(\n    () => ({\n      kind: 'file',\n      id: asset.id,\n      name: asset.name,\n      folderId:\n        asset.folder == null\n          ? null\n          : typeof asset.folder === 'number'\n            ? asset.folder\n            : Number(asset.folder) || null,\n    }),\n    [asset.folder, asset.id, asset.name]\n  );\n\n  return useDraggable({\n    id: toFileDraggableId(asset.id),\n    data,\n    disabled: isMovePending,\n  });\n};\n\nexport const useFolderDraggableDroppable = (folder: {\n  id: number;\n  name: string;\n  parent?: number | null | { id?: number };\n}) => {\n  const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n  const { active } = useDndContext();\n  const { data: folderStructure = [] } = useGetFolderStructureQuery();\n\n  const parentId =\n    typeof folder.parent === 'object' && folder.parent != null\n      ? (folder.parent.id ?? null)\n      : (folder.parent ?? null);\n\n  const dragData = useMemo<DragFolderData>(\n    () => ({\n      kind: 'folder',\n      id: folder.id,\n      name: folder.name,\n      parentId,\n    }),\n    [folder.id, folder.name, parentId]\n  );\n\n  const dropData = useMemo<FolderTargetData>(\n    () => ({\n      kind: 'folder-target',\n      id: folder.id,\n      name: folder.name,\n    }),\n    [folder.id, folder.name]\n  );\n\n  const draggable = useDraggable({\n    id: toFolderDraggableId(folder.id),\n    data: dragData,\n    disabled: isMovePending,\n  });\n\n  const droppable = useDroppable({\n    id: toFolderTargetId(folder.id),\n    data: dropData,\n    disabled: isMovePending,\n  });\n\n  const activeData = active?.data.current as DragItemData | undefined;\n\n  const isValidDropTarget = useMemo(() => {\n    if (!activeData || (activeData.id === folder.id && activeData.kind === 'folder')) {\n      return false;\n    }\n\n    return canDropItemOnFolder({\n      items: [activeData],\n      targetFolderId: folder.id,\n      folderStructure,\n    });\n  }, [activeData, folder.id, folderStructure]);\n\n  const isOver = droppable.isOver;\n  const showValidDropHighlight = isOver && isValidDropTarget;\n  const showInvalidDropCursor = isOver && !isValidDropTarget && active != null;\n\n  return {\n    dragData,\n    draggable,\n    droppable,\n    isDragging: draggable.isDragging,\n    showValidDropHighlight,\n    showInvalidDropCursor,\n  };\n};\n"],"names":["useFileDraggable","asset","isMovePending","useAssetsDndOptional","data","useMemo","kind","id","name","folderId","folder","Number","useDraggable","toFileDraggableId","disabled","useFolderDraggableDroppable","active","useDndContext","folderStructure","useGetFolderStructureQuery","parentId","parent","dragData","dropData","draggable","toFolderDraggableId","droppable","useDroppable","toFolderTargetId","activeData","current","isValidDropTarget","canDropItemOnFolder","items","targetFolderId","isOver","showValidDropHighlight","showInvalidDropCursor","isDragging"],"mappings":"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"}

package/dist/admin/future/pages/Assets/components/Dnd/useAssetDnd.mjs

@@ -0,0 +1,94 @@
+import { useMemo } from 'react';
+import { useDndContext, useDraggable, useDroppable } from '@dnd-kit/core';
+import { useGetFolderStructureQuery } from '../../../../services/folders.mjs';
+import { canDropItemOnFolder } from '../../../../utils/canDropItemOnFolder.mjs';
+import { useAssetsDndOptional } from './AssetsDndProvider.mjs';
+import { toFolderDraggableId, toFolderTargetId, toFileDraggableId } from './dndIds.mjs';
+
+const useFileDraggable = (asset)=>{
+    const { isMovePending } = useAssetsDndOptional() ?? {
+        isMovePending: false
+    };
+    const data = useMemo(()=>({
+            kind: 'file',
+            id: asset.id,
+            name: asset.name,
+            folderId: asset.folder == null ? null : typeof asset.folder === 'number' ? asset.folder : Number(asset.folder) || null
+        }), [
+        asset.folder,
+        asset.id,
+        asset.name
+    ]);
+    return useDraggable({
+        id: toFileDraggableId(asset.id),
+        data,
+        disabled: isMovePending
+    });
+};
+const useFolderDraggableDroppable = (folder)=>{
+    const { isMovePending } = useAssetsDndOptional() ?? {
+        isMovePending: false
+    };
+    const { active } = useDndContext();
+    const { data: folderStructure = [] } = useGetFolderStructureQuery();
+    const parentId = typeof folder.parent === 'object' && folder.parent != null ? folder.parent.id ?? null : folder.parent ?? null;
+    const dragData = useMemo(()=>({
+            kind: 'folder',
+            id: folder.id,
+            name: folder.name,
+            parentId
+        }), [
+        folder.id,
+        folder.name,
+        parentId
+    ]);
+    const dropData = useMemo(()=>({
+            kind: 'folder-target',
+            id: folder.id,
+            name: folder.name
+        }), [
+        folder.id,
+        folder.name
+    ]);
+    const draggable = useDraggable({
+        id: toFolderDraggableId(folder.id),
+        data: dragData,
+        disabled: isMovePending
+    });
+    const droppable = useDroppable({
+        id: toFolderTargetId(folder.id),
+        data: dropData,
+        disabled: isMovePending
+    });
+    const activeData = active?.data.current;
+    const isValidDropTarget = useMemo(()=>{
+        if (!activeData || activeData.id === folder.id && activeData.kind === 'folder') {
+            return false;
+        }
+        return canDropItemOnFolder({
+            items: [
+                activeData
+            ],
+            targetFolderId: folder.id,
+            folderStructure
+        });
+    }, [
+        activeData,
+        folder.id,
+        folderStructure
+    ]);
+    const isOver = droppable.isOver;
+    const showValidDropHighlight = isOver && isValidDropTarget;
+    const showInvalidDropCursor = isOver && !isValidDropTarget && active != null;
+    return {
+        dragData,
+        draggable,
+        droppable,
+        isDragging: draggable.isDragging,
+        showValidDropHighlight,
+        showInvalidDropCursor
+    };
+};
+
+export { useFileDraggable, useFolderDraggableDroppable };
+//# sourceMappingURL=useAssetDnd.mjs.map

package/dist/admin/future/pages/Assets/components/Dnd/useAssetDnd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetDnd.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/Dnd/useAssetDnd.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useDndContext, useDraggable, useDroppable } from '@dnd-kit/core';\n\nimport { useGetFolderStructureQuery } from '../../../../services/folders';\nimport { canDropItemOnFolder } from '../../../../utils/canDropItemOnFolder';\n\nimport { useAssetsDndOptional } from './AssetsDndProvider';\nimport { toFileDraggableId, toFolderDraggableId, toFolderTargetId } from './dndIds';\n\nimport type {\n  DragFileData,\n  DragFolderData,\n  DragItemData,\n  FolderTargetData,\n} from '../../../../types/dnd';\n\nexport const useFileDraggable = (asset: {\n  id: number;\n  name: string;\n  folder?: number | string | null;\n}) => {\n  const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n\n  const data = useMemo<DragFileData>(\n    () => ({\n      kind: 'file',\n      id: asset.id,\n      name: asset.name,\n      folderId:\n        asset.folder == null\n          ? null\n          : typeof asset.folder === 'number'\n            ? asset.folder\n            : Number(asset.folder) || null,\n    }),\n    [asset.folder, asset.id, asset.name]\n  );\n\n  return useDraggable({\n    id: toFileDraggableId(asset.id),\n    data,\n    disabled: isMovePending,\n  });\n};\n\nexport const useFolderDraggableDroppable = (folder: {\n  id: number;\n  name: string;\n  parent?: number | null | { id?: number };\n}) => {\n  const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n  const { active } = useDndContext();\n  const { data: folderStructure = [] } = useGetFolderStructureQuery();\n\n  const parentId =\n    typeof folder.parent === 'object' && folder.parent != null\n      ? (folder.parent.id ?? null)\n      : (folder.parent ?? null);\n\n  const dragData = useMemo<DragFolderData>(\n    () => ({\n      kind: 'folder',\n      id: folder.id,\n      name: folder.name,\n      parentId,\n    }),\n    [folder.id, folder.name, parentId]\n  );\n\n  const dropData = useMemo<FolderTargetData>(\n    () => ({\n      kind: 'folder-target',\n      id: folder.id,\n      name: folder.name,\n    }),\n    [folder.id, folder.name]\n  );\n\n  const draggable = useDraggable({\n    id: toFolderDraggableId(folder.id),\n    data: dragData,\n    disabled: isMovePending,\n  });\n\n  const droppable = useDroppable({\n    id: toFolderTargetId(folder.id),\n    data: dropData,\n    disabled: isMovePending,\n  });\n\n  const activeData = active?.data.current as DragItemData | undefined;\n\n  const isValidDropTarget = useMemo(() => {\n    if (!activeData || (activeData.id === folder.id && activeData.kind === 'folder')) {\n      return false;\n    }\n\n    return canDropItemOnFolder({\n      items: [activeData],\n      targetFolderId: folder.id,\n      folderStructure,\n    });\n  }, [activeData, folder.id, folderStructure]);\n\n  const isOver = droppable.isOver;\n  const showValidDropHighlight = isOver && isValidDropTarget;\n  const showInvalidDropCursor = isOver && !isValidDropTarget && active != null;\n\n  return {\n    dragData,\n    draggable,\n    droppable,\n    isDragging: draggable.isDragging,\n    showValidDropHighlight,\n    showInvalidDropCursor,\n  };\n};\n"],"names":["useFileDraggable","asset","isMovePending","useAssetsDndOptional","data","useMemo","kind","id","name","folderId","folder","Number","useDraggable","toFileDraggableId","disabled","useFolderDraggableDroppable","active","useDndContext","folderStructure","useGetFolderStructureQuery","parentId","parent","dragData","dropData","draggable","toFolderDraggableId","droppable","useDroppable","toFolderTargetId","activeData","current","isValidDropTarget","canDropItemOnFolder","items","targetFolderId","isOver","showValidDropHighlight","showInvalidDropCursor","isDragging"],"mappings":"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"}

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

@@ -7,6 +7,7 @@ var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var translations = require('../../../../utils/translations.js');
+var AssetsDndProvider = require('../Dnd/AssetsDndProvider.js');
 var UploadDropZoneContext = require('./UploadDropZoneContext.js');
 
 function _interopNamespace(e) {
@@ -45,11 +46,14 @@ const DropZoneOverlay = styledComponents.styled(designSystem.Box)`
   pointer-events: none;
 `;
 const DropZoneWithOverlay = ({ children })=>{
-    const { isDragging } = UploadDropZoneContext.useUploadDropZone();
+    const { isDragging: isUploadDragActive } = UploadDropZoneContext.useUploadDropZone();
+    const assetsDnd = AssetsDndProvider.useAssetsDndOptional();
+    const isInternalDragActive = assetsDnd?.isInternalDragActive ?? false;
+    const showOverlay = isUploadDragActive && !isInternalDragActive;
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
         position: "relative",
         children: [
-            isDragging && /*#__PURE__*/ jsxRuntime.jsx(DropZoneOverlay, {}),
+            showOverlay && /*#__PURE__*/ jsxRuntime.jsx(DropZoneOverlay, {}),
             children
         ]
     });
@@ -73,7 +77,10 @@ const DropZoneWithOverlay = ({ children })=>{
 `;
 const DropFilesMessage = ({ uploadDropZoneRef, folderName })=>{
     const { formatMessage } = reactIntl.useIntl();
-    const { isDragging } = UploadDropZoneContext.useUploadDropZone();
+    const { isDragging: isUploadDragActive } = UploadDropZoneContext.useUploadDropZone();
+    const assetsDnd = AssetsDndProvider.useAssetsDndOptional();
+    const isInternalDragActive = assetsDnd?.isInternalDragActive ?? false;
+    const showMessage = isUploadDragActive && !isInternalDragActive;
     // 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
@@ -92,7 +99,9 @@ const DropFilesMessage = ({ uploadDropZoneRef, folderName })=>{
     }, [
         uploadDropZoneRef
     ]);
-    if (!isDragging) return null;
+    if (!showMessage) {
+        return null;
+    }
     return /*#__PURE__*/ jsxRuntime.jsxs(DropFilesMessageImpl, {
         $leftContentWidth: leftContentWidth,
         children: [