@wix/patterns 1.410.0 → 1.412.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage2250814823";
+var _namespace_ = "CollectionPage3750721752";
 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":"CollectionPage2250814823__root"};
+export var classes = {"root":"CollectionPage3750721752__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_ = "CollectionSectionHeader2757361053";
+var _namespace_ = "CollectionSectionHeader1240770117";
 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":"CollectionSectionHeader2757361053__root","summaryIcon":"CollectionSectionHeader2757361053__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader1240770117__root","summaryIcon":"CollectionSectionHeader1240770117__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_ = "CollectionTable3467497077";
+var _namespace_ = "CollectionTable2901729422";
 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":"CollectionTable3467497077__root"};
+export var classes = {"root":"CollectionTable2901729422__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_ = "CollectionTableWSRTable633773035";
+var _namespace_ = "CollectionTableWSRTable1598379072";
 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":"CollectionTableWSRTable633773035__root"};
+export var classes = {"root":"CollectionTableWSRTable1598379072__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_ = "CollectionToolbar1280477767";
+var _namespace_ = "CollectionToolbar3020665292";
 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":"CollectionToolbar1280477767__root","left":"CollectionToolbar1280477767__left","right":"CollectionToolbar1280477767__right","fullWidth":"CollectionToolbar1280477767__fullWidth"};
+export var classes = {"root":"CollectionToolbar3020665292__root","left":"CollectionToolbar3020665292__left","right":"CollectionToolbar3020665292__right","fullWidth":"CollectionToolbar3020665292__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_ = "SearchOrCustomFilter4085421925";
+var _namespace_ = "SearchOrCustomFilter3625383810";
 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":"SearchOrCustomFilter4085421925__root","search":"SearchOrCustomFilter4085421925__search","searchMobile":"SearchOrCustomFilter4085421925__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3625383810__root","search":"SearchOrCustomFilter3625383810__search","searchMobile":"SearchOrCustomFilter3625383810__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_ = "AutoCompleteReadonly3620815071";
+var _namespace_ = "AutoCompleteReadonly1864659102";
 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":"AutoCompleteReadonly3620815071__root"};
+export var classes = {"root":"AutoCompleteReadonly1864659102__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_ = "ViewsDropdown64974911";
+var _namespace_ = "ViewsDropdown3842440393";
 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":"ViewsDropdown64974911__root"};
+export var classes = {"root":"ViewsDropdown3842440393__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle3977405813";
+var _namespace_ = "DragHandle2685298235";
 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":"DragHandle3977405813__root"};
+export var classes = {"root":"DragHandle2685298235__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -11,6 +11,7 @@
 
 .root {
   -st-states: editing, focused, selected, invalid, typeToEdit, showEditWhenFocused,
+    growable,
     selectionTop, selectionBottom, selectionLeft, selectionRight,
     copiedTop, copiedBottom, copiedLeft, copiedRight;
   display: flex;
@@ -54,6 +55,18 @@
   min-height: 100%;
 }
 
+/* :growable showEditWhenFocused cells (e.g. multi-document) can wrap content
+   past row height. Release the bottom anchor and lay an opaque D80 base under
+   the :selected blue tint so the overflow area doesn't reveal adjacent rows.
+   z-index lifts the overflow above neighboring cells. */
+.root:focused:growable {
+  background-color: var(--wsr-color-D80);
+  background-image: linear-gradient(rgba(56, 153, 236, 0.08), rgba(56, 153, 236, 0.08));
+  bottom: auto;
+  min-height: 100%;
+  z-index: 3;
+}
+
 /* showEditWhenFocused cells: when a button inside has focus (inner focus),
    show the editing ring and allow button focus rings to render unclipped.
    isEditing is false here, so we use data-inner-focused set by the EditComponent. */

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell2720687217";
+var _namespace_ = "EditableCell922918816";
 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":"EditableCell2720687217__root","validationIndicator":"EditableCell2720687217__validationIndicator"};
+export var classes = {"root":"EditableCell922918816__root","validationIndicator":"EditableCell922918816__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -105,6 +105,38 @@ function _EditableCell<T, F extends FiltersMap>({
         (!!resolved.toggleValue || !!resolved.showEditWhenFocused))) &&
     EditComponent;
 
+  const cellContent = showEdit ? (
+    <EditComponent
+      value={
+        cellInteraction.editingValue !== undefined
+          ? cellInteraction.editingValue
+          : value
+      }
+      onChange={handleChange}
+      onCommit={handleCommit}
+      onCancel={handleCancel}
+      onStartEdit={handleStartEdit}
+      inputRef={editInputRef}
+      typeConfig={column.typeConfig}
+      editTrigger={cellInteraction.editTrigger}
+      validation={column.validation}
+      columnId={columnId}
+      rowKey={rowKey}
+    />
+  ) : (
+    <ViewComponent
+      value={value}
+      typeConfig={column.typeConfig}
+      validation={column.validation}
+      columnId={columnId}
+      rowKey={rowKey}
+    />
+  );
+
+  // The cell type's EditWrapper (if any) stays mounted across the edit↔view
+  // swap, so it can own behavior that must outlive the inline editor.
+  const EditWrapper = resolved.EditWrapper;
+
   return (
     <div
       ref={cellRef}
@@ -115,6 +147,7 @@ function _EditableCell<T, F extends FiltersMap>({
         invalid: !cellValidation.valid,
         typeToEdit: !!resolved.onTypeToEdit,
         showEditWhenFocused: !!resolved.showEditWhenFocused,
+        growable: !!resolved.growable,
         selectionTop: selectionBorder.top,
         selectionBottom: selectionBorder.bottom,
         selectionLeft: selectionBorder.left,
@@ -143,32 +176,16 @@ function _EditableCell<T, F extends FiltersMap>({
           </span>
         </Tooltip>
       )}
-      {showEdit ? (
-        <EditComponent
-          value={
-            cellInteraction.editingValue !== undefined
-              ? cellInteraction.editingValue
-              : value
-          }
-          onChange={handleChange}
-          onCommit={handleCommit}
-          onCancel={handleCancel}
-          onStartEdit={handleStartEdit}
-          inputRef={editInputRef}
+      {EditWrapper ? (
+        <EditWrapper
           typeConfig={column.typeConfig}
-          editTrigger={cellInteraction.editTrigger}
-          validation={column.validation}
           columnId={columnId}
           rowKey={rowKey}
-        />
+        >
+          {cellContent}
+        </EditWrapper>
       ) : (
-        <ViewComponent
-          value={value}
-          typeConfig={column.typeConfig}
-          validation={column.validation}
-          columnId={columnId}
-          rowKey={rowKey}
-        />
+        cellContent
       )}
     </div>
   );

package/src/components/EditableTable/EditableTable.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
+import { GlobalAudioPlayer } from '@wix/patterns-fields';
 import { PatternsFieldsProvider } from '../../providers/PatternsFieldsProvider';
 import type { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
 import { TableVirtual, type TableVirtualProps } from '../Table/TableVirtual';
@@ -141,6 +142,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
         />
       )}
       {children}
+      <GlobalAudioPlayer />
     </PatternsFieldsProvider>
   );
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover2846776016";
+var _namespace_ = "HeaderActionsPopover3201155258";
 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":"HeaderActionsPopover2846776016__root"};
+export var classes = {"root":"HeaderActionsPopover3201155258__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_ = "CellViewLayout230464168";
+var _namespace_ = "CellViewLayout3119904669";
 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":"CellViewLayout230464168__root"};
+export var classes = {"root":"CellViewLayout3119904669__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3256358223";
+var _namespace_ = "Edit2312380854";
 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":"Edit3256358223__root","addressInput":"Edit3256358223__addressInput"};
+export var classes = {"root":"Edit2312380854__root","addressInput":"Edit2312380854__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CellAudioEdit } from '@wix/patterns-fields';
+import type { CellEditProps } from '../../types';
+
+export const AudioEdit: React.FC<CellEditProps<string | null>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+}) => (
+  <CellAudioEdit
+    value={value}
+    onChange={onChange}
+    onCommit={onCommit}
+    onCancel={onCancel}
+    onStartEdit={onStartEdit}
+    inputRef={inputRef}
+    dataHook="audio-edit"
+  />
+);

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

@@ -0,0 +1,14 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function AudioEditUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasAddButton: () => base.$('[data-hook="audio-edit-add-button"]').exists(),
+    hasTag: () => base.$('[data-hook="audio-edit-tag"]').exists(),
+    hasMoreButton: () =>
+      base.$('[data-hook="audio-edit-more-button"]').exists(),
+    isLoading: () =>
+      base.$('[data-hook="audio-edit"] [data-hook="loader"]').exists(),
+  };
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CellAudioView } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+
+export const AudioView: React.FC<CellViewProps<string | null>> = ({
+  value,
+}) => <CellAudioView value={value} dataHook="audio-view" />;

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

@@ -0,0 +1,13 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function AudioViewUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasTag: () => base.$('[data-hook="audio-cell-tag"]').exists(),
+    getTitle: async () => {
+      const tag = base.$('[data-hook="audio-cell-tag"]');
+      return tag.text();
+    },
+  };
+}

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

@@ -0,0 +1,18 @@
+import { defineCellType } from '../../types';
+import { AudioView } from './View';
+import { AudioEdit } from './Edit';
+
+export { AudioView, AudioEdit };
+
+export const audioCellType = defineCellType<string | null>({
+  type: 'audio',
+  ViewComponent: AudioView,
+  EditComponent: AudioEdit,
+  serialize: (value) => value ?? '',
+  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/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3508436336";
+var _namespace_ = "Edit842401365";
 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":"Edit3508436336__root","booleanEdit":"Edit3508436336__booleanEdit"};
+export var classes = {"root":"Edit842401365__root","booleanEdit":"Edit842401365__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_ = "View1145362891";
+var _namespace_ = "View3852818403";
 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":"View1145362891__root","booleanView":"View1145362891__booleanView"};
+export var classes = {"root":"View3852818403__root","booleanView":"View3852818403__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_ = "Edit1822861217";
+var _namespace_ = "Edit1070022648";
 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":"Edit1822861217__root","dateInput":"Edit1822861217__dateInput"};
+export var classes = {"root":"Edit1070022648__root","dateInput":"Edit1070022648__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_ = "View1753786474";
+var _namespace_ = "View2858652468";
 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":"View1753786474__root"};
+export var classes = {"root":"View2858652468__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_ = "Edit1254742983";
+var _namespace_ = "Edit1093456220";
 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":"Edit1254742983__root","emailInput":"Edit1254742983__emailInput"};
+export var classes = {"root":"Edit1093456220__root","emailInput":"Edit1093456220__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_ = "View3614037185";
+var _namespace_ = "View2158237961";
 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":"View3614037185__root"};
+export var classes = {"root":"View2158237961__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -9,8 +9,10 @@ import { emailCellType } from './email';
 import { objectCellType } from './object';
 import { imageCellType } from './image';
 import { documentCellType } from './document';
+import { multiDocumentCellType } from './multiDocument';
 import { richContentCellType } from './richContent';
 import { videoCellType } from './video';
+import { audioCellType } from './audio';
 import { richTextCellType } from './richText';
 import { mediaGalleryCellType } from './mediaGallery';
 import { referenceCellType } from './reference';
@@ -27,8 +29,10 @@ export {
   objectCellType,
   imageCellType,
   documentCellType,
+  multiDocumentCellType,
   richContentCellType,
   videoCellType,
+  audioCellType,
   richTextCellType,
   mediaGalleryCellType,
   referenceCellType,
@@ -47,8 +51,10 @@ export const builtInCellTypes: CellType[] = [
   objectCellType,
   imageCellType,
   documentCellType,
+  multiDocumentCellType,
   richContentCellType,
   videoCellType,
+  audioCellType,
   richTextCellType,
   mediaGalleryCellType,
   referenceCellType,

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CellMultiDocumentEdit } from '@wix/patterns-fields';
+import type { CellEditProps } from '../../types';
+
+export const MultiDocumentEdit: React.FC<CellEditProps<string[] | null>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  columnId,
+  rowKey,
+}) => (
+  <CellMultiDocumentEdit
+    value={value}
+    onChange={onChange}
+    onCommit={onCommit}
+    onCancel={onCancel}
+    onStartEdit={onStartEdit}
+    inputRef={inputRef}
+    dataHook="multi-document-edit"
+    fieldId={`multi-document-edit-${columnId}-${rowKey}`}
+  />
+);

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

@@ -0,0 +1,16 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function MultiDocumentEditUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasAddButton: () =>
+      base.$('[data-hook="multi-document-edit-add-button"]').exists(),
+    hasPasteUrlButton: () =>
+      base.$('[data-hook="multi-document-edit-paste-url-button"]').exists(),
+    getTagsCount: () =>
+      base.$$('[data-hook="multi-document-edit-tag"]').count(),
+    isLoading: () =>
+      base.$('[data-hook="multi-document-edit"] [data-hook="loader"]').exists(),
+  };
+}