@wix/patterns-fields 1.12.0 → 1.14.0

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

@@ -0,0 +1,474 @@
+"use strict";
+
+exports.__esModule = true;
+exports.CellImageEdit = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _mediaUtils = require("../../utils/media-utils");
+var _hooks = require("../../hooks");
+var _mediaControl = require("../media-control");
+var _imageThumbnail = require("./image-thumbnail");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/image/cell-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); }
+const CellImageEdit = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook
+}) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const containerRef = (0, _react.useRef)(null);
+  // Tracks whether onMediaChange fired during the current callMedia() invocation.
+  // Reset to false before each call; checked after the promise resolves to detect
+  // "dismissed without selection" so the in-progress edit can be cancelled.
+  const mediaCommittedRef = (0, _react.useRef)(false);
+  const onMediaChange = (0, _react.useCallback)(uri => {
+    mediaCommittedRef.current = true;
+    onChange(uri);
+    onCommit();
+  }, [onChange, onCommit]);
+  const {
+    callMedia,
+    loading
+  } = (0, _mediaControl.useMediaControl)({
+    mediaType: _mediaUtils.MEDIA_TYPES.IMAGE,
+    value: value ?? undefined,
+    onChange: onMediaChange
+  });
+  const handleCallMedia = (0, _react.useCallback)(async () => {
+    onStartEdit == null || onStartEdit();
+    mediaCommittedRef.current = false;
+    await callMedia();
+    // If the picker was dismissed without a selection, neither onCommit nor
+    // onCancel ran — call onCancel now so isEditing resets to false and
+    // useClearFocusOnBlur is unblocked.
+    if (!mediaCommittedRef.current) {
+      onCancel == null || onCancel();
+    }
+  }, [onStartEdit, callMedia, onCancel]);
+  const pasteUrlTitle = t('CMS.image.replaceWithUrl.title');
+  const {
+    isOpen,
+    title,
+    onOpen,
+    onClose,
+    onSave
+  } = (0, _mediaControl.usePasteURLForm)({
+    onChange: onMediaChange
+  });
+
+  // When the paste-URL form is dismissed without saving, cancel the in-progress
+  // edit so isEditing returns to false and useClearFocusOnBlur works normally.
+  const handleFormClose = (0, _react.useCallback)(() => {
+    onClose();
+    onCancel == null || onCancel();
+  }, [onClose, onCancel]);
+  const handleOpenPasteUrl = (0, _react.useCallback)(params => () => {
+    onStartEdit == null || onStartEdit();
+    onOpen(params)();
+  }, [onStartEdit, onOpen]);
+  const handleDelete = (0, _react.useCallback)(() => {
+    onChange(null);
+    onCommit();
+  }, [onChange, onCommit]);
+
+  // Wire inputRef so the cell-level useEffect can focus the first button when
+  // the user presses Enter on a focused image cell (inner focus activation).
+  (0, _react.useEffect)(() => {
+    if (!inputRef) return;
+    inputRef.current = {
+      focus: () => {
+        var _containerRef$current;
+        const first = (_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.querySelectorAll('button')[0];
+        first == null || first.focus();
+      }
+    };
+    return () => {
+      inputRef.current = null;
+    };
+  }, [inputRef]);
+  const handleContainerFocus = (0, _react.useCallback)(() => {
+    var _containerRef$current2;
+    (_containerRef$current2 = containerRef.current) == null || _containerRef$current2.setAttribute('data-inner-focused', '');
+  }, []);
+  const handleContainerBlur = (0, _react.useCallback)(e => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      var _containerRef$current3;
+      (_containerRef$current3 = containerRef.current) == null || _containerRef$current3.removeAttribute('data-inner-focused');
+    }
+  }, []);
+  const focusCell = (0, _react.useCallback)(() => {
+    var _containerRef$current4;
+    const cellDiv = (_containerRef$current4 = containerRef.current) == null ? void 0 : _containerRef$current4.closest('[role="gridcell"]');
+    cellDiv == null || cellDiv.focus({
+      preventScroll: true
+    });
+  }, []);
+
+  // Native keydown listener — must be native (not React onKeyDown) so that
+  // e.stopPropagation() fires during the native bubble phase, before the event
+  // reaches the React root where useKeyboardNavigation's onKeyDown would
+  // otherwise intercept Tab and move to the next cell.
+  (0, _react.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        // Cancel any in-progress edit (e.g. if isEditing was set before opening
+        // a modal that then got dismissed via keyboard), then return focus to the
+        // cell div. The useCellFocusAndEditing useEffect will also refocus the
+        // cell div if isEditing transitions false→false is a no-op, so we also
+        // call focusCell() directly as a reliable fallback.
+        onCancel == null || onCancel();
+        focusCell();
+        return;
+      }
+
+      // Tab while a button in this component is focused: cycle through the
+      // interactive elements. Tab off the last (or Shift+Tab off the first)
+      // returns focus to the cell div for normal cell-level navigation.
+      if (e.key === 'Tab') {
+        const buttons = Array.from(el.querySelectorAll('button'));
+        const currentIdx = buttons.indexOf(document.activeElement);
+        if (currentIdx === -1) return; // focus is not on one of our buttons — pass through
+
+        e.preventDefault();
+        e.stopPropagation();
+        if (!e.shiftKey) {
+          if (currentIdx >= buttons.length - 1) {
+            focusCell();
+          } else {
+            var _buttons;
+            (_buttons = buttons[currentIdx + 1]) == null || _buttons.focus();
+          }
+        } else {
+          if (currentIdx <= 0) {
+            focusCell();
+          } else {
+            var _buttons2;
+            (_buttons2 = buttons[currentIdx - 1]) == null || _buttons2.focus();
+          }
+        }
+      }
+    };
+    el.addEventListener('keydown', handleKeyDown);
+    return () => el.removeEventListener('keydown', handleKeyDown);
+  }, [focusCell, onCancel]);
+  if (loading) {
+    return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      dataHook: dataHook,
+      verticalAlign: "middle",
+      width: "100%",
+      height: "100%",
+      padding: "0 8px",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 199,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Loader, {
+      size: "tiny",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 206,
+        columnNumber: 9
+      }
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    "data-hook": dataHook,
+    style: {
+      width: '100%',
+      height: '100%'
+    },
+    onFocus: handleContainerFocus,
+    onBlur: handleContainerBlur,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 212,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    align: "space-between",
+    verticalAlign: "middle",
+    height: "100%",
+    padding: "0 8px",
+    style: {
+      boxSizing: 'border-box'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 219,
+      columnNumber: 7
+    }
+  }, value ?
+  /*#__PURE__*/
+  /* Has value: clickable thumbnail button with replace overlay */
+  _react.default.createElement(_designSystem.Tooltip, {
+    content: t('CMS.image.replace'),
+    appendTo: "window",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 228,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 229,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "data-hook": "image-edit-thumbnail",
+    onClick: handleCallMedia,
+    style: {
+      cursor: 'pointer',
+      lineHeight: 0,
+      position: 'relative',
+      background: 'none',
+      border: 'none',
+      padding: 0
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 230,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_imageThumbnail.ImageThumbnail, {
+    value: value,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 243,
+      columnNumber: 17
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'rgba(0, 0, 0, 0.4)',
+      borderRadius: '3px'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 244,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Replace, {
+    style: {
+      color: 'white',
+      width: '18px',
+      height: '18px'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 255,
+      columnNumber: 19
+    }
+  }))))) :
+  /*#__PURE__*/
+  /* Empty: icon button opens media manager */
+  _react.default.createElement(_designSystem.Tooltip, {
+    content: t('CMS.image.add'),
+    appendTo: "window",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 264,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    size: "tiny",
+    priority: "secondary",
+    dataHook: "image-edit-add-button",
+    onClick: handleCallMedia,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 265,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Add, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 271,
+      columnNumber: 15
+    }
+  }))), value ?
+  /*#__PURE__*/
+  /* Has value: "..." menu with Replace / Replace with URL / Delete */
+  _react.default.createElement(_designSystem.PopoverMenu, {
+    textSize: "small",
+    appendTo: "window",
+    triggerElement: /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+      content: t('auto-patterns.fields.more_actions_tooltip'),
+      appendTo: "window",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 282,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+      size: "tiny",
+      priority: "tertiary",
+      dataHook: "image-edit-more-button",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 286,
+        columnNumber: 17
+      }
+    }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.MoreSmall, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 291,
+        columnNumber: 19
+      }
+    }))),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 278,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    dataHook: "image-edit-action-replace",
+    text: t('CMS.image.replace'),
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Replace, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 299,
+        columnNumber: 27
+      }
+    }),
+    onClick: handleCallMedia,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 296,
+      columnNumber: 13
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    dataHook: "image-edit-action-replace-url",
+    text: t('CMS.image.replaceWithUrl.button'),
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Link, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 305,
+        columnNumber: 27
+      }
+    }),
+    onClick: handleOpenPasteUrl({
+      title: pasteUrlTitle,
+      value: value ?? undefined
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 302,
+      columnNumber: 13
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.Divider, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 311,
+      columnNumber: 13
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.PopoverMenu.MenuItem, {
+    dataHook: "image-edit-action-delete",
+    text: t('CMS.image.clear'),
+    skin: "destructive",
+    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Delete, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 316,
+        columnNumber: 27
+      }
+    }),
+    onClick: handleDelete,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 312,
+      columnNumber: 13
+    }
+  })) :
+  /*#__PURE__*/
+  /* Empty: icon button opens paste-URL form */
+  _react.default.createElement(_designSystem.Tooltip, {
+    content: t('CMS.image.replaceWithUrl.button'),
+    appendTo: "window",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 322,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    size: "tiny",
+    priority: "tertiary",
+    dataHook: "image-edit-paste-url-button",
+    onClick: handleOpenPasteUrl({
+      title: pasteUrlTitle,
+      value: value ?? undefined
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 326,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.LinkSmall, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 335,
+      columnNumber: 15
+    }
+  })))), /*#__PURE__*/_react.default.createElement(_mediaControl.PasteURLForm, {
+    title: title,
+    value: value ?? undefined,
+    show: isOpen,
+    closeModal: handleFormClose,
+    onSave: onSave,
+    fieldType: _mediaControl.MediaFieldType.image,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 341,
+      columnNumber: 7
+    }
+  }));
+};
+exports.CellImageEdit = CellImageEdit;
+CellImageEdit.displayName = 'CellImageEdit';
+//# sourceMappingURL=cell-image-edit.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_wixUiIconsCommon","_mediaUtils","_hooks","_mediaControl","_imageThumbnail","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CellImageEdit","value","onChange","onCommit","onCancel","onStartEdit","inputRef","dataHook","useTranslations","containerRef","useRef","mediaCommittedRef","onMediaChange","useCallback","uri","current","callMedia","loading","useMediaControl","mediaType","MEDIA_TYPES","IMAGE","undefined","handleCallMedia","pasteUrlTitle","isOpen","title","onOpen","onClose","onSave","usePasteURLForm","handleFormClose","handleOpenPasteUrl","params","handleDelete","useEffect","focus","_containerRef$current","first","querySelectorAll","handleContainerFocus","_containerRef$current2","setAttribute","handleContainerBlur","currentTarget","contains","relatedTarget","_containerRef$current3","removeAttribute","focusCell","_containerRef$current4","cellDiv","closest","preventScroll","el","handleKeyDown","key","preventDefault","stopPropagation","buttons","Array","from","currentIdx","indexOf","document","activeElement","shiftKey","length","_buttons","_buttons2","addEventListener","removeEventListener","createElement","Box","verticalAlign","width","height","padding","__self","__source","fileName","lineNumber","columnNumber","Loader","size","ref","style","onFocus","onBlur","align","boxSizing","Tooltip","content","appendTo","type","onClick","cursor","lineHeight","position","background","border","ImageThumbnail","inset","display","alignItems","justifyContent","borderRadius","Replace","color","IconButton","priority","Add","PopoverMenu","textSize","triggerElement","MoreSmall","MenuItem","text","prefixIcon","Link","Divider","skin","Delete","LinkSmall","PasteURLForm","show","closeModal","fieldType","MediaFieldType","image","exports","displayName"],"sources":["../../../../src/components/image/cell-image-edit.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport {\n  Box,\n  IconButton,\n  Loader,\n  PopoverMenu,\n  Tooltip,\n} from '@wix/design-system';\nimport {\n  Add,\n  LinkSmall,\n  MoreSmall,\n  Replace,\n  Link,\n  Delete,\n} from '@wix/wix-ui-icons-common';\nimport { MEDIA_TYPES } from '../../utils/media-utils';\nimport { useTranslations } from '../../hooks';\nimport {\n  useMediaControl,\n  usePasteURLForm,\n  PasteURLForm,\n  MediaFieldType,\n} from '../media-control';\nimport { ImageThumbnail } from './image-thumbnail';\n\nexport interface CellImageEditProps {\n  value: string | null | undefined;\n  onChange: (value: string | 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\nexport const CellImageEdit: React.FC<CellImageEditProps> = ({\n  value,\n  onChange,\n  onCommit,\n  onCancel,\n  onStartEdit,\n  inputRef,\n  dataHook,\n}) => {\n  const { t } = useTranslations();\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  // Tracks whether onMediaChange fired during the current callMedia() invocation.\n  // Reset to false before each call; checked after the promise resolves to detect\n  // \"dismissed without selection\" so the in-progress edit can be cancelled.\n  const mediaCommittedRef = useRef(false);\n\n  const onMediaChange = useCallback(\n    (uri: string) => {\n      mediaCommittedRef.current = true;\n      onChange(uri);\n      onCommit();\n    },\n    [onChange, onCommit],\n  );\n\n  const { callMedia, loading } = useMediaControl({\n    mediaType: MEDIA_TYPES.IMAGE,\n    value: value ?? undefined,\n    onChange: onMediaChange,\n  });\n\n  const handleCallMedia = useCallback(async () => {\n    onStartEdit?.();\n    mediaCommittedRef.current = false;\n    await callMedia();\n    // If the picker was dismissed without a selection, neither onCommit nor\n    // onCancel ran — call onCancel now so isEditing resets to false and\n    // useClearFocusOnBlur is unblocked.\n    if (!mediaCommittedRef.current) {\n      onCancel?.();\n    }\n  }, [onStartEdit, callMedia, onCancel]);\n\n  const pasteUrlTitle = t('CMS.image.replaceWithUrl.title');\n  const { isOpen, title, onOpen, onClose, onSave } = usePasteURLForm({\n    onChange: onMediaChange,\n  });\n\n  // When the paste-URL form is dismissed without saving, cancel the in-progress\n  // edit so isEditing returns to false and useClearFocusOnBlur works normally.\n  const handleFormClose = useCallback(() => {\n    onClose();\n    onCancel?.();\n  }, [onClose, onCancel]);\n\n  const handleOpenPasteUrl = useCallback(\n    (params: { title: string; value?: string }) => () => {\n      onStartEdit?.();\n      onOpen(params)();\n    },\n    [onStartEdit, onOpen],\n  );\n\n  const handleDelete = useCallback(() => {\n    onChange(null);\n    onCommit();\n  }, [onChange, onCommit]);\n\n  // Wire inputRef so the cell-level useEffect can focus the first button when\n  // the user presses Enter on a focused image cell (inner focus activation).\n  useEffect(() => {\n    if (!inputRef) return;\n    inputRef.current = {\n      focus: () => {\n        const first =\n          containerRef.current?.querySelectorAll<HTMLElement>('button')[0];\n        first?.focus();\n      },\n    };\n    return () => {\n      inputRef.current = null;\n    };\n  }, [inputRef]);\n\n  const handleContainerFocus = useCallback(() => {\n    containerRef.current?.setAttribute('data-inner-focused', '');\n  }, []);\n\n  const handleContainerBlur = useCallback((e: React.FocusEvent) => {\n    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {\n      containerRef.current?.removeAttribute('data-inner-focused');\n    }\n  }, []);\n\n  const focusCell = useCallback(() => {\n    const cellDiv = containerRef.current?.closest(\n      '[role=\"gridcell\"]',\n    ) as HTMLElement | null;\n    cellDiv?.focus({ preventScroll: true });\n  }, []);\n\n  // Native keydown listener — must be native (not React onKeyDown) so that\n  // e.stopPropagation() fires during the native bubble phase, before the event\n  // reaches the React root where useKeyboardNavigation's onKeyDown would\n  // otherwise intercept Tab and move to the next cell.\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        // Cancel any in-progress edit (e.g. if isEditing was set before opening\n        // a modal that then got dismissed via keyboard), then return focus to the\n        // cell div. The useCellFocusAndEditing useEffect will also refocus the\n        // cell div if isEditing transitions false→false is a no-op, so we also\n        // call focusCell() directly as a reliable fallback.\n        onCancel?.();\n        focusCell();\n        return;\n      }\n\n      // Tab while a button in this component is focused: cycle through the\n      // interactive elements. Tab off the last (or Shift+Tab off the first)\n      // returns focus to the cell div for normal cell-level navigation.\n      if (e.key === 'Tab') {\n        const buttons = Array.from(el.querySelectorAll<HTMLElement>('button'));\n        const currentIdx = buttons.indexOf(\n          document.activeElement as HTMLElement,\n        );\n        if (currentIdx === -1) return; // focus is not on one of our buttons — pass through\n\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (!e.shiftKey) {\n          if (currentIdx >= buttons.length - 1) {\n            focusCell();\n          } else {\n            buttons[currentIdx + 1]?.focus();\n          }\n        } else {\n          if (currentIdx <= 0) {\n            focusCell();\n          } else {\n            buttons[currentIdx - 1]?.focus();\n          }\n        }\n      }\n    };\n\n    el.addEventListener('keydown', handleKeyDown);\n    return () => el.removeEventListener('keydown', handleKeyDown);\n  }, [focusCell, onCancel]);\n\n  if (loading) {\n    return (\n      <Box\n        dataHook={dataHook}\n        verticalAlign=\"middle\"\n        width=\"100%\"\n        height=\"100%\"\n        padding=\"0 8px\"\n      >\n        <Loader size=\"tiny\" />\n      </Box>\n    );\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      data-hook={dataHook}\n      style={{ width: '100%', height: '100%' }}\n      onFocus={handleContainerFocus}\n      onBlur={handleContainerBlur}\n    >\n      <Box\n        align=\"space-between\"\n        verticalAlign=\"middle\"\n        height=\"100%\"\n        padding=\"0 8px\"\n        style={{ boxSizing: 'border-box' }}\n      >\n        {value ? (\n          /* Has value: clickable thumbnail button with replace overlay */\n          <Tooltip content={t('CMS.image.replace')} appendTo=\"window\">\n            <Box>\n              <button\n                type=\"button\"\n                data-hook=\"image-edit-thumbnail\"\n                onClick={handleCallMedia}\n                style={{\n                  cursor: 'pointer',\n                  lineHeight: 0,\n                  position: 'relative',\n                  background: 'none',\n                  border: 'none',\n                  padding: 0,\n                }}\n              >\n                <ImageThumbnail value={value} />\n                <div\n                  style={{\n                    position: 'absolute',\n                    inset: 0,\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    background: 'rgba(0, 0, 0, 0.4)',\n                    borderRadius: '3px',\n                  }}\n                >\n                  <Replace\n                    style={{ color: 'white', width: '18px', height: '18px' }}\n                  />\n                </div>\n              </button>\n            </Box>\n          </Tooltip>\n        ) : (\n          /* Empty: icon button opens media manager */\n          <Tooltip content={t('CMS.image.add')} appendTo=\"window\">\n            <IconButton\n              size=\"tiny\"\n              priority=\"secondary\"\n              dataHook=\"image-edit-add-button\"\n              onClick={handleCallMedia}\n            >\n              <Add />\n            </IconButton>\n          </Tooltip>\n        )}\n\n        {value ? (\n          /* Has value: \"...\" menu with Replace / Replace with URL / Delete */\n          <PopoverMenu\n            textSize=\"small\"\n            appendTo=\"window\"\n            triggerElement={\n              <Tooltip\n                content={t('auto-patterns.fields.more_actions_tooltip')}\n                appendTo=\"window\"\n              >\n                <IconButton\n                  size=\"tiny\"\n                  priority=\"tertiary\"\n                  dataHook=\"image-edit-more-button\"\n                >\n                  <MoreSmall />\n                </IconButton>\n              </Tooltip>\n            }\n          >\n            <PopoverMenu.MenuItem\n              dataHook=\"image-edit-action-replace\"\n              text={t('CMS.image.replace')}\n              prefixIcon={<Replace />}\n              onClick={handleCallMedia}\n            />\n            <PopoverMenu.MenuItem\n              dataHook=\"image-edit-action-replace-url\"\n              text={t('CMS.image.replaceWithUrl.button')}\n              prefixIcon={<Link />}\n              onClick={handleOpenPasteUrl({\n                title: pasteUrlTitle,\n                value: value ?? undefined,\n              })}\n            />\n            <PopoverMenu.Divider />\n            <PopoverMenu.MenuItem\n              dataHook=\"image-edit-action-delete\"\n              text={t('CMS.image.clear')}\n              skin=\"destructive\"\n              prefixIcon={<Delete />}\n              onClick={handleDelete}\n            />\n          </PopoverMenu>\n        ) : (\n          /* Empty: icon button opens paste-URL form */\n          <Tooltip\n            content={t('CMS.image.replaceWithUrl.button')}\n            appendTo=\"window\"\n          >\n            <IconButton\n              size=\"tiny\"\n              priority=\"tertiary\"\n              dataHook=\"image-edit-paste-url-button\"\n              onClick={handleOpenPasteUrl({\n                title: pasteUrlTitle,\n                value: value ?? undefined,\n              })}\n            >\n              <LinkSmall />\n            </IconButton>\n          </Tooltip>\n        )}\n      </Box>\n\n      <PasteURLForm\n        title={title}\n        value={value ?? undefined}\n        show={isOpen}\n        closeModal={handleFormClose}\n        onSave={onSave}\n        fieldType={MediaFieldType.image}\n      />\n    </div>\n  );\n};\n\nCellImageEdit.displayName = 'CellImageEdit';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/image/image-thumbnail.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ImageThumbnail = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _autoFieldTypes = require("../../auto-field-types");
+var _mediaImage = require("../media-image");
+var _overlays = require("../media-image/overlays");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/image/image-thumbnail.tsx";
+const ImageThumbnail = ({
+  value,
+  onLoad,
+  onError,
+  onMouseEnter,
+  onMouseLeave,
+  dataHook
+}) => {
+  const src = value ? (0, _autoFieldTypes.mediaURItoImageURL)(value, _autoFieldTypes.ThumbnailSize.S) : undefined;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-hook": dataHook,
+    "data-empty": !value || undefined,
+    style: {
+      width: '36px',
+      height: '36px',
+      borderRadius: '3px',
+      flexShrink: 0,
+      position: 'relative'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 33,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_mediaImage.MediaImage, {
+    src: src,
+    alt: "",
+    suspended: true,
+    borderRadius: "3px",
+    transparent: true,
+    size: _autoFieldTypes.ThumbnailSize.S,
+    width: "36px",
+    height: "36px",
+    onLoad: onLoad,
+    onError: onError,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    overlay: value && (0, _autoFieldTypes.isMediaVideoURI)(value) ? /*#__PURE__*/_react.default.createElement(_overlays.VideoIndicatorOverlay, {
+      src: value,
+      size: "small",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 53,
+        columnNumber: 13
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_overlays.CustomUrlOverlay, {
+      src: value,
+      size: "small",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 55,
+        columnNumber: 13
+      }
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 38,
+      columnNumber: 7
+    }
+  }));
+};
+exports.ImageThumbnail = ImageThumbnail;
+ImageThumbnail.displayName = 'ImageThumbnail';
+//# sourceMappingURL=image-thumbnail.js.map

package/dist/cjs/components/image/image-thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_autoFieldTypes","_mediaImage","_overlays","_jsxFileName","ImageThumbnail","value","onLoad","onError","onMouseEnter","onMouseLeave","dataHook","src","mediaURItoImageURL","ThumbnailSize","S","undefined","default","createElement","style","width","height","borderRadius","flexShrink","position","__self","__source","fileName","lineNumber","columnNumber","MediaImage","alt","suspended","transparent","size","overlay","isMediaVideoURI","VideoIndicatorOverlay","CustomUrlOverlay","exports","displayName"],"sources":["../../../../src/components/image/image-thumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  isMediaVideoURI,\n  mediaURItoImageURL,\n  ThumbnailSize,\n} from '../../auto-field-types';\nimport { MediaImage } from '../media-image';\nimport {\n  CustomUrlOverlay,\n  VideoIndicatorOverlay,\n} from '../media-image/overlays';\n\nexport interface ImageThumbnailProps {\n  value?: string | null;\n  onLoad?: () => void;\n  onError?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  dataHook?: string;\n}\n\nexport const ImageThumbnail: React.FC<ImageThumbnailProps> = ({\n  value,\n  onLoad,\n  onError,\n  onMouseEnter,\n  onMouseLeave,\n  dataHook,\n}) => {\n  const src = value ? mediaURItoImageURL(value, ThumbnailSize.S) : undefined;\n\n  return (\n    <div\n      data-hook={dataHook}\n      data-empty={!value || undefined}\n      style={{ width: '36px', height: '36px', borderRadius: '3px', flexShrink: 0, position: 'relative' }}\n    >\n      <MediaImage\n        src={src}\n        alt=\"\"\n        suspended\n        borderRadius=\"3px\"\n        transparent\n        size={ThumbnailSize.S}\n        width=\"36px\"\n        height=\"36px\"\n        onLoad={onLoad}\n        onError={onError}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        overlay={\n          value && isMediaVideoURI(value) ? (\n            <VideoIndicatorOverlay src={value} size=\"small\" />\n          ) : (\n            <CustomUrlOverlay src={value} size=\"small\" />\n          )\n        }\n      />\n    </div>\n  );\n};\n\nImageThumbnail.displayName = 'ImageThumbnail';\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AAKA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAGiC,IAAAI,YAAA;AAW1B,MAAMC,cAA6C,GAAGA,CAAC;EAC5DC,KAAK;EACLC,MAAM;EACNC,OAAO;EACPC,YAAY;EACZC,YAAY;EACZC;AACF,CAAC,KAAK;EACJ,MAAMC,GAAG,GAAGN,KAAK,GAAG,IAAAO,kCAAkB,EAACP,KAAK,EAAEQ,6BAAa,CAACC,CAAC,CAAC,GAAGC,SAAS;EAE1E,oBACElB,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IACE,aAAWP,QAAS;IACpB,cAAY,CAACL,KAAK,IAAIU,SAAU;IAChCG,KAAK,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE,MAAM;MAAEC,YAAY,EAAE,KAAK;MAAEC,UAAU,EAAE,CAAC;MAAEC,QAAQ,EAAE;IAAW,CAAE;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAvB,YAAA;MAAAwB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEnG/B,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAAChB,WAAA,CAAA4B,UAAU;IACTlB,GAAG,EAAEA,GAAI;IACTmB,GAAG,EAAC,EAAE;IACNC,SAAS;IACTV,YAAY,EAAC,KAAK;IAClBW,WAAW;IACXC,IAAI,EAAEpB,6BAAa,CAACC,CAAE;IACtBK,KAAK,EAAC,MAAM;IACZC,MAAM,EAAC,MAAM;IACbd,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjBC,YAAY,EAAEA,YAAa;IAC3BC,YAAY,EAAEA,YAAa;IAC3ByB,OAAO,EACL7B,KAAK,IAAI,IAAA8B,+BAAe,EAAC9B,KAAK,CAAC,gBAC7BR,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACf,SAAA,CAAAkC,qBAAqB;MAACzB,GAAG,EAAEN,KAAM;MAAC4B,IAAI,EAAC,OAAO;MAAAT,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAvB,YAAA;QAAAwB,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAAC,gBAElD/B,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACf,SAAA,CAAAmC,gBAAgB;MAAC1B,GAAG,EAAEN,KAAM;MAAC4B,IAAI,EAAC,OAAO;MAAAT,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAvB,YAAA;QAAAwB,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAE/C;IAAAJ,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAvB,YAAA;MAAAwB,UAAA;MAAAC,YAAA;IAAA;EAAA,CACF,CACE,CAAC;AAEV,CAAC;AAACU,OAAA,CAAAlC,cAAA,GAAAA,cAAA;AAEFA,cAAc,CAACmC,WAAW,GAAG,gBAAgB","ignoreList":[]}