@wix/patterns-fields 1.72.0 → 1.73.0

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1546745211";
+var _namespace_ = "medialoader142891810";
 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":"medialoader1546745211__root","loader":"medialoader1546745211__loader"};
+export var classes = {"root":"medialoader142891810__root","loader":"medialoader142891810__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

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

package/src/components/multi-document/cell-multi-document-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultidocumentedit418830372";
+var _namespace_ = "cellmultidocumentedit2776735104";
 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":"cellmultidocumentedit418830372__root","chipTrigger":"cellmultidocumentedit418830372__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit2776735104__root","chipTrigger":"cellmultidocumentedit2776735104__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document-field.tsx

@@ -10,7 +10,7 @@ import {
   usePasteURLForm,
 } from '../../media-control';
 import { FormDocumentInput } from '../../document/form';
-import { useTranslations, useWithCallback } from '../../../hooks';
+import { useMergedRef, useTranslations, useWithCallback } from '../../../hooks';
 
 import { FormMultiDocumentView } from './form-multi-document-view';
 
@@ -24,12 +24,13 @@ export const FormMultiDocumentField: React.FC<
   readOnly,
   invalid,
   dataHook,
+  inputRef: forwardedRef,
 }) => {
   const { t } = useTranslations();
 
   const onChange = useWithCallback(onChangeMultiDocument, onInput);
 
-  const inputRef = useRef<AddItemActions>(null);
+  const [inputRef, setInputRef] = useMergedRef<AddItemActions>(forwardedRef);
   const firstDocumentViewRef = useRef<HTMLDivElement>(null);
 
   const { callMedia, loading, downloadMedia } = useMediaControl({
@@ -77,7 +78,7 @@ export const FormMultiDocumentField: React.FC<
       ) : (
         <FormDocumentInput
           dataHook={dataHook}
-          ref={inputRef}
+          ref={setInputRef}
           theme="dashes"
           disabled={readOnly}
           loading={loading}

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument2351500344";
+var _namespace_ = "formmultidocument857357206";
 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":"formmultidocument2351500344__root","viewRoot":"formmultidocument2351500344__viewRoot","singleViewWrapper":"formmultidocument2351500344__singleViewWrapper","addDocumentButton":"formmultidocument2351500344__addDocumentButton"};
+export var classes = {"root":"formmultidocument857357206__root","viewRoot":"formmultidocument857357206__viewRoot","singleViewWrapper":"formmultidocument857357206__singleViewWrapper","addDocumentButton":"formmultidocument857357206__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.tsx

@@ -39,6 +39,10 @@ const _FormMultiDocument = (props: FormMultiDocumentProps) => {
       dataHook={dataHook}
     >
       <FormMultiDocumentField
+        // 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)}
         dataHook={`multi-document-${field.id}`}

package/src/components/reference/cell-multi-reference-input.st.css.ts

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

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput4252962194";
+var _namespace_ = "cellreferenceinput1109486214";
 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":"cellreferenceinput4252962194__root","autocomplete":"cellreferenceinput4252962194__autocomplete"};
+export var classes = {"root":"cellreferenceinput1109486214__root","autocomplete":"cellreferenceinput1109486214__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormField } from '@wix/design-system';
+import { Box, FormField } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import type {
   RichContent as RichContentType,
@@ -11,7 +11,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
-import { useTranslations } from '../../hooks';
+import { useScrollToErrorRef, useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 import {
   isDataValidOrNotSet,
@@ -49,6 +49,14 @@ const _FormRichContent = (props: FormRichContentProps) => {
     richContentValidation,
   );
 
+  // The editor is lazy and exposes no focus handle, so hand react-hook-form
+  // a wrapper it can bring into view instead. The wrapper stays mounted even
+  // when the value is the wrong type and the editor is not rendered.
+  const setScrollToErrorRef = useScrollToErrorRef<HTMLDivElement>(
+    controller.field.ref,
+    '[contenteditable]',
+  );
+
   return (
     <FormField
       label={field.displayName}
@@ -78,18 +86,20 @@ const _FormRichContent = (props: FormRichContentProps) => {
         )
       }
     >
-      {isValueValid ? (
-        <FormRichContentInput
-          autoFocus={false}
-          data={controller.field.value}
-          onChange={(value) => controller.field.onChange?.(value)}
-          dataHook={`rich-content-${field.id}`}
-          field={field.id}
-          theme={theme}
-          experiments={ricosExperiments}
-          isSiteMetadataLoading={false}
-        />
-      ) : null}
+      <Box direction="vertical" width="100%" ref={setScrollToErrorRef}>
+        {isValueValid ? (
+          <FormRichContentInput
+            autoFocus={false}
+            data={controller.field.value}
+            onChange={(value) => controller.field.onChange?.(value)}
+            dataHook={`rich-content-${field.id}`}
+            field={field.id}
+            theme={theme}
+            experiments={ricosExperiments}
+            isSiteMetadataLoading={false}
+          />
+        ) : null}
+      </Box>
     </FormField>
   );
 };

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput2495321966";
+var _namespace_ = "richcontentdefaultvalueinput4174470607";
 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":"richcontentdefaultvalueinput2495321966__root","richContentEditorContainer":"richcontentdefaultvalueinput2495321966__richContentEditorContainer","editor":"richcontentdefaultvalueinput2495321966__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput4174470607__root","richContentEditorContainer":"richcontentdefaultvalueinput4174470607__richContentEditorContainer","editor":"richcontentdefaultvalueinput4174470607__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput602859887";
+var _namespace_ = "richcontentforminput1903671592";
 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":"richcontentforminput602859887__root","editor":"richcontentforminput602859887__editor"};
+export var classes = {"root":"richcontentforminput1903671592__root","editor":"richcontentforminput1903671592__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput558638497";
+var _namespace_ = "richcontentformreadonlyinput172558332";
 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":"richcontentformreadonlyinput558638497__root"};
+export var classes = {"root":"richcontentformreadonlyinput172558332__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal764723727";
+var _namespace_ = "fullscreenmodal208254918";
 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":"fullscreenmodal764723727__root","modalContent":"fullscreenmodal764723727__modalContent"};
+export var classes = {"root":"fullscreenmodal208254918__root","modalContent":"fullscreenmodal208254918__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "publishloader2401052820";
+var _namespace_ = "publishloader1461570400";
 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":"publishloader2401052820__root","publishLoader":"publishloader2401052820__publishLoader"};
+export var classes = {"root":"publishloader1461570400__root","publishLoader":"publishloader1461570400__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "togglefullscreenbutton3370326329";
+var _namespace_ = "togglefullscreenbutton2385173147";
 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":"togglefullscreenbutton3370326329__root"};
+export var classes = {"root":"togglefullscreenbutton2385173147__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenteditor351007601";
+var _namespace_ = "richcontenteditor3535846372";
 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":"richcontenteditor351007601__root","toolbarContainer":"richcontenteditor351007601__toolbarContainer","footerToolbarContainer":"richcontenteditor351007601__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor351007601__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor351007601__editor","modalEditor":"richcontenteditor351007601__modalEditor"};
+export var classes = {"root":"richcontenteditor3535846372__root","toolbarContainer":"richcontenteditor3535846372__toolbarContainer","footerToolbarContainer":"richcontenteditor3535846372__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3535846372__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3535846372__editor","modalEditor":"richcontenteditor3535846372__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenttoolbar2679013044";
+var _namespace_ = "richcontenttoolbar2126134109";
 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":"richcontenttoolbar2679013044__root","toolbar":"richcontenttoolbar2679013044__toolbar","toolbarButton":"richcontenttoolbar2679013044__toolbarButton","separator":"richcontenttoolbar2679013044__separator"};
+export var classes = {"root":"richcontenttoolbar2126134109__root","toolbar":"richcontenttoolbar2126134109__toolbar","toolbarButton":"richcontenttoolbar2126134109__toolbarButton","separator":"richcontenttoolbar2126134109__separator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentviewer253217533";
+var _namespace_ = "richcontentviewer3587365751";
 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":"richcontentviewer253217533__root","viewer":"richcontentviewer253217533__viewer","modalViewer":"richcontentviewer253217533__modalViewer"};
+export var classes = {"root":"richcontentviewer3587365751__root","viewer":"richcontentviewer3587365751__viewer","modalViewer":"richcontentviewer3587365751__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { FormField } from '@wix/design-system';
+import { Box, FormField } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
-import { useTranslations } from '../../hooks';
+import { useScrollToErrorRef, useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 import {
   isDataValidOrNotSet,
@@ -36,6 +36,13 @@ const _FormRichText = (props: FormRichTextProps) => {
     },
   });
 
+  // The editor is lazy and exposes no focus handle, so hand react-hook-form
+  // a wrapper it can bring into view instead.
+  const setScrollToErrorRef = useScrollToErrorRef<HTMLDivElement>(
+    controller.field.ref,
+    '[contenteditable]',
+  );
+
   return (
     <FormField
       label={field.displayName}
@@ -68,13 +75,15 @@ const _FormRichText = (props: FormRichTextProps) => {
         )
       }
     >
-      <FormRichTextInput
-        autoFocus={false}
-        data={controller.field.value}
-        onChange={(value) => controller.field.onChange?.(value)}
-        dataHook={`rich-text-${field.id}`}
-        field={field.id}
-      />
+      <Box width="100%" ref={setScrollToErrorRef}>
+        <FormRichTextInput
+          autoFocus={false}
+          data={controller.field.value}
+          onChange={(value) => controller.field.onChange?.(value)}
+          dataHook={`rich-text-${field.id}`}
+          field={field.id}
+        />
+      </Box>
     </FormField>
   );
 };

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor3731566269";
+var _namespace_ = "richeditor3576807230";
 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":"richeditor3731566269__root","editor":"richeditor3731566269__editor","header-one":"richeditor3731566269__header-one","header-two":"richeditor3731566269__header-two","header-three":"richeditor3731566269__header-three","header-four":"richeditor3731566269__header-four","header-five":"richeditor3731566269__header-five","header-six":"richeditor3731566269__header-six","paragraph-one":"richeditor3731566269__paragraph-one","unstyled":"richeditor3731566269__unstyled","paragraph-three":"richeditor3731566269__paragraph-three","align-left":"richeditor3731566269__align-left","align-right":"richeditor3731566269__align-right","align-center":"richeditor3731566269__align-center","align-justify":"richeditor3731566269__align-justify","withMargin":"richeditor3731566269__withMargin","dir-rtl":"richeditor3731566269__dir-rtl"};
+export var classes = {"root":"richeditor3576807230__root","editor":"richeditor3576807230__editor","header-one":"richeditor3576807230__header-one","header-two":"richeditor3576807230__header-two","header-three":"richeditor3576807230__header-three","header-four":"richeditor3576807230__header-four","header-five":"richeditor3576807230__header-five","header-six":"richeditor3576807230__header-six","paragraph-one":"richeditor3576807230__paragraph-one","unstyled":"richeditor3576807230__unstyled","paragraph-three":"richeditor3576807230__paragraph-three","align-left":"richeditor3576807230__align-left","align-right":"richeditor3576807230__align-right","align-center":"richeditor3576807230__align-center","align-justify":"richeditor3576807230__align-justify","withMargin":"richeditor3576807230__withMargin","dir-rtl":"richeditor3576807230__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor316354853";
+var _namespace_ = "richtexteditor770686478";
 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":"richtexteditor316354853__root","nativeInput":"richtexteditor316354853__nativeInput","editor":"richtexteditor316354853__editor"};
+export var classes = {"root":"richtexteditor770686478__root","nativeInput":"richtexteditor770686478__nativeInput","editor":"richtexteditor770686478__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar2015891380";
+var _namespace_ = "toolbar4106329138";
 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":"toolbar2015891380__root","item":"toolbar2015891380__item","separator":"toolbar2015891380__separator","clearFormatting":"toolbar2015891380__clearFormatting","fullScreen":"toolbar2015891380__fullScreen","dropdownItemContent":"toolbar2015891380__dropdownItemContent","dropdownItemTitle":"toolbar2015891380__dropdownItemTitle","dropdownItemSubtitle":"toolbar2015891380__dropdownItemSubtitle","dropdownHeaderOne":"toolbar2015891380__dropdownHeaderOne","dropdownHeaderTwo":"toolbar2015891380__dropdownHeaderTwo","dropdownHeaderThree":"toolbar2015891380__dropdownHeaderThree","dropdownHeaderFour":"toolbar2015891380__dropdownHeaderFour","dropdownHeaderFive":"toolbar2015891380__dropdownHeaderFive","dropdownHeaderSix":"toolbar2015891380__dropdownHeaderSix","dropdownParagraphOne":"toolbar2015891380__dropdownParagraphOne","dropdownNormalText":"toolbar2015891380__dropdownNormalText","dropdownParagraphThree":"toolbar2015891380__dropdownParagraphThree"};
+export var classes = {"root":"toolbar4106329138__root","item":"toolbar4106329138__item","separator":"toolbar4106329138__separator","clearFormatting":"toolbar4106329138__clearFormatting","fullScreen":"toolbar4106329138__fullScreen","dropdownItemContent":"toolbar4106329138__dropdownItemContent","dropdownItemTitle":"toolbar4106329138__dropdownItemTitle","dropdownItemSubtitle":"toolbar4106329138__dropdownItemSubtitle","dropdownHeaderOne":"toolbar4106329138__dropdownHeaderOne","dropdownHeaderTwo":"toolbar4106329138__dropdownHeaderTwo","dropdownHeaderThree":"toolbar4106329138__dropdownHeaderThree","dropdownHeaderFour":"toolbar4106329138__dropdownHeaderFour","dropdownHeaderFive":"toolbar4106329138__dropdownHeaderFive","dropdownHeaderSix":"toolbar4106329138__dropdownHeaderSix","dropdownParagraphOne":"toolbar4106329138__dropdownParagraphOne","dropdownNormalText":"toolbar4106329138__dropdownNormalText","dropdownParagraphThree":"toolbar4106329138__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview1751545812";
+var _namespace_ = "textview955586509";
 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":"textview1751545812__root","textView":"textview1751545812__textView"};
+export var classes = {"root":"textview955586509__root","textView":"textview955586509__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/index.ts

@@ -7,3 +7,5 @@ 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';

package/src/hooks/use-merged-ref.ts

@@ -0,0 +1,30 @@
+import type { MutableRefObject, Ref } from 'react';
+import { useCallback, useRef } 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 const useMergedRef = <T>(
+  forwarded?: Ref<T>,
+): [MutableRefObject<T | null>, (value: T | null) => void] => {
+  const localRef = useRef<T | null>(null);
+
+  const setRef = useCallback(
+    (value: T | null) => {
+      localRef.current = value;
+      if (typeof forwarded === 'function') {
+        forwarded(value);
+      } else if (forwarded) {
+        (forwarded as MutableRefObject<T | null>).current = value;
+      }
+    },
+    [forwarded],
+  );
+
+  return [localRef, setRef];
+};

package/src/hooks/use-scroll-to-error-ref.ts

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+
+/**
+ * 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 const useScrollToErrorRef = <T extends HTMLElement>(
+  registerRef: (instance: unknown) => void,
+  focusSelector: string,
+) =>
+  useCallback(
+    (element: T | null) => {
+      if (!element) {
+        return;
+      }
+
+      registerRef({
+        focus: () => {
+          // Not implemented in jsdom.
+          element.scrollIntoView?.({ block: 'center' });
+          element.querySelector<HTMLElement>(focusSelector)?.focus();
+        },
+      });
+    },
+    [registerRef, focusSelector],
+  );