@wix/patterns-fields 1.72.0 → 1.74.0

package/src/components/color-view/color-input.tsx

@@ -131,14 +131,25 @@ export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
               zIndex={5001}
             >
               <Popover.Element>
-                {!colorValue && (isFocused || showPicker) ? (
+                {/* Both swatches keep the mousedown default from moving focus.
+                    Without it the press focuses the swatch, and the re-render
+                    that follows the click detaches it — WDS Popover then reads
+                    the click as landing outside itself and closes again, so the
+                    picker only opened on a later click. For the same reason the
+                    branch must not depend on `showPicker`: the swatch has to
+                    survive its own click. */}
+                {!colorValue && isFocused ? (
                   <FillButton
                     onClick={onPreviewClick}
                     onMouseDown={(e) => e.preventDefault()}
                     tooltipContent={t('auto-patterns.fields.add_color_tooltip')}
                   />
                 ) : (
-                  <FillPreview fill={colorValue} onClick={onPreviewClick} />
+                  <FillPreview
+                    fill={colorValue}
+                    onClick={onPreviewClick}
+                    onMouseDown={(e) => e.preventDefault()}
+                  />
                 )}
               </Popover.Element>
               <Popover.Content>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview1092527435";
+var _namespace_ = "colorview3482796446";
 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":"colorview1092527435__root","view":"colorview1092527435__view","fillPreview":"colorview1092527435__fillPreview"};
+export var classes = {"root":"colorview3482796446__root","view":"colorview3482796446__view","fillPreview":"colorview3482796446__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/form-color.driver.ts

@@ -25,8 +25,14 @@ export function FormColorDriver(
     ...baseUniDriverFactory(base),
     getLabel: () => getFormFieldLabelText(formField),
     getValue: () => input.getValue(),
-    getFillButton: () => FillButtonUniDriver(base, body),
-    getFillPreview: () => FillPreviewUniDriver(base, body),
+    // The WDS drivers scope their queries to `base`, but `exists()` comes from
+    // the shared base factory and only reports on `base` itself — which here is
+    // the whole field, so it is true either way. Query the swatch directly.
+    hasFillButton: () => base.$('[data-hook="fillbutton"]').exists(),
+    hasFillPreview: () => base.$('[data-hook="fill-preview-button"]').exists(),
+    clickFillButton: () => FillButtonUniDriver(base, body).click(),
+    clickFillPreview: () => FillPreviewUniDriver(base, body).click(),
+    isPickerOpen: () => body.$('[data-hook="color-picker-hsb"]').exists(),
     isRequired: () => formField.isRequired(),
     hasError: () => formField.hasStatus('error'),
     getErrorMessage: () => formField.getStatusMessage(),

package/src/components/datetime-input/form-date-time.driver.ts

@@ -38,5 +38,8 @@ export function FormDateTimeDriver(
       timeInput.hasStatus('error'),
     getTimeErrorMessage: () => timeInput.getStatusMessage(),
     isRequired: () => formField.isRequired(),
+    // WDS Layout mirrors its `gap` prop onto `data-gap`; it is the only
+    // element in this field carrying that attribute.
+    getInputsGap: () => base.$('[data-gap]').attr('data-gap'),
   };
 }

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

@@ -74,7 +74,7 @@ const _FormDateTime = (props: FormDateTimeProps) => {
       required={field.validation?.required}
       dataHook={dataHook}
     >
-      <Layout>
+      <Layout gap="12px">
         <Cell span={6}>
           <DatePicker
             ref={(internalRef) => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog557815988";
+var _namespace_ = "deletedialog1207540592";
 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":"deletedialog557815988__root","layout":"deletedialog557815988__layout"};
+export var classes = {"root":"deletedialog1207540592__root","layout":"deletedialog1207540592__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_ = "formdocumentfield22050767";
+var _namespace_ = "formdocumentfield2347234029";
 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":"formdocumentfield22050767__root","viewWrapper":"formdocumentfield22050767__viewWrapper","textWidth":"formdocumentfield22050767__textWidth","documentLoader":"formdocumentfield22050767__documentLoader","addDocument":"formdocumentfield22050767__addDocument","addItemWrapper":"formdocumentfield22050767__addItemWrapper"};
+export var classes = {"root":"formdocumentfield2347234029__root","viewWrapper":"formdocumentfield2347234029__viewWrapper","textWidth":"formdocumentfield2347234029__textWidth","documentLoader":"formdocumentfield2347234029__documentLoader","addDocument":"formdocumentfield2347234029__addDocument","addItemWrapper":"formdocumentfield2347234029__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/document/form-document-field.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 
 import { MEDIA_TYPES } from '../../utils/media-utils';
-import { useTranslations, useWithCallback } from '../../hooks';
+import { useMergedRef, useTranslations, useWithCallback } from '../../hooks';
 import type { AddItemActions } from '@wix/design-system';
 
 import type { FormMediaControlProps } from '../media-control';
@@ -26,13 +26,14 @@ export const FormDocumentField: React.FC<FormMediaControlProps> = ({
   readOnly,
   invalid,
   dataHook,
+  inputRef: forwardedRef,
 }) => {
   const { t } = useTranslations();
 
   const onChange = useWithCallback(onChangeDocument, onInput);
   const onClear = useWithCallback(onClearDocument, onInput);
 
-  const inputRef = useRef<AddItemActions>(null);
+  const [inputRef, setInputRef] = useMergedRef<AddItemActions>(forwardedRef);
   const viewRef = useRef<HTMLDivElement>(null);
 
   const { callMedia, loading, downloadMedia } = useMediaControl({
@@ -54,7 +55,7 @@ export const FormDocumentField: React.FC<FormMediaControlProps> = ({
       {!data ? (
         <FormDocumentInput
           dataHook={dataHook}
-          ref={inputRef}
+          ref={setInputRef}
           theme="dashes"
           disabled={readOnly}
           loading={loading}

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

@@ -7,6 +7,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../types/base-input';
 import { isEmpty } from '../../validations/string';
 import { FormDocumentField } from './form-document-field';
+import { useFieldRef } from '../../hooks';
 
 export interface FormDocumentProps extends BaseInputProps<string> {}
 
@@ -30,6 +31,8 @@ const _FormDocument = (props: FormDocumentProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   return (
     <FormField
       label={field.displayName}
@@ -39,6 +42,10 @@ const _FormDocument = (props: FormDocumentProps) => {
       dataHook={dataHook}
     >
       <FormDocumentField
+        // Hand the add button to react-hook-form so
+        // shouldFocusError scrolls to + focuses this field when it
+        // blocks save.
+        inputRef={setFieldRef}
         data={controller.field.value}
         onChange={(value) => controller.field.onChange(value)}
         onClear={() => controller.field.onChange(null)}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation2447154459";
+var _namespace_ = "exclamation1187432506";
 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":"exclamation2447154459__root","exclamation":"exclamation2447154459__exclamation","actions":"exclamation2447154459__actions","action":"exclamation2447154459__action"};
+export var classes = {"root":"exclamation1187432506__root","exclamation":"exclamation1187432506__exclamation","actions":"exclamation1187432506__actions","action":"exclamation1187432506__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext950230055";
+var _namespace_ = "highlightedtext3214489151";
 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":"highlightedtext950230055__root","substring":"highlightedtext950230055__substring"};
-export var keyframes = {"highlighted":"highlightedtext950230055__highlighted","highlighted-match":"highlightedtext950230055__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3214489151__root","substring":"highlightedtext3214489151__substring"};
+export var keyframes = {"highlighted":"highlightedtext3214489151__highlighted","highlighted-match":"highlightedtext3214489151__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -8,6 +8,7 @@ import { BaseInputProps } from '../../types/base-input';
 import { isEmpty } from '../../validations/string';
 import { getImageUrl } from '../../utils/get-image-url';
 import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
+import { useFieldRef } from '../../hooks';
 
 export interface FormImageInputProps extends BaseInputProps<string> {}
 
@@ -50,6 +51,8 @@ const _FormImageInput = (props: FormImageInputProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   const imageUrl =
     controller.field.value && getImageUrl(controller.field.value);
 
@@ -63,6 +66,10 @@ const _FormImageInput = (props: FormImageInputProps) => {
     >
       <Box width="100%" maxWidth={MEDIA_MAX_WIDTH}>
         <ImageViewer
+          // ImageViewer keeps its focus node on whichever button is live, so
+          // one ref serves both the empty and filled states. Lets
+          // react-hook-form's shouldFocusError reach this field.
+          ref={setFieldRef}
           imageUrl={imageUrl}
           dataHook={`image-${field.id}`}
           onAddImage={isMobile ? undefined : () => openMedia()}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay2586707932";
+var _namespace_ = "thumbnailreplaceoverlay1382391847";
 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":"thumbnailreplaceoverlay2586707932__root","icon":"thumbnailreplaceoverlay2586707932__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1382391847__root","icon":"thumbnailreplaceoverlay1382391847__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_ = "cellmediaeditshell2678045238";
+var _namespace_ = "cellmediaeditshell84193258";
 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":"cellmediaeditshell2678045238__root"};
+export var classes = {"root":"cellmediaeditshell84193258__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_ = "pasteurlbutton2432712873";
+var _namespace_ = "pasteurlbutton2608013352";
 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":"pasteurlbutton2432712873__root","iconButtonTooltip":"pasteurlbutton2432712873__iconButtonTooltip","iconButton":"pasteurlbutton2432712873__iconButton"};
+export var classes = {"root":"pasteurlbutton2608013352__root","iconButtonTooltip":"pasteurlbutton2608013352__iconButtonTooltip","iconButton":"pasteurlbutton2608013352__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_ = "formmediagalleryfield1363730960";
+var _namespace_ = "formmediagalleryfield4011032354";
 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":"formmediagalleryfield1363730960__root","container":"formmediagalleryfield1363730960__container","viewBox":"formmediagalleryfield1363730960__viewBox","addItemWrapper":"formmediagalleryfield1363730960__addItemWrapper","addItem":"formmediagalleryfield1363730960__addItem","overlay":"formmediagalleryfield1363730960__overlay","image":"formmediagalleryfield1363730960__image","previewImage":"formmediagalleryfield1363730960__previewImage","previewVideo":"formmediagalleryfield1363730960__previewVideo"};
+export var classes = {"root":"formmediagalleryfield4011032354__root","container":"formmediagalleryfield4011032354__container","viewBox":"formmediagalleryfield4011032354__viewBox","addItemWrapper":"formmediagalleryfield4011032354__addItemWrapper","addItem":"formmediagalleryfield4011032354__addItem","overlay":"formmediagalleryfield4011032354__overlay","image":"formmediagalleryfield4011032354__image","previewImage":"formmediagalleryfield4011032354__previewImage","previewVideo":"formmediagalleryfield4011032354__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -14,7 +14,7 @@ import {
   Maximize as MaximizeIcon,
 } from '@wix/wix-ui-icons-common/lazy';
 import type { WixCodeGalleryItem } from '../../auto-field-types';
-import { useTranslations } from '../../hooks';
+import { useMergedRef, useTranslations } from '../../hooks';
 import { executeDownloading } from '../../utils/media-utils';
 import { getMediaURL } from '../../auto-field-types';
 import { files } from '@wix/media';
@@ -33,6 +33,8 @@ export interface FormMediaGalleryFieldProps {
   invalid?: boolean;
   autoFocus?: boolean;
   dataHook?: string;
+  /** Caller's ref to the add button, filled alongside the internal one. */
+  inputRef?: React.Ref<AddItemActions>;
 }
 
 const mediaGalleryPreviewTextKeys = {
@@ -49,10 +51,11 @@ export const FormMediaGalleryField: React.FC<FormMediaGalleryFieldProps> = ({
   invalid,
   autoFocus,
   dataHook,
+  inputRef: forwardedRef,
 }) => {
   const { t } = useTranslations();
   const boxRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<AddItemActions>(null);
+  const [inputRef, setInputRef] = useMergedRef<AddItemActions>(forwardedRef);
   const [boxWidth, setBoxWidth] = useState(0);
   const [hovered, setHovered] = useState(false);
   const [isPreviewOpen, setIsPreviewOpen] = useState(false);
@@ -66,7 +69,9 @@ export const FormMediaGalleryField: React.FC<FormMediaGalleryFieldProps> = ({
     }
     boxRef.current?.focus();
     inputRef.current?.focus();
-  }, [autoFocus]);
+    // inputRef comes from useMergedRef and is stable, but eslint only knows
+    // that about a bare useRef.
+  }, [autoFocus, inputRef]);
 
   // Responsive width tracking
   useEffect(() => {
@@ -137,7 +142,7 @@ export const FormMediaGalleryField: React.FC<FormMediaGalleryFieldProps> = ({
       {!hasValue ? (
         <div className={classes.addItemWrapper}>
           <AddItem
-            ref={inputRef}
+            ref={setInputRef}
             className={style(classes.addItem, { error: invalid })}
             size="tiny"
             theme="dashes"

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

@@ -7,6 +7,7 @@ import { BaseInputProps } from '../../types/base-input';
 import type { WixCodeGalleryItem } from '../../auto-field-types';
 import { isEmpty } from '../../validations/array';
 import { FormMediaGalleryField } from './form-media-gallery-field';
+import { useFieldRef } from '../../hooks';
 
 export interface FormMediaGalleryProps
   extends BaseInputProps<WixCodeGalleryItem[]> {
@@ -31,6 +32,8 @@ const _FormMediaGallery = (props: FormMediaGalleryProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   return (
     <FormField
       label={field.displayName}
@@ -40,6 +43,10 @@ const _FormMediaGallery = (props: FormMediaGalleryProps) => {
       dataHook={dataHook}
     >
       <FormMediaGalleryField
+        // Hand the add button to react-hook-form so
+        // shouldFocusError scrolls to + focuses this field when it
+        // blocks save.
+        inputRef={setFieldRef}
         data={controller.field.value}
         onChange={(value) => controller.field.onChange(value)}
         onClear={() => controller.field.onChange([])}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage3037602971";
+var _namespace_ = "mediaimage2756082487";
 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":"mediaimage3037602971__root"};
+export var classes = {"root":"mediaimage2756082487__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":"--mediaimage3037602971-from","to":"--mediaimage3037602971-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":"--mediaimage2756082487-from","to":"--mediaimage2756082487-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_ = "overlay726786880";
+var _namespace_ = "overlay101189595";
 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":"overlay726786880__root","iconOverlay":"overlay726786880__iconOverlay"};
+export var classes = {"root":"overlay101189595__root","iconOverlay":"overlay101189595__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1546745211";
+var _namespace_ = "medialoader2582308961";
 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":"medialoader1546745211__root","loader":"medialoader1546745211__loader"};
+export var classes = {"root":"medialoader2582308961__root","loader":"medialoader2582308961__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_ = "mediatag2403252122";
+var _namespace_ = "mediatag1371547298";
 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":"mediatag2403252122__root"};
+export var classes = {"root":"mediatag1371547298__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_ = "cellmultidocumentedit418830372";
+var _namespace_ = "cellmultidocumentedit3805197963";
 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":"cellmultidocumentedit418830372__root","chipTrigger":"cellmultidocumentedit418830372__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit3805197963__root","chipTrigger":"cellmultidocumentedit3805197963__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document-field.tsx

@@ -10,7 +10,7 @@ import {
   usePasteURLForm,
 } from '../../media-control';
 import { FormDocumentInput } from '../../document/form';
-import { useTranslations, useWithCallback } from '../../../hooks';
+import { useMergedRef, useTranslations, useWithCallback } from '../../../hooks';
 
 import { FormMultiDocumentView } from './form-multi-document-view';
 
@@ -24,12 +24,13 @@ export const FormMultiDocumentField: React.FC<
   readOnly,
   invalid,
   dataHook,
+  inputRef: forwardedRef,
 }) => {
   const { t } = useTranslations();
 
   const onChange = useWithCallback(onChangeMultiDocument, onInput);
 
-  const inputRef = useRef<AddItemActions>(null);
+  const [inputRef, setInputRef] = useMergedRef<AddItemActions>(forwardedRef);
   const firstDocumentViewRef = useRef<HTMLDivElement>(null);
 
   const { callMedia, loading, downloadMedia } = useMediaControl({
@@ -77,7 +78,7 @@ export const FormMultiDocumentField: React.FC<
       ) : (
         <FormDocumentInput
           dataHook={dataHook}
-          ref={inputRef}
+          ref={setInputRef}
           theme="dashes"
           disabled={readOnly}
           loading={loading}

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_ = "formmultidocument2351500344";
+var _namespace_ = "formmultidocument2780086059";
 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":"formmultidocument2351500344__root","viewRoot":"formmultidocument2351500344__viewRoot","singleViewWrapper":"formmultidocument2351500344__singleViewWrapper","addDocumentButton":"formmultidocument2351500344__addDocumentButton"};
+export var classes = {"root":"formmultidocument2780086059__root","viewRoot":"formmultidocument2780086059__viewRoot","singleViewWrapper":"formmultidocument2780086059__singleViewWrapper","addDocumentButton":"formmultidocument2780086059__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.tsx

@@ -7,6 +7,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../../types/base-input';
 import { isEmpty } from '../../../validations/array';
 import { FormMultiDocumentField } from './form-multi-document-field';
+import { useFieldRef } from '../../../hooks';
 
 export interface FormMultiDocumentProps extends BaseInputProps<string[]> {}
 
@@ -30,6 +31,8 @@ const _FormMultiDocument = (props: FormMultiDocumentProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   return (
     <FormField
       label={field.displayName}
@@ -39,6 +42,10 @@ const _FormMultiDocument = (props: FormMultiDocumentProps) => {
       dataHook={dataHook}
     >
       <FormMultiDocumentField
+        // Hand the add button to react-hook-form so
+        // shouldFocusError scrolls to + focuses this field when it
+        // blocks save.
+        inputRef={setFieldRef}
         data={controller.field.value}
         onChange={(value) => controller.field.onChange(value)}
         dataHook={`multi-document-${field.id}`}

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_ = "cellmultireferenceinput3109112216";
+var _namespace_ = "cellmultireferenceinput1942999998";
 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":"cellmultireferenceinput3109112216__root"};
+export var classes = {"root":"cellmultireferenceinput1942999998__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput4252962194";
+var _namespace_ = "cellreferenceinput3406756589";
 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":"cellreferenceinput4252962194__root","autocomplete":"cellreferenceinput4252962194__autocomplete"};
+export var classes = {"root":"cellreferenceinput3406756589__root","autocomplete":"cellreferenceinput3406756589__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};