@wix/patterns-fields 1.58.0 → 1.59.0

package/src/components/media-gallery/form-media-gallery-field.tsx

@@ -12,7 +12,7 @@ import {
   Refresh as RefreshIcon,
   Delete as DeleteIcon,
   Maximize as MaximizeIcon,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import type { WixCodeGalleryItem } from '../../auto-field-types';
 import { useTranslations } from '../../hooks';
 import { executeDownloading } from '../../utils/media-utils';

package/src/components/media-gallery/media-gallery-dialog/add-media-button.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Loader } from '@wix/design-system';
-import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common/lazy';
 import { useTranslations } from '../../../hooks';
 import { useAddMediaControl } from './hooks';
 import type { OrganizeMediaItem } from './types';

package/src/components/media-gallery/media-gallery-dialog/no-items-view.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EmptyState, Box, TextButton, Loader } from '@wix/design-system';
-import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common/lazy';
 import { useTranslations } from '../../../hooks';
 import { useAddMediaControl } from './hooks';
 import type { OrganizeMediaItem } from './types';

package/src/components/media-gallery/media-preview-modal.tsx

@@ -15,7 +15,7 @@ import {
   Replace,
   DownloadImport as Download,
   Delete,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import {
   getMediaTitle,
   isMediaVideoURI,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage3652063272";
+var _namespace_ = "mediaimage2799810137";
 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":"mediaimage3652063272__root"};
+export var classes = {"root":"mediaimage2799810137__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":"--mediaimage3652063272-from","to":"--mediaimage3652063272-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":"--mediaimage2799810137-from","to":"--mediaimage2799810137-to"}; 
 
 
 

package/src/components/media-image/overlays/custom-url-overlay.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link as LinkIcon } from '@wix/wix-ui-icons-common';
+import { Link as LinkIcon } from '@wix/wix-ui-icons-common/lazy';
 import { st, classes } from './overlay.st.css.js';
 import type { IconOverlayProps } from './types';
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay4101971171";
+var _namespace_ = "overlay3442142441";
 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":"overlay4101971171__root","iconOverlay":"overlay4101971171__iconOverlay"};
+export var classes = {"root":"overlay3442142441__root","iconOverlay":"overlay3442142441__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image/overlays/video-indicator-overlay.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VideoCameraSmall } from '@wix/wix-ui-icons-common';
+import { VideoCameraSmall } from '@wix/wix-ui-icons-common/lazy';
 
 import { st, classes } from './overlay.st.css.js';
 import type { IconOverlayProps } from './types';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1984150417";
+var _namespace_ = "medialoader3986141410";
 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":"medialoader1984150417__root","loader":"medialoader1984150417__loader"};
+export var classes = {"root":"medialoader3986141410__root","loader":"medialoader3986141410__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_ = "mediatag3951729463";
+var _namespace_ = "mediatag2312565667";
 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":"mediatag3951729463__root"};
+export var classes = {"root":"mediatag2312565667__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_ = "cellmultidocumentedit707944317";
+var _namespace_ = "cellmultidocumentedit1648801023";
 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":"cellmultidocumentedit707944317__root","chipTrigger":"cellmultidocumentedit707944317__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1648801023__root","chipTrigger":"cellmultidocumentedit1648801023__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/cell-multi-document-edit.tsx

@@ -17,7 +17,7 @@ import {
   LinkSmall,
   MoreSmall,
   Replace,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 import { getMediaTitle, MEDIA_TYPES } from '../../utils/media-utils';

package/src/components/multi-document/cell-multi-document-view.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, TagList } from '@wix/design-system';
-import { DocumentSmall } from '@wix/wix-ui-icons-common';
+import { DocumentSmall } from '@wix/wix-ui-icons-common/lazy';
 
 import { getMediaTitle } from '../../utils/media-utils';
 

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_ = "formmultidocument3225286195";
+var _namespace_ = "formmultidocument462168404";
 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":"formmultidocument3225286195__root","viewRoot":"formmultidocument3225286195__viewRoot","singleViewWrapper":"formmultidocument3225286195__singleViewWrapper","addDocumentButton":"formmultidocument3225286195__addDocumentButton"};
+export var classes = {"root":"formmultidocument462168404__root","viewRoot":"formmultidocument462168404__viewRoot","singleViewWrapper":"formmultidocument462168404__singleViewWrapper","addDocumentButton":"formmultidocument462168404__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_ = "cellmultireferenceinput1040831334";
+var _namespace_ = "cellmultireferenceinput838814131";
 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":"cellmultireferenceinput1040831334__root"};
+export var classes = {"root":"cellmultireferenceinput838814131__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,12 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import {
-  Divider,
-  ListItemAction,
-  MultiSelect,
-  listItemSelectBuilder,
-} from '@wix/design-system';
+import { MultiSelect, listItemSelectBuilder } from '@wix/design-system';
 import { useTranslations } from '../../hooks/use-translations';
 import { ReferenceAvatar } from './reference-avatar';
+import { useReferenceDropdownFooter } from './reference-dropdown-footer';
 import type { CellMultiReferenceItem } from './cell-multi-reference-view';
 import { st, classes } from './cell-multi-reference-input.st.css.js';
 
@@ -164,29 +160,12 @@ export const CellMultiReferenceInput = React.forwardRef<
       [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]);
+    const hideOptions = useCallback(() => msRef.current?.hideOptions?.(), []);
+    const combinedFooter = useReferenceDropdownFooter({
+      fixedFooter,
+      onOpenCollection,
+      hideOptions,
+    });
 
     return (
       // Prevent EditableCell's row click/dblclick handlers from firing when

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput1701177941";
+var _namespace_ = "cellreferenceinput3359134559";
 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":"cellreferenceinput1701177941__root","autocomplete":"cellreferenceinput1701177941__autocomplete"};
+export var classes = {"root":"cellreferenceinput3359134559__root","autocomplete":"cellreferenceinput3359134559__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,13 +1,8 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import {
-  AutoComplete,
-  Divider,
-  Input,
-  ListItemAction,
-  listItemSelectBuilder,
-} from '@wix/design-system';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { AutoComplete, Input, listItemSelectBuilder } from '@wix/design-system';
 import { useTranslations } from '../../hooks/use-translations';
 import { ReferenceAvatar } from './reference-avatar';
+import { useReferenceDropdownFooter } from './reference-dropdown-footer';
 import { st, classes } from './cell-reference-input.st.css.js';
 
 export interface CellReferenceItem {
@@ -104,29 +99,12 @@ export const CellReferenceInput = React.forwardRef<
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    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={() => {
-                acRef.current?.hideOptions?.();
-                onOpenCollection();
-              }}
-              dataHook="reference-open-collection"
-            />
-          )}
-        </div>
-      );
-    }, [fixedFooter, onOpenCollection, t]);
+    const hideOptions = useCallback(() => acRef.current?.hideOptions?.(), []);
+    const combinedFooter = useReferenceDropdownFooter({
+      fixedFooter,
+      onOpenCollection,
+      hideOptions,
+    });
 
     const prefix =
       selectedItem && !value ? (

package/src/components/reference/form-multi-reference.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import {
   Box,
   FormField,
@@ -14,6 +14,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../types/base-input';
 import { useTranslations } from '../../hooks/use-translations';
 import { ReferenceAvatar } from './reference-avatar';
+import { useReferenceDropdownFooter } from './reference-dropdown-footer';
 import type { FormReferenceItem } from './form-reference';
 
 /** Selected references, each stored as `{ [idField], [displayField] }`. */
@@ -39,10 +40,15 @@ export interface FormMultiReferenceProps
   hasMore?: boolean;
   loadMore?: () => void;
   fixedFooter?: React.ReactNode;
+  /** When set, renders an "Open Collection" action at the bottom of the dropdown. */
   onOpenCollection?: () => void;
   placeholder?: string;
 }
 
+interface MultiSelectHandle {
+  hideOptions?: () => void;
+}
+
 const _FormMultiReference = (props: FormMultiReferenceProps) => {
   const {
     field,
@@ -59,11 +65,13 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
     hasMore,
     loadMore,
     fixedFooter,
+    onOpenCollection,
     placeholder,
   } = props;
 
   const { translate: t } = useWixPatternsContainer();
   const { t: tf } = useTranslations();
+  const msRef = useRef<MultiSelectHandle | null>(null);
 
   const controller = useController({
     name: field.id,
@@ -89,7 +97,11 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
     () =>
       selectedValues.map((item) => {
         const selectedId = item[idField] as string;
-        const label = item[displayField] as string;
+        // A referenced item with no value in the display field still needs a
+        // readable tag — the dropdown options use the same fallback.
+        const label =
+          (item[displayField] as string) ||
+          tf('patterns-fields.reference.untitled');
         const image = imageField
           ? (item[imageField] as string | undefined)
           : undefined;
@@ -112,7 +124,7 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
           dataHook: `multi-reference-tag-${field.id}-${selectedId}`,
         };
       }),
-    [selectedValues, idField, displayField, imageField, field.id],
+    [selectedValues, idField, displayField, imageField, field.id, tf],
   );
 
   const options = useMemo(
@@ -176,6 +188,13 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
     onClearSearch?.();
   }, [onClearSearch]);
 
+  const hideOptions = useCallback(() => msRef.current?.hideOptions?.(), []);
+  const combinedFooter = useReferenceDropdownFooter({
+    fixedFooter,
+    onOpenCollection,
+    hideOptions,
+  });
+
   return (
     <FormField
       label={field.displayName}
@@ -185,6 +204,9 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
       dataHook={dataHook}
     >
       <MultiSelect
+        ref={(instance: MultiSelectHandle | null) => {
+          msRef.current = instance;
+        }}
         placeholder={
           placeholder ?? tf('auto-patterns.fields.select_placeholder')
         }
@@ -202,7 +224,7 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
         infiniteScroll={!!loadMore}
         hasMore={hasMore}
         loadMore={loadMore}
-        fixedFooter={fixedFooter}
+        fixedFooter={combinedFooter}
         dataHook={`multi-reference-input-${field.id}`}
       />
     </FormField>

package/src/components/reference/form-reference.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import {
   AutoComplete,
   FormField,
@@ -13,6 +13,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../types/base-input';
 import { useTranslations } from '../../hooks/use-translations';
 import { ReferenceAvatar } from './reference-avatar';
+import { useReferenceDropdownFooter } from './reference-dropdown-footer';
 
 export interface FormReferenceItem {
   id: string;
@@ -42,6 +43,7 @@ export interface FormReferenceProps extends BaseInputProps<FormReferenceValue> {
   hasMore?: boolean;
   loadMore?: () => void;
   fixedFooter?: React.ReactNode;
+  /** When set, renders an "Open Collection" action at the bottom of the dropdown. */
   onOpenCollection?: () => void;
   placeholder?: string;
 }
@@ -62,11 +64,13 @@ const _FormReference = (props: FormReferenceProps) => {
     hasMore,
     loadMore,
     fixedFooter,
+    onOpenCollection,
     placeholder,
   } = props;
 
   const { translate: t } = useWixPatternsContainer();
   const { t: tf } = useTranslations();
+  const acRef = useRef<React.ComponentRef<typeof AutoComplete> | null>(null);
 
   const controller = useController({
     name: field.id,
@@ -84,10 +88,18 @@ const _FormReference = (props: FormReferenceProps) => {
 
   const selectedValue = controller.field.value as FormReferenceValue;
   const selectedDisplayValue = (selectedValue?.[displayField] as string) || '';
-  const displayValue = searchValue || selectedDisplayValue;
+  // A reference whose label is empty (the referenced item has no value in the
+  // display field) still has to look picked — an empty input reads as "nothing
+  // happened". Same fallback the options use.
+  const selectedLabel =
+    selectedDisplayValue ||
+    (selectedValue ? tf('patterns-fields.reference.untitled') : '');
+  const displayValue = searchValue || selectedLabel;
+  const selectedId = selectedValue?.[idField]
+    ? String(selectedValue[idField])
+    : undefined;
 
   const selectedImage = useMemo(() => {
-    const selectedId = selectedValue?.[idField];
     if (!selectedId) {
       return undefined;
     }
@@ -98,7 +110,7 @@ const _FormReference = (props: FormReferenceProps) => {
     return imageField
       ? (selectedValue?.[imageField] as string | undefined)
       : undefined;
-  }, [selectedValue, idField, imageField, items]);
+  }, [selectedValue, selectedId, imageField, items]);
 
   const options = useMemo(
     () =>
@@ -113,9 +125,9 @@ const _FormReference = (props: FormReferenceProps) => {
   );
 
   const selectedPrefix =
-    selectedDisplayValue && !searchValue ? (
+    selectedLabel && !searchValue ? (
       <Input.Affix>
-        <ReferenceAvatar name={selectedDisplayValue} image={selectedImage} />
+        <ReferenceAvatar name={selectedLabel} image={selectedImage} />
       </Input.Affix>
     ) : undefined;
 
@@ -150,6 +162,13 @@ const _FormReference = (props: FormReferenceProps) => {
     onClearSearch?.();
   }, [onClearSearch]);
 
+  const hideOptions = useCallback(() => acRef.current?.hideOptions?.(), []);
+  const combinedFooter = useReferenceDropdownFooter({
+    fixedFooter,
+    onOpenCollection,
+    hideOptions,
+  });
+
   return (
     <FormField
       label={field.displayName}
@@ -159,11 +178,17 @@ const _FormReference = (props: FormReferenceProps) => {
       dataHook={dataHook}
     >
       <AutoComplete
+        ref={acRef}
         placeholder={
           placeholder ?? tf('auto-patterns.fields.select_placeholder')
         }
         options={options}
         value={displayValue}
+        // Without this the dropdown tracks its own picks only, so a value that
+        // came from the form (a loaded entity, or a re-opened dropdown) shows no
+        // selected row. `selected` on listItemSelectBuilder does not do this —
+        // the builder drops it.
+        selectedId={selectedId}
         prefix={selectedPrefix}
         onChange={handleChange}
         onSelect={handleSelect}
@@ -173,7 +198,7 @@ const _FormReference = (props: FormReferenceProps) => {
         infiniteScroll={!!loadMore}
         hasMore={hasMore}
         loadMore={loadMore}
-        fixedFooter={fixedFooter}
+        fixedFooter={combinedFooter}
         // Hand the input to react-hook-form so shouldFocusError scrolls to +
         // focuses this field when it blocks save.
         inputRef={controller.field.ref}

package/src/components/reference/reference-dropdown-footer.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { Divider, ListItemAction } from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+
+export interface ReferenceDropdownFooterParams {
+  /** Caller-supplied footer content (loader / empty state / error state). */
+  fixedFooter?: React.ReactNode;
+  /** When set, an "Open Collection" action is appended below the footer. */
+  onOpenCollection?: () => void;
+  /** Closes the dropdown before navigating to the referenced collection. */
+  hideOptions?: () => void;
+}
+
+/**
+ * Footer for a reference dropdown: the caller's content plus an "Open
+ * Collection" action. Returns `undefined` when there is nothing to show, so the
+ * dropdown renders no footer at all.
+ */
+export function useReferenceDropdownFooter({
+  fixedFooter,
+  onOpenCollection,
+  hideOptions,
+}: ReferenceDropdownFooterParams): React.ReactNode | undefined {
+  const { t } = useTranslations();
+
+  return useMemo(() => {
+    if (!fixedFooter && !onOpenCollection) {
+      return undefined;
+    }
+    return (
+      // Pressing inside the footer must not blur the input — that would close
+      // the dropdown before the click lands.
+      // 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={() => {
+              hideOptions?.();
+              onOpenCollection();
+            }}
+            dataHook="reference-open-collection"
+          />
+        )}
+      </div>
+    );
+  }, [fixedFooter, onOpenCollection, hideOptions, t]);
+}

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_ = "richcontentdefaultvalueinput443326018";
+var _namespace_ = "richcontentdefaultvalueinput927131759";
 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":"richcontentdefaultvalueinput443326018__root","richContentEditorContainer":"richcontentdefaultvalueinput443326018__richContentEditorContainer","editor":"richcontentdefaultvalueinput443326018__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput927131759__root","richContentEditorContainer":"richcontentdefaultvalueinput927131759__richContentEditorContainer","editor":"richcontentdefaultvalueinput927131759__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_ = "richcontentforminput3334825677";
+var _namespace_ = "richcontentforminput2279180603";
 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":"richcontentforminput3334825677__root","editor":"richcontentforminput3334825677__editor"};
+export var classes = {"root":"richcontentforminput2279180603__root","editor":"richcontentforminput2279180603__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_ = "richcontentformreadonlyinput2425623005";
+var _namespace_ = "richcontentformreadonlyinput4128499448";
 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":"richcontentformreadonlyinput2425623005__root"};
+export var classes = {"root":"richcontentformreadonlyinput4128499448__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};