@wix/patterns 1.495.0 → 1.496.0

package/src/components/EditableTable/EditableCell.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import type { FiltersMap } from '@wix/bex-core';
-import { Text } from '@wix/design-system';
+import { Popover, Text } from '@wix/design-system';
 import { st, classes } from './EditableCell.st.css.js';
 import type { EditableTableState } from '../../state/EditableTable';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
@@ -189,6 +189,8 @@ function _EditableCell<T, F extends FiltersMap>({
       columnId={columnId}
       rowKey={rowKey}
       isEditable={canEdit}
+      // Keep the focused view from expanding over other cells in a range selection.
+      isFocused={isFocused && !isRangeSelection}
     />
   );
 
@@ -245,16 +247,30 @@ function _EditableCell<T, F extends FiltersMap>({
         )}
       </div>
       {showErrorMessage && (
-        <div
-          className={classes.errorMessage}
-          data-hook="cell-error-message"
-          data-row-key={rowKey}
-          data-column-id={columnId}
+        <Popover
+          className={classes.errorPopover}
+          shown
+          skin="light"
+          placement="bottom-start"
+          showArrow={false}
+          appendTo="window"
         >
-          <Text size="small" skin="error">
-            {cellValidation.errors?.join(', ')}
-          </Text>
-        </div>
+          <Popover.Element>
+            <span aria-hidden />
+          </Popover.Element>
+          <Popover.Content>
+            <div
+              className={classes.errorMessage}
+              data-hook="cell-error-message"
+              data-row-key={rowKey}
+              data-column-id={columnId}
+            >
+              <Text size="small" skin="error">
+                {cellValidation.errors?.join(', ')}
+              </Text>
+            </div>
+          </Popover.Content>
+        </Popover>
       )}
     </>
   );

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

@@ -61,8 +61,8 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
     /** Get the column id from data attribute */
     getColumnId: () => base.attr('data-column-id'),
 
-    /** Error message shown under the cell while it's focused/editing (null when hidden).
-     *  It renders next to the cell, not inside it, so it's queried from the body. */
+    /** Error message shown while the cell is focused/editing (null when hidden).
+     *  It renders in a portal, so it is queried from the body. */
     getErrorMessage: async () => {
       const rowKey = await base.attr('data-row-key');
       const columnId = await base.attr('data-column-id');

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -14,6 +14,7 @@ import {
   DuplicateSmall,
 } from '@wix/wix-ui-icons-common/lazy';
 import type { EditableTableState, Cell } from '../../state/EditableTable';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { startEditingNewRow } from './useAddRow';
 
 type ListItemActionBuilderParams = Omit<
@@ -90,6 +91,7 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
   onClose,
 }: EditableTableContextMenuProps<T, F>) {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const {
     cellInteraction,
     clipboard,
@@ -404,10 +406,13 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
         top: y,
         zIndex: CONTEXT_MENU_Z_INDEX,
         width: MENU_WIDTH,
+        boxSizing: isBmHarmonyTheme ? 'border-box' : undefined,
         background: SURFACE_BACKGROUND,
         borderRadius: SURFACE_BORDER_RADIUS,
         boxShadow: SURFACE_BOX_SHADOW,
-        padding: `var(--wds-space-200, ${SURFACE_PADDING_Y}px) 0`,
+        padding: isBmHarmonyTheme
+          ? `var(--wds-space-200, ${SURFACE_PADDING_Y}px)`
+          : `var(--wds-space-200, ${SURFACE_PADDING_Y}px) 0`,
         overflow: 'hidden',
       }}
       onMouseDown={(e) => e.preventDefault()}

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

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

package/src/components/EditableTable/HeaderFieldActions.tsx

@@ -80,11 +80,10 @@ function _HeaderFieldActions<T, F extends FiltersMap>({
       state.sort(id, { forceDirection: 'desc' });
   }
 
-  if (
-    toolbarFiltersState &&
-    state.collection.query.customFilters[column.id] != null
-  ) {
-    handlers.filter = () => toolbarFiltersState.openFromColumnHeader();
+  const columnFilter = state.collection.query.customFilters[column.id];
+  if (toolbarFiltersState && columnFilter != null) {
+    handlers.filter = (_id, event) =>
+      toolbarFiltersState.openFromColumnHeader(columnFilter.name, event);
   }
 
   const groups = buildFieldActionGroups({

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout632762218";
+var _namespace_ = "CellViewLayout2614759840";
 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":"CellViewLayout632762218__root"};
+export var classes = {"root":"CellViewLayout2614759840__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_ = "JsonInputEdit2653879049";
+var _namespace_ = "JsonInputEdit1717190880";
 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":"JsonInputEdit2653879049__root","jsonInput":"JsonInputEdit2653879049__jsonInput"};
+export var classes = {"root":"JsonInputEdit1717190880__root","jsonInput":"JsonInputEdit1717190880__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_ = "Edit3944608007";
+var _namespace_ = "Edit82479914";
 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":"Edit3944608007__root","addressInput":"Edit3944608007__addressInput"};
+export var classes = {"root":"Edit82479914__root","addressInput":"Edit82479914__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_ = "Edit1825892734";
+var _namespace_ = "Edit832820748";
 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":"Edit1825892734__root","booleanEdit":"Edit1825892734__booleanEdit"};
+export var classes = {"root":"Edit832820748__root","booleanEdit":"Edit832820748__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_ = "View3170603540";
+var _namespace_ = "View329175887";
 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":"View3170603540__root","booleanView":"View3170603540__booleanView"};
+export var classes = {"root":"View329175887__root","booleanView":"View329175887__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_ = "Edit1089980805";
+var _namespace_ = "Edit1493720931";
 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":"Edit1089980805__root"};
+export var classes = {"root":"Edit1493720931__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_ = "Edit673023204";
+var _namespace_ = "Edit1691346528";
 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":"Edit673023204__root","dateInput":"Edit673023204__dateInput"};
+export var classes = {"root":"Edit1691346528__root","dateInput":"Edit1691346528__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_ = "View1302082497";
+var _namespace_ = "View2155624156";
 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":"View1302082497__root"};
+export var classes = {"root":"View2155624156__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_ = "Edit1898372478";
+var _namespace_ = "Edit593812387";
 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":"Edit1898372478__root","half":"Edit1898372478__half","dateHalf":"Edit1898372478__dateHalf Edit1898372478__half","timeHalf":"Edit1898372478__timeHalf Edit1898372478__half","divider":"Edit1898372478__divider","passiveText":"Edit1898372478__passiveText","placeholderText":"Edit1898372478__placeholderText Edit1898372478__passiveText"};
+export var classes = {"root":"Edit593812387__root","half":"Edit593812387__half","dateHalf":"Edit593812387__dateHalf Edit593812387__half","timeHalf":"Edit593812387__timeHalf Edit593812387__half","divider":"Edit593812387__divider","passiveText":"Edit593812387__passiveText","placeholderText":"Edit593812387__placeholderText Edit593812387__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_ = "View1761170044";
+var _namespace_ = "View3414503761";
 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":"View1761170044__root","leaf":"View1761170044__leaf","datePart":"View1761170044__datePart View1761170044__leaf","timePart":"View1761170044__timePart View1761170044__leaf","placeholder":"View1761170044__placeholder View1761170044__leaf","divider":"View1761170044__divider"};
+export var classes = {"root":"View3414503761__root","leaf":"View3414503761__leaf","datePart":"View3414503761__datePart View3414503761__leaf","timePart":"View3414503761__timePart View3414503761__leaf","placeholder":"View3414503761__placeholder View3414503761__leaf","divider":"View3414503761__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_ = "Edit3070213297";
+var _namespace_ = "Edit1380986158";
 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":"Edit3070213297__root","emailInput":"Edit3070213297__emailInput"};
+export var classes = {"root":"Edit1380986158__root","emailInput":"Edit1380986158__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_ = "View156929387";
+var _namespace_ = "View3515833549";
 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":"View156929387__root"};
+export var classes = {"root":"View3515833549__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -9,7 +9,7 @@ import type { MultiReferenceValue, ReferenceTypeConfig } from './types';
 
 export const MultiReferenceView: React.FC<
   CellViewProps<MultiReferenceValue>
-> = ({ value, typeConfig, columnId, rowKey, isEditable }) => {
+> = ({ value, typeConfig, columnId, rowKey, isEditable, isFocused }) => {
   const { t } = useTranslations();
   const config = typeConfig as ReferenceTypeConfig | undefined;
   const refs = (Array.isArray(value) ? value : []).filter(Boolean);
@@ -35,6 +35,7 @@ export const MultiReferenceView: React.FC<
   return (
     <CellMultiReferenceView
       items={items}
+      expanded={isEditable === false && isFocused}
       dataHook="multi-reference-view"
       fieldId={`multi-reference-view-${columnId}-${rowKey}`}
     />

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

@@ -30,6 +30,7 @@ export const multiReferenceCellType = defineCellType<MultiReferenceValue>({
     return parsed;
   },
   editable: true,
+  growable: true,
   // Single click opens the chip editor (parity with the UX handoff).
   editOnClick: () => true,
   // Enter edit on a printable key without clearing the existing chips — the

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit280315305";
+var _namespace_ = "Edit4137898944";
 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":"Edit280315305__root","numberInput":"Edit280315305__numberInput"};
+export var classes = {"root":"Edit4137898944__root","numberInput":"Edit4137898944__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_ = "View2781506596";
+var _namespace_ = "View1050885943";
 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":"View2781506596__root","textView":"View2781506596__textView"};
+export var classes = {"root":"View1050885943__root","textView":"View1050885943__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_ = "View1118613088";
+var _namespace_ = "View3425138249";
 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":"View1118613088__root"};
+export var classes = {"root":"View3425138249__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "EmptyReferenceView1182212601";
+var _namespace_ = "EmptyReferenceView1590175613";
 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":"EmptyReferenceView1182212601__root","placeholder":"EmptyReferenceView1182212601__placeholder","placeholderIcon":"EmptyReferenceView1182212601__placeholderIcon","placeholderText":"EmptyReferenceView1182212601__placeholderText","arrow":"EmptyReferenceView1182212601__arrow"};
+export var classes = {"root":"EmptyReferenceView1590175613__root","placeholder":"EmptyReferenceView1590175613__placeholder","placeholderIcon":"EmptyReferenceView1590175613__placeholderIcon","placeholderText":"EmptyReferenceView1590175613__placeholderText","arrow":"EmptyReferenceView1590175613__arrow"};
 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_ = "Edit2414094201";
+var _namespace_ = "Edit3100283366";
 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":"Edit2414094201__root","selectInput":"Edit2414094201__selectInput"};
+export var classes = {"root":"Edit3100283366__root","selectInput":"Edit3100283366__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_ = "Edit2395190668";
+var _namespace_ = "Edit2648970855";
 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":"Edit2395190668__root","editWrapper":"Edit2395190668__editWrapper","inputArea":"Edit2395190668__inputArea"};
+export var classes = {"root":"Edit2648970855__root","editWrapper":"Edit2648970855__editWrapper","inputArea":"Edit2648970855__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_ = "View2372260115";
+var _namespace_ = "View2239080149";
 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":"View2372260115__root"};
+export var classes = {"root":"View2239080149__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_ = "Edit3719156168";
+var _namespace_ = "Edit2431693639";
 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":"Edit3719156168__root","wrapper":"Edit3719156168__wrapper","overlay":"Edit3719156168__overlay"};
+export var classes = {"root":"Edit2431693639__root","wrapper":"Edit2431693639__wrapper","overlay":"Edit2431693639__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_ = "Edit3586755469";
+var _namespace_ = "Edit2091273722";
 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":"Edit3586755469__root","urlInput":"Edit3586755469__urlInput"};
+export var classes = {"root":"Edit2091273722__root","urlInput":"Edit2091273722__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_ = "View4049590600";
+var _namespace_ = "View799396297";
 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":"View4049590600__root","textView":"View4049590600__textView","urlText":"View4049590600__urlText","suffix":"View4049590600__suffix"};
+export var classes = {"root":"View799396297__root","textView":"View799396297__textView","urlText":"View799396297__urlText","suffix":"View799396297__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase4117235004";
+var _namespace_ = "EmptyStateBase1882287640";
 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":"EmptyStateBase4117235004__root"};
+export var classes = {"root":"EmptyStateBase1882287640__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_ = "EntityPagePlain2875429091";
+var _namespace_ = "EntityPagePlain3871088042";
 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":"EntityPagePlain2875429091__root"};
+export var classes = {"root":"EntityPagePlain3871088042__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPageFields/EntityPageCustomField.tsx

@@ -4,7 +4,7 @@ import type { Field, FieldTypeDefinition, Focusable } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController, type Control } from '@wix/bex-core/form';
 import { fieldRefHandle } from '@wix/patterns-fields';
-import { toValidationRules } from '../../state/buildEditableFieldColumns';
+import { buildFieldValidationRules } from '../../utils/fieldValidation';
 
 export interface EntityPageCustomFieldProps {
   field: Field;
@@ -45,7 +45,7 @@ export function EntityPageCustomField({
     rules: validate
       ? {
           validate: (value) =>
-            validate(value, toValidationRules(field, t)) ?? true,
+            validate(value, buildFieldValidationRules(field, t)) ?? true,
         }
       : undefined,
   });