@wix/patterns 1.444.0 → 1.446.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover4036277946";
+var _namespace_ = "HeaderActionsPopover2155685837";
 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":"HeaderActionsPopover4036277946__root"};
+export var classes = {"root":"HeaderActionsPopover2155685837__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_ = "CellViewLayout3509898779";
+var _namespace_ = "CellViewLayout2225238486";
 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":"CellViewLayout3509898779__root"};
+export var classes = {"root":"CellViewLayout2225238486__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_ = "Edit2573311904";
+var _namespace_ = "Edit59862760";
 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":"Edit2573311904__root","addressInput":"Edit2573311904__addressInput"};
+export var classes = {"root":"Edit59862760__root","addressInput":"Edit59862760__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_ = "Edit2869226060";
+var _namespace_ = "Edit1066489331";
 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":"Edit2869226060__root","jsonInput":"Edit2869226060__jsonInput"};
+export var classes = {"root":"Edit1066489331__root","jsonInput":"Edit1066489331__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_ = "Edit90257593";
+var _namespace_ = "Edit1480691619";
 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":"Edit90257593__root","booleanEdit":"Edit90257593__booleanEdit"};
+export var classes = {"root":"Edit1480691619__root","booleanEdit":"Edit1480691619__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_ = "View2858520939";
+var _namespace_ = "View1411502545";
 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":"View2858520939__root","booleanView":"View2858520939__booleanView"};
+export var classes = {"root":"View1411502545__root","booleanView":"View1411502545__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_ = "Edit1876479861";
+var _namespace_ = "Edit2526068679";
 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":"Edit1876479861__root"};
+export var classes = {"root":"Edit2526068679__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_ = "Edit2626484195";
+var _namespace_ = "Edit1271927729";
 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":"Edit2626484195__root","dateInput":"Edit2626484195__dateInput"};
+export var classes = {"root":"Edit1271927729__root","dateInput":"Edit1271927729__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_ = "View1730582366";
+var _namespace_ = "View3081433973";
 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":"View1730582366__root"};
+export var classes = {"root":"View3081433973__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_ = "Edit731567354";
+var _namespace_ = "Edit3892105212";
 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":"Edit731567354__root","half":"Edit731567354__half","dateHalf":"Edit731567354__dateHalf Edit731567354__half","timeHalf":"Edit731567354__timeHalf Edit731567354__half","divider":"Edit731567354__divider","passiveText":"Edit731567354__passiveText","placeholderText":"Edit731567354__placeholderText Edit731567354__passiveText"};
+export var classes = {"root":"Edit3892105212__root","half":"Edit3892105212__half","dateHalf":"Edit3892105212__dateHalf Edit3892105212__half","timeHalf":"Edit3892105212__timeHalf Edit3892105212__half","divider":"Edit3892105212__divider","passiveText":"Edit3892105212__passiveText","placeholderText":"Edit3892105212__placeholderText Edit3892105212__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_ = "View3838782245";
+var _namespace_ = "View2182751378";
 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":"View3838782245__root","leaf":"View3838782245__leaf","datePart":"View3838782245__datePart View3838782245__leaf","timePart":"View3838782245__timePart View3838782245__leaf","placeholder":"View3838782245__placeholder View3838782245__leaf","divider":"View3838782245__divider"};
+export var classes = {"root":"View2182751378__root","leaf":"View2182751378__leaf","datePart":"View2182751378__datePart View2182751378__leaf","timePart":"View2182751378__timePart View2182751378__leaf","placeholder":"View2182751378__placeholder View2182751378__leaf","divider":"View2182751378__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_ = "Edit4098039100";
+var _namespace_ = "Edit251951507";
 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":"Edit4098039100__root","emailInput":"Edit4098039100__emailInput"};
+export var classes = {"root":"Edit251951507__root","emailInput":"Edit251951507__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_ = "View1424808652";
+var _namespace_ = "View3897007649";
 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":"View1424808652__root"};
+export var classes = {"root":"View3897007649__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_ = "Edit2319921542";
+var _namespace_ = "Edit4293594728";
 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":"Edit2319921542__root","numberInput":"Edit2319921542__numberInput"};
+export var classes = {"root":"Edit4293594728__root","numberInput":"Edit4293594728__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_ = "View2521455390";
+var _namespace_ = "View1028679298";
 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":"View2521455390__root","textView":"View2521455390__textView"};
+export var classes = {"root":"View1028679298__root","textView":"View1028679298__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_ = "Edit3789538789";
+var _namespace_ = "Edit1558508534";
 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":"Edit3789538789__root","jsonInput":"Edit3789538789__jsonInput"};
+export var classes = {"root":"Edit1558508534__root","jsonInput":"Edit1558508534__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_ = "View86560328";
+var _namespace_ = "View1629659411";
 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":"View86560328__root"};
+export var classes = {"root":"View1629659411__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_ = "Edit3065165885";
+var _namespace_ = "Edit1370268481";
 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":"Edit3065165885__root","selectInput":"Edit3065165885__selectInput"};
+export var classes = {"root":"Edit1370268481__root","selectInput":"Edit1370268481__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_ = "Edit2824074131";
+var _namespace_ = "Edit2457973312";
 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":"Edit2824074131__root","editWrapper":"Edit2824074131__editWrapper","inputArea":"Edit2824074131__inputArea"};
+export var classes = {"root":"Edit2457973312__root","editWrapper":"Edit2457973312__editWrapper","inputArea":"Edit2457973312__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_ = "View341477517";
+var _namespace_ = "View885644843";
 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":"View341477517__root"};
+export var classes = {"root":"View885644843__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_ = "Edit2182445524";
+var _namespace_ = "Edit871404938";
 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":"Edit2182445524__root","wrapper":"Edit2182445524__wrapper","overlay":"Edit2182445524__overlay"};
+export var classes = {"root":"Edit871404938__root","wrapper":"Edit871404938__wrapper","overlay":"Edit871404938__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_ = "Edit799129739";
+var _namespace_ = "Edit2546142657";
 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":"Edit799129739__root","urlInput":"Edit799129739__urlInput"};
+export var classes = {"root":"Edit2546142657__root","urlInput":"Edit2546142657__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_ = "View2301561964";
+var _namespace_ = "View3403835407";
 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":"View2301561964__root","textView":"View2301561964__textView","urlText":"View2301561964__urlText","suffix":"View2301561964__suffix"};
+export var classes = {"root":"View3403835407__root","textView":"View3403835407__textView","urlText":"View3403835407__urlText","suffix":"View3403835407__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_ = "EmptyStateBase2444871746";
+var _namespace_ = "EmptyStateBase3800901673";
 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":"EmptyStateBase2444871746__root"};
+export var classes = {"root":"EmptyStateBase3800901673__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_ = "EntityPagePlain3511634604";
+var _namespace_ = "EntityPagePlain2201780053";
 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":"EntityPagePlain3511634604__root"};
+export var classes = {"root":"EntityPagePlain2201780053__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPageFields/EntityPageCustomField.tsx

@@ -1,7 +1,8 @@
-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 { fieldRefHandle } from '@wix/patterns-fields';
 import { toValidationRules } from '../../state/buildEditableFieldColumns';
 
 export interface EntityPageCustomFieldProps {
@@ -14,6 +15,13 @@ 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"])';
+
 // 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 +49,38 @@ 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;
+      }
+      // The component's own control when it filled inputRef, otherwise
+      // whatever is focusable inside the wrapper. Resolved in one place so the
+      // focus path and the calls behind it cannot disagree.
+      const control = () =>
+        consumerRef.current ?? element.querySelector<HTMLElement>(FOCUSABLE);
+
+      registerRef(
+        fieldRefHandle(() => {
+          // Without a control from the component the field may be off screen
+          // with nothing to focus, so move to it before trying.
+          if (!consumerRef.current) {
+            // Not implemented in jsdom.
+            element.scrollIntoView?.({ block: 'center' });
+          }
+          control()?.focus?.();
+        }, control),
+      );
+    },
+    [registerRef],
+  );
+
   return (
     <FormField
       label={field.displayName}
@@ -49,13 +89,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_ = "Fade398040630";
+var _namespace_ = "Fade2261417060";
 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":"Fade398040630__root"};
+export var classes = {"root":"Fade2261417060__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};