@wix/patterns-fields 1.33.0 → 1.35.0

package/src/__tests__/components/text/form-short-text.spec.tsx

@@ -0,0 +1,104 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormShortText } from '../../../components/text/form-short-text';
+import { FormShortTextDriver } from '../../../components/text/form-short-text.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormShortText,
+    UniDriverFactory: FormShortTextDriver,
+    dataHook: (f) => `short-text-field-${f.id}`,
+    field: overrides.field,
+    initialValue: overrides.initialValue ?? '',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormShortText field', () => {
+  it('renders the field displayName as the label', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.getLabel()).toBe(driver.field.displayName);
+  });
+
+  it('shows the initial value from data', async () => {
+    const driver = setup({ initialValue: 'hello' });
+
+    expect(await driver.tk.getValue()).toBe('hello');
+  });
+
+  it('updates the displayed value as the user types', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('typed');
+
+    expect(await driver.tk.getValue()).toBe('typed');
+  });
+
+  it('shows charCount left when maxLength is set', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, stringLengthRange: { maxLength: 10 } },
+      }),
+      initialValue: 'abc',
+    });
+
+    expect(await driver.tk.getCharCountLeft()).toBe(7);
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ validation: { required: true } }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('shows a required error when the user clears a required field', async () => {
+    const driver = setup({
+      field: makeField({ validation: { required: true } }),
+      initialValue: 'something',
+    });
+
+    await driver.tk.enterText('');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+
+  it('shows a minLength error when the value is too short', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, stringLengthRange: { minLength: 5 } },
+      }),
+    });
+
+    await driver.tk.enterText('ab');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.minCharacter{charMin=5}',
+    );
+  });
+
+  it('shows a maxLength error when the value is too long', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, stringLengthRange: { maxLength: 3 } },
+      }),
+    });
+
+    await driver.tk.enterText('abcd');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.maxCharacter{charMax=3}',
+    );
+  });
+});

package/src/__tests__/form-field.driver.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+import Chance from 'chance';
+import { useForm } from '@wix/bex-core/form';
+import type { Control, FieldValues } from '@wix/bex-core/form';
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import type { BaseUniDriver } from '@wix/wix-ui-test-utils/base-driver';
+import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/testing-library';
+
+import { PatternsFieldsTestProvider } from '../testkit/patterns-fields-test-provider';
+import type { BaseInputProps } from '../types/base-input';
+
+const chance = new Chance();
+
+type UniDriverFactory<U> = (base: UniDriver, body: UniDriver) => U;
+
+export interface FormFieldDriverOptions<U extends BaseUniDriver, T> {
+  Component: React.ComponentType<BaseInputProps<T>>;
+  UniDriverFactory: UniDriverFactory<U>;
+  dataHook: (field: Field) => string;
+  field?: Field;
+  initialValue: T;
+}
+
+export class FormFieldDriver<U extends BaseUniDriver, T> {
+  private _renderResult?: RenderResult;
+  readonly field: Field;
+  readonly initialValue: T;
+  readonly onChange = jest.fn<void, [T]>();
+  private readonly opts: FormFieldDriverOptions<U, T>;
+  private readonly _dataHook: string;
+
+  constructor(opts: FormFieldDriverOptions<U, T>) {
+    this.opts = opts;
+    this.field = opts.field ?? makeField();
+    this.initialValue = opts.initialValue;
+    this._dataHook = opts.dataHook(this.field);
+  }
+
+  get tk(): U {
+    return uniTestkitFactoryCreator(this.opts.UniDriverFactory)({
+      wrapper: this._renderResult!.baseElement,
+      dataHook: this._dataHook,
+    });
+  }
+
+  render() {
+    const { Component } = this.opts;
+    const { field, initialValue, _dataHook: dataHook, onChange } = this;
+    this._renderResult = render(
+      <TestComponent
+        field={field}
+        initialValue={initialValue}
+        renderField={(control) => (
+          <Component
+            field={field}
+            value={initialValue}
+            onChange={onChange}
+            dataHook={dataHook}
+            formControl={control}
+            data={{ [field.id]: initialValue }}
+          />
+        )}
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+  }
+}
+
+interface TestComponentProps<T> {
+  field: Field;
+  initialValue: T;
+  renderField: (control: Control<FieldValues>) => React.ReactElement;
+}
+
+const TestComponent = <T,>({
+  field,
+  initialValue,
+  renderField,
+}: TestComponentProps<T>) => {
+  const { control } = useForm<FieldValues>({
+    mode: 'onChange',
+    defaultValues: { [field.id]: initialValue },
+  });
+  return renderField(control);
+};
+
+export function makeField(overrides: Partial<Field> = {}): Field {
+  return {
+    id: chance.guid(),
+    displayName: chance.sentence({ words: 3 }),
+    type: 'SHORT_TEXT',
+    ...overrides,
+  } as Field;
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput729874005";
+var _namespace_ = "addressinput2425235973";
 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":"addressinput729874005__root","tableAddressInput":"addressinput729874005__tableAddressInput"};
+export var classes = {"root":"addressinput2425235973__root","tableAddressInput":"addressinput2425235973__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_ = "actionsmenu2444683558";
+var _namespace_ = "actionsmenu244569486";
 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":"actionsmenu2444683558__root","action":"actionsmenu2444683558__action"};
+export var classes = {"root":"actionsmenu244569486__root","action":"actionsmenu244569486__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_ = "formaudiofield1088573464";
+var _namespace_ = "formaudiofield3934724193";
 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":"formaudiofield1088573464__root","addItem":"formaudiofield1088573464__addItem","mediaTitle":"formaudiofield1088573464__mediaTitle"};
+export var classes = {"root":"formaudiofield3934724193__root","addItem":"formaudiofield3934724193__addItem","mediaTitle":"formaudiofield3934724193__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "audioplayer1564949382";
+var _namespace_ = "audioplayer315551720";
 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":"audioplayer1564949382__root"};
+export var classes = {"root":"audioplayer315551720__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/boolean/form-checkbox.driver.ts

@@ -0,0 +1,13 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { CheckboxUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormCheckboxDriver(base: UniDriver, body: UniDriver) {
+  const checkbox = CheckboxUniDriver(base, body);
+  return {
+    ...baseUniDriverFactory(base),
+    isChecked: () => checkbox.isChecked(),
+    toggle: () => checkbox.click(),
+    getLabel: () => checkbox.getLabel(),
+  };
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Checkbox } from '@wix/design-system';
+import { BaseInputProps } from '../../types/base-input';
+
+export interface FormCheckboxProps extends BaseInputProps<boolean> {}
+
+export const FormCheckbox = (props: FormCheckboxProps) => {
+  const { field, onChange, value, dataHook } = props;
+
+  return (
+    <Checkbox
+      checked={value}
+      onChange={(e) => {
+        onChange(e.target.checked);
+      }}
+      dataHook={dataHook ?? `checkbox-${field.id}`}
+    >
+      {field.displayName}
+    </Checkbox>
+  );
+};

package/src/components/boolean/index.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview2222739831";
+var _namespace_ = "colorview1187221222";
 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":"colorview2222739831__root","view":"colorview2222739831__view","fillPreview":"colorview2222739831__fillPreview"};
+export var classes = {"root":"colorview1187221222__root","view":"colorview1187221222__view","fillPreview":"colorview1187221222__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_ = "deletedialog1823883360";
+var _namespace_ = "deletedialog1598107043";
 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":"deletedialog1823883360__root","layout":"deletedialog1823883360__layout"};
+export var classes = {"root":"deletedialog1598107043__root","layout":"deletedialog1598107043__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_ = "formdocumentfield2675233247";
+var _namespace_ = "formdocumentfield3746585343";
 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":"formdocumentfield2675233247__root","viewWrapper":"formdocumentfield2675233247__viewWrapper","textWidth":"formdocumentfield2675233247__textWidth","documentLoader":"formdocumentfield2675233247__documentLoader","addDocument":"formdocumentfield2675233247__addDocument","addItemWrapper":"formdocumentfield2675233247__addItemWrapper"};
+export var classes = {"root":"formdocumentfield3746585343__root","viewWrapper":"formdocumentfield3746585343__viewWrapper","textWidth":"formdocumentfield3746585343__textWidth","documentLoader":"formdocumentfield3746585343__documentLoader","addDocument":"formdocumentfield3746585343__addDocument","addItemWrapper":"formdocumentfield3746585343__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_ = "exclamation3841682411";
+var _namespace_ = "exclamation2381589603";
 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":"exclamation3841682411__root","exclamation":"exclamation3841682411__exclamation","actions":"exclamation3841682411__actions","action":"exclamation3841682411__action"};
+export var classes = {"root":"exclamation2381589603__root","exclamation":"exclamation2381589603__exclamation","actions":"exclamation2381589603__actions","action":"exclamation2381589603__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_ = "highlightedtext1497165029";
+var _namespace_ = "highlightedtext4239267361";
 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":"highlightedtext1497165029__root","substring":"highlightedtext1497165029__substring"};
-export var keyframes = {"highlighted":"highlightedtext1497165029__highlighted","highlighted-match":"highlightedtext1497165029__highlighted-match"}; 
+export var classes = {"root":"highlightedtext4239267361__root","substring":"highlightedtext4239267361__substring"};
+export var keyframes = {"highlighted":"highlightedtext4239267361__highlighted","highlighted-match":"highlightedtext4239267361__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay4228634431";
+var _namespace_ = "thumbnailreplaceoverlay2773158491";
 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":"thumbnailreplaceoverlay4228634431__root","icon":"thumbnailreplaceoverlay4228634431__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2773158491__root","icon":"thumbnailreplaceoverlay2773158491__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_ = "cellmediaeditshell2491537557";
+var _namespace_ = "cellmediaeditshell45116818";
 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":"cellmediaeditshell2491537557__root"};
+export var classes = {"root":"cellmediaeditshell45116818__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_ = "pasteurlbutton3895047373";
+var _namespace_ = "pasteurlbutton1313810729";
 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":"pasteurlbutton3895047373__root","iconButtonTooltip":"pasteurlbutton3895047373__iconButtonTooltip","iconButton":"pasteurlbutton3895047373__iconButton"};
+export var classes = {"root":"pasteurlbutton1313810729__root","iconButtonTooltip":"pasteurlbutton1313810729__iconButtonTooltip","iconButton":"pasteurlbutton1313810729__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield522227644";
+var _namespace_ = "formmediagalleryfield216174486";
 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":"formmediagalleryfield522227644__root","container":"formmediagalleryfield522227644__container","viewBox":"formmediagalleryfield522227644__viewBox","addItemWrapper":"formmediagalleryfield522227644__addItemWrapper","addItem":"formmediagalleryfield522227644__addItem","overlay":"formmediagalleryfield522227644__overlay","image":"formmediagalleryfield522227644__image","previewImage":"formmediagalleryfield522227644__previewImage","previewVideo":"formmediagalleryfield522227644__previewVideo"};
+export var classes = {"root":"formmediagalleryfield216174486__root","container":"formmediagalleryfield216174486__container","viewBox":"formmediagalleryfield216174486__viewBox","addItemWrapper":"formmediagalleryfield216174486__addItemWrapper","addItem":"formmediagalleryfield216174486__addItem","overlay":"formmediagalleryfield216174486__overlay","image":"formmediagalleryfield216174486__image","previewImage":"formmediagalleryfield216174486__previewImage","previewVideo":"formmediagalleryfield216174486__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage1121376779";
+var _namespace_ = "mediaimage248104267";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage1121376779__root"};
+export var classes = {"root":"mediaimage248104267__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage1121376779-from","to":"--mediaimage1121376779-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage248104267-from","to":"--mediaimage248104267-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay4219437867";
+var _namespace_ = "overlay1355255452";
 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":"overlay4219437867__root","iconOverlay":"overlay4219437867__iconOverlay"};
+export var classes = {"root":"overlay1355255452__root","iconOverlay":"overlay1355255452__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1547496445";
+var _namespace_ = "medialoader194269943";
 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":"medialoader1547496445__root","loader":"medialoader1547496445__loader"};
+export var classes = {"root":"medialoader194269943__root","loader":"medialoader194269943__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_ = "mediatag3157960080";
+var _namespace_ = "mediatag1044101107";
 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":"mediatag3157960080__root"};
+export var classes = {"root":"mediatag1044101107__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "formmultidocument1870890700";
+var _namespace_ = "formmultidocument2601852807";
 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":"formmultidocument1870890700__root","viewRoot":"formmultidocument1870890700__viewRoot","singleViewWrapper":"formmultidocument1870890700__singleViewWrapper","addDocumentButton":"formmultidocument1870890700__addDocumentButton"};
+export var classes = {"root":"formmultidocument2601852807__root","viewRoot":"formmultidocument2601852807__viewRoot","singleViewWrapper":"formmultidocument2601852807__singleViewWrapper","addDocumentButton":"formmultidocument2601852807__addDocumentButton"};
 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_ = "cellreferenceinput2828272189";
+var _namespace_ = "cellreferenceinput905880240";
 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":"cellreferenceinput2828272189__root","autocomplete":"cellreferenceinput2828272189__autocomplete"};
+export var classes = {"root":"cellreferenceinput905880240__root","autocomplete":"cellreferenceinput905880240__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-reference-input.tsx

@@ -148,6 +148,7 @@ export const CellReferenceInput = React.forwardRef<
       >
         <AutoComplete
           ref={acRef}
+          dataHook="reference-input-autocomplete"
           className={st(classes.autocomplete)}
           size="small"
           border="none"

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_ = "richcontentdefaultvalueinput3397011445";
+var _namespace_ = "richcontentdefaultvalueinput736114662";
 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":"richcontentdefaultvalueinput3397011445__root","richContentEditorContainer":"richcontentdefaultvalueinput3397011445__richContentEditorContainer","editor":"richcontentdefaultvalueinput3397011445__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput736114662__root","richContentEditorContainer":"richcontentdefaultvalueinput736114662__richContentEditorContainer","editor":"richcontentdefaultvalueinput736114662__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};