@wordpress/fields 0.30.0 → 0.30.1-next.v.0

package/build/components/media-edit/index.cjs

@@ -345,9 +345,21 @@ function MediaEdit({
   hideLabelFromVision,
   allowedTypes = ["image"],
   multiple,
-  isExpanded
+  isExpanded,
+  validity
 }) {
   const value = field.getValue({ item: data });
+  const [isTouched, setIsTouched] = (0, import_element.useState)(false);
+  const validityTargetRef = (0, import_element.useRef)(null);
+  const [customValidity, setCustomValidity] = (0, import_element.useState)(void 0);
+  (0, import_element.useEffect)(() => {
+    const validityTarget = validityTargetRef.current;
+    const handler = () => {
+      setIsTouched(true);
+    };
+    validityTarget?.addEventListener("invalid", handler);
+    return () => validityTarget?.removeEventListener("invalid", handler);
+  }, []);
   const attachments = (0, import_data.useSelect)(
     (select) => {
       if (!value) {
@@ -368,11 +380,15 @@ function MediaEdit({
     (newValue) => onChange(field.setValue({ item: data, value: newValue })),
     [data, field, onChange]
   );
-  const removeItem = (itemId) => {
-    const currentIds = Array.isArray(value) ? value : [value];
-    const newIds = currentIds.filter((id) => id !== itemId);
-    onChangeControl(newIds.length ? newIds : void 0);
-  };
+  const removeItem = (0, import_element.useCallback)(
+    (itemId) => {
+      const currentIds = Array.isArray(value) ? value : [value];
+      const newIds = currentIds.filter((id) => id !== itemId);
+      setIsTouched(true);
+      onChangeControl(newIds.length ? newIds : void 0);
+    },
+    [value, onChangeControl]
+  );
   const onFilesDrop = (0, import_element.useCallback)(
     (files, _replacementId) => {
       (0, import_media_utils.uploadMedia)({
@@ -454,41 +470,113 @@ function MediaEdit({
     items.push(...blobItems);
     return items;
   }, [attachments, replacementId, blobs]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", { className: "fields__media-edit", "data-field-id": field.id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    ConditionalMediaUpload,
-    {
-      onSelect: (selectedMedia) => {
-        if (multiple) {
-          const newIds = Array.isArray(selectedMedia) ? selectedMedia.map((m) => m.id) : [selectedMedia.id];
-          onChangeControl(newIds);
-        } else {
-          onChangeControl(selectedMedia.id);
+  (0, import_element.useEffect)(() => {
+    if (!isTouched) {
+      return;
+    }
+    const input = validityTargetRef.current;
+    if (!input) {
+      return;
+    }
+    if (validity) {
+      const customValidityResult = validity?.custom;
+      setCustomValidity(customValidityResult);
+      if (customValidityResult?.type === "invalid") {
+        input.setCustomValidity(
+          customValidityResult.message || (0, import_i18n.__)("Invalid")
+        );
+      } else {
+        input.setCustomValidity("");
+      }
+    } else {
+      input.setCustomValidity("");
+      setCustomValidity(void 0);
+    }
+  }, [isTouched, field.isValid, validity]);
+  const onBlur = (0, import_element.useCallback)(
+    (event) => {
+      if (isTouched) {
+        return;
+      }
+      if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
+        setIsTouched(true);
+      }
+    },
+    [isTouched]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { onBlur, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", { className: "fields__media-edit", "data-field-id": field.id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ConditionalMediaUpload,
+      {
+        onSelect: (selectedMedia) => {
+          if (multiple) {
+            const newIds = Array.isArray(selectedMedia) ? selectedMedia.map((m) => m.id) : [selectedMedia.id];
+            onChangeControl(newIds);
+          } else {
+            onChangeControl(selectedMedia.id);
+          }
+        },
+        allowedTypes,
+        value,
+        multiple,
+        title: field.label,
+        render: ({ open }) => {
+          const AttachmentsComponent = isExpanded ? ExpandedMediaEditAttachments : CompactMediaEditAttachments;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 2, children: [
+            field.label && (hideLabelFromVision ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { as: "legend", children: field.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { as: "legend", children: field.label })),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              AttachmentsComponent,
+              {
+                allItems,
+                addButtonLabel,
+                multiple,
+                removeItem,
+                open,
+                onFilesDrop,
+                isUploading: !!blobs.length
+              }
+            ),
+            field.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { variant: "muted", children: field.description })
+          ] });
         }
-      },
-      allowedTypes,
-      value,
-      multiple,
-      title: field.label,
-      render: ({ open }) => {
-        const AttachmentsComponent = isExpanded ? ExpandedMediaEditAttachments : CompactMediaEditAttachments;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 2, children: [
-          field.label && (hideLabelFromVision ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { as: "legend", children: field.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { as: "legend", children: field.label })),
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "text",
+        ref: validityTargetRef,
+        value: value ?? "",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        onChange: () => {
+        }
+      }
+    ) }),
+    customValidity && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-live": "polite", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "p",
+      {
+        className: (0, import_clsx.default)(
+          "components-validated-control__indicator",
+          {
+            "is-invalid": customValidity.type === "invalid",
+            "is-valid": customValidity.type === "valid"
+          }
+        ),
+        children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            AttachmentsComponent,
+            import_components.Icon,
             {
-              allItems,
-              addButtonLabel,
-              multiple,
-              removeItem,
-              open,
-              onFilesDrop,
-              isUploading: !!blobs.length
+              className: "components-validated-control__indicator-icon",
+              icon: import_icons.error,
+              size: 16,
+              fill: "currentColor"
             }
           ),
-          field.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { variant: "muted", children: field.description })
-        ] });
+          customValidity.message
+        ]
       }
-    }
-  ) });
+    ) })
+  ] });
 }
 //# sourceMappingURL=index.cjs.map

package/build/components/media-edit/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/media-edit/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tDropZone,\n\tIcon,\n\tSpinner,\n\t__experimentalText as Text,\n\t__experimentalTruncate as Truncate,\n\t__experimentalVStack as VStack,\n\tBaseControl,\n\tTooltip,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';\nimport { store as coreStore, type Attachment } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { archive, audio, video, file, closeSmall } from '@wordpress/icons';\nimport {\n\tMediaUpload,\n\tuploadMedia,\n\tprivateApis as mediaUtilsPrivateApis,\n} from '@wordpress/media-utils';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport type { MediaEditProps } from '../../types';\n\nconst { MediaUploadModal } = unlock( mediaUtilsPrivateApis );\n\ntype BlobItem = {\n\tid: string;\n\tsource_url: string;\n\tmime_type: string | undefined;\n\talt_text?: string;\n};\n\n/**\n * Conditional Media component that uses MediaUploadModal when experiment is enabled,\n * otherwise falls back to media-utils MediaUpload.\n *\n * @param root0          Component props.\n * @param root0.render   Render prop function that receives { open } object.\n * @param root0.multiple Whether to allow multiple media selections.\n * @return The component.\n */\nfunction ConditionalMediaUpload( { render, multiple, ...props }: any ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tif ( ( window as any ).__experimentalDataViewsMediaModal ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ render && render( { open: () => setIsModalOpen( true ) } ) }\n\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t<MediaUploadModal\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\t\tisOpen={ isModalOpen }\n\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\t\tprops.onClose?.();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonSelect={ ( media: any ) => {\n\t\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\t\tprops.onSelect?.( media );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\t// Fallback to media-utils MediaUpload when experiment is disabled.\n\treturn (\n\t\t<MediaUpload\n\t\t\t{ ...props }\n\t\t\trender={ render }\n\t\t\tmultiple={ multiple ? 'add' : undefined }\n\t\t/>\n\t);\n}\n\nfunction MediaPickerButton( {\n\topen,\n\tchildren,\n\tlabel,\n\tshowTooltip = false,\n\tonFilesDrop,\n\tattachment,\n\tisUploading = false,\n}: {\n\topen: () => void;\n\tchildren: React.ReactNode;\n\tlabel: string;\n\tshowTooltip?: boolean;\n\tonFilesDrop: MediaEditAttachmentsProps[ 'onFilesDrop' ];\n\tattachment?: MediaEditAttachment;\n\tisUploading?: boolean;\n} ) {\n\tconst isBlob = attachment && isBlobURL( attachment.source_url );\n\tconst mediaPickerButton = (\n\t\t<div\n\t\t\tclassName=\"fields__media-edit-picker-button\"\n\t\t\trole=\"button\"\n\t\t\ttabIndex={ 0 }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( ! isUploading ) {\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( isUploading ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( event.key === 'Enter' || event.key === ' ' ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={ label }\n\t\t\taria-disabled={ isUploading }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ isBlob && (\n\t\t\t\t<span className=\"fields__media-edit-picker-button-spinner\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</span>\n\t\t\t) }\n\t\t\t{ ! isUploading && (\n\t\t\t\t<DropZone\n\t\t\t\t\tonFilesDrop={ ( files ) =>\n\t\t\t\t\t\tonFilesDrop( files, attachment?.id as number )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n\tif ( ! showTooltip ) {\n\t\treturn mediaPickerButton;\n\t}\n\treturn <Tooltip text={ label }>{ mediaPickerButton }</Tooltip>;\n}\n\nconst archiveMimeTypes = [\n\t'application/zip',\n\t'application/x-zip-compressed',\n\t'application/x-rar-compressed',\n\t'application/x-7z-compressed',\n\t'application/x-tar',\n\t'application/x-gzip',\n];\n\nfunction MediaTitle( { attachment }: { attachment: Attachment< 'view' > } ) {\n\treturn (\n\t\t<Truncate className=\"fields__media-edit-filename\">\n\t\t\t{ attachment.title.rendered }\n\t\t</Truncate>\n\t);\n}\n\nfunction MediaEditPlaceholder( props: {\n\topen: () => void;\n\tlabel: string;\n\tonFilesDrop: MediaEditAttachmentsProps[ 'onFilesDrop' ];\n\tisUploading: boolean;\n} ) {\n\treturn (\n\t\t<MediaPickerButton { ...props }>\n\t\t\t<span className=\"fields__media-edit-placeholder\">\n\t\t\t\t{ props.label }\n\t\t\t</span>\n\t\t</MediaPickerButton>\n\t);\n}\n\nfunction MediaPreview( { attachment }: { attachment: MediaEditAttachment } ) {\n\tconst url = attachment.source_url;\n\tconst mimeType = attachment.mime_type || '';\n\tif ( mimeType.startsWith( 'image' ) ) {\n\t\treturn (\n\t\t\t<img\n\t\t\t\tclassName=\"fields__media-edit-thumbnail\"\n\t\t\t\talt={ attachment.alt_text || '' }\n\t\t\t\tsrc={ url }\n\t\t\t/>\n\t\t);\n\t} else if ( mimeType.startsWith( 'audio' ) ) {\n\t\treturn <Icon icon={ audio } />;\n\t} else if ( mimeType.startsWith( 'video' ) ) {\n\t\treturn <Icon icon={ video } />;\n\t} else if ( archiveMimeTypes.includes( mimeType ) ) {\n\t\treturn <Icon icon={ archive } />;\n\t}\n\treturn <Icon icon={ file } />;\n}\n\ntype MediaEditAttachment = Attachment< 'view' > | BlobItem;\ninterface MediaEditAttachmentsProps {\n\tallItems: Array< MediaEditAttachment > | null;\n\taddButtonLabel: string;\n\tmultiple?: boolean;\n\tremoveItem: ( itemId: number ) => void;\n\topen: () => void;\n\tonFilesDrop: ( files: File[], attachmentId?: number ) => void;\n\tisUploading: boolean;\n}\n\nfunction ExpandedMediaEditAttachments( {\n\tallItems,\n\taddButtonLabel,\n\tmultiple,\n\tremoveItem,\n\topen,\n\tonFilesDrop,\n\tisUploading,\n}: MediaEditAttachmentsProps ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'fields__media-edit-expanded', {\n\t\t\t\t'is-multiple': multiple,\n\t\t\t\t'is-single': ! multiple,\n\t\t\t\t'is-empty': ! allItems?.length,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ allItems?.map( ( attachment ) => {\n\t\t\t\tconst hasPreviewImage =\n\t\t\t\t\tattachment.mime_type?.startsWith( 'image' );\n\t\t\t\tconst isBlob = isBlobURL( attachment.source_url );\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ attachment.id }\n\t\t\t\t\t\tclassName={ clsx( 'fields__media-edit-expanded-item', {\n\t\t\t\t\t\t\t'has-preview-image': hasPreviewImage,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<MediaPickerButton\n\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\tlabel={ __( 'Replace' ) }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-preview\">\n\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-expanded-preview-stack\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ ( ! isBlob || hasPreviewImage ) && (\n\t\t\t\t\t\t\t\t\t\t<MediaPreview\n\t\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\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{ ! isBlob &&\n\t\t\t\t\t\t\t\t\t\t( ! hasPreviewImage ? (\n\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-overlay\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</MediaPickerButton>\n\t\t\t\t\t\t{ ! isBlob && (\n\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-overlay\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-expanded-remove\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Remove' ) }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tdisabled={ isUploading }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tremoveItem( attachment.id as number );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ ( multiple || ! allItems?.length ) && (\n\t\t\t\t<MediaEditPlaceholder\n\t\t\t\t\topen={ open }\n\t\t\t\t\tlabel={ addButtonLabel }\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction CompactMediaEditAttachments( {\n\tallItems,\n\taddButtonLabel,\n\tmultiple,\n\tremoveItem,\n\topen,\n\tonFilesDrop,\n\tisUploading,\n}: MediaEditAttachmentsProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ !! allItems?.length && (\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t{ allItems.map( ( attachment ) => {\n\t\t\t\t\t\tconst isBlob = isBlobURL( attachment.source_url );\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ attachment.id }\n\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-compact\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<MediaPickerButton\n\t\t\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Replace' ) }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\tisUploading={ isUploading }\n\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<MediaPreview\n\t\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{ ! isBlob && (\n\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\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</MediaPickerButton>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-remove\"\n\t\t\t\t\t\t\t\t\ttext={ __( 'Remove' ) }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tdisabled={ isUploading }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\ttypeof attachment.id === 'number'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tremoveItem( attachment.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/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t\t{ ( multiple || ! allItems?.length ) && (\n\t\t\t\t<MediaEditPlaceholder\n\t\t\t\t\topen={ open }\n\t\t\t\t\tlabel={ addButtonLabel }\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * A media edit control component that provides a media picker UI with upload functionality\n * for selecting WordPress media attachments. Supports both the traditional WordPress media\n * library and the experimental DataViews media modal.\n *\n * This component is intended to be used as the `Edit` property of a field definition when\n * registering fields with `registerEntityField` from `@wordpress/editor`.\n *\n * @template Item - The type of the item being edited.\n *\n * @param {MediaEditProps<Item>} props                       - The component props.\n * @param {Item}                 props.data                  - The item being edited.\n * @param {Object}               props.field                 - The field configuration with getValue and setValue methods.\n * @param {Function}             props.onChange              - Callback function when the media selection changes.\n * @param {string[]}             [props.allowedTypes]        - Array of allowed media types. Default `['image']`.\n * @param {boolean}              [props.multiple]            - Whether to allow multiple media selections. Default `false`.\n * @param {boolean}              [props.hideLabelFromVision] - Whether the label should be hidden from vision.\n * @param {boolean}              [props.isExpanded]          - Whether to render in an expanded form. Default `false`.\n *\n * @return {JSX.Element} The media edit control component.\n *\n * @example\n * ```tsx\n * import { MediaEdit } from '@wordpress/fields';\n * import type { DataFormControlProps } from '@wordpress/dataviews';\n *\n * const featuredImageField = {\n *   id: 'featured_media',\n *   type: 'media',\n *   label: 'Featured Image',\n *   Edit: (props: DataFormControlProps<MyPostType>) => (\n *     <MediaEdit\n *       {...props}\n *       allowedTypes={['image']}\n *     />\n *   ),\n * };\n * ```\n */\nexport default function MediaEdit< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tallowedTypes = [ 'image' ],\n\tmultiple,\n\tisExpanded,\n}: MediaEditProps< Item > ) {\n\tconst value = field.getValue( { item: data } );\n\tconst attachments = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! value ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst normalizedValue = Array.isArray( value ) ? value : [ value ];\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'postType', 'attachment', {\n\t\t\t\tinclude: normalizedValue,\n\t\t\t} ) as Attachment< 'view' >[] | null;\n\t\t},\n\t\t[ value ]\n\t);\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\t// Support one upload action at a time for now.\n\tconst [ replacementId, setReplacementId ] = useState< number >();\n\tconst [ blobs, setBlobs ] = useState< string[] >( [] );\n\tconst onChangeControl = useCallback(\n\t\t( newValue: number | number[] | undefined ) =>\n\t\t\tonChange( field.setValue( { item: data, value: newValue } ) ),\n\t\t[ data, field, onChange ]\n\t);\n\tconst removeItem = ( itemId: number ) => {\n\t\tconst currentIds = Array.isArray( value ) ? value : [ value ];\n\t\tconst newIds = currentIds.filter( ( id ) => id !== itemId );\n\t\tonChangeControl( newIds.length ? newIds : undefined );\n\t};\n\tconst onFilesDrop = useCallback(\n\t\t( files: File[], _replacementId?: number ) => {\n\t\t\tuploadMedia( {\n\t\t\t\tallowedTypes: allowedTypes?.length ? allowedTypes : undefined,\n\t\t\t\tfilesList: files,\n\t\t\t\tonFileChange( uploadedMedia: any[] ) {\n\t\t\t\t\tsetReplacementId( _replacementId );\n\t\t\t\t\tconst { blobItems, uploadedItems } = uploadedMedia.reduce(\n\t\t\t\t\t\t( accumulator, item ) => {\n\t\t\t\t\t\t\tif ( isBlobURL( item.url ) ) {\n\t\t\t\t\t\t\t\taccumulator.blobItems.push( item.url );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\taccumulator.uploadedItems.push( item.id );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn accumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tblobItems: [] as string[],\n\t\t\t\t\t\t\tuploadedItems: [] as number[],\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tsetBlobs( blobItems );\n\t\t\t\t\t// If all uploads are complete reset the replacementId.\n\t\t\t\t\tif ( uploadedItems.length === uploadedMedia.length ) {\n\t\t\t\t\t\tsetReplacementId( undefined );\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! uploadedItems.length ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! multiple ) {\n\t\t\t\t\t\tonChangeControl( uploadedItems[ 0 ] );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! value ) {\n\t\t\t\t\t\tonChangeControl( uploadedItems );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst normalizedValue = Array.isArray( value )\n\t\t\t\t\t\t? value\n\t\t\t\t\t\t: [ value ];\n\t\t\t\t\tconst newIds = [\n\t\t\t\t\t\t...( _replacementId\n\t\t\t\t\t\t\t? normalizedValue.filter(\n\t\t\t\t\t\t\t\t\t( id: any ) => id !== _replacementId\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: normalizedValue ),\n\t\t\t\t\t\t...uploadedItems,\n\t\t\t\t\t];\n\t\t\t\t\tonChangeControl( newIds );\n\t\t\t\t},\n\t\t\t\tonError( error: Error ) {\n\t\t\t\t\tsetReplacementId( undefined );\n\t\t\t\t\tsetBlobs( [] );\n\t\t\t\t\tcreateErrorNotice( error.message, { type: 'snackbar' } );\n\t\t\t\t},\n\t\t\t\tmultiple: !! multiple,\n\t\t\t} );\n\t\t},\n\t\t[ allowedTypes, value, multiple, createErrorNotice, onChangeControl ]\n\t);\n\tconst addButtonLabel =\n\t\tfield.placeholder ||\n\t\t( multiple ? __( 'Choose files' ) : __( 'Choose file' ) );\n\t// Merge real attachments with any existing blob items that are being uploaded.\n\tconst allItems: Array< MediaEditAttachment > | null = useMemo( () => {\n\t\tif ( ! blobs.length ) {\n\t\t\treturn attachments;\n\t\t}\n\t\tconst items: Array< MediaEditAttachment > = [\n\t\t\t...( attachments || [] ),\n\t\t];\n\t\tconst blobItems = blobs.map( ( url ) => ( {\n\t\t\tid: url,\n\t\t\tsource_url: url,\n\t\t\tmime_type: getBlobTypeByURL( url ),\n\t\t} ) );\n\t\tconst replacementIndex = items.findIndex(\n\t\t\t( a ) => a.id === replacementId\n\t\t);\n\t\t// Place blobs at the replacement index, when files\n\t\t// dropped in existing media item.\n\t\tif ( replacementIndex !== -1 ) {\n\t\t\treturn [\n\t\t\t\t...items.slice( 0, replacementIndex ),\n\t\t\t\t...blobItems,\n\t\t\t\t...items.slice( replacementIndex + 1 ),\n\t\t\t];\n\t\t}\n\t\titems.push( ...blobItems );\n\t\treturn items;\n\t}, [ attachments, replacementId, blobs ] );\n\treturn (\n\t\t<fieldset className=\"fields__media-edit\" data-field-id={ field.id }>\n\t\t\t<ConditionalMediaUpload\n\t\t\t\tonSelect={ ( selectedMedia: any ) => {\n\t\t\t\t\tif ( multiple ) {\n\t\t\t\t\t\tconst newIds = Array.isArray( selectedMedia )\n\t\t\t\t\t\t\t? selectedMedia.map( ( m: any ) => m.id )\n\t\t\t\t\t\t\t: [ selectedMedia.id ];\n\t\t\t\t\t\tonChangeControl( newIds );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonChangeControl( selectedMedia.id );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tvalue={ value }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\ttitle={ field.label }\n\t\t\t\trender={ ( { open }: any ) => {\n\t\t\t\t\tconst AttachmentsComponent = isExpanded\n\t\t\t\t\t\t? ExpandedMediaEditAttachments\n\t\t\t\t\t\t: CompactMediaEditAttachments;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t\t\t{ field.label &&\n\t\t\t\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t\t\t\t<VisuallyHidden as=\"legend\">\n\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t<AttachmentsComponent\n\t\t\t\t\t\t\t\tallItems={ allItems }\n\t\t\t\t\t\t\t\taddButtonLabel={ addButtonLabel }\n\t\t\t\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\t\t\t\tremoveItem={ removeItem }\n\t\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\t\tisUploading={ !! blobs.length }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t\t<Text variant=\"muted\">\n\t\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t</fieldset>\n\t);\n}\n"],
-  "mappings": "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",
-  "names": ["mediaUtilsPrivateApis", "Truncate", "clsx", "VStack", "coreStore", "noticesStore", "Text"]
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tDropZone,\n\tIcon,\n\tSpinner,\n\t__experimentalText as Text,\n\t__experimentalTruncate as Truncate,\n\t__experimentalVStack as VStack,\n\tBaseControl,\n\tTooltip,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';\nimport { store as coreStore, type Attachment } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tarchive,\n\taudio,\n\tvideo,\n\tfile,\n\tcloseSmall,\n\terror as errorIcon,\n} from '@wordpress/icons';\nimport {\n\tMediaUpload,\n\tuploadMedia,\n\tprivateApis as mediaUtilsPrivateApis,\n} from '@wordpress/media-utils';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport type { MediaEditProps } from '../../types';\n\nconst { MediaUploadModal } = unlock( mediaUtilsPrivateApis );\n\ntype BlobItem = {\n\tid: string;\n\tsource_url: string;\n\tmime_type: string | undefined;\n\talt_text?: string;\n};\n\n/**\n * Conditional Media component that uses MediaUploadModal when experiment is enabled,\n * otherwise falls back to media-utils MediaUpload.\n *\n * @param root0          Component props.\n * @param root0.render   Render prop function that receives { open } object.\n * @param root0.multiple Whether to allow multiple media selections.\n * @return The component.\n */\nfunction ConditionalMediaUpload( { render, multiple, ...props }: any ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tif ( ( window as any ).__experimentalDataViewsMediaModal ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ render && render( { open: () => setIsModalOpen( true ) } ) }\n\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t<MediaUploadModal\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\t\tisOpen={ isModalOpen }\n\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\t\tprops.onClose?.();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonSelect={ ( media: any ) => {\n\t\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\t\tprops.onSelect?.( media );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\t// Fallback to media-utils MediaUpload when experiment is disabled.\n\treturn (\n\t\t<MediaUpload\n\t\t\t{ ...props }\n\t\t\trender={ render }\n\t\t\tmultiple={ multiple ? 'add' : undefined }\n\t\t/>\n\t);\n}\n\nfunction MediaPickerButton( {\n\topen,\n\tchildren,\n\tlabel,\n\tshowTooltip = false,\n\tonFilesDrop,\n\tattachment,\n\tisUploading = false,\n}: {\n\topen: () => void;\n\tchildren: React.ReactNode;\n\tlabel: string;\n\tshowTooltip?: boolean;\n\tonFilesDrop: MediaEditAttachmentsProps[ 'onFilesDrop' ];\n\tattachment?: MediaEditAttachment;\n\tisUploading?: boolean;\n} ) {\n\tconst isBlob = attachment && isBlobURL( attachment.source_url );\n\tconst mediaPickerButton = (\n\t\t<div\n\t\t\tclassName=\"fields__media-edit-picker-button\"\n\t\t\trole=\"button\"\n\t\t\ttabIndex={ 0 }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( ! isUploading ) {\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( isUploading ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( event.key === 'Enter' || event.key === ' ' ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={ label }\n\t\t\taria-disabled={ isUploading }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ isBlob && (\n\t\t\t\t<span className=\"fields__media-edit-picker-button-spinner\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</span>\n\t\t\t) }\n\t\t\t{ ! isUploading && (\n\t\t\t\t<DropZone\n\t\t\t\t\tonFilesDrop={ ( files ) =>\n\t\t\t\t\t\tonFilesDrop( files, attachment?.id as number )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n\tif ( ! showTooltip ) {\n\t\treturn mediaPickerButton;\n\t}\n\treturn <Tooltip text={ label }>{ mediaPickerButton }</Tooltip>;\n}\n\nconst archiveMimeTypes = [\n\t'application/zip',\n\t'application/x-zip-compressed',\n\t'application/x-rar-compressed',\n\t'application/x-7z-compressed',\n\t'application/x-tar',\n\t'application/x-gzip',\n];\n\nfunction MediaTitle( { attachment }: { attachment: Attachment< 'view' > } ) {\n\treturn (\n\t\t<Truncate className=\"fields__media-edit-filename\">\n\t\t\t{ attachment.title.rendered }\n\t\t</Truncate>\n\t);\n}\n\nfunction MediaEditPlaceholder( props: {\n\topen: () => void;\n\tlabel: string;\n\tonFilesDrop: MediaEditAttachmentsProps[ 'onFilesDrop' ];\n\tisUploading: boolean;\n} ) {\n\treturn (\n\t\t<MediaPickerButton { ...props }>\n\t\t\t<span className=\"fields__media-edit-placeholder\">\n\t\t\t\t{ props.label }\n\t\t\t</span>\n\t\t</MediaPickerButton>\n\t);\n}\n\nfunction MediaPreview( { attachment }: { attachment: MediaEditAttachment } ) {\n\tconst url = attachment.source_url;\n\tconst mimeType = attachment.mime_type || '';\n\tif ( mimeType.startsWith( 'image' ) ) {\n\t\treturn (\n\t\t\t<img\n\t\t\t\tclassName=\"fields__media-edit-thumbnail\"\n\t\t\t\talt={ attachment.alt_text || '' }\n\t\t\t\tsrc={ url }\n\t\t\t/>\n\t\t);\n\t} else if ( mimeType.startsWith( 'audio' ) ) {\n\t\treturn <Icon icon={ audio } />;\n\t} else if ( mimeType.startsWith( 'video' ) ) {\n\t\treturn <Icon icon={ video } />;\n\t} else if ( archiveMimeTypes.includes( mimeType ) ) {\n\t\treturn <Icon icon={ archive } />;\n\t}\n\treturn <Icon icon={ file } />;\n}\n\ntype MediaEditAttachment = Attachment< 'view' > | BlobItem;\ninterface MediaEditAttachmentsProps {\n\tallItems: Array< MediaEditAttachment > | null;\n\taddButtonLabel: string;\n\tmultiple?: boolean;\n\tremoveItem: ( itemId: number ) => void;\n\topen: () => void;\n\tonFilesDrop: ( files: File[], attachmentId?: number ) => void;\n\tisUploading: boolean;\n}\n\nfunction ExpandedMediaEditAttachments( {\n\tallItems,\n\taddButtonLabel,\n\tmultiple,\n\tremoveItem,\n\topen,\n\tonFilesDrop,\n\tisUploading,\n}: MediaEditAttachmentsProps ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'fields__media-edit-expanded', {\n\t\t\t\t'is-multiple': multiple,\n\t\t\t\t'is-single': ! multiple,\n\t\t\t\t'is-empty': ! allItems?.length,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ allItems?.map( ( attachment ) => {\n\t\t\t\tconst hasPreviewImage =\n\t\t\t\t\tattachment.mime_type?.startsWith( 'image' );\n\t\t\t\tconst isBlob = isBlobURL( attachment.source_url );\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ attachment.id }\n\t\t\t\t\t\tclassName={ clsx( 'fields__media-edit-expanded-item', {\n\t\t\t\t\t\t\t'has-preview-image': hasPreviewImage,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<MediaPickerButton\n\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\tlabel={ __( 'Replace' ) }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-preview\">\n\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-expanded-preview-stack\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ ( ! isBlob || hasPreviewImage ) && (\n\t\t\t\t\t\t\t\t\t\t<MediaPreview\n\t\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\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{ ! isBlob &&\n\t\t\t\t\t\t\t\t\t\t( ! hasPreviewImage ? (\n\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-overlay\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</MediaPickerButton>\n\t\t\t\t\t\t{ ! isBlob && (\n\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-overlay\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-expanded-remove\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Remove' ) }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tdisabled={ isUploading }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tremoveItem( attachment.id as number );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ ( multiple || ! allItems?.length ) && (\n\t\t\t\t<MediaEditPlaceholder\n\t\t\t\t\topen={ open }\n\t\t\t\t\tlabel={ addButtonLabel }\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction CompactMediaEditAttachments( {\n\tallItems,\n\taddButtonLabel,\n\tmultiple,\n\tremoveItem,\n\topen,\n\tonFilesDrop,\n\tisUploading,\n}: MediaEditAttachmentsProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ !! allItems?.length && (\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t{ allItems.map( ( attachment ) => {\n\t\t\t\t\t\tconst isBlob = isBlobURL( attachment.source_url );\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ attachment.id }\n\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-compact\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<MediaPickerButton\n\t\t\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Replace' ) }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\tisUploading={ isUploading }\n\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<MediaPreview\n\t\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{ ! isBlob && (\n\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\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</MediaPickerButton>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-remove\"\n\t\t\t\t\t\t\t\t\ttext={ __( 'Remove' ) }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tdisabled={ isUploading }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\ttypeof attachment.id === 'number'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tremoveItem( attachment.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/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t\t{ ( multiple || ! allItems?.length ) && (\n\t\t\t\t<MediaEditPlaceholder\n\t\t\t\t\topen={ open }\n\t\t\t\t\tlabel={ addButtonLabel }\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * A media edit control component that provides a media picker UI with upload functionality\n * for selecting WordPress media attachments. Supports both the traditional WordPress media\n * library and the experimental DataViews media modal.\n *\n * This component is intended to be used as the `Edit` property of a field definition when\n * registering fields with `registerEntityField` from `@wordpress/editor`.\n *\n * @template Item - The type of the item being edited.\n *\n * @param {MediaEditProps<Item>} props                       - The component props.\n * @param {Item}                 props.data                  - The item being edited.\n * @param {Object}               props.field                 - The field configuration with getValue and setValue methods.\n * @param {Function}             props.onChange              - Callback function when the media selection changes.\n * @param {string[]}             [props.allowedTypes]        - Array of allowed media types. Default `['image']`.\n * @param {boolean}              [props.multiple]            - Whether to allow multiple media selections. Default `false`.\n * @param {boolean}              [props.hideLabelFromVision] - Whether the label should be hidden from vision.\n * @param {boolean}              [props.isExpanded]          - Whether to render in an expanded form. Default `false`.\n *\n * @return {JSX.Element} The media edit control component.\n *\n * @example\n * ```tsx\n * import { MediaEdit } from '@wordpress/fields';\n * import type { DataFormControlProps } from '@wordpress/dataviews';\n *\n * const featuredImageField = {\n *   id: 'featured_media',\n *   type: 'media',\n *   label: 'Featured Image',\n *   Edit: (props: DataFormControlProps<MyPostType>) => (\n *     <MediaEdit\n *       {...props}\n *       allowedTypes={['image']}\n *     />\n *   ),\n * };\n * ```\n */\nexport default function MediaEdit< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tallowedTypes = [ 'image' ],\n\tmultiple,\n\tisExpanded,\n\tvalidity,\n}: MediaEditProps< Item > ) {\n\tconst value = field.getValue( { item: data } );\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst [ customValidity, setCustomValidity ] = useState<\n\t\t| { type: 'valid' | 'validating' | 'invalid'; message?: string }\n\t\t| undefined\n\t>( undefined );\n\t// Listen for invalid event (e.g., form submission, reportValidity())\n\t// to show validation messages even before blur.\n\tuseEffect( () => {\n\t\tconst validityTarget = validityTargetRef.current;\n\t\tconst handler = () => {\n\t\t\tsetIsTouched( true );\n\t\t};\n\t\tvalidityTarget?.addEventListener( 'invalid', handler );\n\t\treturn () => validityTarget?.removeEventListener( 'invalid', handler );\n\t}, [] );\n\tconst attachments = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! value ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst normalizedValue = Array.isArray( value ) ? value : [ value ];\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'postType', 'attachment', {\n\t\t\t\tinclude: normalizedValue,\n\t\t\t} ) as Attachment< 'view' >[] | null;\n\t\t},\n\t\t[ value ]\n\t);\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\t// Support one upload action at a time for now.\n\tconst [ replacementId, setReplacementId ] = useState< number >();\n\tconst [ blobs, setBlobs ] = useState< string[] >( [] );\n\tconst onChangeControl = useCallback(\n\t\t( newValue: number | number[] | undefined ) =>\n\t\t\tonChange( field.setValue( { item: data, value: newValue } ) ),\n\t\t[ data, field, onChange ]\n\t);\n\tconst removeItem = useCallback(\n\t\t( itemId: number ) => {\n\t\t\tconst currentIds = Array.isArray( value ) ? value : [ value ];\n\t\t\tconst newIds = currentIds.filter( ( id ) => id !== itemId );\n\t\t\t// Mark as touched to immediately show any validation error.\n\t\t\tsetIsTouched( true );\n\t\t\tonChangeControl( newIds.length ? newIds : undefined );\n\t\t},\n\t\t[ value, onChangeControl ]\n\t);\n\tconst onFilesDrop = useCallback(\n\t\t( files: File[], _replacementId?: number ) => {\n\t\t\tuploadMedia( {\n\t\t\t\tallowedTypes: allowedTypes?.length ? allowedTypes : undefined,\n\t\t\t\tfilesList: files,\n\t\t\t\tonFileChange( uploadedMedia: any[] ) {\n\t\t\t\t\tsetReplacementId( _replacementId );\n\t\t\t\t\tconst { blobItems, uploadedItems } = uploadedMedia.reduce(\n\t\t\t\t\t\t( accumulator, item ) => {\n\t\t\t\t\t\t\tif ( isBlobURL( item.url ) ) {\n\t\t\t\t\t\t\t\taccumulator.blobItems.push( item.url );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\taccumulator.uploadedItems.push( item.id );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn accumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tblobItems: [] as string[],\n\t\t\t\t\t\t\tuploadedItems: [] as number[],\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tsetBlobs( blobItems );\n\t\t\t\t\t// If all uploads are complete reset the replacementId.\n\t\t\t\t\tif ( uploadedItems.length === uploadedMedia.length ) {\n\t\t\t\t\t\tsetReplacementId( undefined );\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! uploadedItems.length ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! multiple ) {\n\t\t\t\t\t\tonChangeControl( uploadedItems[ 0 ] );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! value ) {\n\t\t\t\t\t\tonChangeControl( uploadedItems );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst normalizedValue = Array.isArray( value )\n\t\t\t\t\t\t? value\n\t\t\t\t\t\t: [ value ];\n\t\t\t\t\tconst newIds = [\n\t\t\t\t\t\t...( _replacementId\n\t\t\t\t\t\t\t? normalizedValue.filter(\n\t\t\t\t\t\t\t\t\t( id: any ) => id !== _replacementId\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: normalizedValue ),\n\t\t\t\t\t\t...uploadedItems,\n\t\t\t\t\t];\n\t\t\t\t\tonChangeControl( newIds );\n\t\t\t\t},\n\t\t\t\tonError( error: Error ) {\n\t\t\t\t\tsetReplacementId( undefined );\n\t\t\t\t\tsetBlobs( [] );\n\t\t\t\t\tcreateErrorNotice( error.message, { type: 'snackbar' } );\n\t\t\t\t},\n\t\t\t\tmultiple: !! multiple,\n\t\t\t} );\n\t\t},\n\t\t[ allowedTypes, value, multiple, createErrorNotice, onChangeControl ]\n\t);\n\tconst addButtonLabel =\n\t\tfield.placeholder ||\n\t\t( multiple ? __( 'Choose files' ) : __( 'Choose file' ) );\n\t// Merge real attachments with any existing blob items that are being uploaded.\n\tconst allItems: Array< MediaEditAttachment > | null = useMemo( () => {\n\t\tif ( ! blobs.length ) {\n\t\t\treturn attachments;\n\t\t}\n\t\tconst items: Array< MediaEditAttachment > = [\n\t\t\t...( attachments || [] ),\n\t\t];\n\t\tconst blobItems = blobs.map( ( url ) => ( {\n\t\t\tid: url,\n\t\t\tsource_url: url,\n\t\t\tmime_type: getBlobTypeByURL( url ),\n\t\t} ) );\n\t\tconst replacementIndex = items.findIndex(\n\t\t\t( a ) => a.id === replacementId\n\t\t);\n\t\t// Place blobs at the replacement index, when files\n\t\t// dropped in existing media item.\n\t\tif ( replacementIndex !== -1 ) {\n\t\t\treturn [\n\t\t\t\t...items.slice( 0, replacementIndex ),\n\t\t\t\t...blobItems,\n\t\t\t\t...items.slice( replacementIndex + 1 ),\n\t\t\t];\n\t\t}\n\t\titems.push( ...blobItems );\n\t\treturn items;\n\t}, [ attachments, replacementId, blobs ] );\n\tuseEffect( () => {\n\t\tif ( ! isTouched ) {\n\t\t\treturn;\n\t\t}\n\t\tconst input = validityTargetRef.current;\n\t\tif ( ! input ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( validity ) {\n\t\t\tconst customValidityResult = validity?.custom;\n\t\t\tsetCustomValidity( customValidityResult );\n\n\t\t\t// Set custom validity on hidden input for HTML5 form validation.\n\t\t\tif ( customValidityResult?.type === 'invalid' ) {\n\t\t\t\tinput.setCustomValidity(\n\t\t\t\t\tcustomValidityResult.message || __( 'Invalid' )\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tinput.setCustomValidity( '' ); // Clear validity\n\t\t\t}\n\t\t} else {\n\t\t\t// Clear any previous validation.\n\t\t\tinput.setCustomValidity( '' );\n\t\t\tsetCustomValidity( undefined );\n\t\t}\n\t}, [ isTouched, field.isValid, validity ] );\n\tconst onBlur = useCallback(\n\t\t( event: React.FocusEvent< HTMLElement > ) => {\n\t\t\tif ( isTouched ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (\n\t\t\t\t! event.relatedTarget ||\n\t\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t\t) {\n\t\t\t\tsetIsTouched( true );\n\t\t\t}\n\t\t},\n\t\t[ isTouched ]\n\t);\n\treturn (\n\t\t<div onBlur={ onBlur }>\n\t\t\t<fieldset className=\"fields__media-edit\" data-field-id={ field.id }>\n\t\t\t\t<ConditionalMediaUpload\n\t\t\t\t\tonSelect={ ( selectedMedia: any ) => {\n\t\t\t\t\t\tif ( multiple ) {\n\t\t\t\t\t\t\tconst newIds = Array.isArray( selectedMedia )\n\t\t\t\t\t\t\t\t? selectedMedia.map( ( m: any ) => m.id )\n\t\t\t\t\t\t\t\t: [ selectedMedia.id ];\n\t\t\t\t\t\t\tonChangeControl( newIds );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChangeControl( selectedMedia.id );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\ttitle={ field.label }\n\t\t\t\t\trender={ ( { open }: any ) => {\n\t\t\t\t\t\tconst AttachmentsComponent = isExpanded\n\t\t\t\t\t\t\t? ExpandedMediaEditAttachments\n\t\t\t\t\t\t\t: CompactMediaEditAttachments;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t\t\t\t{ field.label &&\n\t\t\t\t\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t\t\t\t\t<VisuallyHidden as=\"legend\">\n\t\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t<AttachmentsComponent\n\t\t\t\t\t\t\t\t\tallItems={ allItems }\n\t\t\t\t\t\t\t\t\taddButtonLabel={ addButtonLabel }\n\t\t\t\t\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\t\t\t\t\tremoveItem={ removeItem }\n\t\t\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\t\t\tisUploading={ !! blobs.length }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t\t\t<Text variant=\"muted\">\n\t\t\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</fieldset>\n\t\t\t{ /* Visually hidden text input for validation. */ }\n\t\t\t<VisuallyHidden>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tref={ validityTargetRef }\n\t\t\t\t\tvalue={ value ?? '' }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t/>\n\t\t\t</VisuallyHidden>\n\t\t\t{ customValidity && (\n\t\t\t\t<div aria-live=\"polite\">\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'components-validated-control__indicator',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-invalid': customValidity.type === 'invalid',\n\t\t\t\t\t\t\t\t'is-valid': customValidity.type === 'valid',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-validated-control__indicator-icon\"\n\t\t\t\t\t\t\ticon={ errorIcon }\n\t\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ customValidity.message }\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["mediaUtilsPrivateApis", "Truncate", "clsx", "VStack", "coreStore", "noticesStore", "Text", "errorIcon"]
 }

package/build/types.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/types.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { DataFormControlProps } from '@wordpress/dataviews';\n\ntype PostStatus =\n\t| 'publish'\n\t| 'draft'\n\t| 'pending'\n\t| 'private'\n\t| 'future'\n\t| 'auto-draft'\n\t| 'trash';\n\nexport interface CommonPost {\n\tstatus?: PostStatus;\n\ttitle: string | { rendered: string } | { raw: string };\n\tcontent: string | { raw: string; rendered: string };\n\ttype: string;\n\tid: string | number;\n\tblocks?: Object[];\n\t_links?: Links;\n}\n\ninterface Links {\n\t'predecessor-version'?: { href: string; id: number }[];\n\t'version-history'?: { href: string; count: number }[];\n\t[ key: string ]: { href: string }[] | undefined;\n}\n\ninterface Author {\n\tid: number;\n\tname: string;\n\tavatar_urls: Record< string, string >;\n}\n\ninterface EmbeddedAuthor {\n\tauthor: Author[];\n}\n\n/**\n * BasePost interface used for all post types.\n */\nexport interface BasePost extends CommonPost {\n\tcomment_status?: 'open' | 'closed';\n\texcerpt?: string | { raw: string; rendered: string };\n\tmeta?: Record< string, any >;\n\tparent?: number;\n\tpassword?: string;\n\ttemplate?: string;\n\tformat?: string;\n\tfeatured_media?: number;\n\tmenu_order?: number;\n\tping_status?: 'open' | 'closed';\n\tlink?: string;\n\tslug?: string;\n\tpermalink_template?: string;\n\tdate?: string;\n\tmodified?: string;\n\tauthor?: number;\n}\n\nexport interface BasePostWithEmbeddedAuthor extends BasePost {\n\t_embedded: EmbeddedAuthor;\n}\n\ninterface FeaturedMedia {\n\ttitle: {\n\t\trendered: string;\n\t};\n\tsource_url: string;\n\tmedia_details: {\n\t\tsizes: Record< string, { width: number; source_url: string } >;\n\t};\n}\n\ninterface EmbeddedFeaturedMedia {\n\t'wp:featuredmedia': FeaturedMedia[];\n}\n\nexport interface BasePostWithEmbeddedFeaturedMedia extends BasePost {\n\t_embedded: EmbeddedFeaturedMedia;\n}\n\nexport interface Template extends CommonPost {\n\ttype: 'wp_template';\n\tis_custom: boolean;\n\tsource: string;\n\torigin: string;\n\tplugin?: string;\n\thas_theme_file: boolean;\n\tid: string;\n}\n\nexport interface TemplatePart extends CommonPost {\n\ttype: 'wp_template_part';\n\tsource: string;\n\torigin: string;\n\thas_theme_file: boolean;\n\tid: string;\n\tarea: string;\n\tplugin?: string;\n}\n\nexport interface Pattern extends CommonPost {\n\tslug: string;\n\ttitle: { raw: string };\n\twp_pattern_sync_status: string;\n}\n\nexport type Post = Template | TemplatePart | Pattern | BasePost;\n\nexport type PostWithPermissions = Post & {\n\tpermissions: {\n\t\tdelete: boolean;\n\t\tupdate: boolean;\n\t};\n};\n\ninterface EditorSupport {\n\tnotes?: boolean;\n}\n\nexport interface PostType {\n\tslug: string;\n\tviewable: boolean;\n\tsupports?: {\n\t\t'page-attributes'?: boolean;\n\t\ttitle?: boolean;\n\t\trevisions?: boolean;\n\t\tauthor?: string;\n\t\tthumbnail?: string;\n\t\tcomments?: string;\n\t\teditor?: boolean | [ EditorSupport ];\n\t\ttrackbacks?: boolean;\n\t};\n}\n\n// Will be unnecessary after typescript 5.0 upgrade.\nexport type CoreDataError = { message?: string; code?: string };\n\nexport interface MediaEditProps< Item >\n\textends Pick<\n\t\tDataFormControlProps< Item >,\n\t\t'data' | 'field' | 'onChange' | 'hideLabelFromVision'\n\t> {\n\t/**\n\t * Array of allowed media types (e.g., ['image', 'video']).\n\t *\n\t * @default ['image']\n\t */\n\tallowedTypes?: string[];\n\t/**\n\t * Whether to allow multiple media selections.\n\t *\n\t * @default false\n\t */\n\tmultiple?: boolean;\n\t/**\n\t * Whether to render in an expanded form.\n\t *\n\t * @default false\n\t */\n\tisExpanded?: boolean;\n}\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { DataFormControlProps } from '@wordpress/dataviews';\n\ntype PostStatus =\n\t| 'publish'\n\t| 'draft'\n\t| 'pending'\n\t| 'private'\n\t| 'future'\n\t| 'auto-draft'\n\t| 'trash';\n\nexport interface CommonPost {\n\tstatus?: PostStatus;\n\ttitle: string | { rendered: string } | { raw: string };\n\tcontent: string | { raw: string; rendered: string };\n\ttype: string;\n\tid: string | number;\n\tblocks?: Object[];\n\t_links?: Links;\n}\n\ninterface Links {\n\t'predecessor-version'?: { href: string; id: number }[];\n\t'version-history'?: { href: string; count: number }[];\n\t[ key: string ]: { href: string }[] | undefined;\n}\n\ninterface Author {\n\tid: number;\n\tname: string;\n\tavatar_urls: Record< string, string >;\n}\n\ninterface EmbeddedAuthor {\n\tauthor: Author[];\n}\n\n/**\n * BasePost interface used for all post types.\n */\nexport interface BasePost extends CommonPost {\n\tcomment_status?: 'open' | 'closed';\n\texcerpt?: string | { raw: string; rendered: string };\n\tmeta?: Record< string, any >;\n\tparent?: number;\n\tpassword?: string;\n\ttemplate?: string;\n\tformat?: string;\n\tfeatured_media?: number;\n\tmenu_order?: number;\n\tping_status?: 'open' | 'closed';\n\tlink?: string;\n\tslug?: string;\n\tpermalink_template?: string;\n\tdate?: string;\n\tmodified?: string;\n\tauthor?: number;\n}\n\nexport interface BasePostWithEmbeddedAuthor extends BasePost {\n\t_embedded: EmbeddedAuthor;\n}\n\ninterface FeaturedMedia {\n\ttitle: {\n\t\trendered: string;\n\t};\n\tsource_url: string;\n\tmedia_details: {\n\t\tsizes: Record< string, { width: number; source_url: string } >;\n\t};\n}\n\ninterface EmbeddedFeaturedMedia {\n\t'wp:featuredmedia': FeaturedMedia[];\n}\n\nexport interface BasePostWithEmbeddedFeaturedMedia extends BasePost {\n\t_embedded: EmbeddedFeaturedMedia;\n}\n\nexport interface Template extends CommonPost {\n\ttype: 'wp_template';\n\tis_custom: boolean;\n\tsource: string;\n\torigin: string;\n\tplugin?: string;\n\thas_theme_file: boolean;\n\tid: string;\n}\n\nexport interface TemplatePart extends CommonPost {\n\ttype: 'wp_template_part';\n\tsource: string;\n\torigin: string;\n\thas_theme_file: boolean;\n\tid: string;\n\tarea: string;\n\tplugin?: string;\n}\n\nexport interface Pattern extends CommonPost {\n\tslug: string;\n\ttitle: { raw: string };\n\twp_pattern_sync_status: string;\n}\n\nexport type Post = Template | TemplatePart | Pattern | BasePost;\n\nexport type PostWithPermissions = Post & {\n\tpermissions: {\n\t\tdelete: boolean;\n\t\tupdate: boolean;\n\t};\n};\n\ninterface EditorSupport {\n\tnotes?: boolean;\n}\n\nexport interface PostType {\n\tslug: string;\n\tviewable: boolean;\n\tsupports?: {\n\t\t'page-attributes'?: boolean;\n\t\ttitle?: boolean;\n\t\trevisions?: boolean;\n\t\tauthor?: string;\n\t\tthumbnail?: string;\n\t\tcomments?: string;\n\t\teditor?: boolean | [ EditorSupport ];\n\t\ttrackbacks?: boolean;\n\t};\n}\n\n// Will be unnecessary after typescript 5.0 upgrade.\nexport type CoreDataError = { message?: string; code?: string };\n\nexport interface MediaEditProps< Item >\n\textends Pick<\n\t\tDataFormControlProps< Item >,\n\t\t'data' | 'field' | 'onChange' | 'hideLabelFromVision' | 'validity'\n\t> {\n\t/**\n\t * Array of allowed media types (e.g., ['image', 'video']).\n\t *\n\t * @default ['image']\n\t */\n\tallowedTypes?: string[];\n\t/**\n\t * Whether to allow multiple media selections.\n\t *\n\t * @default false\n\t */\n\tmultiple?: boolean;\n\t/**\n\t * Whether to render in an expanded form.\n\t *\n\t * @default false\n\t */\n\tisExpanded?: boolean;\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/build-module/components/media-edit/index.mjs

@@ -15,9 +15,22 @@ import {
 import { isBlobURL, getBlobTypeByURL } from "@wordpress/blob";
 import { store as coreStore } from "@wordpress/core-data";
 import { useSelect, useDispatch } from "@wordpress/data";
-import { useCallback, useMemo, useState } from "@wordpress/element";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
-import { archive, audio, video, file, closeSmall } from "@wordpress/icons";
+import {
+  archive,
+  audio,
+  video,
+  file,
+  closeSmall,
+  error as errorIcon
+} from "@wordpress/icons";
 import {
   MediaUpload,
   uploadMedia,
@@ -326,9 +339,21 @@ function MediaEdit({
   hideLabelFromVision,
   allowedTypes = ["image"],
   multiple,
-  isExpanded
+  isExpanded,
+  validity
 }) {
   const value = field.getValue({ item: data });
+  const [isTouched, setIsTouched] = useState(false);
+  const validityTargetRef = useRef(null);
+  const [customValidity, setCustomValidity] = useState(void 0);
+  useEffect(() => {
+    const validityTarget = validityTargetRef.current;
+    const handler = () => {
+      setIsTouched(true);
+    };
+    validityTarget?.addEventListener("invalid", handler);
+    return () => validityTarget?.removeEventListener("invalid", handler);
+  }, []);
   const attachments = useSelect(
     (select) => {
       if (!value) {
@@ -349,11 +374,15 @@ function MediaEdit({
     (newValue) => onChange(field.setValue({ item: data, value: newValue })),
     [data, field, onChange]
   );
-  const removeItem = (itemId) => {
-    const currentIds = Array.isArray(value) ? value : [value];
-    const newIds = currentIds.filter((id) => id !== itemId);
-    onChangeControl(newIds.length ? newIds : void 0);
-  };
+  const removeItem = useCallback(
+    (itemId) => {
+      const currentIds = Array.isArray(value) ? value : [value];
+      const newIds = currentIds.filter((id) => id !== itemId);
+      setIsTouched(true);
+      onChangeControl(newIds.length ? newIds : void 0);
+    },
+    [value, onChangeControl]
+  );
   const onFilesDrop = useCallback(
     (files, _replacementId) => {
       uploadMedia({
@@ -435,42 +464,114 @@ function MediaEdit({
     items.push(...blobItems);
     return items;
   }, [attachments, replacementId, blobs]);
-  return /* @__PURE__ */ jsx("fieldset", { className: "fields__media-edit", "data-field-id": field.id, children: /* @__PURE__ */ jsx(
-    ConditionalMediaUpload,
-    {
-      onSelect: (selectedMedia) => {
-        if (multiple) {
-          const newIds = Array.isArray(selectedMedia) ? selectedMedia.map((m) => m.id) : [selectedMedia.id];
-          onChangeControl(newIds);
-        } else {
-          onChangeControl(selectedMedia.id);
+  useEffect(() => {
+    if (!isTouched) {
+      return;
+    }
+    const input = validityTargetRef.current;
+    if (!input) {
+      return;
+    }
+    if (validity) {
+      const customValidityResult = validity?.custom;
+      setCustomValidity(customValidityResult);
+      if (customValidityResult?.type === "invalid") {
+        input.setCustomValidity(
+          customValidityResult.message || __("Invalid")
+        );
+      } else {
+        input.setCustomValidity("");
+      }
+    } else {
+      input.setCustomValidity("");
+      setCustomValidity(void 0);
+    }
+  }, [isTouched, field.isValid, validity]);
+  const onBlur = useCallback(
+    (event) => {
+      if (isTouched) {
+        return;
+      }
+      if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
+        setIsTouched(true);
+      }
+    },
+    [isTouched]
+  );
+  return /* @__PURE__ */ jsxs("div", { onBlur, children: [
+    /* @__PURE__ */ jsx("fieldset", { className: "fields__media-edit", "data-field-id": field.id, children: /* @__PURE__ */ jsx(
+      ConditionalMediaUpload,
+      {
+        onSelect: (selectedMedia) => {
+          if (multiple) {
+            const newIds = Array.isArray(selectedMedia) ? selectedMedia.map((m) => m.id) : [selectedMedia.id];
+            onChangeControl(newIds);
+          } else {
+            onChangeControl(selectedMedia.id);
+          }
+        },
+        allowedTypes,
+        value,
+        multiple,
+        title: field.label,
+        render: ({ open }) => {
+          const AttachmentsComponent = isExpanded ? ExpandedMediaEditAttachments : CompactMediaEditAttachments;
+          return /* @__PURE__ */ jsxs(VStack, { spacing: 2, children: [
+            field.label && (hideLabelFromVision ? /* @__PURE__ */ jsx(VisuallyHidden, { as: "legend", children: field.label }) : /* @__PURE__ */ jsx(BaseControl.VisualLabel, { as: "legend", children: field.label })),
+            /* @__PURE__ */ jsx(
+              AttachmentsComponent,
+              {
+                allItems,
+                addButtonLabel,
+                multiple,
+                removeItem,
+                open,
+                onFilesDrop,
+                isUploading: !!blobs.length
+              }
+            ),
+            field.description && /* @__PURE__ */ jsx(Text, { variant: "muted", children: field.description })
+          ] });
         }
-      },
-      allowedTypes,
-      value,
-      multiple,
-      title: field.label,
-      render: ({ open }) => {
-        const AttachmentsComponent = isExpanded ? ExpandedMediaEditAttachments : CompactMediaEditAttachments;
-        return /* @__PURE__ */ jsxs(VStack, { spacing: 2, children: [
-          field.label && (hideLabelFromVision ? /* @__PURE__ */ jsx(VisuallyHidden, { as: "legend", children: field.label }) : /* @__PURE__ */ jsx(BaseControl.VisualLabel, { as: "legend", children: field.label })),
+      }
+    ) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        ref: validityTargetRef,
+        value: value ?? "",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        onChange: () => {
+        }
+      }
+    ) }),
+    customValidity && /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: clsx(
+          "components-validated-control__indicator",
+          {
+            "is-invalid": customValidity.type === "invalid",
+            "is-valid": customValidity.type === "valid"
+          }
+        ),
+        children: [
           /* @__PURE__ */ jsx(
-            AttachmentsComponent,
+            Icon,
             {
-              allItems,
-              addButtonLabel,
-              multiple,
-              removeItem,
-              open,
-              onFilesDrop,
-              isUploading: !!blobs.length
+              className: "components-validated-control__indicator-icon",
+              icon: errorIcon,
+              size: 16,
+              fill: "currentColor"
             }
           ),
-          field.description && /* @__PURE__ */ jsx(Text, { variant: "muted", children: field.description })
-        ] });
+          customValidity.message
+        ]
       }
-    }
-  ) });
+    ) })
+  ] });
 }
 export {
   MediaEdit as default

package/build-module/components/media-edit/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/media-edit/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tDropZone,\n\tIcon,\n\tSpinner,\n\t__experimentalText as Text,\n\t__experimentalTruncate as Truncate,\n\t__experimentalVStack as VStack,\n\tBaseControl,\n\tTooltip,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';\nimport { store as coreStore, type Attachment } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { archive, audio, video, file, closeSmall } from '@wordpress/icons';\nimport {\n\tMediaUpload,\n\tuploadMedia,\n\tprivateApis as mediaUtilsPrivateApis,\n} from '@wordpress/media-utils';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport type { MediaEditProps } from '../../types';\n\nconst { MediaUploadModal } = unlock( mediaUtilsPrivateApis );\n\ntype BlobItem = {\n\tid: string;\n\tsource_url: string;\n\tmime_type: string | undefined;\n\talt_text?: string;\n};\n\n/**\n * Conditional Media component that uses MediaUploadModal when experiment is enabled,\n * otherwise falls back to media-utils MediaUpload.\n *\n * @param root0          Component props.\n * @param root0.render   Render prop function that receives { open } object.\n * @param root0.multiple Whether to allow multiple media selections.\n * @return The component.\n */\nfunction ConditionalMediaUpload( { render, multiple, ...props }: any ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tif ( ( window as any ).__experimentalDataViewsMediaModal ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ render && render( { open: () => setIsModalOpen( true ) } ) }\n\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t<MediaUploadModal\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\t\tisOpen={ isModalOpen }\n\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\t\tprops.onClose?.();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonSelect={ ( media: any ) => {\n\t\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\t\tprops.onSelect?.( media );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\t// Fallback to media-utils MediaUpload when experiment is disabled.\n\treturn (\n\t\t<MediaUpload\n\t\t\t{ ...props }\n\t\t\trender={ render }\n\t\t\tmultiple={ multiple ? 'add' : undefined }\n\t\t/>\n\t);\n}\n\nfunction MediaPickerButton( {\n\topen,\n\tchildren,\n\tlabel,\n\tshowTooltip = false,\n\tonFilesDrop,\n\tattachment,\n\tisUploading = false,\n}: {\n\topen: () => void;\n\tchildren: React.ReactNode;\n\tlabel: string;\n\tshowTooltip?: boolean;\n\tonFilesDrop: MediaEditAttachmentsProps[ 'onFilesDrop' ];\n\tattachment?: MediaEditAttachment;\n\tisUploading?: boolean;\n} ) {\n\tconst isBlob = attachment && isBlobURL( attachment.source_url );\n\tconst mediaPickerButton = (\n\t\t<div\n\t\t\tclassName=\"fields__media-edit-picker-button\"\n\t\t\trole=\"button\"\n\t\t\ttabIndex={ 0 }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( ! isUploading ) {\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( isUploading ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( event.key === 'Enter' || event.key === ' ' ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={ label }\n\t\t\taria-disabled={ isUploading }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ isBlob && (\n\t\t\t\t<span className=\"fields__media-edit-picker-button-spinner\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</span>\n\t\t\t) }\n\t\t\t{ ! isUploading && (\n\t\t\t\t<DropZone\n\t\t\t\t\tonFilesDrop={ ( files ) =>\n\t\t\t\t\t\tonFilesDrop( files, attachment?.id as number )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n\tif ( ! showTooltip ) {\n\t\treturn mediaPickerButton;\n\t}\n\treturn <Tooltip text={ label }>{ mediaPickerButton }</Tooltip>;\n}\n\nconst archiveMimeTypes = [\n\t'application/zip',\n\t'application/x-zip-compressed',\n\t'application/x-rar-compressed',\n\t'application/x-7z-compressed',\n\t'application/x-tar',\n\t'application/x-gzip',\n];\n\nfunction MediaTitle( { attachment }: { attachment: Attachment< 'view' > } ) {\n\treturn (\n\t\t<Truncate className=\"fields__media-edit-filename\">\n\t\t\t{ attachment.title.rendered }\n\t\t</Truncate>\n\t);\n}\n\nfunction MediaEditPlaceholder( props: {\n\topen: () => void;\n\tlabel: string;\n\tonFilesDrop: MediaEditAttachmentsProps[ 'onFilesDrop' ];\n\tisUploading: boolean;\n} ) {\n\treturn (\n\t\t<MediaPickerButton { ...props }>\n\t\t\t<span className=\"fields__media-edit-placeholder\">\n\t\t\t\t{ props.label }\n\t\t\t</span>\n\t\t</MediaPickerButton>\n\t);\n}\n\nfunction MediaPreview( { attachment }: { attachment: MediaEditAttachment } ) {\n\tconst url = attachment.source_url;\n\tconst mimeType = attachment.mime_type || '';\n\tif ( mimeType.startsWith( 'image' ) ) {\n\t\treturn (\n\t\t\t<img\n\t\t\t\tclassName=\"fields__media-edit-thumbnail\"\n\t\t\t\talt={ attachment.alt_text || '' }\n\t\t\t\tsrc={ url }\n\t\t\t/>\n\t\t);\n\t} else if ( mimeType.startsWith( 'audio' ) ) {\n\t\treturn <Icon icon={ audio } />;\n\t} else if ( mimeType.startsWith( 'video' ) ) {\n\t\treturn <Icon icon={ video } />;\n\t} else if ( archiveMimeTypes.includes( mimeType ) ) {\n\t\treturn <Icon icon={ archive } />;\n\t}\n\treturn <Icon icon={ file } />;\n}\n\ntype MediaEditAttachment = Attachment< 'view' > | BlobItem;\ninterface MediaEditAttachmentsProps {\n\tallItems: Array< MediaEditAttachment > | null;\n\taddButtonLabel: string;\n\tmultiple?: boolean;\n\tremoveItem: ( itemId: number ) => void;\n\topen: () => void;\n\tonFilesDrop: ( files: File[], attachmentId?: number ) => void;\n\tisUploading: boolean;\n}\n\nfunction ExpandedMediaEditAttachments( {\n\tallItems,\n\taddButtonLabel,\n\tmultiple,\n\tremoveItem,\n\topen,\n\tonFilesDrop,\n\tisUploading,\n}: MediaEditAttachmentsProps ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'fields__media-edit-expanded', {\n\t\t\t\t'is-multiple': multiple,\n\t\t\t\t'is-single': ! multiple,\n\t\t\t\t'is-empty': ! allItems?.length,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ allItems?.map( ( attachment ) => {\n\t\t\t\tconst hasPreviewImage =\n\t\t\t\t\tattachment.mime_type?.startsWith( 'image' );\n\t\t\t\tconst isBlob = isBlobURL( attachment.source_url );\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ attachment.id }\n\t\t\t\t\t\tclassName={ clsx( 'fields__media-edit-expanded-item', {\n\t\t\t\t\t\t\t'has-preview-image': hasPreviewImage,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<MediaPickerButton\n\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\tlabel={ __( 'Replace' ) }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-preview\">\n\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-expanded-preview-stack\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ ( ! isBlob || hasPreviewImage ) && (\n\t\t\t\t\t\t\t\t\t\t<MediaPreview\n\t\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\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{ ! isBlob &&\n\t\t\t\t\t\t\t\t\t\t( ! hasPreviewImage ? (\n\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-overlay\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</MediaPickerButton>\n\t\t\t\t\t\t{ ! isBlob && (\n\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-overlay\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-expanded-remove\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Remove' ) }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tdisabled={ isUploading }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tremoveItem( attachment.id as number );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ ( multiple || ! allItems?.length ) && (\n\t\t\t\t<MediaEditPlaceholder\n\t\t\t\t\topen={ open }\n\t\t\t\t\tlabel={ addButtonLabel }\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction CompactMediaEditAttachments( {\n\tallItems,\n\taddButtonLabel,\n\tmultiple,\n\tremoveItem,\n\topen,\n\tonFilesDrop,\n\tisUploading,\n}: MediaEditAttachmentsProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ !! allItems?.length && (\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t{ allItems.map( ( attachment ) => {\n\t\t\t\t\t\tconst isBlob = isBlobURL( attachment.source_url );\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ attachment.id }\n\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-compact\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<MediaPickerButton\n\t\t\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Replace' ) }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\tisUploading={ isUploading }\n\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<MediaPreview\n\t\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{ ! isBlob && (\n\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\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</MediaPickerButton>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-remove\"\n\t\t\t\t\t\t\t\t\ttext={ __( 'Remove' ) }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tdisabled={ isUploading }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\ttypeof attachment.id === 'number'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tremoveItem( attachment.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/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t\t{ ( multiple || ! allItems?.length ) && (\n\t\t\t\t<MediaEditPlaceholder\n\t\t\t\t\topen={ open }\n\t\t\t\t\tlabel={ addButtonLabel }\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * A media edit control component that provides a media picker UI with upload functionality\n * for selecting WordPress media attachments. Supports both the traditional WordPress media\n * library and the experimental DataViews media modal.\n *\n * This component is intended to be used as the `Edit` property of a field definition when\n * registering fields with `registerEntityField` from `@wordpress/editor`.\n *\n * @template Item - The type of the item being edited.\n *\n * @param {MediaEditProps<Item>} props                       - The component props.\n * @param {Item}                 props.data                  - The item being edited.\n * @param {Object}               props.field                 - The field configuration with getValue and setValue methods.\n * @param {Function}             props.onChange              - Callback function when the media selection changes.\n * @param {string[]}             [props.allowedTypes]        - Array of allowed media types. Default `['image']`.\n * @param {boolean}              [props.multiple]            - Whether to allow multiple media selections. Default `false`.\n * @param {boolean}              [props.hideLabelFromVision] - Whether the label should be hidden from vision.\n * @param {boolean}              [props.isExpanded]          - Whether to render in an expanded form. Default `false`.\n *\n * @return {JSX.Element} The media edit control component.\n *\n * @example\n * ```tsx\n * import { MediaEdit } from '@wordpress/fields';\n * import type { DataFormControlProps } from '@wordpress/dataviews';\n *\n * const featuredImageField = {\n *   id: 'featured_media',\n *   type: 'media',\n *   label: 'Featured Image',\n *   Edit: (props: DataFormControlProps<MyPostType>) => (\n *     <MediaEdit\n *       {...props}\n *       allowedTypes={['image']}\n *     />\n *   ),\n * };\n * ```\n */\nexport default function MediaEdit< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tallowedTypes = [ 'image' ],\n\tmultiple,\n\tisExpanded,\n}: MediaEditProps< Item > ) {\n\tconst value = field.getValue( { item: data } );\n\tconst attachments = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! value ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst normalizedValue = Array.isArray( value ) ? value : [ value ];\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'postType', 'attachment', {\n\t\t\t\tinclude: normalizedValue,\n\t\t\t} ) as Attachment< 'view' >[] | null;\n\t\t},\n\t\t[ value ]\n\t);\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\t// Support one upload action at a time for now.\n\tconst [ replacementId, setReplacementId ] = useState< number >();\n\tconst [ blobs, setBlobs ] = useState< string[] >( [] );\n\tconst onChangeControl = useCallback(\n\t\t( newValue: number | number[] | undefined ) =>\n\t\t\tonChange( field.setValue( { item: data, value: newValue } ) ),\n\t\t[ data, field, onChange ]\n\t);\n\tconst removeItem = ( itemId: number ) => {\n\t\tconst currentIds = Array.isArray( value ) ? value : [ value ];\n\t\tconst newIds = currentIds.filter( ( id ) => id !== itemId );\n\t\tonChangeControl( newIds.length ? newIds : undefined );\n\t};\n\tconst onFilesDrop = useCallback(\n\t\t( files: File[], _replacementId?: number ) => {\n\t\t\tuploadMedia( {\n\t\t\t\tallowedTypes: allowedTypes?.length ? allowedTypes : undefined,\n\t\t\t\tfilesList: files,\n\t\t\t\tonFileChange( uploadedMedia: any[] ) {\n\t\t\t\t\tsetReplacementId( _replacementId );\n\t\t\t\t\tconst { blobItems, uploadedItems } = uploadedMedia.reduce(\n\t\t\t\t\t\t( accumulator, item ) => {\n\t\t\t\t\t\t\tif ( isBlobURL( item.url ) ) {\n\t\t\t\t\t\t\t\taccumulator.blobItems.push( item.url );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\taccumulator.uploadedItems.push( item.id );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn accumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tblobItems: [] as string[],\n\t\t\t\t\t\t\tuploadedItems: [] as number[],\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tsetBlobs( blobItems );\n\t\t\t\t\t// If all uploads are complete reset the replacementId.\n\t\t\t\t\tif ( uploadedItems.length === uploadedMedia.length ) {\n\t\t\t\t\t\tsetReplacementId( undefined );\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! uploadedItems.length ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! multiple ) {\n\t\t\t\t\t\tonChangeControl( uploadedItems[ 0 ] );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! value ) {\n\t\t\t\t\t\tonChangeControl( uploadedItems );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst normalizedValue = Array.isArray( value )\n\t\t\t\t\t\t? value\n\t\t\t\t\t\t: [ value ];\n\t\t\t\t\tconst newIds = [\n\t\t\t\t\t\t...( _replacementId\n\t\t\t\t\t\t\t? normalizedValue.filter(\n\t\t\t\t\t\t\t\t\t( id: any ) => id !== _replacementId\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: normalizedValue ),\n\t\t\t\t\t\t...uploadedItems,\n\t\t\t\t\t];\n\t\t\t\t\tonChangeControl( newIds );\n\t\t\t\t},\n\t\t\t\tonError( error: Error ) {\n\t\t\t\t\tsetReplacementId( undefined );\n\t\t\t\t\tsetBlobs( [] );\n\t\t\t\t\tcreateErrorNotice( error.message, { type: 'snackbar' } );\n\t\t\t\t},\n\t\t\t\tmultiple: !! multiple,\n\t\t\t} );\n\t\t},\n\t\t[ allowedTypes, value, multiple, createErrorNotice, onChangeControl ]\n\t);\n\tconst addButtonLabel =\n\t\tfield.placeholder ||\n\t\t( multiple ? __( 'Choose files' ) : __( 'Choose file' ) );\n\t// Merge real attachments with any existing blob items that are being uploaded.\n\tconst allItems: Array< MediaEditAttachment > | null = useMemo( () => {\n\t\tif ( ! blobs.length ) {\n\t\t\treturn attachments;\n\t\t}\n\t\tconst items: Array< MediaEditAttachment > = [\n\t\t\t...( attachments || [] ),\n\t\t];\n\t\tconst blobItems = blobs.map( ( url ) => ( {\n\t\t\tid: url,\n\t\t\tsource_url: url,\n\t\t\tmime_type: getBlobTypeByURL( url ),\n\t\t} ) );\n\t\tconst replacementIndex = items.findIndex(\n\t\t\t( a ) => a.id === replacementId\n\t\t);\n\t\t// Place blobs at the replacement index, when files\n\t\t// dropped in existing media item.\n\t\tif ( replacementIndex !== -1 ) {\n\t\t\treturn [\n\t\t\t\t...items.slice( 0, replacementIndex ),\n\t\t\t\t...blobItems,\n\t\t\t\t...items.slice( replacementIndex + 1 ),\n\t\t\t];\n\t\t}\n\t\titems.push( ...blobItems );\n\t\treturn items;\n\t}, [ attachments, replacementId, blobs ] );\n\treturn (\n\t\t<fieldset className=\"fields__media-edit\" data-field-id={ field.id }>\n\t\t\t<ConditionalMediaUpload\n\t\t\t\tonSelect={ ( selectedMedia: any ) => {\n\t\t\t\t\tif ( multiple ) {\n\t\t\t\t\t\tconst newIds = Array.isArray( selectedMedia )\n\t\t\t\t\t\t\t? selectedMedia.map( ( m: any ) => m.id )\n\t\t\t\t\t\t\t: [ selectedMedia.id ];\n\t\t\t\t\t\tonChangeControl( newIds );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonChangeControl( selectedMedia.id );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tvalue={ value }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\ttitle={ field.label }\n\t\t\t\trender={ ( { open }: any ) => {\n\t\t\t\t\tconst AttachmentsComponent = isExpanded\n\t\t\t\t\t\t? ExpandedMediaEditAttachments\n\t\t\t\t\t\t: CompactMediaEditAttachments;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t\t\t{ field.label &&\n\t\t\t\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t\t\t\t<VisuallyHidden as=\"legend\">\n\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t<AttachmentsComponent\n\t\t\t\t\t\t\t\tallItems={ allItems }\n\t\t\t\t\t\t\t\taddButtonLabel={ addButtonLabel }\n\t\t\t\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\t\t\t\tremoveItem={ removeItem }\n\t\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\t\tisUploading={ !! blobs.length }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t\t<Text variant=\"muted\">\n\t\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t</fieldset>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tDropZone,\n\tIcon,\n\tSpinner,\n\t__experimentalText as Text,\n\t__experimentalTruncate as Truncate,\n\t__experimentalVStack as VStack,\n\tBaseControl,\n\tTooltip,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';\nimport { store as coreStore, type Attachment } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tarchive,\n\taudio,\n\tvideo,\n\tfile,\n\tcloseSmall,\n\terror as errorIcon,\n} from '@wordpress/icons';\nimport {\n\tMediaUpload,\n\tuploadMedia,\n\tprivateApis as mediaUtilsPrivateApis,\n} from '@wordpress/media-utils';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport type { MediaEditProps } from '../../types';\n\nconst { MediaUploadModal } = unlock( mediaUtilsPrivateApis );\n\ntype BlobItem = {\n\tid: string;\n\tsource_url: string;\n\tmime_type: string | undefined;\n\talt_text?: string;\n};\n\n/**\n * Conditional Media component that uses MediaUploadModal when experiment is enabled,\n * otherwise falls back to media-utils MediaUpload.\n *\n * @param root0          Component props.\n * @param root0.render   Render prop function that receives { open } object.\n * @param root0.multiple Whether to allow multiple media selections.\n * @return The component.\n */\nfunction ConditionalMediaUpload( { render, multiple, ...props }: any ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tif ( ( window as any ).__experimentalDataViewsMediaModal ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ render && render( { open: () => setIsModalOpen( true ) } ) }\n\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t<MediaUploadModal\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\t\tisOpen={ isModalOpen }\n\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\t\tprops.onClose?.();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonSelect={ ( media: any ) => {\n\t\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\t\tprops.onSelect?.( media );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\t// Fallback to media-utils MediaUpload when experiment is disabled.\n\treturn (\n\t\t<MediaUpload\n\t\t\t{ ...props }\n\t\t\trender={ render }\n\t\t\tmultiple={ multiple ? 'add' : undefined }\n\t\t/>\n\t);\n}\n\nfunction MediaPickerButton( {\n\topen,\n\tchildren,\n\tlabel,\n\tshowTooltip = false,\n\tonFilesDrop,\n\tattachment,\n\tisUploading = false,\n}: {\n\topen: () => void;\n\tchildren: React.ReactNode;\n\tlabel: string;\n\tshowTooltip?: boolean;\n\tonFilesDrop: MediaEditAttachmentsProps[ 'onFilesDrop' ];\n\tattachment?: MediaEditAttachment;\n\tisUploading?: boolean;\n} ) {\n\tconst isBlob = attachment && isBlobURL( attachment.source_url );\n\tconst mediaPickerButton = (\n\t\t<div\n\t\t\tclassName=\"fields__media-edit-picker-button\"\n\t\t\trole=\"button\"\n\t\t\ttabIndex={ 0 }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( ! isUploading ) {\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( isUploading ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( event.key === 'Enter' || event.key === ' ' ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={ label }\n\t\t\taria-disabled={ isUploading }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ isBlob && (\n\t\t\t\t<span className=\"fields__media-edit-picker-button-spinner\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</span>\n\t\t\t) }\n\t\t\t{ ! isUploading && (\n\t\t\t\t<DropZone\n\t\t\t\t\tonFilesDrop={ ( files ) =>\n\t\t\t\t\t\tonFilesDrop( files, attachment?.id as number )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n\tif ( ! showTooltip ) {\n\t\treturn mediaPickerButton;\n\t}\n\treturn <Tooltip text={ label }>{ mediaPickerButton }</Tooltip>;\n}\n\nconst archiveMimeTypes = [\n\t'application/zip',\n\t'application/x-zip-compressed',\n\t'application/x-rar-compressed',\n\t'application/x-7z-compressed',\n\t'application/x-tar',\n\t'application/x-gzip',\n];\n\nfunction MediaTitle( { attachment }: { attachment: Attachment< 'view' > } ) {\n\treturn (\n\t\t<Truncate className=\"fields__media-edit-filename\">\n\t\t\t{ attachment.title.rendered }\n\t\t</Truncate>\n\t);\n}\n\nfunction MediaEditPlaceholder( props: {\n\topen: () => void;\n\tlabel: string;\n\tonFilesDrop: MediaEditAttachmentsProps[ 'onFilesDrop' ];\n\tisUploading: boolean;\n} ) {\n\treturn (\n\t\t<MediaPickerButton { ...props }>\n\t\t\t<span className=\"fields__media-edit-placeholder\">\n\t\t\t\t{ props.label }\n\t\t\t</span>\n\t\t</MediaPickerButton>\n\t);\n}\n\nfunction MediaPreview( { attachment }: { attachment: MediaEditAttachment } ) {\n\tconst url = attachment.source_url;\n\tconst mimeType = attachment.mime_type || '';\n\tif ( mimeType.startsWith( 'image' ) ) {\n\t\treturn (\n\t\t\t<img\n\t\t\t\tclassName=\"fields__media-edit-thumbnail\"\n\t\t\t\talt={ attachment.alt_text || '' }\n\t\t\t\tsrc={ url }\n\t\t\t/>\n\t\t);\n\t} else if ( mimeType.startsWith( 'audio' ) ) {\n\t\treturn <Icon icon={ audio } />;\n\t} else if ( mimeType.startsWith( 'video' ) ) {\n\t\treturn <Icon icon={ video } />;\n\t} else if ( archiveMimeTypes.includes( mimeType ) ) {\n\t\treturn <Icon icon={ archive } />;\n\t}\n\treturn <Icon icon={ file } />;\n}\n\ntype MediaEditAttachment = Attachment< 'view' > | BlobItem;\ninterface MediaEditAttachmentsProps {\n\tallItems: Array< MediaEditAttachment > | null;\n\taddButtonLabel: string;\n\tmultiple?: boolean;\n\tremoveItem: ( itemId: number ) => void;\n\topen: () => void;\n\tonFilesDrop: ( files: File[], attachmentId?: number ) => void;\n\tisUploading: boolean;\n}\n\nfunction ExpandedMediaEditAttachments( {\n\tallItems,\n\taddButtonLabel,\n\tmultiple,\n\tremoveItem,\n\topen,\n\tonFilesDrop,\n\tisUploading,\n}: MediaEditAttachmentsProps ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'fields__media-edit-expanded', {\n\t\t\t\t'is-multiple': multiple,\n\t\t\t\t'is-single': ! multiple,\n\t\t\t\t'is-empty': ! allItems?.length,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ allItems?.map( ( attachment ) => {\n\t\t\t\tconst hasPreviewImage =\n\t\t\t\t\tattachment.mime_type?.startsWith( 'image' );\n\t\t\t\tconst isBlob = isBlobURL( attachment.source_url );\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ attachment.id }\n\t\t\t\t\t\tclassName={ clsx( 'fields__media-edit-expanded-item', {\n\t\t\t\t\t\t\t'has-preview-image': hasPreviewImage,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<MediaPickerButton\n\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\tlabel={ __( 'Replace' ) }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-preview\">\n\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-expanded-preview-stack\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ ( ! isBlob || hasPreviewImage ) && (\n\t\t\t\t\t\t\t\t\t\t<MediaPreview\n\t\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\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{ ! isBlob &&\n\t\t\t\t\t\t\t\t\t\t( ! hasPreviewImage ? (\n\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-overlay\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</MediaPickerButton>\n\t\t\t\t\t\t{ ! isBlob && (\n\t\t\t\t\t\t\t<div className=\"fields__media-edit-expanded-overlay\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-expanded-remove\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Remove' ) }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tdisabled={ isUploading }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tremoveItem( attachment.id as number );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ ( multiple || ! allItems?.length ) && (\n\t\t\t\t<MediaEditPlaceholder\n\t\t\t\t\topen={ open }\n\t\t\t\t\tlabel={ addButtonLabel }\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction CompactMediaEditAttachments( {\n\tallItems,\n\taddButtonLabel,\n\tmultiple,\n\tremoveItem,\n\topen,\n\tonFilesDrop,\n\tisUploading,\n}: MediaEditAttachmentsProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ !! allItems?.length && (\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t{ allItems.map( ( attachment ) => {\n\t\t\t\t\t\tconst isBlob = isBlobURL( attachment.source_url );\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ attachment.id }\n\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-compact\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<MediaPickerButton\n\t\t\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Replace' ) }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\tisUploading={ isUploading }\n\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<MediaPreview\n\t\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{ ! isBlob && (\n\t\t\t\t\t\t\t\t\t\t\t<MediaTitle\n\t\t\t\t\t\t\t\t\t\t\t\tattachment={\n\t\t\t\t\t\t\t\t\t\t\t\t\tattachment as Attachment< 'view' >\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\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</MediaPickerButton>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tclassName=\"fields__media-edit-remove\"\n\t\t\t\t\t\t\t\t\ttext={ __( 'Remove' ) }\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tdisabled={ isUploading }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\ttypeof attachment.id === 'number'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tremoveItem( attachment.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/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t\t{ ( multiple || ! allItems?.length ) && (\n\t\t\t\t<MediaEditPlaceholder\n\t\t\t\t\topen={ open }\n\t\t\t\t\tlabel={ addButtonLabel }\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tisUploading={ isUploading }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * A media edit control component that provides a media picker UI with upload functionality\n * for selecting WordPress media attachments. Supports both the traditional WordPress media\n * library and the experimental DataViews media modal.\n *\n * This component is intended to be used as the `Edit` property of a field definition when\n * registering fields with `registerEntityField` from `@wordpress/editor`.\n *\n * @template Item - The type of the item being edited.\n *\n * @param {MediaEditProps<Item>} props                       - The component props.\n * @param {Item}                 props.data                  - The item being edited.\n * @param {Object}               props.field                 - The field configuration with getValue and setValue methods.\n * @param {Function}             props.onChange              - Callback function when the media selection changes.\n * @param {string[]}             [props.allowedTypes]        - Array of allowed media types. Default `['image']`.\n * @param {boolean}              [props.multiple]            - Whether to allow multiple media selections. Default `false`.\n * @param {boolean}              [props.hideLabelFromVision] - Whether the label should be hidden from vision.\n * @param {boolean}              [props.isExpanded]          - Whether to render in an expanded form. Default `false`.\n *\n * @return {JSX.Element} The media edit control component.\n *\n * @example\n * ```tsx\n * import { MediaEdit } from '@wordpress/fields';\n * import type { DataFormControlProps } from '@wordpress/dataviews';\n *\n * const featuredImageField = {\n *   id: 'featured_media',\n *   type: 'media',\n *   label: 'Featured Image',\n *   Edit: (props: DataFormControlProps<MyPostType>) => (\n *     <MediaEdit\n *       {...props}\n *       allowedTypes={['image']}\n *     />\n *   ),\n * };\n * ```\n */\nexport default function MediaEdit< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tallowedTypes = [ 'image' ],\n\tmultiple,\n\tisExpanded,\n\tvalidity,\n}: MediaEditProps< Item > ) {\n\tconst value = field.getValue( { item: data } );\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst [ customValidity, setCustomValidity ] = useState<\n\t\t| { type: 'valid' | 'validating' | 'invalid'; message?: string }\n\t\t| undefined\n\t>( undefined );\n\t// Listen for invalid event (e.g., form submission, reportValidity())\n\t// to show validation messages even before blur.\n\tuseEffect( () => {\n\t\tconst validityTarget = validityTargetRef.current;\n\t\tconst handler = () => {\n\t\t\tsetIsTouched( true );\n\t\t};\n\t\tvalidityTarget?.addEventListener( 'invalid', handler );\n\t\treturn () => validityTarget?.removeEventListener( 'invalid', handler );\n\t}, [] );\n\tconst attachments = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! value ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst normalizedValue = Array.isArray( value ) ? value : [ value ];\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'postType', 'attachment', {\n\t\t\t\tinclude: normalizedValue,\n\t\t\t} ) as Attachment< 'view' >[] | null;\n\t\t},\n\t\t[ value ]\n\t);\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\t// Support one upload action at a time for now.\n\tconst [ replacementId, setReplacementId ] = useState< number >();\n\tconst [ blobs, setBlobs ] = useState< string[] >( [] );\n\tconst onChangeControl = useCallback(\n\t\t( newValue: number | number[] | undefined ) =>\n\t\t\tonChange( field.setValue( { item: data, value: newValue } ) ),\n\t\t[ data, field, onChange ]\n\t);\n\tconst removeItem = useCallback(\n\t\t( itemId: number ) => {\n\t\t\tconst currentIds = Array.isArray( value ) ? value : [ value ];\n\t\t\tconst newIds = currentIds.filter( ( id ) => id !== itemId );\n\t\t\t// Mark as touched to immediately show any validation error.\n\t\t\tsetIsTouched( true );\n\t\t\tonChangeControl( newIds.length ? newIds : undefined );\n\t\t},\n\t\t[ value, onChangeControl ]\n\t);\n\tconst onFilesDrop = useCallback(\n\t\t( files: File[], _replacementId?: number ) => {\n\t\t\tuploadMedia( {\n\t\t\t\tallowedTypes: allowedTypes?.length ? allowedTypes : undefined,\n\t\t\t\tfilesList: files,\n\t\t\t\tonFileChange( uploadedMedia: any[] ) {\n\t\t\t\t\tsetReplacementId( _replacementId );\n\t\t\t\t\tconst { blobItems, uploadedItems } = uploadedMedia.reduce(\n\t\t\t\t\t\t( accumulator, item ) => {\n\t\t\t\t\t\t\tif ( isBlobURL( item.url ) ) {\n\t\t\t\t\t\t\t\taccumulator.blobItems.push( item.url );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\taccumulator.uploadedItems.push( item.id );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn accumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tblobItems: [] as string[],\n\t\t\t\t\t\t\tuploadedItems: [] as number[],\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tsetBlobs( blobItems );\n\t\t\t\t\t// If all uploads are complete reset the replacementId.\n\t\t\t\t\tif ( uploadedItems.length === uploadedMedia.length ) {\n\t\t\t\t\t\tsetReplacementId( undefined );\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! uploadedItems.length ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! multiple ) {\n\t\t\t\t\t\tonChangeControl( uploadedItems[ 0 ] );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! value ) {\n\t\t\t\t\t\tonChangeControl( uploadedItems );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst normalizedValue = Array.isArray( value )\n\t\t\t\t\t\t? value\n\t\t\t\t\t\t: [ value ];\n\t\t\t\t\tconst newIds = [\n\t\t\t\t\t\t...( _replacementId\n\t\t\t\t\t\t\t? normalizedValue.filter(\n\t\t\t\t\t\t\t\t\t( id: any ) => id !== _replacementId\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: normalizedValue ),\n\t\t\t\t\t\t...uploadedItems,\n\t\t\t\t\t];\n\t\t\t\t\tonChangeControl( newIds );\n\t\t\t\t},\n\t\t\t\tonError( error: Error ) {\n\t\t\t\t\tsetReplacementId( undefined );\n\t\t\t\t\tsetBlobs( [] );\n\t\t\t\t\tcreateErrorNotice( error.message, { type: 'snackbar' } );\n\t\t\t\t},\n\t\t\t\tmultiple: !! multiple,\n\t\t\t} );\n\t\t},\n\t\t[ allowedTypes, value, multiple, createErrorNotice, onChangeControl ]\n\t);\n\tconst addButtonLabel =\n\t\tfield.placeholder ||\n\t\t( multiple ? __( 'Choose files' ) : __( 'Choose file' ) );\n\t// Merge real attachments with any existing blob items that are being uploaded.\n\tconst allItems: Array< MediaEditAttachment > | null = useMemo( () => {\n\t\tif ( ! blobs.length ) {\n\t\t\treturn attachments;\n\t\t}\n\t\tconst items: Array< MediaEditAttachment > = [\n\t\t\t...( attachments || [] ),\n\t\t];\n\t\tconst blobItems = blobs.map( ( url ) => ( {\n\t\t\tid: url,\n\t\t\tsource_url: url,\n\t\t\tmime_type: getBlobTypeByURL( url ),\n\t\t} ) );\n\t\tconst replacementIndex = items.findIndex(\n\t\t\t( a ) => a.id === replacementId\n\t\t);\n\t\t// Place blobs at the replacement index, when files\n\t\t// dropped in existing media item.\n\t\tif ( replacementIndex !== -1 ) {\n\t\t\treturn [\n\t\t\t\t...items.slice( 0, replacementIndex ),\n\t\t\t\t...blobItems,\n\t\t\t\t...items.slice( replacementIndex + 1 ),\n\t\t\t];\n\t\t}\n\t\titems.push( ...blobItems );\n\t\treturn items;\n\t}, [ attachments, replacementId, blobs ] );\n\tuseEffect( () => {\n\t\tif ( ! isTouched ) {\n\t\t\treturn;\n\t\t}\n\t\tconst input = validityTargetRef.current;\n\t\tif ( ! input ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( validity ) {\n\t\t\tconst customValidityResult = validity?.custom;\n\t\t\tsetCustomValidity( customValidityResult );\n\n\t\t\t// Set custom validity on hidden input for HTML5 form validation.\n\t\t\tif ( customValidityResult?.type === 'invalid' ) {\n\t\t\t\tinput.setCustomValidity(\n\t\t\t\t\tcustomValidityResult.message || __( 'Invalid' )\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tinput.setCustomValidity( '' ); // Clear validity\n\t\t\t}\n\t\t} else {\n\t\t\t// Clear any previous validation.\n\t\t\tinput.setCustomValidity( '' );\n\t\t\tsetCustomValidity( undefined );\n\t\t}\n\t}, [ isTouched, field.isValid, validity ] );\n\tconst onBlur = useCallback(\n\t\t( event: React.FocusEvent< HTMLElement > ) => {\n\t\t\tif ( isTouched ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (\n\t\t\t\t! event.relatedTarget ||\n\t\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t\t) {\n\t\t\t\tsetIsTouched( true );\n\t\t\t}\n\t\t},\n\t\t[ isTouched ]\n\t);\n\treturn (\n\t\t<div onBlur={ onBlur }>\n\t\t\t<fieldset className=\"fields__media-edit\" data-field-id={ field.id }>\n\t\t\t\t<ConditionalMediaUpload\n\t\t\t\t\tonSelect={ ( selectedMedia: any ) => {\n\t\t\t\t\t\tif ( multiple ) {\n\t\t\t\t\t\t\tconst newIds = Array.isArray( selectedMedia )\n\t\t\t\t\t\t\t\t? selectedMedia.map( ( m: any ) => m.id )\n\t\t\t\t\t\t\t\t: [ selectedMedia.id ];\n\t\t\t\t\t\t\tonChangeControl( newIds );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChangeControl( selectedMedia.id );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\ttitle={ field.label }\n\t\t\t\t\trender={ ( { open }: any ) => {\n\t\t\t\t\t\tconst AttachmentsComponent = isExpanded\n\t\t\t\t\t\t\t? ExpandedMediaEditAttachments\n\t\t\t\t\t\t\t: CompactMediaEditAttachments;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t\t\t\t{ field.label &&\n\t\t\t\t\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t\t\t\t\t<VisuallyHidden as=\"legend\">\n\t\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t<AttachmentsComponent\n\t\t\t\t\t\t\t\t\tallItems={ allItems }\n\t\t\t\t\t\t\t\t\taddButtonLabel={ addButtonLabel }\n\t\t\t\t\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\t\t\t\t\tremoveItem={ removeItem }\n\t\t\t\t\t\t\t\t\topen={ open }\n\t\t\t\t\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\t\t\t\t\tisUploading={ !! blobs.length }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t\t\t<Text variant=\"muted\">\n\t\t\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</fieldset>\n\t\t\t{ /* Visually hidden text input for validation. */ }\n\t\t\t<VisuallyHidden>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tref={ validityTargetRef }\n\t\t\t\t\tvalue={ value ?? '' }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t/>\n\t\t\t</VisuallyHidden>\n\t\t\t{ customValidity && (\n\t\t\t\t<div aria-live=\"polite\">\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'components-validated-control__indicator',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-invalid': customValidity.type === 'invalid',\n\t\t\t\t\t\t\t\t'is-valid': customValidity.type === 'valid',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-validated-control__indicator-icon\"\n\t\t\t\t\t\t\ticon={ errorIcon }\n\t\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ customValidity.message }\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-style/style-rtl.css

@@ -397,35 +397,19 @@ fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields_
   font-weight: 600;
 }
 
-.dataviews-view-grid__media .fields-controls__featured-image-image,
-.dataviews-view-grid__media .fields-controls__featured-image-placeholder,
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-image,
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder,
-.dataviews-view-list__media-wrapper .fields-controls__featured-image-image,
-.dataviews-view-list__media-wrapper .fields-controls__featured-image-placeholder {
+.fields-controls__featured-image-image,
+.fields-controls__featured-image-placeholder {
   width: 100%;
   height: 100%;
   display: block;
   border-radius: 4px;
 }
-.dataviews-view-grid__media .fields-controls__featured-image-placeholder,
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder,
-.dataviews-view-list__media-wrapper .fields-controls__featured-image-placeholder {
+
+.fields-controls__featured-image-placeholder {
   box-shadow: none;
   background: #f0f0f0;
 }
 
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-image,
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder {
-  width: 32px;
-  height: 32px;
-}
-
-.dataforms-layouts-panel__field-control .fields-controls__featured-image-image {
-  width: 16px;
-  height: 16px;
-}
-
 .fields-controls__parent {
   border: 0;
   padding: 0;

package/build-style/style.css

@@ -397,35 +397,19 @@ fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields_
   font-weight: 600;
 }
 
-.dataviews-view-grid__media .fields-controls__featured-image-image,
-.dataviews-view-grid__media .fields-controls__featured-image-placeholder,
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-image,
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder,
-.dataviews-view-list__media-wrapper .fields-controls__featured-image-image,
-.dataviews-view-list__media-wrapper .fields-controls__featured-image-placeholder {
+.fields-controls__featured-image-image,
+.fields-controls__featured-image-placeholder {
   width: 100%;
   height: 100%;
   display: block;
   border-radius: 4px;
 }
-.dataviews-view-grid__media .fields-controls__featured-image-placeholder,
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder,
-.dataviews-view-list__media-wrapper .fields-controls__featured-image-placeholder {
+
+.fields-controls__featured-image-placeholder {
   box-shadow: none;
   background: #f0f0f0;
 }
 
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-image,
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder {
-  width: 32px;
-  height: 32px;
-}
-
-.dataforms-layouts-panel__field-control .fields-controls__featured-image-image {
-  width: 16px;
-  height: 16px;
-}
-
 .fields-controls__parent {
   border: 0;
   padding: 0;

package/build-types/components/media-edit/index.d.ts

@@ -38,5 +38,5 @@ import type { MediaEditProps } from '../../types';
  * };
  * ```
  */
-export default function MediaEdit<Item>({ data, field, onChange, hideLabelFromVision, allowedTypes, multiple, isExpanded, }: MediaEditProps<Item>): import("react").JSX.Element;
+export default function MediaEdit<Item>({ data, field, onChange, hideLabelFromVision, allowedTypes, multiple, isExpanded, validity, }: MediaEditProps<Item>): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/build-types/components/media-edit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-edit/index.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAsWlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,IAAI,EAAI,EAC1C,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,mBAAmB,EACnB,YAA0B,EAC1B,QAAQ,EACR,UAAU,GACV,EAAE,cAAc,CAAE,IAAI,CAAE,+BA6KxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-edit/index.tsx"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAsWlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,IAAI,EAAI,EAC1C,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,mBAAmB,EACnB,YAA0B,EAC1B,QAAQ,EACR,UAAU,EACV,QAAQ,GACR,EAAE,cAAc,CAAE,IAAI,CAAE,+BA6QxB"}

package/build-types/types.d.ts

@@ -138,7 +138,7 @@ export type CoreDataError = {
     message?: string;
     code?: string;
 };
-export interface MediaEditProps<Item> extends Pick<DataFormControlProps<Item>, 'data' | 'field' | 'onChange' | 'hideLabelFromVision'> {
+export interface MediaEditProps<Item> extends Pick<DataFormControlProps<Item>, 'data' | 'field' | 'onChange' | 'hideLabelFromVision' | 'validity'> {
     /**
      * Array of allowed media types (e.g., ['image', 'video']).
      *

package/build-types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/fields",
-	"version": "0.30.0",
+	"version": "0.30.1-next.v.0+b8934fcf9",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,30 +47,30 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@wordpress/api-fetch": "^7.38.0",
-		"@wordpress/base-styles": "^6.14.0",
-		"@wordpress/blob": "^4.38.0",
-		"@wordpress/block-editor": "^15.11.0",
-		"@wordpress/blocks": "^15.11.0",
-		"@wordpress/components": "^32.0.0",
-		"@wordpress/compose": "^7.38.0",
-		"@wordpress/core-data": "^7.38.0",
-		"@wordpress/data": "^10.38.0",
-		"@wordpress/dataviews": "^11.2.0",
-		"@wordpress/date": "^5.38.0",
-		"@wordpress/element": "^6.38.0",
-		"@wordpress/hooks": "^4.38.0",
-		"@wordpress/html-entities": "^4.38.0",
-		"@wordpress/i18n": "^6.11.0",
-		"@wordpress/icons": "^11.5.0",
-		"@wordpress/media-utils": "^5.38.0",
-		"@wordpress/notices": "^5.38.0",
-		"@wordpress/patterns": "^2.38.0",
-		"@wordpress/primitives": "^4.38.0",
-		"@wordpress/private-apis": "^1.38.0",
-		"@wordpress/router": "^1.38.0",
-		"@wordpress/url": "^4.38.0",
-		"@wordpress/warning": "^3.38.0",
+		"@wordpress/api-fetch": "^7.38.1-next.v.0+b8934fcf9",
+		"@wordpress/base-styles": "^6.14.1-next.v.0+b8934fcf9",
+		"@wordpress/blob": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/block-editor": "^15.11.1-next.v.0+b8934fcf9",
+		"@wordpress/blocks": "^15.11.1-next.v.0+b8934fcf9",
+		"@wordpress/components": "^32.0.2-next.v.0+b8934fcf9",
+		"@wordpress/compose": "^7.38.1-next.v.0+b8934fcf9",
+		"@wordpress/core-data": "^7.38.1-next.v.0+b8934fcf9",
+		"@wordpress/data": "^10.38.1-next.v.0+b8934fcf9",
+		"@wordpress/dataviews": "^11.3.1-next.v.0+b8934fcf9",
+		"@wordpress/date": "^5.38.1-next.v.0+b8934fcf9",
+		"@wordpress/element": "^6.38.1-next.v.0+b8934fcf9",
+		"@wordpress/hooks": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/html-entities": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/i18n": "^6.11.1-next.v.0+b8934fcf9",
+		"@wordpress/icons": "^11.5.1-next.v.0+b8934fcf9",
+		"@wordpress/media-utils": "^5.38.1-next.v.0+b8934fcf9",
+		"@wordpress/notices": "^5.38.1-next.v.0+b8934fcf9",
+		"@wordpress/patterns": "^2.38.1-next.v.0+b8934fcf9",
+		"@wordpress/primitives": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/private-apis": "^1.38.1-next.v.0+b8934fcf9",
+		"@wordpress/router": "^1.38.1-next.v.0+b8934fcf9",
+		"@wordpress/url": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/warning": "^3.38.1-next.v.0+b8934fcf9",
 		"change-case": "4.1.2",
 		"client-zip": "^2.4.5",
 		"clsx": "2.1.1",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "50c4c0f51e4797c217946ce42adfaa5eb026f33f"
+	"gitHead": "17529010285784fd2e735348a28391c79de87c88"
 }

package/src/components/media-edit/index.tsx

@@ -21,9 +21,22 @@ import {
 import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';
 import { store as coreStore, type Attachment } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useMemo, useState } from '@wordpress/element';
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { archive, audio, video, file, closeSmall } from '@wordpress/icons';
+import {
+	archive,
+	audio,
+	video,
+	file,
+	closeSmall,
+	error as errorIcon,
+} from '@wordpress/icons';
 import {
 	MediaUpload,
 	uploadMedia,
@@ -440,8 +453,25 @@ export default function MediaEdit< Item >( {
 	allowedTypes = [ 'image' ],
 	multiple,
 	isExpanded,
+	validity,
 }: MediaEditProps< Item > ) {
 	const value = field.getValue( { item: data } );
+	const [ isTouched, setIsTouched ] = useState( false );
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const [ customValidity, setCustomValidity ] = useState<
+		| { type: 'valid' | 'validating' | 'invalid'; message?: string }
+		| undefined
+	>( undefined );
+	// Listen for invalid event (e.g., form submission, reportValidity())
+	// to show validation messages even before blur.
+	useEffect( () => {
+		const validityTarget = validityTargetRef.current;
+		const handler = () => {
+			setIsTouched( true );
+		};
+		validityTarget?.addEventListener( 'invalid', handler );
+		return () => validityTarget?.removeEventListener( 'invalid', handler );
+	}, [] );
 	const attachments = useSelect(
 		( select ) => {
 			if ( ! value ) {
@@ -464,11 +494,16 @@ export default function MediaEdit< Item >( {
 			onChange( field.setValue( { item: data, value: newValue } ) ),
 		[ data, field, onChange ]
 	);
-	const removeItem = ( itemId: number ) => {
-		const currentIds = Array.isArray( value ) ? value : [ value ];
-		const newIds = currentIds.filter( ( id ) => id !== itemId );
-		onChangeControl( newIds.length ? newIds : undefined );
-	};
+	const removeItem = useCallback(
+		( itemId: number ) => {
+			const currentIds = Array.isArray( value ) ? value : [ value ];
+			const newIds = currentIds.filter( ( id ) => id !== itemId );
+			// Mark as touched to immediately show any validation error.
+			setIsTouched( true );
+			onChangeControl( newIds.length ? newIds : undefined );
+		},
+		[ value, onChangeControl ]
+	);
 	const onFilesDrop = useCallback(
 		( files: File[], _replacementId?: number ) => {
 			uploadMedia( {
@@ -560,57 +595,132 @@ export default function MediaEdit< Item >( {
 		items.push( ...blobItems );
 		return items;
 	}, [ attachments, replacementId, blobs ] );
+	useEffect( () => {
+		if ( ! isTouched ) {
+			return;
+		}
+		const input = validityTargetRef.current;
+		if ( ! input ) {
+			return;
+		}
+
+		if ( validity ) {
+			const customValidityResult = validity?.custom;
+			setCustomValidity( customValidityResult );
+
+			// Set custom validity on hidden input for HTML5 form validation.
+			if ( customValidityResult?.type === 'invalid' ) {
+				input.setCustomValidity(
+					customValidityResult.message || __( 'Invalid' )
+				);
+			} else {
+				input.setCustomValidity( '' ); // Clear validity
+			}
+		} else {
+			// Clear any previous validation.
+			input.setCustomValidity( '' );
+			setCustomValidity( undefined );
+		}
+	}, [ isTouched, field.isValid, validity ] );
+	const onBlur = useCallback(
+		( event: React.FocusEvent< HTMLElement > ) => {
+			if ( isTouched ) {
+				return;
+			}
+			if (
+				! event.relatedTarget ||
+				! event.currentTarget.contains( event.relatedTarget )
+			) {
+				setIsTouched( true );
+			}
+		},
+		[ isTouched ]
+	);
 	return (
-		<fieldset className="fields__media-edit" data-field-id={ field.id }>
-			<ConditionalMediaUpload
-				onSelect={ ( selectedMedia: any ) => {
-					if ( multiple ) {
-						const newIds = Array.isArray( selectedMedia )
-							? selectedMedia.map( ( m: any ) => m.id )
-							: [ selectedMedia.id ];
-						onChangeControl( newIds );
-					} else {
-						onChangeControl( selectedMedia.id );
-					}
-				} }
-				allowedTypes={ allowedTypes }
-				value={ value }
-				multiple={ multiple }
-				title={ field.label }
-				render={ ( { open }: any ) => {
-					const AttachmentsComponent = isExpanded
-						? ExpandedMediaEditAttachments
-						: CompactMediaEditAttachments;
-					return (
-						<VStack spacing={ 2 }>
-							{ field.label &&
-								( hideLabelFromVision ? (
-									<VisuallyHidden as="legend">
-										{ field.label }
-									</VisuallyHidden>
-								) : (
-									<BaseControl.VisualLabel as="legend">
-										{ field.label }
-									</BaseControl.VisualLabel>
-								) ) }
-							<AttachmentsComponent
-								allItems={ allItems }
-								addButtonLabel={ addButtonLabel }
-								multiple={ multiple }
-								removeItem={ removeItem }
-								open={ open }
-								onFilesDrop={ onFilesDrop }
-								isUploading={ !! blobs.length }
-							/>
-							{ field.description && (
-								<Text variant="muted">
-									{ field.description }
-								</Text>
-							) }
-						</VStack>
-					);
-				} }
-			/>
-		</fieldset>
+		<div onBlur={ onBlur }>
+			<fieldset className="fields__media-edit" data-field-id={ field.id }>
+				<ConditionalMediaUpload
+					onSelect={ ( selectedMedia: any ) => {
+						if ( multiple ) {
+							const newIds = Array.isArray( selectedMedia )
+								? selectedMedia.map( ( m: any ) => m.id )
+								: [ selectedMedia.id ];
+							onChangeControl( newIds );
+						} else {
+							onChangeControl( selectedMedia.id );
+						}
+					} }
+					allowedTypes={ allowedTypes }
+					value={ value }
+					multiple={ multiple }
+					title={ field.label }
+					render={ ( { open }: any ) => {
+						const AttachmentsComponent = isExpanded
+							? ExpandedMediaEditAttachments
+							: CompactMediaEditAttachments;
+						return (
+							<VStack spacing={ 2 }>
+								{ field.label &&
+									( hideLabelFromVision ? (
+										<VisuallyHidden as="legend">
+											{ field.label }
+										</VisuallyHidden>
+									) : (
+										<BaseControl.VisualLabel as="legend">
+											{ field.label }
+										</BaseControl.VisualLabel>
+									) ) }
+								<AttachmentsComponent
+									allItems={ allItems }
+									addButtonLabel={ addButtonLabel }
+									multiple={ multiple }
+									removeItem={ removeItem }
+									open={ open }
+									onFilesDrop={ onFilesDrop }
+									isUploading={ !! blobs.length }
+								/>
+								{ field.description && (
+									<Text variant="muted">
+										{ field.description }
+									</Text>
+								) }
+							</VStack>
+						);
+					} }
+				/>
+			</fieldset>
+			{ /* Visually hidden text input for validation. */ }
+			<VisuallyHidden>
+				<input
+					type="text"
+					ref={ validityTargetRef }
+					value={ value ?? '' }
+					tabIndex={ -1 }
+					aria-hidden="true"
+					onChange={ () => {} }
+				/>
+			</VisuallyHidden>
+			{ customValidity && (
+				<div aria-live="polite">
+					<p
+						className={ clsx(
+							'components-validated-control__indicator',
+							{
+								'is-invalid': customValidity.type === 'invalid',
+								'is-valid': customValidity.type === 'valid',
+							}
+						) }
+					>
+						<Icon
+							className="components-validated-control__indicator-icon"
+							icon={ errorIcon }
+							size={ 16 }
+							fill="currentColor"
+						/>
+						{ customValidity.message }
+					</p>
+				</div>
+			) }
+		</div>
 	);
 }

package/src/fields/featured-image/style.scss

@@ -1,34 +1,15 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
-.dataviews-view-grid__media,
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media,
-.dataviews-view-list__media-wrapper {
-	.fields-controls__featured-image-image,
-	.fields-controls__featured-image-placeholder {
-		width: 100%;
-		height: 100%;
-		display: block;
-		border-radius: $radius-medium;
-	}
-
-	.fields-controls__featured-image-placeholder {
-		box-shadow: none;
-		background: $gray-100;
-	}
-}
-
-.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media {
-	.fields-controls__featured-image-image,
-	.fields-controls__featured-image-placeholder {
-		width: 32px;
-		height: 32px;
-	}
+.fields-controls__featured-image-image,
+.fields-controls__featured-image-placeholder {
+	width: 100%;
+	height: 100%;
+	display: block;
+	border-radius: $radius-medium;
 }
 
-.dataforms-layouts-panel__field-control {
-	.fields-controls__featured-image-image {
-		width: 16px;
-		height: 16px;
-	}
+.fields-controls__featured-image-placeholder {
+	box-shadow: none;
+	background: $gray-100;
 }

package/src/types.ts

@@ -142,7 +142,7 @@ export type CoreDataError = { message?: string; code?: string };
 export interface MediaEditProps< Item >
 	extends Pick<
 		DataFormControlProps< Item >,
-		'data' | 'field' | 'onChange' | 'hideLabelFromVision'
+		'data' | 'field' | 'onChange' | 'hideLabelFromVision' | 'validity'
 	> {
 	/**
 	 * Array of allowed media types (e.g., ['image', 'video']).