@wix/patterns-fields 1.86.0 → 1.88.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput2232918931";
+var _namespace_ = "addressinput2914469914";
 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":"addressinput2232918931__root","tableAddressInput":"addressinput2232918931__tableAddressInput"};
+export var classes = {"root":"addressinput2914469914__root","tableAddressInput":"addressinput2914469914__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_ = "actionsmenu1227857281";
+var _namespace_ = "actionsmenu3671995341";
 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":"actionsmenu1227857281__root","action":"actionsmenu1227857281__action"};
+export var classes = {"root":"actionsmenu3671995341__root","action":"actionsmenu3671995341__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-field/controlled-audio.uni.driver.ts

@@ -0,0 +1,35 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { AddItemUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../../testkit/base-driver';
+
+export function ControlledAudioInputUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  // The dataHook sits on the AddItem in the empty state and on the wrapper Box
+  // in the filled one, so `base` is either.
+  const addItem = AddItemUniDriver(base, body);
+  const moreButton = base.$('[data-hook="fromAudioInput.button.more"]');
+  const deleteAction = body.$('[data-hook="fromAudioInput.button.delete"]');
+  const replaceAction = body.$('[data-hook="fromAudioInput.button.replace"]');
+
+  const isDisabled = async (element: UniDriver) =>
+    (await element.attr('disabled')) !== null ||
+    (await element.attr('aria-disabled')) === 'true';
+
+  return {
+    ...baseUniDriverFactory(base),
+    getAddButtonText: () => base.text(),
+    clickAddButton: () => addItem.click(),
+    isAddButtonFocused: () => addItem.isFocused(),
+    getAudioName: () => base.$('[data-hook="fromAudioInput.audioName"]').text(),
+    audioPlayerExists: () =>
+      base.$('[data-hook="fromAudioInput.player"]').exists(),
+    clickMore: () => moreButton.click(),
+    clickDelete: () => deleteAction.click(),
+    clickReplace: () => replaceAction.click(),
+    isDeleteDisabled: () => isDisabled(deleteAction),
+    isReplaceDisabled: () => isDisabled(replaceAction),
+  };
+}

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_ = "formaudiofield2786863586";
+var _namespace_ = "formaudiofield1943540213";
 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":"formaudiofield2786863586__root","addItem":"formaudiofield2786863586__addItem","mediaTitle":"formaudiofield2786863586__mediaTitle"};
+export var classes = {"root":"formaudiofield1943540213__root","addItem":"formaudiofield1943540213__addItem","mediaTitle":"formaudiofield1943540213__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -9,6 +9,7 @@ import { useMergedRef, useTranslations, useWithCallback } from '../../../hooks';
 import { getMediaTitle, MEDIA_TYPES } from '../../../utils';
 
 import { Z_INDEX_MODAL_POPOVER } from '../../common';
+import type { ControlledInputProps } from '../../../types/controlled-input';
 import type { FormMediaControlProps } from '../../media-control';
 import { useMediaControl, useMediaHandlers } from '../../media-control';
 import { MediaLoader } from '../../media-loader';
@@ -17,11 +18,21 @@ import { buildAudioActions } from '../actions/audio-actions';
 
 import { style, classes } from './form-audio-field.st.css.js';
 
-export const FormAudioField: FC<FormMediaControlProps> = ({
+export interface FormAudioFieldProps extends FormMediaControlProps {
+  /**
+   * Fires when the media manager closes, whether or not a file was picked.
+   * A media field has no text control to blur, so the picker closing is its
+   * blur signal.
+   */
+  onBlur?: () => void;
+}
+
+export const FormAudioField: FC<FormAudioFieldProps> = ({
   data,
   onChange: onChangeAudio,
   onClear: onClearAudio,
   onInput,
+  onBlur,
   autoFocus,
   readOnly,
   invalid,
@@ -44,6 +55,7 @@ export const FormAudioField: FC<FormMediaControlProps> = ({
     readOnly,
     inputRef,
     viewRef,
+    onBlur,
   });
 
   const { handleReplace, handleDownload, handleDelete } = useMediaHandlers({
@@ -143,3 +155,31 @@ export const FormAudioField: FC<FormMediaControlProps> = ({
     </Box>
   );
 };
+
+export type ControlledAudioInputProps = ControlledInputProps<
+  string | undefined
+>;
+
+export const ControlledAudioInput: FC<ControlledAudioInputProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  invalid,
+  dataHook,
+}) => (
+  <FormAudioField
+    data={data}
+    onChange={onChange}
+    // FormAudioField reports deletion through onClear, not onChange.
+    onClear={() => onChange(undefined)}
+    onBlur={onBlur}
+    readOnly={readOnly}
+    autoFocus={autoFocus}
+    invalid={invalid}
+    dataHook={dataHook}
+  />
+);
+
+ControlledAudioInput.displayName = 'ControlledAudioInput';

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_ = "audioplayer4097600191";
+var _namespace_ = "audioplayer2417328348";
 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":"audioplayer4097600191__root"};
+export var classes = {"root":"audioplayer2417328348__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_ = "cellcolorview3962806897";
+var _namespace_ = "cellcolorview3557913876";
 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":"cellcolorview3962806897__root","hashPrefix":"cellcolorview3962806897__hashPrefix"};
+export var classes = {"root":"cellcolorview3557913876__root","hashPrefix":"cellcolorview3557913876__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_ = "colorview576033387";
+var _namespace_ = "colorview3341471977";
 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":"colorview576033387__root","view":"colorview576033387__view","fillPreview":"colorview576033387__fillPreview"};
+export var classes = {"root":"colorview3341471977__root","view":"colorview3341471977__view","fillPreview":"colorview3341471977__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/controlled-input.uni.driver.ts

@@ -13,7 +13,10 @@ import {
   CalendarPopoverUniDriver,
   InlineCalendarPopoverUniDriver,
 } from '../testkit/popover-driver';
+import { ControlledAudioInputUniDriver } from './audio/audio-field/controlled-audio.uni.driver';
 import { DateTimeInputUniDriver } from './datetime-input/controlled-date-time-input.uni.driver';
+import { ControlledImageInputUniDriver } from './image/controlled-image.uni.driver';
+import { ControlledVideoInputUniDriver } from './video/controlled-video.uni.driver';
 
 export function ControlledInputUniDriver(base: UniDriver, body: UniDriver) {
   const datePicker = DatePickerUniDriver(base, body);
@@ -30,5 +33,8 @@ export function ControlledInputUniDriver(base: UniDriver, body: UniDriver) {
     radioGroup: RadioGroupUniDriver(base, body),
     calendarPopover: CalendarPopoverUniDriver(datePicker, body),
     inlineCalendarPopover: InlineCalendarPopoverUniDriver(base),
+    audio: ControlledAudioInputUniDriver(base, body),
+    image: ControlledImageInputUniDriver(base, body),
+    video: ControlledVideoInputUniDriver(base, body),
   };
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog1755698330";
+var _namespace_ = "deletedialog516047347";
 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":"deletedialog1755698330__root","layout":"deletedialog1755698330__layout"};
+export var classes = {"root":"deletedialog516047347__root","layout":"deletedialog516047347__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_ = "formdocumentfield3098458741";
+var _namespace_ = "formdocumentfield1759869050";
 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":"formdocumentfield3098458741__root","viewWrapper":"formdocumentfield3098458741__viewWrapper","textWidth":"formdocumentfield3098458741__textWidth","documentLoader":"formdocumentfield3098458741__documentLoader","addDocument":"formdocumentfield3098458741__addDocument","addItemWrapper":"formdocumentfield3098458741__addItemWrapper"};
+export var classes = {"root":"formdocumentfield1759869050__root","viewWrapper":"formdocumentfield1759869050__viewWrapper","textWidth":"formdocumentfield1759869050__textWidth","documentLoader":"formdocumentfield1759869050__documentLoader","addDocument":"formdocumentfield1759869050__addDocument","addItemWrapper":"formdocumentfield1759869050__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation1838620114";
+var _namespace_ = "exclamation2405445415";
 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":"exclamation1838620114__root","exclamation":"exclamation1838620114__exclamation","actions":"exclamation1838620114__actions","action":"exclamation1838620114__action"};
+export var classes = {"root":"exclamation2405445415__root","exclamation":"exclamation2405445415__exclamation","actions":"exclamation2405445415__actions","action":"exclamation2405445415__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_ = "highlightedtext3755398177";
+var _namespace_ = "highlightedtext106472051";
 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":"highlightedtext3755398177__root","substring":"highlightedtext3755398177__substring"};
-export var keyframes = {"highlighted":"highlightedtext3755398177__highlighted","highlighted-match":"highlightedtext3755398177__highlighted-match"}; 
+export var classes = {"root":"highlightedtext106472051__root","substring":"highlightedtext106472051__substring"};
+export var keyframes = {"highlighted":"highlightedtext106472051__highlighted","highlighted-match":"highlightedtext106472051__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/controlled-image.uni.driver.ts

@@ -0,0 +1,30 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  AddItemUniDriver,
+  ImageViewerUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+export function ControlledImageInputUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  const imageViewer = ImageViewerUniDriver(base, body);
+  // `add-image` is ImageViewer's own hook for its empty-state AddItem.
+  const addItem = AddItemUniDriver(base.$('[data-hook="add-image"]'), body);
+  const addButton = base.$('[data-hook="add-image"] [data-hook="additem"]');
+  const currentImage = base.$('[data-hook="image-viewer-current-image"]');
+
+  return {
+    ...imageViewer,
+    clickAddButton: () => imageViewer.clickAdd(),
+    isAddButtonFocused: () => addItem.isFocused(),
+    isAddButtonDisabled: async () =>
+      (await addButton.attr('disabled')) !== null,
+    containsFocus: async () =>
+      (await base.getNative()).contains(document.activeElement),
+    // ImageViewer hides its edit affordances behind a loader until the image
+    // loads, and jsdom never fires that event on its own.
+    simulateImageLoad: async () =>
+      (await currentImage.getNative()).dispatchEvent(new Event('load')),
+  };
+}

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

@@ -0,0 +1,124 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { Box, ImageViewer } from '@wix/design-system';
+import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
+
+import type { ControlledInputProps } from '../../types/controlled-input';
+import { useMergedRef, useWithCallback } from '../../hooks';
+import { getImageUrl } from '../../utils/get-image-url';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
+import { MEDIA_TYPES } from '../../utils';
+import type { FormMediaControlProps } from '../media-control';
+import { useMediaControl } from '../media-control';
+
+interface ImageViewerActions {
+  focus: () => void;
+}
+
+// `invalid` is not part of this contract. ImageViewer has no error prop; it
+// takes its error styling from the enclosing WDS FormField's status context.
+// To show an error, render the field inside a FormField with status="error".
+export interface FormImageFieldProps
+  extends Omit<FormMediaControlProps, 'invalid'> {
+  /**
+   * Fires when the media manager closes, whether or not a file was picked.
+   * A media field has no text control to blur, so the picker closing is its
+   * blur signal.
+   */
+  onBlur?: () => void;
+}
+
+export const FormImageField: FC<FormImageFieldProps> = ({
+  data,
+  onChange: onChangeImage,
+  onClear: onClearImage,
+  onInput,
+  onBlur,
+  readOnly,
+  autoFocus,
+  dataHook,
+  inputRef: forwardedRef,
+}) => {
+  const { translate: t } = useWixPatternsContainer();
+  const isMobile = useIsMobile();
+
+  const onChange = useWithCallback(onChangeImage, onInput);
+  const onClear = useWithCallback(onClearImage, onInput);
+
+  const [inputRef, setInputRef] =
+    useMergedRef<ImageViewerActions>(forwardedRef);
+
+  const { callMedia, onMediaLoad } = useMediaControl({
+    mediaType: MEDIA_TYPES.IMAGE,
+    value: data,
+    onChange,
+    autoFocus,
+    readOnly,
+    onBlur,
+    inputRef,
+    // The focus target is hidden behind ImageViewer's loader until the image
+    // arrives, so focusing has to wait for onImageLoad.
+    initialLoading: true,
+  });
+
+  const canEdit = !isMobile && !readOnly;
+
+  return (
+    <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.
+        ref={setInputRef}
+        imageUrl={data && getImageUrl(data)}
+        dataHook={dataHook}
+        onImageLoad={onMediaLoad}
+        onAddImage={canEdit ? callMedia : undefined}
+        onUpdateImage={canEdit ? callMedia : undefined}
+        // Empty, the only control is the add button, so anything that blocks
+        // picking disables the viewer. Filled, removal still works on mobile.
+        disabled={data ? Boolean(readOnly) : !canEdit}
+        // The buttons render whether or not a handler is given, so the states
+        // that cannot use them have to take them away explicitly.
+        showUpdateButton={canEdit}
+        showRemoveButton={!readOnly && Boolean(onClearImage)}
+        updateImageInfo={t('cairo.replace-image.tooltip')}
+        removeImageInfo={t('cairo.remove-image.tooltip')}
+        addImageInfo={t('cairo.add-image.tooltip')}
+        height={MEDIA_HEIGHT}
+        width="100%"
+        fit="cover"
+        onRemoveImage={onClear}
+      />
+    </Box>
+  );
+};
+
+FormImageField.displayName = 'FormImageField';
+
+export type ControlledImageInputProps = Omit<
+  ControlledInputProps<string | undefined>,
+  'invalid'
+>;
+
+export const ControlledImageInput: FC<ControlledImageInputProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  dataHook,
+}) => (
+  <FormImageField
+    data={data}
+    onChange={onChange}
+    // FormImageField reports removal through onClear, not onChange.
+    onClear={() => onChange(undefined)}
+    onBlur={onBlur}
+    readOnly={readOnly}
+    autoFocus={autoFocus}
+    dataHook={dataHook}
+  />
+);
+
+ControlledImageInput.displayName = 'ControlledImageInput';

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

@@ -1,40 +1,20 @@
 import React from 'react';
-import { Box, FormField, ImageViewer } from '@wix/design-system';
+import { FormField } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
-import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 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';
+import { FormImageField } from './form-image-field';
 
 export interface FormImageInputProps extends BaseInputProps<string> {}
 
 const _FormImageInput = (props: FormImageInputProps) => {
   const { field, dataHook, formControl, data } = props;
 
-  const { translate: t, openMediaManager } = useWixPatternsContainer();
-  const isMobile = useIsMobile();
-
-  async function openMedia() {
-    if (!openMediaManager) {
-      return;
-    }
-    try {
-      const chosenMediaItems = await openMediaManager({
-        multiSelect: false,
-        category: 'IMAGE',
-      });
-
-      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;
-
-      controller.field.onChange(newImage);
-    } catch (error) {
-      console.error('Error opening Media Manager or no files selected:', error);
-    }
-  }
+  const { translate: t } = useWixPatternsContainer();
 
   const controller = useController({
     name: field?.id ?? '',
@@ -53,9 +33,6 @@ const _FormImageInput = (props: FormImageInputProps) => {
 
   const setFieldRef = useFieldRef(controller.field.ref);
 
-  const imageUrl =
-    controller.field.value && getImageUrl(controller.field.value);
-
   return (
     <FormField
       label={field.displayName}
@@ -64,25 +41,15 @@ const _FormImageInput = (props: FormImageInputProps) => {
       statusMessage={controller.fieldState.error?.message}
       dataHook={dataHook}
     >
-      <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()}
-          onUpdateImage={isMobile ? undefined : () => openMedia()}
-          updateImageInfo={t('cairo.replace-image.tooltip')}
-          removeImageInfo={t('cairo.remove-image.tooltip')}
-          addImageInfo={t('cairo.add-image.tooltip')}
-          height={MEDIA_HEIGHT}
-          width="100%"
-          fit="cover"
-          onRemoveImage={() => controller.field.onChange(null)}
-        />
-      </Box>
+      <FormImageField
+        // Hands the live button to react-hook-form so shouldFocusError can
+        // reach this field when it blocks save.
+        inputRef={setFieldRef}
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange(value)}
+        onClear={() => controller.field.onChange(null)}
+        dataHook={`image-${field.id}`}
+      />
     </FormField>
   );
 };

package/src/components/image/index.ts

@@ -2,4 +2,5 @@ export * from './image-thumbnail';
 export * from './image-view';
 export * from './image-view-field';
 export * from './cell-image-edit';
+export * from './form-image-field';
 export * from './form-image-input';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay75913383";
+var _namespace_ = "thumbnailreplaceoverlay1401102869";
 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":"thumbnailreplaceoverlay75913383__root","icon":"thumbnailreplaceoverlay75913383__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1401102869__root","icon":"thumbnailreplaceoverlay1401102869__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_ = "cellmediaeditshell2618943078";
+var _namespace_ = "cellmediaeditshell2282788607";
 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":"cellmediaeditshell2618943078__root"};
+export var classes = {"root":"cellmediaeditshell2282788607__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_ = "pasteurlbutton3914974378";
+var _namespace_ = "pasteurlbutton2169628829";
 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":"pasteurlbutton3914974378__root","iconButtonTooltip":"pasteurlbutton3914974378__iconButtonTooltip","iconButton":"pasteurlbutton3914974378__iconButton"};
+export var classes = {"root":"pasteurlbutton2169628829__root","iconButtonTooltip":"pasteurlbutton2169628829__iconButtonTooltip","iconButton":"pasteurlbutton2169628829__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/use-media-control.ts

@@ -2,8 +2,7 @@ import { useRef, useState, useEffect, useCallback, useContext } from 'react';
 import { WixPatternsContainerContext } from '@wix/bex-core/react';
 import { files } from '@wix/media';
 
-import { MEDIA_TYPES } from '../../utils/media-utils';
-import { executeDownloading } from '../../utils/media-utils';
+import { executeDownloading, MEDIA_TYPES } from '../../utils/media-utils';
 import { getMediaURL } from '../../auto-field-types';
 
 type Focusable = { focus: () => void };
@@ -152,7 +151,9 @@ export function useMediaControl({
     }
   }, [autoFocus, value, inputRef, viewRef]);
 
-  useEffect(() => setActive(), [setActive]);
+  // `loading` is a dependency because the focus target does not exist while the
+  // loader placeholder is up — the effect has to run again once it is gone.
+  useEffect(() => setActive(), [setActive, loading]);
 
   const onMediaLoad = useCallback(() => setLoading(false), []);