@wix/patterns-fields 1.73.0 → 1.75.0

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_ = "addressinput1353092921";
 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":"addressinput1353092921__root","tableAddressInput":"addressinput1353092921__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_ = "actionsmenu1132414098";
 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":"actionsmenu1132414098__root","action":"actionsmenu1132414098__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_ = "formaudiofield4212276772";
 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":"formaudiofield4212276772__root","addItem":"formaudiofield4212276772__addItem","mediaTitle":"formaudiofield4212276772__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_ = "audioplayer1170338736";
 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":"audioplayer1170338736__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/boolean/form-checkbox-input.tsx

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react';
+import { Checkbox } from '@wix/design-system';
+
+import { useAutoFocus } from '../../hooks';
+import type { ControlledInputProps } from '../../types/controlled-input';
+
+export interface FormCheckboxInputProps extends ControlledInputProps<boolean> {
+  label: React.ReactNode;
+}
+
+export const FormCheckboxInput: React.FC<FormCheckboxInputProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  invalid,
+  dataHook,
+  label,
+}) => {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useAutoFocus(rootRef, Boolean(autoFocus));
+
+  return (
+    <Checkbox
+      ref={rootRef}
+      checked={data}
+      disabled={readOnly}
+      hasError={invalid}
+      onChange={(event) => onChange(event.target.checked)}
+      onBlur={onBlur}
+      dataHook={dataHook}
+    >
+      {label}
+    </Checkbox>
+  );
+};
+
+FormCheckboxInput.displayName = 'FormCheckboxInput';

package/src/components/boolean/form-checkbox.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Checkbox } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
+import { FormCheckboxInput } from './form-checkbox-input';
 
 export interface FormCheckboxProps extends BaseInputProps<boolean> {}
 
@@ -17,14 +17,13 @@ const _FormCheckbox = (props: FormCheckboxProps) => {
   });
 
   return (
-    <Checkbox
-      checked={!!controller.field.value}
-      onChange={(e) => controller.field.onChange(e.target.checked)}
+    <FormCheckboxInput
+      data={!!controller.field.value}
+      onChange={controller.field.onChange}
       onBlur={controller.field.onBlur}
       dataHook={dataHook ?? `checkbox-${field.id}`}
-    >
-      {field.displayName}
-    </Checkbox>
+      label={field.displayName}
+    />
   );
 };
 

package/src/components/boolean/index.ts

@@ -1,3 +1,4 @@
 export * from './boolean-view';
 export * from './cell-checkbox';
 export * from './form-checkbox';
+export * from './form-checkbox-input';

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_ = "cellcolorview1008266217";
 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":"cellcolorview1008266217__root","hashPrefix":"cellcolorview1008266217__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_ = "colorview3520103020";
 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":"colorview3520103020__root","view":"colorview3520103020__view","fillPreview":"colorview3520103020__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/controlled-input.driver.ts

@@ -0,0 +1,19 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  AutoCompleteUniDriver,
+  CheckboxUniDriver,
+  InputUniDriver,
+  NumberInputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../testkit/base-driver';
+
+export function ControlledInputUniDriver(base: UniDriver, body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    checkbox: CheckboxUniDriver(base, body),
+    number: NumberInputUniDriver(base, body),
+    text: InputUniDriver(base, body),
+    autocomplete: AutoCompleteUniDriver(base, body),
+  };
+}

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_ = "deletedialog3550580931";
 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":"deletedialog3550580931__root","layout":"deletedialog3550580931__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_ = "formdocumentfield2224721629";
 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":"formdocumentfield2224721629__root","viewWrapper":"formdocumentfield2224721629__viewWrapper","textWidth":"formdocumentfield2224721629__textWidth","documentLoader":"formdocumentfield2224721629__documentLoader","addDocument":"formdocumentfield2224721629__addDocument","addItemWrapper":"formdocumentfield2224721629__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_ = "exclamation2784991636";
 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":"exclamation2784991636__root","exclamation":"exclamation2784991636__exclamation","actions":"exclamation2784991636__actions","action":"exclamation2784991636__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_ = "highlightedtext3503248983";
 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":"highlightedtext3503248983__root","substring":"highlightedtext3503248983__substring"};
+export var keyframes = {"highlighted":"highlightedtext3503248983__highlighted","highlighted-match":"highlightedtext3503248983__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_ = "thumbnailreplaceoverlay394833446";
 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":"thumbnailreplaceoverlay394833446__root","icon":"thumbnailreplaceoverlay394833446__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_ = "cellmediaeditshell2637278711";
 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":"cellmediaeditshell2637278711__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_ = "pasteurlbutton62614613";
 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":"pasteurlbutton62614613__root","iconButtonTooltip":"pasteurlbutton62614613__iconButtonTooltip","iconButton":"pasteurlbutton62614613__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};