@wix/patterns-fields 1.58.0 → 1.60.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview353989494";
+var _namespace_ = "colorview3478795106";
 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":"colorview353989494__root","view":"colorview353989494__view","fillPreview":"colorview353989494__fillPreview"};
+export var classes = {"root":"colorview3478795106__root","view":"colorview3478795106__view","fillPreview":"colorview3478795106__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/date-input/date-utils.ts

@@ -1,8 +1,25 @@
-export const getDateWithoutTimezone = (date: Date | string) =>
-  new Date(new Date(date).toISOString().slice(0, -1));
+// A stored value that isn't a date (a mistyped field, a value written by
+// another client) must not take the page down: `toISOString` throws on an
+// unparsable date, and these run during render.
+const parseDate = (date: Date | string | number): Date | undefined => {
+  const parsed = new Date(date);
+  return Number.isNaN(parsed.getTime()) ? undefined : parsed;
+};
+
+export const getDateWithoutTimezone = (
+  date: Date | string,
+): Date | undefined => {
+  const parsed = parseDate(date);
+  return parsed && new Date(parsed.toISOString().slice(0, -1));
+};
 
-export const getISODateStringWithFixedTimezone = (date: Date | string) => {
-  const _date = new Date(date);
+export const getISODateStringWithFixedTimezone = (
+  date: Date | string,
+): string | undefined => {
+  const _date = parseDate(date);
+  if (!_date) {
+    return undefined;
+  }
   const userTimezoneOffset = _date.getTimezoneOffset() * 60000;
   return new Date(_date.getTime() - userTimezoneOffset)
     .toISOString()

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

@@ -47,13 +47,13 @@ const _FormDateInput = (props: FormDateInputProps) => {
     },
   });
 
+  // A stored value that isn't a date leaves the picker empty instead of
+  // throwing out of render.
   const [date, setDate] = useState<Date | undefined>(() => {
-    if (controller.field.value) {
-      return getDateWithoutTimezone(
-        getISODateStringWithFixedTimezone(controller.field.value),
-      );
-    }
-    return undefined;
+    const iso = controller.field.value
+      ? getISODateStringWithFixedTimezone(controller.field.value)
+      : undefined;
+    return iso ? getDateWithoutTimezone(iso) : undefined;
   });
 
   const ref = useRef<BaseInputRef>({});
@@ -83,12 +83,10 @@ const _FormDateInput = (props: FormDateInputProps) => {
         value={date}
         onChange={(newValue: Date) => {
           setDate(newValue);
-          if (newValue) {
-            const formattedDate = getISODateStringWithFixedTimezone(newValue);
-            controller.field.onChange(formattedDate.split('T')[0]);
-          } else {
-            controller.field.onChange(null);
-          }
+          const formattedDate = newValue
+            ? getISODateStringWithFixedTimezone(newValue)
+            : undefined;
+          controller.field.onChange(formattedDate?.split('T')[0] ?? null);
         }}
         onValidate={({ validationType, value: newValue, format }) => {
           const error = computeError(newValue, format, validationType);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog4085980773";
+var _namespace_ = "deletedialog567220366";
 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":"deletedialog4085980773__root","layout":"deletedialog4085980773__layout"};
+export var classes = {"root":"deletedialog567220366__root","layout":"deletedialog567220366__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Tag } 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/document/document-control.tsx

@@ -10,7 +10,7 @@ import {
   Document,
   Link,
   Download,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { useTranslations } from '../../hooks';
 
 import { classes } from './form-document-field.st.css.js';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Badge, Box } 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/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield818078213";
+var _namespace_ = "formdocumentfield2114700054";
 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":"formdocumentfield818078213__root","viewWrapper":"formdocumentfield818078213__viewWrapper","textWidth":"formdocumentfield818078213__textWidth","documentLoader":"formdocumentfield818078213__documentLoader","addDocument":"formdocumentfield818078213__addDocument","addItemWrapper":"formdocumentfield818078213__addItemWrapper"};
+export var classes = {"root":"formdocumentfield2114700054__root","viewWrapper":"formdocumentfield2114700054__viewWrapper","textWidth":"formdocumentfield2114700054__textWidth","documentLoader":"formdocumentfield2114700054__documentLoader","addDocument":"formdocumentfield2114700054__addDocument","addItemWrapper":"formdocumentfield2114700054__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_ = "exclamation2850796433";
+var _namespace_ = "exclamation735579127";
 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":"exclamation2850796433__root","exclamation":"exclamation2850796433__exclamation","actions":"exclamation2850796433__actions","action":"exclamation2850796433__action"};
+export var classes = {"root":"exclamation735579127__root","exclamation":"exclamation735579127__exclamation","actions":"exclamation735579127__actions","action":"exclamation735579127__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_ = "highlightedtext338506268";
+var _namespace_ = "highlightedtext260082073";
 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":"highlightedtext338506268__root","substring":"highlightedtext338506268__substring"};
-export var keyframes = {"highlighted":"highlightedtext338506268__highlighted","highlighted-match":"highlightedtext338506268__highlighted-match"}; 
+export var classes = {"root":"highlightedtext260082073__root","substring":"highlightedtext260082073__substring"};
+export var keyframes = {"highlighted":"highlightedtext260082073__highlighted","highlighted-match":"highlightedtext260082073__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_ = "thumbnailreplaceoverlay2875188225";
+var _namespace_ = "thumbnailreplaceoverlay3438889648";
 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":"thumbnailreplaceoverlay2875188225__root","icon":"thumbnailreplaceoverlay2875188225__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay3438889648__root","icon":"thumbnailreplaceoverlay3438889648__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_ = "cellmediaeditshell4097080161";
+var _namespace_ = "cellmediaeditshell4191230720";
 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":"cellmediaeditshell4097080161__root"};
+export var classes = {"root":"cellmediaeditshell4191230720__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_ = "pasteurlbutton3849090191";
+var _namespace_ = "pasteurlbutton1443057515";
 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":"pasteurlbutton3849090191__root","iconButtonTooltip":"pasteurlbutton3849090191__iconButtonTooltip","iconButton":"pasteurlbutton3849090191__iconButton"};
+export var classes = {"root":"pasteurlbutton1443057515__root","iconButtonTooltip":"pasteurlbutton1443057515__iconButtonTooltip","iconButton":"pasteurlbutton1443057515__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_ = "formmediagalleryfield3093550833";
+var _namespace_ = "formmediagalleryfield596724928";
 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":"formmediagalleryfield3093550833__root","container":"formmediagalleryfield3093550833__container","viewBox":"formmediagalleryfield3093550833__viewBox","addItemWrapper":"formmediagalleryfield3093550833__addItemWrapper","addItem":"formmediagalleryfield3093550833__addItem","overlay":"formmediagalleryfield3093550833__overlay","image":"formmediagalleryfield3093550833__image","previewImage":"formmediagalleryfield3093550833__previewImage","previewVideo":"formmediagalleryfield3093550833__previewVideo"};
+export var classes = {"root":"formmediagalleryfield596724928__root","container":"formmediagalleryfield596724928__container","viewBox":"formmediagalleryfield596724928__viewBox","addItemWrapper":"formmediagalleryfield596724928__addItemWrapper","addItem":"formmediagalleryfield596724928__addItem","overlay":"formmediagalleryfield596724928__overlay","image":"formmediagalleryfield596724928__image","previewImage":"formmediagalleryfield596724928__previewImage","previewVideo":"formmediagalleryfield596724928__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_ = "mediaimage3652063272";
+var _namespace_ = "mediaimage2151918547";
 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":"mediaimage2151918547__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":"--mediaimage2151918547-from","to":"--mediaimage2151918547-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_ = "overlay1846956920";
 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":"overlay1846956920__root","iconOverlay":"overlay1846956920__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_ = "medialoader2148483351";
 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":"medialoader2148483351__root","loader":"medialoader2148483351__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_ = "mediatag547009733";
 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":"mediatag547009733__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_ = "cellmultidocumentedit2391177187";
 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":"cellmultidocumentedit2391177187__root","chipTrigger":"cellmultidocumentedit2391177187__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_ = "formmultidocument1651891424";
 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":"formmultidocument1651891424__root","viewRoot":"formmultidocument1651891424__viewRoot","singleViewWrapper":"formmultidocument1651891424__singleViewWrapper","addDocumentButton":"formmultidocument1651891424__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_ = "cellmultireferenceinput2300635902";
 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":"cellmultireferenceinput2300635902__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_ = "cellreferenceinput2906594827";
 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":"cellreferenceinput2906594827__root","autocomplete":"cellreferenceinput2906594827__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};