@wix/patterns-fields 1.18.0 → 1.22.0

package/dist/types/hooks/use-cell-edit-keyboard.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+interface UseCellEditKeyboardOptions {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    onCancel?: () => void;
+    inputRef?: React.MutableRefObject<{
+        focus: () => void;
+    } | null | undefined>;
+}
+interface UseCellEditKeyboardResult {
+    handleContainerFocus: () => void;
+    handleContainerBlur: (e: React.FocusEvent) => void;
+}
+/**
+ * Shared keyboard/focus wiring for cell-edit components that contain buttons.
+ *
+ * - Wires inputRef so the parent table can focus the first button on Enter.
+ * - Sets/removes data-inner-focused on the container for CSS styling.
+ * - Native keydown handler: Escape → onCancel + return focus to gridcell;
+ *   Tab / Shift+Tab → cycle through buttons, Tab off last returns to gridcell.
+ *
+ * Must use a native listener (not React onKeyDown) so stopPropagation fires
+ * before the React root's useKeyboardNavigation intercepts Tab.
+ */
+export declare function useCellEditKeyboard({ containerRef, onCancel, inputRef, }: UseCellEditKeyboardOptions): UseCellEditKeyboardResult;
+export {};
+//# sourceMappingURL=use-cell-edit-keyboard.d.ts.map

package/dist/types/hooks/use-cell-edit-keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cell-edit-keyboard.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-cell-edit-keyboard.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,0BAA0B;IAClC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CAC7E;AAED,UAAU,yBAAyB;IACjC,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACpD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,0BAA0B,GAAG,yBAAyB,CA+ExD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.18.0",
+  "version": "1.22.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -112,7 +112,7 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.12.0",
+    "@wix/patterns-fields-utils": "1.14.0",
     "@wix/rich-content": "1.0.37",
     "@wix/ricos": "^10.155.2",
     "@wix/wix-ui-icons-common": "^3.100.0",
@@ -138,7 +138,7 @@
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
-    "@wix/bex-core": "2.300.0",
+    "@wix/bex-core": "2.303.0",
     "@wix/design-system": "^1.271.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
@@ -192,5 +192,5 @@
       "type": "yoshi-flow-library"
     }
   },
-  "falconPackageHash": "f83b455d816fb72cce38a63a0442d2314222fb470d8497f8cc758688"
+  "falconPackageHash": "bc89993b0834f04e63dde1b389796b5ab39bb4df896ed6498ac3811f"
 }

package/src/assets/locale/messages_en.json

@@ -95,7 +95,7 @@
   "CMS.mediaGallery.emptyHint": "Select images and videos to add",
   "CMS.mediaGallery.manageGallery": "Manage media",
   "CMS.mediaGallery.preview": "Preview",
-  "CMS.mediaGallery.clear": "Clear",
+  "CMS.mediaGallery.clear": "Delete gallery",
   "CMS.mediaGallery.addMedia": "Add media",
   "CMS.mediaGallery.replaceItem": "Replace Media",
 

package/src/components/address/input/address-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput1079778";
+var _namespace_ = "addressinput3960735310";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"addressinput1079778__root","tableAddressInput":"addressinput1079778__tableAddressInput"};
+export var classes = {"root":"addressinput3960735310__root","tableAddressInput":"addressinput3960735310__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu603157293";
+var _namespace_ = "actionsmenu3677708562";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"actionsmenu603157293__root","action":"actionsmenu603157293__action"};
+export var classes = {"root":"actionsmenu3677708562__root","action":"actionsmenu3677708562__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-field/form-audio-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield1019037637";
+var _namespace_ = "formaudiofield659327102";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formaudiofield1019037637__root","addItem":"formaudiofield1019037637__addItem","mediaTitle":"formaudiofield1019037637__mediaTitle"};
+export var classes = {"root":"formaudiofield659327102__root","addItem":"formaudiofield659327102__addItem","mediaTitle":"formaudiofield659327102__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "audioplayer3953334470";
+var _namespace_ = "audioplayer469313110";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"audioplayer3953334470__root"};
+export var classes = {"root":"audioplayer469313110__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview192563780";
+var _namespace_ = "colorview2990793565";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"colorview192563780__root","view":"colorview192563780__view","fillPreview":"colorview192563780__fillPreview"};
+export var classes = {"root":"colorview2990793565__root","view":"colorview2990793565__view","fillPreview":"colorview2990793565__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog3941549956";
+var _namespace_ = "deletedialog1621463198";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"deletedialog3941549956__root","layout":"deletedialog3941549956__layout"};
+export var classes = {"root":"deletedialog1621463198__root","layout":"deletedialog1621463198__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield3650067196";
+var _namespace_ = "formdocumentfield4151355258";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formdocumentfield3650067196__root","viewWrapper":"formdocumentfield3650067196__viewWrapper","textWidth":"formdocumentfield3650067196__textWidth","documentLoader":"formdocumentfield3650067196__documentLoader","addDocument":"formdocumentfield3650067196__addDocument","addItemWrapper":"formdocumentfield3650067196__addItemWrapper"};
+export var classes = {"root":"formdocumentfield4151355258__root","viewWrapper":"formdocumentfield4151355258__viewWrapper","textWidth":"formdocumentfield4151355258__textWidth","documentLoader":"formdocumentfield4151355258__documentLoader","addDocument":"formdocumentfield4151355258__addDocument","addItemWrapper":"formdocumentfield4151355258__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation4028169285";
+var _namespace_ = "exclamation728294289";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"exclamation4028169285__root","exclamation":"exclamation4028169285__exclamation","actions":"exclamation4028169285__actions","action":"exclamation4028169285__action"};
+export var classes = {"root":"exclamation728294289__root","exclamation":"exclamation728294289__exclamation","actions":"exclamation728294289__actions","action":"exclamation728294289__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext2257165359";
+var _namespace_ = "highlightedtext4166910545";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext2257165359__root","substring":"highlightedtext2257165359__substring"};
-export var keyframes = {"highlighted":"highlightedtext2257165359__highlighted","highlighted-match":"highlightedtext2257165359__highlighted-match"}; 
+export var classes = {"root":"highlightedtext4166910545__root","substring":"highlightedtext4166910545__substring"};
+export var keyframes = {"highlighted":"highlightedtext4166910545__highlighted","highlighted-match":"highlightedtext4166910545__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import {
   Box,
   IconButton,
@@ -15,7 +15,7 @@ import {
   Delete,
 } from '@wix/wix-ui-icons-common';
 import { MEDIA_TYPES } from '../../utils/media-utils';
-import { useTranslations } from '../../hooks';
+import { useTranslations, useCellEditKeyboard } from '../../hooks';
 import {
   useMediaControl,
   usePasteURLForm,
@@ -98,93 +98,11 @@ export const CellImageEdit: React.FC<CellImageEditProps> = ({
     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).
-  useEffect(() => {
-    if (!inputRef) return;
-    inputRef.current = {
-      focus: () => {
-        const first =
-          containerRef.current?.querySelectorAll<HTMLElement>('button')[0];
-        first?.focus();
-      },
-    };
-    return () => {
-      inputRef.current = null;
-    };
-  }, [inputRef]);
-
-  const handleContainerFocus = useCallback(() => {
-    containerRef.current?.setAttribute('data-inner-focused', '');
-  }, []);
-
-  const handleContainerBlur = useCallback((e: React.FocusEvent) => {
-    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
-      containerRef.current?.removeAttribute('data-inner-focused');
-    }
-  }, []);
-
-  const focusCell = useCallback(() => {
-    const cellDiv = containerRef.current?.closest(
-      '[role="gridcell"]',
-    ) as HTMLElement | 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.
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      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?.();
-        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<HTMLElement>('button'));
-        const currentIdx = buttons.indexOf(
-          document.activeElement as HTMLElement,
-        );
-        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 {
-            buttons[currentIdx + 1]?.focus();
-          }
-        } else {
-          if (currentIdx <= 0) {
-            focusCell();
-          } else {
-            buttons[currentIdx - 1]?.focus();
-          }
-        }
-      }
-    };
-
-    el.addEventListener('keydown', handleKeyDown);
-    return () => el.removeEventListener('keydown', handleKeyDown);
-  }, [focusCell, onCancel]);
+  const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
+    containerRef,
+    onCancel,
+    inputRef,
+  });
 
   if (loading) {
     return (

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay78307533";
+var _namespace_ = "thumbnailreplaceoverlay1904833214";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"thumbnailreplaceoverlay78307533__root","icon":"thumbnailreplaceoverlay78307533__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1904833214__root","icon":"thumbnailreplaceoverlay1904833214__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton2614320603";
+var _namespace_ = "pasteurlbutton2991491681";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"pasteurlbutton2614320603__root","iconButtonTooltip":"pasteurlbutton2614320603__iconButtonTooltip","iconButton":"pasteurlbutton2614320603__iconButton"};
+export var classes = {"root":"pasteurlbutton2991491681__root","iconButtonTooltip":"pasteurlbutton2991491681__iconButtonTooltip","iconButton":"pasteurlbutton2991491681__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/cell-media-gallery-edit.tsx

@@ -0,0 +1,223 @@
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  AvatarGroup,
+  Box,
+  IconButton,
+  PopoverMenu,
+  Tooltip,
+} from '@wix/design-system';
+import {
+  Add,
+  MoreSmall,
+  Refresh,
+  Delete,
+  Maximize,
+} from '@wix/wix-ui-icons-common';
+import { files } from '@wix/media';
+import {
+  mediaURItoImageURL,
+  ThumbnailSize,
+  getMediaURL,
+} from '../../auto-field-types';
+import type { WixCodeGalleryItem } from '../../auto-field-types';
+import { useTranslations, useCellEditKeyboard } from '../../hooks';
+import { executeDownloading } from '../../utils/media-utils';
+import { useMediaGalleryDialog } from './media-gallery-dialog/hooks';
+import { MediaGalleryDialog } from './media-gallery-dialog/media-gallery-dialog';
+import { MediaPreviewModal } from './media-preview-modal';
+
+const mediaGalleryPreviewTextKeys = {
+  replace: 'CMS.mediaGallery.preview.replace',
+  download: 'CMS.mediaGallery.preview.download',
+  delete: 'CMS.mediaGallery.preview.delete',
+} as const;
+
+export interface CellMediaGalleryEditProps {
+  value: WixCodeGalleryItem[] | null;
+  onChange: (value: WixCodeGalleryItem[] | null) => void;
+  onCommit: () => void;
+  onCancel?: () => void;
+  onStartEdit?: () => void;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+  dataHook?: string;
+}
+
+export const CellMediaGalleryEdit: React.FC<CellMediaGalleryEditProps> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook,
+}) => {
+  const { t } = useTranslations();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const hasValue = Boolean(value?.length);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  // Tracks whether a commit happened during the current external-UI session.
+  // Prevents calling onCancel() after the user already committed (e.g., clear
+  // in the preview modal fires onClear then onClose, but we should not cancel).
+  const didCommitRef = useRef(false);
+
+  const avatarItems = (value ?? []).map((item) => ({
+    imgProps: { src: mediaURItoImageURL(item.src, ThumbnailSize.S) },
+  }));
+
+  const { openMediaGalleryDialog, ...dialogProps } = useMediaGalleryDialog({
+    initialOpen: false,
+    items: value ?? [],
+    onChange: (items: WixCodeGalleryItem[]) => {
+      didCommitRef.current = true;
+      onChange(items.length > 0 ? items : null);
+      onCommit();
+    },
+  });
+
+  const handleOpenGallery = useCallback(() => {
+    didCommitRef.current = false;
+    onStartEdit?.();
+    openMediaGalleryDialog();
+  }, [onStartEdit, openMediaGalleryDialog]);
+
+  const handleOpenPreview = useCallback(() => {
+    didCommitRef.current = false;
+    onStartEdit?.();
+    setIsPreviewOpen(true);
+  }, [onStartEdit]);
+
+  const handlePreviewClose = useCallback(() => {
+    setIsPreviewOpen(false);
+    if (!didCommitRef.current) {
+      onCancel?.();
+    }
+    didCommitRef.current = false;
+  }, [onCancel]);
+
+  const handlePreviewRequestMedia = useCallback(() => {
+    setIsPreviewOpen(false);
+    openMediaGalleryDialog();
+  }, [openMediaGalleryDialog]);
+
+  const handlePreviewClear = useCallback(() => {
+    didCommitRef.current = true;
+    onChange(null);
+    onCommit();
+  }, [onChange, onCommit]);
+
+  const handleClearAll = useCallback(() => {
+    onChange(null);
+    onCommit();
+  }, [onChange, onCommit]);
+
+  const onDownloadMedia = useCallback(
+    async (mediaUri?: string) => {
+      const uri = mediaUri ?? value?.[0]?.src;
+      if (!uri) return;
+      try {
+        const result = await files.generateFileDownloadUrl(uri);
+        const downloadUrl = result.downloadUrls?.[0]?.url;
+        if (!downloadUrl) throw new Error('No download URL returned');
+        executeDownloading(downloadUrl);
+      } catch {
+        executeDownloading(getMediaURL(uri));
+      }
+    },
+    [value],
+  );
+
+  const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
+    containerRef,
+    onCancel,
+    inputRef,
+  });
+
+  return (
+    <div
+      ref={containerRef}
+      data-hook={dataHook}
+      style={{ width: '100%', height: '100%' }}
+      onFocus={handleContainerFocus}
+      onBlur={handleContainerBlur}
+    >
+      <Box
+        align="space-between"
+        verticalAlign="middle"
+        height="100%"
+        padding="0 8px"
+        style={{ boxSizing: 'border-box' }}
+      >
+        {hasValue ? (
+          <AvatarGroup items={avatarItems} size="tiny" type="condensed" />
+        ) : (
+          <Tooltip content={t('CMS.mediaGallery.addGallery')} appendTo="window">
+            <IconButton
+              size="tiny"
+              priority="secondary"
+              dataHook="gallery-edit-add-button"
+              onClick={handleOpenGallery}
+            >
+              <Add />
+            </IconButton>
+          </Tooltip>
+        )}
+
+        {hasValue ? (
+          <PopoverMenu
+            textSize="small"
+            appendTo="window"
+            triggerElement={
+              <Tooltip
+                content={t('auto-patterns.fields.more_actions_tooltip')}
+                appendTo="window"
+              >
+                <IconButton
+                  size="tiny"
+                  priority="tertiary"
+                  dataHook="gallery-edit-more-button"
+                >
+                  <MoreSmall />
+                </IconButton>
+              </Tooltip>
+            }
+          >
+            <PopoverMenu.MenuItem
+              dataHook="gallery-edit-action-manage"
+              text={t('CMS.mediaGallery.manageGallery')}
+              prefixIcon={<Refresh />}
+              onClick={handleOpenGallery}
+            />
+            <PopoverMenu.MenuItem
+              dataHook="gallery-edit-action-preview"
+              text={t('CMS.mediaGallery.preview')}
+              prefixIcon={<Maximize />}
+              onClick={handleOpenPreview}
+            />
+            <PopoverMenu.Divider />
+            <PopoverMenu.MenuItem
+              dataHook="gallery-edit-action-clear"
+              text={t('CMS.mediaGallery.clear')}
+              skin="destructive"
+              prefixIcon={<Delete />}
+              onClick={handleClearAll}
+            />
+          </PopoverMenu>
+        ) : null}
+      </Box>
+
+      {dialogProps.isOpen && <MediaGalleryDialog {...dialogProps} />}
+
+      <MediaPreviewModal
+        isOpen={isPreviewOpen}
+        onClose={handlePreviewClose}
+        value={(value ?? []).map((item) => item.src)}
+        onRequestMedia={handlePreviewRequestMedia}
+        onClearMedia={handlePreviewClear}
+        onDownloadMedia={onDownloadMedia}
+        textKeys={mediaGalleryPreviewTextKeys}
+      />
+    </div>
+  );
+};
+
+CellMediaGalleryEdit.displayName = 'CellMediaGalleryEdit';

package/src/components/media-gallery/cell-media-gallery-view.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { AvatarGroup, Box } from '@wix/design-system';
+import { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';
+import type { WixCodeGalleryItem } from '../../auto-field-types';
+
+export interface CellMediaGalleryViewProps {
+  data: WixCodeGalleryItem[] | null;
+  dataHook?: string;
+}
+
+export function CellMediaGalleryView({
+  data,
+  dataHook,
+}: CellMediaGalleryViewProps) {
+  const items = (data ?? []).map((item) => ({
+    imgProps: { src: mediaURItoImageURL(item.src, ThumbnailSize.S) },
+  }));
+
+  return (
+    <Box
+      dataHook={dataHook}
+      verticalAlign="middle"
+      height="100%"
+      width="100%"
+      padding="0 8px"
+      overflow="hidden"
+    >
+      {items.length > 0 ? (
+        <AvatarGroup items={items} size="tiny" type="condensed" />
+      ) : null}
+    </Box>
+  );
+}
+
+CellMediaGalleryView.displayName = 'CellMediaGalleryView';