@wix/patterns-fields 1.116.0 → 1.117.0

package/dist/cjs/components/media-image-field/cell-media-image-edit.js

@@ -0,0 +1,530 @@
+"use strict";
+
+exports.__esModule = true;
+exports.CellMediaImageEdit = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _lazy = require("@wix/wix-ui-icons-common/lazy");
+var _autoFieldTypes = require("../../auto-field-types");
+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 _mediaControl = require("../media-control");
+var _mediaPreviewModal = require("../media-gallery/media-preview-modal");
+var _mediaImage = require("../media-image");
+var _mediaImageView = require("./media-image-view");
+var _cellMediaImageEditStCss = require("./cell-media-image-edit.st.css.js");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-image-field/cell-media-image-edit.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); }
+/** What is on top of the editor. Escape and click-outside act on it. */
+
+const imageFromUrl = (url, current) => (0, _mediaImageValue.replaceImage)(current, (0, _mediaImageValue.fromImageUrl)(url));
+/** WDS shows the menu's open state only to its trigger, so the trigger
+ *  reports it. */
+const MenuTrigger = ({
+  isOpen,
+  toggle,
+  buttonRef,
+  onOpenChange,
+  ariaLabel
+}) => {
+  (0, _react.useEffect)(() => {
+    onOpenChange(isOpen);
+  }, [isOpen, onOpenChange]);
+  return /*#__PURE__*/_react.default.createElement(_designSystem.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,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 90,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_lazy.MoreSmall, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 101,
+      columnNumber: 7
+    }
+  }));
+};
+
+/**
+ * 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
+ * text. Changes go to `onChange` as they happen and are committed once, when
+ * the popover closes.
+ */
+const CellMediaImageEdit = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook
+}) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const image = (0, _mediaImageValue.toMediaImageValue)(value);
+  const src = (0, _getImageSource.getImageSource)(image);
+  // 'none' once committed.
+  const [popoverLayer, setPopoverLayer] = (0, _react.useState)('popover');
+  const mediaEdit = (0, _mediaControl.useCellMediaEdit)({
+    mediaType: _mediaUtils.MEDIA_TYPES.IMAGE,
+    value: image,
+    onChange,
+    onCommit,
+    onCancel,
+    onStartEdit,
+    inputRef,
+    fromPick: _mediaImageValue.fromMediaManagerPick,
+    fromUrl: imageFromUrl,
+    commitOnPick: false
+  });
+  const {
+    loading,
+    pasteUrlForm,
+    handleCallMedia,
+    handleDelete,
+    downloadMedia
+  } = mediaEdit;
+  const closePasteUrl = pasteUrlForm.handleClose;
+  // The media manager and the URL form sit above the popover layers.
+  const openLayer = loading ? 'loading' : pasteUrlForm.isOpen ? 'pasteUrl' : image ? popoverLayer : 'none';
+  const openPasteUrl = mediaEdit.startEditAndOpenPasteUrl({
+    title: t('CMS.image.replaceWithUrl.title'),
+    value: (0, _mediaImageValue.isExternalMediaImage)(image) ? image.url : undefined
+  });
+  const handleDownload = (0, _react.useCallback)(() => {
+    // The Media Manager can't make a download link for an external URL.
+    if ((0, _mediaImageValue.isExternalMediaImage)(image)) {
+      (0, _mediaUtils.executeDownloading)(image.url);
+    } else if (src) {
+      downloadMedia(src);
+    }
+  }, [src, image, downloadMedia]);
+  const commit = (0, _react.useCallback)(() => {
+    setPopoverLayer('none');
+    onCommit();
+  }, [onCommit]);
+
+  // Picking Preview sets its own layer, which closing the menu must not undo.
+  const handleMenuOpenChange = (0, _react.useCallback)(isOpen => {
+    setPopoverLayer(layer => {
+      if (isOpen) {
+        return 'menu';
+      }
+      return layer === 'menu' ? 'popover' : layer;
+    });
+  }, []);
+
+  // Fires on mouseup, before the click that closes a menu or a modal, so
+  // `openLayer` still says what was open.
+  const handleClickOutside = (0, _react.useCallback)(() => {
+    if (openLayer === 'popover') {
+      commit();
+    }
+  }, [openLayer, commit]);
+  (0, _react.useEffect)(() => {
+    // WDS closes the menu on Escape and stops the event there.
+    if (openLayer === 'none' || openLayer === 'loading' || openLayer === 'menu') {
+      return;
+    }
+    // Capture phase, so the table doesn't cancel the edit first.
+    const handleKeyDown = e => {
+      if (e.key !== 'Escape') {
+        return;
+      }
+      e.stopPropagation();
+      if (openLayer === 'pasteUrl') {
+        closePasteUrl();
+      } else if (openLayer === 'preview') {
+        setPopoverLayer('popover');
+      } else {
+        commit();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => document.removeEventListener('keydown', handleKeyDown, true);
+  }, [openLayer, closePasteUrl, commit]);
+  const emptyActions = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+    content: t('CMS.image.add'),
+    appendTo: "window",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 222,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    size: "tiny",
+    priority: "secondary",
+    dataHook: "media-image-edit-add-button",
+    ariaLabel: t('CMS.image.add'),
+    onClick: handleCallMedia,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 223,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_lazy.Add, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 230,
+      columnNumber: 11
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+    content: t('CMS.image.replaceWithUrl.button'),
+    appendTo: "window",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 233,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    size: "tiny",
+    priority: "tertiary",
+    dataHook: "media-image-edit-paste-url-button",
+    ariaLabel: t('CMS.image.replaceWithUrl.button'),
+    onClick: openPasteUrl,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 234,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_lazy.LinkSmall, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 241,
+      columnNumber: 11
+    }
+  }))));
+
+  // One return for both states, so the shell and its container stay mounted
+  // when a pick fills an empty cell.
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_mediaControl.CellMediaEditShell, {
+    dataHook: dataHook,
+    mediaEdit: mediaEdit,
+    fieldType: _mediaControl.MediaFieldType.image,
+    padding: image ? '0' : undefined,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 251,
+      columnNumber: 7
+    }
+  }, !image ? emptyActions : /*#__PURE__*/_react.default.createElement("div", {
+    className: _cellMediaImageEditStCss.classes.view,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 260,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_mediaImageView.MediaImageView, {
+    value: image,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 261,
+      columnNumber: 13
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _cellMediaImageEditStCss.classes.anchor,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 262,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Popover, {
+    shown: popoverLayer !== 'none',
+    appendTo: "window",
+    placement: "bottom-start",
+    moveBy: {
+      x: 0,
+      y: 4
+    },
+    zIndex: 5001,
+    animate: true,
+    flip: true,
+    fixed: false,
+    onClickOutside: handleClickOutside,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 263,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Element, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 274,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _cellMediaImageEditStCss.classes.anchorBox,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 275,
+      columnNumber: 19
+    }
+  })), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Content, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 277,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    dataHook: "media-image-edit-popover",
+    className: _cellMediaImageEditStCss.classes.popoverContent,
+    direction: "vertical",
+    gap: "SP3",
+    padding: "SP3",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 278,
+      columnNumber: 19
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
+    label: t('CMS.image.thumbnail.label'),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 285,
+      columnNumber: 21
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _cellMediaImageEditStCss.classes.image,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 286,
+      columnNumber: 23
+    }
+  }, /*#__PURE__*/_react.default.createElement(_mediaImage.MediaImage, {
+    dataHook: "media-image-edit-image",
+    src: src,
+    alt: "",
+    fit: "cover",
+    transparent: true,
+    size: _autoFieldTypes.ThumbnailSize.L,
+    width: "180px",
+    height: "180px",
+    borderRadius: "0",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 287,
+      columnNumber: 25
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _cellMediaImageEditStCss.st)(_cellMediaImageEditStCss.classes.imageActions, {
+      menuOpen: popoverLayer === 'menu'
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 298,
+      columnNumber: 25
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+    content: t('CMS.image.replace'),
+    appendTo: "window",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 303,
+      columnNumber: 27
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    size: "small",
+    skin: "light",
+    priority: "secondary",
+    dataHook: "media-image-edit-replace-button",
+    ariaLabel: t('CMS.image.replace'),
+    onClick: handleCallMedia,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 307,
+      columnNumber: 29
+    }
+  }, /*#__PURE__*/_react.default.createElement(_lazy.Replace, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 315,
+      columnNumber: 31
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu, {
+    textSize: "small",
+    appendTo: "window",
+    zIndex: 5002,
+    triggerElement: ({
+      isOpen,
+      toggle,
+      ref
+    }) => /*#__PURE__*/_react.default.createElement(MenuTrigger, {
+      isOpen: isOpen,
+      toggle: toggle,
+      buttonRef: ref,
+      onOpenChange: handleMenuOpenChange,
+      ariaLabel: t('auto-patterns.fields.more_actions_tooltip'),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 323,
+        columnNumber: 31
+      }
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 318,
+      columnNumber: 27
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    dataHook: "media-image-edit-action-replace-url",
+    text: t('CMS.image.replaceWithUrl.button'),
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_lazy.Link, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 337,
+        columnNumber: 43
+      }
+    }),
+    onClick: openPasteUrl,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 334,
+      columnNumber: 29
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    dataHook: "media-image-edit-action-preview",
+    text: t('CMS.mediaGallery.preview'),
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_lazy.Maximize, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 343,
+        columnNumber: 43
+      }
+    }),
+    onClick: () => setPopoverLayer('preview'),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 340,
+      columnNumber: 29
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    dataHook: "media-image-edit-action-download",
+    text: t('CMS.image.download'),
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_lazy.Download, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 349,
+        columnNumber: 43
+      }
+    }),
+    onClick: handleDownload,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 346,
+      columnNumber: 29
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.Divider, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 352,
+      columnNumber: 29
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    dataHook: "media-image-edit-action-delete",
+    text: t('CMS.image.clear'),
+    skin: "destructive",
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_lazy.Delete, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 357,
+        columnNumber: 43
+      }
+    }),
+    onClick: handleDelete,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 353,
+      columnNumber: 29
+    }
+  }))))), /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
+    label: t('CMS.image.altText.label'),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 364,
+      columnNumber: 21
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
+    dataHook: "media-image-edit-alt-input",
+    size: "small",
+    value: image.altText ?? '',
+    placeholder: t('CMS.image.altText.inputPlaceholder'),
+    onChange: e => onChange((0, _mediaImageValue.withAltText)(image, e.target.value)),
+    onEnterPressed: commit,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 365,
+      columnNumber: 23
+    }
+  })))))))), image && /*#__PURE__*/_react.default.createElement(_mediaPreviewModal.MediaPreviewModal, {
+    isOpen: popoverLayer === 'preview',
+    value: src,
+    onClose: () => setPopoverLayer('popover'),
+    onRequestMedia: handleCallMedia,
+    onClearMedia: handleDelete,
+    onDownloadMedia: handleDownload,
+    textKeys: {
+      replace: 'CMS.image.replace',
+      download: 'CMS.image.download',
+      delete: 'CMS.image.clear'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 384,
+      columnNumber: 9
+    }
+  }));
+};
+exports.CellMediaImageEdit = CellMediaImageEdit;
+CellMediaImageEdit.displayName = 'CellMediaImageEdit';
+//# sourceMappingURL=cell-media-image-edit.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_lazy","_autoFieldTypes","_hooks","_getImageSource","_mediaImageValue","_mediaUtils","_mediaControl","_mediaPreviewModal","_mediaImage","_mediaImageView","_cellMediaImageEditStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","imageFromUrl","url","current","replaceImage","fromImageUrl","MenuTrigger","isOpen","toggle","buttonRef","onOpenChange","ariaLabel","useEffect","createElement","IconButton","ref","size","skin","priority","dataHook","onClick","__self","__source","fileName","lineNumber","columnNumber","MoreSmall","CellMediaImageEdit","value","onChange","onCommit","onCancel","onStartEdit","inputRef","useTranslations","image","toMediaImageValue","src","getImageSource","popoverLayer","setPopoverLayer","useState","mediaEdit","useCellMediaEdit","mediaType","MEDIA_TYPES","IMAGE","fromPick","fromMediaManagerPick","fromUrl","commitOnPick","loading","pasteUrlForm","handleCallMedia","handleDelete","downloadMedia","closePasteUrl","handleClose","openLayer","openPasteUrl","startEditAndOpenPasteUrl","title","isExternalMediaImage","undefined","handleDownload","useCallback","executeDownloading","commit","handleMenuOpenChange","layer","handleClickOutside","handleKeyDown","key","stopPropagation","document","addEventListener","removeEventListener","emptyActions","Fragment","Tooltip","content","appendTo","Add","LinkSmall","CellMediaEditShell","fieldType","MediaFieldType","padding","className","classes","view","MediaImageView","anchor","Popover","shown","placement","moveBy","x","y","zIndex","animate","flip","fixed","onClickOutside","Element","anchorBox","Content","Box","popoverContent","direction","gap","FormField","label","MediaImage","alt","fit","transparent","ThumbnailSize","L","width","height","borderRadius","st","imageActions","menuOpen","Replace","PopoverMenu","textSize","triggerElement","MenuItem","text","prefixIcon","Link","Maximize","Download","Divider","Delete","Input","altText","placeholder","withAltText","target","onEnterPressed","MediaPreviewModal","onClose","onRequestMedia","onClearMedia","onDownloadMedia","textKeys","replace","download","delete","exports","displayName"],"sources":["../../../../src/components/media-image-field/cell-media-image-edit.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport {\n  Box,\n  FormField,\n  IconButton,\n  Input,\n  Popover,\n  PopoverMenu,\n  Tooltip,\n} from '@wix/design-system';\nimport {\n  Add,\n  Delete,\n  Download,\n  Link,\n  LinkSmall,\n  Maximize,\n  MoreSmall,\n  Replace,\n} from '@wix/wix-ui-icons-common/lazy';\nimport { ThumbnailSize } from '../../auto-field-types';\nimport { useTranslations } from '../../hooks';\nimport type { MediaImageValue } from '../../types/media-image';\nimport { getImageSource } from '../../utils/get-image-source';\nimport {\n  fromImageUrl,\n  fromMediaManagerPick,\n  isExternalMediaImage,\n  replaceImage,\n  toMediaImageValue,\n  withAltText,\n} from '../../utils/media-image-value';\nimport { executeDownloading, MEDIA_TYPES } from '../../utils/media-utils';\nimport {\n  CellMediaEditShell,\n  MediaFieldType,\n  useCellMediaEdit,\n} from '../media-control';\nimport { MediaPreviewModal } from '../media-gallery/media-preview-modal';\nimport { MediaImage } from '../media-image';\nimport { MediaImageView } from './media-image-view';\nimport { st, classes } from './cell-media-image-edit.st.css.js';\n\nexport interface CellMediaImageEditProps {\n  /** A `MEDIA_IMAGE` value. */\n  value: unknown;\n  onChange: (value: MediaImageValue | null) => void;\n  onCommit: () => void;\n  onCancel?: () => void;\n  /**\n   * Called before opening external UI (media manager / paste-URL form) so the\n   * table can set isEditing=true and protect cell focus while the modal is open.\n   */\n  onStartEdit?: () => void;\n  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;\n  dataHook?: string;\n}\n\ntype PopoverLayer = 'none' | 'popover' | 'menu' | 'preview';\n\n/** What is on top of the editor. Escape and click-outside act on it. */\ntype Layer = PopoverLayer | 'pasteUrl' | 'loading';\n\nconst imageFromUrl = (url: string, current: MediaImageValue | null) =>\n  replaceImage(current, fromImageUrl(url));\n\ninterface MenuTriggerProps {\n  isOpen: boolean;\n  toggle: () => void;\n  /** Lets WDS put focus back here when the menu closes. */\n  buttonRef?: React.RefObject<HTMLElement>;\n  onOpenChange: (isOpen: boolean) => void;\n  ariaLabel: string;\n}\n\n/** WDS shows the menu's open state only to its trigger, so the trigger\n *  reports it. */\nconst MenuTrigger: React.FC<MenuTriggerProps> = ({\n  isOpen,\n  toggle,\n  buttonRef,\n  onOpenChange,\n  ariaLabel,\n}) => {\n  useEffect(() => {\n    onOpenChange(isOpen);\n  }, [isOpen, onOpenChange]);\n\n  return (\n    <IconButton\n      ref={buttonRef}\n      size=\"small\"\n      skin=\"light\"\n      priority=\"secondary\"\n      dataHook=\"media-image-edit-more-button\"\n      ariaLabel={ariaLabel}\n      aria-haspopup=\"menu\"\n      aria-expanded={isOpen}\n      onClick={toggle}\n    >\n      <MoreSmall />\n    </IconButton>\n  );\n};\n\n/**\n * Edits a `MEDIA_IMAGE` cell. An empty cell shows the add and paste-URL\n * buttons. A cell with an image opens a popover with the image and its alt\n * text. Changes go to `onChange` as they happen and are committed once, when\n * the popover closes.\n */\nexport const CellMediaImageEdit: React.FC<CellMediaImageEditProps> = ({\n  value,\n  onChange,\n  onCommit,\n  onCancel,\n  onStartEdit,\n  inputRef,\n  dataHook,\n}) => {\n  const { t } = useTranslations();\n  const image = toMediaImageValue(value);\n  const src = getImageSource(image);\n  // 'none' once committed.\n  const [popoverLayer, setPopoverLayer] = useState<PopoverLayer>('popover');\n\n  const mediaEdit = useCellMediaEdit({\n    mediaType: MEDIA_TYPES.IMAGE,\n    value: image,\n    onChange,\n    onCommit,\n    onCancel,\n    onStartEdit,\n    inputRef,\n    fromPick: fromMediaManagerPick,\n    fromUrl: imageFromUrl,\n    commitOnPick: false,\n  });\n  const {\n    loading,\n    pasteUrlForm,\n    handleCallMedia,\n    handleDelete,\n    downloadMedia,\n  } = mediaEdit;\n  const closePasteUrl = pasteUrlForm.handleClose;\n  // The media manager and the URL form sit above the popover layers.\n  const openLayer: Layer = loading\n    ? 'loading'\n    : pasteUrlForm.isOpen\n    ? 'pasteUrl'\n    : image\n    ? popoverLayer\n    : 'none';\n\n  const openPasteUrl = mediaEdit.startEditAndOpenPasteUrl({\n    title: t('CMS.image.replaceWithUrl.title'),\n    value: isExternalMediaImage(image) ? image.url : undefined,\n  });\n\n  const handleDownload = useCallback(() => {\n    // The Media Manager can't make a download link for an external URL.\n    if (isExternalMediaImage(image)) {\n      executeDownloading(image.url);\n    } else if (src) {\n      downloadMedia(src);\n    }\n  }, [src, image, downloadMedia]);\n\n  const commit = useCallback(() => {\n    setPopoverLayer('none');\n    onCommit();\n  }, [onCommit]);\n\n  // Picking Preview sets its own layer, which closing the menu must not undo.\n  const handleMenuOpenChange = useCallback((isOpen: boolean) => {\n    setPopoverLayer((layer) => {\n      if (isOpen) {\n        return 'menu';\n      }\n      return layer === 'menu' ? 'popover' : layer;\n    });\n  }, []);\n\n  // Fires on mouseup, before the click that closes a menu or a modal, so\n  // `openLayer` still says what was open.\n  const handleClickOutside = useCallback(() => {\n    if (openLayer === 'popover') {\n      commit();\n    }\n  }, [openLayer, commit]);\n\n  useEffect(() => {\n    // WDS closes the menu on Escape and stops the event there.\n    if (\n      openLayer === 'none' ||\n      openLayer === 'loading' ||\n      openLayer === 'menu'\n    ) {\n      return;\n    }\n    // Capture phase, so the table doesn't cancel the edit first.\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Escape') {\n        return;\n      }\n      e.stopPropagation();\n      if (openLayer === 'pasteUrl') {\n        closePasteUrl();\n      } else if (openLayer === 'preview') {\n        setPopoverLayer('popover');\n      } else {\n        commit();\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown, true);\n    return () => document.removeEventListener('keydown', handleKeyDown, true);\n  }, [openLayer, closePasteUrl, commit]);\n\n  const emptyActions = (\n    <>\n      <Tooltip content={t('CMS.image.add')} appendTo=\"window\">\n        <IconButton\n          size=\"tiny\"\n          priority=\"secondary\"\n          dataHook=\"media-image-edit-add-button\"\n          ariaLabel={t('CMS.image.add')}\n          onClick={handleCallMedia}\n        >\n          <Add />\n        </IconButton>\n      </Tooltip>\n      <Tooltip content={t('CMS.image.replaceWithUrl.button')} appendTo=\"window\">\n        <IconButton\n          size=\"tiny\"\n          priority=\"tertiary\"\n          dataHook=\"media-image-edit-paste-url-button\"\n          ariaLabel={t('CMS.image.replaceWithUrl.button')}\n          onClick={openPasteUrl}\n        >\n          <LinkSmall />\n        </IconButton>\n      </Tooltip>\n    </>\n  );\n\n  // One return for both states, so the shell and its container stay mounted\n  // when a pick fills an empty cell.\n  return (\n    <>\n      <CellMediaEditShell\n        dataHook={dataHook}\n        mediaEdit={mediaEdit}\n        fieldType={MediaFieldType.image}\n        padding={image ? '0' : undefined}\n      >\n        {!image ? (\n          emptyActions\n        ) : (\n          <div className={classes.view}>\n            <MediaImageView value={image} />\n            <div className={classes.anchor}>\n              <Popover\n                shown={popoverLayer !== 'none'}\n                appendTo=\"window\"\n                placement=\"bottom-start\"\n                moveBy={{ x: 0, y: 4 }}\n                zIndex={5001}\n                animate\n                flip\n                fixed={false}\n                onClickOutside={handleClickOutside}\n              >\n                <Popover.Element>\n                  <div className={classes.anchorBox} />\n                </Popover.Element>\n                <Popover.Content>\n                  <Box\n                    dataHook=\"media-image-edit-popover\"\n                    className={classes.popoverContent}\n                    direction=\"vertical\"\n                    gap=\"SP3\"\n                    padding=\"SP3\"\n                  >\n                    <FormField label={t('CMS.image.thumbnail.label')}>\n                      <div className={classes.image}>\n                        <MediaImage\n                          dataHook=\"media-image-edit-image\"\n                          src={src}\n                          alt=\"\"\n                          fit=\"cover\"\n                          transparent\n                          size={ThumbnailSize.L}\n                          width=\"180px\"\n                          height=\"180px\"\n                          borderRadius=\"0\"\n                        />\n                        <div\n                          className={st(classes.imageActions, {\n                            menuOpen: popoverLayer === 'menu',\n                          })}\n                        >\n                          <Tooltip\n                            content={t('CMS.image.replace')}\n                            appendTo=\"window\"\n                          >\n                            <IconButton\n                              size=\"small\"\n                              skin=\"light\"\n                              priority=\"secondary\"\n                              dataHook=\"media-image-edit-replace-button\"\n                              ariaLabel={t('CMS.image.replace')}\n                              onClick={handleCallMedia}\n                            >\n                              <Replace />\n                            </IconButton>\n                          </Tooltip>\n                          <PopoverMenu\n                            textSize=\"small\"\n                            appendTo=\"window\"\n                            zIndex={5002}\n                            triggerElement={({ isOpen, toggle, ref }) => (\n                              <MenuTrigger\n                                isOpen={isOpen}\n                                toggle={toggle}\n                                buttonRef={ref}\n                                onOpenChange={handleMenuOpenChange}\n                                ariaLabel={t(\n                                  'auto-patterns.fields.more_actions_tooltip',\n                                )}\n                              />\n                            )}\n                          >\n                            <PopoverMenu.MenuItem\n                              dataHook=\"media-image-edit-action-replace-url\"\n                              text={t('CMS.image.replaceWithUrl.button')}\n                              prefixIcon={<Link />}\n                              onClick={openPasteUrl}\n                            />\n                            <PopoverMenu.MenuItem\n                              dataHook=\"media-image-edit-action-preview\"\n                              text={t('CMS.mediaGallery.preview')}\n                              prefixIcon={<Maximize />}\n                              onClick={() => setPopoverLayer('preview')}\n                            />\n                            <PopoverMenu.MenuItem\n                              dataHook=\"media-image-edit-action-download\"\n                              text={t('CMS.image.download')}\n                              prefixIcon={<Download />}\n                              onClick={handleDownload}\n                            />\n                            <PopoverMenu.Divider />\n                            <PopoverMenu.MenuItem\n                              dataHook=\"media-image-edit-action-delete\"\n                              text={t('CMS.image.clear')}\n                              skin=\"destructive\"\n                              prefixIcon={<Delete />}\n                              onClick={handleDelete}\n                            />\n                          </PopoverMenu>\n                        </div>\n                      </div>\n                    </FormField>\n                    <FormField label={t('CMS.image.altText.label')}>\n                      <Input\n                        dataHook=\"media-image-edit-alt-input\"\n                        size=\"small\"\n                        value={image.altText ?? ''}\n                        placeholder={t('CMS.image.altText.inputPlaceholder')}\n                        onChange={(e) =>\n                          onChange(withAltText(image, e.target.value))\n                        }\n                        onEnterPressed={commit}\n                      />\n                    </FormField>\n                  </Box>\n                </Popover.Content>\n              </Popover>\n            </div>\n          </div>\n        )}\n      </CellMediaEditShell>\n      {image && (\n        <MediaPreviewModal\n          isOpen={popoverLayer === 'preview'}\n          value={src}\n          onClose={() => setPopoverLayer('popover')}\n          onRequestMedia={handleCallMedia}\n          onClearMedia={handleDelete}\n          onDownloadMedia={handleDownload}\n          textKeys={{\n            replace: 'CMS.image.replace',\n            download: 'CMS.image.download',\n            delete: 'CMS.image.clear',\n          }}\n        />\n      )}\n    </>\n  );\n};\n\nCellMediaImageEdit.displayName = 'CellMediaImageEdit';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/media-image-field/cell-media-image-edit.st.css

@@ -0,0 +1,63 @@
+@property st-global(--wds-color-fill-transparent-primary);
+@property st-global(--wsr-color-D10);
+@property st-global(--wds-image-border-radius-default);
+@property st-global(--wds-space-100);
+
+.view {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* A zero-height strip along the cell's bottom edge, so the popover opens
+   under the cell. */
+.anchor {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 0;
+}
+
+.anchorBox {
+  width: 100%;
+  height: 0;
+}
+
+.popoverContent {
+  width: 288px;
+  box-sizing: border-box;
+}
+
+.image {
+  position: relative;
+  width: 180px;
+  height: 180px;
+  border-radius: var(--wds-image-border-radius-default, 8px);
+  overflow: hidden;
+  line-height: 0;
+}
+
+/* Shown on hover, and while a button inside has focus, so the actions stay
+   reachable by keyboard. */
+.imageActions {
+  -st-states: menuOpen;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wds-space-100, 6px);
+  opacity: 0;
+  background: var(
+    --wds-color-fill-transparent-primary,
+    color-mix(in srgb, var(--wsr-color-D10, #000624) 66%, transparent)
+  );
+  transition: opacity 0.15s;
+}
+
+.image:hover .imageActions,
+.imageActions:focus-within,
+.imageActions:menuOpen {
+  opacity: 1;
+}