@wix/patterns 1.382.0 → 1.385.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable1449442798";
+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":"CollectionTableWSRTable1449442798__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_ = "CollectionToolbar391164986";
+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":"CollectionToolbar391164986__root","left":"CollectionToolbar391164986__left","right":"CollectionToolbar391164986__right","fullWidth":"CollectionToolbar391164986__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_ = "SearchOrCustomFilter1122826608";
+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":"SearchOrCustomFilter1122826608__root","search":"SearchOrCustomFilter1122826608__search","searchMobile":"SearchOrCustomFilter1122826608__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_ = "AutoCompleteReadonly203087058";
+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":"AutoCompleteReadonly203087058__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_ = "ViewsDropdown4161659610";
+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":"ViewsDropdown4161659610__root"};
+export var classes = {"root":"ViewsDropdown1331904690__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -2,7 +2,7 @@ import { Box, InfoIcon, TableListItem, Text } from '@wix/design-system';
 import React, { CSSProperties, useMemo } from 'react';
 import { Column } from '../../model';
 import { observer } from 'mobx-react-lite';
-import { CustomColumnsState } from '../../state';
+import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { GridCardItemProps } from '../DragAndDrop';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -12,7 +12,7 @@ import { FieldIndications } from './FieldIndications';
 export interface ColumnListTableListItemProps<T, F extends FiltersMap>
   extends GridCardItemProps {
   column: Column;
-  state: CustomColumnsState<T, F>;
+  state: CustomColumnsPanelStateBase<T, F>;
   showDivider?: boolean;
 }
 

package/src/components/CustomColumnsPanel/ColumnsList.tsx

@@ -1,4 +1,4 @@
-import { CustomColumnsState } from '../../state';
+import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect } from 'react';
@@ -8,7 +8,7 @@ import { addEventListener } from '@wix/bex-core/util';
 import { ColumnListTableListItem } from './ColumnListTableListItem';
 
 export interface ColumnsListProps<T, F extends FiltersMap> {
-  state: CustomColumnsState<T, F>;
+  state: CustomColumnsPanelStateBase<T, F>;
 }
 
 function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {

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,7 +42,14 @@ export function _CustomColumnsCTAButton<T, F extends FiltersMap>({
     }
   }, [onColumnClick, state.customColumnsStateInitialized]);
 
-  const text = t('cairo.table.custom-columns.button.cta');
+  const schemaCtx = useSchemaContext();
+  const isSchema = !!schemaCtx?.schema;
+  const isEditable = !!state.collectionDataExtension || isSchema;
+  const text = t(
+    isEditable
+      ? 'cairo.table.manage-fields.button.cta'
+      : 'cairo.table.custom-columns.button.cta',
+  );
   const props = {
     size: 'small' as const,
     priority: 'secondary' as const,
@@ -86,7 +94,7 @@ export function _CustomColumnsCTAButton<T, F extends FiltersMap>({
         icon={<AdjustSmall />}
         {...props}
       >
-        {t('cairo.table.custom-columns.button.cta')}
+        {text}
       </ResponsiveButton>
     );
   };

package/src/components/CustomColumnsPanel/CustomColumnsEntityPageCTA.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { usePageContext } from '../../providers';
+import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPageState';
+import { WixPatternsModalsContainer } from '../WixPatternsModalsContainer';
+import { WixPatternsPanelModalsContainer } from '../WixPatternsPanelModalsContainer';
+import { CustomColumnsEntityPagePanelEntry } from './CustomColumnsEntityPagePanelEntry';
+
+export interface CustomColumnsEntityPageCTAProps {
+  state: CustomColumnsEntityPageState;
+}
+
+function _CustomColumnsEntityPageCTA({
+  state,
+}: CustomColumnsEntityPageCTAProps) {
+  const { panels } = state;
+  const { isPanelLayout, useRelativeSidePanel } = useWixPatternsContainer();
+  const { modalsContainerRef, stackingRootRef } = usePageContext();
+
+  useEffect(() => {
+    CustomColumnsEntityPagePanelEntry.state = state;
+    panels.registerSidePanel(
+      'customColumns',
+      CustomColumnsEntityPagePanelEntry,
+    );
+    return panels.init();
+  }, []);
+
+  if (isPanelLayout) {
+    return <WixPatternsPanelModalsContainer state={panels} />;
+  }
+
+  return (
+    <WixPatternsModalsContainer
+      rootRef={stackingRootRef}
+      anchorRef={useRelativeSidePanel ? stackingRootRef : modalsContainerRef}
+      state={panels}
+    />
+  );
+}
+
+_CustomColumnsEntityPageCTA.displayName = 'CustomColumnsEntityPageCTA';
+
+export const CustomColumnsEntityPageCTA = observer(_CustomColumnsEntityPageCTA);

package/src/components/CustomColumnsPanel/CustomColumnsEntityPagePanelEntry.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { CustomColumnsPanel } from './CustomColumnsPanel';
+import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPageState';
+
+function _CustomColumnsEntityPagePanelEntry() {
+  const state = CustomColumnsEntityPagePanelEntry.state;
+
+  if (!state) {
+    return null;
+  }
+
+  return <CustomColumnsPanel state={state} />;
+}
+
+export const CustomColumnsEntityPagePanelEntry = observer(
+  _CustomColumnsEntityPagePanelEntry,
+) as typeof _CustomColumnsEntityPagePanelEntry & {
+  state?: CustomColumnsEntityPageState;
+};

package/src/components/CustomColumnsPanel/CustomColumnsNoResults.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, Text, TextButton } from '@wix/design-system';
 import { Revert } from '@wix/wix-ui-icons-common';
-import { CustomColumnsState } from '../../state';
+import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { CollectionEmptyStateBase } from '../CollectionEmptyStateBase';
 
 export interface CustomColumnsNoResultsProps<T, F extends FiltersMap> {
-  state: CustomColumnsState<T, F>;
+  state: CustomColumnsPanelStateBase<T, F>;
 }
 
 export function _CustomColumnsNoResults<T, F extends FiltersMap>({

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -1,6 +1,6 @@
 import { Box, SidePanel } from '@wix/design-system';
 import React, { useEffect } from 'react';
-import { CustomColumnsState } from '../../state';
+import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
@@ -10,9 +10,10 @@ 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: CustomColumnsState<T, F>;
+  state: CustomColumnsPanelStateBase<T, F>;
 }
 
 export function _CustomColumnsPanel<T, F extends FiltersMap>({
@@ -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/CustomColumnsPanel/CustomColumnsSearch.tsx

@@ -1,12 +1,12 @@
 import { Search } from '@wix/design-system';
 import React, { useEffect, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
-import { CustomColumnsState } from '../../state';
+import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface CustomColumnsSearchProps<T, F extends FiltersMap> {
-  state: CustomColumnsState<T, F>;
+  state: CustomColumnsPanelStateBase<T, F>;
 }
 
 export function _CustomColumnsSearch<T, F extends FiltersMap>({

package/src/components/CustomColumnsPanel/index.ts

@@ -1 +1,2 @@
 export * from './CustomColumnsPanel';
+export * from './CustomColumnsEntityPageCTA';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle1122695105";
+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":"DragHandle1122695105__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_ = "EditableCell1039927707";
+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":"EditableCell1039927707__root","validationIndicator":"EditableCell1039927707__validationIndicator"};
+export var classes = {"root":"EditableCell1155625107__root","validationIndicator":"EditableCell1155625107__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableColumnHeader.uni.driver.ts

@@ -22,6 +22,9 @@ export function EditableColumnHeaderUniDriver(
     /** Whether the "..." more button exists */
     hasMoreButton: () => moreButton.exists(),
 
+    /** Hover the column header (reveals the "..." button in designs that hide it) */
+    hover: () => base.hover(),
+
     /** Click the "..." button to open the popover menu */
     clickMoreButton: () => moreButton.click(),
 

package/src/components/EditableTable/EditableTable.tsx

@@ -122,6 +122,16 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
           {...state.deleteConfirmModal.value}
         />
       )}
+      {state.fieldActions.confirmModal.value && (
+        <MessageActionModal
+          state={state.fieldActions.confirmModal}
+          {...state.fieldActions.confirmModal.value}
+          primaryButtonProps={{
+            ...state.fieldActions.confirmModal.value.primaryButtonProps,
+            disabled: state.fieldActions.deleteTask.status.isLoading,
+          }}
+        />
+      )}
       {children}
     </PatternsFieldsProvider>
   );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover2773619774";
+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":"HeaderActionsPopover2773619774__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_ = "CellViewLayout2305060038";
+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":"CellViewLayout2305060038__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_ = "Edit875164342";
+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":"Edit875164342__root","booleanEdit":"Edit875164342__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_ = "View7478075";
+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":"View7478075__root","booleanView":"View7478075__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_ = "Edit2227822418";
+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":"Edit2227822418__root","dateInput":"Edit2227822418__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_ = "View693026679";
+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":"View693026679__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_ = "Edit2319645489";
+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":"Edit2319645489__root","emailInput":"Edit2319645489__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_ = "View590975411";
+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":"View590975411__root"};
+export var classes = {"root":"View1826941395__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -8,6 +8,9 @@ import { emailCellType } from './email';
 import { objectCellType } from './object';
 import { imageCellType } from './image';
 import { richContentCellType } from './richContent';
+import { videoCellType } from './video';
+import { richTextCellType } from './richText';
+import { mediaGalleryCellType } from './mediaGallery';
 
 export {
   textCellType,
@@ -19,6 +22,9 @@ export {
   objectCellType,
   imageCellType,
   richContentCellType,
+  videoCellType,
+  richTextCellType,
+  mediaGalleryCellType,
 };
 
 /** All built-in cell types */
@@ -32,4 +38,7 @@ export const builtInCellTypes: CellType[] = [
   objectCellType,
   imageCellType,
   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;
+    },
+  };
+}