@wix/patterns-fields 1.36.0 → 1.38.0

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

@@ -0,0 +1,32 @@
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  DatePickerUniDriver,
+  FormFieldUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../testkit/base-driver';
+
+export function FormDateInputDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const datePickerBase = base.$(`[data-hook="date-${field.id}"]`);
+  const datePicker = DatePickerUniDriver(datePickerBase, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    datePickerExists: () => datePickerBase.exists(),
+    enterText: (text: string) => datePicker.inputDriver.enterText(text),
+    blur: () => datePicker.inputDriver.blur(),
+    hasError: () => datePicker.inputDriver.hasStatus('error'),
+    getErrorMessage: () => datePicker.inputDriver.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+  };
+}

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

@@ -0,0 +1,102 @@
+import React, { useState, useRef } from 'react';
+import { FormField, DatePicker } 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, BaseInputRef } from '../../types/base-input';
+import { isEmpty } from '../../validations/string';
+import {
+  getDateWithoutTimezone,
+  getISODateStringWithFixedTimezone,
+} from './date-utils';
+
+export interface FormDateInputProps extends BaseInputProps<string | null> {}
+
+const _FormDateInput = (props: FormDateInputProps) => {
+  const { field, dataHook, inputRef, formControl, data } = props;
+  const { translate: t } = useWixPatternsContainer();
+
+  const computeError = (
+    value: string | null | undefined,
+    format?: string,
+    validationType?: 'outOfBoundsError' | 'formatError' | 'valid',
+  ): string => {
+    if (field.validation?.required && isEmpty(value)) {
+      return t('cairo.fieldValidation.requiredField');
+    }
+    if (validationType === 'formatError' && format) {
+      return t('cairo.customFields.fieldType.date.invalid.value', {
+        dateFormat: format,
+      });
+    }
+    return '';
+  };
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) => {
+        const error = computeError(value);
+        return error || true;
+      },
+    },
+  });
+
+  const [date, setDate] = useState<Date | undefined>(() => {
+    if (controller.field.value) {
+      return getDateWithoutTimezone(
+        getISODateStringWithFixedTimezone(controller.field.value),
+      );
+    }
+    return undefined;
+  });
+
+  const ref = useRef<BaseInputRef>({});
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      statusMessage={errorMessage}
+      dataHook={dataHook}
+    >
+      <DatePicker
+        ref={(internalRef) => {
+          inputRef?.(ref.current);
+          // @ts-expect-error: WSR internal API hack for focusing
+          ref.current.focus = () => internalRef?.state?.inputRef?.focus?.();
+        }}
+        dataHook={`date-${field.id}`}
+        width="100%"
+        value={date}
+        onChange={(newValue: Date) => {
+          setDate(newValue);
+          if (newValue) {
+            const formattedDate = getISODateStringWithFixedTimezone(newValue);
+            controller.field.onChange(formattedDate.split('T')[0]);
+          } else {
+            controller.field.onChange(null);
+          }
+        }}
+        onValidate={({ validationType, value: newValue, format }) => {
+          const error = computeError(newValue, format, validationType);
+          setErrorMessage(error);
+          ref.current.invalid = !!error;
+
+          if (validationType === 'formatError' && newValue === '') {
+            setDate(undefined);
+            controller.field.onChange(null);
+          }
+        }}
+        status={errorMessage ? 'error' : undefined}
+        statusMessage={errorMessage}
+      />
+    </FormField>
+  );
+};
+
+export const FormDateInput = observer(_FormDateInput);

package/src/components/date-input/index.ts

@@ -0,0 +1 @@
+export * from './form-date-input';

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

@@ -0,0 +1,42 @@
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  DatePickerUniDriver,
+  FormFieldUniDriver,
+  TimeInputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../testkit/base-driver';
+
+export function FormDateTimeDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const dateBase = base.$(`[data-hook="datetime-date-${field.id}"]`);
+  const timeBase = base.$(`[data-hook="datetime-time-${field.id}"]`);
+  const datePicker = DatePickerUniDriver(dateBase, body);
+  const timeInput = TimeInputUniDriver(timeBase, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    dateExists: () => dateBase.exists(),
+    timeExists: () => timeBase.exists(),
+    enterDateText: (text: string) => datePicker.inputDriver.enterText(text),
+    blurDate: () => datePicker.inputDriver.blur(),
+    dateHasError: () => datePicker.inputDriver.hasStatus('error'),
+    getDateErrorMessage: () => datePicker.inputDriver.getStatusMessage(),
+    timeHasError: () =>
+      // WDS TimeInput.uni.driver.d.ts types `hasStatus` as no-arg, but the
+      // runtime forwards `status` to Input.hasStatus. See TimeInput.uni.driver.js:43.
+      // @ts-expect-error
+      timeInput.hasStatus('error'),
+    getTimeErrorMessage: () => timeInput.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+  };
+}

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

@@ -0,0 +1,203 @@
+import React, { useRef, useMemo, useState, useEffect } from 'react';
+import {
+  Cell,
+  DatePicker,
+  FormField,
+  Layout,
+  TimeInput,
+} 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, BaseInputRef } from '../../types/base-input';
+import { isEmpty } from '../../validations/string';
+
+export interface FormDateTimeProps extends BaseInputProps<string | null> {}
+
+const _FormDateTime = (props: FormDateTimeProps) => {
+  const { field, dataHook, inputRef, formControl, data } = props;
+  const { translate: t } = useWixPatternsContainer();
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (v) => {
+        if (field?.validation?.required && isEmpty(v)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  const date = useMemo(() => {
+    if (!controller.field.value) {
+      return undefined;
+    }
+    const d = new Date(controller.field.value);
+    return isNaN(d.getTime()) ? undefined : d;
+  }, [controller.field.value]);
+
+  const [dateStatusMessage, setDateStatusMessage] = useState('');
+  const [timeStatusMessage, setTimeStatusMessage] = useState('');
+
+  const ref = useRef<BaseInputRef>({});
+  const dateRef = useRef<BaseInputRef>({});
+  const timeRef = useRef<BaseInputRef>({});
+  const [dateValue, setDateValue] = useState<number | string | undefined>(
+    date?.getDate(),
+  );
+  const [timeValue, setTimeValue] = useState<number | string | undefined>(
+    date?.getTime(),
+  );
+
+  useEffect(() => {
+    ref.current.focus = () => {
+      if (dateRef.current.invalid) {
+        return dateRef.current.focus?.();
+      }
+
+      return timeRef.current.focus?.();
+    };
+
+    inputRef?.(ref.current);
+  }, [inputRef]);
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      dataHook={dataHook}
+    >
+      <Layout>
+        <Cell span={6}>
+          <DatePicker
+            ref={(internalRef) => {
+              dateRef.current.focus = () =>
+                // TODO: PR to WSR needed to expose as public API
+                // @ts-expect-error
+                internalRef?.state?.inputRef?.focus?.();
+            }}
+            width="100%"
+            value={date}
+            onChange={() => {}}
+            // onChange is triggered only when you have valid, non-empty value.
+            // and onValidate is triggered on every change so we use onValidate
+            onValidate={({ validationType, value: newValue, format }) => {
+              if (validationType === 'valid') {
+                const dateWithNewDate = date
+                  ? new Date(date)
+                  : new Date(newValue);
+                const _value = new Date(newValue);
+                dateWithNewDate.setFullYear(_value.getFullYear());
+                dateWithNewDate.setMonth(_value.getMonth());
+                dateWithNewDate.setDate(_value.getDate());
+                controller.field.onChange(dateWithNewDate.toISOString());
+                setDateValue(new Date(newValue).getDate());
+                setDateStatusMessage('');
+                dateRef.current.invalid = false;
+              } else if (validationType === 'formatError' && newValue === '') {
+                if (field.validation?.required) {
+                  setDateStatusMessage(
+                    t('cairo.fieldValidation.requiredField'),
+                  );
+                  dateRef.current.invalid = true;
+                } else {
+                  setDateStatusMessage('');
+                  dateRef.current.invalid = false;
+                }
+                setDateValue(newValue);
+                if (!timeValue) {
+                  controller.field.onChange(null);
+                }
+              } else {
+                setDateStatusMessage(
+                  t('cairo.customFields.fieldType.date.invalid.value', {
+                    dateFormat: format ?? '',
+                  }),
+                );
+                dateRef.current.invalid = true;
+              }
+
+              ref.current.invalid =
+                dateRef.current.invalid || timeRef.current.invalid;
+            }}
+            status={
+              controller.fieldState.error || dateStatusMessage
+                ? 'error'
+                : undefined
+            }
+            statusMessage={
+              controller.fieldState.error?.message || dateStatusMessage
+            }
+            dataHook={`datetime-date-${field.id}`}
+          />
+        </Cell>
+        <Cell span={6}>
+          <TimeInput
+            ref={(internalRef) => {
+              timeRef.current.focus = () => internalRef?.focus();
+            }}
+            dataHook={`datetime-time-${field.id}`}
+            value={date ?? null}
+            status={
+              controller.fieldState.error || timeStatusMessage
+                ? 'error'
+                : undefined
+            }
+            statusMessage={
+              controller.fieldState.error?.message || timeStatusMessage
+            }
+            onInvalid={() => {
+              timeRef.current.invalid = true;
+              setTimeStatusMessage(
+                t('cairo.customFields.fieldType.dateAndTime.invalid.value'),
+              );
+              ref.current.invalid =
+                dateRef.current.invalid || timeRef.current.invalid;
+            }}
+            onChange={({ date: newValue }) => {
+              timeRef.current.invalid = false;
+              ref.current.invalid =
+                dateRef.current.invalid || timeRef.current.invalid;
+
+              if (newValue) {
+                const dateWithNewTime = date ? new Date(date) : newValue;
+                dateWithNewTime.setHours(newValue.getHours());
+                dateWithNewTime.setMinutes(newValue.getMinutes());
+                dateWithNewTime.setSeconds(newValue.getSeconds());
+                dateWithNewTime.setMilliseconds(newValue.getMilliseconds());
+                controller.field.onChange(dateWithNewTime.toISOString());
+                setTimeStatusMessage('');
+                setDateStatusMessage('');
+              } else {
+                if (!newValue) {
+                  setTimeValue('');
+                  if (field.validation?.required) {
+                    setTimeStatusMessage(
+                      t('cairo.fieldValidation.requiredField'),
+                    );
+                    timeRef.current.invalid = true;
+                  } else {
+                    setTimeStatusMessage('');
+                    timeRef.current.invalid = false;
+                  }
+                  if (!ref.current.invalid) {
+                    if (!dateValue) {
+                      controller.field.onChange(null);
+                    }
+                  }
+                }
+              }
+            }}
+          />
+        </Cell>
+      </Layout>
+    </FormField>
+  );
+};
+
+export const FormDateTime = observer(_FormDateTime);

package/src/components/datetime-input/index.ts

@@ -0,0 +1 @@
+export * from './form-date-time';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog703678680";
+var _namespace_ = "deletedialog3317896481";
 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":"deletedialog703678680__root","layout":"deletedialog703678680__layout"};
+export var classes = {"root":"deletedialog3317896481__root","layout":"deletedialog3317896481__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_ = "formdocumentfield1781643917";
+var _namespace_ = "formdocumentfield556670286";
 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":"formdocumentfield1781643917__root","viewWrapper":"formdocumentfield1781643917__viewWrapper","textWidth":"formdocumentfield1781643917__textWidth","documentLoader":"formdocumentfield1781643917__documentLoader","addDocument":"formdocumentfield1781643917__addDocument","addItemWrapper":"formdocumentfield1781643917__addItemWrapper"};
+export var classes = {"root":"formdocumentfield556670286__root","viewWrapper":"formdocumentfield556670286__viewWrapper","textWidth":"formdocumentfield556670286__textWidth","documentLoader":"formdocumentfield556670286__documentLoader","addDocument":"formdocumentfield556670286__addDocument","addItemWrapper":"formdocumentfield556670286__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/document/form-document.driver.ts

@@ -0,0 +1,26 @@
+import type { Field } from '@wix/bex-core';
+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 FormDocumentDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const documentField = base.$(`[data-hook="document-${field.id}"]`);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    documentFieldExists: () => documentField.exists(),
+    isRequired: () => formField.isRequired(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+  };
+}

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

@@ -0,0 +1,51 @@
+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 { isEmpty } from '../../validations/string';
+import { FormDocumentField } from './form-document-field';
+
+export interface FormDocumentProps extends BaseInputProps<string> {}
+
+const _FormDocument = (props: FormDocumentProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return t('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}
+    >
+      <FormDocumentField
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange(value)}
+        onClear={() => controller.field.onChange(null)}
+        dataHook={`document-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormDocument = observer(_FormDocument);

package/src/components/email/form-email.driver.ts

@@ -0,0 +1,27 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  FormFieldUniDriver,
+  InputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../testkit/base-driver';
+
+export function FormEmailDriver(base: UniDriver, body: UniDriver) {
+  const formField = FormFieldUniDriver(base, body);
+  const inputBase = base.$(`[data-hook^="email-"]`);
+  const input = InputUniDriver(inputBase, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    getValue: () => input.getValue(),
+    enterText: (value: string) => input.enterText(value),
+    blur: () => input.blur(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+  };
+}

package/src/components/email/form-email.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { FormField, Input } 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 { isValid as isValidEmail } from '../../validations/email';
+
+export interface FormEmailProps extends BaseInputProps<string> {}
+
+const _FormEmail = (props: FormEmailProps) => {
+  const { field, dataHook, formControl, data } = props;
+  const { translate: pt } = useWixPatternsContainer();
+  const { t } = useTranslations();
+
+  // Errors surface as soon as RHF marks the field invalid.
+  // Intentional delta from auto-patterns: dropped the `formState.isSubmitted` gate
+  // so users see validation feedback immediately while typing.
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id],
+    rules: {
+      validate: (value: string | null | undefined) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        if (value && !isValidEmail(value)) {
+          return t('auto-patterns.fields.email_input_error');
+        }
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      dataHook={dataHook}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+    >
+      <Input
+        dataHook={`email-${field.id}`}
+        value={controller.field.value}
+        onChange={(e) => controller.field.onChange?.(e.target.value)}
+        onBlur={controller.field.onBlur}
+        ref={controller.field.ref}
+      />
+    </FormField>
+  );
+};
+
+export const FormEmail = observer(_FormEmail);

package/src/components/email/index.ts

@@ -1,2 +1,3 @@
 export * from './email-input';
+export * from './form-email';
 export * from './form-email-input';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation2557246513";
+var _namespace_ = "exclamation3624090198";
 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":"exclamation2557246513__root","exclamation":"exclamation2557246513__exclamation","actions":"exclamation2557246513__actions","action":"exclamation2557246513__action"};
+export var classes = {"root":"exclamation3624090198__root","exclamation":"exclamation3624090198__exclamation","actions":"exclamation3624090198__actions","action":"exclamation3624090198__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_ = "highlightedtext4048086956";
+var _namespace_ = "highlightedtext1956286532";
 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":"highlightedtext4048086956__root","substring":"highlightedtext4048086956__substring"};
-export var keyframes = {"highlighted":"highlightedtext4048086956__highlighted","highlighted-match":"highlightedtext4048086956__highlighted-match"}; 
+export var classes = {"root":"highlightedtext1956286532__root","substring":"highlightedtext1956286532__substring"};
+export var keyframes = {"highlighted":"highlightedtext1956286532__highlighted","highlighted-match":"highlightedtext1956286532__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -0,0 +1,31 @@
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  FormFieldUniDriver,
+  ImageViewerUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormImageInputDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const imageViewerBase = base.$(`[data-hook="image-${field.id}"]`);
+  const imageViewer = ImageViewerUniDriver(imageViewerBase, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: async () => {
+      const labelEl = await formField.getLabel();
+      return labelEl?.textContent ?? '';
+    },
+    getImageUrl: () => imageViewer.getImageUrl(),
+    isAddItemVisible: () => imageViewer.isAddItemVisible(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+  };
+}