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