@wix/patterns-fields 1.72.0 → 1.73.0

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

@@ -71,4 +71,25 @@ describe('FormMediaGallery field', () => {
 
     expect(await driver.tk.hasError()).toBe(false);
   });
+
+  // Only the empty state can fail `required`, so its add button is where
+  // react-hook-form should land. Nothing focuses a field whose input never
+  // reached controller.field.ref.
+  it('focuses the add button when a required value blocks submit', async () => {
+    const field = makeField({
+      type: 'MEDIA_GALLERY',
+      validation: { required: true },
+    });
+    const driver = setup({ field });
+
+    await driver.submit();
+
+    const active = document.activeElement;
+    expect(active?.tagName).toBe('BUTTON');
+    expect(
+      document
+        .querySelector(`[data-hook="media-gallery-field-${field.id}"]`)
+        ?.contains(active),
+    ).toBe(true);
+  });
 });

package/src/__tests__/components/multi-document/form-multi-document.spec.tsx

@@ -57,4 +57,25 @@ describe('FormMultiDocument field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  // Only the empty state can fail `required`, so its add button is where
+  // react-hook-form should land. Nothing focuses a field whose input never
+  // reached controller.field.ref.
+  it('focuses the add button when a required value blocks submit', async () => {
+    const field = makeField({
+      type: 'MULTI_DOCUMENT',
+      validation: { required: true },
+    });
+    const driver = setup({ field });
+
+    await driver.submit();
+
+    const active = document.activeElement;
+    expect(active?.tagName).toBe('BUTTON');
+    expect(
+      document
+        .querySelector(`[data-hook="multi-document-field-${field.id}"]`)
+        ?.contains(active),
+    ).toBe(true);
+  });
 });

package/src/__tests__/components/rich-content/form-rich-content.spec.tsx

@@ -77,4 +77,26 @@ describe('FormRichContent field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  // Ricos is lazy and renders no editable node here, so there is nothing to
+  // focus — the wrapper still has to bring the field into view. Without the
+  // ref registered, react-hook-form calls nothing at all.
+  it('brings the field into view when a required value blocks submit', async () => {
+    const scrollIntoView = jest.fn();
+    // Not implemented in jsdom.
+    Element.prototype.scrollIntoView = scrollIntoView;
+
+    const field = makeField({
+      type: 'RICH_CONTENT',
+      validation: { required: true },
+    });
+    const driver = setup({ field, initialValue: '' });
+
+    await driver.submit();
+
+    expect(scrollIntoView).toHaveBeenCalled();
+
+    delete (Element.prototype as Partial<Element>).scrollIntoView;
+  });
+
 });

package/src/__tests__/components/rich-text/form-rich-text.spec.tsx

@@ -76,4 +76,22 @@ describe('FormRichText field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  // The editor exposes no focus handle, so react-hook-form gets a wrapper
+  // whose focus() brings the field into view and then focuses the editor if
+  // it has rendered. Nothing happens at all when the ref is not registered.
+  it('focuses the editor when a required value blocks submit', async () => {
+    const field = makeField({
+      type: 'RICH_TEXT',
+      validation: { required: true },
+    });
+    const driver = setup({ field, initialValue: '' });
+
+    await driver.submit();
+
+    const editable = document.querySelector('[contenteditable]');
+    expect(editable).toBeTruthy();
+    expect(document.activeElement).toBe(editable);
+  });
+
 });

package/src/components/address/input/address-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput1990163582";
+var _namespace_ = "addressinput249613619";
 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":"addressinput1990163582__root","tableAddressInput":"addressinput1990163582__tableAddressInput"};
+export var classes = {"root":"addressinput249613619__root","tableAddressInput":"addressinput249613619__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,9 +1,9 @@
-import React, { useCallback, useRef } from 'react';
+import React from 'react';
 
 import type { Address } from '../../../types/address';
 import type { FormInputProps } from '../../../types/form-input';
 import { Z_INDEX_MODAL_POPOVER } from '../../common';
-import { useAutoFocus } from '../../../hooks';
+import { useAutoFocus, useMergedRef } from '../../../hooks';
 
 import type { AddressInputImperativeHandle } from './address-input';
 import { AddressInput } from './address-input';
@@ -25,28 +25,13 @@ export const FormAddressInput: React.FC<FormAddressInputProps> = ({
   dataHook,
   inputRef: forwardedRef,
 }) => {
-  const inputRef = useRef<AddressInputImperativeHandle | null>(null);
+  const [inputRef, setInputRef] =
+    useMergedRef<AddressInputImperativeHandle>(forwardedRef);
   useAutoFocus(inputRef, autoFocus);
 
-  // autoFocus reads the handle from here, so a caller's ref has to be filled
-  // alongside it rather than replacing it.
-  const setRef = useCallback(
-    (handle: AddressInputImperativeHandle | null) => {
-      inputRef.current = handle;
-      if (typeof forwardedRef === 'function') {
-        forwardedRef(handle);
-      } else if (forwardedRef) {
-        (
-          forwardedRef as React.MutableRefObject<AddressInputImperativeHandle | null>
-        ).current = handle;
-      }
-    },
-    [forwardedRef],
-  );
-
   return (
     <AddressInput
-      ref={setRef}
+      ref={setInputRef}
       dataHook={dataHook}
       value={data}
       onChange={onChange}

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu3350107513";
+var _namespace_ = "actionsmenu101643419";
 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":"actionsmenu3350107513__root","action":"actionsmenu3350107513__action"};
+export var classes = {"root":"actionsmenu101643419__root","action":"actionsmenu101643419__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield4179309703";
+var _namespace_ = "formaudiofield606935778";
 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":"formaudiofield4179309703__root","addItem":"formaudiofield4179309703__addItem","mediaTitle":"formaudiofield4179309703__mediaTitle"};
+export var classes = {"root":"formaudiofield606935778__root","addItem":"formaudiofield606935778__addItem","mediaTitle":"formaudiofield606935778__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { getMediaURL } from '../../../auto-field-types';
 import type { AddItemActions } from '@wix/design-system';
 import { AddItem, AudioPlayer, Box, Text } from '@wix/design-system';
 
-import { useTranslations, useWithCallback } from '../../../hooks';
+import { useMergedRef, useTranslations, useWithCallback } from '../../../hooks';
 import { getMediaTitle, MEDIA_TYPES } from '../../../utils';
 
 import { Z_INDEX_MODAL_POPOVER } from '../../common';
@@ -26,13 +26,14 @@ export const FormAudioField: FC<FormMediaControlProps> = ({
   readOnly,
   invalid,
   dataHook,
+  inputRef: forwardedRef,
 }) => {
   const { t } = useTranslations();
 
   const onChange = useWithCallback(onChangeAudio, onInput);
   const onClear = useWithCallback(onClearAudio, onInput);
 
-  const inputRef = useRef<AddItemActions>(null);
+  const [inputRef, setInputRef] = useMergedRef<AddItemActions>(forwardedRef);
   const viewRef = useRef<HTMLDivElement>(null);
 
   const { callMedia, onMediaLoad, downloadMedia, loading } = useMediaControl({
@@ -91,7 +92,7 @@ export const FormAudioField: FC<FormMediaControlProps> = ({
   if (!data) {
     return (
       <AddItem
-        ref={inputRef}
+        ref={setInputRef}
         dataHook={dataHook}
         className={style(classes.addItem, {
           disabled: !!readOnly,

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

@@ -39,6 +39,10 @@ const _FormAudio = (props: FormAudioProps) => {
       dataHook={dataHook}
     >
       <FormAudioField
+        // Hand the add button to react-hook-form so
+        // shouldFocusError scrolls to + focuses this field when it
+        // blocks save.
+        inputRef={controller.field.ref}
         data={controller.field.value}
         onChange={(value) => controller.field.onChange(value)}
         onClear={() => controller.field.onChange(null)}

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview2573090781";
+var _namespace_ = "cellcolorview1178629535";
 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":"cellcolorview2573090781__root","hashPrefix":"cellcolorview2573090781__hashPrefix"};
+export var classes = {"root":"cellcolorview1178629535__root","hashPrefix":"cellcolorview1178629535__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview1092527435";
+var _namespace_ = "colorview2624366234";
 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":"colorview2624366234__root","view":"colorview2624366234__view","fillPreview":"colorview2624366234__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "deletedialog1579435053";
 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":"deletedialog1579435053__root","layout":"deletedialog1579435053__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_ = "formdocumentfield3894914095";
 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":"formdocumentfield3894914095__root","viewWrapper":"formdocumentfield3894914095__viewWrapper","textWidth":"formdocumentfield3894914095__textWidth","documentLoader":"formdocumentfield3894914095__documentLoader","addDocument":"formdocumentfield3894914095__addDocument","addItemWrapper":"formdocumentfield3894914095__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

@@ -39,6 +39,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={controller.field.ref}
         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_ = "exclamation2180886733";
 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":"exclamation2180886733__root","exclamation":"exclamation2180886733__exclamation","actions":"exclamation2180886733__actions","action":"exclamation2180886733__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_ = "highlightedtext3218260618";
 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":"highlightedtext3218260618__root","substring":"highlightedtext3218260618__substring"};
+export var keyframes = {"highlighted":"highlightedtext3218260618__highlighted","highlighted-match":"highlightedtext3218260618__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -63,6 +63,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={controller.field.ref}
           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_ = "thumbnailreplaceoverlay1250295104";
 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":"thumbnailreplaceoverlay1250295104__root","icon":"thumbnailreplaceoverlay1250295104__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_ = "cellmediaeditshell222630220";
 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":"cellmediaeditshell222630220__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_ = "pasteurlbutton285657028";
 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":"pasteurlbutton285657028__root","iconButtonTooltip":"pasteurlbutton285657028__iconButtonTooltip","iconButton":"pasteurlbutton285657028__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_ = "formmediagalleryfield2943984590";
 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":"formmediagalleryfield2943984590__root","container":"formmediagalleryfield2943984590__container","viewBox":"formmediagalleryfield2943984590__viewBox","addItemWrapper":"formmediagalleryfield2943984590__addItemWrapper","addItem":"formmediagalleryfield2943984590__addItem","overlay":"formmediagalleryfield2943984590__overlay","image":"formmediagalleryfield2943984590__image","previewImage":"formmediagalleryfield2943984590__previewImage","previewVideo":"formmediagalleryfield2943984590__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

@@ -40,6 +40,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={controller.field.ref}
         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_ = "mediaimage1081502549";
 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":"mediaimage1081502549__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":"--mediaimage1081502549-from","to":"--mediaimage1081502549-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_ = "overlay1338093693";
 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":"overlay1338093693__root","iconOverlay":"overlay1338093693__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};