@wix/patterns 1.443.0 → 1.445.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover1414070421";
+var _namespace_ = "HeaderActionsPopover1397666700";
 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":"HeaderActionsPopover1414070421__root"};
+export var classes = {"root":"HeaderActionsPopover1397666700__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_ = "CellViewLayout717649944";
+var _namespace_ = "CellViewLayout554478013";
 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":"CellViewLayout717649944__root"};
+export var classes = {"root":"CellViewLayout554478013__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_ = "Edit4039281978";
+var _namespace_ = "Edit1072967722";
 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":"Edit4039281978__root","addressInput":"Edit4039281978__addressInput"};
+export var classes = {"root":"Edit1072967722__root","addressInput":"Edit1072967722__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2409931606";
+var _namespace_ = "Edit2343355819";
 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":"Edit2409931606__root","jsonInput":"Edit2409931606__jsonInput"};
+export var classes = {"root":"Edit2343355819__root","jsonInput":"Edit2343355819__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_ = "Edit1933578266";
+var _namespace_ = "Edit2165660215";
 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":"Edit1933578266__root","booleanEdit":"Edit1933578266__booleanEdit"};
+export var classes = {"root":"Edit2165660215__root","booleanEdit":"Edit2165660215__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_ = "View1897568591";
+var _namespace_ = "View1705582049";
 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":"View1897568591__root","booleanView":"View1897568591__booleanView"};
+export var classes = {"root":"View1705582049__root","booleanView":"View1705582049__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_ = "Edit351838480";
+var _namespace_ = "Edit2491439285";
 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":"Edit351838480__root"};
+export var classes = {"root":"Edit2491439285__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_ = "Edit3173606969";
+var _namespace_ = "Edit4289704283";
 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":"Edit3173606969__root","dateInput":"Edit3173606969__dateInput"};
+export var classes = {"root":"Edit4289704283__root","dateInput":"Edit4289704283__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_ = "View2435020196";
+var _namespace_ = "View612432300";
 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":"View2435020196__root"};
+export var classes = {"root":"View612432300__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_ = "Edit3531536293";
+var _namespace_ = "Edit206686195";
 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":"Edit3531536293__root","half":"Edit3531536293__half","dateHalf":"Edit3531536293__dateHalf Edit3531536293__half","timeHalf":"Edit3531536293__timeHalf Edit3531536293__half","divider":"Edit3531536293__divider","passiveText":"Edit3531536293__passiveText","placeholderText":"Edit3531536293__placeholderText Edit3531536293__passiveText"};
+export var classes = {"root":"Edit206686195__root","half":"Edit206686195__half","dateHalf":"Edit206686195__dateHalf Edit206686195__half","timeHalf":"Edit206686195__timeHalf Edit206686195__half","divider":"Edit206686195__divider","passiveText":"Edit206686195__passiveText","placeholderText":"Edit206686195__placeholderText Edit206686195__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_ = "View3883231843";
+var _namespace_ = "View1553704831";
 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":"View3883231843__root","leaf":"View3883231843__leaf","datePart":"View3883231843__datePart View3883231843__leaf","timePart":"View3883231843__timePart View3883231843__leaf","placeholder":"View3883231843__placeholder View3883231843__leaf","divider":"View3883231843__divider"};
+export var classes = {"root":"View1553704831__root","leaf":"View1553704831__leaf","datePart":"View1553704831__datePart View1553704831__leaf","timePart":"View1553704831__timePart View1553704831__leaf","placeholder":"View1553704831__placeholder View1553704831__leaf","divider":"View1553704831__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_ = "Edit2888572549";
+var _namespace_ = "Edit3697751612";
 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":"Edit2888572549__root","emailInput":"Edit2888572549__emailInput"};
+export var classes = {"root":"Edit3697751612__root","emailInput":"Edit3697751612__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_ = "View373539723";
+var _namespace_ = "View819474640";
 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":"View373539723__root"};
+export var classes = {"root":"View819474640__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_ = "Edit3847130781";
+var _namespace_ = "Edit2095126508";
 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":"Edit3847130781__root","numberInput":"Edit3847130781__numberInput"};
+export var classes = {"root":"Edit2095126508__root","numberInput":"Edit2095126508__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_ = "View3010082775";
+var _namespace_ = "View3154474587";
 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":"View3010082775__root","textView":"View3010082775__textView"};
+export var classes = {"root":"View3154474587__root","textView":"View3154474587__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_ = "Edit46610088";
+var _namespace_ = "Edit1128688006";
 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":"Edit46610088__root","jsonInput":"Edit46610088__jsonInput"};
+export var classes = {"root":"Edit1128688006__root","jsonInput":"Edit1128688006__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_ = "View3856994611";
+var _namespace_ = "View3661302835";
 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":"View3856994611__root"};
+export var classes = {"root":"View3661302835__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_ = "Edit2138601928";
+var _namespace_ = "Edit2705155614";
 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":"Edit2138601928__root","selectInput":"Edit2138601928__selectInput"};
+export var classes = {"root":"Edit2705155614__root","selectInput":"Edit2705155614__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_ = "Edit2718752973";
+var _namespace_ = "Edit3791132897";
 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":"Edit2718752973__root","editWrapper":"Edit2718752973__editWrapper","inputArea":"Edit2718752973__inputArea"};
+export var classes = {"root":"Edit3791132897__root","editWrapper":"Edit3791132897__editWrapper","inputArea":"Edit3791132897__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_ = "View3604705960";
+var _namespace_ = "View4181936370";
 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":"View3604705960__root"};
+export var classes = {"root":"View4181936370__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_ = "Edit3074794358";
+var _namespace_ = "Edit619452332";
 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":"Edit3074794358__root","wrapper":"Edit3074794358__wrapper","overlay":"Edit3074794358__overlay"};
+export var classes = {"root":"Edit619452332__root","wrapper":"Edit619452332__wrapper","overlay":"Edit619452332__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_ = "Edit3901173961";
+var _namespace_ = "Edit208230424";
 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":"Edit3901173961__root","urlInput":"Edit3901173961__urlInput"};
+export var classes = {"root":"Edit208230424__root","urlInput":"Edit208230424__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_ = "View585821481";
+var _namespace_ = "View420760888";
 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":"View585821481__root","textView":"View585821481__textView","urlText":"View585821481__urlText","suffix":"View585821481__suffix"};
+export var classes = {"root":"View420760888__root","textView":"View420760888__textView","urlText":"View420760888__urlText","suffix":"View420760888__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_ = "EmptyStateBase3289312929";
+var _namespace_ = "EmptyStateBase7412392";
 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":"EmptyStateBase3289312929__root"};
+export var classes = {"root":"EmptyStateBase7412392__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_ = "EntityPagePlain1475507905";
+var _namespace_ = "EntityPagePlain1660982067";
 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":"EntityPagePlain1475507905__root"};
+export var classes = {"root":"EntityPagePlain1660982067__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPageFields/EntityPageCustomField.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { FormField } from '@wix/design-system';
-import type { Field, FieldTypeDefinition } from '@wix/bex-core';
+import React, { useCallback, useRef } from 'react';
+import { Box, FormField } from '@wix/design-system';
+import type { Field, FieldTypeDefinition, Focusable } from '@wix/bex-core';
 import { useController, type Control } from '@wix/bex-core/form';
 import { toValidationRules } from '../../state/buildEditableFieldColumns';
 
@@ -14,6 +14,21 @@ export interface EntityPageCustomFieldProps {
   dataHook?: string;
 }
 
+// Fallback focus target inside the wrapper, for a form component that does not
+// fill inputRef. Buttons are included on purpose — a custom type may render its
+// control as buttons (a star rating, a segmented toggle), and the wrapper holds
+// only the component's own output, so the first focusable in it is the control.
+const FOCUSABLE =
+  'input, textarea, select, button, [contenteditable], [tabindex]:not([tabindex="-1"])';
+
+// The contract asks a form component for a Focusable, the same as a cell's
+// inputRef. A component that hands back a real input also satisfies the rest of
+// what react-hook-form may call, so read those opportunistically.
+type FormControl = Focusable &
+  Partial<
+    Pick<HTMLInputElement, 'select' | 'setCustomValidity' | 'reportValidity'>
+  >;
+
 // Owns the react-hook-form wiring for a custom field type, so a definition's
 // form component never touches the form: it gets value/onChange and renders
 // only the input. Registration here (not in the component) also guarantees the
@@ -41,6 +56,44 @@ export function EntityPageCustomField({
   });
   const Component = definition.form!.Component;
 
+  const consumerRef = useRef<Focusable | undefined | null>(null);
+  const registerRef = controller.field.ref;
+
+  // The control belongs to the form component, so react-hook-form gets a handle
+  // that asks for it at focus time and settles for the wrapper when the
+  // component did not hand one back.
+  const setWrapperRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (!element) {
+        return;
+      }
+      registerRef({
+        focus: () => {
+          const consumer = consumerRef.current;
+          if (consumer?.focus) {
+            consumer.focus();
+            return;
+          }
+          // Not implemented in jsdom.
+          element.scrollIntoView?.({ block: 'center' });
+          element.querySelector<HTMLElement>(FOCUSABLE)?.focus();
+        },
+        // react-hook-form wraps whatever is registered and calls these through
+        // unconditionally, so they have to exist here or setFocus and native
+        // validation throw on the way to the control.
+        select: () => (consumerRef.current as FormControl | null)?.select?.(),
+        setCustomValidity: (message: string) =>
+          (consumerRef.current as FormControl | null)?.setCustomValidity?.(
+            message,
+          ),
+        reportValidity: () =>
+          (consumerRef.current as FormControl | null)?.reportValidity?.() ??
+          true,
+      });
+    },
+    [registerRef],
+  );
+
   return (
     <FormField
       label={field.displayName}
@@ -49,13 +102,16 @@ export function EntityPageCustomField({
       statusMessage={controller.fieldState.error?.message}
       dataHook={dataHook}
     >
-      <Component
-        field={field}
-        value={controller.field.value}
-        onChange={controller.field.onChange}
-        onBlur={controller.field.onBlur}
-        dataHook={dataHook && `${dataHook}-input`}
-      />
+      <Box width="100%" ref={setWrapperRef}>
+        <Component
+          field={field}
+          value={controller.field.value}
+          onChange={controller.field.onChange}
+          onBlur={controller.field.onBlur}
+          inputRef={consumerRef}
+          dataHook={dataHook && `${dataHook}-input`}
+        />
+      </Box>
     </FormField>
   );
 }

package/src/components/EntityPageFields/EntityPageField.tsx

@@ -5,6 +5,7 @@ import type {
   FieldTypeDefinition,
   PatternsFieldType,
 } from '@wix/bex-core';
+import { isReferenceField } from '@wix/bex-core';
 import type { Control } from '@wix/bex-core/form';
 import { EntityPageReferenceField } from './EntityPageReferenceField';
 import { EntityPageCustomField } from './EntityPageCustomField';
@@ -125,8 +126,7 @@ export function EntityPageField({
   // Reference fields need referenced-collection data, so they go through a
   // wrapper (resolves the referenced source, fetches items) rather than the
   // uniform dispatcher below.
-  const isReference =
-    field.type === 'REFERENCE' || field.type === 'MULTI_REFERENCE';
+  const isReference = isReferenceField(field);
   const customForm = field.type === 'CUSTOM' ? definition?.form : undefined;
   const FieldInput = FIELD_INPUTS[field.type as keyof typeof FIELD_INPUTS] as
     | React.ComponentType<any>

package/src/components/EntityPageFields/EntityPageReferenceField.tsx

@@ -25,8 +25,8 @@ export interface EntityPageReferenceFieldProps {
   data: Record<string, unknown>;
 }
 
-// Adapts a referenced SchemaSource (schemaSource.references[collectionId]) to the
-// data-agnostic FormReference / FormMultiReference renderers: it queries the
+// Adapts a referenced SchemaSource to the data-agnostic FormReference /
+// FormMultiReference renderers: it queries the
 // referenced collection for candidate items and derives the referenced schema's
 // id/display/image fields, mirroring EditableTable's reference cell Edit.
 function _EntityPageReferenceField({
@@ -37,9 +37,18 @@ function _EntityPageReferenceField({
   const state = useEntityPageContext();
   const referencedCollectionId = (field as BaseReferenceField).referenceMetadata
     ?.referencedCollectionId;
-  const refSource = referencedCollectionId
-    ? state.schemaSource?.references?.[referencedCollectionId]
-    : undefined;
+  const refSource = useMemo(() => {
+    if (!referencedCollectionId) {
+      return undefined;
+    }
+
+    return (
+      state.schemaSource?.references?.[referencedCollectionId] ??
+      state.schemaSource?.getReferencedCollectionSource?.(
+        referencedCollectionId,
+      )
+    );
+  }, [referencedCollectionId, state.schemaSource]);
 
   const collection = useCollection<RefRow>(
     refSource

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

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