@wix/patterns 1.499.0 → 1.500.0

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -50,6 +50,16 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
     : null;
 
   const checkboxDisabled = !column.hideable;
+  const toggleColumnVisibility = () => {
+    if (checkboxDisabled) {
+      return;
+    }
+    state.onColumnCheckboxToggle(column);
+    state.customizeColumnsInSidePanelBi({
+      actionName: 'visibility',
+      key: column.id,
+    });
+  };
   const hasSearchValue = state.searchValue.trim().length > 0;
   const dragDisabled = column.reorderDisabled || hasSearchValue;
   const checked = select.isChecked(column.id);
@@ -115,13 +125,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
           appendTo: 'window',
           disabled: !checkboxDisabled,
         }}
-        onCheckboxChange={() => {
-          if (checkboxDisabled) {
-            return;
-          }
-          state.onColumnCheckboxToggle(column);
-          state.customizeColumnsInSidePanelBi({ actionName: 'visibility' });
-        }}
+        onCheckboxChange={() => toggleColumnVisibility()}
         {...(hasSearchValue
           ? {}
           : {
@@ -159,12 +163,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     overflow: 'hidden',
                     minWidth: 0,
                   }}
-                  onClick={() => {
-                    if (checkboxDisabled) {
-                      return;
-                    }
-                    state.onColumnCheckboxToggle(column);
-                  }}
+                  onClick={toggleColumnVisibility}
                 >
                   {prefixIcon && (
                     <Box

package/src/components/CustomFieldModal/CustomFieldCollectionInput.tsx

@@ -7,9 +7,14 @@ import {
   Divider,
   ListItemAction,
   FormField,
+  listItemSectionBuilder,
   listItemSelectBuilder,
 } from '@wix/design-system';
 import { CustomFieldModalState } from '@wix/bex-core';
+import type {
+  FieldModalCollectionEntry,
+  FieldModalCollectionOption,
+} from '@wix/bex-core';
 
 export interface CustomFieldCollectionInputProps {
   state: CustomFieldModalState;
@@ -46,14 +51,52 @@ export const _CustomFieldCollectionInput = ({
     return null;
   }
 
-  const options = query
-    ? state.collectionOptions.filter((option) =>
-        option.label.toLowerCase().includes(query),
-      )
-    : state.collectionOptions;
   const selectedOption = state.collectionOptions.find(
     (option) => option.id === referencedCollectionId.value,
   );
+  const toOption = (option: FieldModalCollectionOption) =>
+    listItemSelectBuilder({
+      dataHook: `custom-field-modal-reference-collection-${option.id}`,
+      id: option.id,
+      title: option.label,
+      label: option.label,
+    });
+  const matchesSearch = (option: FieldModalCollectionOption) =>
+    option.label.toLowerCase().includes(query);
+  const toDropdownOptions = (
+    entries: FieldModalCollectionEntry[],
+    path: number[] = [],
+  ): (
+    | ReturnType<typeof listItemSectionBuilder>
+    | ReturnType<typeof listItemSelectBuilder>
+  )[] =>
+    entries.flatMap((entry, index) => {
+      if ('options' in entry) {
+        const groupPath = [...path, index];
+        const options = toDropdownOptions(entry.options, groupPath);
+        return options.length
+          ? [
+              listItemSectionBuilder({
+                id: `custom-field-modal-reference-collection-group-${groupPath.join(
+                  '-',
+                )}`,
+                dataHook: `custom-field-modal-reference-collection-group-${groupPath.join(
+                  '-',
+                )}`,
+                type:
+                  path.length === 0 &&
+                  entry.options.some((option) => 'options' in option)
+                    ? 'title'
+                    : 'subheader',
+                title: entry.heading,
+              }),
+              ...options,
+            ]
+          : [];
+      }
+      return matchesSearch(entry) ? [toOption(entry)] : [];
+    });
+  const dropdownOptions = toDropdownOptions(state.collectionOptionEntries);
 
   return (
     <Cell span={12}>
@@ -88,14 +131,7 @@ export const _CustomFieldCollectionInput = ({
           }
           placeholder={state.collectionInputPlaceholder}
           emptyStateMessage={state.collectionInputEmptyStateMessage}
-          options={options.map((option) =>
-            listItemSelectBuilder({
-              dataHook: `custom-field-modal-reference-collection-${option.id}`,
-              id: option.id,
-              title: option.label,
-              label: option.label,
-            }),
-          )}
+          options={dropdownOptions}
           fixedFooter={
             dropdownAction && (
               <Box direction="vertical">

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CustomFieldFormPiiFields2601668734";
+var _namespace_ = "CustomFieldFormPiiFields1586461540";
 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":"CustomFieldFormPiiFields2601668734__root","tooltipText":"CustomFieldFormPiiFields2601668734__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields1586461540__root","tooltipText":"CustomFieldFormPiiFields1586461540__tooltipText"};
 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_ = "DragHandle3260421889";
+var _namespace_ = "DragHandle4258833218";
 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":"DragHandle3260421889__root"};
+export var classes = {"root":"DragHandle4258833218__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_ = "EditableCell1360442001";
+var _namespace_ = "EditableCell620503216";
 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":"EditableCell1360442001__root","textInputArea":"Edit3783343796__inputArea","selectorRow":"EditableCell1360442001__selectorRow","errorPopover":"EditableCell1360442001__errorPopover","errorMessage":"EditableCell1360442001__errorMessage"};
+export var classes = {"root":"EditableCell620503216__root","textInputArea":"Edit2116025688__inputArea","selectorRow":"EditableCell620503216__selectorRow","errorPopover":"EditableCell620503216__errorPopover","errorMessage":"EditableCell620503216__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover1852421654";
+var _namespace_ = "HeaderActionsPopover4006224701";
 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":"HeaderActionsPopover1852421654__root"};
+export var classes = {"root":"HeaderActionsPopover4006224701__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_ = "CellViewLayout531663116";
+var _namespace_ = "CellViewLayout1454011264";
 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":"CellViewLayout531663116__root"};
+export var classes = {"root":"CellViewLayout1454011264__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "JsonInputEdit2722664150";
+var _namespace_ = "JsonInputEdit4294019092";
 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":"JsonInputEdit2722664150__root","jsonInput":"JsonInputEdit2722664150__jsonInput"};
+export var classes = {"root":"JsonInputEdit4294019092__root","jsonInput":"JsonInputEdit4294019092__jsonInput"};
 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_ = "Edit3940813357";
+var _namespace_ = "Edit4077637342";
 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":"Edit3940813357__root","addressInput":"Edit3940813357__addressInput"};
+export var classes = {"root":"Edit4077637342__root","addressInput":"Edit4077637342__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_ = "Edit1914450979";
+var _namespace_ = "Edit1087762724";
 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":"Edit1914450979__root","booleanEdit":"Edit1914450979__booleanEdit"};
+export var classes = {"root":"Edit1087762724__root","booleanEdit":"Edit1087762724__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_ = "View4108547499";
+var _namespace_ = "View1418536366";
 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":"View4108547499__root","booleanView":"View4108547499__booleanView"};
+export var classes = {"root":"View1418536366__root","booleanView":"View1418536366__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_ = "Edit1689898236";
+var _namespace_ = "Edit3671364186";
 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":"Edit1689898236__root"};
+export var classes = {"root":"Edit3671364186__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_ = "Edit2678059480";
+var _namespace_ = "Edit1759392197";
 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":"Edit2678059480__root","dateInput":"Edit2678059480__dateInput"};
+export var classes = {"root":"Edit1759392197__root","dateInput":"Edit1759392197__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_ = "View1385657872";
+var _namespace_ = "View3791886530";
 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":"View1385657872__root"};
+export var classes = {"root":"View3791886530__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_ = "Edit2179174434";
+var _namespace_ = "Edit550703932";
 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":"Edit2179174434__root","half":"Edit2179174434__half","dateHalf":"Edit2179174434__dateHalf Edit2179174434__half","timeHalf":"Edit2179174434__timeHalf Edit2179174434__half","divider":"Edit2179174434__divider","passiveText":"Edit2179174434__passiveText","placeholderText":"Edit2179174434__placeholderText Edit2179174434__passiveText"};
+export var classes = {"root":"Edit550703932__root","half":"Edit550703932__half","dateHalf":"Edit550703932__dateHalf Edit550703932__half","timeHalf":"Edit550703932__timeHalf Edit550703932__half","divider":"Edit550703932__divider","passiveText":"Edit550703932__passiveText","placeholderText":"Edit550703932__placeholderText Edit550703932__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_ = "View2988568178";
+var _namespace_ = "View2705583012";
 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":"View2988568178__root","leaf":"View2988568178__leaf","datePart":"View2988568178__datePart View2988568178__leaf","timePart":"View2988568178__timePart View2988568178__leaf","placeholder":"View2988568178__placeholder View2988568178__leaf","divider":"View2988568178__divider"};
+export var classes = {"root":"View2705583012__root","leaf":"View2705583012__leaf","datePart":"View2705583012__datePart View2705583012__leaf","timePart":"View2705583012__timePart View2705583012__leaf","placeholder":"View2705583012__placeholder View2705583012__leaf","divider":"View2705583012__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_ = "Edit3917831843";
+var _namespace_ = "Edit1109830132";
 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":"Edit3917831843__root","emailInput":"Edit3917831843__emailInput"};
+export var classes = {"root":"Edit1109830132__root","emailInput":"Edit1109830132__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_ = "View764858572";
+var _namespace_ = "View1463691207";
 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":"View764858572__root"};
+export var classes = {"root":"View1463691207__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -1,6 +1,6 @@
 import {
   isMediaImageEmpty,
-  toMediaImageValue,
+  deserializeMediaImageValue,
   type MediaImageValue,
 } from '@wix/patterns-fields';
 import { defineCellType } from '../../types';
@@ -15,16 +15,7 @@ export const mediaImageCellType = defineCellType<MediaImageValue | null>({
   EditComponent: MediaImageEdit,
   // JSON escapes tabs and newlines, so a copied value stays one TSV cell.
   serialize: (value) => (value == null ? '' : JSON.stringify(value)),
-  deserialize: (raw) => {
-    if (raw.trim() === '') {
-      return null;
-    }
-    const image = toMediaImageValue(JSON.parse(raw));
-    if (!image) {
-      throw new Error('Not an image value');
-    }
-    return image;
-  },
+  deserialize: deserializeMediaImageValue,
   validate: (value, rules, translate) => {
     if (value == null) {
       return null;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2498785527";
+var _namespace_ = "Edit3492662923";
 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":"Edit2498785527__root","editor":"Edit2498785527__editor"};
+export var classes = {"root":"Edit3492662923__root","editor":"Edit3492662923__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -11,7 +11,7 @@ import type { CellEditProps } from '../../types';
 import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
 import { useFilterCollectionStates } from '../../../../hooks/useFilterCollectionStates';
 import { FilterTranslationProvider } from '../../../../providers';
-import { getImageFieldId } from '../reference/getImageFieldId';
+import { getImageFieldId } from '../../../../utils/referenceImage';
 import { useOpenReferencedCollection } from '../reference/openCollectionContext';
 import type {
   MultiReferenceValue,
@@ -79,7 +79,7 @@ function _MultiReferenceEditContent({
       selectedRefs.map((ref, i) => ({
         id: String(ref[idField] ?? i),
         name: String(ref[displayField] ?? ''),
-        image: imageField ? (ref[imageField] as string | undefined) : undefined,
+        image: imageField ? ref[imageField] : undefined,
       })),
     [selectedRefs, idField, displayField, imageField],
   );

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

@@ -3,7 +3,7 @@ import { AddSmall } from '@wix/wix-ui-icons-common/lazy';
 import { CellMultiReferenceView, useTranslations } from '@wix/patterns-fields';
 import type { CellMultiReferenceItem } from '@wix/patterns-fields';
 import type { CellViewProps } from '../../types';
-import { getImageFieldId } from '../reference/getImageFieldId';
+import { getImageFieldId } from '../../../../utils/referenceImage';
 import { EmptyReferenceView } from '../reference/EmptyReferenceView';
 import type { MultiReferenceValue, ReferenceTypeConfig } from './types';
 
@@ -29,7 +29,7 @@ export const MultiReferenceView: React.FC<
   const items: CellMultiReferenceItem[] = refs.map((ref, i) => ({
     id: String(ref[idField] ?? i),
     name: String(ref[displayField] ?? ''),
-    image: imageField ? (ref[imageField] as string | undefined) : undefined,
+    image: imageField ? ref[imageField] : undefined,
   }));
 
   return (

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1140549331";
+var _namespace_ = "Edit2270565236";
 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":"Edit1140549331__root","numberInput":"Edit1140549331__numberInput"};
+export var classes = {"root":"Edit2270565236__root","numberInput":"Edit2270565236__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_ = "View3528508322";
+var _namespace_ = "View2262557665";
 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":"View3528508322__root","textView":"View3528508322__textView"};
+export var classes = {"root":"View2262557665__root","textView":"View2262557665__textView"};
 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_ = "View517716605";
+var _namespace_ = "View1377514508";
 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":"View517716605__root"};
+export var classes = {"root":"View1377514508__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -17,7 +17,7 @@ import { useCommitOnEnter } from '../useCommitOnEnter';
 import { useFilterCollectionStates } from '../../../../hooks/useFilterCollectionStates';
 import { FilterTranslationProvider } from '../../../../providers';
 import type { ReferenceItem, ReferenceTypeConfig } from './types';
-import { getImageFieldId } from './getImageFieldId';
+import { getImageFieldId } from '../../../../utils/referenceImage';
 import { useCollection } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import { useOpenReferencedCollection } from './openCollectionContext';
@@ -103,7 +103,7 @@ function _ReferenceEditContent({
       return foundItem.item.image;
     }
     if (imageField) {
-      return value?.[imageField] as string | undefined;
+      return value?.[imageField];
     }
     return undefined;
   }, [value, idField, keyedItems, imageField]);

package/src/components/EditableTable/cellTypes/reference/EmptyReferenceView.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "EmptyReferenceView3294540289";
+var _namespace_ = "EmptyReferenceView3958701798";
 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":"EmptyReferenceView3294540289__root","placeholder":"EmptyReferenceView3294540289__placeholder","placeholderIcon":"EmptyReferenceView3294540289__placeholderIcon","placeholderText":"EmptyReferenceView3294540289__placeholderText","arrow":"EmptyReferenceView3294540289__arrow"};
+export var classes = {"root":"EmptyReferenceView3958701798__root","placeholder":"EmptyReferenceView3958701798__placeholder","placeholderIcon":"EmptyReferenceView3958701798__placeholderIcon","placeholderText":"EmptyReferenceView3958701798__placeholderText","arrow":"EmptyReferenceView3958701798__arrow"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};