@strapi/upload 5.59.0 → 5.61.0

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

@@ -1 +1 @@
-{"version":3,"file":"AssetRow.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetRow.tsx"],"sourcesContent":["import { Flex, IconButton, Typography } from '@strapi/design-system';\nimport { Link, Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ASSET_TYPES } from '../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../utils/files';\nimport { getAssetIcon } from '../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport type { File } from '../../../../shared/contracts/files';\n\nconst Row = styled(Flex)`\n  background: ${({ theme }) => theme.colors.neutral0};\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Thumbnail = styled(Flex)`\n  width: 3.2rem;\n  height: 3.2rem;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 4px;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral100};\n`;\n\nconst ThumbnailImage = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\nconst Name = styled(Typography)`\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\ninterface AssetThumbnailProps {\n  asset: File;\n}\n\nconst AssetThumbnail = ({ asset }: AssetThumbnailProps) => {\n  const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;\n\n  if (mime?.includes(ASSET_TYPES.Image)) {\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    const rawUrl =\n      prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? 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    if (src) {\n      return (\n        <Thumbnail>\n          <ThumbnailImage\n            src={src}\n            alt={alternativeText || ''}\n            crossOrigin={!isLocal && isUrlSigned ? 'anonymous' : undefined}\n            draggable={false}\n          />\n        </Thumbnail>\n      );\n    }\n  }\n\n  const DocIcon = getAssetIcon(mime, ext);\n\n  return (\n    <Thumbnail justifyContent=\"center\" alignItems=\"center\">\n      <DocIcon width={20} height={20} />\n    </Thumbnail>\n  );\n};\n\ninterface AssetRowProps {\n  asset: File;\n  disabled?: boolean;\n  onCopyLink: (asset: File) => void;\n  onEdit?: (asset: File) => void;\n  onRemove: (asset: File) => void;\n}\n\n/**\n * One asset already held by the field. The uploading and failed variants the\n * design also specifies are not here yet — while an upload runs, the global\n * progress dialog is what reports it.\n */\nexport const AssetRow = ({\n  asset,\n  disabled = false,\n  onCopyLink,\n  onEdit,\n  onRemove,\n}: AssetRowProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Row\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      gap={3}\n      paddingLeft={3}\n      paddingRight={3}\n      paddingTop={2}\n      paddingBottom={2}\n    >\n      <Flex alignItems=\"center\" gap={3} minWidth={0}>\n        <AssetThumbnail asset={asset} />\n        <Name textColor=\"neutral800\">{asset.name}</Name>\n      </Flex>\n      <Flex tag=\"span\" gap={1} shrink={0}>\n        <IconButton\n          variant=\"ghost\"\n          onClick={() => onCopyLink(asset)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.copy-link'),\n              defaultMessage: 'Copy link to {name}',\n            },\n            { name: asset.name }\n          )}\n        >\n          <Link />\n        </IconButton>\n        {onEdit && (\n          <IconButton\n            variant=\"ghost\"\n            disabled={disabled}\n            onClick={() => onEdit(asset)}\n            label={formatMessage(\n              {\n                id: getTranslationKey('content-manager.input.actions.edit'),\n                defaultMessage: 'Edit {name}',\n              },\n              { name: asset.name }\n            )}\n          >\n            <Pencil />\n          </IconButton>\n        )}\n        <IconButton\n          variant=\"ghost\"\n          disabled={disabled}\n          onClick={() => onRemove(asset)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.remove'),\n              defaultMessage: 'Remove {name}',\n            },\n            { name: asset.name }\n          )}\n        >\n          <Trash />\n        </IconButton>\n      </Flex>\n    </Row>\n  );\n};\n"],"names":["Row","styled","Flex","theme","colors","neutral0","neutral200","borderRadius","Thumbnail","neutral500","neutral100","ThumbnailImage","img","Name","Typography","AssetThumbnail","asset","alternativeText","ext","formats","mime","url","updatedAt","isLocal","isUrlSigned","includes","ASSET_TYPES","Image","rawUrl","prefixFileUrlWithBackendUrl","thumbnail","cacheKey","Date","getTime","undefined","src","_jsx","alt","crossOrigin","draggable","DocIcon","getAssetIcon","justifyContent","alignItems","width","height","AssetRow","disabled","onCopyLink","onEdit","onRemove","formatMessage","useIntl","_jsxs","gap","paddingLeft","paddingRight","paddingTop","paddingBottom","minWidth","textColor","name","tag","shrink","IconButton","variant","onClick","label","id","getTranslationKey","defaultMessage","Link","Pencil","Trash"],"mappings":"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"}
+{"version":3,"file":"AssetRow.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetRow.tsx"],"sourcesContent":["import { Box, Button, Flex, Typography } from '@strapi/design-system';\nimport { ArrowClockwise, Cross, Link, Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetPreview, UploadPreview } from './AssetPreview';\nimport { GhostIconButton } from './FieldControls';\nimport { UploadProgressBar } from './UploadProgressBar';\n\nimport type { FieldUpload } from './useFieldUploads';\nimport type { File } from '../../../../shared/contracts/files';\n\ntype RowTone = 'neutral' | 'primary' | 'danger';\n\nconst ROW_COLORS = {\n  neutral: { background: 'neutral100', border: 'neutral200' },\n  primary: { background: 'primary100', border: 'primary200' },\n  danger: { background: 'danger100', border: 'danger200' },\n} as const;\n\nconst Row = styled(Flex)<{ $tone: RowTone }>`\n  min-height: 7.2rem;\n  background: ${({ theme, $tone }) => theme.colors[ROW_COLORS[$tone].background]};\n  border: 1px solid ${({ theme, $tone }) => theme.colors[ROW_COLORS[$tone].border]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Name = styled(Typography)`\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\ninterface RowFrameProps {\n  tone: RowTone;\n  children: React.ReactNode;\n}\n\nconst RowFrame = ({ tone, children }: RowFrameProps) => (\n  <Row $tone={tone} alignItems=\"center\" gap={4} padding={4}>\n    {children}\n  </Row>\n);\n\ninterface AssetRowProps {\n  asset: File;\n  disabled?: boolean;\n  onCopyLink: (asset: File) => void;\n  onEdit?: (asset: File) => void;\n  onRemove: (asset: File) => void;\n}\n\n/**\n * The asset a single-value field holds.\n */\nexport const AssetRow = ({\n  asset,\n  disabled = false,\n  onCopyLink,\n  onEdit,\n  onRemove,\n}: AssetRowProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <RowFrame tone=\"neutral\">\n      <AssetPreview asset={asset} size=\"S\" />\n      <Name textColor=\"neutral800\" flex={1}>\n        {asset.name}\n      </Name>\n      <Flex gap={2} shrink={0}>\n        <GhostIconButton\n          onClick={() => onCopyLink(asset)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.copy-link'),\n              defaultMessage: 'Copy link to {name}',\n            },\n            { name: asset.name }\n          )}\n        >\n          <Link />\n        </GhostIconButton>\n        {onEdit && (\n          <GhostIconButton\n            disabled={disabled}\n            onClick={() => onEdit(asset)}\n            label={formatMessage(\n              {\n                id: getTranslationKey('content-manager.input.actions.edit'),\n                defaultMessage: 'Edit {name}',\n              },\n              { name: asset.name }\n            )}\n          >\n            <Pencil />\n          </GhostIconButton>\n        )}\n        <GhostIconButton\n          disabled={disabled}\n          onClick={() => onRemove(asset)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.remove'),\n              defaultMessage: 'Remove {name}',\n            },\n            { name: asset.name }\n          )}\n        >\n          <Trash />\n        </GhostIconButton>\n      </Flex>\n    </RowFrame>\n  );\n};\n\ninterface UploadRowProps {\n  upload: FieldUpload;\n  disabled?: boolean;\n  onCancel: (upload: FieldUpload) => void;\n  onRetry: (upload: FieldUpload) => void;\n  onRemove: (upload: FieldUpload) => void;\n}\n\n/**\n * A file a single-value field is uploading, or failed to upload.\n */\nexport const UploadRow = ({\n  upload,\n  disabled = false,\n  onCancel,\n  onRetry,\n  onRemove,\n}: UploadRowProps) => {\n  const { formatMessage } = useIntl();\n  const canRetry = upload.isInStore || upload.sourceFile !== undefined;\n\n  if (upload.status === 'failed') {\n    return (\n      <RowFrame tone=\"danger\">\n        <UploadPreview file={upload.sourceFile} size=\"S\" />\n        <Name textColor=\"danger600\" flex={1}>\n          {upload.name}\n        </Name>\n        <Flex gap={2} shrink={0}>\n          {canRetry && (\n            <Button\n              variant=\"ghost\"\n              startIcon={<ArrowClockwise />}\n              disabled={disabled}\n              onClick={() => onRetry(upload)}\n            >\n              {formatMessage({\n                id: getTranslationKey('upload.progress.retry'),\n                defaultMessage: 'Retry',\n              })}\n            </Button>\n          )}\n          <Button\n            variant=\"danger-light\"\n            startIcon={<Trash />}\n            disabled={disabled}\n            onClick={() => onRemove(upload)}\n          >\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.actions.remove-failed'),\n              defaultMessage: 'Remove',\n            })}\n          </Button>\n        </Flex>\n      </RowFrame>\n    );\n  }\n\n  const uploadingLabel = formatMessage({\n    id: getTranslationKey('upload.progress.file.uploading'),\n    defaultMessage: 'Uploading...',\n  });\n\n  return (\n    <RowFrame tone=\"primary\">\n      <UploadPreview file={upload.sourceFile} size=\"S\" />\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={2} flex={1} minWidth={0}>\n        <Flex justifyContent=\"space-between\" gap={4}>\n          <Name textColor=\"neutral800\">{upload.name}</Name>\n          <Box shrink={0}>\n            <Typography variant=\"pi\" textColor=\"neutral600\">\n              {uploadingLabel}\n            </Typography>\n          </Box>\n        </Flex>\n        <UploadProgressBar progress={upload.progress} label={uploadingLabel} />\n      </Flex>\n      <Box shrink={0}>\n        <GhostIconButton\n          onClick={() => onCancel(upload)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.cancel'),\n              defaultMessage: 'Cancel upload of {name}',\n            },\n            { name: upload.name }\n          )}\n        >\n          <Cross />\n        </GhostIconButton>\n      </Box>\n    </RowFrame>\n  );\n};\n"],"names":["ROW_COLORS","neutral","background","border","primary","danger","Row","styled","Flex","theme","$tone","colors","borderRadius","Name","Typography","RowFrame","tone","children","_jsx","alignItems","gap","padding","AssetRow","asset","disabled","onCopyLink","onEdit","onRemove","formatMessage","useIntl","_jsxs","AssetPreview","size","textColor","flex","name","shrink","GhostIconButton","onClick","label","id","getTranslationKey","defaultMessage","Link","Pencil","Trash","UploadRow","upload","onCancel","onRetry","canRetry","isInStore","sourceFile","undefined","status","UploadPreview","file","Button","variant","startIcon","ArrowClockwise","uploadingLabel","direction","minWidth","justifyContent","Box","UploadProgressBar","progress","Cross"],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+
+/**
+ * A ghost `IconButton` that stays a bare icon when disabled. The design system
+ * paints every disabled button, ghost included, as a bordered grey plate.
+ */ const GhostIconButton = styledComponents.styled(designSystem.IconButton).attrs({
+    variant: 'ghost'
+})`
+  &&[aria-disabled='true'] {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  &&[aria-disabled='true'] svg path {
+    fill: ${({ theme })=>theme.colors.neutral300};
+  }
+`;
+/**
+ * A `Menu.Item` whose label greys out with its icon when disabled. The design
+ * system computes a disabled text colour, then its own stylesheet overrides it.
+ */ const FieldMenuItem = styledComponents.styled(designSystem.Menu.Item)`
+  &&[aria-disabled='true'] {
+    color: ${({ theme })=>theme.colors.neutral500};
+  }
+`;
+
+exports.FieldMenuItem = FieldMenuItem;
+exports.GhostIconButton = GhostIconButton;
+//# sourceMappingURL=FieldControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldControls.js","sources":["../../../../admin/src/components/MediaLibraryInput/FieldControls.tsx"],"sourcesContent":["import { IconButton, Menu } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\n/**\n * A ghost `IconButton` that stays a bare icon when disabled. The design system\n * paints every disabled button, ghost included, as a bordered grey plate.\n */\nexport const GhostIconButton = styled(IconButton).attrs({ variant: 'ghost' })`\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral300};\n  }\n`;\n\n/**\n * A `Menu.Item` whose label greys out with its icon when disabled. The design\n * system computes a disabled text colour, then its own stylesheet overrides it.\n */\nexport const FieldMenuItem = styled(Menu.Item)`\n  &&[aria-disabled='true'] {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n"],"names":["GhostIconButton","styled","IconButton","attrs","variant","theme","colors","neutral300","FieldMenuItem","Menu","Item","neutral500"],"mappings":";;;;;AAGA;;;AAGC,IACM,MAAMA,eAAAA,GAAkBC,uBAAAA,CAAOC,uBAAAA,CAAAA,CAAYC,KAAK,CAAC;IAAEC,OAAAA,EAAS;AAAQ,CAAA,CAAE;;;;;;;UAOnE,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;AAEnD;AAEA;;;AAGC,IACM,MAAMC,aAAAA,GAAgBP,wBAAOQ,iBAAAA,CAAKC,IAAI,CAAC;;WAEnC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACK,UAAU,CAAC;;AAEpD;;;;;"}

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

@@ -0,0 +1,29 @@
+import { IconButton, Menu } from '@strapi/design-system';
+import { styled } from 'styled-components';
+
+/**
+ * A ghost `IconButton` that stays a bare icon when disabled. The design system
+ * paints every disabled button, ghost included, as a bordered grey plate.
+ */ const GhostIconButton = styled(IconButton).attrs({
+    variant: 'ghost'
+})`
+  &&[aria-disabled='true'] {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  &&[aria-disabled='true'] svg path {
+    fill: ${({ theme })=>theme.colors.neutral300};
+  }
+`;
+/**
+ * A `Menu.Item` whose label greys out with its icon when disabled. The design
+ * system computes a disabled text colour, then its own stylesheet overrides it.
+ */ const FieldMenuItem = styled(Menu.Item)`
+  &&[aria-disabled='true'] {
+    color: ${({ theme })=>theme.colors.neutral500};
+  }
+`;
+
+export { FieldMenuItem, GhostIconButton };
+//# sourceMappingURL=FieldControls.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldControls.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/FieldControls.tsx"],"sourcesContent":["import { IconButton, Menu } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\n/**\n * A ghost `IconButton` that stays a bare icon when disabled. The design system\n * paints every disabled button, ghost included, as a bordered grey plate.\n */\nexport const GhostIconButton = styled(IconButton).attrs({ variant: 'ghost' })`\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral300};\n  }\n`;\n\n/**\n * A `Menu.Item` whose label greys out with its icon when disabled. The design\n * system computes a disabled text colour, then its own stylesheet overrides it.\n */\nexport const FieldMenuItem = styled(Menu.Item)`\n  &&[aria-disabled='true'] {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n"],"names":["GhostIconButton","styled","IconButton","attrs","variant","theme","colors","neutral300","FieldMenuItem","Menu","Item","neutral500"],"mappings":";;;AAGA;;;AAGC,IACM,MAAMA,eAAAA,GAAkBC,MAAAA,CAAOC,UAAAA,CAAAA,CAAYC,KAAK,CAAC;IAAEC,OAAAA,EAAS;AAAQ,CAAA,CAAE;;;;;;;UAOnE,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;AAEnD;AAEA;;;AAGC,IACM,MAAMC,aAAAA,GAAgBP,OAAOQ,IAAAA,CAAKC,IAAI,CAAC;;WAEnC,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACK,UAAU,CAAC;;AAEpD;;;;"}

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

@@ -4,13 +4,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
+var get = require('lodash/get');
 var reactIntl = require('react-intl');
 var useAIMetadataEnabled = require('../../hooks/useAIMetadataEnabled.js');
 var useMediaLibraryPermissions = require('../../hooks/useMediaLibraryPermissions.js');
 var useTracking = require('../../hooks/useTracking.js');
-var AssetDialog = require('../../legacy/components/AssetDialog/AssetDialog.js');
-var EditAssetContent = require('../../legacy/components/EditAssetDialog/EditAssetContent.js');
-var EditFolderDialog = require('../../legacy/components/EditFolderDialog/EditFolderDialog.js');
+var AssetDetailsDrawer = require('../../pages/Assets/components/AssetDetails/AssetDetailsDrawer.js');
 var ImportFromUrlDialog = require('../../pages/Assets/components/ImportFromUrlDialog.js');
 var api = require('../../services/api.js');
 var settings = require('../../services/settings.js');
@@ -18,11 +17,27 @@ var allowedMediaTypes = require('../../utils/allowedMediaTypes.js');
 var files = require('../../utils/files.js');
 var translations = require('../../utils/translations.js');
 var typeFromMime = require('../../utils/typeFromMime.js');
+var AssetPickerDialog = require('../AssetPickerDialog/AssetPickerDialog.js');
 var AddAssetMenu = require('./AddAssetMenu.js');
+var AssetCard = require('./AssetCard.js');
+var AssetCarousel = require('./AssetCarousel.js');
 var AssetDropZone = require('./AssetDropZone.js');
 var AssetRow = require('./AssetRow.js');
-var NoLibraryAccessDialog = require('./NoLibraryAccessDialog.js');
+var openAssetDetails = require('./openAssetDetails.js');
+var useFieldUploads = require('./useFieldUploads.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var get__default = /*#__PURE__*/_interopDefault(get);
+
+/**
+ * What a field wrote that its form has not rendered yet, per form and field.
+ * `getValues()` only catches up on render, and two uploads can complete before
+ * the next one. Kept outside the input so it survives a remount.
+ */ const unrenderedWrites = new WeakMap();
+const toAssets = (value)=>Array.isArray(value) ? value : value ? [
+        value
+    ] : [];
 /**
  * `location` for every event this field fires. The standalone Media Library
  * tags its events `'upload'`; the picker inside an entry form has always been
@@ -44,23 +59,27 @@ const EMPTY_ATTRIBUTE = {};
  *
  * The legacy input is still registered when `useLegacyMediaLibrary` is on, and
  * is untouched by this.
- */ const MediaLibraryInput = ({ name, label, labelAction, hint, required = false, disabled = false, attribute = EMPTY_ATTRIBUTE })=>{
+ */ const MediaLibraryInput = ({ name, label, labelAction, hint, required = false, disabled = false, attribute = EMPTY_ATTRIBUTE, layoutSize })=>{
     const { allowedTypes = null, multiple = false } = attribute;
     const { formatMessage } = reactIntl.useIntl();
     const { onChange, value, error } = strapiAdmin.useField(name);
     const { toggleNotification } = strapiAdmin.useNotification();
     const { trackUsage } = useTracking.useTracking();
     const { copy } = strapiAdmin.useClipboard();
+    const getValues = strapiAdmin.useForm('MediaLibraryInput', (state)=>state.getValues);
     const [step, setStep] = React.useState(undefined);
-    const [folderId, setFolderId] = React.useState(null);
-    const [editedAsset, setEditedAsset] = React.useState(null);
+    const [editedAssetId, setEditedAssetId] = React.useState(null);
+    const isAnyDrawerOpen = openAssetDetails.useOpenAssetDetails(editedAssetId !== null);
     const [isUrlDialogOpen, setIsUrlDialogOpen] = React.useState(false);
     const fileInputRef = React.useRef(null);
     const [uploadFiles] = api.useUploadFilesMutation();
     const [uploadFromUrls] = api.useUploadFromUrlsMutation();
     // Echoes the app config; a missing payload (still loading) falls back to
     // sequential rather than outpacing what the server asked for.
-    const { canRead, canCreate, canUpdate, canCopyLink, canDownload } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const { isLoading, canRead, canCreate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    // Not while permissions load: `useRBAC` starts with every flag false, and an
+    // upload sent before it settles can end in a 403.
+    const canUpload = !isLoading && canCreate;
     const { data: settings$1 } = settings.useGetUploadSettingsQuery(undefined, {
         skip: !canRead
     });
@@ -82,20 +101,30 @@ const EMPTY_ATTRIBUTE = {};
         }
         onChange(name, nextAssets[0] ?? null);
     };
+    const handleRemove = (asset)=>{
+        setAssets(assets.filter((current)=>current.id !== asset.id));
+    };
+    // Bound to the form, not to this input: a component collapsed mid-upload
+    // unmounts the field, and the file must still land on the entry.
     const attachUploadedFile = (file)=>{
-        const nextAssets = multiple ? [
-            ...assetsRef.current,
+        const writes = unrenderedWrites.get(getValues) ?? new Map();
+        unrenderedWrites.set(getValues, writes);
+        const value = get__default.default(getValues(), name);
+        const pending = writes.get(name);
+        const current = pending && pending.seen === value ? pending.written : toAssets(value);
+        const next = multiple ? [
+            ...current,
             file
         ] : [
             file
         ];
-        // Parallel uploads can finish before the next render refreshes the ref.
-        assetsRef.current = nextAssets;
-        setAssets(nextAssets);
-    };
-    const handleRemove = (asset)=>{
-        setAssets(assets.filter((current)=>current.id !== asset.id));
+        writes.set(name, {
+            seen: value,
+            written: next
+        });
+        setAssets(next);
     };
+    const { uploads, cancel, retry, dismiss } = useFieldUploads.useFieldUploads(name);
     const handleCopyLink = async (asset)=>{
         const url = files.prefixFileUrlWithBackendUrl(asset.url);
         if (!url) {
@@ -113,25 +142,33 @@ const EMPTY_ATTRIBUTE = {};
             })
         });
     };
-    const handleEditClose = (result)=>{
-        const asset = editedAsset;
-        setEditedAsset(null);
-        if (!asset) {
-            return;
-        }
-        // `null` means the asset was deleted from the library from inside the dialog.
-        if (result === null) {
-            setAssets(assetsRef.current.filter((current)=>current.id !== asset.id));
-            return;
-        }
-        if (result && typeof result !== 'boolean') {
-            setAssets(assetsRef.current.map((current)=>current.id === asset.id ? result : current));
+    /**
+   * Opens only when no drawer is open, in this field or another. Pressing a row's
+   * button is a press outside the open drawer, which closes it — or, with unsaved
+   * edits, asks first. Opening on the click that follows would put a second
+   * drawer, or a new asset, under that question and drop the edits it is asking
+   * about.
+   */ const handleEdit = (asset)=>{
+        if (!openAssetDetails.isAnyAssetDetailsOpen()) {
+            setEditedAssetId(asset.id);
         }
     };
+    // The drawer saves to the library itself; the field holds its own copy of the
+    // asset, so it takes the server's after every change. Read from the ref: the
+    // drawer reports after a request, by which time this render's `assets` may
+    // be stale.
+    const handleAssetChange = (changedAsset)=>{
+        setAssets(assetsRef.current.map((current)=>// The populated `createdBy` is the one shape difference, and the entry
+            // only keeps the asset's id on save.
+            current.id === changedAsset.id ? changedAsset : current));
+    };
+    // Deleting from the library leaves nothing for the field to point at.
+    const handleAssetDelete = (id)=>{
+        setAssets(assetsRef.current.filter((current)=>current.id !== id));
+    };
     const handleSelect = (selectedAssets)=>{
         setAssets(selectedAssets);
         setStep(undefined);
-        setFolderId(null);
     };
     const notifyUnsupported = ()=>{
         toggleNotification({
@@ -165,8 +202,8 @@ const EMPTY_ATTRIBUTE = {};
         });
         return true;
     };
-    const handleUpload = async (files)=>{
-        if (disabled || files.length === 0) {
+    const handleUpload = (files)=>{
+        if (disabled || !canUpload || files.length === 0) {
             return;
         }
         // The device picker can't reach this — it carries `multiple` — so a drop is
@@ -197,6 +234,12 @@ const EMPTY_ATTRIBUTE = {};
             location: CONTENT_MANAGER_LOCATION,
             ...assetsCountByType
         });
+        startUpload(allowedFiles);
+    };
+    /**
+   * Hands the files to the shared upload pool. The field picks the results up
+   * from `onFileUploaded`, which also runs for retries of the same rows.
+   */ const startUpload = (allowedFiles)=>{
         const formData = new FormData();
         allowedFiles.forEach((file)=>formData.append('files', file));
         formData.append('fileInfo', JSON.stringify(allowedFiles.map((file)=>({
@@ -205,30 +248,18 @@ const EMPTY_ATTRIBUTE = {};
                 alternativeText: null,
                 folder: UPLOAD_FOLDER_ID
             }))));
-        try {
-            // Attached per file rather than from the result: a Retry in the progress
-            // dialog uploads cancelled files after this call has already resolved.
-            await uploadFiles({
-                formData,
-                totalFiles: allowedFiles.length,
-                concurrency,
-                generateAiMetadata: Boolean(isAiMetadataEnabled),
-                onFileUploaded: attachUploadedFile
-            }).unwrap();
-        } catch  {
-        // Errors reach the user through the progress dialog, which the mutation
-        // populates itself.
-        }
-    };
-    const handleZoneClick = ()=>{
-        if (canRead) {
-            setStep('browse');
-        } else if (canCreate) {
-            fileInputRef.current?.click();
-        } else {
-            setStep('no-access');
-        }
+        uploadFiles({
+            formData,
+            totalFiles: allowedFiles.length,
+            concurrency,
+            generateAiMetadata: Boolean(isAiMetadataEnabled),
+            onFileUploaded: attachUploadedFile,
+            owner: name
+        });
     };
+    const handleRetry = (upload)=>retry(upload, (file)=>startUpload([
+                file
+            ]));
     /**
    * The server fetches each URL and uploads what it finds, so the file's type
    * is not known here — `allowedTypes` can only be enforced on what comes back.
@@ -280,7 +311,7 @@ const EMPTY_ATTRIBUTE = {};
         // populates itself.
         }
     };
-    const handleFileInputChange = async (event)=>{
+    const handleFileInputChange = (event)=>{
         // Copied before the reset, not after: `event.target.files` is the input's
         // live FileList, and clearing `value` empties it in place. Reading it
         // afterwards yields nothing and the upload never starts.
@@ -288,9 +319,65 @@ const EMPTY_ATTRIBUTE = {};
         // Reset so picking the same file twice in a row still fires `change`.
         event.target.value = '';
         if (files.length > 0) {
-            await handleUpload(files);
+            handleUpload(files);
         }
     };
+    const renderValue = ()=>{
+        const dropZone = (variant)=>/*#__PURE__*/ jsxRuntime.jsx(AssetDropZone.AssetDropZone, {
+                variant: variant,
+                disabled: disabled || !canUpload,
+                onDropFiles: handleUpload
+            });
+        if (assets.length === 0 && uploads.length === 0) {
+            return dropZone('bar');
+        }
+        const uploadHandlers = {
+            disabled,
+            onCancel: cancel,
+            onRetry: handleRetry,
+            onRemove: (upload)=>dismiss(upload.key)
+        };
+        if (!multiple) {
+            // A replacement in flight, or one that failed, stands in for the current
+            // asset until it lands or is removed.
+            if (uploads.length > 0) {
+                return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    direction: "column",
+                    alignItems: "stretch",
+                    gap: 2,
+                    children: uploads.map((upload)=>/*#__PURE__*/ jsxRuntime.jsx(AssetRow.UploadRow, {
+                            upload: upload,
+                            ...uploadHandlers
+                        }, upload.key))
+                });
+            }
+            return /*#__PURE__*/ jsxRuntime.jsx(AssetRow.AssetRow, {
+                asset: assets[0],
+                disabled: disabled,
+                onCopyLink: handleCopyLink,
+                // The details drawer fetches the asset from the library, which needs read access.
+                onEdit: canRead ? handleEdit : undefined,
+                onRemove: handleRemove
+            });
+        }
+        return /*#__PURE__*/ jsxRuntime.jsxs(AssetCarousel.AssetCarousel, {
+            renderDropZone: dropZone,
+            layoutSize: layoutSize,
+            children: [
+                assets.map((asset)=>/*#__PURE__*/ jsxRuntime.jsx(AssetCard.AssetCard, {
+                        asset: asset,
+                        disabled: disabled,
+                        onCopyLink: handleCopyLink,
+                        onEdit: canRead ? handleEdit : undefined,
+                        onRemove: handleRemove
+                    }, asset.id)),
+                uploads.map((upload)=>/*#__PURE__*/ jsxRuntime.jsx(AssetCard.UploadCard, {
+                        upload: upload,
+                        ...uploadHandlers
+                    }, upload.key))
+            ]
+        });
+    };
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
         name: name,
         error: error,
@@ -308,32 +395,14 @@ const EMPTY_ATTRIBUTE = {};
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(AddAssetMenu.AddAssetMenu, {
                         disabled: disabled,
+                        preventOpen: isAnyDrawerOpen,
                         onBrowseLibrary: ()=>setStep('browse'),
                         onUploadFromDevice: ()=>fileInputRef.current?.click(),
                         onUploadFromUrl: ()=>setIsUrlDialogOpen(true)
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                direction: "column",
-                alignItems: "stretch",
-                gap: 1,
-                children: [
-                    assets.map((asset)=>/*#__PURE__*/ jsxRuntime.jsx(AssetRow.AssetRow, {
-                            asset: asset,
-                            disabled: disabled,
-                            onCopyLink: handleCopyLink,
-                            // The details dialog needs the library's folder tree, which needs read access.
-                            onEdit: canRead ? setEditedAsset : undefined,
-                            onRemove: handleRemove
-                        }, asset.id)),
-                    /*#__PURE__*/ jsxRuntime.jsx(AssetDropZone.AssetDropZone, {
-                        disabled: disabled,
-                        onClick: handleZoneClick,
-                        onDropFiles: handleUpload
-                    })
-                ]
-            }),
+            renderValue(),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {}),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {}),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
@@ -346,43 +415,26 @@ const EMPTY_ATTRIBUTE = {};
                     "aria-hidden": true
                 })
             }),
-            step === 'browse' && /*#__PURE__*/ jsxRuntime.jsx(AssetDialog.AssetDialog, {
+            step === 'browse' && /*#__PURE__*/ jsxRuntime.jsx(AssetPickerDialog.AssetPickerDialog, {
                 open: true,
+                title: formatMessage({
+                    id: translations.getTranslationKey('asset-picker.title'),
+                    defaultMessage: 'Add asset for {fieldName}'
+                }, {
+                    fieldName: label ?? name
+                }),
+                initialSelection: assets,
                 multiple: multiple,
-                allowedTypes: allowedTypes ?? [],
-                initiallySelectedAssets: assets,
-                folderId: folderId,
-                trackedLocation: CONTENT_MANAGER_LOCATION,
-                onClose: ()=>{
-                    setStep(undefined);
-                    setFolderId(null);
-                },
-                onValidate: handleSelect,
-                onAddFolder: ()=>setStep('create-folder'),
-                // The dialog's own upload button hands back to this field's upload
-                // path, so every route to an uploaded file opens the progress dialog.
-                onAddAsset: ()=>{
-                    setStep(undefined);
-                    fileInputRef.current?.click();
-                },
-                onChangeFolder: (nextFolderId)=>setFolderId(nextFolderId)
-            }),
-            editedAsset && /*#__PURE__*/ jsxRuntime.jsx(EditAssetContent.EditAssetDialog, {
-                open: true,
-                asset: editedAsset,
-                canUpdate: canUpdate && !disabled,
-                canCopyLink: canCopyLink,
-                canDownload: canDownload,
-                trackedLocation: CONTENT_MANAGER_LOCATION,
-                onClose: handleEditClose
-            }),
-            step === 'create-folder' && /*#__PURE__*/ jsxRuntime.jsx(EditFolderDialog.EditFolderDialog, {
-                open: true,
-                onClose: ()=>setStep('browse'),
-                parentFolderId: folderId
+                allowedTypes: allowedTypes,
+                onClose: ()=>setStep(undefined),
+                onConfirm: handleSelect
             }),
-            step === 'no-access' && /*#__PURE__*/ jsxRuntime.jsx(NoLibraryAccessDialog.NoLibraryAccessDialog, {
-                onClose: ()=>setStep(undefined)
+            /*#__PURE__*/ jsxRuntime.jsx(AssetDetailsDrawer.AssetDetailsDrawer, {
+                assetId: editedAssetId,
+                onClose: ()=>setEditedAssetId(null),
+                onAssetChange: handleAssetChange,
+                onAssetDelete: handleAssetDelete,
+                trackedLocation: CONTENT_MANAGER_LOCATION
             }),
             /*#__PURE__*/ jsxRuntime.jsx(ImportFromUrlDialog.ImportFromUrlDialog, {
                 open: isUrlDialogOpen,