@wix/patterns-fields 1.120.0 → 1.122.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield432414797";
+var _namespace_ = "formaudiofield4027494044";
 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":"formaudiofield432414797__root","addItem":"formaudiofield432414797__addItem","mediaTitle":"formaudiofield432414797__mediaTitle"};
+export var classes = {"root":"formaudiofield4027494044__root","addItem":"formaudiofield4027494044__addItem","mediaTitle":"formaudiofield4027494044__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

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

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_ = "cellcolorview988815373";
+var _namespace_ = "cellcolorview2844906545";
 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":"cellcolorview988815373__root","hashPrefix":"cellcolorview988815373__hashPrefix"};
+export var classes = {"root":"cellcolorview2844906545__root","hashPrefix":"cellcolorview2844906545__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_ = "colorview686569546";
+var _namespace_ = "colorview3797577136";
 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":"colorview686569546__root","view":"colorview686569546__view","fillPreview":"colorview686569546__fillPreview"};
+export var classes = {"root":"colorview3797577136__root","view":"colorview3797577136__view","fillPreview":"colorview3797577136__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -45,13 +45,19 @@ const _FormDateTime = (props: FormDateTimeProps) => {
     },
   });
 
+  const storedTimestamp = controller.field.value
+    ? new Date(controller.field.value).getTime()
+    : undefined;
+  // React Hook Form clones Date values during validation. Equal timestamps must
+  // keep the picker value stable so it does not overwrite the invalid draft.
   const date = useMemo(() => {
-    if (!controller.field.value) {
+    const hasValidStoredDate =
+      storedTimestamp !== undefined && !isNaN(storedTimestamp);
+    if (!hasValidStoredDate) {
       return undefined;
     }
-    const d = new Date(controller.field.value);
-    return isNaN(d.getTime()) ? undefined : d;
-  }, [controller.field.value]);
+    return new Date(storedTimestamp);
+  }, [storedTimestamp]);
 
   const [dateStatusMessage, setDateStatusMessage] = useState('');
   const [timeStatusMessage, setTimeStatusMessage] = useState('');

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog174274406";
+var _namespace_ = "deletedialog1667824872";
 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":"deletedialog174274406__root","layout":"deletedialog174274406__layout"};
+export var classes = {"root":"deletedialog1667824872__root","layout":"deletedialog1667824872__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_ = "formdocumentfield1829521563";
+var _namespace_ = "formdocumentfield3710844469";
 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":"formdocumentfield1829521563__root","viewWrapper":"formdocumentfield1829521563__viewWrapper","textWidth":"formdocumentfield1829521563__textWidth","documentLoader":"formdocumentfield1829521563__documentLoader","addDocument":"formdocumentfield1829521563__addDocument","addItemWrapper":"formdocumentfield1829521563__addItemWrapper"};
+export var classes = {"root":"formdocumentfield3710844469__root","viewWrapper":"formdocumentfield3710844469__viewWrapper","textWidth":"formdocumentfield3710844469__textWidth","documentLoader":"formdocumentfield3710844469__documentLoader","addDocument":"formdocumentfield3710844469__addDocument","addItemWrapper":"formdocumentfield3710844469__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_ = "exclamation387703155";
+var _namespace_ = "exclamation2387627807";
 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":"exclamation387703155__root","exclamation":"exclamation387703155__exclamation","actions":"exclamation387703155__actions","action":"exclamation387703155__action"};
+export var classes = {"root":"exclamation2387627807__root","exclamation":"exclamation2387627807__exclamation","actions":"exclamation2387627807__actions","action":"exclamation2387627807__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/field-validation-settings/field-validation-settings-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "fieldvalidationsettingsinput1510291432";
+var _namespace_ = "fieldvalidationsettingsinput1924831113";
 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":"fieldvalidationsettingsinput1510291432__root","specificValuesInput":"fieldvalidationsettingsinput1510291432__specificValuesInput"};
+export var classes = {"root":"fieldvalidationsettingsinput1924831113__root","specificValuesInput":"fieldvalidationsettingsinput1924831113__specificValuesInput"};
 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_ = "highlightedtext1928387876";
+var _namespace_ = "highlightedtext2926468661";
 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":"highlightedtext1928387876__root","substring":"highlightedtext1928387876__substring"};
-export var keyframes = {"highlighted":"highlightedtext1928387876__highlighted","highlighted-match":"highlightedtext1928387876__highlighted-match"}; 
+export var classes = {"root":"highlightedtext2926468661__root","substring":"highlightedtext2926468661__substring"};
+export var keyframes = {"highlighted":"highlightedtext2926468661__highlighted","highlighted-match":"highlightedtext2926468661__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_ = "thumbnailreplaceoverlay3913242486";
+var _namespace_ = "thumbnailreplaceoverlay3461143479";
 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":"thumbnailreplaceoverlay3913242486__root","icon":"thumbnailreplaceoverlay3913242486__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay3461143479__root","icon":"thumbnailreplaceoverlay3461143479__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_ = "cellmediaeditshell2937451287";
+var _namespace_ = "cellmediaeditshell1536153294";
 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":"cellmediaeditshell2937451287__root"};
+export var classes = {"root":"cellmediaeditshell1536153294__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_ = "pasteurlbutton3374436230";
+var _namespace_ = "pasteurlbutton1989210003";
 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":"pasteurlbutton3374436230__root","iconButtonTooltip":"pasteurlbutton3374436230__iconButtonTooltip","iconButton":"pasteurlbutton3374436230__iconButton"};
+export var classes = {"root":"pasteurlbutton1989210003__root","iconButtonTooltip":"pasteurlbutton1989210003__iconButtonTooltip","iconButton":"pasteurlbutton1989210003__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_ = "formmediagalleryfield2376465746";
+var _namespace_ = "formmediagalleryfield274880181";
 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":"formmediagalleryfield2376465746__root","container":"formmediagalleryfield2376465746__container","viewBox":"formmediagalleryfield2376465746__viewBox","addItemWrapper":"formmediagalleryfield2376465746__addItemWrapper","addItem":"formmediagalleryfield2376465746__addItem","overlay":"formmediagalleryfield2376465746__overlay","image":"formmediagalleryfield2376465746__image","previewImage":"formmediagalleryfield2376465746__previewImage","previewVideo":"formmediagalleryfield2376465746__previewVideo"};
+export var classes = {"root":"formmediagalleryfield274880181__root","container":"formmediagalleryfield274880181__container","viewBox":"formmediagalleryfield274880181__viewBox","addItemWrapper":"formmediagalleryfield274880181__addItemWrapper","addItem":"formmediagalleryfield274880181__addItem","overlay":"formmediagalleryfield274880181__overlay","image":"formmediagalleryfield274880181__image","previewImage":"formmediagalleryfield274880181__previewImage","previewVideo":"formmediagalleryfield274880181__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_ = "mediaimage2118127339";
+var _namespace_ = "mediaimage2270080892";
 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":"mediaimage2118127339__root"};
+export var classes = {"root":"mediaimage2270080892__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":"--mediaimage2118127339-from","to":"--mediaimage2118127339-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":"--mediaimage2270080892-from","to":"--mediaimage2270080892-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_ = "overlay2146945399";
+var _namespace_ = "overlay866889659";
 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":"overlay2146945399__root","iconOverlay":"overlay2146945399__iconOverlay"};
+export var classes = {"root":"overlay866889659__root","iconOverlay":"overlay866889659__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image-field/cell-media-image-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaimageedit1688844937";
+var _namespace_ = "cellmediaimageedit791185868";
 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":"cellmediaimageedit1688844937__root","view":"cellmediaimageedit1688844937__view","anchor":"cellmediaimageedit1688844937__anchor","anchorBox":"cellmediaimageedit1688844937__anchorBox","popoverContent":"cellmediaimageedit1688844937__popoverContent","image":"cellmediaimageedit1688844937__image","imageActions":"cellmediaimageedit1688844937__imageActions"};
+export var classes = {"root":"cellmediaimageedit791185868__root","view":"cellmediaimageedit791185868__view","anchor":"cellmediaimageedit791185868__anchor","anchorBox":"cellmediaimageedit791185868__anchorBox","popoverContent":"cellmediaimageedit791185868__popoverContent","image":"cellmediaimageedit791185868__image","imageActions":"cellmediaimageedit791185868__imageActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimageview1860419073";
+var _namespace_ = "mediaimageview2046673734";
 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":"mediaimageview1860419073__root","altTextPlaceholder":"mediaimageview1860419073__altTextPlaceholder"};
+export var classes = {"root":"mediaimageview2046673734__root","altTextPlaceholder":"mediaimageview2046673734__altTextPlaceholder"};
 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_ = "mediatag3673549508";
+var _namespace_ = "mediatag3898384478";
 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":"mediatag3673549508__root"};
+export var classes = {"root":"mediatag3898384478__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/cell-multi-document-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultidocumentedit1098704626";
+var _namespace_ = "cellmultidocumentedit1584152841";
 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":"cellmultidocumentedit1098704626__root","chipTrigger":"cellmultidocumentedit1098704626__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1584152841__root","chipTrigger":"cellmultidocumentedit1584152841__chipTrigger"};
 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_ = "formmultidocument52310980";
+var _namespace_ = "formmultidocument3781924209";
 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":"formmultidocument52310980__root","viewRoot":"formmultidocument52310980__viewRoot","singleViewWrapper":"formmultidocument52310980__singleViewWrapper","addDocumentButton":"formmultidocument52310980__addDocumentButton"};
+export var classes = {"root":"formmultidocument3781924209__root","viewRoot":"formmultidocument3781924209__viewRoot","singleViewWrapper":"formmultidocument3781924209__singleViewWrapper","addDocumentButton":"formmultidocument3781924209__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -16,6 +16,8 @@ export interface CellMultiReferenceInputHandle {
 export interface CellMultiReferenceInputProps {
   /** Dropdown options — already filtered/paginated by the caller. */
   items: CellMultiReferenceItem[];
+  /** Suppress the empty-state message while dropdown options are loading. */
+  loading?: boolean;
   /** Currently selected references, rendered as removable chips. */
   selectedItems: CellMultiReferenceItem[];
   /** Text shown in the search input. */
@@ -53,6 +55,7 @@ export const CellMultiReferenceInput = React.forwardRef<
   (
     {
       items,
+      loading,
       selectedItems,
       value,
       onChange,
@@ -200,7 +203,9 @@ export const CellMultiReferenceInput = React.forwardRef<
               ? t('auto-patterns.fields.select_placeholder')
               : ''
           }
-          emptyStateMessage={t('auto-patterns.fields.no_results_found')}
+          emptyStateMessage={
+            loading ? undefined : t('auto-patterns.fields.no_results_found')
+          }
           maxHeightPixels={ROW_HEIGHT * MAX_NUM_ROWS}
           infiniteScroll={infiniteScroll}
           hasMore={hasMore}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput1854264550";
+var _namespace_ = "cellreferenceinput1272561628";
 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":"cellreferenceinput1854264550__root","autocomplete":"cellreferenceinput1854264550__autocomplete"};
+export var classes = {"root":"cellreferenceinput1272561628__root","autocomplete":"cellreferenceinput1272561628__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -83,6 +83,7 @@ export const CellReferenceInput = React.forwardRef<
         ),
       [items, selectedItem?.id, t],
     );
+    const rootRef = useRef<HTMLDivElement>(null);
     const acRef = useRef<React.ComponentRef<typeof AutoComplete>>(null);
 
     React.useImperativeHandle(ref, () => ({
@@ -106,6 +107,16 @@ export const CellReferenceInput = React.forwardRef<
       hideOptions,
     });
 
+    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+      if (
+        event.relatedTarget instanceof Node &&
+        rootRef.current?.contains(event.relatedTarget)
+      ) {
+        return;
+      }
+      onBlur?.();
+    };
+
     const prefix =
       selectedItem && !value ? (
         <Input.Affix data-hook="reference-input-avatar-prefix">
@@ -120,6 +131,7 @@ export const CellReferenceInput = React.forwardRef<
       // Prevent EditableCell's row click/dblclick handlers from firing when
       // the user interacts with the input or dropdown.
       <div
+        ref={rootRef}
         className={st(classes.root)}
         onClick={(e) => e.stopPropagation()}
         onMouseDown={(e) => e.stopPropagation()}
@@ -134,7 +146,7 @@ export const CellReferenceInput = React.forwardRef<
           value={value}
           prefix={prefix}
           onChange={onChange}
-          onBlur={onBlur}
+          onBlur={handleBlur}
           onSelect={(wdsOption: { id: string | number }) => {
             const item = items.find((i) => i.id === String(wdsOption.id));
             if (item) {

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput4235613372";
+var _namespace_ = "richcontentdefaultvalueinput4183316190";
 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":"richcontentdefaultvalueinput4235613372__root","richContentEditorContainer":"richcontentdefaultvalueinput4235613372__richContentEditorContainer","editor":"richcontentdefaultvalueinput4235613372__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput4183316190__root","richContentEditorContainer":"richcontentdefaultvalueinput4183316190__richContentEditorContainer","editor":"richcontentdefaultvalueinput4183316190__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput3447936607";
+var _namespace_ = "richcontentforminput1125731069";
 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":"richcontentforminput3447936607__root","editor":"richcontentforminput3447936607__editor"};
+export var classes = {"root":"richcontentforminput1125731069__root","editor":"richcontentforminput1125731069__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

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

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal3596198256";
+var _namespace_ = "fullscreenmodal1461732388";
 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":"fullscreenmodal3596198256__root","modalContent":"fullscreenmodal3596198256__modalContent"};
+export var classes = {"root":"fullscreenmodal1461732388__root","modalContent":"fullscreenmodal1461732388__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "publishloader2370721853";
+var _namespace_ = "publishloader3487368423";
 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":"publishloader2370721853__root","publishLoader":"publishloader2370721853__publishLoader"};
+export var classes = {"root":"publishloader3487368423__root","publishLoader":"publishloader3487368423__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "togglefullscreenbutton2230225002";
+var _namespace_ = "togglefullscreenbutton2861801012";
 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":"togglefullscreenbutton2230225002__root"};
+export var classes = {"root":"togglefullscreenbutton2861801012__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};