@wix/patterns-fields 1.36.0 → 1.38.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput2634747470";
+var _namespace_ = "cellreferenceinput241502562";
 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":"cellreferenceinput2634747470__root","autocomplete":"cellreferenceinput2634747470__autocomplete"};
+export var classes = {"root":"cellreferenceinput241502562__root","autocomplete":"cellreferenceinput241502562__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/form-rich-content.driver.ts

@@ -0,0 +1,20 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { FormFieldUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../testkit/base-driver';
+
+export function FormRichContentDriver(base: UniDriver, body: UniDriver) {
+  const formField = FormFieldUniDriver(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+    hasSuffix: async () => (await formField.getSuffix()) !== null,
+  };
+}

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import type { RichContent as RichContentType, RicosTheme } from '@wix/ricos';
+import { fromPlainText } from '@wix/ricos';
+import type Experiments from '@wix/wix-experiments';
+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 { isEmpty } from '../../validations/string';
+import {
+  isDataValidOrNotSet,
+  richContentValidation,
+} from '../../validations/validations';
+import { TypeMismatchExclamation } from '../exclamation/type-mismatch-exclamation';
+import { FormRichContentInput } from './rich-content-input/form-input/form-input';
+
+export interface FormRichContentProps extends BaseInputProps<RichContentType> {}
+
+const _FormRichContent = (props: FormRichContentProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: pt, experiments } = useWixPatternsContainer();
+  const { t } = useTranslations();
+  const theme = {} as RicosTheme;
+  const ricosExperiments = experiments as unknown as Experiments;
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  const isValueValid = isDataValidOrNotSet(
+    controller.field.value,
+    richContentValidation,
+  );
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+      suffix={
+        isValueValid ? undefined : (
+          <TypeMismatchExclamation
+            typeName={t('auto-patterns.fields.field_type_rich_content_title')}
+            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}
+            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}
+            onClear={() => controller.field.onChange(undefined)}
+            onChange={(value) => controller.field.onChange(value)}
+            convertDisabledText={t(
+              'auto-patterns.fields.type_mismatch_convert_disabled',
+            )}
+            fieldName={field.displayName}
+            isConverted={false}
+            isConverting={false}
+            convertedValue={fromPlainText('')}
+            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {
+              typeName: 'Rich Content',
+            })}
+          />
+        )
+      }
+    >
+      {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}
+    </FormField>
+  );
+};
+
+export const FormRichContent = observer(_FormRichContent);

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_ = "richcontentdefaultvalueinput2663839494";
+var _namespace_ = "richcontentdefaultvalueinput2578934503";
 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":"richcontentdefaultvalueinput2663839494__root","richContentEditorContainer":"richcontentdefaultvalueinput2663839494__richContentEditorContainer","editor":"richcontentdefaultvalueinput2663839494__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput2578934503__root","richContentEditorContainer":"richcontentdefaultvalueinput2578934503__richContentEditorContainer","editor":"richcontentdefaultvalueinput2578934503__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_ = "richcontentforminput2084404769";
+var _namespace_ = "richcontentforminput3193456479";
 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":"richcontentforminput2084404769__root","editor":"richcontentforminput2084404769__editor"};
+export var classes = {"root":"richcontentforminput3193456479__root","editor":"richcontentforminput3193456479__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_ = "richcontentformreadonlyinput2046372641";
+var _namespace_ = "richcontentformreadonlyinput3133936628";
 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":"richcontentformreadonlyinput2046372641__root"};
+export var classes = {"root":"richcontentformreadonlyinput3133936628__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_ = "fullscreenmodal494200678";
+var _namespace_ = "fullscreenmodal2175629784";
 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":"fullscreenmodal494200678__root","modalContent":"fullscreenmodal494200678__modalContent"};
+export var classes = {"root":"fullscreenmodal2175629784__root","modalContent":"fullscreenmodal2175629784__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_ = "publishloader3698165698";
+var _namespace_ = "publishloader2355318947";
 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":"publishloader3698165698__root","publishLoader":"publishloader3698165698__publishLoader"};
+export var classes = {"root":"publishloader2355318947__root","publishLoader":"publishloader2355318947__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_ = "togglefullscreenbutton240346221";
+var _namespace_ = "togglefullscreenbutton3754763626";
 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":"togglefullscreenbutton240346221__root"};
+export var classes = {"root":"togglefullscreenbutton3754763626__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_ = "richcontenteditor1214222774";
+var _namespace_ = "richcontenteditor3626643904";
 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":"richcontenteditor1214222774__root","toolbarContainer":"richcontenteditor1214222774__toolbarContainer","footerToolbarContainer":"richcontenteditor1214222774__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1214222774__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1214222774__editor","modalEditor":"richcontenteditor1214222774__modalEditor"};
+export var classes = {"root":"richcontenteditor3626643904__root","toolbarContainer":"richcontenteditor3626643904__toolbarContainer","footerToolbarContainer":"richcontenteditor3626643904__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3626643904__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3626643904__editor","modalEditor":"richcontenteditor3626643904__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_ = "richcontenttoolbar647559125";
+var _namespace_ = "richcontenttoolbar529659145";
 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":"richcontenttoolbar647559125__root","toolbar":"richcontenttoolbar647559125__toolbar","toolbarButton":"richcontenttoolbar647559125__toolbarButton"};
+export var classes = {"root":"richcontenttoolbar529659145__root","toolbar":"richcontenttoolbar529659145__toolbar","toolbarButton":"richcontenttoolbar529659145__toolbarButton"};
 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_ = "richcontentviewer4124111482";
+var _namespace_ = "richcontentviewer2814214141";
 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":"richcontentviewer4124111482__root","viewer":"richcontentviewer4124111482__viewer","modalViewer":"richcontentviewer4124111482__modalViewer"};
+export var classes = {"root":"richcontentviewer2814214141__root","viewer":"richcontentviewer2814214141__viewer","modalViewer":"richcontentviewer2814214141__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/form-rich-text.driver.ts

@@ -0,0 +1,20 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { FormFieldUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../testkit/base-driver';
+
+export function FormRichTextDriver(base: UniDriver, body: UniDriver) {
+  const formField = FormFieldUniDriver(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+    hasSuffix: async () => (await formField.getSuffix()) !== null,
+  };
+}

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { 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 { isEmpty } from '../../validations/string';
+import {
+  isDataValidOrNotSet,
+  richTextValidation,
+} from '../../validations/validations';
+import { TypeMismatchExclamation } from '../exclamation/type-mismatch-exclamation';
+import { FormRichTextInput } from './rich-text-input/form-input/form-rich-text-input';
+
+export interface FormRichTextProps extends BaseInputProps<string> {}
+
+const _FormRichText = (props: FormRichTextProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: pt } = useWixPatternsContainer();
+  const { t } = useTranslations();
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+      suffix={
+        isDataValidOrNotSet(
+          controller.field.value,
+          richTextValidation,
+        ) ? undefined : (
+          <TypeMismatchExclamation
+            typeName={t('auto-patterns.fields.field_type_rich_text_title')}
+            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}
+            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}
+            onClear={() => controller.field.onChange(undefined)}
+            onChange={(value) => controller.field.onChange(value)}
+            convertDisabledText={t(
+              'auto-patterns.fields.type_mismatch_convert_disabled',
+            )}
+            fieldName={field.displayName}
+            isConverted={false}
+            isConverting={false}
+            convertedValue=""
+            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {
+              typeName: 'Rich Text',
+            })}
+          />
+        )
+      }
+    >
+      <FormRichTextInput
+        autoFocus={false}
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange?.(value)}
+        dataHook={`rich-text-${field.id}`}
+        field={field.id}
+      />
+    </FormField>
+  );
+};
+
+export const FormRichText = observer(_FormRichText);

package/src/components/rich-text/index.ts

@@ -3,6 +3,7 @@ export * from './rich-text-input';
 export * from './cell-rich-text-view';
 export * from './cell-rich-text-editor';
 export * from './cell-rich-text-input';
+export * from './form-rich-text';
 export type { RichTextStyleVariables } from './rich-text-input/rich-text-editor/text-style';
 
 export type { NoOptions, TextKeys } from './types';

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_ = "richeditor3766248638";
+var _namespace_ = "richeditor3914539567";
 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":"richeditor3766248638__root","editor":"richeditor3766248638__editor","header-one":"richeditor3766248638__header-one","header-two":"richeditor3766248638__header-two","header-three":"richeditor3766248638__header-three","header-four":"richeditor3766248638__header-four","header-five":"richeditor3766248638__header-five","header-six":"richeditor3766248638__header-six","paragraph-one":"richeditor3766248638__paragraph-one","unstyled":"richeditor3766248638__unstyled","paragraph-three":"richeditor3766248638__paragraph-three","align-left":"richeditor3766248638__align-left","align-right":"richeditor3766248638__align-right","align-center":"richeditor3766248638__align-center","align-justify":"richeditor3766248638__align-justify","withMargin":"richeditor3766248638__withMargin","dir-rtl":"richeditor3766248638__dir-rtl"};
+export var classes = {"root":"richeditor3914539567__root","editor":"richeditor3914539567__editor","header-one":"richeditor3914539567__header-one","header-two":"richeditor3914539567__header-two","header-three":"richeditor3914539567__header-three","header-four":"richeditor3914539567__header-four","header-five":"richeditor3914539567__header-five","header-six":"richeditor3914539567__header-six","paragraph-one":"richeditor3914539567__paragraph-one","unstyled":"richeditor3914539567__unstyled","paragraph-three":"richeditor3914539567__paragraph-three","align-left":"richeditor3914539567__align-left","align-right":"richeditor3914539567__align-right","align-center":"richeditor3914539567__align-center","align-justify":"richeditor3914539567__align-justify","withMargin":"richeditor3914539567__withMargin","dir-rtl":"richeditor3914539567__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_ = "richtexteditor861894303";
+var _namespace_ = "richtexteditor1535855835";
 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":"richtexteditor861894303__root","nativeInput":"richtexteditor861894303__nativeInput","editor":"richtexteditor861894303__editor"};
+export var classes = {"root":"richtexteditor1535855835__root","nativeInput":"richtexteditor1535855835__nativeInput","editor":"richtexteditor1535855835__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_ = "toolbar3272803868";
+var _namespace_ = "toolbar3016546826";
 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":"toolbar3272803868__root","item":"toolbar3272803868__item","separator":"toolbar3272803868__separator","clearFormatting":"toolbar3272803868__clearFormatting","fullScreen":"toolbar3272803868__fullScreen","dropdownItemContent":"toolbar3272803868__dropdownItemContent","dropdownItemTitle":"toolbar3272803868__dropdownItemTitle","dropdownItemSubtitle":"toolbar3272803868__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3272803868__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3272803868__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3272803868__dropdownHeaderThree","dropdownHeaderFour":"toolbar3272803868__dropdownHeaderFour","dropdownHeaderFive":"toolbar3272803868__dropdownHeaderFive","dropdownHeaderSix":"toolbar3272803868__dropdownHeaderSix","dropdownParagraphOne":"toolbar3272803868__dropdownParagraphOne","dropdownNormalText":"toolbar3272803868__dropdownNormalText","dropdownParagraphThree":"toolbar3272803868__dropdownParagraphThree"};
+export var classes = {"root":"toolbar3016546826__root","item":"toolbar3016546826__item","separator":"toolbar3016546826__separator","clearFormatting":"toolbar3016546826__clearFormatting","fullScreen":"toolbar3016546826__fullScreen","dropdownItemContent":"toolbar3016546826__dropdownItemContent","dropdownItemTitle":"toolbar3016546826__dropdownItemTitle","dropdownItemSubtitle":"toolbar3016546826__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3016546826__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3016546826__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3016546826__dropdownHeaderThree","dropdownHeaderFour":"toolbar3016546826__dropdownHeaderFour","dropdownHeaderFive":"toolbar3016546826__dropdownHeaderFive","dropdownHeaderSix":"toolbar3016546826__dropdownHeaderSix","dropdownParagraphOne":"toolbar3016546826__dropdownParagraphOne","dropdownNormalText":"toolbar3016546826__dropdownNormalText","dropdownParagraphThree":"toolbar3016546826__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/text/form-long-text.driver.ts

@@ -1,3 +1,4 @@
+import type { Field } from '@wix/bex-core';
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
   FormFieldUniDriver,
@@ -6,9 +7,13 @@ import {
 
 import { baseUniDriverFactory } from '../../testkit/base-driver';
 
-export function FormLongTextDriver(base: UniDriver, body: UniDriver) {
+export function FormLongTextDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
   const formField = FormFieldUniDriver(base, body);
-  const inputBase = base.$(`[data-hook^="long-text-"]`);
+  const inputBase = base.$(`[data-hook="long-text-${field.id}"]`);
   const input = InputAreaUniDriver(inputBase, body);
 
   return {

package/src/components/text/form-short-text.driver.ts

@@ -1,3 +1,4 @@
+import type { Field } from '@wix/bex-core';
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
   FormFieldUniDriver,
@@ -6,9 +7,13 @@ import {
 
 import { baseUniDriverFactory } from '../../testkit/base-driver';
 
-export function FormShortTextDriver(base: UniDriver, body: UniDriver) {
+export function FormShortTextDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
   const formField = FormFieldUniDriver(base, body);
-  const inputBase = base.$(`[data-hook^="short-text-"]`);
+  const inputBase = base.$(`[data-hook="short-text-${field.id}"]`);
   const input = InputUniDriver(inputBase, body);
 
   return {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview2761560688";
+var _namespace_ = "textview527401868";
 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":"textview2761560688__root","textView":"textview2761560688__textView"};
+export var classes = {"root":"textview527401868__root","textView":"textview527401868__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/time-input/form-time.driver.ts

@@ -0,0 +1,20 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { FormFieldUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../testkit/base-driver';
+
+export function FormTimeDriver(base: UniDriver, body: UniDriver) {
+  const formField = FormFieldUniDriver(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+    hasSuffix: async () => (await formField.getSuffix()) !== null,
+  };
+}

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { 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 {
+  isDataValidOrNotSet,
+  timeValidation,
+} from '../../validations/validations';
+import { isEmpty } from '../../validations/string';
+import { TypeMismatchExclamation } from '../exclamation/type-mismatch-exclamation';
+
+import { FormTimeInput } from './form-time-input';
+
+export interface FormTimeProps extends BaseInputProps<string> {}
+
+const _FormTime = (props: FormTimeProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: pt } = useWixPatternsContainer();
+  const { t } = useTranslations();
+
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+      suffix={
+        isDataValidOrNotSet(
+          controller.field.value,
+          timeValidation,
+        ) ? undefined : (
+          <TypeMismatchExclamation
+            typeName={t('auto-patterns.fields.field_type_time_title')}
+            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}
+            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}
+            onClear={() => controller.field.onChange(undefined)}
+            onChange={(value) => controller.field.onChange(value)}
+            convertDisabledText={t(
+              'auto-patterns.fields.type_mismatch_convert_disabled',
+            )}
+            fieldName={field.displayName}
+            isConverted={false}
+            isConverting={false}
+            convertedValue="00:00:00.000"
+            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {
+              typeName: 'Time',
+            })}
+          />
+        )
+      }
+    >
+      <FormTimeInput
+        autoFocus={false}
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange(value)}
+        dataHook={`time-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormTime = observer(_FormTime);