@wix/patterns-fields 1.73.0 → 1.74.0

package/src/__tests__/components/rich-editors-border.spec.ts

@@ -0,0 +1,45 @@
+import fs from 'fs';
+import path from 'path';
+
+// CAIRO-4561: both editors rendered with no border at all. The rules were
+// there, but they read `var(--wds-color-blue-300)` with no fallback, and a
+// custom property that resolves to nothing makes the whole declaration invalid
+// — so the border was dropped rather than falling back to a default. WDS Input
+// spells every one of these as `var(--token, var(--wsr-token, #literal))`.
+const STYLESHEETS = [
+  'components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css',
+  'components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css',
+];
+
+const read = (relative: string) =>
+  fs.readFileSync(path.join(__dirname, '../../', relative), 'utf8');
+
+/** Every declaration whose property is border-ish or a shadow. */
+const borderDeclarations = (css: string) =>
+  css
+    .split(/[;{}]/)
+    .map((chunk) => chunk.trim())
+    .filter((chunk) => /^(border[\w-]*|box-shadow)\s*:/.test(chunk));
+
+describe('rich editor borders', () => {
+  it.each(STYLESHEETS)('declares a visible border in %s', (relative) => {
+    const declarations = borderDeclarations(read(relative));
+
+    expect(
+      declarations.some((d) => d.includes('var(--wds-input-border-color,')),
+    ).toBe(true);
+  });
+
+  it.each(STYLESHEETS)(
+    'gives every custom property in a border declaration a fallback in %s',
+    (relative) => {
+      const withoutFallback = borderDeclarations(read(relative)).filter((d) =>
+        Array.from(d.matchAll(/var\(\s*(--[\w-]+)\s*([,)])/g)).some(
+          ([, , delimiter]) => delimiter === ')',
+        ),
+      );
+
+      expect(withoutFallback).toEqual([]);
+    },
+  );
+});

package/src/__tests__/hooks/use-field-ref.spec.tsx

@@ -0,0 +1,132 @@
+import '../../testkit/test-polyfills';
+
+import React from 'react';
+import { act, render } from '@testing-library/react';
+import type { Field } from '@wix/bex-core';
+import { useForm } from '@wix/bex-core/form';
+import type { Control, FieldValues } from '@wix/bex-core/form';
+
+import { PatternsFieldsTestProvider } from '../../testkit/patterns-fields-test-provider';
+import { FormAddress } from '../../components/address/form-address';
+import { FormTime } from '../../components/time-input/form-time';
+import { FormDocument } from '../../components/document/form-document';
+import { FormImageInput } from '../../components/image/form-image-input';
+import { fieldRefHandle } from '../../hooks';
+
+interface Case {
+  name: string;
+  Component: React.ComponentType<any>;
+  field: Field;
+}
+
+const field = (id: string, type: string): Field =>
+  ({
+    id,
+    displayName: id,
+    type,
+    validation: { required: true },
+  } as Field);
+
+// Every control here answers focus() and nothing else, which is the shape that
+// used to make setFocus with shouldSelect throw.
+const CASES: Case[] = [
+  // AddressInputImperativeHandle: { focus, clear }
+  {
+    name: 'FormAddress',
+    Component: FormAddress,
+    field: field('location', 'ADDRESS'),
+  },
+  // TimeInputImperativeActions: no select()
+  { name: 'FormTime', Component: FormTime, field: field('start', 'TIME') },
+  // AddItemActions: { blur, focus }. Shared with audio, multi-document and
+  // media-gallery, so one of the four covers that shape.
+  {
+    name: 'FormDocument',
+    Component: FormDocument,
+    field: field('spec', 'DOCUMENT'),
+  },
+  // ImageViewer instance, shared with video.
+  {
+    name: 'FormImageInput',
+    Component: FormImageInput,
+    field: field('cover', 'IMAGE'),
+  },
+];
+
+describe('fieldRefHandle', () => {
+  it('sends focus to the given callback', () => {
+    const focus = jest.fn();
+
+    fieldRefHandle(focus, () => undefined).focus();
+
+    expect(focus).toHaveBeenCalled();
+  });
+
+  // The whole point: a control with only focus() must not make the other
+  // calls blow up, because react-hook-form makes them unconditionally.
+  it('absorbs the calls a focus-only control cannot answer', () => {
+    const handle = fieldRefHandle(
+      () => {},
+      () => ({ focus: () => {} }),
+    );
+
+    expect(() => handle.select()).not.toThrow();
+    expect(() => handle.setCustomValidity('nope')).not.toThrow();
+    expect(handle.reportValidity()).toBe(true);
+  });
+
+  it('passes the calls on to a control that does answer them', () => {
+    const control = {
+      focus: jest.fn(),
+      select: jest.fn(),
+      setCustomValidity: jest.fn(),
+      reportValidity: jest.fn().mockReturnValue(false),
+    };
+    const handle = fieldRefHandle(control.focus, () => control);
+
+    handle.select();
+    handle.setCustomValidity('bad');
+
+    expect(control.select).toHaveBeenCalled();
+    expect(control.setCustomValidity).toHaveBeenCalledWith('bad');
+    expect(handle.reportValidity()).toBe(false);
+  });
+});
+
+describe.each(CASES)(
+  '$name, whose control only has focus',
+  ({ Component, field: f }) => {
+    let form: ReturnType<typeof useForm<FieldValues>> | undefined;
+
+    const Harness = () => {
+      const methods = useForm<FieldValues>({ mode: 'onChange' });
+      form = methods;
+      return (
+        <Component
+          field={f}
+          value={undefined as never}
+          onChange={() => {}}
+          dataHook={`${f.id}-field`}
+          formControl={methods.control as Control<FieldValues>}
+          data={{}}
+        />
+      );
+    };
+
+    // react-hook-form reaches select() through the handle it wraps around
+    // whatever was registered, so a focus-only control used to throw here.
+    it('survives setFocus with shouldSelect', () => {
+      render(
+        <PatternsFieldsTestProvider>
+          <Harness />
+        </PatternsFieldsTestProvider>,
+      );
+
+      expect(() =>
+        act(() => {
+          form!.setFocus(f.id, { shouldSelect: true });
+        }),
+      ).not.toThrow();
+    });
+  },
+);

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

@@ -9,6 +9,7 @@ import type { Address } from '../../types/address';
 import { isEmpty } from '../../validations/value';
 
 import { FormAddressInput } from './input/form-address-input';
+import { useFieldRef } from '../../hooks';
 
 export interface FormAddressProps extends BaseInputProps<Address> {}
 
@@ -31,6 +32,8 @@ const _FormAddress = (props: FormAddressProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   return (
     <FormField
       label={field.displayName}
@@ -45,7 +48,7 @@ const _FormAddress = (props: FormAddressProps) => {
         onChange={(value) => controller.field.onChange?.(value)}
         // Hand the input to react-hook-form so shouldFocusError scrolls to +
         // focuses this field when it blocks save.
-        inputRef={controller.field.ref}
+        inputRef={setFieldRef}
         dataHook={`address-${field.id}`}
         field={field.id}
       />

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

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

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_ = "actionsmenu101643419";
+var _namespace_ = "actionsmenu425944360";
 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":"actionsmenu101643419__root","action":"actionsmenu101643419__action"};
+export var classes = {"root":"actionsmenu425944360__root","action":"actionsmenu425944360__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_ = "formaudiofield606935778";
+var _namespace_ = "formaudiofield4018066963";
 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":"formaudiofield606935778__root","addItem":"formaudiofield606935778__addItem","mediaTitle":"formaudiofield606935778__mediaTitle"};
+export var classes = {"root":"formaudiofield4018066963__root","addItem":"formaudiofield4018066963__addItem","mediaTitle":"formaudiofield4018066963__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -7,6 +7,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../../types/base-input';
 import { isEmpty } from '../../../validations/string';
 import { FormAudioField } from './form-audio-field';
+import { useFieldRef } from '../../../hooks';
 
 export interface FormAudioProps extends BaseInputProps<string> {}
 
@@ -30,6 +31,8 @@ const _FormAudio = (props: FormAudioProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   return (
     <FormField
       label={field.displayName}
@@ -42,7 +45,7 @@ const _FormAudio = (props: FormAudioProps) => {
         // Hand the add button to react-hook-form so
         // shouldFocusError scrolls to + focuses this field when it
         // blocks save.
-        inputRef={controller.field.ref}
+        inputRef={setFieldRef}
         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_ = "audioplayer2613344239";
+var _namespace_ = "audioplayer1561698613";
 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":"audioplayer2613344239__root"};
+export var classes = {"root":"audioplayer1561698613__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_ = "cellcolorview1178629535";
+var _namespace_ = "cellcolorview1736640766";
 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":"cellcolorview1178629535__root","hashPrefix":"cellcolorview1178629535__hashPrefix"};
+export var classes = {"root":"cellcolorview1736640766__root","hashPrefix":"cellcolorview1736640766__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "colorview2624366234";
+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":"colorview2624366234__root","view":"colorview2624366234__view","fillPreview":"colorview2624366234__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_ = "deletedialog1579435053";
+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":"deletedialog1579435053__root","layout":"deletedialog1579435053__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_ = "formdocumentfield3894914095";
+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":"formdocumentfield3894914095__root","viewWrapper":"formdocumentfield3894914095__viewWrapper","textWidth":"formdocumentfield3894914095__textWidth","documentLoader":"formdocumentfield3894914095__documentLoader","addDocument":"formdocumentfield3894914095__addDocument","addItemWrapper":"formdocumentfield3894914095__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.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}
@@ -42,7 +45,7 @@ const _FormDocument = (props: FormDocumentProps) => {
         // Hand the add button to react-hook-form so
         // shouldFocusError scrolls to + focuses this field when it
         // blocks save.
-        inputRef={controller.field.ref}
+        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_ = "exclamation2180886733";
+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":"exclamation2180886733__root","exclamation":"exclamation2180886733__exclamation","actions":"exclamation2180886733__actions","action":"exclamation2180886733__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_ = "highlightedtext3218260618";
+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":"highlightedtext3218260618__root","substring":"highlightedtext3218260618__substring"};
-export var keyframes = {"highlighted":"highlightedtext3218260618__highlighted","highlighted-match":"highlightedtext3218260618__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);
 
@@ -66,7 +69,7 @@ const _FormImageInput = (props: FormImageInputProps) => {
           // 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}
+          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_ = "thumbnailreplaceoverlay1250295104";
+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":"thumbnailreplaceoverlay1250295104__root","icon":"thumbnailreplaceoverlay1250295104__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_ = "cellmediaeditshell222630220";
+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":"cellmediaeditshell222630220__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_ = "pasteurlbutton285657028";
+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":"pasteurlbutton285657028__root","iconButtonTooltip":"pasteurlbutton285657028__iconButtonTooltip","iconButton":"pasteurlbutton285657028__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_ = "formmediagalleryfield2943984590";
+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":"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 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.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}
@@ -43,7 +46,7 @@ const _FormMediaGallery = (props: FormMediaGalleryProps) => {
         // Hand the add button to react-hook-form so
         // shouldFocusError scrolls to + focuses this field when it
         // blocks save.
-        inputRef={controller.field.ref}
+        inputRef={setFieldRef}
         data={controller.field.value}
         onChange={(value) => controller.field.onChange(value)}
         onClear={() => controller.field.onChange([])}