@wix/patterns 1.383.0 → 1.385.0

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.383.0";
+export declare const version = "patterns@1.385.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.383.0",
+  "version": "1.385.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -214,10 +214,10 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.300.0",
-    "@wix/bex-utils": "2.94.0",
+    "@wix/bex-core": "2.302.0",
+    "@wix/bex-utils": "2.95.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.18.0",
+    "@wix/patterns-fields": "1.20.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "3.13.0",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -280,7 +280,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.70.0",
+    "@wix/cairo-integration-utils": "1.71.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -437,5 +437,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "aba924056cb288bbf94981a0273b511642c736f688d5aed8cde2b7a4"
+  "falconPackageHash": "6428ef26add6d799f9648664b46a79ed62000e078bbe42af6f270069"
 }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse1759116046";
+var _namespace_ = "Collapse1113190780";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Collapse1759116046__root","exit":"Collapse1759116046__exit"};
+export var classes = {"root":"Collapse1113190780__root","exit":"Collapse1113190780__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader2325654747";
+var _namespace_ = "CollectionSectionHeader3073258850";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionSectionHeader2325654747__root","summaryIcon":"CollectionSectionHeader2325654747__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader3073258850__root","summaryIcon":"CollectionSectionHeader3073258850__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1333720175";
+var _namespace_ = "CollectionToolbar3080676970";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar1333720175__root","left":"CollectionToolbar1333720175__left","right":"CollectionToolbar1333720175__right","fullWidth":"CollectionToolbar1333720175__fullWidth"};
+export var classes = {"root":"CollectionToolbar3080676970__root","left":"CollectionToolbar3080676970__left","right":"CollectionToolbar3080676970__right","fullWidth":"CollectionToolbar3080676970__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3222619344";
+var _namespace_ = "SearchOrCustomFilter2278398807";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter3222619344__root","search":"SearchOrCustomFilter3222619344__search","searchMobile":"SearchOrCustomFilter3222619344__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2278398807__root","search":"SearchOrCustomFilter2278398807__search","searchMobile":"SearchOrCustomFilter2278398807__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CustomColumnsPanel/CustomColumnsCTAButton.tsx

@@ -9,6 +9,7 @@ import type { CustomColumnsDragAndDrop } from '../CustomColumns/CustomColumnsDra
 import type { Column } from '../../model';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
+import { useSchemaContext } from '../../providers/SchemaContext';
 
 export interface CustomColumnsCTAButtonProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -41,9 +42,11 @@ export function _CustomColumnsCTAButton<T, F extends FiltersMap>({
     }
   }, [onColumnClick, state.customColumnsStateInitialized]);
 
-  const isSchemaEditable = !!state.collectionDataExtension;
+  const schemaCtx = useSchemaContext();
+  const isSchema = !!schemaCtx?.schema;
+  const isEditable = !!state.collectionDataExtension || isSchema;
   const text = t(
-    isSchemaEditable
+    isEditable
       ? 'cairo.table.manage-fields.button.cta'
       : 'cairo.table.custom-columns.button.cta',
   );

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -10,6 +10,7 @@ import { CustomColumnsNoResults } from './CustomColumnsNoResults';
 import { useRafRender } from '../../hooks/useRafRender';
 import { ScrollableContent } from '../ScrollableContent';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
+import { useSchemaContext } from '../../providers/SchemaContext';
 
 export interface CustomColumnsPanelProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
@@ -22,6 +23,9 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const { translate: t } = useWixPatternsContainer();
 
   const { dragAndDrop, collectionDataExtension } = state;
+  const schemaCtx = useSchemaContext();
+  const isSchema = !!schemaCtx?.schema;
+  const isEditable = !!collectionDataExtension || isSchema;
 
   useEffect(() => state.init(), []);
 
@@ -37,20 +41,24 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   // Show search if they're using DEx OR if there are more than 5 columns
   const shouldShowSearch = isUsingDataExtension || totalColumns > 5;
 
+  const titleKey = isEditable
+    ? 'cairo.table.manage-fields.title'
+    : 'cairo.table.custom-columns.title';
+  const subtitleKey = isEditable
+    ? dragAndDrop
+      ? 'cairo.table.manage-fields.dragAndDrop.subtitle'
+      : 'cairo.table.manage-fields.subtitle'
+    : dragAndDrop
+    ? 'cairo.table.custom-columns.dragAndDrop.subtitle'
+    : 'cairo.table.custom-columns.subtitle';
+
   return (
     <PatternsSidePanel
       dataHook="custom-columns-panel"
       width="100%"
       onClose={() => state.onClose()}
     >
-      <SidePanel.Header
-        title={t('cairo.table.custom-columns.title')}
-        subtitle={
-          dragAndDrop
-            ? t('cairo.table.custom-columns.dragAndDrop.subtitle')
-            : t('cairo.table.custom-columns.subtitle')
-        }
-      >
+      <SidePanel.Header title={t(titleKey)} subtitle={t(subtitleKey)}>
         {shouldShowSearch && (
           <Box padding="0 SP3 SP2 SP3">
             <CustomColumnsSearch state={state} />

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

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

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell2516259688";
+var _namespace_ = "EditableCell1155625107";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell2516259688__root","validationIndicator":"EditableCell2516259688__validationIndicator"};
+export var classes = {"root":"EditableCell1155625107__root","validationIndicator":"EditableCell1155625107__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

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

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

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

package/src/components/EditableTable/cellTypes/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3947072120";
+var _namespace_ = "Edit61999194";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3947072120__root","booleanEdit":"Edit3947072120__booleanEdit"};
+export var classes = {"root":"Edit61999194__root","booleanEdit":"Edit61999194__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3297492583";
+var _namespace_ = "View3386812290";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View3297492583__root","booleanView":"View3297492583__booleanView"};
+export var classes = {"root":"View3386812290__root","booleanView":"View3386812290__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3940684260";
+var _namespace_ = "Edit2661826826";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3940684260__root","dateInput":"Edit3940684260__dateInput"};
+export var classes = {"root":"Edit2661826826__root","dateInput":"Edit2661826826__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3553603124";
+var _namespace_ = "Edit3864650947";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3553603124__root","emailInput":"Edit3553603124__emailInput"};
+export var classes = {"root":"Edit3864650947__root","emailInput":"Edit3864650947__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/index.ts

@@ -10,6 +10,7 @@ import { imageCellType } from './image';
 import { richContentCellType } from './richContent';
 import { videoCellType } from './video';
 import { richTextCellType } from './richText';
+import { mediaGalleryCellType } from './mediaGallery';
 
 export {
   textCellType,
@@ -23,6 +24,7 @@ export {
   richContentCellType,
   videoCellType,
   richTextCellType,
+  mediaGalleryCellType,
 };
 
 /** All built-in cell types */
@@ -38,4 +40,5 @@ export const builtInCellTypes: CellType[] = [
   richContentCellType,
   videoCellType,
   richTextCellType,
+  mediaGalleryCellType,
 ];

package/src/components/EditableTable/cellTypes/mediaGallery/Edit.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import { CellMediaGalleryEdit } from '@wix/patterns-fields';
+import type { WixCodeGalleryItem } from '@wix/patterns-fields/auto-field-types';
+import type { CellEditProps } from '../../types';
+
+export const MediaGalleryEdit: React.FC<
+  CellEditProps<WixCodeGalleryItem[] | null>
+> = ({ value, onChange, onCommit, onCancel, onStartEdit, inputRef }) => {
+  const handleChange = useCallback(
+    (items: WixCodeGalleryItem[] | null) => onChange(items),
+    [onChange],
+  );
+
+  return (
+    <CellMediaGalleryEdit
+      value={value}
+      onChange={handleChange}
+      onCommit={onCommit}
+      onCancel={onCancel}
+      onStartEdit={onStartEdit}
+      inputRef={inputRef}
+      dataHook="media-gallery-edit"
+    />
+  );
+};
+
+export default MediaGalleryEdit;

package/src/components/EditableTable/cellTypes/mediaGallery/Edit.uni.driver.ts

@@ -0,0 +1,16 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function MediaGalleryEditUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasAddButton: () =>
+      base.$('[data-hook="gallery-edit-add-button"]').exists(),
+    hasMoreButton: () =>
+      base.$('[data-hook="gallery-edit-more-button"]').exists(),
+    hasAvatarGroup: () =>
+      base
+        .$('[data-hook="media-gallery-edit"] [data-hook="avatar-item"]')
+        .exists(),
+  };
+}

package/src/components/EditableTable/cellTypes/mediaGallery/View.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CellMediaGalleryView } from '@wix/patterns-fields';
+import type { WixCodeGalleryItem } from '@wix/patterns-fields/auto-field-types';
+import type { CellViewProps } from '../../types';
+
+export const MediaGalleryView: React.FC<
+  CellViewProps<WixCodeGalleryItem[] | null>
+> = ({ value }) => (
+  <CellMediaGalleryView data={value} dataHook="media-gallery-view" />
+);

package/src/components/EditableTable/cellTypes/mediaGallery/View.uni.driver.ts

@@ -0,0 +1,17 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function MediaGalleryViewUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasAvatarGroup: () =>
+      base.$('[data-hook="media-gallery-view"] [data-hook="avatar-item"]').exists(),
+    isEmpty: async () => {
+      const count = await base
+        .$('[data-hook="media-gallery-view"]')
+        .$$('[data-hook="avatar-item"]')
+        .count();
+      return count === 0;
+    },
+  };
+}

package/src/components/EditableTable/cellTypes/mediaGallery/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Loader } from '@wix/design-system';
+import type { WixCodeGalleryItem } from '@wix/patterns-fields/auto-field-types';
+import { defineCellType } from '../../types';
+import type { CellEditProps } from '../../types';
+import { MediaGalleryView } from './View';
+
+const mediaGalleryEditFactory = () =>
+  import(/* webpackChunkName: "EditableTableMediaGalleryEdit" */ './Edit');
+
+if (process.env.STORYBOOK_VISUAL_E2E !== 'true') {
+  mediaGalleryEditFactory();
+}
+
+const LazyMediaGalleryEdit = React.lazy(mediaGalleryEditFactory);
+
+const MediaGalleryEdit = (
+  props: CellEditProps<WixCodeGalleryItem[] | null>,
+) => (
+  <React.Suspense fallback={<Loader size="tiny" />}>
+    <LazyMediaGalleryEdit {...props} />
+  </React.Suspense>
+);
+
+export const mediaGalleryCellType = defineCellType<WixCodeGalleryItem[] | null>(
+  {
+    type: 'mediaGallery',
+    ViewComponent: MediaGalleryView,
+    EditComponent: MediaGalleryEdit,
+    serialize: (value) => (value ?? []).map((item) => item.src).join(', '),
+    clearable: true,
+    showEditWhenFocused: true,
+    // Returning undefined blocks all key presses from starting type-to-edit, but
+    // the presence of the function sets the :typeToEdit CSS modifier which keeps
+    // the selection borders visible while the cell is in edit mode (double border).
+    onTypeToEdit: () => undefined,
+  },
+);

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2017827502";
+var _namespace_ = "Edit2675310422";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2017827502__root","numberInput":"Edit2017827502__numberInput"};
+export var classes = {"root":"Edit2675310422__root","numberInput":"Edit2675310422__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};