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

package/build/components/media-upload-modal/upload-status-popover.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/media-upload-modal/upload-status-popover.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useCallback, useRef } from '@wordpress/element';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { Button, Icon, Notice, Popover, Spinner } from '@wordpress/components';\nimport { check, chevronDown } from '@wordpress/icons';\n\nexport interface UploadingFile {\n\tid: string;\n\tbatchId: string;\n\tname: string;\n\tstatus: 'uploading' | 'uploaded' | 'error';\n\terror?: string;\n}\n\ninterface UploadStatusPopoverProps {\n\tuploadingFiles: UploadingFile[];\n\tonDismissError?: ( fileId: string ) => void;\n\tonOpenChange?: ( open: boolean ) => void;\n}\n\nexport function UploadStatusPopover( {\n\tuploadingFiles,\n\tonDismissError,\n\tonOpenChange,\n}: UploadStatusPopoverProps ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\tconst [ prevHadErrors, setPrevHadErrors ] = useState( false );\n\tconst triggerRef = useRef< HTMLButtonElement >( null );\n\n\tconst updateIsOpen = useCallback(\n\t\t( open: boolean ) => {\n\t\t\tsetIsOpen( open );\n\t\t\tonOpenChange?.( open );\n\t\t},\n\t\t[ onOpenChange ]\n\t);\n\n\tconst activeFiles = uploadingFiles.filter(\n\t\t( file ) => file.status === 'uploading'\n\t);\n\tconst errorFiles = uploadingFiles.filter(\n\t\t( file ) => file.status === 'error'\n\t);\n\tconst hasErrors = errorFiles.length > 0;\n\tconst isUploading = activeFiles.length > 0;\n\n\t// Auto-expand when an error occurs.\n\tuseEffect( () => {\n\t\tif ( hasErrors && ! prevHadErrors ) {\n\t\t\tupdateIsOpen( true );\n\t\t}\n\t\tsetPrevHadErrors( hasErrors );\n\t}, [ hasErrors, prevHadErrors, updateIsOpen ] );\n\n\tif ( uploadingFiles.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tlet buttonLabel, popoverHeading: string;\n\tif ( isUploading ) {\n\t\tbuttonLabel = sprintf(\n\t\t\t// translators: %s: number of files being uploaded\n\t\t\t_n( 'Uploading %s file', 'Uploading %s files', activeFiles.length ),\n\t\t\tactiveFiles.length.toLocaleString()\n\t\t);\n\t\tpopoverHeading = __( 'Uploading' );\n\t} else if ( hasErrors ) {\n\t\tbuttonLabel = sprintf(\n\t\t\t// translators: %s: number of upload errors\n\t\t\t_n( '%s upload error', '%s upload errors', errorFiles.length ),\n\t\t\terrorFiles.length.toLocaleString()\n\t\t);\n\t\tpopoverHeading = __( 'Upload errors' );\n\t} else {\n\t\tbuttonLabel = __( 'Upload complete' );\n\t\tpopoverHeading = __( 'Upload complete' );\n\t}\n\n\treturn (\n\t\t<div className=\"media-upload-modal__upload-status\">\n\t\t\t{ isUploading && <Spinner /> }\n\t\t\t<Button\n\t\t\t\tclassName=\"media-upload-modal__upload-status__trigger\"\n\t\t\t\tsize=\"compact\"\n\t\t\t\ticon={ chevronDown }\n\t\t\t\ticonPosition=\"right\"\n\t\t\t\tonClick={ () => updateIsOpen( ! isOpen ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tref={ triggerRef }\n\t\t\t>\n\t\t\t\t{ buttonLabel }\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tclassName=\"media-upload-modal__upload-status__popover\"\n\t\t\t\t\tplacement=\"top-start\"\n\t\t\t\t\toffset={ 8 }\n\t\t\t\t\tanchor={ triggerRef.current }\n\t\t\t\t\tfocusOnMount\n\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t// Let the button's onClick handle toggling when\n\t\t\t\t\t\t// the close was triggered by clicking the trigger.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\ttriggerRef.current?.contains(\n\t\t\t\t\t\t\t\ttriggerRef.current.ownerDocument.activeElement\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tupdateIsOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"media-upload-modal__upload-status__header\">\n\t\t\t\t\t\t<h3>{ popoverHeading }</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ul className=\"media-upload-modal__upload-status__list\">\n\t\t\t\t\t\t{ uploadingFiles.map( ( file ) => (\n\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\tkey={ file.id }\n\t\t\t\t\t\t\t\tclassName=\"media-upload-modal__upload-status__item\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ file.status === 'uploading' && <Spinner /> }\n\t\t\t\t\t\t\t\t{ file.status === 'uploaded' && (\n\t\t\t\t\t\t\t\t\t<Icon icon={ check } size={ 16 } />\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ( file.status === 'uploading' ||\n\t\t\t\t\t\t\t\t\tfile.status === 'uploaded' ) && (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"media-upload-modal__upload-status__filename\"\n\t\t\t\t\t\t\t\t\t\ttitle={ file.name }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ file.name }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ file.status === 'error' && (\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus=\"error\"\n\t\t\t\t\t\t\t\t\t\tisDismissible={ !! onDismissError }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () =>\n\t\t\t\t\t\t\t\t\t\t\tonDismissError?.( file.id )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ file.name }: { file.error }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</ul>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build/components/media-upload-modal/use-invalidate-attachment-resolutions.cjs

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/media-utils/src/components/media-upload-modal/use-invalidate-attachment-resolutions.ts
+var use_invalidate_attachment_resolutions_exports = {};
+__export(use_invalidate_attachment_resolutions_exports, {
+  useInvalidateAttachmentResolutions: () => useInvalidateAttachmentResolutions
+});
+module.exports = __toCommonJS(use_invalidate_attachment_resolutions_exports);
+var import_element = require("@wordpress/element");
+var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
+function useInvalidateAttachmentResolutions() {
+  const registry = (0, import_data.useRegistry)();
+  return (0, import_element.useCallback)(() => {
+    const resolvers = registry.select(import_core_data.store).getCachedResolvers();
+    const entityRecordResolutions = resolvers.getEntityRecords;
+    entityRecordResolutions?.forEach((_value, args) => {
+      if (args[0] === "postType" && args[1] === "attachment") {
+        registry.dispatch(import_core_data.store).invalidateResolution("getEntityRecords", args);
+      }
+    });
+  }, [registry]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useInvalidateAttachmentResolutions
+});
+//# sourceMappingURL=use-invalidate-attachment-resolutions.cjs.map

package/build/components/media-upload-modal/use-invalidate-attachment-resolutions.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/media-upload-modal/use-invalidate-attachment-resolutions.ts"],
+  "sourcesContent": ["/**\n * Hook for invalidating all cached `getEntityRecords` resolutions for the\n * attachment post type.\n *\n * After a file upload completes the media grid needs to refresh, but\n * `invalidateResolution` only clears the exact query that is passed to it.\n * If the user is on page 2, page 1 (where the new upload would appear) stays\n * stale. Using `invalidateResolutionForStoreSelector` would work but is too\n * broad \u2014 it clears every `getEntityRecords` resolution, potentially\n * triggering unnecessary refetches for unrelated entity types.\n *\n * This hook provides a middle ground: it iterates over every cached\n * resolution for `getEntityRecords` and invalidates only the entries where\n * the first two arguments match `['postType', 'attachment']`.\n */\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useRegistry } from '@wordpress/data';\n\n/**\n * Returns a stable callback that invalidates all cached `getEntityRecords`\n * resolutions for `postType / attachment`, leaving every other entity type\n * untouched.\n */\nexport function useInvalidateAttachmentResolutions() {\n\tconst registry = useRegistry();\n\n\treturn useCallback( () => {\n\t\tconst resolvers = registry.select( coreStore ).getCachedResolvers();\n\n\t\t// getCachedResolvers() is typed as Record<string, unknown> but the\n\t\t// values are EquivalentKeyMap instances (Map-like). Cast the same\n\t\t// way the resolvers-cache-middleware does internally.\n\t\tconst entityRecordResolutions = resolvers.getEntityRecords as\n\t\t\t| Map< string[], { status: string } >\n\t\t\t| undefined;\n\n\t\tentityRecordResolutions?.forEach( ( _value, args ) => {\n\t\t\tif ( args[ 0 ] === 'postType' && args[ 1 ] === 'attachment' ) {\n\t\t\t\tregistry\n\t\t\t\t\t.dispatch( coreStore )\n\t\t\t\t\t.invalidateResolution( 'getEntityRecords', args );\n\t\t\t}\n\t\t} );\n\t}, [ registry ] );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBA,qBAA4B;AAC5B,uBAAmC;AACnC,kBAA4B;AAOrB,SAAS,qCAAqC;AACpD,QAAM,eAAW,yBAAY;AAE7B,aAAO,4BAAa,MAAM;AACzB,UAAM,YAAY,SAAS,OAAQ,iBAAAA,KAAU,EAAE,mBAAmB;AAKlE,UAAM,0BAA0B,UAAU;AAI1C,6BAAyB,QAAS,CAAE,QAAQ,SAAU;AACrD,UAAK,KAAM,CAAE,MAAM,cAAc,KAAM,CAAE,MAAM,cAAe;AAC7D,iBACE,SAAU,iBAAAA,KAAU,EACpB,qBAAsB,oBAAoB,IAAK;AAAA,MAClD;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAE,QAAS,CAAE;AACjB;",
+  "names": ["coreStore"]
+}

package/build/components/media-upload-modal/use-upload-status.cjs

@@ -0,0 +1,127 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/media-utils/src/components/media-upload-modal/use-upload-status.ts
+var use_upload_status_exports = {};
+__export(use_upload_status_exports, {
+  useUploadStatus: () => useUploadStatus
+});
+module.exports = __toCommonJS(use_upload_status_exports);
+var import_element = require("@wordpress/element");
+var import_blob = require("@wordpress/blob");
+var import_upload_error = require("../../utils/upload-error.cjs");
+var idCounter = 0;
+var batchIdCounter = 0;
+function useUploadStatus({
+  onBatchComplete
+} = {}) {
+  const [uploadingFiles, setUploadingFiles] = (0, import_element.useState)(
+    []
+  );
+  const clearCompleted = (0, import_element.useCallback)(() => {
+    setUploadingFiles(
+      (prev) => prev.filter((item) => item.status !== "uploaded")
+    );
+  }, []);
+  const dismissError = (0, import_element.useCallback)((fileId) => {
+    setUploadingFiles(
+      (prev) => prev.filter((item) => item.id !== fileId)
+    );
+  }, []);
+  const registerBatch = (0, import_element.useCallback)(
+    (files) => {
+      const batchId = String(++batchIdCounter);
+      const batchSize = files.length;
+      const newEntries = files.map((file) => ({
+        id: String(++idCounter),
+        batchId,
+        name: file.name,
+        status: "uploading"
+      }));
+      setUploadingFiles((prev) => [...prev, ...newEntries]);
+      let successCount = 0;
+      let errorCount = 0;
+      let batchDone = false;
+      let successAttachments = [];
+      const completeBatchIfDone = () => {
+        if (batchDone || successCount + errorCount < batchSize) {
+          return;
+        }
+        batchDone = true;
+        setUploadingFiles(
+          (prev) => prev.map(
+            (item) => item.batchId === batchId && item.status === "uploading" ? {
+              ...item,
+              status: "uploaded"
+            } : item
+          )
+        );
+        onBatchComplete?.(successAttachments);
+      };
+      const onFileChange = (attachments) => {
+        if (batchDone) {
+          return;
+        }
+        const allReal = attachments.every(
+          (attachment) => attachment.id && attachment.url && !(0, import_blob.isBlobURL)(attachment.url)
+        );
+        if (!allReal) {
+          return;
+        }
+        successCount = attachments.length;
+        successAttachments = attachments;
+        completeBatchIfDone();
+      };
+      const onError = (error) => {
+        const fileName = error instanceof import_upload_error.UploadError ? error.file.name : void 0;
+        setUploadingFiles((prev) => {
+          let matched = false;
+          return prev.map((item) => {
+            if (!matched && item.batchId === batchId && item.status === "uploading" && (!fileName || item.name === fileName)) {
+              matched = true;
+              return {
+                ...item,
+                status: "error",
+                error: error.message
+              };
+            }
+            return item;
+          });
+        });
+        errorCount++;
+        completeBatchIfDone();
+      };
+      return { onFileChange, onError };
+    },
+    [onBatchComplete]
+  );
+  const allComplete = uploadingFiles.length > 0 && uploadingFiles.every((item) => item.status !== "uploading");
+  return {
+    uploadingFiles,
+    registerBatch,
+    dismissError,
+    clearCompleted,
+    allComplete
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useUploadStatus
+});
+//# sourceMappingURL=use-upload-status.cjs.map

package/build/components/media-upload-modal/use-upload-status.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/media-upload-modal/use-upload-status.ts"],
+  "sourcesContent": ["/**\n * Hook for tracking media upload status with batch-scoped callbacks.\n *\n * This is a transitional layer that manually tracks upload progress using\n * local state. The @wordpress/upload-media package provides a Redux-based\n * store with richer capabilities (per-file progress, pause/resume, retry,\n * concurrency control, client-side processing). When the media upload modal\n * adopts @wordpress/upload-media, this hook can be replaced by selectors\n * from that store (getItems, isBatchUploaded, getItemProgress, etc.) while\n * keeping the same return interface.\n */\n\n/**\n * WordPress dependencies\n */\nimport { useState, useCallback } from '@wordpress/element';\nimport { isBlobURL } from '@wordpress/blob';\n\n/**\n * Internal dependencies\n */\nimport type { Attachment } from '../../utils/types';\nimport { UploadError } from '../../utils/upload-error';\nimport type { UploadingFile } from './upload-status-popover';\n\nlet idCounter = 0;\nlet batchIdCounter = 0;\n\ninterface UseUploadStatusOptions {\n\tonBatchComplete?: ( attachments: Partial< Attachment >[] ) => void;\n}\n\ninterface RegisterBatchResult {\n\tonFileChange: ( attachments: Partial< Attachment >[] ) => void;\n\tonError: ( error: Error ) => void;\n}\n\ninterface UseUploadStatusReturn {\n\t/** Current list of all tracked files. */\n\tuploadingFiles: UploadingFile[];\n\t/**\n\t * Register a new batch of files for tracking.\n\t * Returns batch-scoped onFileChange and onError callbacks.\n\t */\n\tregisterBatch: ( files: File[] ) => RegisterBatchResult;\n\t/** Remove a single error entry by file id. */\n\tdismissError: ( fileId: string ) => void;\n\t/** Remove all uploaded (completed) entries from the list. */\n\tclearCompleted: () => void;\n\t/** True when tracked entries exist but none are still uploading. */\n\tallComplete: boolean;\n}\n\nexport function useUploadStatus( {\n\tonBatchComplete,\n}: UseUploadStatusOptions = {} ): UseUploadStatusReturn {\n\tconst [ uploadingFiles, setUploadingFiles ] = useState< UploadingFile[] >(\n\t\t[]\n\t);\n\n\tconst clearCompleted = useCallback( () => {\n\t\tsetUploadingFiles( ( prev ) =>\n\t\t\tprev.filter( ( item ) => item.status !== 'uploaded' )\n\t\t);\n\t}, [] );\n\n\tconst dismissError = useCallback( ( fileId: string ) => {\n\t\tsetUploadingFiles( ( prev ) =>\n\t\t\tprev.filter( ( item ) => item.id !== fileId )\n\t\t);\n\t}, [] );\n\n\tconst registerBatch = useCallback(\n\t\t( files: File[] ): RegisterBatchResult => {\n\t\t\tconst batchId = String( ++batchIdCounter );\n\t\t\tconst batchSize = files.length;\n\n\t\t\tconst newEntries: UploadingFile[] = files.map( ( file ) => ( {\n\t\t\t\tid: String( ++idCounter ),\n\t\t\t\tbatchId,\n\t\t\t\tname: file.name,\n\t\t\t\tstatus: 'uploading' as const,\n\t\t\t} ) );\n\n\t\t\tsetUploadingFiles( ( prev ) => [ ...prev, ...newEntries ] );\n\n\t\t\t// Track successes and errors separately. onFileChange receives\n\t\t\t// the full current array each time (not incremental), so we\n\t\t\t// store the latest count rather than accumulating. The batch\n\t\t\t// is complete when successCount + errorCount >= batchSize.\n\t\t\tlet successCount = 0;\n\t\t\tlet errorCount = 0;\n\t\t\tlet batchDone = false;\n\t\t\tlet successAttachments: Partial< Attachment >[] = [];\n\n\t\t\tconst completeBatchIfDone = () => {\n\t\t\t\tif ( batchDone || successCount + errorCount < batchSize ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tbatchDone = true;\n\n\t\t\t\t// Mark any remaining 'uploading' entries in this batch\n\t\t\t\t// as 'uploaded' (these are the successful ones).\n\t\t\t\tsetUploadingFiles( ( prev ) =>\n\t\t\t\t\tprev.map( ( item ) =>\n\t\t\t\t\t\titem.batchId === batchId && item.status === 'uploading'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t...item,\n\t\t\t\t\t\t\t\t\tstatus: 'uploaded' as const,\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: item\n\t\t\t\t\t)\n\t\t\t\t);\n\n\t\t\t\tonBatchComplete?.( successAttachments );\n\t\t\t};\n\n\t\t\tconst onFileChange = ( attachments: Partial< Attachment >[] ) => {\n\t\t\t\tif ( batchDone ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Ignore intermediate calls where some files still have\n\t\t\t\t// blob URLs (not yet uploaded to the server).\n\t\t\t\tconst allReal = attachments.every(\n\t\t\t\t\t( attachment ) =>\n\t\t\t\t\t\tattachment.id &&\n\t\t\t\t\t\tattachment.url &&\n\t\t\t\t\t\t! isBlobURL( attachment.url )\n\t\t\t\t);\n\n\t\t\t\tif ( ! allReal ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Store the latest success count and attachments.\n\t\t\t\t// onFileChange receives the full array each time, so\n\t\t\t\t// we replace rather than accumulate.\n\t\t\t\tsuccessCount = attachments.length;\n\t\t\t\tsuccessAttachments = attachments;\n\n\t\t\t\tcompleteBatchIfDone();\n\t\t\t};\n\n\t\t\tconst onError = ( error: Error ) => {\n\t\t\t\t// uploadMedia always wraps errors in UploadError, which\n\t\t\t\t// carries the originating File so we can match it back to\n\t\t\t\t// the correct item. A custom onUpload prop could pass a\n\t\t\t\t// plain Error instead \u2014 in that case fileName is undefined\n\t\t\t\t// and no entry will be visually marked as errored, but the\n\t\t\t\t// batch will still complete correctly via errorCount.\n\t\t\t\tconst fileName =\n\t\t\t\t\terror instanceof UploadError ? error.file.name : undefined;\n\n\t\t\t\t// Find the first still-uploading entry in this batch whose\n\t\t\t\t// name matches the failed file and mark it as errored.\n\t\t\t\t// Falls back to the first uploading entry in the batch\n\t\t\t\t// when no filename is available. The `matched` flag\n\t\t\t\t// ensures only one entry is updated even when duplicate\n\t\t\t\t// filenames exist in the same batch.\n\t\t\t\tsetUploadingFiles( ( prev ) => {\n\t\t\t\t\tlet matched = false;\n\t\t\t\t\treturn prev.map( ( item ) => {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t! matched &&\n\t\t\t\t\t\t\titem.batchId === batchId &&\n\t\t\t\t\t\t\titem.status === 'uploading' &&\n\t\t\t\t\t\t\t( ! fileName || item.name === fileName )\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tmatched = true;\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t...item,\n\t\t\t\t\t\t\t\tstatus: 'error' as const,\n\t\t\t\t\t\t\t\terror: error.message,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn item;\n\t\t\t\t\t} );\n\t\t\t\t} );\n\n\t\t\t\terrorCount++;\n\n\t\t\t\tcompleteBatchIfDone();\n\t\t\t};\n\n\t\t\treturn { onFileChange, onError };\n\t\t},\n\t\t[ onBatchComplete ]\n\t);\n\n\tconst allComplete =\n\t\tuploadingFiles.length > 0 &&\n\t\tuploadingFiles.every( ( item ) => item.status !== 'uploading' );\n\n\treturn {\n\t\tuploadingFiles,\n\t\tregisterBatch,\n\t\tdismissError,\n\t\tclearCompleted,\n\t\tallComplete,\n\t};\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA,qBAAsC;AACtC,kBAA0B;AAM1B,0BAA4B;AAG5B,IAAI,YAAY;AAChB,IAAI,iBAAiB;AA2Bd,SAAS,gBAAiB;AAAA,EAChC;AACD,IAA4B,CAAC,GAA2B;AACvD,QAAM,CAAE,gBAAgB,iBAAkB,QAAI;AAAA,IAC7C,CAAC;AAAA,EACF;AAEA,QAAM,qBAAiB,4BAAa,MAAM;AACzC;AAAA,MAAmB,CAAE,SACpB,KAAK,OAAQ,CAAE,SAAU,KAAK,WAAW,UAAW;AAAA,IACrD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,mBAAe,4BAAa,CAAE,WAAoB;AACvD;AAAA,MAAmB,CAAE,SACpB,KAAK,OAAQ,CAAE,SAAU,KAAK,OAAO,MAAO;AAAA,IAC7C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,oBAAgB;AAAA,IACrB,CAAE,UAAwC;AACzC,YAAM,UAAU,OAAQ,EAAE,cAAe;AACzC,YAAM,YAAY,MAAM;AAExB,YAAM,aAA8B,MAAM,IAAK,CAAE,UAAY;AAAA,QAC5D,IAAI,OAAQ,EAAE,SAAU;AAAA,QACxB;AAAA,QACA,MAAM,KAAK;AAAA,QACX,QAAQ;AAAA,MACT,EAAI;AAEJ,wBAAmB,CAAE,SAAU,CAAE,GAAG,MAAM,GAAG,UAAW,CAAE;AAM1D,UAAI,eAAe;AACnB,UAAI,aAAa;AACjB,UAAI,YAAY;AAChB,UAAI,qBAA8C,CAAC;AAEnD,YAAM,sBAAsB,MAAM;AACjC,YAAK,aAAa,eAAe,aAAa,WAAY;AACzD;AAAA,QACD;AAEA,oBAAY;AAIZ;AAAA,UAAmB,CAAE,SACpB,KAAK;AAAA,YAAK,CAAE,SACX,KAAK,YAAY,WAAW,KAAK,WAAW,cACzC;AAAA,cACA,GAAG;AAAA,cACH,QAAQ;AAAA,YACR,IACA;AAAA,UACJ;AAAA,QACD;AAEA,0BAAmB,kBAAmB;AAAA,MACvC;AAEA,YAAM,eAAe,CAAE,gBAA0C;AAChE,YAAK,WAAY;AAChB;AAAA,QACD;AAIA,cAAM,UAAU,YAAY;AAAA,UAC3B,CAAE,eACD,WAAW,MACX,WAAW,OACX,KAAE,uBAAW,WAAW,GAAI;AAAA,QAC9B;AAEA,YAAK,CAAE,SAAU;AAChB;AAAA,QACD;AAKA,uBAAe,YAAY;AAC3B,6BAAqB;AAErB,4BAAoB;AAAA,MACrB;AAEA,YAAM,UAAU,CAAE,UAAkB;AAOnC,cAAM,WACL,iBAAiB,kCAAc,MAAM,KAAK,OAAO;AAQlD,0BAAmB,CAAE,SAAU;AAC9B,cAAI,UAAU;AACd,iBAAO,KAAK,IAAK,CAAE,SAAU;AAC5B,gBACC,CAAE,WACF,KAAK,YAAY,WACjB,KAAK,WAAW,gBACd,CAAE,YAAY,KAAK,SAAS,WAC7B;AACD,wBAAU;AACV,qBAAO;AAAA,gBACN,GAAG;AAAA,gBACH,QAAQ;AAAA,gBACR,OAAO,MAAM;AAAA,cACd;AAAA,YACD;AACA,mBAAO;AAAA,UACR,CAAE;AAAA,QACH,CAAE;AAEF;AAEA,4BAAoB;AAAA,MACrB;AAEA,aAAO,EAAE,cAAc,QAAQ;AAAA,IAChC;AAAA,IACA,CAAE,eAAgB;AAAA,EACnB;AAEA,QAAM,cACL,eAAe,SAAS,KACxB,eAAe,MAAO,CAAE,SAAU,KAAK,WAAW,WAAY;AAE/D,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;",
+  "names": []
+}

package/build-module/components/media-upload-modal/index.mjs

@@ -1,9 +1,12 @@
 // packages/media-utils/src/components/media-upload-modal/index.tsx
+import clsx from "clsx";
 import {
   createPortal,
   useState,
   useCallback,
-  useMemo
+  useMemo,
+  useRef,
+  useEffect
 } from "@wordpress/element";
 import { __, sprintf, _n } from "@wordpress/i18n";
 import {
@@ -14,6 +17,7 @@ import { resolveSelect, useDispatch } from "@wordpress/data";
 import { Modal, DropZone, FormFileUpload, Button } from "@wordpress/components";
 import { upload as uploadIcon } from "@wordpress/icons";
 import { DataViewsPicker } from "@wordpress/dataviews";
+import { Stack } from "@wordpress/ui";
 import {
   altTextField,
   attachedToField,
@@ -29,10 +33,12 @@ import {
   mimeTypeField
 } from "@wordpress/media-fields";
 import { store as noticesStore, SnackbarNotices } from "@wordpress/notices";
-import { isBlobURL } from "@wordpress/blob";
 import { transformAttachment } from "../../utils/transform-attachment.mjs";
 import { uploadMedia } from "../../utils/upload-media.mjs";
 import { unlock } from "../../lock-unlock.mjs";
+import { UploadStatusPopover } from "./upload-status-popover.mjs";
+import { useInvalidateAttachmentResolutions } from "./use-invalidate-attachment-resolutions.mjs";
+import { useUploadStatus } from "./use-upload-status.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var { useEntityRecordsWithPermissions } = unlock(coreDataPrivateApis);
 var LAYOUT_PICKER_GRID = "pickerGrid";
@@ -59,8 +65,8 @@ function MediaUploadModal({
     }
     return Array.isArray(value) ? value.map(String) : [String(value)];
   });
-  const { createSuccessNotice, createErrorNotice, createInfoNotice } = useDispatch(noticesStore);
-  const { invalidateResolution } = useDispatch(coreStore);
+  const { createSuccessNotice, removeAllNotices } = useDispatch(noticesStore);
+  const invalidateAttachmentResolutions = useInvalidateAttachmentResolutions();
   const [view, setView] = useState(() => ({
     type: LAYOUT_PICKER_GRID,
     fields: [],
@@ -69,10 +75,11 @@ function MediaUploadModal({
     mediaField: "media_thumbnail",
     search: "",
     page: 1,
-    perPage: 20,
+    perPage: 50,
     filters: [],
     layout: {
-      previewSize: 170
+      previewSize: 170,
+      density: "compact"
     }
   }));
   const queryArgs = useMemo(() => {
@@ -113,6 +120,41 @@ function MediaUploadModal({
       ...filters
     };
   }, [view, allowedTypes]);
+  const handleBatchComplete = useCallback(
+    (attachments) => {
+      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));
+      }
+      invalidateAttachmentResolutions();
+    },
+    [multiple, invalidateAttachmentResolutions]
+  );
+  const {
+    uploadingFiles,
+    registerBatch,
+    dismissError,
+    clearCompleted,
+    allComplete
+  } = useUploadStatus({ onBatchComplete: handleBatchComplete });
+  const isPopoverOpenRef = useRef(false);
+  const handlePopoverOpenChange = useCallback(
+    (open) => {
+      isPopoverOpenRef.current = open;
+      if (!open) {
+        clearCompleted();
+      }
+    },
+    [clearCompleted]
+  );
   const {
     records: mediaRecords,
     isResolving: isLoading,
@@ -155,7 +197,7 @@ function MediaUploadModal({
     () => [
       {
         id: "select",
-        label: multiple ? __("Select") : __("Select"),
+        label: __("Select"),
         isPrimary: true,
         supportsBulk: multiple,
         async callback() {
@@ -175,31 +217,34 @@ function MediaUploadModal({
           );
           const transformedPosts = (selectedPosts ?? []).map(transformAttachment).filter(Boolean);
           const selectedItems = multiple ? 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]);
   const handleUpload = onUpload || uploadMedia;
-  const handleUploadComplete = useCallback(
-    (attachments) => {
-      const allComplete = attachments.every(
-        (attachment) => attachment.id && attachment.url && !isBlobURL(attachment.url)
-      );
-      if (allComplete && attachments.length > 0) {
+  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",
@@ -207,68 +252,28 @@ function MediaUploadModal({
             id: NOTICE_ID_UPLOAD_PROGRESS
           }
         );
-        const uploadedIds = attachments.map((attachment) => String(attachment.id)).filter(Boolean);
-        if (multiple) {
-          setSelection((prev) => [...prev, ...uploadedIds]);
-        } else {
-          setSelection(uploadedIds.slice(0, 1));
-        }
-        invalidateResolution("getEntityRecords", [
-          "postType",
-          "attachment",
-          queryArgs
-        ]);
       }
-    },
-    [createSuccessNotice, invalidateResolution, queryArgs, multiple]
-  );
-  const handleUploadError = useCallback(
-    (error) => {
-      createErrorNotice(error.message, {
-        type: "snackbar",
-        context: NOTICES_CONTEXT,
-        id: NOTICE_ID_UPLOAD_PROGRESS
-      });
-    },
-    [createErrorNotice]
-  );
+      if (!isPopoverOpenRef.current) {
+        clearCompleted();
+      }
+    }
+    prevAllCompleteRef.current = allComplete;
+  }, [allComplete, uploadingFiles, createSuccessNotice, clearCompleted]);
   const handleFileSelect = useCallback(
     (event) => {
       const files = event.target.files;
       if (files && files.length > 0) {
         const filesArray = Array.from(files);
-        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(
     () => ({
@@ -348,35 +353,19 @@ function MediaUploadModal({
                 );
               }
               if (filteredFiles.length > 0) {
-                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
                 });
               }
             },
             label: __("Drop files to upload")
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           DataViewsPicker,
           {
             data: mediaRecords || [],
@@ -390,9 +379,59 @@ function MediaUploadModal({
             paginationInfo,
             defaultLayouts,
             getItemId: (item) => String(item.id),
-            search,
-            searchLabel,
-            itemListLabel: __("Media items")
+            itemListLabel: __("Media items"),
+            children: [
+              /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  direction: "row",
+                  align: "top",
+                  justify: "space-between",
+                  className: "dataviews__view-actions",
+                  gap: "xs",
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      Stack,
+                      {
+                        direction: "row",
+                        gap: "sm",
+                        justify: "start",
+                        className: "dataviews__search",
+                        children: [
+                          search && /* @__PURE__ */ jsx(DataViewsPicker.Search, { label: searchLabel }),
+                          /* @__PURE__ */ jsx(DataViewsPicker.FiltersToggle, {})
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "xs", style: { flexShrink: 0 }, children: [
+                      /* @__PURE__ */ jsx(DataViewsPicker.LayoutSwitcher, {}),
+                      /* @__PURE__ */ jsx(DataViewsPicker.ViewConfig, {})
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(DataViewsPicker.FiltersToggled, { className: "dataviews-filters__container" }),
+              /* @__PURE__ */ jsx(DataViewsPicker.Layout, {}),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx("media-upload-modal__footer", {
+                    "is-uploading": uploadingFiles.length > 0
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      UploadStatusPopover,
+                      {
+                        uploadingFiles,
+                        onDismissError: dismissError,
+                        onOpenChange: handlePopoverOpenChange
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(DataViewsPicker.BulkActionToolbar, {})
+                  ]
+                }
+              )
+            ]
           }
         ),
         createPortal(