@wix/patterns-fields 1.123.0 → 1.125.0

package/src/components/media-image-field/cell-media-image-edit.tsx

@@ -5,19 +5,9 @@ import {
   IconButton,
   Input,
   Popover,
-  PopoverMenu,
   Tooltip,
 } from '@wix/design-system';
-import {
-  Add,
-  Delete,
-  Download,
-  Link,
-  LinkSmall,
-  Maximize,
-  MoreSmall,
-  Replace,
-} from '@wix/wix-ui-icons-common/lazy';
+import { Add, LinkSmall } from '@wix/wix-ui-icons-common/lazy';
 import { ThumbnailSize } from '../../auto-field-types';
 import { useTranslations } from '../../hooks';
 import type { MediaImageValue } from '../../types/media-image';
@@ -30,14 +20,18 @@ import {
   toMediaImageValue,
   withAltText,
 } from '../../utils/media-image-value';
-import { executeDownloading, MEDIA_TYPES } from '../../utils/media-utils';
+import { MEDIA_TYPES } from '../../utils/media-utils';
 import {
   CellMediaEditShell,
   MediaFieldType,
   useCellMediaEdit,
 } from '../media-control';
-import { MediaPreviewModal } from '../media-gallery/media-preview-modal';
 import { MediaImage } from '../media-image';
+import {
+  MediaImageActions,
+  MediaImagePreviewModal,
+  useMediaImageDownload,
+} from './media-image-actions';
 import { MediaImageView } from './media-image-view';
 import { st, classes } from './cell-media-image-edit.st.css.js';
 
@@ -64,45 +58,6 @@ type Layer = PopoverLayer | 'pasteUrl' | 'loading';
 const imageFromUrl = (url: string, current: MediaImageValue | null) =>
   replaceImage(current, fromImageUrl(url));
 
-interface MenuTriggerProps {
-  isOpen: boolean;
-  toggle: () => void;
-  /** Lets WDS put focus back here when the menu closes. */
-  buttonRef?: React.RefObject<HTMLElement>;
-  onOpenChange: (isOpen: boolean) => void;
-  ariaLabel: string;
-}
-
-/** WDS shows the menu's open state only to its trigger, so the trigger
- *  reports it. */
-const MenuTrigger: React.FC<MenuTriggerProps> = ({
-  isOpen,
-  toggle,
-  buttonRef,
-  onOpenChange,
-  ariaLabel,
-}) => {
-  useEffect(() => {
-    onOpenChange(isOpen);
-  }, [isOpen, onOpenChange]);
-
-  return (
-    <IconButton
-      ref={buttonRef}
-      size="small"
-      skin="light"
-      priority="secondary"
-      dataHook="media-image-edit-more-button"
-      ariaLabel={ariaLabel}
-      aria-haspopup="menu"
-      aria-expanded={isOpen}
-      onClick={toggle}
-    >
-      <MoreSmall />
-    </IconButton>
-  );
-};
-
 /**
  * Edits a `MEDIA_IMAGE` cell. An empty cell shows the add and paste-URL
  * buttons. A cell with an image opens a popover with the image and its alt
@@ -158,14 +113,7 @@ export const CellMediaImageEdit: React.FC<CellMediaImageEditProps> = ({
     value: isExternalMediaImage(image) ? image.url : undefined,
   });
 
-  const handleDownload = useCallback(() => {
-    // The Media Manager can't make a download link for an external URL.
-    if (isExternalMediaImage(image)) {
-      executeDownloading(image.url);
-    } else if (src) {
-      downloadMedia(src);
-    }
-  }, [src, image, downloadMedia]);
+  const handleDownload = useMediaImageDownload(image, downloadMedia);
 
   const commit = useCallback(() => {
     setPopoverLayer('none');
@@ -265,7 +213,9 @@ export const CellMediaImageEdit: React.FC<CellMediaImageEditProps> = ({
                 shown={openLayer === 'popover' || openLayer === 'menu'}
                 appendTo="window"
                 placement="bottom-start"
-                moveBy={{ x: 0, y: 4 }}
+                // The anchor sits inside the cell's 1px border. Figma puts the
+                // popover 4px under the border, aligned with its left edge.
+                moveBy={{ x: -1, y: 5 }}
                 zIndex={5001}
                 animate
                 flip
@@ -301,64 +251,16 @@ export const CellMediaImageEdit: React.FC<CellMediaImageEditProps> = ({
                             menuOpen: popoverLayer === 'menu',
                           })}
                         >
-                          <Tooltip
-                            content={t('CMS.image.replace')}
-                            appendTo="window"
-                          >
-                            <IconButton
-                              size="small"
-                              skin="light"
-                              priority="secondary"
-                              dataHook="media-image-edit-replace-button"
-                              ariaLabel={t('CMS.image.replace')}
-                              onClick={handleCallMedia}
-                            >
-                              <Replace />
-                            </IconButton>
-                          </Tooltip>
-                          <PopoverMenu
-                            textSize="small"
-                            appendTo="window"
-                            zIndex={5002}
-                            triggerElement={({ isOpen, toggle, ref }) => (
-                              <MenuTrigger
-                                isOpen={isOpen}
-                                toggle={toggle}
-                                buttonRef={ref}
-                                onOpenChange={handleMenuOpenChange}
-                                ariaLabel={t(
-                                  'auto-patterns.fields.more_actions_tooltip',
-                                )}
-                              />
-                            )}
-                          >
-                            <PopoverMenu.MenuItem
-                              dataHook="media-image-edit-action-replace-url"
-                              text={t('CMS.image.replaceWithUrl.button')}
-                              prefixIcon={<Link />}
-                              onClick={openPasteUrl}
-                            />
-                            <PopoverMenu.MenuItem
-                              dataHook="media-image-edit-action-preview"
-                              text={t('CMS.mediaGallery.preview')}
-                              prefixIcon={<Maximize />}
-                              onClick={() => setPopoverLayer('preview')}
-                            />
-                            <PopoverMenu.MenuItem
-                              dataHook="media-image-edit-action-download"
-                              text={t('CMS.image.download')}
-                              prefixIcon={<Download />}
-                              onClick={handleDownload}
-                            />
-                            <PopoverMenu.Divider />
-                            <PopoverMenu.MenuItem
-                              dataHook="media-image-edit-action-delete"
-                              text={t('CMS.image.clear')}
-                              skin="destructive"
-                              prefixIcon={<Delete />}
-                              onClick={handleDelete}
-                            />
-                          </PopoverMenu>
+                          <MediaImageActions
+                            dataHook="media-image-edit"
+                            onReplace={handleCallMedia}
+                            onReplaceWithUrl={openPasteUrl}
+                            onPreview={() => setPopoverLayer('preview')}
+                            onDownload={handleDownload}
+                            onDelete={handleDelete}
+                            onMenuOpenChange={handleMenuOpenChange}
+                            menuZIndex={5002}
+                          />
                         </div>
                       </div>
                     </FormField>
@@ -382,18 +284,13 @@ export const CellMediaImageEdit: React.FC<CellMediaImageEditProps> = ({
         )}
       </CellMediaEditShell>
       {image && (
-        <MediaPreviewModal
+        <MediaImagePreviewModal
           isOpen={popoverLayer === 'preview'}
-          value={src}
+          image={image}
           onClose={() => setPopoverLayer('popover')}
-          onRequestMedia={handleCallMedia}
-          onClearMedia={handleDelete}
-          onDownloadMedia={handleDownload}
-          textKeys={{
-            replace: 'CMS.image.replace',
-            download: 'CMS.image.download',
-            delete: 'CMS.image.clear',
-          }}
+          onReplace={handleCallMedia}
+          onDelete={handleDelete}
+          onDownload={handleDownload}
         />
       )}
     </>

package/src/components/media-image-field/form-media-image-field.tsx

@@ -1,9 +1,17 @@
 import type { FC } from 'react';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import type { FormFieldProps } from '@wix/design-system';
-import { Box, FormField, ImageViewer, Input } from '@wix/design-system';
+import {
+  Box,
+  FormField,
+  Image,
+  ImageViewer,
+  Input,
+  MediaOverlay,
+} from '@wix/design-system';
 import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
 
+import { Z_INDEX_MODAL_POPOVER } from '../common';
 import type { ControlledInputProps } from '../../types/controlled-input';
 import type { MediaImageValue } from '../../types/media-image';
 import { useMergedRef, useTranslations } from '../../hooks';
@@ -11,12 +19,25 @@ import { getImageSource } from '../../utils/get-image-source';
 import { getImageUrl } from '../../utils/get-image-url';
 import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
 import {
+  fromImageUrl,
   fromMediaManagerPick,
+  isExternalMediaImage,
+  replaceImage,
   toMediaImageValue,
   withAltText,
 } from '../../utils/media-image-value';
 import { MEDIA_TYPES } from '../../utils/media-utils';
-import { useMediaControl } from '../media-control';
+import {
+  MediaFieldType,
+  PasteURLForm,
+  useMediaControl,
+  usePasteURLForm,
+} from '../media-control';
+import {
+  MediaImageActions,
+  MediaImagePreviewModal,
+  useMediaImageDownload,
+} from './media-image-actions';
 
 interface ImageViewerActions {
   focus: () => void;
@@ -77,7 +98,7 @@ export const FormMediaImageField: FC<FormMediaImageFieldProps> = ({
     [onChange],
   );
 
-  const { callMedia, onMediaLoad } = useMediaControl({
+  const { callMedia, downloadMedia } = useMediaControl({
     mediaType: MEDIA_TYPES.IMAGE,
     value: getImageSource(image),
     onChange: handlePick,
@@ -85,9 +106,28 @@ export const FormMediaImageField: FC<FormMediaImageFieldProps> = ({
     readOnly,
     onBlur,
     inputRef,
-    initialLoading: true,
   });
 
+  const pasteUrlForm = usePasteURLForm({
+    onChange: (url) =>
+      onChange(replaceImage(imageRef.current, fromImageUrl(url))),
+  });
+  const openPasteUrl = pasteUrlForm.onOpen({
+    title: t('CMS.image.replaceWithUrl.title'),
+    value: isExternalMediaImage(image) ? image.url : undefined,
+  });
+
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const handleDownload = useMediaImageDownload(image, downloadMedia);
+  const handleDelete = useCallback(() => {
+    setIsPreviewOpen(false);
+    onChange(null);
+  }, [onChange]);
+  const handlePreviewReplace = useCallback(() => {
+    setIsPreviewOpen(false);
+    callMedia();
+  }, [callMedia]);
+
   const canEdit = !isMobile && !readOnly;
 
   const handleAltTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -100,24 +140,47 @@ export const FormMediaImageField: FC<FormMediaImageFieldProps> = ({
     <Box dataHook={dataHook} gap="SP4" width="100%">
       <Box width="100%" maxWidth={MEDIA_MAX_WIDTH} flexShrink={0}>
         <FormField {...imageFormFieldProps} dataHook="media-image-field-image">
-          <ImageViewer
-            ref={setInputRef}
-            dataHook="media-image-field-viewer"
-            imageUrl={image ? getImageUrl(image) : undefined}
-            onImageLoad={onMediaLoad}
-            onAddImage={canEdit ? callMedia : undefined}
-            onUpdateImage={canEdit ? callMedia : undefined}
-            disabled={image ? Boolean(readOnly) : !canEdit}
-            showUpdateButton={canEdit}
-            showRemoveButton={!readOnly}
-            updateImageInfo={translate('cairo.replace-image.tooltip')}
-            removeImageInfo={translate('cairo.remove-image.tooltip')}
-            addImageInfo={translate('cairo.add-image.tooltip')}
-            height={MEDIA_HEIGHT}
-            width="100%"
-            fit="cover"
-            onRemoveImage={() => onChange(null)}
-          />
+          {image ? (
+            <MediaOverlay
+              dataHook="media-image-field-overlay"
+              hoverSkin="dark"
+              media={
+                <Image
+                  dataHook="media-image-field-current-image"
+                  src={getImageUrl(image)}
+                  width="100%"
+                  height={MEDIA_HEIGHT}
+                  fit="cover"
+                />
+              }
+            >
+              <MediaOverlay.Content placement="middle" visible="hover">
+                <Box gap="SP2">
+                  <MediaImageActions
+                    dataHook="media-image-field"
+                    onReplace={canEdit ? callMedia : undefined}
+                    onReplaceWithUrl={readOnly ? undefined : openPasteUrl}
+                    onPreview={() => setIsPreviewOpen(true)}
+                    onDownload={handleDownload}
+                    onDelete={readOnly ? undefined : handleDelete}
+                    menuZIndex={Z_INDEX_MODAL_POPOVER}
+                  />
+                </Box>
+              </MediaOverlay.Content>
+            </MediaOverlay>
+          ) : (
+            <ImageViewer
+              // Only the empty state has a focusable control, so this is the
+              // only place inputRef can land.
+              ref={setInputRef}
+              dataHook="media-image-field-viewer"
+              onAddImage={canEdit ? callMedia : undefined}
+              disabled={!canEdit}
+              addImageInfo={translate('cairo.add-image.tooltip')}
+              height={MEDIA_HEIGHT}
+              width="100%"
+            />
+          )}
         </FormField>
       </Box>
       {image && (
@@ -133,6 +196,25 @@ export const FormMediaImageField: FC<FormMediaImageFieldProps> = ({
           </FormField>
         </Box>
       )}
+      <PasteURLForm
+        title={pasteUrlForm.title}
+        value={pasteUrlForm.value}
+        show={pasteUrlForm.isOpen}
+        closeModal={pasteUrlForm.onClose}
+        onSave={pasteUrlForm.onSave}
+        fieldType={MediaFieldType.image}
+      />
+      {image && (
+        <MediaImagePreviewModal
+          isOpen={isPreviewOpen}
+          image={image}
+          onClose={() => setIsPreviewOpen(false)}
+          onReplace={handlePreviewReplace}
+          onDelete={handleDelete}
+          onDownload={handleDownload}
+          readOnly={!canEdit}
+        />
+      )}
     </Box>
   );
 };

package/src/components/media-image-field/form-media-image-field.uni.driver.ts

@@ -1,11 +1,16 @@
 import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
+  ButtonUniDriver,
+  CustomModalLayoutUniDriver,
   FormFieldUniDriver,
+  IconButtonUniDriver,
   ImageViewerUniDriver,
+  InputUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
 import { baseUniDriverFactory } from '../../testkit/base-driver';
 
+/** The more actions menu, the URL form and the preview render in the body. */
 export function FormMediaImageFieldUniDriver(base: UniDriver, body: UniDriver) {
   const formField = FormFieldUniDriver(
     base.$('[data-hook="media-image-field-image"]'),
@@ -15,7 +20,15 @@ export function FormMediaImageFieldUniDriver(base: UniDriver, body: UniDriver) {
     base.$('[data-hook="media-image-field-viewer"]'),
     body,
   );
+  const replaceButton = IconButtonUniDriver(
+    base.$('[data-hook="media-image-field-replace-button"]'),
+    body,
+  );
   const altInput = base.$('[data-hook="media-image-field-alt-input"] input');
+  const menuItem = (action: string) =>
+    body.$(`[data-hook="media-image-field-action-${action}"]`);
+  const openMenu = () =>
+    base.$('[data-hook="media-image-field-more-button"]').click();
 
   return {
     ...baseUniDriverFactory(base),
@@ -23,20 +36,42 @@ export function FormMediaImageFieldUniDriver(base: UniDriver, body: UniDriver) {
     isRequired: () => formField.isRequired(),
     hasError: () => formField.hasStatus('error'),
     getErrorMessage: () => formField.getStatusMessage(),
-    getImageUrl: () => imageViewer.getImageUrl(),
-    isAddItemVisible: () => imageViewer.isAddItemVisible(),
     clickAdd: () => imageViewer.clickAdd(),
-    clickReplace: () => imageViewer.clickUpdate(),
-    clickRemove: () => imageViewer.clickRemove(),
+    clickReplace: () => replaceButton.click(),
+    isReplaceDisabled: () => replaceButton.isButtonDisabled(),
+    replaceWithUrl: async (url: string) => {
+      await openMenu();
+      await menuItem('replace-url').click();
+      await InputUniDriver(
+        body.$('[data-hook="paste-url-form.urlInput"]'),
+        body,
+      ).enterText(url);
+      await (
+        await CustomModalLayoutUniDriver(
+          body.$('[data-hook="paste-url-form.layout"]'),
+          body,
+        ).getPrimaryButtonDriver()
+      ).click();
+    },
+    openPreview: async () => {
+      await openMenu();
+      await menuItem('preview').click();
+    },
+    isPreviewOpen: () => body.$('[data-hook="preview-modal-content"]').exists(),
+    pressEscapeInPreview: () =>
+      body.$('[data-hook="preview-modal-content"]').pressKey('Escape'),
+    clickPreviewReplace: () =>
+      ButtonUniDriver(
+        body.$('[data-hook="preview-modal-replace-button"]'),
+        body,
+      ).click(),
+    clickDelete: async () => {
+      await openMenu();
+      await menuItem('delete').click();
+    },
     hasAltTextInput: () => altInput.exists(),
     getAltText: () => altInput.value(),
     getAltTextPlaceholder: () => altInput.attr('placeholder'),
     enterAltText: (text: string) => altInput.enterValue(text),
-    // ImageViewer hides its edit buttons behind a loader until the image
-    // loads, and jsdom never fires that event on its own.
-    simulateImageLoad: async () =>
-      (
-        await base.$('[data-hook="image-viewer-current-image"]').getNative()
-      ).dispatchEvent(new Event('load')),
   };
 }

package/src/components/media-image-field/media-image-actions.tsx

@@ -0,0 +1,205 @@
+import React, { useCallback, useEffect } from 'react';
+import { IconButton, PopoverMenu, Tooltip } from '@wix/design-system';
+import {
+  Delete,
+  Download,
+  Link,
+  Maximize,
+  MoreSmall,
+  Replace,
+} from '@wix/wix-ui-icons-common/lazy';
+import { useTranslations } from '../../hooks';
+import type { MediaImageValue } from '../../types/media-image';
+import { getImageSource } from '../../utils/get-image-source';
+import { isExternalMediaImage } from '../../utils/media-image-value';
+import { executeDownloading } from '../../utils/media-utils';
+import { MediaPreviewModal } from '../media-gallery/media-preview-modal';
+
+interface MenuTriggerProps {
+  isOpen: boolean;
+  toggle: () => void;
+  /** Lets WDS put focus back here when the menu closes. */
+  buttonRef?: React.RefObject<HTMLElement>;
+  onOpenChange?: (isOpen: boolean) => void;
+  ariaLabel: string;
+  dataHook: string;
+}
+
+/** WDS shows the menu's open state only to its trigger, so the trigger
+ *  reports it. */
+const MenuTrigger: React.FC<MenuTriggerProps> = ({
+  isOpen,
+  toggle,
+  buttonRef,
+  onOpenChange,
+  ariaLabel,
+  dataHook,
+}) => {
+  useEffect(() => {
+    onOpenChange?.(isOpen);
+  }, [isOpen, onOpenChange]);
+
+  return (
+    <IconButton
+      ref={buttonRef}
+      size="small"
+      skin="light"
+      priority="secondary"
+      dataHook={dataHook}
+      ariaLabel={ariaLabel}
+      aria-haspopup="menu"
+      aria-expanded={isOpen}
+      onClick={toggle}
+    >
+      <MoreSmall />
+    </IconButton>
+  );
+};
+
+export interface MediaImageActionsProps {
+  /** Every action's data-hook starts with it. */
+  dataHook: string;
+  /** Opens the media manager. The button is disabled without it. */
+  onReplace?: () => void;
+  /** The menu item is disabled without it. */
+  onReplaceWithUrl?: () => void;
+  onPreview: () => void;
+  onDownload: () => void;
+  /** The menu item is disabled without it. */
+  onDelete?: () => void;
+  onMenuOpenChange?: (isOpen: boolean) => void;
+  menuZIndex: number;
+}
+
+/** The actions over a `MEDIA_IMAGE` image: Replace, and a menu with Replace
+ *  with URL, Preview, Download and Delete. */
+export const MediaImageActions: React.FC<MediaImageActionsProps> = ({
+  dataHook,
+  onReplace,
+  onReplaceWithUrl,
+  onPreview,
+  onDownload,
+  onDelete,
+  onMenuOpenChange,
+  menuZIndex,
+}) => {
+  const { t } = useTranslations();
+
+  return (
+    <>
+      <Tooltip content={t('CMS.image.replace')} appendTo="window">
+        <IconButton
+          size="small"
+          skin="light"
+          priority="secondary"
+          dataHook={`${dataHook}-replace-button`}
+          ariaLabel={t('CMS.image.replace')}
+          disabled={!onReplace}
+          onClick={onReplace}
+        >
+          <Replace />
+        </IconButton>
+      </Tooltip>
+      <PopoverMenu
+        textSize="small"
+        appendTo="window"
+        zIndex={menuZIndex}
+        triggerElement={({ isOpen, toggle, ref }) => (
+          <MenuTrigger
+            isOpen={isOpen}
+            toggle={toggle}
+            buttonRef={ref}
+            onOpenChange={onMenuOpenChange}
+            ariaLabel={t('auto-patterns.fields.more_actions_tooltip')}
+            dataHook={`${dataHook}-more-button`}
+          />
+        )}
+      >
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-replace-url`}
+          text={t('CMS.image.replaceWithUrl.button')}
+          prefixIcon={<Link />}
+          disabled={!onReplaceWithUrl}
+          onClick={() => onReplaceWithUrl?.()}
+        />
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-preview`}
+          text={t('CMS.mediaGallery.preview')}
+          prefixIcon={<Maximize />}
+          onClick={onPreview}
+        />
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-download`}
+          text={t('CMS.image.download')}
+          prefixIcon={<Download />}
+          onClick={onDownload}
+        />
+        <PopoverMenu.Divider />
+        <PopoverMenu.MenuItem
+          dataHook={`${dataHook}-action-delete`}
+          text={t('CMS.image.clear')}
+          skin="destructive"
+          prefixIcon={<Delete />}
+          disabled={!onDelete}
+          onClick={() => onDelete?.()}
+        />
+      </PopoverMenu>
+    </>
+  );
+};
+
+MediaImageActions.displayName = 'MediaImageActions';
+
+/** Downloads the image: through the Media Manager, or straight from an
+ *  external URL, which the Media Manager can't make a download link for. */
+export const useMediaImageDownload = (
+  image: MediaImageValue | null,
+  downloadMedia: (src: string) => void,
+) =>
+  useCallback(() => {
+    if (isExternalMediaImage(image)) {
+      executeDownloading(image.url);
+      return;
+    }
+    const src = getImageSource(image);
+    if (src) {
+      downloadMedia(src);
+    }
+  }, [image, downloadMedia]);
+
+export interface MediaImagePreviewModalProps {
+  isOpen: boolean;
+  image: MediaImageValue;
+  onClose: () => void;
+  onReplace: () => void;
+  onDelete?: () => void;
+  onDownload: () => void;
+  readOnly?: boolean;
+}
+
+export const MediaImagePreviewModal: React.FC<MediaImagePreviewModalProps> = ({
+  isOpen,
+  image,
+  onClose,
+  onReplace,
+  onDelete,
+  onDownload,
+  readOnly,
+}) => (
+  <MediaPreviewModal
+    isOpen={isOpen}
+    value={getImageSource(image)}
+    onClose={onClose}
+    onRequestMedia={onReplace}
+    onClearMedia={onDelete}
+    onDownloadMedia={onDownload}
+    readOnly={readOnly}
+    textKeys={{
+      replace: 'CMS.image.replace',
+      download: 'CMS.image.download',
+      delete: 'CMS.image.clear',
+    }}
+  />
+);
+
+MediaImagePreviewModal.displayName = 'MediaImagePreviewModal';