@wix/patterns-fields 1.124.0 → 1.125.0

package/dist/cjs/components/media-image-field/form-media-image-field.js

@@ -7,6 +7,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _designSystem = require("@wix/design-system");
 var _react2 = require("@wix/bex-core/react");
+var _common = require("../common");
 var _hooks = require("../../hooks");
 var _getImageSource = require("../../utils/get-image-source");
 var _getImageUrl = require("../../utils/get-image-url");
@@ -14,6 +15,7 @@ var _mediaConstants = require("../../utils/media-constants");
 var _mediaImageValue = require("../../utils/media-image-value");
 var _mediaUtils = require("../../utils/media-utils");
 var _mediaControl = require("../media-control");
+var _mediaImageActions = require("./media-image-actions");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-image-field/form-media-image-field.tsx";
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -52,7 +54,7 @@ const FormMediaImageField = ({
   }, [onChange]);
   const {
     callMedia,
-    onMediaLoad
+    downloadMedia
   } = (0, _mediaControl.useMediaControl)({
     mediaType: _mediaUtils.MEDIA_TYPES.IMAGE,
     value: (0, _getImageSource.getImageSource)(image),
@@ -60,9 +62,25 @@ const FormMediaImageField = ({
     autoFocus,
     readOnly,
     onBlur,
-    inputRef,
-    initialLoading: true
+    inputRef
   });
+  const pasteUrlForm = (0, _mediaControl.usePasteURLForm)({
+    onChange: url => onChange((0, _mediaImageValue.replaceImage)(imageRef.current, (0, _mediaImageValue.fromImageUrl)(url)))
+  });
+  const openPasteUrl = pasteUrlForm.onOpen({
+    title: t('CMS.image.replaceWithUrl.title'),
+    value: (0, _mediaImageValue.isExternalMediaImage)(image) ? image.url : undefined
+  });
+  const [isPreviewOpen, setIsPreviewOpen] = (0, _react.useState)(false);
+  const handleDownload = (0, _mediaImageActions.useMediaImageDownload)(image, downloadMedia);
+  const handleDelete = (0, _react.useCallback)(() => {
+    setIsPreviewOpen(false);
+    onChange(null);
+  }, [onChange]);
+  const handlePreviewReplace = (0, _react.useCallback)(() => {
+    setIsPreviewOpen(false);
+    callMedia();
+  }, [callMedia]);
   const canEdit = !isMobile && !readOnly;
   const handleAltTextChange = e => {
     if (image) {
@@ -76,7 +94,7 @@ const FormMediaImageField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 100,
+      lineNumber: 140,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -86,7 +104,7 @@ const FormMediaImageField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 101,
+      lineNumber: 141,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, (0, _extends2.default)({}, imageFormFieldProps, {
@@ -94,31 +112,78 @@ const FormMediaImageField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 102,
+      lineNumber: 142,
       columnNumber: 9
     }
-  }), /*#__PURE__*/_react.default.createElement(_designSystem.ImageViewer, {
+  }), image ? /*#__PURE__*/_react.default.createElement(_designSystem.MediaOverlay, {
+    dataHook: "media-image-field-overlay",
+    hoverSkin: "dark",
+    media: /*#__PURE__*/_react.default.createElement(_designSystem.Image, {
+      dataHook: "media-image-field-current-image",
+      src: (0, _getImageUrl.getImageUrl)(image),
+      width: "100%",
+      height: _mediaConstants.MEDIA_HEIGHT,
+      fit: "cover",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 148,
+        columnNumber: 17
+      }
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 144,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.MediaOverlay.Content, {
+    placement: "middle",
+    visible: "hover",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 157,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    gap: "SP2",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 158,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement(_mediaImageActions.MediaImageActions, {
+    dataHook: "media-image-field",
+    onReplace: canEdit ? callMedia : undefined,
+    onReplaceWithUrl: readOnly ? undefined : openPasteUrl,
+    onPreview: () => setIsPreviewOpen(true),
+    onDownload: handleDownload,
+    onDelete: readOnly ? undefined : handleDelete,
+    menuZIndex: _common.Z_INDEX_MODAL_POPOVER,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 159,
+      columnNumber: 19
+    }
+  })))) : /*#__PURE__*/_react.default.createElement(_designSystem.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",
-    imageUrl: image ? (0, _getImageUrl.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'),
+    disabled: !canEdit,
     addImageInfo: translate('cairo.add-image.tooltip'),
     height: _mediaConstants.MEDIA_HEIGHT,
     width: "100%",
-    fit: "cover",
-    onRemoveImage: () => onChange(null),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 103,
-      columnNumber: 11
+      lineNumber: 172,
+      columnNumber: 13
     }
   }))), image && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     direction: "vertical",
@@ -127,7 +192,7 @@ const FormMediaImageField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 124,
+      lineNumber: 187,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
@@ -135,7 +200,7 @@ const FormMediaImageField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 125,
+      lineNumber: 188,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
@@ -147,10 +212,37 @@ const FormMediaImageField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 126,
+      lineNumber: 189,
       columnNumber: 13
     }
-  }))));
+  }))), /*#__PURE__*/_react.default.createElement(_mediaControl.PasteURLForm, {
+    title: pasteUrlForm.title,
+    value: pasteUrlForm.value,
+    show: pasteUrlForm.isOpen,
+    closeModal: pasteUrlForm.onClose,
+    onSave: pasteUrlForm.onSave,
+    fieldType: _mediaControl.MediaFieldType.image,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 199,
+      columnNumber: 7
+    }
+  }), image && /*#__PURE__*/_react.default.createElement(_mediaImageActions.MediaImagePreviewModal, {
+    isOpen: isPreviewOpen,
+    image: image,
+    onClose: () => setIsPreviewOpen(false),
+    onReplace: handlePreviewReplace,
+    onDelete: handleDelete,
+    onDownload: handleDownload,
+    readOnly: !canEdit,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 208,
+      columnNumber: 9
+    }
+  }));
 };
 exports.FormMediaImageField = FormMediaImageField;
 FormMediaImageField.displayName = 'FormMediaImageField';
@@ -171,7 +263,7 @@ const ControlledMediaImageInput = ({
   __self: void 0,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 155,
+    lineNumber: 237,
     columnNumber: 3
   }
 });

package/dist/cjs/components/media-image-field/form-media-image-field.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_react2","_hooks","_getImageSource","_getImageUrl","_mediaConstants","_mediaImageValue","_mediaUtils","_mediaControl","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormMediaImageField","data","onChange","onBlur","readOnly","autoFocus","dataHook","inputRef","forwardedRef","imageFormFieldProps","translate","useWixPatternsContainer","useTranslations","isMobile","useIsMobile","image","toMediaImageValue","imageRef","useRef","current","setInputRef","useMergedRef","handlePick","useCallback","uri","next","fromMediaManagerPick","callMedia","onMediaLoad","useMediaControl","mediaType","MEDIA_TYPES","IMAGE","value","getImageSource","initialLoading","canEdit","handleAltTextChange","withAltText","target","createElement","Box","gap","width","__self","__source","fileName","lineNumber","columnNumber","maxWidth","MEDIA_MAX_WIDTH","flexShrink","FormField","_extends2","ImageViewer","ref","imageUrl","getImageUrl","undefined","onImageLoad","onAddImage","onUpdateImage","disabled","Boolean","showUpdateButton","showRemoveButton","updateImageInfo","removeImageInfo","addImageInfo","height","MEDIA_HEIGHT","fit","onRemoveImage","direction","flexGrow","minWidth","label","Input","altText","placeholder","exports","displayName","ControlledMediaImageInput"],"sources":["../../../../src/components/media-image-field/form-media-image-field.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useCallback, useRef } from 'react';\nimport type { FormFieldProps } from '@wix/design-system';\nimport { Box, FormField, ImageViewer, Input } from '@wix/design-system';\nimport { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';\n\nimport type { ControlledInputProps } from '../../types/controlled-input';\nimport type { MediaImageValue } from '../../types/media-image';\nimport { useMergedRef, useTranslations } from '../../hooks';\nimport { getImageSource } from '../../utils/get-image-source';\nimport { getImageUrl } from '../../utils/get-image-url';\nimport { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';\nimport {\n  fromMediaManagerPick,\n  toMediaImageValue,\n  withAltText,\n} from '../../utils/media-image-value';\nimport { MEDIA_TYPES } from '../../utils/media-utils';\nimport { useMediaControl } from '../media-control';\n\ninterface ImageViewerActions {\n  focus: () => void;\n}\n\nexport interface FormMediaImageFieldProps {\n  /** A `MEDIA_IMAGE` value. */\n  data?: unknown;\n  onChange: (value: MediaImageValue | null) => void;\n  /** Fires when the media manager closes, whether or not a file was picked. */\n  onBlur?: () => void;\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  dataHook?: string;\n  inputRef?: React.Ref<ImageViewerActions>;\n  /** The FormField around the image, e.g. the field's label and its error.\n   *  ImageViewer takes its error styling from it. */\n  imageFormFieldProps?: Pick<\n    FormFieldProps,\n    'label' | 'required' | 'status' | 'statusMessage'\n  >;\n}\n\n/**\n * The entity page input of a `MEDIA_IMAGE` field: the image, and an alt text\n * input to its right once there is an image. A pick fills an empty alt text\n * from the file name; a replace keeps the current one.\n */\nexport const FormMediaImageField: FC<FormMediaImageFieldProps> = ({\n  data,\n  onChange,\n  onBlur,\n  readOnly,\n  autoFocus,\n  dataHook,\n  inputRef: forwardedRef,\n  imageFormFieldProps,\n}) => {\n  const { translate } = useWixPatternsContainer();\n  const { t } = useTranslations();\n  const isMobile = useIsMobile();\n  const image = toMediaImageValue(data);\n  // The media manager calls back after it closes, so it reads the value from\n  // here rather than from the render that opened it.\n  const imageRef = useRef(image);\n  imageRef.current = image;\n\n  const [inputRef, setInputRef] =\n    useMergedRef<ImageViewerActions>(forwardedRef);\n\n  const handlePick = useCallback(\n    (uri: string) => {\n      const next = fromMediaManagerPick(uri, imageRef.current);\n      if (next) {\n        onChange(next);\n      }\n    },\n    [onChange],\n  );\n\n  const { callMedia, onMediaLoad } = useMediaControl({\n    mediaType: MEDIA_TYPES.IMAGE,\n    value: getImageSource(image),\n    onChange: handlePick,\n    autoFocus,\n    readOnly,\n    onBlur,\n    inputRef,\n    initialLoading: true,\n  });\n\n  const canEdit = !isMobile && !readOnly;\n\n  const handleAltTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (image) {\n      onChange(withAltText(image, e.target.value));\n    }\n  };\n\n  return (\n    <Box dataHook={dataHook} gap=\"SP4\" width=\"100%\">\n      <Box width=\"100%\" maxWidth={MEDIA_MAX_WIDTH} flexShrink={0}>\n        <FormField {...imageFormFieldProps} dataHook=\"media-image-field-image\">\n          <ImageViewer\n            ref={setInputRef}\n            dataHook=\"media-image-field-viewer\"\n            imageUrl={image ? getImageUrl(image) : undefined}\n            onImageLoad={onMediaLoad}\n            onAddImage={canEdit ? callMedia : undefined}\n            onUpdateImage={canEdit ? callMedia : undefined}\n            disabled={image ? Boolean(readOnly) : !canEdit}\n            showUpdateButton={canEdit}\n            showRemoveButton={!readOnly}\n            updateImageInfo={translate('cairo.replace-image.tooltip')}\n            removeImageInfo={translate('cairo.remove-image.tooltip')}\n            addImageInfo={translate('cairo.add-image.tooltip')}\n            height={MEDIA_HEIGHT}\n            width=\"100%\"\n            fit=\"cover\"\n            onRemoveImage={() => onChange(null)}\n          />\n        </FormField>\n      </Box>\n      {image && (\n        <Box direction=\"vertical\" flexGrow={1} minWidth=\"0\">\n          <FormField label={t('CMS.image.altText.label')}>\n            <Input\n              dataHook=\"media-image-field-alt-input\"\n              value={image.altText ?? ''}\n              placeholder={t('CMS.image.altText.inputPlaceholder')}\n              onChange={handleAltTextChange}\n              readOnly={readOnly}\n            />\n          </FormField>\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nFormMediaImageField.displayName = 'FormMediaImageField';\n\nexport type ControlledMediaImageInputProps = Omit<\n  ControlledInputProps<MediaImageValue | null>,\n  'invalid'\n>;\n\nexport const ControlledMediaImageInput: FC<ControlledMediaImageInputProps> = ({\n  data,\n  onChange,\n  onBlur,\n  readOnly,\n  autoFocus,\n  dataHook,\n}) => (\n  <FormMediaImageField\n    data={data}\n    onChange={onChange}\n    onBlur={onBlur}\n    readOnly={readOnly}\n    autoFocus={autoFocus}\n    dataHook={dataHook}\n  />\n);\n\nControlledMediaImageInput.displayName = 'ControlledMediaImageInput';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_react2","_common","_hooks","_getImageSource","_getImageUrl","_mediaConstants","_mediaImageValue","_mediaUtils","_mediaControl","_mediaImageActions","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormMediaImageField","data","onChange","onBlur","readOnly","autoFocus","dataHook","inputRef","forwardedRef","imageFormFieldProps","translate","useWixPatternsContainer","useTranslations","isMobile","useIsMobile","image","toMediaImageValue","imageRef","useRef","current","setInputRef","useMergedRef","handlePick","useCallback","uri","next","fromMediaManagerPick","callMedia","downloadMedia","useMediaControl","mediaType","MEDIA_TYPES","IMAGE","value","getImageSource","pasteUrlForm","usePasteURLForm","url","replaceImage","fromImageUrl","openPasteUrl","onOpen","title","isExternalMediaImage","undefined","isPreviewOpen","setIsPreviewOpen","useState","handleDownload","useMediaImageDownload","handleDelete","handlePreviewReplace","canEdit","handleAltTextChange","withAltText","target","createElement","Box","gap","width","__self","__source","fileName","lineNumber","columnNumber","maxWidth","MEDIA_MAX_WIDTH","flexShrink","FormField","_extends2","MediaOverlay","hoverSkin","media","Image","src","getImageUrl","height","MEDIA_HEIGHT","fit","Content","placement","visible","MediaImageActions","onReplace","onReplaceWithUrl","onPreview","onDownload","onDelete","menuZIndex","Z_INDEX_MODAL_POPOVER","ImageViewer","ref","onAddImage","disabled","addImageInfo","direction","flexGrow","minWidth","label","Input","altText","placeholder","PasteURLForm","show","isOpen","closeModal","onClose","onSave","fieldType","MediaFieldType","MediaImagePreviewModal","exports","displayName","ControlledMediaImageInput"],"sources":["../../../../src/components/media-image-field/form-media-image-field.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useCallback, useRef, useState } from 'react';\nimport type { FormFieldProps } from '@wix/design-system';\nimport {\n  Box,\n  FormField,\n  Image,\n  ImageViewer,\n  Input,\n  MediaOverlay,\n} from '@wix/design-system';\nimport { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';\n\nimport { Z_INDEX_MODAL_POPOVER } from '../common';\nimport type { ControlledInputProps } from '../../types/controlled-input';\nimport type { MediaImageValue } from '../../types/media-image';\nimport { useMergedRef, useTranslations } from '../../hooks';\nimport { getImageSource } from '../../utils/get-image-source';\nimport { getImageUrl } from '../../utils/get-image-url';\nimport { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';\nimport {\n  fromImageUrl,\n  fromMediaManagerPick,\n  isExternalMediaImage,\n  replaceImage,\n  toMediaImageValue,\n  withAltText,\n} from '../../utils/media-image-value';\nimport { MEDIA_TYPES } from '../../utils/media-utils';\nimport {\n  MediaFieldType,\n  PasteURLForm,\n  useMediaControl,\n  usePasteURLForm,\n} from '../media-control';\nimport {\n  MediaImageActions,\n  MediaImagePreviewModal,\n  useMediaImageDownload,\n} from './media-image-actions';\n\ninterface ImageViewerActions {\n  focus: () => void;\n}\n\nexport interface FormMediaImageFieldProps {\n  /** A `MEDIA_IMAGE` value. */\n  data?: unknown;\n  onChange: (value: MediaImageValue | null) => void;\n  /** Fires when the media manager closes, whether or not a file was picked. */\n  onBlur?: () => void;\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  dataHook?: string;\n  inputRef?: React.Ref<ImageViewerActions>;\n  /** The FormField around the image, e.g. the field's label and its error.\n   *  ImageViewer takes its error styling from it. */\n  imageFormFieldProps?: Pick<\n    FormFieldProps,\n    'label' | 'required' | 'status' | 'statusMessage'\n  >;\n}\n\n/**\n * The entity page input of a `MEDIA_IMAGE` field: the image, and an alt text\n * input to its right once there is an image. A pick fills an empty alt text\n * from the file name; a replace keeps the current one.\n */\nexport const FormMediaImageField: FC<FormMediaImageFieldProps> = ({\n  data,\n  onChange,\n  onBlur,\n  readOnly,\n  autoFocus,\n  dataHook,\n  inputRef: forwardedRef,\n  imageFormFieldProps,\n}) => {\n  const { translate } = useWixPatternsContainer();\n  const { t } = useTranslations();\n  const isMobile = useIsMobile();\n  const image = toMediaImageValue(data);\n  // The media manager calls back after it closes, so it reads the value from\n  // here rather than from the render that opened it.\n  const imageRef = useRef(image);\n  imageRef.current = image;\n\n  const [inputRef, setInputRef] =\n    useMergedRef<ImageViewerActions>(forwardedRef);\n\n  const handlePick = useCallback(\n    (uri: string) => {\n      const next = fromMediaManagerPick(uri, imageRef.current);\n      if (next) {\n        onChange(next);\n      }\n    },\n    [onChange],\n  );\n\n  const { callMedia, downloadMedia } = useMediaControl({\n    mediaType: MEDIA_TYPES.IMAGE,\n    value: getImageSource(image),\n    onChange: handlePick,\n    autoFocus,\n    readOnly,\n    onBlur,\n    inputRef,\n  });\n\n  const pasteUrlForm = usePasteURLForm({\n    onChange: (url) =>\n      onChange(replaceImage(imageRef.current, fromImageUrl(url))),\n  });\n  const openPasteUrl = pasteUrlForm.onOpen({\n    title: t('CMS.image.replaceWithUrl.title'),\n    value: isExternalMediaImage(image) ? image.url : undefined,\n  });\n\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n  const handleDownload = useMediaImageDownload(image, downloadMedia);\n  const handleDelete = useCallback(() => {\n    setIsPreviewOpen(false);\n    onChange(null);\n  }, [onChange]);\n  const handlePreviewReplace = useCallback(() => {\n    setIsPreviewOpen(false);\n    callMedia();\n  }, [callMedia]);\n\n  const canEdit = !isMobile && !readOnly;\n\n  const handleAltTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (image) {\n      onChange(withAltText(image, e.target.value));\n    }\n  };\n\n  return (\n    <Box dataHook={dataHook} gap=\"SP4\" width=\"100%\">\n      <Box width=\"100%\" maxWidth={MEDIA_MAX_WIDTH} flexShrink={0}>\n        <FormField {...imageFormFieldProps} dataHook=\"media-image-field-image\">\n          {image ? (\n            <MediaOverlay\n              dataHook=\"media-image-field-overlay\"\n              hoverSkin=\"dark\"\n              media={\n                <Image\n                  dataHook=\"media-image-field-current-image\"\n                  src={getImageUrl(image)}\n                  width=\"100%\"\n                  height={MEDIA_HEIGHT}\n                  fit=\"cover\"\n                />\n              }\n            >\n              <MediaOverlay.Content placement=\"middle\" visible=\"hover\">\n                <Box gap=\"SP2\">\n                  <MediaImageActions\n                    dataHook=\"media-image-field\"\n                    onReplace={canEdit ? callMedia : undefined}\n                    onReplaceWithUrl={readOnly ? undefined : openPasteUrl}\n                    onPreview={() => setIsPreviewOpen(true)}\n                    onDownload={handleDownload}\n                    onDelete={readOnly ? undefined : handleDelete}\n                    menuZIndex={Z_INDEX_MODAL_POPOVER}\n                  />\n                </Box>\n              </MediaOverlay.Content>\n            </MediaOverlay>\n          ) : (\n            <ImageViewer\n              // Only the empty state has a focusable control, so this is the\n              // only place inputRef can land.\n              ref={setInputRef}\n              dataHook=\"media-image-field-viewer\"\n              onAddImage={canEdit ? callMedia : undefined}\n              disabled={!canEdit}\n              addImageInfo={translate('cairo.add-image.tooltip')}\n              height={MEDIA_HEIGHT}\n              width=\"100%\"\n            />\n          )}\n        </FormField>\n      </Box>\n      {image && (\n        <Box direction=\"vertical\" flexGrow={1} minWidth=\"0\">\n          <FormField label={t('CMS.image.altText.label')}>\n            <Input\n              dataHook=\"media-image-field-alt-input\"\n              value={image.altText ?? ''}\n              placeholder={t('CMS.image.altText.inputPlaceholder')}\n              onChange={handleAltTextChange}\n              readOnly={readOnly}\n            />\n          </FormField>\n        </Box>\n      )}\n      <PasteURLForm\n        title={pasteUrlForm.title}\n        value={pasteUrlForm.value}\n        show={pasteUrlForm.isOpen}\n        closeModal={pasteUrlForm.onClose}\n        onSave={pasteUrlForm.onSave}\n        fieldType={MediaFieldType.image}\n      />\n      {image && (\n        <MediaImagePreviewModal\n          isOpen={isPreviewOpen}\n          image={image}\n          onClose={() => setIsPreviewOpen(false)}\n          onReplace={handlePreviewReplace}\n          onDelete={handleDelete}\n          onDownload={handleDownload}\n          readOnly={!canEdit}\n        />\n      )}\n    </Box>\n  );\n};\n\nFormMediaImageField.displayName = 'FormMediaImageField';\n\nexport type ControlledMediaImageInputProps = Omit<\n  ControlledInputProps<MediaImageValue | null>,\n  'invalid'\n>;\n\nexport const ControlledMediaImageInput: FC<ControlledMediaImageInputProps> = ({\n  data,\n  onChange,\n  onBlur,\n  readOnly,\n  autoFocus,\n  dataHook,\n}) => (\n  <FormMediaImageField\n    data={data}\n    onChange={onChange}\n    onBlur={onBlur}\n    readOnly={readOnly}\n    autoFocus={autoFocus}\n    dataHook={dataHook}\n  />\n);\n\nControlledMediaImageInput.displayName = 'ControlledMediaImageInput';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/media-image-field/form-media-image-field.uni.driver.js

@@ -4,10 +4,14 @@ exports.__esModule = true;
 exports.FormMediaImageFieldUniDriver = FormMediaImageFieldUniDriver;
 var _unidriver = require("@wix/design-system/dist/testkit/unidriver");
 var _baseDriver = require("../../testkit/base-driver");
+/** The more actions menu, the URL form and the preview render in the body. */
 function FormMediaImageFieldUniDriver(base, body) {
   const formField = (0, _unidriver.FormFieldUniDriver)(base.$('[data-hook="media-image-field-image"]'), body);
   const imageViewer = (0, _unidriver.ImageViewerUniDriver)(base.$('[data-hook="media-image-field-viewer"]'), body);
+  const replaceButton = (0, _unidriver.IconButtonUniDriver)(base.$('[data-hook="media-image-field-replace-button"]'), body);
   const altInput = base.$('[data-hook="media-image-field-alt-input"] input');
+  const menuItem = action => body.$(`[data-hook="media-image-field-action-${action}"]`);
+  const openMenu = () => base.$('[data-hook="media-image-field-more-button"]').click();
   return {
     ...(0, _baseDriver.baseUniDriverFactory)(base),
     getLabel: async () => {
@@ -17,18 +21,30 @@ function FormMediaImageFieldUniDriver(base, body) {
     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 => {
+      await openMenu();
+      await menuItem('replace-url').click();
+      await (0, _unidriver.InputUniDriver)(body.$('[data-hook="paste-url-form.urlInput"]'), body).enterText(url);
+      await (await (0, _unidriver.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: () => (0, _unidriver.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 => 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'))
+    enterAltText: text => altInput.enterValue(text)
   };
 }
 //# sourceMappingURL=form-media-image-field.uni.driver.js.map

package/dist/cjs/components/media-image-field/form-media-image-field.uni.driver.js.map

@@ -1 +1 @@
-{"version":3,"names":["_unidriver","require","_baseDriver","FormMediaImageFieldUniDriver","base","body","formField","FormFieldUniDriver","$","imageViewer","ImageViewerUniDriver","altInput","baseUniDriverFactory","getLabel","_await$formField$getL","textContent","isRequired","hasError","hasStatus","getErrorMessage","getStatusMessage","getImageUrl","isAddItemVisible","clickAdd","clickReplace","clickUpdate","clickRemove","hasAltTextInput","exists","getAltText","value","getAltTextPlaceholder","attr","enterAltText","text","enterValue","simulateImageLoad","getNative","dispatchEvent","Event"],"sources":["../../../../src/components/media-image-field/form-media-image-field.uni.driver.ts"],"sourcesContent":["import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport {\n  FormFieldUniDriver,\n  ImageViewerUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport { baseUniDriverFactory } from '../../testkit/base-driver';\n\nexport function FormMediaImageFieldUniDriver(base: UniDriver, body: UniDriver) {\n  const formField = FormFieldUniDriver(\n    base.$('[data-hook=\"media-image-field-image\"]'),\n    body,\n  );\n  const imageViewer = ImageViewerUniDriver(\n    base.$('[data-hook=\"media-image-field-viewer\"]'),\n    body,\n  );\n  const altInput = base.$('[data-hook=\"media-image-field-alt-input\"] input');\n\n  return {\n    ...baseUniDriverFactory(base),\n    getLabel: async () => (await formField.getLabel())?.textContent ?? '',\n    isRequired: () => formField.isRequired(),\n    hasError: () => formField.hasStatus('error'),\n    getErrorMessage: () => formField.getStatusMessage(),\n    getImageUrl: () => imageViewer.getImageUrl(),\n    isAddItemVisible: () => imageViewer.isAddItemVisible(),\n    clickAdd: () => imageViewer.clickAdd(),\n    clickReplace: () => imageViewer.clickUpdate(),\n    clickRemove: () => imageViewer.clickRemove(),\n    hasAltTextInput: () => altInput.exists(),\n    getAltText: () => altInput.value(),\n    getAltTextPlaceholder: () => altInput.attr('placeholder'),\n    enterAltText: (text: string) => altInput.enterValue(text),\n    // ImageViewer hides its edit buttons behind a loader until the image\n    // loads, and jsdom never fires that event on its own.\n    simulateImageLoad: async () =>\n      (\n        await base.$('[data-hook=\"image-viewer-current-image\"]').getNative()\n      ).dispatchEvent(new Event('load')),\n  };\n}\n"],"mappings":";;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AAEO,SAASE,4BAA4BA,CAACC,IAAe,EAAEC,IAAe,EAAE;EAC7E,MAAMC,SAAS,GAAG,IAAAC,6BAAkB,EAClCH,IAAI,CAACI,CAAC,CAAC,uCAAuC,CAAC,EAC/CH,IACF,CAAC;EACD,MAAMI,WAAW,GAAG,IAAAC,+BAAoB,EACtCN,IAAI,CAACI,CAAC,CAAC,wCAAwC,CAAC,EAChDH,IACF,CAAC;EACD,MAAMM,QAAQ,GAAGP,IAAI,CAACI,CAAC,CAAC,iDAAiD,CAAC;EAE1E,OAAO;IACL,GAAG,IAAAI,gCAAoB,EAACR,IAAI,CAAC;IAC7BS,QAAQ,EAAE,MAAAA,CAAA;MAAA,IAAAC,qBAAA;MAAA,OAAY,EAAAA,qBAAA,GAAC,MAAMR,SAAS,CAACO,QAAQ,CAAC,CAAC,qBAA3BC,qBAAA,CAA8BC,WAAW,KAAI,EAAE;IAAA;IACrEC,UAAU,EAAEA,CAAA,KAAMV,SAAS,CAACU,UAAU,CAAC,CAAC;IACxCC,QAAQ,EAAEA,CAAA,KAAMX,SAAS,CAACY,SAAS,CAAC,OAAO,CAAC;IAC5CC,eAAe,EAAEA,CAAA,KAAMb,SAAS,CAACc,gBAAgB,CAAC,CAAC;IACnDC,WAAW,EAAEA,CAAA,KAAMZ,WAAW,CAACY,WAAW,CAAC,CAAC;IAC5CC,gBAAgB,EAAEA,CAAA,KAAMb,WAAW,CAACa,gBAAgB,CAAC,CAAC;IACtDC,QAAQ,EAAEA,CAAA,KAAMd,WAAW,CAACc,QAAQ,CAAC,CAAC;IACtCC,YAAY,EAAEA,CAAA,KAAMf,WAAW,CAACgB,WAAW,CAAC,CAAC;IAC7CC,WAAW,EAAEA,CAAA,KAAMjB,WAAW,CAACiB,WAAW,CAAC,CAAC;IAC5CC,eAAe,EAAEA,CAAA,KAAMhB,QAAQ,CAACiB,MAAM,CAAC,CAAC;IACxCC,UAAU,EAAEA,CAAA,KAAMlB,QAAQ,CAACmB,KAAK,CAAC,CAAC;IAClCC,qBAAqB,EAAEA,CAAA,KAAMpB,QAAQ,CAACqB,IAAI,CAAC,aAAa,CAAC;IACzDC,YAAY,EAAGC,IAAY,IAAKvB,QAAQ,CAACwB,UAAU,CAACD,IAAI,CAAC;IACzD;IACA;IACAE,iBAAiB,EAAE,MAAAA,CAAA,KACjB,CACE,MAAMhC,IAAI,CAACI,CAAC,CAAC,0CAA0C,CAAC,CAAC6B,SAAS,CAAC,CAAC,EACpEC,aAAa,CAAC,IAAIC,KAAK,CAAC,MAAM,CAAC;EACrC,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["_unidriver","require","_baseDriver","FormMediaImageFieldUniDriver","base","body","formField","FormFieldUniDriver","$","imageViewer","ImageViewerUniDriver","replaceButton","IconButtonUniDriver","altInput","menuItem","action","openMenu","click","baseUniDriverFactory","getLabel","_await$formField$getL","textContent","isRequired","hasError","hasStatus","getErrorMessage","getStatusMessage","clickAdd","clickReplace","isReplaceDisabled","isButtonDisabled","replaceWithUrl","url","InputUniDriver","enterText","CustomModalLayoutUniDriver","getPrimaryButtonDriver","openPreview","isPreviewOpen","exists","pressEscapeInPreview","pressKey","clickPreviewReplace","ButtonUniDriver","clickDelete","hasAltTextInput","getAltText","value","getAltTextPlaceholder","attr","enterAltText","text","enterValue"],"sources":["../../../../src/components/media-image-field/form-media-image-field.uni.driver.ts"],"sourcesContent":["import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport {\n  ButtonUniDriver,\n  CustomModalLayoutUniDriver,\n  FormFieldUniDriver,\n  IconButtonUniDriver,\n  ImageViewerUniDriver,\n  InputUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport { baseUniDriverFactory } from '../../testkit/base-driver';\n\n/** The more actions menu, the URL form and the preview render in the body. */\nexport function FormMediaImageFieldUniDriver(base: UniDriver, body: UniDriver) {\n  const formField = FormFieldUniDriver(\n    base.$('[data-hook=\"media-image-field-image\"]'),\n    body,\n  );\n  const imageViewer = ImageViewerUniDriver(\n    base.$('[data-hook=\"media-image-field-viewer\"]'),\n    body,\n  );\n  const replaceButton = IconButtonUniDriver(\n    base.$('[data-hook=\"media-image-field-replace-button\"]'),\n    body,\n  );\n  const altInput = base.$('[data-hook=\"media-image-field-alt-input\"] input');\n  const menuItem = (action: string) =>\n    body.$(`[data-hook=\"media-image-field-action-${action}\"]`);\n  const openMenu = () =>\n    base.$('[data-hook=\"media-image-field-more-button\"]').click();\n\n  return {\n    ...baseUniDriverFactory(base),\n    getLabel: async () => (await formField.getLabel())?.textContent ?? '',\n    isRequired: () => formField.isRequired(),\n    hasError: () => formField.hasStatus('error'),\n    getErrorMessage: () => formField.getStatusMessage(),\n    clickAdd: () => imageViewer.clickAdd(),\n    clickReplace: () => replaceButton.click(),\n    isReplaceDisabled: () => replaceButton.isButtonDisabled(),\n    replaceWithUrl: async (url: string) => {\n      await openMenu();\n      await menuItem('replace-url').click();\n      await InputUniDriver(\n        body.$('[data-hook=\"paste-url-form.urlInput\"]'),\n        body,\n      ).enterText(url);\n      await (\n        await CustomModalLayoutUniDriver(\n          body.$('[data-hook=\"paste-url-form.layout\"]'),\n          body,\n        ).getPrimaryButtonDriver()\n      ).click();\n    },\n    openPreview: async () => {\n      await openMenu();\n      await menuItem('preview').click();\n    },\n    isPreviewOpen: () => body.$('[data-hook=\"preview-modal-content\"]').exists(),\n    pressEscapeInPreview: () =>\n      body.$('[data-hook=\"preview-modal-content\"]').pressKey('Escape'),\n    clickPreviewReplace: () =>\n      ButtonUniDriver(\n        body.$('[data-hook=\"preview-modal-replace-button\"]'),\n        body,\n      ).click(),\n    clickDelete: async () => {\n      await openMenu();\n      await menuItem('delete').click();\n    },\n    hasAltTextInput: () => altInput.exists(),\n    getAltText: () => altInput.value(),\n    getAltTextPlaceholder: () => altInput.attr('placeholder'),\n    enterAltText: (text: string) => altInput.enterValue(text),\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/media-image-field/media-image-actions.js

@@ -0,0 +1,256 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useMediaImageDownload = exports.MediaImagePreviewModal = exports.MediaImageActions = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _lazy = require("@wix/wix-ui-icons-common/lazy");
+var _hooks = require("../../hooks");
+var _getImageSource = require("../../utils/get-image-source");
+var _mediaImageValue = require("../../utils/media-image-value");
+var _mediaUtils = require("../../utils/media-utils");
+var _mediaPreviewModal = require("../media-gallery/media-preview-modal");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-image-field/media-image-actions.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** WDS shows the menu's open state only to its trigger, so the trigger
+ *  reports it. */
+const MenuTrigger = ({
+  isOpen,
+  toggle,
+  buttonRef,
+  onOpenChange,
+  ariaLabel,
+  dataHook
+}) => {
+  (0, _react.useEffect)(() => {
+    onOpenChange == null || onOpenChange(isOpen);
+  }, [isOpen, onOpenChange]);
+  return /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    ref: buttonRef,
+    size: "small",
+    skin: "light",
+    priority: "secondary",
+    dataHook: dataHook,
+    ariaLabel: ariaLabel,
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    onClick: toggle,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 43,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_lazy.MoreSmall, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 54,
+      columnNumber: 7
+    }
+  }));
+};
+/** The actions over a `MEDIA_IMAGE` image: Replace, and a menu with Replace
+ *  with URL, Preview, Download and Delete. */
+const MediaImageActions = ({
+  dataHook,
+  onReplace,
+  onReplaceWithUrl,
+  onPreview,
+  onDownload,
+  onDelete,
+  onMenuOpenChange,
+  menuZIndex
+}) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+    content: t('CMS.image.replace'),
+    appendTo: "window",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 90,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    size: "small",
+    skin: "light",
+    priority: "secondary",
+    dataHook: `${dataHook}-replace-button`,
+    ariaLabel: t('CMS.image.replace'),
+    disabled: !onReplace,
+    onClick: onReplace,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 91,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_lazy.Replace, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 100,
+      columnNumber: 11
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu, {
+    textSize: "small",
+    appendTo: "window",
+    zIndex: menuZIndex,
+    triggerElement: ({
+      isOpen,
+      toggle,
+      ref
+    }) => /*#__PURE__*/_react.default.createElement(MenuTrigger, {
+      isOpen: isOpen,
+      toggle: toggle,
+      buttonRef: ref,
+      onOpenChange: onMenuOpenChange,
+      ariaLabel: t('auto-patterns.fields.more_actions_tooltip'),
+      dataHook: `${dataHook}-more-button`,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 108,
+        columnNumber: 11
+      }
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    dataHook: `${dataHook}-action-replace-url`,
+    text: t('CMS.image.replaceWithUrl.button'),
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_lazy.Link, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 121,
+        columnNumber: 23
+      }
+    }),
+    disabled: !onReplaceWithUrl,
+    onClick: () => onReplaceWithUrl == null ? void 0 : onReplaceWithUrl(),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    dataHook: `${dataHook}-action-preview`,
+    text: t('CMS.mediaGallery.preview'),
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_lazy.Maximize, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 128,
+        columnNumber: 23
+      }
+    }),
+    onClick: onPreview,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 125,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    dataHook: `${dataHook}-action-download`,
+    text: t('CMS.image.download'),
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_lazy.Download, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 134,
+        columnNumber: 23
+      }
+    }),
+    onClick: onDownload,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 131,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.Divider, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 137,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    dataHook: `${dataHook}-action-delete`,
+    text: t('CMS.image.clear'),
+    skin: "destructive",
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_lazy.Delete, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 142,
+        columnNumber: 23
+      }
+    }),
+    disabled: !onDelete,
+    onClick: () => onDelete == null ? void 0 : onDelete(),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 138,
+      columnNumber: 9
+    }
+  })));
+};
+exports.MediaImageActions = MediaImageActions;
+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. */
+const useMediaImageDownload = (image, downloadMedia) => (0, _react.useCallback)(() => {
+  if ((0, _mediaImageValue.isExternalMediaImage)(image)) {
+    (0, _mediaUtils.executeDownloading)(image.url);
+    return;
+  }
+  const src = (0, _getImageSource.getImageSource)(image);
+  if (src) {
+    downloadMedia(src);
+  }
+}, [image, downloadMedia]);
+exports.useMediaImageDownload = useMediaImageDownload;
+const MediaImagePreviewModal = ({
+  isOpen,
+  image,
+  onClose,
+  onReplace,
+  onDelete,
+  onDownload,
+  readOnly
+}) => /*#__PURE__*/_react.default.createElement(_mediaPreviewModal.MediaPreviewModal, {
+  isOpen: isOpen,
+  value: (0, _getImageSource.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'
+  },
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 189,
+    columnNumber: 3
+  }
+});
+exports.MediaImagePreviewModal = MediaImagePreviewModal;
+MediaImagePreviewModal.displayName = 'MediaImagePreviewModal';
+//# sourceMappingURL=media-image-actions.js.map