@wix/patterns 1.467.0 → 1.468.0

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Loader } from '@wix/design-system';
 import type { Address } from '@wix/patterns-fields';
+import { hardConvert, isValid } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import { defineCellType } from '../../types';
 import { AddressCellView } from './View';
@@ -19,7 +20,7 @@ if (
 
 const LazyAddressEdit = React.lazy(addressEditFactory);
 
-const AddressEdit = (props: CellEditProps<Address | undefined>) => (
+const AddressEdit = (props: CellEditProps<Address | null | undefined>) => (
   <React.Suspense fallback={<Loader size="tiny" />}>
     <LazyAddressEdit {...props} />
   </React.Suspense>
@@ -28,7 +29,7 @@ const AddressEdit = (props: CellEditProps<Address | undefined>) => (
 export { AddressCellView };
 export type { AddressCellTypeConfig } from './Edit';
 
-export const addressCellType = defineCellType<Address | undefined>({
+export const addressCellType = defineCellType<Address | null | undefined>({
   type: 'address',
   ViewComponent: AddressCellView,
   EditComponent: AddressEdit,
@@ -37,28 +38,20 @@ export const addressCellType = defineCellType<Address | undefined>({
     if (!raw) {
       return undefined;
     }
-    try {
-      const parsed = JSON.parse(raw);
-      if (parsed && typeof parsed.formatted === 'string') {
-        return parsed as Address;
-      }
-    } catch {}
-    return undefined;
+    return hardConvert(raw);
   },
   validate: (value, _rules, translate) => {
-    if (!value) {
+    if (value == null) {
       return null;
     }
-    if (
-      typeof value === 'object' &&
-      typeof value.formatted === 'string' &&
-      value.formatted.length > 0
-    ) {
+    if (isValid(value) && value.formatted.trim().length > 0) {
       return null;
     }
     return translate!('cairo.editableTable.address.validation.invalid');
   },
   editable: true,
+  // null is an explicit clear; undefined means the editor was left unchanged.
+  normalizeOnCommit: (value) => value ?? undefined,
   // Type-to-edit clears the cell so the user starts a fresh search query.
   onTypeToEdit: () => ({ value: undefined }),
 });

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1868111484";
+var _namespace_ = "Edit2022385014";
 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":"Edit1868111484__root","jsonInput":"Edit1868111484__jsonInput"};
+export var classes = {"root":"Edit2022385014__root","jsonInput":"Edit2022385014__jsonInput"};
 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_ = "Edit2451847814";
+var _namespace_ = "Edit1566232662";
 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":"Edit2451847814__root","booleanEdit":"Edit2451847814__booleanEdit"};
+export var classes = {"root":"Edit1566232662__root","booleanEdit":"Edit1566232662__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_ = "View172351983";
+var _namespace_ = "View2144628230";
 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":"View172351983__root","booleanView":"View172351983__booleanView"};
+export var classes = {"root":"View2144628230__root","booleanView":"View2144628230__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2883543175";
+var _namespace_ = "Edit3934856254";
 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":"Edit2883543175__root"};
+export var classes = {"root":"Edit3934856254__root"};
 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_ = "Edit2163940710";
+var _namespace_ = "Edit2622028289";
 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":"Edit2163940710__root","dateInput":"Edit2163940710__dateInput"};
+export var classes = {"root":"Edit2622028289__root","dateInput":"Edit2622028289__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_ = "View878030947";
+var _namespace_ = "View533307022";
 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":"View878030947__root"};
+export var classes = {"root":"View533307022__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2976794873";
+var _namespace_ = "Edit2962708343";
 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":"Edit2976794873__root","half":"Edit2976794873__half","dateHalf":"Edit2976794873__dateHalf Edit2976794873__half","timeHalf":"Edit2976794873__timeHalf Edit2976794873__half","divider":"Edit2976794873__divider","passiveText":"Edit2976794873__passiveText","placeholderText":"Edit2976794873__placeholderText Edit2976794873__passiveText"};
+export var classes = {"root":"Edit2962708343__root","half":"Edit2962708343__half","dateHalf":"Edit2962708343__dateHalf Edit2962708343__half","timeHalf":"Edit2962708343__timeHalf Edit2962708343__half","divider":"Edit2962708343__divider","passiveText":"Edit2962708343__passiveText","placeholderText":"Edit2962708343__placeholderText Edit2962708343__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3538288938";
+var _namespace_ = "View2330499855";
 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":"View3538288938__root","leaf":"View3538288938__leaf","datePart":"View3538288938__datePart View3538288938__leaf","timePart":"View3538288938__timePart View3538288938__leaf","placeholder":"View3538288938__placeholder View3538288938__leaf","divider":"View3538288938__divider"};
+export var classes = {"root":"View2330499855__root","leaf":"View2330499855__leaf","datePart":"View2330499855__datePart View2330499855__leaf","timePart":"View2330499855__timePart View2330499855__leaf","placeholder":"View2330499855__placeholder View2330499855__leaf","divider":"View2330499855__divider"};
 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_ = "Edit126112320";
+var _namespace_ = "Edit3828404961";
 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":"Edit126112320__root","emailInput":"Edit126112320__emailInput"};
+export var classes = {"root":"Edit3828404961__root","emailInput":"Edit3828404961__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_ = "View4220665955";
+var _namespace_ = "View4268288579";
 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":"View4220665955__root"};
+export var classes = {"root":"View4268288579__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3927719138";
+var _namespace_ = "Edit222370521";
 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":"Edit3927719138__root","numberInput":"Edit3927719138__numberInput"};
+export var classes = {"root":"Edit222370521__root","numberInput":"Edit222370521__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1078377146";
+var _namespace_ = "View222058160";
 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":"View1078377146__root","textView":"View1078377146__textView"};
+export var classes = {"root":"View222058160__root","textView":"View222058160__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1069131793";
+var _namespace_ = "Edit1325328982";
 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":"Edit1069131793__root","jsonInput":"Edit1069131793__jsonInput"};
+export var classes = {"root":"Edit1325328982__root","jsonInput":"Edit1325328982__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3797056368";
+var _namespace_ = "View637384864";
 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":"View3797056368__root"};
+export var classes = {"root":"View637384864__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit856266009";
+var _namespace_ = "Edit1598171467";
 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":"Edit856266009__root","selectInput":"Edit856266009__selectInput"};
+export var classes = {"root":"Edit1598171467__root","selectInput":"Edit1598171467__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit489911831";
+var _namespace_ = "Edit243497837";
 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":"Edit489911831__root","editWrapper":"Edit489911831__editWrapper","inputArea":"Edit489911831__inputArea"};
+export var classes = {"root":"Edit243497837__root","editWrapper":"Edit243497837__editWrapper","inputArea":"Edit243497837__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3718540584";
+var _namespace_ = "View784909402";
 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":"View3718540584__root"};
+export var classes = {"root":"View784909402__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3891600389";
+var _namespace_ = "Edit3875448302";
 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":"Edit3891600389__root","wrapper":"Edit3891600389__wrapper","overlay":"Edit3891600389__overlay"};
+export var classes = {"root":"Edit3875448302__root","wrapper":"Edit3875448302__wrapper","overlay":"Edit3875448302__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3521130641";
+var _namespace_ = "Edit2808291241";
 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":"Edit3521130641__root","urlInput":"Edit3521130641__urlInput"};
+export var classes = {"root":"Edit2808291241__root","urlInput":"Edit2808291241__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1265987009";
+var _namespace_ = "View1242253653";
 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":"View1265987009__root","textView":"View1265987009__textView","urlText":"View1265987009__urlText","suffix":"View1265987009__suffix"};
+export var classes = {"root":"View1242253653__root","textView":"View1242253653__textView","urlText":"View1242253653__urlText","suffix":"View1242253653__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/useClearFocusOnBlur.ts

@@ -20,10 +20,21 @@ export function useClearFocusOnBlur<T, F extends FiltersMap>(
     return () => cancelAnimationFrame(blurFrameId.current);
   }, []);
 
-  const onFocus = useCallback(() => {
+  const onCellFocus = useCallback(() => {
+    // Focus from a cell's portaled controls also bubbles through that cell.
     cancelAnimationFrame(blurFrameId.current);
   }, []);
 
+  const onFocus = useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      // Portaled panels also bubble focus events through the table's React tree.
+      if (e.currentTarget.contains(e.target)) {
+        onCellFocus();
+      }
+    },
+    [onCellFocus],
+  );
+
   const onBlur = useCallback(
     (e: React.FocusEvent<HTMLDivElement>) => {
       cancelAnimationFrame(blurFrameId.current);
@@ -42,5 +53,5 @@ export function useClearFocusOnBlur<T, F extends FiltersMap>(
     [cellInteraction],
   );
 
-  return { onFocus, onBlur };
+  return { onFocus, onBlur, onCellFocus };
 }

package/src/components/EmptyState/EmptyStateBase.st.css.ts

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

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

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

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

package/src/components/FieldCell/FieldCell.tsx

@@ -43,6 +43,11 @@ export interface FieldCellProps {
   type: PatternsFieldType;
   /** Stable id for cells that render WDS Tags (document, multi-document). */
   fieldId?: string;
+  /** Stable id of the column, forwarded to a custom type's cell. Optional
+   *  because a cell can be rendered outside a column; table columns supply it. */
+  columnId?: string;
+  /** The row being rendered, forwarded to a custom type's cell. */
+  row?: unknown;
   /** The custom type definition a CUSTOM field resolves on its source.
    *  Without a `table` slot the cell renders the plain-text default. */
   definition?: FieldTypeDefinition;
@@ -52,7 +57,13 @@ function _FieldCell(props: FieldCellProps) {
   const { dateFormatters } = useWixPatternsContainer();
   if (props.type === 'CUSTOM' && props.definition?.table) {
     const { CellComponent } = props.definition.table;
-    return <CellComponent value={props.value} />;
+    return (
+      <CellComponent
+        value={props.value}
+        columnId={props.columnId ?? ''}
+        row={props.row}
+      />
+    );
   }
   switch (props.type) {
     case 'LONG_TEXT':

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload1140211561";
+var _namespace_ = "ImportStepUpload1816577347";
 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":"ImportStepUpload1140211561__root","fileUpload":"ImportStepUpload1140211561__fileUpload"};
+export var classes = {"root":"ImportStepUpload1816577347__root","fileUpload":"ImportStepUpload1816577347__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2706411648";
+var _namespace_ = "LoadingRow2194277522";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow2706411648__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2706411648__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2194277522__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2194277522__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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