@wordpress/media-utils 5.41.1-next.v.202603102151.0 → 5.42.0

package/build-types/components/media-upload-modal/upload-status-popover.d.ts

@@ -0,0 +1,15 @@
+export interface UploadingFile {
+    id: string;
+    batchId: string;
+    name: string;
+    status: 'uploading' | 'uploaded' | 'error';
+    error?: string;
+}
+interface UploadStatusPopoverProps {
+    uploadingFiles: UploadingFile[];
+    onDismissError?: (fileId: string) => void;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function UploadStatusPopover({ uploadingFiles, onDismissError, onOpenChange, }: UploadStatusPopoverProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=upload-status-popover.d.ts.map

package/build-types/components/media-upload-modal/upload-status-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-status-popover.d.ts","sourceRoot":"","sources":["../../../src/components/media-upload-modal/upload-status-popover.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,aAAa;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,wBAAwB;IACjC,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,cAAc,CAAC,EAAE,CAAE,MAAM,EAAE,MAAM,KAAM,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,CAAE,IAAI,EAAE,OAAO,KAAM,IAAI,CAAC;CACzC;AAED,wBAAgB,mBAAmB,CAAE,EACpC,cAAc,EACd,cAAc,EACd,YAAY,GACZ,EAAE,wBAAwB,sCAgI1B"}

package/build-types/components/media-upload-modal/use-invalidate-attachment-resolutions.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Hook for invalidating all cached `getEntityRecords` resolutions for the
+ * attachment post type.
+ *
+ * After a file upload completes the media grid needs to refresh, but
+ * `invalidateResolution` only clears the exact query that is passed to it.
+ * If the user is on page 2, page 1 (where the new upload would appear) stays
+ * stale. Using `invalidateResolutionForStoreSelector` would work but is too
+ * broad — it clears every `getEntityRecords` resolution, potentially
+ * triggering unnecessary refetches for unrelated entity types.
+ *
+ * This hook provides a middle ground: it iterates over every cached
+ * resolution for `getEntityRecords` and invalidates only the entries where
+ * the first two arguments match `['postType', 'attachment']`.
+ */
+/**
+ * Returns a stable callback that invalidates all cached `getEntityRecords`
+ * resolutions for `postType / attachment`, leaving every other entity type
+ * untouched.
+ */
+export declare function useInvalidateAttachmentResolutions(): () => void;
+//# sourceMappingURL=use-invalidate-attachment-resolutions.d.ts.map

package/build-types/components/media-upload-modal/use-invalidate-attachment-resolutions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-invalidate-attachment-resolutions.d.ts","sourceRoot":"","sources":["../../../src/components/media-upload-modal/use-invalidate-attachment-resolutions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AASH;;;;GAIG;AACH,wBAAgB,kCAAkC,eAqBjD"}

package/build-types/components/media-upload-modal/use-upload-status.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Hook for tracking media upload status with batch-scoped callbacks.
+ *
+ * This is a transitional layer that manually tracks upload progress using
+ * local state. The @wordpress/upload-media package provides a Redux-based
+ * store with richer capabilities (per-file progress, pause/resume, retry,
+ * concurrency control, client-side processing). When the media upload modal
+ * adopts @wordpress/upload-media, this hook can be replaced by selectors
+ * from that store (getItems, isBatchUploaded, getItemProgress, etc.) while
+ * keeping the same return interface.
+ */
+/**
+ * Internal dependencies
+ */
+import type { Attachment } from '../../utils/types';
+import type { UploadingFile } from './upload-status-popover';
+interface UseUploadStatusOptions {
+    onBatchComplete?: (attachments: Partial<Attachment>[]) => void;
+}
+interface RegisterBatchResult {
+    onFileChange: (attachments: Partial<Attachment>[]) => void;
+    onError: (error: Error) => void;
+}
+interface UseUploadStatusReturn {
+    /** Current list of all tracked files. */
+    uploadingFiles: UploadingFile[];
+    /**
+     * Register a new batch of files for tracking.
+     * Returns batch-scoped onFileChange and onError callbacks.
+     */
+    registerBatch: (files: File[]) => RegisterBatchResult;
+    /** Remove a single error entry by file id. */
+    dismissError: (fileId: string) => void;
+    /** Remove all uploaded (completed) entries from the list. */
+    clearCompleted: () => void;
+    /** True when tracked entries exist but none are still uploading. */
+    allComplete: boolean;
+}
+export declare function useUploadStatus({ onBatchComplete, }?: UseUploadStatusOptions): UseUploadStatusReturn;
+export {};
+//# sourceMappingURL=use-upload-status.d.ts.map

package/build-types/components/media-upload-modal/use-upload-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-upload-status.d.ts","sourceRoot":"","sources":["../../../src/components/media-upload-modal/use-upload-status.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAQH;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAK7D,UAAU,sBAAsB;IAC/B,eAAe,CAAC,EAAE,CAAE,WAAW,EAAE,OAAO,CAAE,UAAU,CAAE,EAAE,KAAM,IAAI,CAAC;CACnE;AAED,UAAU,mBAAmB;IAC5B,YAAY,EAAE,CAAE,WAAW,EAAE,OAAO,CAAE,UAAU,CAAE,EAAE,KAAM,IAAI,CAAC;IAC/D,OAAO,EAAE,CAAE,KAAK,EAAE,KAAK,KAAM,IAAI,CAAC;CAClC;AAED,UAAU,qBAAqB;IAC9B,yCAAyC;IACzC,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC;;;OAGG;IACH,aAAa,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,mBAAmB,CAAC;IACxD,8CAA8C;IAC9C,YAAY,EAAE,CAAE,MAAM,EAAE,MAAM,KAAM,IAAI,CAAC;IACzC,6DAA6D;IAC7D,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,oEAAoE;IACpE,WAAW,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAE,EAChC,eAAe,GACf,GAAE,sBAA2B,GAAI,qBAAqB,CAmJtD"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-utils",
-	"version": "5.41.1-next.v.202603102151.0+59e17f9ec",
+	"version": "5.42.0",
 	"description": "WordPress Media Upload Utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,19 +47,21 @@
 		"build-style/**"
 	],
 	"dependencies": {
-		"@wordpress/api-fetch": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/base-styles": "^6.17.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/blob": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/components": "^32.4.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/core-data": "^7.41.2-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/data": "^10.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/dataviews": "^13.1.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/element": "^6.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/i18n": "^6.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/icons": "^12.0.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/media-fields": "^0.6.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/notices": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/private-apis": "^1.41.1-next.v.202603102151.0+59e17f9ec"
+		"@wordpress/api-fetch": "^7.42.0",
+		"@wordpress/base-styles": "^6.18.0",
+		"@wordpress/blob": "^4.42.0",
+		"@wordpress/components": "^32.4.0",
+		"@wordpress/core-data": "^7.42.0",
+		"@wordpress/data": "^10.42.0",
+		"@wordpress/dataviews": "^13.1.0",
+		"@wordpress/element": "^6.42.0",
+		"@wordpress/i18n": "^6.15.0",
+		"@wordpress/icons": "^12.0.0",
+		"@wordpress/media-fields": "^0.7.0",
+		"@wordpress/notices": "^5.42.0",
+		"@wordpress/private-apis": "^1.42.0",
+		"@wordpress/ui": "^0.9.0",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0"
@@ -67,5 +69,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
+	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
 }

package/src/components/media-upload-modal/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -6,6 +11,8 @@ import {
 	useState,
 	useCallback,
 	useMemo,
+	useRef,
+	useEffect,
 } from '@wordpress/element';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import {
@@ -17,6 +24,7 @@ import { Modal, DropZone, FormFileUpload, Button } from '@wordpress/components';
 import { upload as uploadIcon } from '@wordpress/icons';
 import { DataViewsPicker } from '@wordpress/dataviews';
 import type { View, Field, ActionButton } from '@wordpress/dataviews';
+import { Stack } from '@wordpress/ui';
 import {
 	altTextField,
 	attachedToField,
@@ -32,7 +40,6 @@ import {
 	mimeTypeField,
 } from '@wordpress/media-fields';
 import { store as noticesStore, SnackbarNotices } from '@wordpress/notices';
-import { isBlobURL } from '@wordpress/blob';
 
 /**
  * Internal dependencies
@@ -41,6 +48,9 @@ import type { Attachment, RestAttachment } from '../../utils/types';
 import { transformAttachment } from '../../utils/transform-attachment';
 import { uploadMedia } from '../../utils/upload-media';
 import { unlock } from '../../lock-unlock';
+import { UploadStatusPopover } from './upload-status-popover';
+import { useInvalidateAttachmentResolutions } from './use-invalidate-attachment-resolutions';
+import { useUploadStatus } from './use-upload-status';
 
 const { useEntityRecordsWithPermissions } = unlock( coreDataPrivateApis );
 
@@ -173,9 +183,10 @@ export function MediaUploadModal( {
 			: [ String( value ) ];
 	} );
 
-	const { createSuccessNotice, createErrorNotice, createInfoNotice } =
+	const { createSuccessNotice, removeAllNotices } =
 		useDispatch( noticesStore );
-	const { invalidateResolution } = useDispatch( coreStore );
+	const invalidateAttachmentResolutions =
+		useInvalidateAttachmentResolutions();
 
 	// DataViews configuration - allow view updates
 	const [ view, setView ] = useState< View >( () => ( {
@@ -186,10 +197,11 @@ export function MediaUploadModal( {
 		mediaField: 'media_thumbnail',
 		search: '',
 		page: 1,
-		perPage: 20,
+		perPage: 50,
 		filters: [],
 		layout: {
 			previewSize: 170,
+			density: 'compact',
 		},
 	} ) );
 
@@ -243,6 +255,51 @@ export function MediaUploadModal( {
 		};
 	}, [ view, allowedTypes ] );
 
+	// Per-batch completion handler: auto-select uploaded items and refresh the grid.
+	const handleBatchComplete = useCallback(
+		( attachments: Partial< Attachment >[] ) => {
+			const uploadedIds = attachments
+				.map( ( attachment ) => String( attachment.id ) )
+				.filter( Boolean );
+
+			if ( multiple ) {
+				setSelection( ( prev ) => {
+					const existing = new Set( prev );
+					const newIds = uploadedIds.filter(
+						( id ) => ! existing.has( id )
+					);
+					return [ ...prev, ...newIds ];
+				} );
+			} else {
+				setSelection( uploadedIds.slice( 0, 1 ) );
+			}
+
+			// Invalidate all cached attachment queries so every page of
+			// results refreshes — not just the page the user is viewing.
+			invalidateAttachmentResolutions();
+		},
+		[ multiple, invalidateAttachmentResolutions ]
+	);
+
+	const {
+		uploadingFiles,
+		registerBatch,
+		dismissError,
+		clearCompleted,
+		allComplete,
+	} = useUploadStatus( { onBatchComplete: handleBatchComplete } );
+
+	const isPopoverOpenRef = useRef( false );
+	const handlePopoverOpenChange = useCallback(
+		( open: boolean ) => {
+			isPopoverOpenRef.current = open;
+			if ( ! open ) {
+				clearCompleted();
+			}
+		},
+		[ clearCompleted ]
+	);
+
 	// Fetch all media attachments using WordPress core data with permissions
 	const {
 		records: mediaRecords,
@@ -287,7 +344,7 @@ export function MediaUploadModal( {
 		() => [
 			{
 				id: 'select',
-				label: multiple ? __( 'Select' ) : __( 'Select' ),
+				label: __( 'Select' ),
 				isPrimary: true,
 				supportsBulk: multiple,
 				async callback() {
@@ -317,42 +374,39 @@ export function MediaUploadModal( {
 						? transformedPosts
 						: transformedPosts?.[ 0 ];
 
+					removeAllNotices( 'snackbar', NOTICES_CONTEXT );
 					onSelect( selectedItems );
 				},
 			},
 		],
-		[ multiple, onSelect, selection ]
+		[ multiple, onSelect, selection, removeAllNotices ]
 	);
 
 	const handleModalClose = useCallback( () => {
+		removeAllNotices( 'snackbar', NOTICES_CONTEXT );
 		onClose?.();
-	}, [ onClose ] );
+	}, [ removeAllNotices, onClose ] );
 
 	// Use onUpload if provided, otherwise fall back to uploadMedia
 	const handleUpload = onUpload || uploadMedia;
 
-	// Shared upload success handler
-	const handleUploadComplete = useCallback(
-		( attachments: Partial< Attachment >[] ) => {
-			// Check if all uploads are complete (no blob URLs)
-			const allComplete = attachments.every(
-				( attachment ) =>
-					attachment.id &&
-					attachment.url &&
-					! isBlobURL( attachment.url )
-			);
-
-			if ( allComplete && attachments.length > 0 ) {
-				// Show success notice (replaces progress notice via ID)
+	// Show success notice and auto-clear completed entries when all batches finish.
+	const prevAllCompleteRef = useRef( false );
+	useEffect( () => {
+		if ( allComplete && ! prevAllCompleteRef.current ) {
+			const completeCount = uploadingFiles.filter(
+				( file ) => file.status === 'uploaded'
+			).length;
+			if ( completeCount > 0 ) {
 				createSuccessNotice(
 					sprintf(
 						// translators: %s: number of files
 						_n(
 							'Uploaded %s file',
 							'Uploaded %s files',
-							attachments.length
+							completeCount
 						),
-						attachments.length.toLocaleString()
+						completeCount.toLocaleString()
 					),
 					{
 						type: 'snackbar',
@@ -360,84 +414,33 @@ export function MediaUploadModal( {
 						id: NOTICE_ID_UPLOAD_PROGRESS,
 					}
 				);
-
-				// Auto-select the newly uploaded items
-				const uploadedIds = attachments
-					.map( ( attachment ) => String( attachment.id ) )
-					.filter( Boolean );
-
-				if ( multiple ) {
-					// In multiple mode, add to existing selection
-					setSelection( ( prev ) => [ ...prev, ...uploadedIds ] );
-				} else {
-					// In single mode, replace selection with the first uploaded item
-					setSelection( uploadedIds.slice( 0, 1 ) );
-				}
-
-				// Invalidate the entity records resolution to refresh the view
-				invalidateResolution( 'getEntityRecords', [
-					'postType',
-					'attachment',
-					queryArgs,
-				] );
 			}
-		},
-		[ createSuccessNotice, invalidateResolution, queryArgs, multiple ]
-	);
 
-	// Shared upload error handler
-	const handleUploadError = useCallback(
-		( error: Error ) => {
-			// Show error notice (replaces progress notice via ID)
-			createErrorNotice( error.message, {
-				type: 'snackbar',
-				context: NOTICES_CONTEXT,
-				id: NOTICE_ID_UPLOAD_PROGRESS,
-			} );
-		},
-		[ createErrorNotice ]
-	);
+			// Auto-clear completed entries, unless the popover is
+			// open — in that case, they'll be cleared on close.
+			if ( ! isPopoverOpenRef.current ) {
+				clearCompleted();
+			}
+		}
+		prevAllCompleteRef.current = allComplete;
+	}, [ allComplete, uploadingFiles, createSuccessNotice, clearCompleted ] );
 
 	const handleFileSelect = useCallback(
 		( event: React.ChangeEvent< HTMLInputElement > ) => {
 			const files = event.target.files;
 			if ( files && files.length > 0 ) {
 				const filesArray = Array.from( files );
-
-				// Show upload start notice
-				createInfoNotice(
-					sprintf(
-						// translators: %s: number of files
-						_n(
-							'Uploading %s file',
-							'Uploading %s files',
-							filesArray.length
-						),
-						filesArray.length.toLocaleString()
-					),
-					{
-						type: 'snackbar',
-						context: NOTICES_CONTEXT,
-						id: NOTICE_ID_UPLOAD_PROGRESS,
-						explicitDismiss: true,
-					}
-				);
+				const { onFileChange, onError } = registerBatch( filesArray );
 
 				handleUpload( {
 					allowedTypes,
 					filesList: filesArray,
-					onFileChange: handleUploadComplete,
-					onError: handleUploadError,
+					onFileChange,
+					onError,
 				} );
 			}
 		},
-		[
-			allowedTypes,
-			handleUpload,
-			createInfoNotice,
-			handleUploadComplete,
-			handleUploadError,
-		]
+		[ allowedTypes, handleUpload, registerBatch ]
 	);
 
 	const paginationInfo = useMemo(
@@ -524,30 +527,14 @@ export function MediaUploadModal( {
 						);
 					}
 					if ( filteredFiles.length > 0 ) {
-						// Show upload start notice
-						createInfoNotice(
-							sprintf(
-								// translators: %s: number of files
-								_n(
-									'Uploading %s file',
-									'Uploading %s files',
-									filteredFiles.length
-								),
-								filteredFiles.length.toLocaleString()
-							),
-							{
-								type: 'snackbar',
-								context: NOTICES_CONTEXT,
-								id: NOTICE_ID_UPLOAD_PROGRESS,
-								explicitDismiss: true,
-							}
-						);
+						const { onFileChange, onError } =
+							registerBatch( filteredFiles );
 
 						handleUpload( {
 							allowedTypes,
 							filesList: filteredFiles,
-							onFileChange: handleUploadComplete,
-							onError: handleUploadError,
+							onFileChange,
+							onError,
 						} );
 					}
 				} }
@@ -565,10 +552,46 @@ export function MediaUploadModal( {
 				paginationInfo={ paginationInfo }
 				defaultLayouts={ defaultLayouts }
 				getItemId={ ( item: RestAttachment ) => String( item.id ) }
-				search={ search }
-				searchLabel={ searchLabel }
 				itemListLabel={ __( 'Media items' ) }
-			/>
+			>
+				<Stack
+					direction="row"
+					align="top"
+					justify="space-between"
+					className="dataviews__view-actions"
+					gap="xs"
+				>
+					<Stack
+						direction="row"
+						gap="sm"
+						justify="start"
+						className="dataviews__search"
+					>
+						{ search && (
+							<DataViewsPicker.Search label={ searchLabel } />
+						) }
+						<DataViewsPicker.FiltersToggle />
+					</Stack>
+					<Stack direction="row" gap="xs" style={ { flexShrink: 0 } }>
+						<DataViewsPicker.LayoutSwitcher />
+						<DataViewsPicker.ViewConfig />
+					</Stack>
+				</Stack>
+				<DataViewsPicker.FiltersToggled className="dataviews-filters__container" />
+				<DataViewsPicker.Layout />
+				<div
+					className={ clsx( 'media-upload-modal__footer', {
+						'is-uploading': uploadingFiles.length > 0,
+					} ) }
+				>
+					<UploadStatusPopover
+						uploadingFiles={ uploadingFiles }
+						onDismissError={ dismissError }
+						onOpenChange={ handlePopoverOpenChange }
+					/>
+					<DataViewsPicker.BulkActionToolbar />
+				</div>
+			</DataViewsPicker>
 			{ createPortal(
 				<SnackbarNotices
 					className="media-upload-modal__snackbar"

package/src/components/media-upload-modal/style.scss

@@ -1,4 +1,5 @@
 @use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
 
 .media-upload-modal {
@@ -7,7 +8,7 @@
 	}
 
 	.components-modal__frame.is-full-screen .components-modal__content {
-		margin-bottom: $grid-unit-20;
+		margin-bottom: 0;
 	}
 
 	.components-modal__content {
@@ -18,8 +19,41 @@
 		padding-top: $grid-unit-10;
 	}
 
-	.dataviews-footer {
-		padding-bottom: $grid-unit-10;
+	.media-upload-modal__footer {
+		position: sticky;
+		bottom: 0;
+		background-color: inherit;
+		// Match the z-index the footer normally has, since we take over sticky.
+		z-index: 2;
+
+		&.is-uploading .dataviews-picker-footer__bulk-selection {
+			visibility: hidden;
+		}
+
+		// The inner footer no longer needs sticky/z-index since the wrapper handles it.
+		.dataviews-footer {
+			position: static;
+			z-index: auto;
+		}
+	}
+
+	.media-upload-modal__upload-status {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		gap: $grid-unit-10;
+		background-color: var(--wp-dataviews-color-background, $white);
+		// Match the footer's padding so the trigger aligns with the item count.
+		left: $grid-unit-30;
+		top: 1px;
+		bottom: 1px;
+		z-index: 1;
+
+		.components-spinner {
+			width: $grid-unit-20;
+			height: $grid-unit-20;
+			margin: 0;
+		}
 	}
 }
 
@@ -38,3 +72,54 @@
 		transform-origin: 0 !important;
 	}
 }
+
+.media-upload-modal__upload-status__popover {
+	.components-popover__content {
+		width: 320px;
+	}
+
+	.media-upload-modal__upload-status__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: $grid-unit-15 $grid-unit-20;
+		h3 {
+			margin: 0;
+			font-size: 13px;
+			font-weight: $font-weight-medium;
+		}
+	}
+
+	.media-upload-modal__upload-status__list {
+		max-height: 200px;
+		overflow-y: auto;
+		margin: 0;
+		padding: 0 0 $grid-unit-05;
+		list-style: none;
+	}
+
+	.media-upload-modal__upload-status__item {
+		display: flex;
+		align-items: flex-start;
+		margin-bottom: 0;
+		justify-content: space-between;
+		gap: $grid-unit-10;
+		padding: $grid-unit-10 $grid-unit-20;
+
+		.components-spinner {
+			flex-shrink: 0;
+			width: $grid-unit-20;
+			height: $grid-unit-20;
+			margin: 0;
+		}
+	}
+
+	.media-upload-modal__upload-status__filename {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+		flex: 1;
+		font-size: 12px;
+	}
+}