@wix/patterns-fields 1.36.0 → 1.38.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, RenderResult } from '@testing-library/react';
+import { act, fireEvent, 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';
@@ -12,8 +12,14 @@ import { PatternsFieldsTestProvider } from '../testkit/patterns-fields-test-prov
 import type { BaseInputProps } from '../types/base-input';
 
 const chance = new Chance();
+const noop = () => {};
+const SUBMIT_HOOK = 'form-field-driver-submit';
 
-type UniDriverFactory<U> = (base: UniDriver, body: UniDriver) => U;
+type UniDriverFactory<U> = (
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) => U;
 
 export interface FormFieldDriverOptions<U extends BaseUniDriver, T> {
   Component: React.ComponentType<BaseInputProps<T>>;
@@ -39,17 +45,33 @@ export class FormFieldDriver<U extends BaseUniDriver, T> {
   }
 
   get tk(): U {
-    return uniTestkitFactoryCreator(this.opts.UniDriverFactory)({
+    const { field } = this;
+    return uniTestkitFactoryCreator<U>(
+      (base: UniDriver, body: UniDriver): U =>
+        this.opts.UniDriverFactory(base, body, field),
+    )({
       wrapper: this._renderResult!.baseElement,
       dataHook: this._dataHook,
     });
   }
 
+  async submit(): Promise<void> {
+    const button = this._renderResult!.baseElement.querySelector(
+      `[data-hook="${SUBMIT_HOOK}"]`,
+    );
+    if (!button) {
+      throw new Error('Submit button not rendered');
+    }
+    await act(async () => {
+      fireEvent.click(button);
+    });
+  }
+
   render() {
     const { Component } = this.opts;
     const { field, initialValue, _dataHook: dataHook, onChange } = this;
     this._renderResult = render(
-      <TestComponent
+      <TestForm
         field={field}
         initialValue={initialValue}
         renderField={(control) => (
@@ -68,22 +90,27 @@ export class FormFieldDriver<U extends BaseUniDriver, T> {
   }
 }
 
-interface TestComponentProps<T> {
+interface TestFormProps<T> {
   field: Field;
   initialValue: T;
   renderField: (control: Control<FieldValues>) => React.ReactElement;
 }
 
-const TestComponent = <T,>({
+const TestForm = <T,>({
   field,
   initialValue,
   renderField,
-}: TestComponentProps<T>) => {
-  const { control } = useForm<FieldValues>({
+}: TestFormProps<T>) => {
+  const methods = useForm<FieldValues>({
     mode: 'onChange',
     defaultValues: { [field.id]: initialValue },
   });
-  return renderField(control);
+  return (
+    <form onSubmit={methods.handleSubmit(noop)}>
+      {renderField(methods.control)}
+      <button type="submit" data-hook={SUBMIT_HOOK} />
+    </form>
+  );
 };
 
 export function makeField(overrides: Partial<Field> = {}): Field {

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

@@ -0,0 +1,19 @@
+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 FormAddressDriver(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(),
+  };
+}

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

@@ -0,0 +1,53 @@
+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 type { Address } from '../../types/address';
+import { isEmpty } from '../../validations/value';
+
+import { FormAddressInput } from './input/form-address-input';
+
+export interface FormAddressProps extends BaseInputProps<Address> {}
+
+const _FormAddress = (props: FormAddressProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: pt } = useWixPatternsContainer();
+
+  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}
+    >
+      <FormAddressInput
+        autoFocus={false}
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange?.(value)}
+        dataHook={`address-${field.id}`}
+        field={field.id}
+      />
+    </FormField>
+  );
+};
+
+export const FormAddress = observer(_FormAddress);

package/src/components/address/index.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput4174358991";
+var _namespace_ = "addressinput2380822431";
 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":"addressinput4174358991__root","tableAddressInput":"addressinput4174358991__tableAddressInput"};
+export var classes = {"root":"addressinput2380822431__root","tableAddressInput":"addressinput2380822431__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_ = "actionsmenu404510853";
+var _namespace_ = "actionsmenu510403314";
 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":"actionsmenu404510853__root","action":"actionsmenu404510853__action"};
+export var classes = {"root":"actionsmenu510403314__root","action":"actionsmenu510403314__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_ = "formaudiofield3136717165";
+var _namespace_ = "formaudiofield244128320";
 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":"formaudiofield3136717165__root","addItem":"formaudiofield3136717165__addItem","mediaTitle":"formaudiofield3136717165__mediaTitle"};
+export var classes = {"root":"formaudiofield244128320__root","addItem":"formaudiofield244128320__addItem","mediaTitle":"formaudiofield244128320__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_ = "audioplayer222144949";
+var _namespace_ = "audioplayer1489254281";
 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":"audioplayer222144949__root"};
+export var classes = {"root":"audioplayer1489254281__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_ = "colorview366587587";
+var _namespace_ = "colorview4112651844";
 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":"colorview366587587__root","view":"colorview366587587__view","fillPreview":"colorview366587587__fillPreview"};
+export var classes = {"root":"colorview4112651844__root","view":"colorview4112651844__view","fillPreview":"colorview4112651844__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);
+};