@wix/patterns-fields 1.71.0 → 1.73.0

package/dist/types/components/rich-text/form-rich-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-rich-text.d.ts","sourceRoot":"","sources":["../../../../src/components/rich-text/form-rich-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAUxD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;AAiEpE,eAAO,MAAM,YAAY,WA/DK,iBAAiB;;CA+DI,CAAC"}
+{"version":3,"file":"form-rich-text.d.ts","sourceRoot":"","sources":["../../../../src/components/rich-text/form-rich-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAUxD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;AA0EpE,eAAO,MAAM,YAAY,WAxEK,iBAAiB;;CAwEI,CAAC"}

package/dist/types/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;CAA8I,CAAC;AACjK,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;;;;;;;;CAAsb,CAAC"}
+{"version":3,"file":"rich-text-editor.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;CAA2I,CAAC;AAC9J,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;;;;;;;;CAAsb,CAAC"}

package/dist/types/hooks/index.d.ts

@@ -7,4 +7,6 @@ export * from './use-translations';
 export * from './use-with-callback';
 export * from './use-resize-effect';
 export * from './use-cell-edit-keyboard';
+export * from './use-merged-ref';
+export * from './use-scroll-to-error-ref';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}

package/dist/types/hooks/use-merged-ref.d.ts

@@ -0,0 +1,11 @@
+import type { MutableRefObject, Ref } from 'react';
+/**
+ * Keeps a component's own ref filled while also handing the value to a
+ * caller's ref.
+ *
+ * Media inputs need both: the local ref drives `autoFocus` and media
+ * callbacks, while a caller such as react-hook-form supplies its own ref to
+ * focus the field when it blocks save.
+ */
+export declare const useMergedRef: <T>(forwarded?: Ref<T> | undefined) => [MutableRefObject<T | null>, (value: T | null) => void];
+//# sourceMappingURL=use-merged-ref.d.ts.map

package/dist/types/hooks/use-merged-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-merged-ref.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merged-ref.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGnD;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,2FAE4B,IAAI,CAgBxD,CAAC"}

package/dist/types/hooks/use-scroll-to-error-ref.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Ref for a field whose control cannot be handed to react-hook-form directly.
+ *
+ * react-hook-form focuses an invalid field by calling `focus()` on whatever
+ * was registered, so registering a plain wrapper element does nothing — a
+ * `div` is not focusable and the call is silently dropped. Registering an
+ * object with a `focus()` of our own works instead: it brings the wrapper
+ * into view, then focuses the control inside it when there is one.
+ *
+ * @param registerRef `controller.field.ref` from useController.
+ * @param focusSelector Control to focus inside the wrapper, when present.
+ */
+export declare const useScrollToErrorRef: <T extends HTMLElement>(registerRef: (instance: unknown) => void, focusSelector: string) => (element: T | null) => void;
+//# sourceMappingURL=use-scroll-to-error-ref.d.ts.map

package/dist/types/hooks/use-scroll-to-error-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll-to-error-ref.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-scroll-to-error-ref.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,kDACN,OAAO,KAAK,IAAI,iBACzB,MAAM,gCAiBpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.71.0",
+  "version": "1.73.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -124,10 +124,10 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.52.0",
+    "@wix/patterns-fields-utils": "1.54.0",
     "@wix/rich-content": "1.0.37",
     "@wix/sdk": "^1.17.2",
-    "@wix/wix-ui-icons-common": "^3.187.0",
+    "@wix/wix-ui-icons-common": "^3.189.0",
     "color": "^2.0.1",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",
@@ -152,8 +152,8 @@
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
     "@wix/babel-cli": "^1.11.0",
-    "@wix/bex-core": "2.349.0",
-    "@wix/design-system": "^1.307.0",
+    "@wix/bex-core": "2.351.0",
+    "@wix/design-system": "^1.314.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
     "@wix/wix-data-items-common": "^1.0.270",
@@ -168,7 +168,7 @@
   },
   "peerDependencies": {
     "@wix/bex-core": "^2.284.0",
-    "@wix/design-system": "^1.307.0",
+    "@wix/design-system": "^1.314.0",
     "mobx": "^6.1.8",
     "react": "^16.8.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^18.0.0"
@@ -212,5 +212,5 @@
       "optional": true
     }
   },
-  "falconPackageHash": "afeb276cc00c7b0de563fc0f3c027524447498a2f3e5c3e8bababd2f"
+  "falconPackageHash": "772c06391e8c8c0054dd3a1efbcbb58220b2237b346f1b57f9b2ea0f"
 }

package/src/__tests__/components/audio/form-audio.spec.tsx

@@ -60,4 +60,26 @@ describe('FormAudio 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: 'AUDIO',
+      validation: { required: true },
+    });
+    const driver = setup({ field });
+
+    await driver.submit();
+
+    const active = document.activeElement;
+    expect(active?.tagName).toBe('BUTTON');
+    expect(
+      document
+        .querySelector(`[data-hook="audio-field-${field.id}"]`)
+        ?.contains(active),
+    ).toBe(true);
+  });
+
 });

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

@@ -51,4 +51,26 @@ describe('FormDocument 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: '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="document-field-${field.id}"]`)
+        ?.contains(active),
+    ).toBe(true);
+  });
+
 });

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

@@ -262,14 +262,6 @@ describe('<FormMultiDocumentField/>', () => {
         await documentControlActionsTestkit.clickPopoverMenu();
       });
 
-      const replaceAction =
-        await documentControlActionsTestkit.getVisibleActionByDataHookButtonDriver(
-          'document-view-replace-action',
-        );
-
-      // no text for the visibleAction so just verify it exists
-      expect(await replaceAction.exists()).toBe(true);
-
       expect(await secondaryActionsTestKit.isMenuOpen()).toBe(true);
       expect(await secondaryActionsTestKit.itemContentAt(0)).toContain(
         'replace',

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

@@ -72,4 +72,26 @@ describe('FormImageInput 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: 'IMAGE',
+      validation: { required: true },
+    });
+    const driver = setup({ field });
+
+    await driver.submit();
+
+    const active = document.activeElement;
+    expect(active?.tagName).toBe('BUTTON');
+    expect(
+      document
+        .querySelector(`[data-hook="image-field-${field.id}"]`)
+        ?.contains(active),
+    ).toBe(true);
+  });
+
 });

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_ = "addressinput3690428257";
+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":"addressinput3690428257__root","tableAddressInput":"addressinput3690428257__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_ = "actionsmenu966318229";
+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":"actionsmenu966318229__root","action":"actionsmenu966318229__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_ = "formaudiofield1104303151";
+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":"formaudiofield1104303151__root","addItem":"formaudiofield1104303151__addItem","mediaTitle":"formaudiofield1104303151__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_ = "audioplayer1434128477";
+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":"audioplayer1434128477__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_ = "cellcolorview119324243";
+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":"cellcolorview119324243__root","hashPrefix":"cellcolorview119324243__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_ = "colorview1899380221";
+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":"colorview1899380221__root","view":"colorview1899380221__view","fillPreview":"colorview1899380221__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_ = "deletedialog2731005548";
+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":"deletedialog2731005548__root","layout":"deletedialog2731005548__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_ = "formdocumentfield1775343895";
+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":"formdocumentfield1775343895__root","viewWrapper":"formdocumentfield1775343895__viewWrapper","textWidth":"formdocumentfield1775343895__textWidth","documentLoader":"formdocumentfield1775343895__documentLoader","addDocument":"formdocumentfield1775343895__addDocument","addItemWrapper":"formdocumentfield1775343895__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_ = "exclamation2710007777";
+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":"exclamation2710007777__root","exclamation":"exclamation2710007777__exclamation","actions":"exclamation2710007777__actions","action":"exclamation2710007777__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_ = "highlightedtext892833628";
+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":"highlightedtext892833628__root","substring":"highlightedtext892833628__substring"};
-export var keyframes = {"highlighted":"highlightedtext892833628__highlighted","highlighted-match":"highlightedtext892833628__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 = {};