@strapi/upload 5.59.0 → 5.60.0

package/dist/admin/components/MediaLibraryInput/AssetDropZone.mjs

@@ -1,55 +1,84 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback } from 'react';
 import { Flex, Typography } from '@strapi/design-system';
-import { PlusCircle } from '@strapi/icons';
+import { Images } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { getTranslationKey } from '../../utils/translations.mjs';
 
-const Zone = styled.button`
+const DRAG_FRAME_COLORS = {
+    accept: {
+        border: 'primary600',
+        background: 'primary100'
+    },
+    reject: {
+        border: 'neutral300',
+        background: 'neutral150'
+    }
+};
+const Zone = styled.div`
   position: relative;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: ${({ theme })=>theme.spaces[2]};
+  gap: ${({ theme })=>theme.spaces[4]};
   width: 100%;
-  min-height: 12rem;
-  padding: ${({ theme })=>theme.spaces[6]};
-  border: 1px solid ${({ theme })=>theme.colors.neutral200};
   border-radius: ${({ theme })=>theme.borderRadius};
-  background: ${({ theme })=>theme.colors.neutral100};
-  cursor: pointer;
+  text-align: ${({ $variant })=>$variant === 'bar' ? 'start' : 'center'};
 
-  // Only while a file is dragged over the zone: it marks where the file will
-  // land, so it has nothing to say to a pointer that is merely passing through.
-  // Drawn inside rather than on the box itself, so the field keeps its own
-  // outline and the invitation reads as an area to drop into.
-  &::after {
-    content: '';
-    position: absolute;
-    inset: ${({ theme })=>theme.spaces[2]} ${({ theme })=>theme.spaces[4]};
-    border: 1px dashed ${({ theme })=>theme.colors.primary600};
-    border-radius: ${({ theme })=>theme.borderRadius};
-    opacity: ${({ $isDragging })=>$isDragging ? 1 : 0};
-    pointer-events: none;
-  }
+  ${({ $variant, theme })=>$variant !== 'bar' ? `
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    min-height: ${$variant === 'tile' ? '20.8rem' : 'auto'};
+    padding: ${theme.spaces[4]};
+    border: 1px dashed ${theme.colors.neutral300};
+    background: ${theme.colors.neutral0};
+  ` : `
+    min-height: 7.2rem;
+    padding: ${theme.spaces[4]};
+    border: 1px solid ${theme.colors.neutral200};
+    background: ${theme.colors.neutral100};
+  `}
 
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
+  // Only while a file is dragged over the zone: a solid frame inset from the
+  // zone's own border marks where the file will land, greyed out when it can't.
+  ${({ $dragState, theme })=>$dragState !== 'idle' && `
+    &::after {
+      content: '';
+      position: absolute;
+      inset: ${theme.spaces[2]};
+      border: 1px solid ${theme.colors[DRAG_FRAME_COLORS[$dragState].border]};
+      border-radius: ${theme.borderRadius};
+      background: ${theme.colors[DRAG_FRAME_COLORS[$dragState].background]};
+      pointer-events: none;
+    }
 
-  &:focus-visible {
-    outline: 2px solid ${({ theme })=>theme.colors.primary600};
-    outline-offset: 2px;
+    & > * {
+      z-index: 1;
+    }
+  `}
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
   }
 `;
+const IconFrame = styled(Flex)`
+  flex-shrink: 0;
+  width: 4rem;
+  height: 4rem;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.neutral200};
+  color: ${({ theme })=>theme.colors.neutral500};
+`;
 /**
- * The field's own drop target. Deliberately not the Media Library page's
+ * The field's own drop target. It only takes drops: browsing and picking files
+ * go through the "Add asset" menu, so the field has one way in, not two.
+ *
+ * Deliberately not the Media Library page's
  * `UploadDropZoneProvider`: that one covers a whole route and paints a
  * full-surface overlay, where this has to stay inside one field on a form that
  * may hold several of them.
- */ const AssetDropZone = ({ disabled = false, onClick, onDropFiles })=>{
+ */ const AssetDropZone = ({ variant = 'bar', disabled = false, onDropFiles })=>{
     const { formatMessage } = useIntl();
     const [isDragging, setIsDragging] = useState(false);
     // Drag events fire on descendants too, so a plain boolean flickers as the
@@ -57,14 +86,12 @@ const Zone = styled.button`
     const dragDepth = useRef(0);
     const handleDragEnter = useCallback((event)=>{
         event.preventDefault();
-        if (disabled || !event.dataTransfer.types.includes('Files')) {
+        if (!event.dataTransfer.types.includes('Files')) {
             return;
         }
         dragDepth.current += 1;
         setIsDragging(true);
-    }, [
-        disabled
-    ]);
+    }, []);
     const handleDragLeave = useCallback((event)=>{
         event.preventDefault();
         dragDepth.current -= 1;
@@ -75,8 +102,11 @@ const Zone = styled.button`
     }, []);
     const handleDragOver = useCallback((event)=>{
         event.preventDefault();
-        event.dataTransfer.dropEffect = 'copy';
-    }, []);
+        // `none` shows the no-drop cursor, and the browser then fires no `drop`.
+        event.dataTransfer.dropEffect = disabled ? 'none' : 'copy';
+    }, [
+        disabled
+    ]);
     const handleDrop = useCallback((event)=>{
         event.preventDefault();
         dragDepth.current = 0;
@@ -93,30 +123,27 @@ const Zone = styled.button`
         onDropFiles
     ]);
     return /*#__PURE__*/ jsxs(Zone, {
-        type: "button",
-        $isDragging: isDragging,
-        "aria-disabled": disabled,
-        onClick: ()=>!disabled && onClick(),
+        $dragState: isDragging ? disabled ? 'reject' : 'accept' : 'idle',
+        $variant: variant,
+        "data-disabled": disabled,
         onDragEnter: handleDragEnter,
         onDragLeave: handleDragLeave,
         onDragOver: handleDragOver,
         onDrop: handleDrop,
         children: [
-            /*#__PURE__*/ jsx(Flex, {
+            /*#__PURE__*/ jsx(IconFrame, {
                 justifyContent: "center",
-                color: disabled ? 'neutral500' : 'primary600',
-                children: /*#__PURE__*/ jsx(PlusCircle, {
-                    width: "3.2rem",
-                    height: "3.2rem"
+                alignItems: "center",
+                children: /*#__PURE__*/ jsx(Images, {
+                    width: "2.4rem",
+                    height: "2.4rem"
                 })
             }),
             /*#__PURE__*/ jsx(Typography, {
                 textColor: "neutral600",
-                fontWeight: "bold",
-                variant: "pi",
                 children: formatMessage({
-                    id: getTranslationKey('mediaLibraryInput.placeholder'),
-                    defaultMessage: 'Click to add an asset or drag and drop one in this area'
+                    id: getTranslationKey('content-manager.input.placeholder'),
+                    defaultMessage: 'Drag & drop an asset here'
                 })
             })
         ]

package/dist/admin/components/MediaLibraryInput/AssetDropZone.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AssetDropZone.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetDropZone.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type DragEvent } from 'react';\n\nimport { Flex, Typography } from '@strapi/design-system';\nimport { PlusCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nconst Zone = styled.button<{ $isDragging: boolean }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  width: 100%;\n  min-height: 12rem;\n  padding: ${({ theme }) => theme.spaces[6]};\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral100};\n  cursor: pointer;\n\n  // Only while a file is dragged over the zone: it marks where the file will\n  // land, so it has nothing to say to a pointer that is merely passing through.\n  // Drawn inside rather than on the box itself, so the field keeps its own\n  // outline and the invitation reads as an area to drop into.\n  &::after {\n    content: '';\n    position: absolute;\n    inset: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};\n    border: 1px dashed ${({ theme }) => theme.colors.primary600};\n    border-radius: ${({ theme }) => theme.borderRadius};\n    opacity: ${({ $isDragging }) => ($isDragging ? 1 : 0)};\n    pointer-events: none;\n  }\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.primary600};\n    outline-offset: 2px;\n  }\n`;\n\ninterface AssetDropZoneProps {\n  disabled?: boolean;\n  onClick: () => void;\n  onDropFiles: (files: globalThis.File[]) => void;\n}\n\n/**\n * The field's own drop target. Deliberately not the Media Library page's\n * `UploadDropZoneProvider`: that one covers a whole route and paints a\n * full-surface overlay, where this has to stay inside one field on a form that\n * may hold several of them.\n */\nexport const AssetDropZone = ({ disabled = false, onClick, onDropFiles }: AssetDropZoneProps) => {\n  const { formatMessage } = useIntl();\n  const [isDragging, setIsDragging] = useState(false);\n  // Drag events fire on descendants too, so a plain boolean flickers as the\n  // pointer crosses the icon or the label. Counting enter/leave pairs doesn't.\n  const dragDepth = useRef(0);\n\n  const handleDragEnter = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      if (disabled || !event.dataTransfer.types.includes('Files')) {\n        return;\n      }\n      dragDepth.current += 1;\n      setIsDragging(true);\n    },\n    [disabled]\n  );\n\n  const handleDragLeave = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    dragDepth.current -= 1;\n    if (dragDepth.current <= 0) {\n      dragDepth.current = 0;\n      setIsDragging(false);\n    }\n  }, []);\n\n  const handleDragOver = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    event.dataTransfer.dropEffect = 'copy';\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      dragDepth.current = 0;\n      setIsDragging(false);\n\n      if (disabled) {\n        return;\n      }\n\n      const files = Array.from(event.dataTransfer.files ?? []);\n      if (files.length > 0) {\n        onDropFiles(files);\n      }\n    },\n    [disabled, onDropFiles]\n  );\n\n  return (\n    <Zone\n      type=\"button\"\n      $isDragging={isDragging}\n      aria-disabled={disabled}\n      onClick={() => !disabled && onClick()}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n    >\n      {/* Same treatment as the repeatable-component initializer, so the two\n          empty states in a form read as one affordance. */}\n      <Flex justifyContent=\"center\" color={disabled ? 'neutral500' : 'primary600'}>\n        <PlusCircle width=\"3.2rem\" height=\"3.2rem\" />\n      </Flex>\n      <Typography textColor=\"neutral600\" fontWeight=\"bold\" variant=\"pi\">\n        {/* The legacy field's own key: identical wording, already translated in\n            every locale, where a new key would ship English to all of them. */}\n        {formatMessage({\n          id: getTranslationKey('mediaLibraryInput.placeholder'),\n          defaultMessage: 'Click to add an asset or drag and drop one in this area',\n        })}\n      </Typography>\n    </Zone>\n  );\n};\n"],"names":["Zone","styled","button","theme","spaces","colors","neutral200","borderRadius","neutral100","primary600","$isDragging","AssetDropZone","disabled","onClick","onDropFiles","formatMessage","useIntl","isDragging","setIsDragging","useState","dragDepth","useRef","handleDragEnter","useCallback","event","preventDefault","dataTransfer","types","includes","current","handleDragLeave","handleDragOver","dropEffect","handleDrop","files","Array","from","length","_jsxs","type","aria-disabled","onDragEnter","onDragLeave","onDragOver","onDrop","_jsx","Flex","justifyContent","color","PlusCircle","width","height","Typography","textColor","fontWeight","variant","id","getTranslationKey","defaultMessage"],"mappings":"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"}
+{"version":3,"file":"AssetDropZone.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetDropZone.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type DragEvent } from 'react';\n\nimport { Flex, Typography } from '@strapi/design-system';\nimport { Images } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\n/**\n * `bar` on an empty field, `tile` after a multiple field's cards, `stacked`\n * below them when the field is too narrow for both on one row.\n */\nexport type ZoneVariant = 'bar' | 'tile' | 'stacked';\n\ntype DragState = 'idle' | 'accept' | 'reject';\n\nconst DRAG_FRAME_COLORS = {\n  accept: { border: 'primary600', background: 'primary100' },\n  reject: { border: 'neutral300', background: 'neutral150' },\n} as const;\n\nconst Zone = styled.div<{ $dragState: DragState; $variant: ZoneVariant }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[4]};\n  width: 100%;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  text-align: ${({ $variant }) => ($variant === 'bar' ? 'start' : 'center')};\n\n  ${({ $variant, theme }) =>\n    $variant !== 'bar'\n      ? `\n    flex-direction: column;\n    justify-content: center;\n    height: 100%;\n    min-height: ${$variant === 'tile' ? '20.8rem' : 'auto'};\n    padding: ${theme.spaces[4]};\n    border: 1px dashed ${theme.colors.neutral300};\n    background: ${theme.colors.neutral0};\n  `\n      : `\n    min-height: 7.2rem;\n    padding: ${theme.spaces[4]};\n    border: 1px solid ${theme.colors.neutral200};\n    background: ${theme.colors.neutral100};\n  `}\n\n  // Only while a file is dragged over the zone: a solid frame inset from the\n  // zone's own border marks where the file will land, greyed out when it can't.\n  ${({ $dragState, theme }) =>\n    $dragState !== 'idle' &&\n    `\n    &::after {\n      content: '';\n      position: absolute;\n      inset: ${theme.spaces[2]};\n      border: 1px solid ${theme.colors[DRAG_FRAME_COLORS[$dragState].border]};\n      border-radius: ${theme.borderRadius};\n      background: ${theme.colors[DRAG_FRAME_COLORS[$dragState].background]};\n      pointer-events: none;\n    }\n\n    & > * {\n      z-index: 1;\n    }\n  `}\n\n  &[data-disabled='true'] {\n    cursor: not-allowed;\n  }\n`;\n\nconst IconFrame = styled(Flex)`\n  flex-shrink: 0;\n  width: 4rem;\n  height: 4rem;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral200};\n  color: ${({ theme }) => theme.colors.neutral500};\n`;\n\ninterface AssetDropZoneProps {\n  variant?: ZoneVariant;\n  disabled?: boolean;\n  onDropFiles: (files: globalThis.File[]) => void;\n}\n\n/**\n * The field's own drop target. It only takes drops: browsing and picking files\n * go through the \"Add asset\" menu, so the field has one way in, not two.\n *\n * Deliberately not the Media Library page's\n * `UploadDropZoneProvider`: that one covers a whole route and paints a\n * full-surface overlay, where this has to stay inside one field on a form that\n * may hold several of them.\n */\nexport const AssetDropZone = ({\n  variant = 'bar',\n  disabled = false,\n  onDropFiles,\n}: AssetDropZoneProps) => {\n  const { formatMessage } = useIntl();\n  const [isDragging, setIsDragging] = useState(false);\n  // Drag events fire on descendants too, so a plain boolean flickers as the\n  // pointer crosses the icon or the label. Counting enter/leave pairs doesn't.\n  const dragDepth = useRef(0);\n\n  const handleDragEnter = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    if (!event.dataTransfer.types.includes('Files')) {\n      return;\n    }\n    dragDepth.current += 1;\n    setIsDragging(true);\n  }, []);\n\n  const handleDragLeave = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    dragDepth.current -= 1;\n    if (dragDepth.current <= 0) {\n      dragDepth.current = 0;\n      setIsDragging(false);\n    }\n  }, []);\n\n  const handleDragOver = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      // `none` shows the no-drop cursor, and the browser then fires no `drop`.\n      event.dataTransfer.dropEffect = disabled ? 'none' : 'copy';\n    },\n    [disabled]\n  );\n\n  const handleDrop = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      dragDepth.current = 0;\n      setIsDragging(false);\n\n      if (disabled) {\n        return;\n      }\n\n      const files = Array.from(event.dataTransfer.files ?? []);\n      if (files.length > 0) {\n        onDropFiles(files);\n      }\n    },\n    [disabled, onDropFiles]\n  );\n\n  return (\n    <Zone\n      $dragState={isDragging ? (disabled ? 'reject' : 'accept') : 'idle'}\n      $variant={variant}\n      data-disabled={disabled}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n    >\n      <IconFrame justifyContent=\"center\" alignItems=\"center\">\n        <Images width=\"2.4rem\" height=\"2.4rem\" />\n      </IconFrame>\n      <Typography textColor=\"neutral600\">\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.placeholder'),\n          defaultMessage: 'Drag & drop an asset here',\n        })}\n      </Typography>\n    </Zone>\n  );\n};\n"],"names":["DRAG_FRAME_COLORS","accept","border","background","reject","Zone","styled","div","theme","spaces","borderRadius","$variant","colors","neutral300","neutral0","neutral200","neutral100","$dragState","IconFrame","Flex","neutral500","AssetDropZone","variant","disabled","onDropFiles","formatMessage","useIntl","isDragging","setIsDragging","useState","dragDepth","useRef","handleDragEnter","useCallback","event","preventDefault","dataTransfer","types","includes","current","handleDragLeave","handleDragOver","dropEffect","handleDrop","files","Array","from","length","_jsxs","data-disabled","onDragEnter","onDragLeave","onDragOver","onDrop","_jsx","justifyContent","alignItems","Images","width","height","Typography","textColor","id","getTranslationKey","defaultMessage"],"mappings":";;;;;;;;AAiBA,MAAMA,iBAAAA,GAAoB;IACxBC,MAAAA,EAAQ;QAAEC,MAAAA,EAAQ,YAAA;QAAcC,UAAAA,EAAY;AAAa,KAAA;IACzDC,MAAAA,EAAQ;QAAEF,MAAAA,EAAQ,YAAA;QAAcC,UAAAA,EAAY;AAAa;AAC3D,CAAA;AAEA,MAAME,IAAAA,GAAOC,MAAAA,CAAOC,GAAqD;;;;OAIlE,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;AAEvB,iBAAA,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAME,YAAY,CAAC;cACvC,EAAE,CAAC,EAAEC,QAAQ,EAAE,GAAMA,QAAAA,KAAa,KAAA,GAAQ,UAAU,QAAA,CAAU;;EAE1E,EAAE,CAAC,EAAEA,QAAQ,EAAEH,KAAK,EAAE,GACpBG,QAAAA,KAAa,KAAA,GACT;;;;gBAIQ,EAAEA,QAAAA,KAAa,MAAA,GAAS,SAAA,GAAY,MAAA,CAAO;AAC9C,aAAA,EAAEH,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;AACR,uBAAA,EAAED,KAAAA,CAAMI,MAAM,CAACC,UAAU,CAAC;AACjC,gBAAA,EAAEL,KAAAA,CAAMI,MAAM,CAACE,QAAQ,CAAC;AACtC,EAAA,CAAC,GACK;;AAEK,aAAA,EAAEN,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;AACT,sBAAA,EAAED,KAAAA,CAAMI,MAAM,CAACG,UAAU,CAAC;AAChC,gBAAA,EAAEP,KAAAA,CAAMI,MAAM,CAACI,UAAU,CAAC;AACxC,EAAA,CAAC;;;;EAID,EAAE,CAAC,EAAEC,UAAU,EAAET,KAAK,EAAE,GACtBS,UAAAA,KAAe,MAAA,IACf;;;;AAIS,aAAA,EAAET,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;wBACP,EAAED,KAAAA,CAAMI,MAAM,CAACZ,iBAAiB,CAACiB,UAAAA,CAAW,CAACf,MAAM,CAAC,CAAC;qBACxD,EAAEM,KAAAA,CAAME,YAAY,CAAC;kBACxB,EAAEF,KAAAA,CAAMI,MAAM,CAACZ,iBAAiB,CAACiB,UAAAA,CAAW,CAACd,UAAU,CAAC,CAAC;;;;;;;AAOzE,EAAA,CAAC;;;;;AAKH,CAAC;AAED,MAAMe,SAAAA,GAAYZ,MAAAA,CAAOa,IAAAA,CAAK;;;;AAIb,iBAAA,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAAA,CAAME,YAAY,CAAC;cACvC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMI,MAAM,CAACG,UAAU,CAAC;SAC9C,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAAA,CAAMI,MAAM,CAACQ,UAAU,CAAC;AAClD,CAAC;AAQD;;;;;;;;AAQC,IACM,MAAMC,aAAAA,GAAgB,CAAC,EAC5BC,OAAAA,GAAU,KAAK,EACfC,QAAAA,GAAW,KAAK,EAChBC,WAAW,EACQ,GAAA;IACnB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,QAAAA,CAAS,KAAA,CAAA;;;AAG7C,IAAA,MAAMC,YAAYC,MAAAA,CAAO,CAAA,CAAA;IAEzB,MAAMC,eAAAA,GAAkBC,YAAY,CAACC,KAAAA,GAAAA;AACnCA,QAAAA,KAAAA,CAAMC,cAAc,EAAA;QACpB,IAAI,CAACD,MAAME,YAAY,CAACC,KAAK,CAACC,QAAQ,CAAC,OAAA,CAAA,EAAU;AAC/C,YAAA;AACF,QAAA;AACAR,QAAAA,SAAAA,CAAUS,OAAO,IAAI,CAAA;QACrBX,aAAAA,CAAc,IAAA,CAAA;AAChB,IAAA,CAAA,EAAG,EAAE,CAAA;IAEL,MAAMY,eAAAA,GAAkBP,YAAY,CAACC,KAAAA,GAAAA;AACnCA,QAAAA,KAAAA,CAAMC,cAAc,EAAA;AACpBL,QAAAA,SAAAA,CAAUS,OAAO,IAAI,CAAA;QACrB,IAAIT,SAAAA,CAAUS,OAAO,IAAI,CAAA,EAAG;AAC1BT,YAAAA,SAAAA,CAAUS,OAAO,GAAG,CAAA;YACpBX,aAAAA,CAAc,KAAA,CAAA;AAChB,QAAA;AACF,IAAA,CAAA,EAAG,EAAE,CAAA;IAEL,MAAMa,cAAAA,GAAiBR,YACrB,CAACC,KAAAA,GAAAA;AACCA,QAAAA,KAAAA,CAAMC,cAAc,EAAA;;AAEpBD,QAAAA,KAAAA,CAAME,YAAY,CAACM,UAAU,GAAGnB,WAAW,MAAA,GAAS,MAAA;IACtD,CAAA,EACA;AAACA,QAAAA;AAAS,KAAA,CAAA;IAGZ,MAAMoB,UAAAA,GAAaV,YACjB,CAACC,KAAAA,GAAAA;AACCA,QAAAA,KAAAA,CAAMC,cAAc,EAAA;AACpBL,QAAAA,SAAAA,CAAUS,OAAO,GAAG,CAAA;QACpBX,aAAAA,CAAc,KAAA,CAAA;AAEd,QAAA,IAAIL,QAAAA,EAAU;AACZ,YAAA;AACF,QAAA;QAEA,MAAMqB,KAAAA,GAAQC,MAAMC,IAAI,CAACZ,MAAME,YAAY,CAACQ,KAAK,IAAI,EAAE,CAAA;QACvD,IAAIA,KAAAA,CAAMG,MAAM,GAAG,CAAA,EAAG;YACpBvB,WAAAA,CAAYoB,KAAAA,CAAAA;AACd,QAAA;IACF,CAAA,EACA;AAACrB,QAAAA,QAAAA;AAAUC,QAAAA;AAAY,KAAA,CAAA;AAGzB,IAAA,qBACEwB,IAAA,CAAC3C,IAAAA,EAAAA;QACCY,UAAAA,EAAYU,UAAAA,GAAcJ,QAAAA,GAAW,QAAA,GAAW,QAAA,GAAY,MAAA;QAC5DZ,QAAAA,EAAUW,OAAAA;QACV2B,eAAAA,EAAe1B,QAAAA;QACf2B,WAAAA,EAAalB,eAAAA;QACbmB,WAAAA,EAAaX,eAAAA;QACbY,UAAAA,EAAYX,cAAAA;QACZY,MAAAA,EAAQV,UAAAA;;0BAERW,GAAA,CAACpC,SAAAA,EAAAA;gBAAUqC,cAAAA,EAAe,QAAA;gBAASC,UAAAA,EAAW,QAAA;AAC5C,gBAAA,QAAA,gBAAAF,GAAA,CAACG,MAAAA,EAAAA;oBAAOC,KAAAA,EAAM,QAAA;oBAASC,MAAAA,EAAO;;;0BAEhCL,GAAA,CAACM,UAAAA,EAAAA;gBAAWC,SAAAA,EAAU,YAAA;0BACnBpC,aAAAA,CAAc;AACbqC,oBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,mCAAA,CAAA;oBACtBC,cAAAA,EAAgB;AAClB,iBAAA;;;;AAIR;;;;"}

package/dist/admin/components/MediaLibraryInput/AssetPreview.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+var enums = require('../../enums.js');
+var files = require('../../utils/files.js');
+var getAssetIcon = require('../../utils/getAssetIcon.js');
+
+const Frame = styledComponents.styled(designSystem.Flex)`
+  flex-shrink: 0;
+  overflow: hidden;
+  color: ${({ theme })=>theme.colors.neutral500};
+  background: ${({ theme })=>theme.colors.neutral150};
+
+  ${({ $size, theme })=>$size === 'S' ? `
+    width: 4rem;
+    height: 4rem;
+    border-radius: ${theme.borderRadius};
+  ` : `
+    width: 100%;
+    height: 16rem;
+  `}
+`;
+const PreviewImage = styledComponents.styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const PreviewFrame = ({ size, src, alt = '', crossOrigin, mime, ext })=>{
+    if (src) {
+        return /*#__PURE__*/ jsxRuntime.jsx(Frame, {
+            $size: size,
+            children: /*#__PURE__*/ jsxRuntime.jsx(PreviewImage, {
+                src: src,
+                alt: alt,
+                crossOrigin: crossOrigin,
+                draggable: false
+            })
+        });
+    }
+    const Icon = getAssetIcon.getAssetIcon(mime, ext);
+    const iconSize = size === 'S' ? 20 : 32;
+    return /*#__PURE__*/ jsxRuntime.jsx(Frame, {
+        $size: size,
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsxRuntime.jsx(Icon, {
+            width: iconSize,
+            height: iconSize
+        })
+    });
+};
+const AssetPreview = ({ asset, size })=>{
+    const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;
+    if (!mime?.includes(enums.ASSET_TYPES.Image)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(PreviewFrame, {
+            size: size,
+            mime: mime,
+            ext: ext
+        });
+    }
+    // Same two rules the grid preview applies: a `updatedAt` cache-buster so a
+    // replaced asset stops serving its old thumbnail, skipped on signed URLs
+    // because an extra param invalidates the signature (#26581).
+    // Cards are wider than a thumbnail, so they take the `small` format when there is one.
+    const sizedFormats = formats;
+    const preferredUrl = size === 'S' ? formats?.thumbnail?.url : sizedFormats?.small?.url ?? url;
+    const rawUrl = files.prefixFileUrlWithBackendUrl(preferredUrl) ?? files.prefixFileUrlWithBackendUrl(url);
+    const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;
+    const src = rawUrl && cacheKey !== undefined ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}` : rawUrl;
+    return /*#__PURE__*/ jsxRuntime.jsx(PreviewFrame, {
+        size: size,
+        src: src,
+        alt: alternativeText || '',
+        crossOrigin: !isLocal && isUrlSigned ? 'anonymous' : undefined,
+        mime: mime,
+        ext: ext
+    });
+};
+/**
+ * Previews a file that has not reached the server yet, straight from the
+ * user's disk.
+ */ const UploadPreview = ({ file, size })=>{
+    const isImage = file?.type.startsWith(enums.ASSET_TYPES.Image) ?? false;
+    const [src, setSrc] = React.useState();
+    React.useEffect(()=>{
+        if (!file || !isImage) {
+            setSrc(undefined);
+            return undefined;
+        }
+        const objectUrl = URL.createObjectURL(file);
+        setSrc(objectUrl);
+        return ()=>URL.revokeObjectURL(objectUrl);
+    }, [
+        file,
+        isImage
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(PreviewFrame, {
+        size: size,
+        src: src,
+        mime: file?.type
+    });
+};
+
+exports.AssetPreview = AssetPreview;
+exports.UploadPreview = UploadPreview;
+//# sourceMappingURL=AssetPreview.js.map

package/dist/admin/components/MediaLibraryInput/AssetPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPreview.js","sources":["../../../../admin/src/components/MediaLibraryInput/AssetPreview.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { ASSET_TYPES } from '../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../utils/files';\nimport { getAssetIcon } from '../../utils/getAssetIcon';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype PreviewSize = 'S' | 'L';\n\nconst Frame = styled(Flex)<{ $size: PreviewSize }>`\n  flex-shrink: 0;\n  overflow: hidden;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral150};\n\n  ${({ $size, theme }) =>\n    $size === 'S'\n      ? `\n    width: 4rem;\n    height: 4rem;\n    border-radius: ${theme.borderRadius};\n  `\n      : `\n    width: 100%;\n    height: 16rem;\n  `}\n`;\n\nconst PreviewImage = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\ninterface PreviewFrameProps {\n  size: PreviewSize;\n  src?: string;\n  alt?: string;\n  crossOrigin?: 'anonymous';\n  mime?: string;\n  ext?: string;\n}\n\nconst PreviewFrame = ({ size, src, alt = '', crossOrigin, mime, ext }: PreviewFrameProps) => {\n  if (src) {\n    return (\n      <Frame $size={size}>\n        <PreviewImage src={src} alt={alt} crossOrigin={crossOrigin} draggable={false} />\n      </Frame>\n    );\n  }\n\n  const Icon = getAssetIcon(mime, ext);\n  const iconSize = size === 'S' ? 20 : 32;\n\n  return (\n    <Frame $size={size} justifyContent=\"center\" alignItems=\"center\">\n      <Icon width={iconSize} height={iconSize} />\n    </Frame>\n  );\n};\n\ninterface AssetPreviewProps {\n  asset: File;\n  size: PreviewSize;\n}\n\nexport const AssetPreview = ({ asset, size }: AssetPreviewProps) => {\n  const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;\n\n  if (!mime?.includes(ASSET_TYPES.Image)) {\n    return <PreviewFrame size={size} mime={mime} ext={ext} />;\n  }\n\n  // Same two rules the grid preview applies: a `updatedAt` cache-buster so a\n  // replaced asset stops serving its old thumbnail, skipped on signed URLs\n  // because an extra param invalidates the signature (#26581).\n  // Cards are wider than a thumbnail, so they take the `small` format when there is one.\n  const sizedFormats = formats as Record<string, { url?: string } | undefined> | undefined;\n  const preferredUrl = size === 'S' ? formats?.thumbnail?.url : (sizedFormats?.small?.url ?? url);\n  const rawUrl = prefixFileUrlWithBackendUrl(preferredUrl) ?? prefixFileUrlWithBackendUrl(url);\n  const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;\n  const src =\n    rawUrl && cacheKey !== undefined\n      ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}`\n      : rawUrl;\n\n  return (\n    <PreviewFrame\n      size={size}\n      src={src}\n      alt={alternativeText || ''}\n      crossOrigin={!isLocal && isUrlSigned ? 'anonymous' : undefined}\n      mime={mime}\n      ext={ext}\n    />\n  );\n};\n\ninterface UploadPreviewProps {\n  file?: globalThis.File;\n  size: PreviewSize;\n}\n\n/**\n * Previews a file that has not reached the server yet, straight from the\n * user's disk.\n */\nexport const UploadPreview = ({ file, size }: UploadPreviewProps) => {\n  const isImage = file?.type.startsWith(ASSET_TYPES.Image) ?? false;\n  const [src, setSrc] = useState<string>();\n\n  useEffect(() => {\n    if (!file || !isImage) {\n      setSrc(undefined);\n      return undefined;\n    }\n\n    const objectUrl = URL.createObjectURL(file);\n    setSrc(objectUrl);\n\n    return () => URL.revokeObjectURL(objectUrl);\n  }, [file, isImage]);\n\n  return <PreviewFrame size={size} src={src} mime={file?.type} />;\n};\n"],"names":["Frame","styled","Flex","theme","colors","neutral500","neutral150","$size","borderRadius","PreviewImage","img","PreviewFrame","size","src","alt","crossOrigin","mime","ext","_jsx","draggable","Icon","getAssetIcon","iconSize","justifyContent","alignItems","width","height","AssetPreview","asset","alternativeText","formats","url","updatedAt","isLocal","isUrlSigned","includes","ASSET_TYPES","Image","sizedFormats","preferredUrl","thumbnail","small","rawUrl","prefixFileUrlWithBackendUrl","cacheKey","Date","getTime","undefined","UploadPreview","file","isImage","type","startsWith","setSrc","useState","useEffect","objectUrl","URL","createObjectURL","revokeObjectURL"],"mappings":"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"}

package/dist/admin/components/MediaLibraryInput/AssetPreview.mjs

@@ -0,0 +1,106 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { Flex } from '@strapi/design-system';
+import { styled } from 'styled-components';
+import { ASSET_TYPES } from '../../enums.mjs';
+import { prefixFileUrlWithBackendUrl } from '../../utils/files.mjs';
+import { getAssetIcon } from '../../utils/getAssetIcon.mjs';
+
+const Frame = styled(Flex)`
+  flex-shrink: 0;
+  overflow: hidden;
+  color: ${({ theme })=>theme.colors.neutral500};
+  background: ${({ theme })=>theme.colors.neutral150};
+
+  ${({ $size, theme })=>$size === 'S' ? `
+    width: 4rem;
+    height: 4rem;
+    border-radius: ${theme.borderRadius};
+  ` : `
+    width: 100%;
+    height: 16rem;
+  `}
+`;
+const PreviewImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const PreviewFrame = ({ size, src, alt = '', crossOrigin, mime, ext })=>{
+    if (src) {
+        return /*#__PURE__*/ jsx(Frame, {
+            $size: size,
+            children: /*#__PURE__*/ jsx(PreviewImage, {
+                src: src,
+                alt: alt,
+                crossOrigin: crossOrigin,
+                draggable: false
+            })
+        });
+    }
+    const Icon = getAssetIcon(mime, ext);
+    const iconSize = size === 'S' ? 20 : 32;
+    return /*#__PURE__*/ jsx(Frame, {
+        $size: size,
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsx(Icon, {
+            width: iconSize,
+            height: iconSize
+        })
+    });
+};
+const AssetPreview = ({ asset, size })=>{
+    const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;
+    if (!mime?.includes(ASSET_TYPES.Image)) {
+        return /*#__PURE__*/ jsx(PreviewFrame, {
+            size: size,
+            mime: mime,
+            ext: ext
+        });
+    }
+    // Same two rules the grid preview applies: a `updatedAt` cache-buster so a
+    // replaced asset stops serving its old thumbnail, skipped on signed URLs
+    // because an extra param invalidates the signature (#26581).
+    // Cards are wider than a thumbnail, so they take the `small` format when there is one.
+    const sizedFormats = formats;
+    const preferredUrl = size === 'S' ? formats?.thumbnail?.url : sizedFormats?.small?.url ?? url;
+    const rawUrl = prefixFileUrlWithBackendUrl(preferredUrl) ?? prefixFileUrlWithBackendUrl(url);
+    const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;
+    const src = rawUrl && cacheKey !== undefined ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}` : rawUrl;
+    return /*#__PURE__*/ jsx(PreviewFrame, {
+        size: size,
+        src: src,
+        alt: alternativeText || '',
+        crossOrigin: !isLocal && isUrlSigned ? 'anonymous' : undefined,
+        mime: mime,
+        ext: ext
+    });
+};
+/**
+ * Previews a file that has not reached the server yet, straight from the
+ * user's disk.
+ */ const UploadPreview = ({ file, size })=>{
+    const isImage = file?.type.startsWith(ASSET_TYPES.Image) ?? false;
+    const [src, setSrc] = useState();
+    useEffect(()=>{
+        if (!file || !isImage) {
+            setSrc(undefined);
+            return undefined;
+        }
+        const objectUrl = URL.createObjectURL(file);
+        setSrc(objectUrl);
+        return ()=>URL.revokeObjectURL(objectUrl);
+    }, [
+        file,
+        isImage
+    ]);
+    return /*#__PURE__*/ jsx(PreviewFrame, {
+        size: size,
+        src: src,
+        mime: file?.type
+    });
+};
+
+export { AssetPreview, UploadPreview };
+//# sourceMappingURL=AssetPreview.mjs.map

package/dist/admin/components/MediaLibraryInput/AssetPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPreview.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetPreview.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { ASSET_TYPES } from '../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../utils/files';\nimport { getAssetIcon } from '../../utils/getAssetIcon';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype PreviewSize = 'S' | 'L';\n\nconst Frame = styled(Flex)<{ $size: PreviewSize }>`\n  flex-shrink: 0;\n  overflow: hidden;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral150};\n\n  ${({ $size, theme }) =>\n    $size === 'S'\n      ? `\n    width: 4rem;\n    height: 4rem;\n    border-radius: ${theme.borderRadius};\n  `\n      : `\n    width: 100%;\n    height: 16rem;\n  `}\n`;\n\nconst PreviewImage = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\ninterface PreviewFrameProps {\n  size: PreviewSize;\n  src?: string;\n  alt?: string;\n  crossOrigin?: 'anonymous';\n  mime?: string;\n  ext?: string;\n}\n\nconst PreviewFrame = ({ size, src, alt = '', crossOrigin, mime, ext }: PreviewFrameProps) => {\n  if (src) {\n    return (\n      <Frame $size={size}>\n        <PreviewImage src={src} alt={alt} crossOrigin={crossOrigin} draggable={false} />\n      </Frame>\n    );\n  }\n\n  const Icon = getAssetIcon(mime, ext);\n  const iconSize = size === 'S' ? 20 : 32;\n\n  return (\n    <Frame $size={size} justifyContent=\"center\" alignItems=\"center\">\n      <Icon width={iconSize} height={iconSize} />\n    </Frame>\n  );\n};\n\ninterface AssetPreviewProps {\n  asset: File;\n  size: PreviewSize;\n}\n\nexport const AssetPreview = ({ asset, size }: AssetPreviewProps) => {\n  const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;\n\n  if (!mime?.includes(ASSET_TYPES.Image)) {\n    return <PreviewFrame size={size} mime={mime} ext={ext} />;\n  }\n\n  // Same two rules the grid preview applies: a `updatedAt` cache-buster so a\n  // replaced asset stops serving its old thumbnail, skipped on signed URLs\n  // because an extra param invalidates the signature (#26581).\n  // Cards are wider than a thumbnail, so they take the `small` format when there is one.\n  const sizedFormats = formats as Record<string, { url?: string } | undefined> | undefined;\n  const preferredUrl = size === 'S' ? formats?.thumbnail?.url : (sizedFormats?.small?.url ?? url);\n  const rawUrl = prefixFileUrlWithBackendUrl(preferredUrl) ?? prefixFileUrlWithBackendUrl(url);\n  const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;\n  const src =\n    rawUrl && cacheKey !== undefined\n      ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}`\n      : rawUrl;\n\n  return (\n    <PreviewFrame\n      size={size}\n      src={src}\n      alt={alternativeText || ''}\n      crossOrigin={!isLocal && isUrlSigned ? 'anonymous' : undefined}\n      mime={mime}\n      ext={ext}\n    />\n  );\n};\n\ninterface UploadPreviewProps {\n  file?: globalThis.File;\n  size: PreviewSize;\n}\n\n/**\n * Previews a file that has not reached the server yet, straight from the\n * user's disk.\n */\nexport const UploadPreview = ({ file, size }: UploadPreviewProps) => {\n  const isImage = file?.type.startsWith(ASSET_TYPES.Image) ?? false;\n  const [src, setSrc] = useState<string>();\n\n  useEffect(() => {\n    if (!file || !isImage) {\n      setSrc(undefined);\n      return undefined;\n    }\n\n    const objectUrl = URL.createObjectURL(file);\n    setSrc(objectUrl);\n\n    return () => URL.revokeObjectURL(objectUrl);\n  }, [file, isImage]);\n\n  return <PreviewFrame size={size} src={src} mime={file?.type} />;\n};\n"],"names":["Frame","styled","Flex","theme","colors","neutral500","neutral150","$size","borderRadius","PreviewImage","img","PreviewFrame","size","src","alt","crossOrigin","mime","ext","_jsx","draggable","Icon","getAssetIcon","iconSize","justifyContent","alignItems","width","height","AssetPreview","asset","alternativeText","formats","url","updatedAt","isLocal","isUrlSigned","includes","ASSET_TYPES","Image","sizedFormats","preferredUrl","thumbnail","small","rawUrl","prefixFileUrlWithBackendUrl","cacheKey","Date","getTime","undefined","UploadPreview","file","isImage","type","startsWith","setSrc","useState","useEffect","objectUrl","URL","createObjectURL","revokeObjectURL"],"mappings":"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"}