@wordpress/fields 0.31.1-next.v.202602091733.0 → 0.32.0

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

@@ -8,6 +8,7 @@ import {
   __experimentalText as Text,
   __experimentalTruncate as Truncate,
   __experimentalVStack as VStack,
+  __experimentalHStack as HStack,
   BaseControl,
   Tooltip,
   VisuallyHidden
@@ -22,14 +23,18 @@ import {
   useRef,
   useState
 } from "@wordpress/element";
-import { __ } from "@wordpress/i18n";
+import { __, sprintf } from "@wordpress/i18n";
 import {
   archive,
   audio,
   video,
   file,
   closeSmall,
-  error as errorIcon
+  error as errorIcon,
+  chevronUp,
+  chevronDown,
+  chevronLeft,
+  chevronRight
 } from "@wordpress/icons";
 import {
   MediaUpload,
@@ -38,8 +43,23 @@ import {
 } from "@wordpress/media-utils";
 import { store as noticesStore } from "@wordpress/notices";
 import { unlock } from "../../lock-unlock.mjs";
+import useMovingAnimation from "./use-moving-animation.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { MediaUploadModal } = unlock(mediaUtilsPrivateApis);
+function AnimatedMediaItem({
+  children,
+  index,
+  className
+}) {
+  const ref = useMovingAnimation(index);
+  return /* @__PURE__ */ jsx("div", { ref, className, children });
+}
+function normalizeValue(value) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  return value ? [value] : [];
+}
 function ConditionalMediaUpload({ render, multiple, ...props }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   if (window.__experimentalDataViewsMediaModal) {
@@ -85,7 +105,9 @@ function MediaPickerButton({
   const mediaPickerButton = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "fields__media-edit-picker-button",
+      className: clsx("fields__media-edit-picker-button", {
+        "has-attachment": attachment
+      }),
       role: "button",
       tabIndex: 0,
       onClick: () => {
@@ -119,7 +141,7 @@ function MediaPickerButton({
   if (!showTooltip) {
     return mediaPickerButton;
   }
-  return /* @__PURE__ */ jsx(Tooltip, { text: label, children: mediaPickerButton });
+  return /* @__PURE__ */ jsx(Tooltip, { text: label, placement: "top", children: mediaPickerButton });
 }
 var archiveMimeTypes = [
   "application/zip",
@@ -135,6 +157,50 @@ function MediaTitle({ attachment }) {
 function MediaEditPlaceholder(props) {
   return /* @__PURE__ */ jsx(MediaPickerButton, { ...props, children: /* @__PURE__ */ jsx("span", { className: "fields__media-edit-placeholder", children: props.label }) });
 }
+function MoveButtons({
+  itemId,
+  index,
+  totalItems,
+  isUploading,
+  moveItem,
+  orientation = "vertical"
+}) {
+  const isHorizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        __next40pxDefaultSize: true,
+        icon: isHorizontal ? chevronLeft : chevronUp,
+        label: isHorizontal ? __("Move left") : __("Move up"),
+        size: "small",
+        disabled: isUploading || index === 0,
+        accessibleWhenDisabled: true,
+        tooltipPosition: "top",
+        onClick: (event) => {
+          event.stopPropagation();
+          moveItem(itemId, "up");
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        __next40pxDefaultSize: true,
+        icon: isHorizontal ? chevronRight : chevronDown,
+        label: isHorizontal ? __("Move right") : __("Move down"),
+        size: "small",
+        disabled: isUploading || index === totalItems - 1,
+        accessibleWhenDisabled: true,
+        tooltipPosition: "top",
+        onClick: (event) => {
+          event.stopPropagation();
+          moveItem(itemId, "down");
+        }
+      }
+    )
+  ] });
+}
 function MediaPreview({ attachment }) {
   const url = attachment.source_url;
   const mimeType = attachment.mime_type || "";
@@ -161,9 +227,11 @@ function ExpandedMediaEditAttachments({
   addButtonLabel,
   multiple,
   removeItem,
+  moveItem,
   open,
   onFilesDrop,
-  isUploading
+  isUploading,
+  setTargetItemId
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -174,12 +242,14 @@ function ExpandedMediaEditAttachments({
         "is-empty": !allItems?.length
       }),
       children: [
-        allItems?.map((attachment) => {
+        allItems?.map((attachment, index) => {
           const hasPreviewImage = attachment.mime_type?.startsWith("image");
           const isBlob = isBlobURL(attachment.source_url);
+          const attachmentNumericId = attachment.id;
           return /* @__PURE__ */ jsxs(
-            "div",
+            AnimatedMediaItem,
             {
+              index,
               className: clsx("fields__media-edit-expanded-item", {
                 "has-preview-image": hasPreviewImage
               }),
@@ -187,56 +257,72 @@ function ExpandedMediaEditAttachments({
                 /* @__PURE__ */ jsx(
                   MediaPickerButton,
                   {
-                    open,
-                    label: __("Replace"),
+                    open: () => {
+                      setTargetItemId(attachmentNumericId);
+                      open();
+                    },
+                    label: !isBlob ? sprintf(
+                      /* translators: %s: The title of the media item. */
+                      __("Replace %s"),
+                      attachment.title.rendered
+                    ) : __("Replace"),
                     showTooltip: true,
                     onFilesDrop,
                     attachment,
                     isUploading,
-                    children: /* @__PURE__ */ jsx("div", { className: "fields__media-edit-expanded-preview", children: /* @__PURE__ */ jsxs(
+                    children: /* @__PURE__ */ jsx("div", { className: "fields__media-edit-expanded-preview", children: /* @__PURE__ */ jsx(
                       VStack,
                       {
                         spacing: 0,
                         alignment: "center",
                         justify: "center",
                         className: "fields__media-edit-expanded-preview-stack",
-                        children: [
-                          (!isBlob || hasPreviewImage) && /* @__PURE__ */ jsx(
-                            MediaPreview,
-                            {
-                              attachment
-                            }
-                          ),
-                          !isBlob && (!hasPreviewImage ? /* @__PURE__ */ jsx(
-                            MediaTitle,
-                            {
-                              attachment
-                            }
-                          ) : /* @__PURE__ */ jsx("div", { className: "fields__media-edit-expanded-overlay", children: /* @__PURE__ */ jsx("div", { className: "fields__media-edit-expanded-title", children: /* @__PURE__ */ jsx(
-                            MediaTitle,
-                            {
-                              attachment
-                            }
-                          ) }) }))
-                        ]
+                        children: (!isBlob || hasPreviewImage) && /* @__PURE__ */ jsx(
+                          MediaPreview,
+                          {
+                            attachment
+                          }
+                        )
                       }
                     ) })
                   }
                 ),
-                !isBlob && /* @__PURE__ */ jsx("div", { className: "fields__media-edit-expanded-overlay", children: /* @__PURE__ */ jsx(
-                  Button,
+                !isBlob && /* @__PURE__ */ jsx("div", { className: "fields__media-edit-expanded-overlay", children: /* @__PURE__ */ jsxs(
+                  HStack,
                   {
-                    __next40pxDefaultSize: true,
-                    className: "fields__media-edit-expanded-remove",
-                    icon: closeSmall,
-                    label: __("Remove"),
-                    size: "small",
-                    disabled: isUploading,
-                    accessibleWhenDisabled: true,
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      removeItem(attachment.id);
-                    }
+                    className: "fields__media-edit-expanded-actions",
+                    spacing: 0,
+                    alignment: "flex-end",
+                    expanded: false,
+                    children: [
+                      multiple && allItems.length > 1 && /* @__PURE__ */ jsx(
+                        MoveButtons,
+                        {
+                          itemId: attachmentNumericId,
+                          index,
+                          totalItems: allItems.length,
+                          isUploading,
+                          moveItem,
+                          orientation: "horizontal"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          __next40pxDefaultSize: true,
+                          icon: closeSmall,
+                          label: __("Remove"),
+                          size: "small",
+                          disabled: isUploading,
+                          accessibleWhenDisabled: true,
+                          tooltipPosition: "top",
+                          onClick: (event) => {
+                            event.stopPropagation();
+                            removeItem(attachmentNumericId);
+                          }
+                        }
+                      )
+                    ]
                   }
                 ) })
               ]
@@ -247,7 +333,10 @@ function ExpandedMediaEditAttachments({
         (multiple || !allItems?.length) && /* @__PURE__ */ jsx(
           MediaEditPlaceholder,
           {
-            open,
+            open: () => {
+              setTargetItemId(void 0);
+              open();
+            },
             label: addButtonLabel,
             onFilesDrop,
             isUploading
@@ -262,69 +351,113 @@ function CompactMediaEditAttachments({
   addButtonLabel,
   multiple,
   removeItem,
+  moveItem,
   open,
   onFilesDrop,
-  isUploading
+  isUploading,
+  setTargetItemId
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !!allItems?.length && /* @__PURE__ */ jsx(VStack, { spacing: 2, children: allItems.map((attachment) => {
-      const isBlob = isBlobURL(attachment.source_url);
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "fields__media-edit-compact",
-          children: [
-            /* @__PURE__ */ jsx(
-              MediaPickerButton,
-              {
-                open,
-                label: __("Replace"),
-                showTooltip: true,
-                onFilesDrop,
-                attachment,
-                isUploading,
-                children: /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    MediaPreview,
-                    {
-                      attachment
-                    }
-                  ),
-                  !isBlob && /* @__PURE__ */ jsx(
-                    MediaTitle,
-                    {
-                      attachment
-                    }
-                  )
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                __next40pxDefaultSize: true,
-                className: "fields__media-edit-remove",
-                text: __("Remove"),
-                variant: "secondary",
-                disabled: isUploading,
-                accessibleWhenDisabled: true,
-                onClick: (event) => {
-                  event.stopPropagation();
-                  if (typeof attachment.id === "number") {
-                    removeItem(attachment.id);
+    !!allItems?.length && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx("fields__media-edit-compact-group", {
+          "is-single": allItems.length === 1
+        }),
+        children: /* @__PURE__ */ jsx(VStack, { spacing: 0, children: allItems.map((attachment, index) => {
+          const isBlob = isBlobURL(attachment.source_url);
+          const showMoveButtons = multiple && allItems.length > 1;
+          const attachmentNumericId = attachment.id;
+          return /* @__PURE__ */ jsxs(
+            AnimatedMediaItem,
+            {
+              index,
+              className: "fields__media-edit-compact",
+              children: [
+                /* @__PURE__ */ jsx(
+                  MediaPickerButton,
+                  {
+                    open: () => {
+                      setTargetItemId(
+                        attachmentNumericId
+                      );
+                      open();
+                    },
+                    label: __("Replace"),
+                    showTooltip: true,
+                    onFilesDrop,
+                    attachment,
+                    isUploading,
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        MediaPreview,
+                        {
+                          attachment
+                        }
+                      ),
+                      !isBlob && /* @__PURE__ */ jsx(
+                        MediaTitle,
+                        {
+                          attachment
+                        }
+                      )
+                    ] })
                   }
-                }
-              }
-            )
-          ]
-        },
-        attachment.id
-      );
-    }) }),
+                ),
+                !isBlob && /* @__PURE__ */ jsxs(
+                  HStack,
+                  {
+                    className: "fields__media-edit-compact-movers",
+                    spacing: 0,
+                    alignment: "flex-end",
+                    expanded: false,
+                    children: [
+                      showMoveButtons && /* @__PURE__ */ jsx(
+                        MoveButtons,
+                        {
+                          itemId: attachmentNumericId,
+                          index,
+                          totalItems: allItems.length,
+                          isUploading,
+                          moveItem,
+                          orientation: "vertical"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          __next40pxDefaultSize: true,
+                          icon: closeSmall,
+                          label: __("Remove"),
+                          size: "small",
+                          disabled: isUploading,
+                          accessibleWhenDisabled: true,
+                          tooltipPosition: "top",
+                          onClick: (event) => {
+                            event.stopPropagation();
+                            removeItem(
+                              attachmentNumericId
+                            );
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            },
+            attachment.id
+          );
+        }) })
+      }
+    ),
     (multiple || !allItems?.length) && /* @__PURE__ */ jsx(
       MediaEditPlaceholder,
       {
-        open,
+        open: () => {
+          setTargetItemId(void 0);
+          open();
+        },
         label: addButtonLabel,
         onFilesDrop,
         isUploading
@@ -359,111 +492,162 @@ function MediaEdit({
       if (!value) {
         return null;
       }
-      const normalizedValue = Array.isArray(value) ? value : [value];
+      const normalizedValue = normalizeValue(value);
+      const sortedIds = [...normalizedValue].sort((a, b) => a - b);
       const { getEntityRecords } = select(coreStore);
       return getEntityRecords("postType", "attachment", {
-        include: normalizedValue
+        include: sortedIds
       });
     },
     [value]
   );
+  const stableAttachmentsRef = useRef(
+    null
+  );
+  if (attachments !== null) {
+    stableAttachmentsRef.current = attachments;
+  }
+  let stableAttachments = attachments;
+  if (attachments === null && stableAttachmentsRef.current && value) {
+    const stableIds = new Set(
+      stableAttachmentsRef.current.map((a) => a.id)
+    );
+    if (normalizeValue(value).every((id) => stableIds.has(id))) {
+      stableAttachments = stableAttachmentsRef.current;
+    }
+  }
+  const orderedAttachments = useMemo(() => {
+    if (!stableAttachments) {
+      return null;
+    }
+    const normalizedValue = normalizeValue(value);
+    const attachmentMap = new Map(
+      stableAttachments.map((a) => [a.id, a])
+    );
+    return normalizedValue.map((id) => attachmentMap.get(id)).filter((a) => a !== void 0);
+  }, [stableAttachments, value]);
   const { createErrorNotice } = useDispatch(noticesStore);
-  const [replacementId, setReplacementId] = useState();
+  const { receiveEntityRecords } = useDispatch(coreStore);
+  const [targetItemId, setTargetItemId] = useState();
+  const openModalRef = useRef(void 0);
+  const [pendingOpen, setPendingOpen] = useState(false);
   const [blobs, setBlobs] = useState([]);
+  useEffect(() => {
+    if (pendingOpen) {
+      setPendingOpen(false);
+      openModalRef.current?.();
+    }
+  }, [pendingOpen]);
   const onChangeControl = useCallback(
     (newValue) => onChange(field.setValue({ item: data, value: newValue })),
     [data, field, onChange]
   );
   const removeItem = useCallback(
     (itemId) => {
-      const currentIds = Array.isArray(value) ? value : [value];
+      const currentIds = normalizeValue(value);
       const newIds = currentIds.filter((id) => id !== itemId);
       setIsTouched(true);
       onChangeControl(newIds.length ? newIds : void 0);
     },
     [value, onChangeControl]
   );
+  const moveItem = useCallback(
+    (itemId, direction) => {
+      if (!orderedAttachments) {
+        return;
+      }
+      const currentIds = orderedAttachments.map((a) => a.id);
+      const index = currentIds.indexOf(itemId);
+      const newIndex = direction === "up" ? index - 1 : index + 1;
+      [currentIds[index], currentIds[newIndex]] = [
+        currentIds[newIndex],
+        currentIds[index]
+      ];
+      onChangeControl(currentIds);
+    },
+    [orderedAttachments, onChangeControl]
+  );
   const onFilesDrop = useCallback(
-    (files, _replacementId) => {
+    (files, _targetItemId) => {
+      setTargetItemId(_targetItemId);
       uploadMedia({
         allowedTypes: allowedTypes?.length ? allowedTypes : void 0,
         filesList: files,
         onFileChange(uploadedMedia) {
-          setReplacementId(_replacementId);
-          const { blobItems, uploadedItems } = uploadedMedia.reduce(
-            (accumulator, item) => {
-              if (isBlobURL(item.url)) {
-                accumulator.blobItems.push(item.url);
-              } else {
-                accumulator.uploadedItems.push(item.id);
-              }
-              return accumulator;
-            },
-            {
-              blobItems: [],
-              uploadedItems: []
-            }
-          );
-          setBlobs(blobItems);
-          if (uploadedItems.length === uploadedMedia.length) {
-            setReplacementId(void 0);
-          }
-          if (!uploadedItems.length) {
+          const blobUrls = uploadedMedia.filter((item) => isBlobURL(item.url)).map((item) => item.url);
+          setBlobs(blobUrls);
+          if (!!blobUrls.length) {
             return;
           }
+          receiveEntityRecords(
+            "postType",
+            "attachment",
+            [],
+            void 0,
+            true
+          );
+          const uploadedIds = uploadedMedia.map(
+            (item) => item.id
+          );
           if (!multiple) {
-            onChangeControl(uploadedItems[0]);
+            onChangeControl(uploadedIds[0]);
+            setTargetItemId(void 0);
             return;
           }
-          if (!value) {
-            onChangeControl(uploadedItems);
-            return;
+          const currentValue = normalizeValue(value);
+          if (_targetItemId === void 0) {
+            onChangeControl([...currentValue, ...uploadedIds]);
+          } else {
+            const newValue = [...currentValue];
+            newValue.splice(
+              currentValue.indexOf(_targetItemId),
+              1,
+              ...uploadedIds
+            );
+            onChangeControl(newValue);
           }
-          const normalizedValue = Array.isArray(value) ? value : [value];
-          const newIds = [
-            ..._replacementId ? normalizedValue.filter(
-              (id) => id !== _replacementId
-            ) : normalizedValue,
-            ...uploadedItems
-          ];
-          onChangeControl(newIds);
+          setTargetItemId(void 0);
         },
         onError(error) {
-          setReplacementId(void 0);
+          setTargetItemId(void 0);
           setBlobs([]);
           createErrorNotice(error.message, { type: "snackbar" });
         },
         multiple: !!multiple
       });
     },
-    [allowedTypes, value, multiple, createErrorNotice, onChangeControl]
+    [
+      allowedTypes,
+      value,
+      multiple,
+      createErrorNotice,
+      onChangeControl,
+      receiveEntityRecords
+    ]
   );
   const addButtonLabel = field.placeholder || (multiple ? __("Choose files") : __("Choose file"));
   const allItems = useMemo(() => {
     if (!blobs.length) {
-      return attachments;
+      return orderedAttachments;
     }
     const items = [
-      ...attachments || []
+      ...orderedAttachments || []
     ];
     const blobItems = blobs.map((url) => ({
       id: url,
       source_url: url,
       mime_type: getBlobTypeByURL(url)
     }));
-    const replacementIndex = items.findIndex(
-      (a) => a.id === replacementId
-    );
-    if (replacementIndex !== -1) {
-      return [
-        ...items.slice(0, replacementIndex),
-        ...blobItems,
-        ...items.slice(replacementIndex + 1)
-      ];
+    if (targetItemId !== void 0) {
+      const targetIndex = items.findIndex(
+        (a) => a.id === targetItemId
+      );
+      items.splice(targetIndex, 1, ...blobItems);
+    } else {
+      items.push(...blobItems);
     }
-    items.push(...blobItems);
     return items;
-  }, [attachments, replacementId, blobs]);
+  }, [orderedAttachments, targetItemId, blobs]);
   useEffect(() => {
     if (!isTouched) {
       return;
@@ -503,21 +687,55 @@ function MediaEdit({
       ConditionalMediaUpload,
       {
         onSelect: (selectedMedia) => {
-          if (multiple) {
-            const newIds = Array.isArray(selectedMedia) ? selectedMedia.map((m) => m.id) : [selectedMedia.id];
-            onChangeControl(newIds);
-          } else {
+          if (!multiple) {
             onChangeControl(selectedMedia.id);
+            setTargetItemId(void 0);
+            return;
+          }
+          const newIds = Array.isArray(selectedMedia) ? selectedMedia.map((m) => m.id) : [selectedMedia.id];
+          const currentValue = normalizeValue(value);
+          if (!currentValue.length) {
+            onChangeControl(newIds);
+          } else if (targetItemId === void 0) {
+            const existingItems = currentValue.filter(
+              (id) => newIds.includes(id)
+            );
+            const newItems = newIds.filter(
+              (id) => !currentValue.includes(id)
+            );
+            onChangeControl([
+              ...existingItems,
+              ...newItems
+            ]);
+          } else if (selectedMedia.id !== targetItemId) {
+            const filtered = currentValue.filter(
+              (id) => id !== selectedMedia.id
+            );
+            onChangeControl(
+              filtered.map(
+                (id) => id === targetItemId ? selectedMedia.id : id
+              )
+            );
           }
+          setTargetItemId(void 0);
         },
+        onClose: () => setTargetItemId(void 0),
         allowedTypes,
-        value,
-        multiple,
+        value: targetItemId !== void 0 ? targetItemId : value,
+        multiple: multiple && targetItemId === void 0,
         title: field.label,
         render: ({ open }) => {
+          openModalRef.current = 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 })),
+            field.label && (hideLabelFromVision ? /* @__PURE__ */ jsx(VisuallyHidden, { as: "legend", children: field.label }) : /* @__PURE__ */ jsx(
+              BaseControl.VisualLabel,
+              {
+                as: "legend",
+                style: { marginBottom: 0 },
+                children: field.label
+              }
+            )),
             /* @__PURE__ */ jsx(
               AttachmentsComponent,
               {
@@ -525,9 +743,11 @@ function MediaEdit({
                 addButtonLabel,
                 multiple,
                 removeItem,
-                open,
+                moveItem,
+                open: () => setPendingOpen(true),
                 onFilesDrop,
-                isUploading: !!blobs.length
+                isUploading: !!blobs.length,
+                setTargetItemId
               }
             ),
             field.description && /* @__PURE__ */ jsx(Text, { variant: "muted", children: field.description })