@wix/patterns-fields 1.35.0 → 1.37.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput2425235973";
+var _namespace_ = "addressinput2865996514";
 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":"addressinput2425235973__root","tableAddressInput":"addressinput2425235973__tableAddressInput"};
+export var classes = {"root":"addressinput2865996514__root","tableAddressInput":"addressinput2865996514__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/address/input/address-input.tsx

@@ -49,6 +49,14 @@ export interface AddressInputProps
   reverseOnEscape?: boolean;
   /** Optional atlas service for address search. Defaults to WixAtlasService. Useful for testing. */
   atlasService?: AtlasService;
+  /**
+   * Pre-fills the input on mount, kicks off the suggestion search, and opens
+   * the dropdown. Used by EditableTable's type-to-edit where the first typed
+   * character is delivered as a prop rather than as a real keystroke (the
+   * cell's keydown handler calls preventDefault). Mirrors `initialSearchText`
+   * on CellAutoCompleteInput.
+   */
+  initialSearchText?: string;
 }
 
 export interface AddressInputImperativeHandle {
@@ -72,6 +80,7 @@ export const AddressInput = forwardRef<
       onSelectAddress = noop,
       reverseOnEscape,
       atlasService,
+      initialSearchText,
       ...props
     },
     forwardedRef,
@@ -157,6 +166,13 @@ export const AddressInput = forwardRef<
       [clearAddress, clearInputValue],
     );
 
+    useEffect(() => {
+      if (!initialSearchText) return;
+      setInputValue(initialSearchText);
+      searchAddress(initialSearchText.trim());
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Deliberately run only on mount — initialSearchText is a one-shot seed
+
     const isFocusedRef = useRef(false);
     const onSetSelection = useSetSelectionOnFocus();
     const onInputFocus = useCallback(

package/src/components/address/view/cell-address-view.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box } from '@wix/design-system';
+import { LocationSmall } from '@wix/wix-ui-icons-common';
+import type { Address } from '../../../types/address';
+import { AddressView } from './address-view';
+
+export interface CellAddressViewProps {
+  data?: Address;
+}
+
+export const CellAddressView: React.FC<CellAddressViewProps> = ({ data }) => (
+  <Box
+    verticalAlign="middle"
+    width="100%"
+    minWidth="0"
+    gap="SP1"
+    dataHook="cell-address-view"
+  >
+    <LocationSmall
+      style={{
+        flexShrink: 0,
+        color: 'var(--wds-color-text-placeholder)',
+      }}
+    />
+    <AddressView data={data} size="small" ellipsis />
+  </Box>
+);
+
+CellAddressView.displayName = 'CellAddressView';

package/src/components/address/view/index.ts

@@ -1,2 +1,2 @@
 export * from './address-view';
-
+export * from './cell-address-view';

package/src/components/array/form-array.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 FormArrayDriver(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/array/form-array.tsx

@@ -0,0 +1,100 @@
+import React, { useMemo } 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 {
+  arrayValidation,
+  isDataValidOrNotSet,
+} from '../../validations/validations';
+import { isEmpty } from '../../validations/string';
+import { TypeMismatchExclamation } from '../exclamation/type-mismatch-exclamation';
+
+import { FormJsonInput } from '../json-input/form-json-input';
+
+export interface FormArrayProps extends BaseInputProps<string> {}
+
+const _FormArray = (props: FormArrayProps) => {
+  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;
+      },
+    },
+  });
+
+  const { isConverted, convertedValue } = useMemo(() => {
+    try {
+      return {
+        isConverted: true,
+        convertedValue: arrayValidation.hardConvert(controller.field.value),
+      };
+    } catch {
+      return { isConverted: false, convertedValue: null };
+    }
+  }, [controller.field.value]);
+
+  const typeName = t('auto-patterns.fields.field_type_array_title');
+
+  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,
+          arrayValidation,
+        ) ? undefined : (
+          <TypeMismatchExclamation
+            typeName={typeName}
+            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}
+            convertButtonText={t('auto-patterns.fields.type_mismatch_convert', {
+              typeName: typeName.toLocaleLowerCase(),
+            })}
+            onClear={() => controller.field.onChange(undefined)}
+            onChange={(value) => controller.field.onChange(value)}
+            convertDisabledText={t(
+              'auto-patterns.fields.type_mismatch_convert_disabled',
+            )}
+            fieldName={field.displayName}
+            isConverted={isConverted}
+            isConverting={false}
+            convertedValue={convertedValue}
+            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {
+              typeName,
+            })}
+          />
+        )
+      }
+    >
+      <FormJsonInput
+        autoFocus={false}
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange?.(value)}
+        onBlur={controller.field.onBlur}
+        ref={controller.field.ref}
+        dataHook={`array-${field.id}`}
+        field={field.id}
+      />
+    </FormField>
+  );
+};
+
+export const FormArray = observer(_FormArray);

package/src/components/array/index.ts

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

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_ = "actionsmenu244569486";
+var _namespace_ = "actionsmenu2393580992";
 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":"actionsmenu244569486__root","action":"actionsmenu244569486__action"};
+export var classes = {"root":"actionsmenu2393580992__root","action":"actionsmenu2393580992__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_ = "formaudiofield3934724193";
+var _namespace_ = "formaudiofield2312016623";
 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":"formaudiofield3934724193__root","addItem":"formaudiofield3934724193__addItem","mediaTitle":"formaudiofield3934724193__mediaTitle"};
+export var classes = {"root":"formaudiofield2312016623__root","addItem":"formaudiofield2312016623__addItem","mediaTitle":"formaudiofield2312016623__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-field/form-audio.driver.ts

@@ -0,0 +1,29 @@
+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 FormAudioDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const audioField = base.$(`[data-hook="audio-${field.id}"]`);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    audioFieldExists: () => audioField.exists(),
+    getAudioName: () => base.$('[data-hook="fromAudioInput.audioName"]').text(),
+    audioPlayerExists: () =>
+      base.$('[data-hook="fromAudioInput.player"]').exists(),
+    isRequired: () => formField.isRequired(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+  };
+}

package/src/components/audio/audio-field/form-audio.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 { FormAudioField } from './form-audio-field';
+
+export interface FormAudioProps extends BaseInputProps<string> {}
+
+const _FormAudio = (props: FormAudioProps) => {
+  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}
+    >
+      <FormAudioField
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange(value)}
+        onClear={() => controller.field.onChange(null)}
+        dataHook={`audio-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormAudio = observer(_FormAudio);

package/src/components/audio/audio-field/index.ts

@@ -1,2 +1,3 @@
+export * from './form-audio';
 export * from './form-audio-field';
 export * from './audio-view';

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

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

@@ -1,8 +1,13 @@
+import type { Field } from '@wix/bex-core';
 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) {
+export function FormCheckboxDriver(
+  base: UniDriver,
+  body: UniDriver,
+  _field: Field,
+) {
   const checkbox = CheckboxUniDriver(base, body);
   return {
     ...baseUniDriverFactory(base),

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview1187221222";
+var _namespace_ = "colorview4027323806";
 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":"colorview1187221222__root","view":"colorview1187221222__view","fillPreview":"colorview1187221222__fillPreview"};
+export var classes = {"root":"colorview4027323806__root","view":"colorview4027323806__view","fillPreview":"colorview4027323806__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/form-color.driver.ts

@@ -0,0 +1,34 @@
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  FillButtonUniDriver,
+  FillPreviewUniDriver,
+  FormFieldUniDriver,
+  InputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../testkit/base-driver';
+
+export function FormColorDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const inputBase = base.$(`[data-hook="color-${field.id}"]`);
+  const input = InputUniDriver(inputBase, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    getValue: () => input.getValue(),
+    getFillButton: () => FillButtonUniDriver(base, body),
+    getFillPreview: () => FillPreviewUniDriver(base, body),
+    isRequired: () => formField.isRequired(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+  };
+}

package/src/components/color-view/form-color.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import { FormColorInput } from './form-color-input';
+
+export interface FormColorProps extends BaseInputProps<string> {}
+
+const _FormColor = (props: FormColorProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      dataHook={dataHook}
+    >
+      <FormColorInput
+        autoFocus={false}
+        data={controller.field.value as string | undefined}
+        onChange={(hex) => controller.field.onChange(hex)}
+        onBlur={controller.field.onBlur}
+        ref={controller.field.ref}
+        dataHook={`color-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormColor = observer(_FormColor);

package/src/components/color-view/index.ts

@@ -1,3 +1,4 @@
 export * from './color-view';
 export * from './color-input';
+export * from './form-color';
 export * from './form-color-input';

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

@@ -0,0 +1,10 @@
+export const getDateWithoutTimezone = (date: Date | string) =>
+  new Date(new Date(date).toISOString().slice(0, -1));
+
+export const getISODateStringWithFixedTimezone = (date: Date | string) => {
+  const _date = new Date(date);
+  const userTimezoneOffset = _date.getTimezoneOffset() * 60000;
+  return new Date(_date.getTime() - userTimezoneOffset)
+    .toISOString()
+    .slice(0, -1);
+};

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(),
+  };
+}