@wix/patterns 1.411.0 → 1.413.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader3643484148";
+var _namespace_ = "CollectionSectionHeader3183592036";
 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":"CollectionSectionHeader3643484148__root","summaryIcon":"CollectionSectionHeader3643484148__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader3183592036__root","summaryIcon":"CollectionSectionHeader3183592036__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_ = "CollectionTable1230620941";
+var _namespace_ = "CollectionTable26941754";
 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":"CollectionTable1230620941__root"};
+export var classes = {"root":"CollectionTable26941754__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_ = "CollectionTableWSRTable4147669788";
+var _namespace_ = "CollectionTableWSRTable3762678215";
 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":"CollectionTableWSRTable4147669788__root"};
+export var classes = {"root":"CollectionTableWSRTable3762678215__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_ = "CollectionToolbar2951318927";
+var _namespace_ = "CollectionToolbar3829799909";
 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":"CollectionToolbar2951318927__root","left":"CollectionToolbar2951318927__left","right":"CollectionToolbar2951318927__right","fullWidth":"CollectionToolbar2951318927__fullWidth"};
+export var classes = {"root":"CollectionToolbar3829799909__root","left":"CollectionToolbar3829799909__left","right":"CollectionToolbar3829799909__right","fullWidth":"CollectionToolbar3829799909__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_ = "SearchOrCustomFilter466050147";
+var _namespace_ = "SearchOrCustomFilter4293294066";
 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":"SearchOrCustomFilter466050147__root","search":"SearchOrCustomFilter466050147__search","searchMobile":"SearchOrCustomFilter466050147__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter4293294066__root","search":"SearchOrCustomFilter4293294066__search","searchMobile":"SearchOrCustomFilter4293294066__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_ = "AutoCompleteReadonly4082699328";
+var _namespace_ = "AutoCompleteReadonly1228348019";
 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":"AutoCompleteReadonly4082699328__root"};
+export var classes = {"root":"AutoCompleteReadonly1228348019__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_ = "ViewsDropdown4235148408";
+var _namespace_ = "ViewsDropdown152397658";
 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":"ViewsDropdown4235148408__root"};
+export var classes = {"root":"ViewsDropdown152397658__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_ = "DragHandle1579209859";
+var _namespace_ = "DragHandle1085988847";
 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":"DragHandle1579209859__root"};
+export var classes = {"root":"DragHandle1085988847__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_ = "EditableCell1458997303";
+var _namespace_ = "EditableCell1780177284";
 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":"EditableCell1458997303__root","validationIndicator":"EditableCell1458997303__validationIndicator"};
+export var classes = {"root":"EditableCell1780177284__root","validationIndicator":"EditableCell1780177284__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -147,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,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover773944543";
+var _namespace_ = "HeaderActionsPopover3170806295";
 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":"HeaderActionsPopover773944543__root"};
+export var classes = {"root":"HeaderActionsPopover3170806295__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_ = "CellViewLayout922565407";
+var _namespace_ = "CellViewLayout1861512399";
 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":"CellViewLayout922565407__root"};
+export var classes = {"root":"CellViewLayout1861512399__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_ = "Edit1757679255";
+var _namespace_ = "Edit807937573";
 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":"Edit1757679255__root","addressInput":"Edit1757679255__addressInput"};
+export var classes = {"root":"Edit807937573__root","addressInput":"Edit807937573__addressInput"};
 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_ = "Edit2038218046";
+var _namespace_ = "Edit1079541041";
 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":"Edit2038218046__root","booleanEdit":"Edit2038218046__booleanEdit"};
+export var classes = {"root":"Edit1079541041__root","booleanEdit":"Edit1079541041__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_ = "View1352503750";
+var _namespace_ = "View2199264589";
 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":"View1352503750__root","booleanView":"View1352503750__booleanView"};
+export var classes = {"root":"View2199264589__root","booleanView":"View2199264589__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/color/Edit.st.css

@@ -0,0 +1,6 @@
+.root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "Edit939185741";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"Edit939185741__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

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

@@ -0,0 +1,83 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { CellColorInput } from '@wix/patterns-fields';
+import type { InputImperativeActions } from '@wix/design-system';
+import type { CellEditProps } from '../../types';
+import { classes } from './Edit.st.css.js';
+
+type ColorInputRef = React.MutableRefObject<
+  InputImperativeActions | null | undefined
+>;
+
+/**
+ * ColorEdit bridges @wix/patterns-fields CellColorInput with the EditableTable
+ * cell framework.
+ *
+ * The ColorPicker popover steals focus when opened — a naive blur→commit
+ * handler would close the cell while the picker is still open. We RAF after
+ * blur and skip commit when the post-blur active element is inside the WDS
+ * ColorPicker ([role="group"][aria-label="Color picker"]) or the CellColorInput's
+ * own popover (kept inside wrapperRef).
+ */
+export const ColorEdit: React.FC<CellEditProps<string | undefined>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+}) => {
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const colorInputRef = inputRef as ColorInputRef;
+
+  useEffect(() => {
+    colorInputRef?.current?.focus();
+    colorInputRef?.current?.select();
+  }, [colorInputRef]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onCommit();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCommit, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    requestAnimationFrame(() => {
+      const active = document.activeElement as HTMLElement | null;
+      if (
+        active &&
+        active.closest('[role="group"][aria-label="Color picker"]')
+      ) {
+        return;
+      }
+      if (active && wrapperRef.current?.contains(active)) {
+        return;
+      }
+      onCommit();
+    });
+  }, [onCommit]);
+
+  return (
+    <div
+      ref={wrapperRef}
+      onKeyDown={handleKeyDown}
+      onBlur={handleBlur}
+      onClick={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+      className={classes.root}
+    >
+      <CellColorInput
+        inputRef={colorInputRef}
+        value={value ?? ''}
+        onChange={onChange}
+        size="small"
+        border="none"
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,23 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { InputUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { InputUniDriver as InputUniDriverFactory } from '@wix/design-system/dist/types/Input/Input.uni.driver';
+import { UniDriverFactory } from '../../../uniDriverFactory';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ColorEditUniDriver(base: UniDriver, body: UniDriver) {
+  const input = (InputUniDriver as UniDriverFactory<InputUniDriverFactory>)(
+    base,
+    body,
+  );
+
+  return {
+    ...baseUniDriverFactory(base),
+    getValue: () => input.getValue(),
+    typeValue: (value: string) => input.enterText(value),
+    keyDown: (
+      key: string,
+      opts?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean },
+    ) => input.keyDown({ key, ...opts }),
+    blur: () => input.blur(),
+  };
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CellColorView } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+import { CellViewLayout } from '../CellViewLayout';
+
+export const ColorView: React.FC<CellViewProps<string | undefined>> = ({
+  value,
+}) => (
+  <CellViewLayout>
+    <CellColorView value={value} />
+  </CellViewLayout>
+);

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

@@ -0,0 +1,16 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ColorViewUniDriver(base: UniDriver) {
+  const text = base.$('[data-hook="cell-color-view-text"]');
+  const fillPreview = base.$('[data-hook="cell-color-view-fill-preview"]');
+
+  return {
+    ...baseUniDriverFactory(base),
+    getHex: () => text.text(),
+    hasText: () => text.exists(),
+    hasFillPreview: () => fillPreview.exists(),
+    /** Whether the FillPreview is filled (has a `fill` attribute style). */
+    getFillStyle: () => fillPreview.attr('style') as Promise<string | null>,
+  };
+}

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

@@ -0,0 +1,48 @@
+import React, { Suspense, lazy } from 'react';
+import { HEX_RE, normalizeHex } from '@wix/patterns-fields';
+import { defineCellType } from '../../types';
+import type { CellEditProps } from '../../types';
+import { ColorView } from './View';
+
+export { ColorView };
+
+// Lazy-load the editor — it pulls in WSR's ColorPicker (≈10kb gzipped) which
+// is only needed when the user actually edits a color cell. Splitting here
+// (rather than inside CellColorInput) keeps the EditableTable main bundle
+// free of ColorPicker and its transitive `color` lib + converter modules.
+const LazyColorEdit = lazy(() =>
+  import(/* webpackChunkName: "editable-table-color-edit" */ './Edit').then(
+    (m) => ({ default: m.ColorEdit }),
+  ),
+);
+
+const ColorEdit: React.FC<CellEditProps<string | undefined>> = (props) => (
+  <Suspense fallback={null}>
+    <LazyColorEdit {...props} />
+  </Suspense>
+);
+
+export const colorCellType = defineCellType<string | undefined>({
+  type: 'color',
+  ViewComponent: ColorView,
+  EditComponent: ColorEdit,
+  serialize: (value) => value ?? '',
+  deserialize: (raw) => (raw ? raw : undefined),
+  validate: (value) => {
+    if (!value) {
+      return null;
+    }
+    return HEX_RE.test(value)
+      ? null
+      : 'Invalid color (expected #RGB or #RRGGBB)';
+  },
+  editable: true,
+  clearable: true,
+  // Unify empty representations (deserialize('') and clearable both produce
+  // undefined) and accept hex pastes without the leading `#`.
+  normalizeOnCommit: (value) =>
+    value ? normalizeHex(value) ?? value : undefined,
+  // Type-to-edit: clear the cell so the user types a fresh hex; CellColorInput's
+  // controlled input then picks up subsequent keystrokes naturally.
+  onTypeToEdit: () => ({ value: undefined }),
+});

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3480508175";
+var _namespace_ = "Edit3159283181";
 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":"Edit3480508175__root","dateInput":"Edit3480508175__dateInput"};
+export var classes = {"root":"Edit3159283181__root","dateInput":"Edit3159283181__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_ = "View1546673352";
+var _namespace_ = "View4127422310";
 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":"View1546673352__root"};
+export var classes = {"root":"View4127422310__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_ = "Edit1040309561";
+var _namespace_ = "Edit2995109127";
 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":"Edit1040309561__root","emailInput":"Edit1040309561__emailInput"};
+export var classes = {"root":"Edit2995109127__root","emailInput":"Edit2995109127__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_ = "View1335805215";
+var _namespace_ = "View1765699111";
 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":"View1335805215__root"};
+export var classes = {"root":"View1765699111__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -6,9 +6,11 @@ import { dateCellType } from './date';
 import { timeCellType } from './time';
 import { urlCellType } from './url';
 import { emailCellType } from './email';
+import { colorCellType } from './color';
 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';
@@ -25,9 +27,11 @@ export {
   timeCellType,
   urlCellType,
   emailCellType,
+  colorCellType,
   objectCellType,
   imageCellType,
   documentCellType,
+  multiDocumentCellType,
   richContentCellType,
   videoCellType,
   audioCellType,
@@ -46,9 +50,11 @@ export const builtInCellTypes: CellType[] = [
   timeCellType,
   urlCellType,
   emailCellType,
+  colorCellType,
   objectCellType,
   imageCellType,
   documentCellType,
+  multiDocumentCellType,
   richContentCellType,
   videoCellType,
   audioCellType,

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}`}
+  />
+);