@strapi/upload 5.51.0 → 5.51.1

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

@@ -1 +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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"}
+{"version":3,"file":"AssetsDndProvider.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/Dnd/AssetsDndProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} 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 { formatMoveSuccessMessage } from '../../../../utils/formatMoveSuccessMessage';\nimport { getBulkMoveErrorMessage } from '../../../../utils/getBulkMoveErrorMessage';\nimport { getFolderLabel } from '../../../../utils/getFolderLabel';\nimport { getTranslationKey } from '../../../../utils/translations';\nimport { useAssetSelectionOptional } from '../../hooks/useAssetSelection';\nimport { useFolderNavigation } from '../../hooks/useFolderNavigation';\n\nimport { buildDragSet } from './buildDragSet';\nimport { computeValidDropTargets } from './computeValidDropTargets';\nimport { parseFolderTargetId, parseFolderTreeTargetId } 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  /** O(1) lookup of whether the current drag set may drop on this destination. */\n  isValidDropTarget: (targetFolderId: number | null) => 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\ninterface DragSession {\n  items: DragItemData[];\n  fromSelection: boolean;\n}\n\nconst resolveDestination = (\n  overId: string | number\n): { destinationFolderId: number | null } | null => {\n  const inView = parseFolderTargetId(overId);\n\n  if (inView != null) {\n    return { destinationFolderId: inView };\n  }\n\n  const tree = parseFolderTreeTargetId(overId);\n\n  if (tree === 'root') {\n    return { destinationFolderId: null };\n  }\n\n  if (typeof tree === 'number') {\n    return { destinationFolderId: tree };\n  }\n\n  return null;\n};\n\nexport const AssetsDndProvider = ({ children }: AssetsDndProviderProps) => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const selection = useAssetSelectionOptional();\n  const { currentFolderId } = useFolderNavigation();\n  const { data: folderStructure = [] } = useGetFolderStructureQuery();\n  const rootLabel = formatMessage({\n    id: getTranslationKey('plugin.name'),\n    defaultMessage: 'Media Library',\n  });\n  const [bulkMove, { isLoading: isMovePending }] = useBulkMoveMutation();\n  const [dragItems, setDragItems] = useState<DragItemData[]>([]);\n  const [liveAnnouncement, setLiveAnnouncement] = useState('');\n  // Sync session for drag-end — state alone can lag one render behind dragStart.\n  const dragSessionRef = useRef<DragSession>({ items: [], fromSelection: false });\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 validDropTargets = useMemo(\n    () => computeValidDropTargets(dragItems, folderStructure),\n    [dragItems, folderStructure]\n  );\n\n  const isValidDropTarget = useCallback(\n    (targetFolderId: number | null) => validDropTargets.has(targetFolderId),\n    [validDropTargets]\n  );\n\n  const contextValue = useMemo<AssetsDndContextValue>(\n    () => ({\n      isInternalDragActive: dragItems.length > 0,\n      isMovePending,\n      isValidDropTarget,\n    }),\n    [dragItems.length, isMovePending, isValidDropTarget]\n  );\n\n  const clearDragState = useCallback(() => {\n    dragSessionRef.current = { items: [], fromSelection: false };\n    setDragItems([]);\n  }, []);\n\n  const handleDragStart = useCallback(\n    (event: DragStartEvent) => {\n      const data = event.active.data.current as DragItemData | undefined;\n\n      if (!data) {\n        clearDragState();\n        return;\n      }\n\n      const { items, fromSelection } = buildDragSet(data, selection?.selectedKeys, currentFolderId);\n      dragSessionRef.current = { items, fromSelection };\n      setDragItems(items);\n    },\n    [clearDragState, currentFolderId, selection?.selectedKeys]\n  );\n\n  const handleDragEnd = useCallback(\n    async (event: DragEndEvent) => {\n      const { over } = event;\n      const { items, fromSelection } = dragSessionRef.current;\n      clearDragState();\n\n      if (isMovePending || !over || items.length === 0) {\n        return;\n      }\n\n      const destination = resolveDestination(over.id);\n\n      if (!destination) {\n        return;\n      }\n\n      const { destinationFolderId: targetFolderId } = destination;\n\n      if (\n        !canDropItemOnFolder({\n          items,\n          targetFolderId,\n          folderStructure,\n        })\n      ) {\n        return;\n      }\n\n      const payload = buildBulkMovePayload(items);\n      // Source is always the current folder — dragged items are, by definition,\n      // visible in the current view. Destination is the drop target. Both use\n      // leaf names so the DnD toast reads identically to the dialog's.\n      const successMessage = formatMoveSuccessMessage({\n        formatMessage,\n        count: items.length,\n        source: getFolderLabel(folderStructure, currentFolderId, rootLabel),\n        destination: getFolderLabel(folderStructure, targetFolderId, rootLabel),\n      });\n      const errorFallback = formatMessage({\n        id: getTranslationKey('list.bulk-actions.move.error'),\n        defaultMessage: 'An error occurred while moving the items.',\n      });\n\n      try {\n        await bulkMove({ ...payload, destinationFolderId: targetFolderId }).unwrap();\n\n        if (fromSelection) {\n          selection?.clear();\n        }\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      clearDragState,\n      currentFolderId,\n      folderStructure,\n      formatMessage,\n      isMovePending,\n      rootLabel,\n      selection,\n      toggleNotification,\n    ]\n  );\n\n  const handleDragCancel = useCallback(() => {\n    clearDragState();\n  }, [clearDragState]);\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 destination = resolveDestination(over.id);\n        const activeData = active.data.current as DragItemData | undefined;\n\n        if (!destination || !activeData) {\n          return '';\n        }\n\n        const { items } = buildDragSet(activeData, selection?.selectedKeys, currentFolderId);\n\n        if (\n          !canDropItemOnFolder({\n            items,\n            targetFolderId: destination.destinationFolderId,\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    [currentFolderId, folderStructure, formatMessage, selection?.selectedKeys]\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          {dragItems.length > 0 ? <DragOverlayChip items={dragItems} /> : null}\n        </DragOverlay>\n      </DndContext>\n    </AssetsDndContext.Provider>\n  );\n};\n\n// Keyboard-accessible moves are handled by `BulkMoveDialog` (reachable from the\n// bulk-actions bar): pointer drag is a mouse-only enhancement, the dialog is the\n// a11y path. No `KeyboardSensor` by design.\n"],"names":["AssetsDndContext","createContext","useAssetsDndOptional","useContext","resolveDestination","overId","inView","parseFolderTargetId","destinationFolderId","tree","parseFolderTreeTargetId","AssetsDndProvider","children","formatMessage","useIntl","toggleNotification","useNotification","selection","useAssetSelectionOptional","currentFolderId","useFolderNavigation","data","folderStructure","useGetFolderStructureQuery","rootLabel","id","getTranslationKey","defaultMessage","bulkMove","isLoading","isMovePending","useBulkMoveMutation","dragItems","setDragItems","useState","liveAnnouncement","setLiveAnnouncement","dragSessionRef","useRef","items","fromSelection","announceToLiveRegion","useCallback","message","requestAnimationFrame","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","validDropTargets","useMemo","computeValidDropTargets","isValidDropTarget","targetFolderId","has","contextValue","isInternalDragActive","length","clearDragState","current","handleDragStart","event","active","buildDragSet","selectedKeys","handleDragEnd","over","destination","canDropItemOnFolder","payload","buildBulkMovePayload","successMessage","formatMoveSuccessMessage","count","source","getFolderLabel","errorFallback","unwrap","clear","type","error","errorMessage","getBulkMoveErrorMessage","handleDragCancel","announcements","onDragStart","name","onDragOver","onDragEnd","activeData","onDragCancel","_jsx","Provider","value","_jsxs","DndContext","collisionDetection","pointerWithin","accessibility","VisuallyHidden","aria-live","aria-atomic","Box","position","DragOverlay","dropAnimation","DragOverlayChip"],"mappings":"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"}

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

@@ -3,9 +3,18 @@
 var jsxRuntime = require('react/jsx-runtime');
 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');
 
+// Folder & File (@strapi/icons) share viewBox 0 0 32 32 but File's glyph is
+// narrower/lighter. Rendering File a few px larger inside a fixed square box makes
+// the two previews read at the same visual size without shifting the chip layout.
+const FOLDER_ICON_SIZE = 20;
+const FILE_ICON_SIZE = 24;
+const ICON_BOX = 24;
 const Chip = styledComponents.styled(designSystem.Flex)`
+  position: relative;
   align-items: center;
   gap: ${({ theme })=>theme.spaces[2]};
   padding: ${({ theme })=>`${theme.spaces[2]} ${theme.spaces[3]}`};
@@ -15,23 +24,121 @@ const Chip = styledComponents.styled(designSystem.Flex)`
   cursor: grabbing;
   max-width: 24rem;
 `;
-const DragOverlayChip = ({ item })=>{
-    const Icon = item.kind === 'folder' ? icons.Folder : icons.File;
-    return /*#__PURE__*/ jsxRuntime.jsxs(Chip, {
+const CompositeChip = styledComponents.styled(Chip)`
+  box-shadow:
+    ${({ theme })=>theme.shadows.tableShadow},
+    0 4px 0 -1px ${({ theme })=>theme.colors.primary100},
+    0 4px 0 0 ${({ theme })=>theme.colors.primary200},
+    0 7px 0 -1px ${({ theme })=>theme.colors.primary100},
+    0 7px 0 0 ${({ theme })=>theme.colors.primary200};
+`;
+const CountGroup = styledComponents.styled(designSystem.Flex)`
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[1]};
+`;
+const IconBox = styledComponents.styled(designSystem.Flex)`
+  flex-shrink: 0;
+  width: ${ICON_BOX}px;
+  height: ${ICON_BOX}px;
+  align-items: center;
+  justify-content: center;
+`;
+const TotalBadge = styledComponents.styled(designSystem.Flex)`
+  position: absolute;
+  top: -${({ theme })=>theme.spaces[2]};
+  right: -${({ theme })=>theme.spaces[2]};
+  align-items: center;
+  justify-content: center;
+  min-width: ${({ theme })=>theme.spaces[5]};
+  height: ${({ theme })=>theme.spaces[5]};
+  padding: 0 ${({ theme })=>theme.spaces[1]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.primary600};
+`;
+const DragOverlayChip = ({ items })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    if (items.length === 0) {
+        return null;
+    }
+    if (items.length === 1) {
+        const item = items[0];
+        const isFolder = item.kind === 'folder';
+        const Icon = isFolder ? icons.Folder : icons.File;
+        const size = isFolder ? FOLDER_ICON_SIZE : FILE_ICON_SIZE;
+        return /*#__PURE__*/ jsxRuntime.jsxs(Chip, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(IconBox, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(Icon, {
+                        width: size,
+                        height: size
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    textColor: "neutral800",
+                    fontWeight: "semiBold",
+                    ellipsis: true,
+                    children: item.name
+                })
+            ]
+        });
+    }
+    const folderCount = items.filter((item)=>item.kind === 'folder').length;
+    const fileCount = items.filter((item)=>item.kind === 'file').length;
+    const total = folderCount + fileCount;
+    return /*#__PURE__*/ jsxRuntime.jsxs(CompositeChip, {
+        gap: 3,
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(Icon, {
-                width: 20,
-                height: 20
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                textColor: "neutral800",
-                fontWeight: "semiBold",
-                ellipsis: true,
-                children: item.name
+            folderCount > 0 ? /*#__PURE__*/ jsxRuntime.jsxs(CountGroup, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(IconBox, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {
+                            width: FOLDER_ICON_SIZE,
+                            height: FOLDER_ICON_SIZE
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        textColor: "neutral800",
+                        fontWeight: "semiBold",
+                        children: formatMessage({
+                            id: translations.getTranslationKey('dnd.overlay.folders'),
+                            defaultMessage: '{count, plural, one {# folder} other {# folders}}'
+                        }, {
+                            count: folderCount
+                        })
+                    })
+                ]
+            }) : null,
+            fileCount > 0 ? /*#__PURE__*/ jsxRuntime.jsxs(CountGroup, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(IconBox, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.File, {
+                            width: FILE_ICON_SIZE,
+                            height: FILE_ICON_SIZE
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        textColor: "neutral800",
+                        fontWeight: "semiBold",
+                        children: formatMessage({
+                            id: translations.getTranslationKey('dnd.overlay.files'),
+                            defaultMessage: '{count, plural, one {# file} other {# files}}'
+                        }, {
+                            count: fileCount
+                        })
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ jsxRuntime.jsx(TotalBadge, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    textColor: "neutral0",
+                    fontWeight: "bold",
+                    variant: "pi",
+                    children: total
+                })
             })
         ]
     });
-}; // 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

@@ -1 +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;;;;"}
+{"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 { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport type { DragItemData } from '../../../../types/dnd';\n\n// Folder & File (@strapi/icons) share viewBox 0 0 32 32 but File's glyph is\n// narrower/lighter. Rendering File a few px larger inside a fixed square box makes\n// the two previews read at the same visual size without shifting the chip layout.\nconst FOLDER_ICON_SIZE = 20;\nconst FILE_ICON_SIZE = 24;\nconst ICON_BOX = 24;\n\nconst Chip = styled(Flex)`\n  position: relative;\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\nconst CompositeChip = styled(Chip)`\n  box-shadow:\n    ${({ theme }) => theme.shadows.tableShadow},\n    0 4px 0 -1px ${({ theme }) => theme.colors.primary100},\n    0 4px 0 0 ${({ theme }) => theme.colors.primary200},\n    0 7px 0 -1px ${({ theme }) => theme.colors.primary100},\n    0 7px 0 0 ${({ theme }) => theme.colors.primary200};\n`;\n\nconst CountGroup = styled(Flex)`\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[1]};\n`;\n\nconst IconBox = styled(Flex)`\n  flex-shrink: 0;\n  width: ${ICON_BOX}px;\n  height: ${ICON_BOX}px;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst TotalBadge = styled(Flex)`\n  position: absolute;\n  top: -${({ theme }) => theme.spaces[2]};\n  right: -${({ theme }) => theme.spaces[2]};\n  align-items: center;\n  justify-content: center;\n  min-width: ${({ theme }) => theme.spaces[5]};\n  height: ${({ theme }) => theme.spaces[5]};\n  padding: 0 ${({ theme }) => theme.spaces[1]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.primary600};\n`;\n\ninterface DragOverlayChipProps {\n  items: DragItemData[];\n}\n\nexport const DragOverlayChip = ({ items }: DragOverlayChipProps) => {\n  const { formatMessage } = useIntl();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  if (items.length === 1) {\n    const item = items[0];\n    const isFolder = item.kind === 'folder';\n    const Icon = isFolder ? FolderIcon : FileIcon;\n    const size = isFolder ? FOLDER_ICON_SIZE : FILE_ICON_SIZE;\n\n    return (\n      <Chip>\n        <IconBox>\n          <Icon width={size} height={size} />\n        </IconBox>\n        <Typography textColor=\"neutral800\" fontWeight=\"semiBold\" ellipsis>\n          {item.name}\n        </Typography>\n      </Chip>\n    );\n  }\n\n  const folderCount = items.filter((item) => item.kind === 'folder').length;\n  const fileCount = items.filter((item) => item.kind === 'file').length;\n  const total = folderCount + fileCount;\n\n  return (\n    <CompositeChip gap={3}>\n      {folderCount > 0 ? (\n        <CountGroup>\n          <IconBox>\n            <FolderIcon width={FOLDER_ICON_SIZE} height={FOLDER_ICON_SIZE} />\n          </IconBox>\n          <Typography textColor=\"neutral800\" fontWeight=\"semiBold\">\n            {formatMessage(\n              {\n                id: getTranslationKey('dnd.overlay.folders'),\n                defaultMessage: '{count, plural, one {# folder} other {# folders}}',\n              },\n              { count: folderCount }\n            )}\n          </Typography>\n        </CountGroup>\n      ) : null}\n      {fileCount > 0 ? (\n        <CountGroup>\n          <IconBox>\n            <FileIcon width={FILE_ICON_SIZE} height={FILE_ICON_SIZE} />\n          </IconBox>\n          <Typography textColor=\"neutral800\" fontWeight=\"semiBold\">\n            {formatMessage(\n              {\n                id: getTranslationKey('dnd.overlay.files'),\n                defaultMessage: '{count, plural, one {# file} other {# files}}',\n              },\n              { count: fileCount }\n            )}\n          </Typography>\n        </CountGroup>\n      ) : null}\n      <TotalBadge>\n        <Typography textColor=\"neutral0\" fontWeight=\"bold\" variant=\"pi\">\n          {total}\n        </Typography>\n      </TotalBadge>\n    </CompositeChip>\n  );\n};\n"],"names":["FOLDER_ICON_SIZE","FILE_ICON_SIZE","ICON_BOX","Chip","styled","Flex","theme","spaces","borderRadius","colors","primary100","shadows","tableShadow","CompositeChip","primary200","CountGroup","IconBox","TotalBadge","primary600","DragOverlayChip","items","formatMessage","useIntl","length","item","isFolder","kind","Icon","FolderIcon","FileIcon","size","_jsxs","_jsx","width","height","Typography","textColor","fontWeight","ellipsis","name","folderCount","filter","fileCount","total","gap","id","getTranslationKey","defaultMessage","count","variant"],"mappings":"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"}

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

@@ -1,9 +1,18 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography, Flex } from '@strapi/design-system';
 import { Folder, File } from '@strapi/icons';
+import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
+import { getTranslationKey } from '../../../../utils/translations.mjs';
 
+// Folder & File (@strapi/icons) share viewBox 0 0 32 32 but File's glyph is
+// narrower/lighter. Rendering File a few px larger inside a fixed square box makes
+// the two previews read at the same visual size without shifting the chip layout.
+const FOLDER_ICON_SIZE = 20;
+const FILE_ICON_SIZE = 24;
+const ICON_BOX = 24;
 const Chip = styled(Flex)`
+  position: relative;
   align-items: center;
   gap: ${({ theme })=>theme.spaces[2]};
   padding: ${({ theme })=>`${theme.spaces[2]} ${theme.spaces[3]}`};
@@ -13,23 +22,121 @@ const Chip = styled(Flex)`
   cursor: grabbing;
   max-width: 24rem;
 `;
-const DragOverlayChip = ({ item })=>{
-    const Icon = item.kind === 'folder' ? Folder : File;
-    return /*#__PURE__*/ jsxs(Chip, {
+const CompositeChip = styled(Chip)`
+  box-shadow:
+    ${({ theme })=>theme.shadows.tableShadow},
+    0 4px 0 -1px ${({ theme })=>theme.colors.primary100},
+    0 4px 0 0 ${({ theme })=>theme.colors.primary200},
+    0 7px 0 -1px ${({ theme })=>theme.colors.primary100},
+    0 7px 0 0 ${({ theme })=>theme.colors.primary200};
+`;
+const CountGroup = styled(Flex)`
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[1]};
+`;
+const IconBox = styled(Flex)`
+  flex-shrink: 0;
+  width: ${ICON_BOX}px;
+  height: ${ICON_BOX}px;
+  align-items: center;
+  justify-content: center;
+`;
+const TotalBadge = styled(Flex)`
+  position: absolute;
+  top: -${({ theme })=>theme.spaces[2]};
+  right: -${({ theme })=>theme.spaces[2]};
+  align-items: center;
+  justify-content: center;
+  min-width: ${({ theme })=>theme.spaces[5]};
+  height: ${({ theme })=>theme.spaces[5]};
+  padding: 0 ${({ theme })=>theme.spaces[1]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.primary600};
+`;
+const DragOverlayChip = ({ items })=>{
+    const { formatMessage } = useIntl();
+    if (items.length === 0) {
+        return null;
+    }
+    if (items.length === 1) {
+        const item = items[0];
+        const isFolder = item.kind === 'folder';
+        const Icon = isFolder ? Folder : File;
+        const size = isFolder ? FOLDER_ICON_SIZE : FILE_ICON_SIZE;
+        return /*#__PURE__*/ jsxs(Chip, {
+            children: [
+                /*#__PURE__*/ jsx(IconBox, {
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        width: size,
+                        height: size
+                    })
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    textColor: "neutral800",
+                    fontWeight: "semiBold",
+                    ellipsis: true,
+                    children: item.name
+                })
+            ]
+        });
+    }
+    const folderCount = items.filter((item)=>item.kind === 'folder').length;
+    const fileCount = items.filter((item)=>item.kind === 'file').length;
+    const total = folderCount + fileCount;
+    return /*#__PURE__*/ jsxs(CompositeChip, {
+        gap: 3,
         children: [
-            /*#__PURE__*/ jsx(Icon, {
-                width: 20,
-                height: 20
-            }),
-            /*#__PURE__*/ jsx(Typography, {
-                textColor: "neutral800",
-                fontWeight: "semiBold",
-                ellipsis: true,
-                children: item.name
+            folderCount > 0 ? /*#__PURE__*/ jsxs(CountGroup, {
+                children: [
+                    /*#__PURE__*/ jsx(IconBox, {
+                        children: /*#__PURE__*/ jsx(Folder, {
+                            width: FOLDER_ICON_SIZE,
+                            height: FOLDER_ICON_SIZE
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        textColor: "neutral800",
+                        fontWeight: "semiBold",
+                        children: formatMessage({
+                            id: getTranslationKey('dnd.overlay.folders'),
+                            defaultMessage: '{count, plural, one {# folder} other {# folders}}'
+                        }, {
+                            count: folderCount
+                        })
+                    })
+                ]
+            }) : null,
+            fileCount > 0 ? /*#__PURE__*/ jsxs(CountGroup, {
+                children: [
+                    /*#__PURE__*/ jsx(IconBox, {
+                        children: /*#__PURE__*/ jsx(File, {
+                            width: FILE_ICON_SIZE,
+                            height: FILE_ICON_SIZE
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        textColor: "neutral800",
+                        fontWeight: "semiBold",
+                        children: formatMessage({
+                            id: getTranslationKey('dnd.overlay.files'),
+                            defaultMessage: '{count, plural, one {# file} other {# files}}'
+                        }, {
+                            count: fileCount
+                        })
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ jsx(TotalBadge, {
+                children: /*#__PURE__*/ jsx(Typography, {
+                    textColor: "neutral0",
+                    fontWeight: "bold",
+                    variant: "pi",
+                    children: total
+                })
             })
         ]
     });
-}; // 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

@@ -1 +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;;;;"}
+{"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 { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport type { DragItemData } from '../../../../types/dnd';\n\n// Folder & File (@strapi/icons) share viewBox 0 0 32 32 but File's glyph is\n// narrower/lighter. Rendering File a few px larger inside a fixed square box makes\n// the two previews read at the same visual size without shifting the chip layout.\nconst FOLDER_ICON_SIZE = 20;\nconst FILE_ICON_SIZE = 24;\nconst ICON_BOX = 24;\n\nconst Chip = styled(Flex)`\n  position: relative;\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\nconst CompositeChip = styled(Chip)`\n  box-shadow:\n    ${({ theme }) => theme.shadows.tableShadow},\n    0 4px 0 -1px ${({ theme }) => theme.colors.primary100},\n    0 4px 0 0 ${({ theme }) => theme.colors.primary200},\n    0 7px 0 -1px ${({ theme }) => theme.colors.primary100},\n    0 7px 0 0 ${({ theme }) => theme.colors.primary200};\n`;\n\nconst CountGroup = styled(Flex)`\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[1]};\n`;\n\nconst IconBox = styled(Flex)`\n  flex-shrink: 0;\n  width: ${ICON_BOX}px;\n  height: ${ICON_BOX}px;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst TotalBadge = styled(Flex)`\n  position: absolute;\n  top: -${({ theme }) => theme.spaces[2]};\n  right: -${({ theme }) => theme.spaces[2]};\n  align-items: center;\n  justify-content: center;\n  min-width: ${({ theme }) => theme.spaces[5]};\n  height: ${({ theme }) => theme.spaces[5]};\n  padding: 0 ${({ theme }) => theme.spaces[1]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.primary600};\n`;\n\ninterface DragOverlayChipProps {\n  items: DragItemData[];\n}\n\nexport const DragOverlayChip = ({ items }: DragOverlayChipProps) => {\n  const { formatMessage } = useIntl();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  if (items.length === 1) {\n    const item = items[0];\n    const isFolder = item.kind === 'folder';\n    const Icon = isFolder ? FolderIcon : FileIcon;\n    const size = isFolder ? FOLDER_ICON_SIZE : FILE_ICON_SIZE;\n\n    return (\n      <Chip>\n        <IconBox>\n          <Icon width={size} height={size} />\n        </IconBox>\n        <Typography textColor=\"neutral800\" fontWeight=\"semiBold\" ellipsis>\n          {item.name}\n        </Typography>\n      </Chip>\n    );\n  }\n\n  const folderCount = items.filter((item) => item.kind === 'folder').length;\n  const fileCount = items.filter((item) => item.kind === 'file').length;\n  const total = folderCount + fileCount;\n\n  return (\n    <CompositeChip gap={3}>\n      {folderCount > 0 ? (\n        <CountGroup>\n          <IconBox>\n            <FolderIcon width={FOLDER_ICON_SIZE} height={FOLDER_ICON_SIZE} />\n          </IconBox>\n          <Typography textColor=\"neutral800\" fontWeight=\"semiBold\">\n            {formatMessage(\n              {\n                id: getTranslationKey('dnd.overlay.folders'),\n                defaultMessage: '{count, plural, one {# folder} other {# folders}}',\n              },\n              { count: folderCount }\n            )}\n          </Typography>\n        </CountGroup>\n      ) : null}\n      {fileCount > 0 ? (\n        <CountGroup>\n          <IconBox>\n            <FileIcon width={FILE_ICON_SIZE} height={FILE_ICON_SIZE} />\n          </IconBox>\n          <Typography textColor=\"neutral800\" fontWeight=\"semiBold\">\n            {formatMessage(\n              {\n                id: getTranslationKey('dnd.overlay.files'),\n                defaultMessage: '{count, plural, one {# file} other {# files}}',\n              },\n              { count: fileCount }\n            )}\n          </Typography>\n        </CountGroup>\n      ) : null}\n      <TotalBadge>\n        <Typography textColor=\"neutral0\" fontWeight=\"bold\" variant=\"pi\">\n          {total}\n        </Typography>\n      </TotalBadge>\n    </CompositeChip>\n  );\n};\n"],"names":["FOLDER_ICON_SIZE","FILE_ICON_SIZE","ICON_BOX","Chip","styled","Flex","theme","spaces","borderRadius","colors","primary100","shadows","tableShadow","CompositeChip","primary200","CountGroup","IconBox","TotalBadge","primary600","DragOverlayChip","items","formatMessage","useIntl","length","item","isFolder","kind","Icon","FolderIcon","FileIcon","size","_jsxs","_jsx","width","height","Typography","textColor","fontWeight","ellipsis","name","folderCount","filter","fileCount","total","gap","id","getTranslationKey","defaultMessage","count","variant"],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+'use strict';
+
+var selection = require('../../utils/selection.js');
+
+/**
+ * Stamp an item with the authoritative current-folder location. Drag/selection is
+ * page-scoped to the current folder, so this is more reliable than the item's own
+ * `folderId`/`parentId` — a dragged folder's `parent` is not populated by the
+ * folders query, so its `parentId` would otherwise collapse to `null`.
+ */ const locateItem = (item, currentFolderId)=>item.kind === 'file' ? {
+        ...item,
+        folderId: currentFolderId
+    } : {
+        ...item,
+        parentId: currentFolderId
+    };
+/**
+ * Derive the drag payload once at drag start.
+ *
+ * - Dragging a selected item moves the complete current selection.
+ * - Dragging an unselected item moves only that item.
+ *
+ * Selection is page-scoped to the current folder, so every item is stamped with
+ * `currentFolderId` as its location for move validation.
+ */ const buildDragSet = (activeData, selectedKeys, currentFolderId)=>{
+    if (!selectedKeys || selectedKeys.size === 0) {
+        return {
+            items: [
+                locateItem(activeData, currentFolderId)
+            ],
+            fromSelection: false
+        };
+    }
+    const activeKey = activeData.kind === 'file' ? selection.assetKey(activeData.id) : selection.folderKey(activeData.id);
+    if (!selectedKeys.has(activeKey)) {
+        return {
+            items: [
+                locateItem(activeData, currentFolderId)
+            ],
+            fromSelection: false
+        };
+    }
+    const items = [];
+    selectedKeys.forEach((key)=>{
+        const separator = key.indexOf(':');
+        const kind = key.slice(0, separator);
+        const id = Number(key.slice(separator + 1));
+        if (kind === 'asset') {
+            items.push({
+                kind: 'file',
+                id,
+                name: activeData.kind === 'file' && activeData.id === id ? activeData.name : '',
+                folderId: currentFolderId
+            });
+            return;
+        }
+        items.push({
+            kind: 'folder',
+            id,
+            name: activeData.kind === 'folder' && activeData.id === id ? activeData.name : '',
+            parentId: currentFolderId
+        });
+    });
+    return {
+        items,
+        fromSelection: true
+    };
+};
+
+exports.buildDragSet = buildDragSet;
+//# sourceMappingURL=buildDragSet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buildDragSet.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/Dnd/buildDragSet.ts"],"sourcesContent":["import { assetKey, folderKey, type ItemKey } from '../../utils/selection';\n\nimport type { DragItemData } from '../../../../types/dnd';\n\nexport interface DragSet {\n  items: DragItemData[];\n  /** True when the active item was already selected — membership is the full selection. */\n  fromSelection: boolean;\n}\n\n/**\n * Stamp an item with the authoritative current-folder location. Drag/selection is\n * page-scoped to the current folder, so this is more reliable than the item's own\n * `folderId`/`parentId` — a dragged folder's `parent` is not populated by the\n * folders query, so its `parentId` would otherwise collapse to `null`.\n */\nconst locateItem = (item: DragItemData, currentFolderId: number | null): DragItemData =>\n  item.kind === 'file'\n    ? { ...item, folderId: currentFolderId }\n    : { ...item, parentId: currentFolderId };\n\n/**\n * Derive the drag payload once at drag start.\n *\n * - Dragging a selected item moves the complete current selection.\n * - Dragging an unselected item moves only that item.\n *\n * Selection is page-scoped to the current folder, so every item is stamped with\n * `currentFolderId` as its location for move validation.\n */\nexport const buildDragSet = (\n  activeData: DragItemData,\n  selectedKeys: Set<ItemKey> | undefined,\n  currentFolderId: number | null\n): DragSet => {\n  if (!selectedKeys || selectedKeys.size === 0) {\n    return { items: [locateItem(activeData, currentFolderId)], fromSelection: false };\n  }\n\n  const activeKey: ItemKey =\n    activeData.kind === 'file' ? assetKey(activeData.id) : folderKey(activeData.id);\n\n  if (!selectedKeys.has(activeKey)) {\n    return { items: [locateItem(activeData, currentFolderId)], fromSelection: false };\n  }\n\n  const items: DragItemData[] = [];\n\n  selectedKeys.forEach((key) => {\n    const separator = key.indexOf(':');\n    const kind = key.slice(0, separator);\n    const id = Number(key.slice(separator + 1));\n\n    if (kind === 'asset') {\n      items.push({\n        kind: 'file',\n        id,\n        name: activeData.kind === 'file' && activeData.id === id ? activeData.name : '',\n        folderId: currentFolderId,\n      });\n      return;\n    }\n\n    items.push({\n      kind: 'folder',\n      id,\n      name: activeData.kind === 'folder' && activeData.id === id ? activeData.name : '',\n      parentId: currentFolderId,\n    });\n  });\n\n  return { items, fromSelection: true };\n};\n"],"names":["locateItem","item","currentFolderId","kind","folderId","parentId","buildDragSet","activeData","selectedKeys","size","items","fromSelection","activeKey","assetKey","id","folderKey","has","forEach","key","separator","indexOf","slice","Number","push","name"],"mappings":";;;;AAUA;;;;;IAMA,MAAMA,aAAa,CAACC,IAAAA,EAAoBC,kBACtCD,IAAAA,CAAKE,IAAI,KAAK,MAAA,GACV;AAAE,QAAA,GAAGF,IAAI;QAAEG,QAAAA,EAAUF;KAAgB,GACrC;AAAE,QAAA,GAAGD,IAAI;QAAEI,QAAAA,EAAUH;AAAgB,KAAA;AAE3C;;;;;;;;AAQC,IACM,MAAMI,YAAAA,GAAe,CAC1BC,YACAC,YAAAA,EACAN,eAAAA,GAAAA;AAEA,IAAA,IAAI,CAACM,YAAAA,IAAgBA,YAAAA,CAAaC,IAAI,KAAK,CAAA,EAAG;QAC5C,OAAO;YAAEC,KAAAA,EAAO;AAACV,gBAAAA,UAAAA,CAAWO,UAAAA,EAAYL,eAAAA;AAAiB,aAAA;YAAES,aAAAA,EAAe;AAAM,SAAA;AAClF,IAAA;IAEA,MAAMC,SAAAA,GACJL,UAAAA,CAAWJ,IAAI,KAAK,MAAA,GAASU,kBAAAA,CAASN,UAAAA,CAAWO,EAAE,CAAA,GAAIC,mBAAAA,CAAUR,UAAAA,CAAWO,EAAE,CAAA;AAEhF,IAAA,IAAI,CAACN,YAAAA,CAAaQ,GAAG,CAACJ,SAAAA,CAAAA,EAAY;QAChC,OAAO;YAAEF,KAAAA,EAAO;AAACV,gBAAAA,UAAAA,CAAWO,UAAAA,EAAYL,eAAAA;AAAiB,aAAA;YAAES,aAAAA,EAAe;AAAM,SAAA;AAClF,IAAA;AAEA,IAAA,MAAMD,QAAwB,EAAE;IAEhCF,YAAAA,CAAaS,OAAO,CAAC,CAACC,GAAAA,GAAAA;QACpB,MAAMC,SAAAA,GAAYD,GAAAA,CAAIE,OAAO,CAAC,GAAA,CAAA;AAC9B,QAAA,MAAMjB,IAAAA,GAAOe,GAAAA,CAAIG,KAAK,CAAC,CAAA,EAAGF,SAAAA,CAAAA;AAC1B,QAAA,MAAML,EAAAA,GAAKQ,MAAAA,CAAOJ,GAAAA,CAAIG,KAAK,CAACF,SAAAA,GAAY,CAAA,CAAA,CAAA;AAExC,QAAA,IAAIhB,SAAS,OAAA,EAAS;AACpBO,YAAAA,KAAAA,CAAMa,IAAI,CAAC;gBACTpB,IAAAA,EAAM,MAAA;AACNW,gBAAAA,EAAAA;gBACAU,IAAAA,EAAMjB,UAAAA,CAAWJ,IAAI,KAAK,MAAA,IAAUI,UAAAA,CAAWO,EAAE,KAAKA,EAAAA,GAAKP,UAAAA,CAAWiB,IAAI,GAAG,EAAA;gBAC7EpB,QAAAA,EAAUF;AACZ,aAAA,CAAA;AACA,YAAA;AACF,QAAA;AAEAQ,QAAAA,KAAAA,CAAMa,IAAI,CAAC;YACTpB,IAAAA,EAAM,QAAA;AACNW,YAAAA,EAAAA;YACAU,IAAAA,EAAMjB,UAAAA,CAAWJ,IAAI,KAAK,QAAA,IAAYI,UAAAA,CAAWO,EAAE,KAAKA,EAAAA,GAAKP,UAAAA,CAAWiB,IAAI,GAAG,EAAA;YAC/EnB,QAAAA,EAAUH;AACZ,SAAA,CAAA;AACF,IAAA,CAAA,CAAA;IAEA,OAAO;AAAEQ,QAAAA,KAAAA;QAAOC,aAAAA,EAAe;AAAK,KAAA;AACtC;;;;"}

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

@@ -0,0 +1,69 @@
+import { assetKey, folderKey } from '../../utils/selection.mjs';
+
+/**
+ * Stamp an item with the authoritative current-folder location. Drag/selection is
+ * page-scoped to the current folder, so this is more reliable than the item's own
+ * `folderId`/`parentId` — a dragged folder's `parent` is not populated by the
+ * folders query, so its `parentId` would otherwise collapse to `null`.
+ */ const locateItem = (item, currentFolderId)=>item.kind === 'file' ? {
+        ...item,
+        folderId: currentFolderId
+    } : {
+        ...item,
+        parentId: currentFolderId
+    };
+/**
+ * Derive the drag payload once at drag start.
+ *
+ * - Dragging a selected item moves the complete current selection.
+ * - Dragging an unselected item moves only that item.
+ *
+ * Selection is page-scoped to the current folder, so every item is stamped with
+ * `currentFolderId` as its location for move validation.
+ */ const buildDragSet = (activeData, selectedKeys, currentFolderId)=>{
+    if (!selectedKeys || selectedKeys.size === 0) {
+        return {
+            items: [
+                locateItem(activeData, currentFolderId)
+            ],
+            fromSelection: false
+        };
+    }
+    const activeKey = activeData.kind === 'file' ? assetKey(activeData.id) : folderKey(activeData.id);
+    if (!selectedKeys.has(activeKey)) {
+        return {
+            items: [
+                locateItem(activeData, currentFolderId)
+            ],
+            fromSelection: false
+        };
+    }
+    const items = [];
+    selectedKeys.forEach((key)=>{
+        const separator = key.indexOf(':');
+        const kind = key.slice(0, separator);
+        const id = Number(key.slice(separator + 1));
+        if (kind === 'asset') {
+            items.push({
+                kind: 'file',
+                id,
+                name: activeData.kind === 'file' && activeData.id === id ? activeData.name : '',
+                folderId: currentFolderId
+            });
+            return;
+        }
+        items.push({
+            kind: 'folder',
+            id,
+            name: activeData.kind === 'folder' && activeData.id === id ? activeData.name : '',
+            parentId: currentFolderId
+        });
+    });
+    return {
+        items,
+        fromSelection: true
+    };
+};
+
+export { buildDragSet };
+//# sourceMappingURL=buildDragSet.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buildDragSet.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/Dnd/buildDragSet.ts"],"sourcesContent":["import { assetKey, folderKey, type ItemKey } from '../../utils/selection';\n\nimport type { DragItemData } from '../../../../types/dnd';\n\nexport interface DragSet {\n  items: DragItemData[];\n  /** True when the active item was already selected — membership is the full selection. */\n  fromSelection: boolean;\n}\n\n/**\n * Stamp an item with the authoritative current-folder location. Drag/selection is\n * page-scoped to the current folder, so this is more reliable than the item's own\n * `folderId`/`parentId` — a dragged folder's `parent` is not populated by the\n * folders query, so its `parentId` would otherwise collapse to `null`.\n */\nconst locateItem = (item: DragItemData, currentFolderId: number | null): DragItemData =>\n  item.kind === 'file'\n    ? { ...item, folderId: currentFolderId }\n    : { ...item, parentId: currentFolderId };\n\n/**\n * Derive the drag payload once at drag start.\n *\n * - Dragging a selected item moves the complete current selection.\n * - Dragging an unselected item moves only that item.\n *\n * Selection is page-scoped to the current folder, so every item is stamped with\n * `currentFolderId` as its location for move validation.\n */\nexport const buildDragSet = (\n  activeData: DragItemData,\n  selectedKeys: Set<ItemKey> | undefined,\n  currentFolderId: number | null\n): DragSet => {\n  if (!selectedKeys || selectedKeys.size === 0) {\n    return { items: [locateItem(activeData, currentFolderId)], fromSelection: false };\n  }\n\n  const activeKey: ItemKey =\n    activeData.kind === 'file' ? assetKey(activeData.id) : folderKey(activeData.id);\n\n  if (!selectedKeys.has(activeKey)) {\n    return { items: [locateItem(activeData, currentFolderId)], fromSelection: false };\n  }\n\n  const items: DragItemData[] = [];\n\n  selectedKeys.forEach((key) => {\n    const separator = key.indexOf(':');\n    const kind = key.slice(0, separator);\n    const id = Number(key.slice(separator + 1));\n\n    if (kind === 'asset') {\n      items.push({\n        kind: 'file',\n        id,\n        name: activeData.kind === 'file' && activeData.id === id ? activeData.name : '',\n        folderId: currentFolderId,\n      });\n      return;\n    }\n\n    items.push({\n      kind: 'folder',\n      id,\n      name: activeData.kind === 'folder' && activeData.id === id ? activeData.name : '',\n      parentId: currentFolderId,\n    });\n  });\n\n  return { items, fromSelection: true };\n};\n"],"names":["locateItem","item","currentFolderId","kind","folderId","parentId","buildDragSet","activeData","selectedKeys","size","items","fromSelection","activeKey","assetKey","id","folderKey","has","forEach","key","separator","indexOf","slice","Number","push","name"],"mappings":";;AAUA;;;;;IAMA,MAAMA,aAAa,CAACC,IAAAA,EAAoBC,kBACtCD,IAAAA,CAAKE,IAAI,KAAK,MAAA,GACV;AAAE,QAAA,GAAGF,IAAI;QAAEG,QAAAA,EAAUF;KAAgB,GACrC;AAAE,QAAA,GAAGD,IAAI;QAAEI,QAAAA,EAAUH;AAAgB,KAAA;AAE3C;;;;;;;;AAQC,IACM,MAAMI,YAAAA,GAAe,CAC1BC,YACAC,YAAAA,EACAN,eAAAA,GAAAA;AAEA,IAAA,IAAI,CAACM,YAAAA,IAAgBA,YAAAA,CAAaC,IAAI,KAAK,CAAA,EAAG;QAC5C,OAAO;YAAEC,KAAAA,EAAO;AAACV,gBAAAA,UAAAA,CAAWO,UAAAA,EAAYL,eAAAA;AAAiB,aAAA;YAAES,aAAAA,EAAe;AAAM,SAAA;AAClF,IAAA;IAEA,MAAMC,SAAAA,GACJL,UAAAA,CAAWJ,IAAI,KAAK,MAAA,GAASU,QAAAA,CAASN,UAAAA,CAAWO,EAAE,CAAA,GAAIC,SAAAA,CAAUR,UAAAA,CAAWO,EAAE,CAAA;AAEhF,IAAA,IAAI,CAACN,YAAAA,CAAaQ,GAAG,CAACJ,SAAAA,CAAAA,EAAY;QAChC,OAAO;YAAEF,KAAAA,EAAO;AAACV,gBAAAA,UAAAA,CAAWO,UAAAA,EAAYL,eAAAA;AAAiB,aAAA;YAAES,aAAAA,EAAe;AAAM,SAAA;AAClF,IAAA;AAEA,IAAA,MAAMD,QAAwB,EAAE;IAEhCF,YAAAA,CAAaS,OAAO,CAAC,CAACC,GAAAA,GAAAA;QACpB,MAAMC,SAAAA,GAAYD,GAAAA,CAAIE,OAAO,CAAC,GAAA,CAAA;AAC9B,QAAA,MAAMjB,IAAAA,GAAOe,GAAAA,CAAIG,KAAK,CAAC,CAAA,EAAGF,SAAAA,CAAAA;AAC1B,QAAA,MAAML,EAAAA,GAAKQ,MAAAA,CAAOJ,GAAAA,CAAIG,KAAK,CAACF,SAAAA,GAAY,CAAA,CAAA,CAAA;AAExC,QAAA,IAAIhB,SAAS,OAAA,EAAS;AACpBO,YAAAA,KAAAA,CAAMa,IAAI,CAAC;gBACTpB,IAAAA,EAAM,MAAA;AACNW,gBAAAA,EAAAA;gBACAU,IAAAA,EAAMjB,UAAAA,CAAWJ,IAAI,KAAK,MAAA,IAAUI,UAAAA,CAAWO,EAAE,KAAKA,EAAAA,GAAKP,UAAAA,CAAWiB,IAAI,GAAG,EAAA;gBAC7EpB,QAAAA,EAAUF;AACZ,aAAA,CAAA;AACA,YAAA;AACF,QAAA;AAEAQ,QAAAA,KAAAA,CAAMa,IAAI,CAAC;YACTpB,IAAAA,EAAM,QAAA;AACNW,YAAAA,EAAAA;YACAU,IAAAA,EAAMjB,UAAAA,CAAWJ,IAAI,KAAK,QAAA,IAAYI,UAAAA,CAAWO,EAAE,KAAKA,EAAAA,GAAKP,UAAAA,CAAWiB,IAAI,GAAG,EAAA;YAC/EnB,QAAAA,EAAUH;AACZ,SAAA,CAAA;AACF,IAAA,CAAA,CAAA;IAEA,OAAO;AAAEQ,QAAAA,KAAAA;QAAOC,aAAAA,EAAe;AAAK,KAAA;AACtC;;;;"}