@wix/patterns-fields 1.43.0 → 1.45.0

package/src/components/color-view/cell-color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview2794043851";
+var _namespace_ = "cellcolorview979474180";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellcolorview2794043851__root","hashPrefix":"cellcolorview2794043851__hashPrefix"};
+export var classes = {"root":"cellcolorview979474180__root","hashPrefix":"cellcolorview979474180__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview2165802700";
+var _namespace_ = "colorview3545679473";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"colorview2165802700__root","view":"colorview2165802700__view","fillPreview":"colorview2165802700__fillPreview"};
+export var classes = {"root":"colorview3545679473__root","view":"colorview3545679473__view","fillPreview":"colorview3545679473__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/date-input/form-date-input.tsx

@@ -5,6 +5,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps, BaseInputRef } from '../../types/base-input';
+import { useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 import {
   getDateWithoutTimezone,
@@ -16,6 +17,7 @@ export interface FormDateInputProps extends BaseInputProps<string | null> {}
 const _FormDateInput = (props: FormDateInputProps) => {
   const { field, dataHook, inputRef, formControl, data } = props;
   const { translate: t } = useWixPatternsContainer();
+  const { t: tFields } = useTranslations();
 
   const computeError = (
     value: string | null | undefined,
@@ -72,6 +74,7 @@ const _FormDateInput = (props: FormDateInputProps) => {
         }}
         dataHook={`date-${field.id}`}
         width="100%"
+        placeholderText={tFields('CMS.formDate.placeholder')}
         value={date}
         onChange={(newValue: Date) => {
           setDate(newValue);

package/src/components/datetime-input/form-date-time.tsx

@@ -11,6 +11,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps, BaseInputRef } from '../../types/base-input';
+import { useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 
 export interface FormDateTimeProps extends BaseInputProps<string | null> {}
@@ -18,6 +19,7 @@ export interface FormDateTimeProps extends BaseInputProps<string | null> {}
 const _FormDateTime = (props: FormDateTimeProps) => {
   const { field, dataHook, inputRef, formControl, data } = props;
   const { translate: t } = useWixPatternsContainer();
+  const { t: tFields } = useTranslations();
 
   const controller = useController({
     name: field?.id ?? '',
@@ -82,6 +84,7 @@ const _FormDateTime = (props: FormDateTimeProps) => {
                 internalRef?.state?.inputRef?.focus?.();
             }}
             width="100%"
+            placeholderText={tFields('CMS.formDate.placeholder')}
             value={date}
             onChange={() => {}}
             // onChange is triggered only when you have valid, non-empty value.
@@ -142,6 +145,8 @@ const _FormDateTime = (props: FormDateTimeProps) => {
               timeRef.current.focus = () => internalRef?.focus();
             }}
             dataHook={`datetime-time-${field.id}`}
+            placeholder={tFields('CMS.formTime.placeholder')}
+            invalidMessage={tFields('CMS.formTime.invalidMessage')}
             value={date ?? null}
             status={
               controller.fieldState.error || timeStatusMessage

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog2952496242";
+var _namespace_ = "deletedialog1134037405";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"deletedialog2952496242__root","layout":"deletedialog2952496242__layout"};
+export var classes = {"root":"deletedialog1134037405__root","layout":"deletedialog1134037405__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield3915235395";
+var _namespace_ = "formdocumentfield2943876585";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formdocumentfield3915235395__root","viewWrapper":"formdocumentfield3915235395__viewWrapper","textWidth":"formdocumentfield3915235395__textWidth","documentLoader":"formdocumentfield3915235395__documentLoader","addDocument":"formdocumentfield3915235395__addDocument","addItemWrapper":"formdocumentfield3915235395__addItemWrapper"};
+export var classes = {"root":"formdocumentfield2943876585__root","viewWrapper":"formdocumentfield2943876585__viewWrapper","textWidth":"formdocumentfield2943876585__textWidth","documentLoader":"formdocumentfield2943876585__documentLoader","addDocument":"formdocumentfield2943876585__addDocument","addItemWrapper":"formdocumentfield2943876585__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation2379678414";
+var _namespace_ = "exclamation3687848873";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"exclamation2379678414__root","exclamation":"exclamation2379678414__exclamation","actions":"exclamation2379678414__actions","action":"exclamation2379678414__action"};
+export var classes = {"root":"exclamation3687848873__root","exclamation":"exclamation3687848873__exclamation","actions":"exclamation3687848873__actions","action":"exclamation3687848873__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext4075710218";
+var _namespace_ = "highlightedtext2529282805";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext4075710218__root","substring":"highlightedtext4075710218__substring"};
-export var keyframes = {"highlighted":"highlightedtext4075710218__highlighted","highlighted-match":"highlightedtext4075710218__highlighted-match"}; 
+export var classes = {"root":"highlightedtext2529282805__root","substring":"highlightedtext2529282805__substring"};
+export var keyframes = {"highlighted":"highlightedtext2529282805__highlighted","highlighted-match":"highlightedtext2529282805__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay2372544504";
+var _namespace_ = "thumbnailreplaceoverlay284622346";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"thumbnailreplaceoverlay2372544504__root","icon":"thumbnailreplaceoverlay2372544504__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay284622346__root","icon":"thumbnailreplaceoverlay284622346__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/cell-media-edit-shell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaeditshell1777853969";
+var _namespace_ = "cellmediaeditshell523346723";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellmediaeditshell1777853969__root"};
+export var classes = {"root":"cellmediaeditshell523346723__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton2072625136";
+var _namespace_ = "pasteurlbutton2149771228";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"pasteurlbutton2072625136__root","iconButtonTooltip":"pasteurlbutton2072625136__iconButtonTooltip","iconButton":"pasteurlbutton2072625136__iconButton"};
+export var classes = {"root":"pasteurlbutton2149771228__root","iconButtonTooltip":"pasteurlbutton2149771228__iconButtonTooltip","iconButton":"pasteurlbutton2149771228__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield974616904";
+var _namespace_ = "formmediagalleryfield1207475211";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmediagalleryfield974616904__root","container":"formmediagalleryfield974616904__container","viewBox":"formmediagalleryfield974616904__viewBox","addItemWrapper":"formmediagalleryfield974616904__addItemWrapper","addItem":"formmediagalleryfield974616904__addItem","overlay":"formmediagalleryfield974616904__overlay","image":"formmediagalleryfield974616904__image","previewImage":"formmediagalleryfield974616904__previewImage","previewVideo":"formmediagalleryfield974616904__previewVideo"};
+export var classes = {"root":"formmediagalleryfield1207475211__root","container":"formmediagalleryfield1207475211__container","viewBox":"formmediagalleryfield1207475211__viewBox","addItemWrapper":"formmediagalleryfield1207475211__addItemWrapper","addItem":"formmediagalleryfield1207475211__addItem","overlay":"formmediagalleryfield1207475211__overlay","image":"formmediagalleryfield1207475211__image","previewImage":"formmediagalleryfield1207475211__previewImage","previewVideo":"formmediagalleryfield1207475211__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage3610275583";
+var _namespace_ = "mediaimage2910469169";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage3610275583__root"};
+export var classes = {"root":"mediaimage2910469169__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage3610275583-from","to":"--mediaimage3610275583-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage2910469169-from","to":"--mediaimage2910469169-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay1530441702";
+var _namespace_ = "overlay2277272089";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"overlay1530441702__root","iconOverlay":"overlay1530441702__iconOverlay"};
+export var classes = {"root":"overlay2277272089__root","iconOverlay":"overlay2277272089__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader3814445977";
+var _namespace_ = "medialoader4198600223";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"medialoader3814445977__root","loader":"medialoader3814445977__loader"};
+export var classes = {"root":"medialoader4198600223__root","loader":"medialoader4198600223__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "mediatag3178403637";
+var _namespace_ = "mediatag2064108236";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediatag3178403637__root"};
+export var classes = {"root":"mediatag2064108236__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument1507203159";
+var _namespace_ = "formmultidocument3816576910";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmultidocument1507203159__root","viewRoot":"formmultidocument1507203159__viewRoot","singleViewWrapper":"formmultidocument1507203159__singleViewWrapper","addDocumentButton":"formmultidocument1507203159__addDocumentButton"};
+export var classes = {"root":"formmultidocument3816576910__root","viewRoot":"formmultidocument3816576910__viewRoot","singleViewWrapper":"formmultidocument3816576910__singleViewWrapper","addDocumentButton":"formmultidocument3816576910__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-multi-reference-input.st.css

@@ -0,0 +1,20 @@
+@property st-global(--wds-input-border-color);
+@property st-global(--wds-input-border-color-hover);
+@property st-global(--wds-input-border-color-focus);
+@property st-global(--wds-input-background-fill-default);
+@property st-global(--wds-input-background-fill-hover);
+@property st-global(--wds-input-shadow-focus-standard);
+
+/* Drop the input border / focus ring / fill so the MultiSelect sits inline
+   within the cell. Same WDS custom-property approach the singular reference
+   input uses (no !important, no class targeting). */
+.root {
+  width: 100%;
+  box-sizing: border-box;
+  --wds-input-border-color: transparent;
+  --wds-input-border-color-hover: transparent;
+  --wds-input-border-color-focus: transparent;
+  --wds-input-background-fill-default: transparent;
+  --wds-input-background-fill-hover: transparent;
+  --wds-input-shadow-focus-standard: 0 0 0 0 transparent;
+}

package/src/components/reference/cell-multi-reference-input.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "cellmultireferenceinput1356832847";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"cellmultireferenceinput1356832847__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-input-border-color":"--wds-input-border-color","wds-input-border-color-hover":"--wds-input-border-color-hover","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-input-background-fill-default":"--wds-input-background-fill-default","wds-input-background-fill-hover":"--wds-input-background-fill-hover","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard"}; 
+
+
+
+

package/src/components/reference/cell-multi-reference-input.tsx

@@ -0,0 +1,243 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  Divider,
+  ListItemAction,
+  MultiSelect,
+  listItemSelectBuilder,
+} from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { ReferenceAvatar } from './reference-avatar';
+import type { CellMultiReferenceItem } from './cell-multi-reference-view';
+import { st, classes } from './cell-multi-reference-input.st.css.js';
+
+export type { CellMultiReferenceItem };
+
+export interface CellMultiReferenceInputHandle {
+  focus: () => void;
+  hideOptions: () => void;
+}
+
+export interface CellMultiReferenceInputProps {
+  /** Dropdown options — already filtered/paginated by the caller. */
+  items: CellMultiReferenceItem[];
+  /** Currently selected references, rendered as removable chips. */
+  selectedItems: CellMultiReferenceItem[];
+  /** Text shown in the search input. */
+  value: string;
+  onChange: (value: string) => void;
+  onSelect: (item: CellMultiReferenceItem) => void;
+  onRemoveTag: (id: string) => void;
+  onBlur?: () => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  infiniteScroll?: boolean;
+  hasMore?: boolean;
+  loadMore?: () => void;
+  fixedFooter?: React.ReactNode;
+  /** When provided, renders an "Open Collection" action at the bottom of the dropdown. */
+  onOpenCollection?: () => void;
+  /** Open dropdown immediately on mount (single-click / type-to-edit triggers). */
+  autoOpen?: boolean;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+  dataHook?: string;
+}
+
+const ROW_HEIGHT = 30;
+const MAX_NUM_ROWS = 7;
+
+interface MultiSelectHandle {
+  focus?: () => void;
+  showOptions?: () => void;
+  hideOptions?: () => void;
+}
+
+export const CellMultiReferenceInput = React.forwardRef<
+  CellMultiReferenceInputHandle,
+  CellMultiReferenceInputProps
+>(
+  (
+    {
+      items,
+      selectedItems,
+      value,
+      onChange,
+      onSelect,
+      onRemoveTag,
+      onBlur,
+      onKeyDown,
+      infiniteScroll,
+      hasMore,
+      loadMore,
+      fixedFooter,
+      onOpenCollection,
+      autoOpen,
+      inputRef,
+      dataHook,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslations();
+    const msRef = useRef<MultiSelectHandle | null>(null);
+    const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      focus: () => msRef.current?.focus?.(),
+      hideOptions: () => msRef.current?.hideOptions?.(),
+    }));
+
+    useEffect(() => {
+      if (autoOpen) {
+        msRef.current?.focus?.();
+        requestAnimationFrame(() => msRef.current?.showOptions?.());
+      }
+      // Intentionally run only on mount
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Expose the MultiSelect input element to the framework's inputRef so
+    // type-to-edit + framework-level focus management work.
+    useEffect(() => {
+      if (!inputRef) {
+        return;
+      }
+      const el = wrapperRef.current?.querySelector<HTMLInputElement>('input');
+      if (el) {
+        inputRef.current = { focus: () => el.focus() };
+      }
+    }, [inputRef]);
+
+    const untitled = t('patterns-fields.reference.untitled');
+
+    const tags = useMemo(
+      () =>
+        selectedItems.map((item) => ({
+          id: item.id,
+          dataHook: 'multi-reference-edit-tag',
+          label: item.name || untitled,
+          thumb: (
+            <ReferenceAvatar
+              name={item.name || untitled}
+              image={item.image}
+              size="size18"
+            />
+          ),
+        })),
+      [selectedItems, untitled],
+    );
+
+    const options = useMemo(
+      () =>
+        items.map((item) =>
+          listItemSelectBuilder({
+            id: item.id,
+            title: item.name || untitled,
+            label: item.name || untitled,
+            prefix: (
+              <ReferenceAvatar
+                name={item.name || untitled}
+                image={item.image}
+              />
+            ),
+            size: 'small',
+            ellipsis: true,
+          }),
+        ),
+      [items, untitled],
+    );
+
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),
+      [onChange],
+    );
+
+    const handleSelect = useCallback(
+      (option: { id: string | number }) => {
+        const item = items.find((i) => i.id === String(option.id));
+        if (item) {
+          onSelect(item);
+        }
+      },
+      [items, onSelect],
+    );
+
+    const handleRemoveTag = useCallback(
+      (id: string | number) => onRemoveTag(String(id)),
+      [onRemoveTag],
+    );
+
+    const combinedFooter = useMemo(() => {
+      if (!fixedFooter && !onOpenCollection) {
+        return undefined;
+      }
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <div onMouseDown={(e) => e.preventDefault()}>
+          {fixedFooter}
+          {onOpenCollection && <Divider />}
+          {onOpenCollection && (
+            <ListItemAction
+              title={t('patterns-fields.reference.open_collection')}
+              size="small"
+              onClick={() => {
+                msRef.current?.hideOptions?.();
+                onOpenCollection();
+              }}
+              dataHook="reference-open-collection"
+            />
+          )}
+        </div>
+      );
+    }, [fixedFooter, onOpenCollection, t]);
+
+    return (
+      // Prevent EditableCell's row click/dblclick handlers from firing when
+      // the user interacts with the input or dropdown.
+      <div
+        ref={wrapperRef}
+        className={st(classes.root)}
+        data-hook={dataHook}
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+        // Capture phase so keys (e.g. Escape) can be intercepted before the
+        // WDS MultiSelect handles and stops them on the inner input.
+        onKeyDownCapture={onKeyDown}
+      >
+        <MultiSelect
+          ref={(instance: MultiSelectHandle | null) => {
+            msRef.current = instance;
+          }}
+          dataHook="multi-reference-input-multiselect"
+          size="small"
+          border="none"
+          tags={tags}
+          options={options}
+          predicate={() => true}
+          value={value}
+          onChange={handleChange}
+          onSelect={handleSelect}
+          onRemoveTag={handleRemoveTag}
+          onBlur={onBlur}
+          placeholder={
+            selectedItems.length === 0
+              ? t('auto-patterns.fields.select_placeholder')
+              : ''
+          }
+          emptyStateMessage={t('auto-patterns.fields.no_results_found')}
+          maxHeightPixels={ROW_HEIGHT * MAX_NUM_ROWS}
+          infiniteScroll={infiniteScroll}
+          hasMore={hasMore}
+          loadMore={loadMore}
+          fixedFooter={combinedFooter}
+          popoverProps={{
+            appendTo: 'window',
+            flip: true,
+            fixed: false,
+            placement: 'bottom-start',
+            zIndex: 9999,
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+CellMultiReferenceInput.displayName = 'CellMultiReferenceInput';