@wix/patterns-fields 1.55.0 → 1.59.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield3852970928";
+var _namespace_ = "formdocumentfield4149950269";
 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":"formdocumentfield3852970928__root","viewWrapper":"formdocumentfield3852970928__viewWrapper","textWidth":"formdocumentfield3852970928__textWidth","documentLoader":"formdocumentfield3852970928__documentLoader","addDocument":"formdocumentfield3852970928__addDocument","addItemWrapper":"formdocumentfield3852970928__addItemWrapper"};
+export var classes = {"root":"formdocumentfield4149950269__root","viewWrapper":"formdocumentfield4149950269__viewWrapper","textWidth":"formdocumentfield4149950269__textWidth","documentLoader":"formdocumentfield4149950269__documentLoader","addDocument":"formdocumentfield4149950269__addDocument","addItemWrapper":"formdocumentfield4149950269__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_ = "exclamation583468494";
+var _namespace_ = "exclamation1041069287";
 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":"exclamation583468494__root","exclamation":"exclamation583468494__exclamation","actions":"exclamation583468494__actions","action":"exclamation583468494__action"};
+export var classes = {"root":"exclamation1041069287__root","exclamation":"exclamation1041069287__exclamation","actions":"exclamation1041069287__actions","action":"exclamation1041069287__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/exclamation/exclamation.tsx

@@ -6,7 +6,7 @@ import { Box, Tooltip } from '@wix/design-system';
 import {
   StatusAlertFilled,
   StatusWarningFilled,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 
 import { classes, st } from './exclamation.st.css.js';
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext3822177940";
+var _namespace_ = "highlightedtext2258718189";
 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":"highlightedtext3822177940__root","substring":"highlightedtext3822177940__substring"};
-export var keyframes = {"highlighted":"highlightedtext3822177940__highlighted","highlighted-match":"highlightedtext3822177940__highlighted-match"}; 
+export var classes = {"root":"highlightedtext2258718189__root","substring":"highlightedtext2258718189__substring"};
+export var keyframes = {"highlighted":"highlightedtext2258718189__highlighted","highlighted-match":"highlightedtext2258718189__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/cell-image-edit.tsx

@@ -7,7 +7,7 @@ import {
   LinkSmall,
   MoreSmall,
   Replace,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { MEDIA_TYPES } from '../../utils/media-utils';
 import { useTranslations } from '../../hooks';
 import {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay1273774130";
+var _namespace_ = "thumbnailreplaceoverlay3474813363";
 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":"thumbnailreplaceoverlay1273774130__root","icon":"thumbnailreplaceoverlay1273774130__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay3474813363__root","icon":"thumbnailreplaceoverlay3474813363__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/image/thumbnail-replace-overlay.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Replace } from '@wix/wix-ui-icons-common';
+import { Replace } from '@wix/wix-ui-icons-common/lazy';
 import { classes } from './thumbnail-replace-overlay.st.css.js';
 
 export const ThumbnailReplaceOverlay: React.FC = () => (

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_ = "cellmediaeditshell1403338845";
+var _namespace_ = "cellmediaeditshell3322302244";
 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":"cellmediaeditshell1403338845__root"};
+export var classes = {"root":"cellmediaeditshell3322302244__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_ = "pasteurlbutton970421747";
+var _namespace_ = "pasteurlbutton3949457792";
 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":"pasteurlbutton970421747__root","iconButtonTooltip":"pasteurlbutton970421747__iconButtonTooltip","iconButton":"pasteurlbutton970421747__iconButton"};
+export var classes = {"root":"pasteurlbutton3949457792__root","iconButtonTooltip":"pasteurlbutton3949457792__iconButtonTooltip","iconButton":"pasteurlbutton3949457792__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/cell-media-gallery-edit.tsx

@@ -12,7 +12,7 @@ import {
   Refresh,
   Delete,
   Maximize,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { files } from '@wix/media';
 import {
   mediaURItoImageURL,

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_ = "formmediagalleryfield3678400044";
+var _namespace_ = "formmediagalleryfield1376199663";
 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":"formmediagalleryfield3678400044__root","container":"formmediagalleryfield3678400044__container","viewBox":"formmediagalleryfield3678400044__viewBox","addItemWrapper":"formmediagalleryfield3678400044__addItemWrapper","addItem":"formmediagalleryfield3678400044__addItem","overlay":"formmediagalleryfield3678400044__overlay","image":"formmediagalleryfield3678400044__image","previewImage":"formmediagalleryfield3678400044__previewImage","previewVideo":"formmediagalleryfield3678400044__previewVideo"};
+export var classes = {"root":"formmediagalleryfield1376199663__root","container":"formmediagalleryfield1376199663__container","viewBox":"formmediagalleryfield1376199663__viewBox","addItemWrapper":"formmediagalleryfield1376199663__addItemWrapper","addItem":"formmediagalleryfield1376199663__addItem","overlay":"formmediagalleryfield1376199663__overlay","image":"formmediagalleryfield1376199663__image","previewImage":"formmediagalleryfield1376199663__previewImage","previewVideo":"formmediagalleryfield1376199663__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "mediaimage3529799572";
+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":"mediaimage3529799572__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":"--mediaimage3529799572-from","to":"--mediaimage3529799572-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_ = "overlay435340716";
+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":"overlay435340716__root","iconOverlay":"overlay435340716__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_ = "medialoader4114582661";
+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":"medialoader4114582661__root","loader":"medialoader4114582661__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_ = "mediatag2046061156";
+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":"mediatag2046061156__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_ = "cellmultidocumentedit152804971";
+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":"cellmultidocumentedit152804971__root","chipTrigger":"cellmultidocumentedit152804971__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_ = "formmultidocument1673269748";
+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":"formmultidocument1673269748__root","viewRoot":"formmultidocument1673269748__viewRoot","singleViewWrapper":"formmultidocument1673269748__singleViewWrapper","addDocumentButton":"formmultidocument1673269748__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_ = "cellmultireferenceinput1139021014";
+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":"cellmultireferenceinput1139021014__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_ = "cellreferenceinput3914857990";
+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":"cellreferenceinput3914857990__root","autocomplete":"cellreferenceinput3914857990__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 ? (