@wix/patterns-fields 1.108.0 → 1.109.0

package/src/__tests__/hooks/use-field-value-replacement.spec.tsx

@@ -0,0 +1,68 @@
+import '../../testkit/test-polyfills';
+
+import React, { useMemo } from 'react';
+import { render } from '@testing-library/react';
+import { useForm } from '@wix/bex-core/form';
+import type { Control } from '@wix/bex-core/form';
+
+import { FormDateInput } from '../../components/date-input/form-date-input';
+import { FormDateTime } from '../../components/datetime-input/form-date-time';
+import { useFieldValueReplacement } from '../../components/date-input/use-field-value-replacement';
+import { PatternsFieldsTestProvider } from '../../testkit/patterns-fields-test-provider';
+import { makeField } from '../form-field.driver';
+
+describe('useFieldValueReplacement compatibility', () => {
+  it.each([
+    ['Date', FormDateInput, 'DATE'],
+    ['DateTime', FormDateTime, 'DATETIME'],
+  ] as const)(
+    'renders %s without exposed subjects',
+    (_name, Component, type) => {
+      const field = makeField({ type });
+      const Example = () => {
+        const form = useForm();
+        const control = useMemo(() => {
+          const { _subjects, ...rest } = form.control;
+          return rest as Control;
+        }, [form.control]);
+        return (
+          <Component
+            field={field}
+            value={null}
+            onChange={() => {}}
+            data={{}}
+            formControl={control}
+          />
+        );
+      };
+
+      const result = render(<Example />, {
+        wrapper: PatternsFieldsTestProvider,
+      });
+
+      expect(result.getByText(field.displayName)).toBeTruthy();
+      result.unmount();
+    },
+  );
+
+  it.each([
+    undefined,
+    {},
+    { state: {}, array: {} },
+    { state: { subscribe: jest.fn() } },
+    { array: { subscribe: jest.fn() } },
+  ])('skips cleanup for an unsupported subject shape: %p', (subjects) => {
+    const onReplace = jest.fn();
+    const control = { _subjects: subjects } as unknown as Control;
+    const Example = () => {
+      const revision = useFieldValueReplacement(control, 'date', onReplace);
+      return <span>{revision}</span>;
+    };
+
+    const result = render(<Example />);
+
+    expect(result.getByText('0')).toBeTruthy();
+    expect(onReplace).not.toHaveBeenCalled();
+    result.unmount();
+  });
+});

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput1753982187";
+var _namespace_ = "addressinput310286819";
 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":"addressinput1753982187__root","tableAddressInput":"addressinput1753982187__tableAddressInput"};
+export var classes = {"root":"addressinput310286819__root","tableAddressInput":"addressinput310286819__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu132710167";
+var _namespace_ = "actionsmenu2642433213";
 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":"actionsmenu132710167__root","action":"actionsmenu132710167__action"};
+export var classes = {"root":"actionsmenu2642433213__root","action":"actionsmenu2642433213__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_ = "formaudiofield2070924690";
+var _namespace_ = "formaudiofield793983115";
 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":"formaudiofield2070924690__root","addItem":"formaudiofield2070924690__addItem","mediaTitle":"formaudiofield2070924690__mediaTitle"};
+export var classes = {"root":"formaudiofield793983115__root","addItem":"formaudiofield793983115__addItem","mediaTitle":"formaudiofield793983115__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "audioplayer3409967597";
+var _namespace_ = "audioplayer1089993499";
 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":"audioplayer3409967597__root"};
+export var classes = {"root":"audioplayer1089993499__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview3646440040";
+var _namespace_ = "cellcolorview2172636651";
 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":"cellcolorview3646440040__root","hashPrefix":"cellcolorview3646440040__hashPrefix"};
+export var classes = {"root":"cellcolorview2172636651__root","hashPrefix":"cellcolorview2172636651__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview1258591125";
+var _namespace_ = "colorview2743015308";
 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":"colorview1258591125__root","view":"colorview1258591125__view","fillPreview":"colorview1258591125__fillPreview"};
+export var classes = {"root":"colorview2743015308__root","view":"colorview2743015308__view","fillPreview":"colorview2743015308__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -7,6 +7,7 @@ import React, {
 import { DatePicker } from '@wix/design-system';
 import {
   closeDatePickerCalendar,
+  typedDateInputProps,
   getDatePickerInputElement,
 } from './date-picker-internals';
 
@@ -29,6 +30,10 @@ export interface CellDateInputProps {
    * after a date pick).
    */
   onChange?: (date: Date) => void;
+  /** Fires when the user empties the input. */
+  onEmpty?: () => void;
+  /** Fires on Enter in the input with the typed date, or `null` when empty. */
+  onEnter?: (date: Date | null) => void;
   /** When set, renders the clear (X) suffix and calls this on click. */
   onClear?: () => void;
   /** Ref object that receives the underlying `<input>` element. Consumers
@@ -62,6 +67,8 @@ export const CellDateInput = forwardRef<
     {
       value,
       onChange,
+      onEmpty,
+      onEnter,
       onClear,
       inputRef,
       dataHook,
@@ -73,6 +80,7 @@ export const CellDateInput = forwardRef<
     forwardedRef,
   ) => {
     const datePickerRef = useRef<DatePicker | null>(null);
+    const inputElementRef = useRef<HTMLInputElement | null>(null);
 
     useImperativeHandle(
       forwardedRef,
@@ -91,6 +99,16 @@ export const CellDateInput = forwardRef<
       [onChange],
     );
 
+    const handleEmptyEnter = useCallback(() => {
+      if (onEnter) {
+        onEnter(null);
+        return;
+      }
+      onEmpty?.();
+    }, [onEnter, onEmpty]);
+
+    const handlesTypedInput = Boolean(onEmpty || onEnter);
+
     const validValue =
       value instanceof Date && !isNaN(value.getTime()) ? value : undefined;
 
@@ -110,7 +128,17 @@ export const CellDateInput = forwardRef<
           border: 'none',
           ...(hidePrefix ? { prefix: <span /> } : {}),
           ...(ariaLabel ? { ariaLabel } : {}),
+          ...(handlesTypedInput
+            ? typedDateInputProps({
+                picker: datePickerRef,
+                input: inputElementRef,
+                onEmpty,
+                onEmptyEnter: handleEmptyEnter,
+                onEnter,
+              })
+            : {}),
           inputRef: (el: HTMLInputElement | null) => {
+            inputElementRef.current = el;
             if (inputRef) {
               inputRef.current = el ?? undefined;
             }

package/src/components/date-input/date-picker-internals.ts

@@ -1,21 +1,34 @@
-import type { DatePicker } from '@wix/design-system';
+import type { KeyboardEvent, RefObject } from 'react';
+import type { DatePicker, InputProps } from '@wix/design-system';
 
 /**
- * WDS `DatePicker` exposes two operations we need that aren't part of its
+ * WDS `DatePicker` exposes operations we need that aren't part of its
  * public type surface:
  *
  *   - `state.inputRef` — the underlying `HTMLInputElement` (used to focus
  *     the input and to programmatically seed it for type-to-edit).
  *   - `_closeCalendar()` — WDS declares `closeCalendar` in its types but
  *     only the underscored form exists at runtime.
+ *   - `_handleInputChange()` / `_handleKeyDown()` — its handlers for typed
+ *     text and keys.
  *
- * Both reaches live behind this helper so the cast happens in exactly one
+ * These reaches live behind this helper so the cast happens in exactly one
  * place. If WDS adds a public surface for these, swap the implementation
  * here and every consumer picks it up automatically.
  */
 type DatePickerWithInternals = DatePicker & {
   state?: { inputRef?: HTMLInputElement };
   _closeCalendar?: () => void;
+  _handleInputChange?: (change: { dateVal: Date }) => void;
+  _handleKeyDown?: (event: KeyboardEvent, date: Date | null) => void;
+  _handleChange?: (date: Date, modifiers?: { disabled?: boolean }) => void;
+};
+
+// The handlers DatePicker's inner DateInput calls. `InputProps` types
+// `onChange` and `onKeyDown` as DOM event handlers, so it can't hold these.
+type DateInputHandlers = {
+  onChange: (change: { dateVal: Date }) => void;
+  onKeyDown: (event: KeyboardEvent, date: Date | null) => void;
 };
 
 export const getDatePickerInputElement = (
@@ -28,3 +41,91 @@ export const closeDatePickerCalendar = (
 ): void => {
   (picker as DatePickerWithInternals | null | undefined)?._closeCalendar?.();
 };
+
+// WDS skips `onChange` when the picked day is the day of its `value` prop.
+// This reports that pick through `onPick` and returns a function that undoes it.
+export const onSameDayCalendarPick = (
+  picker: DatePicker | null | undefined,
+  onPick: (date: Date) => void,
+): (() => void) => {
+  const internals = picker as DatePickerWithInternals | null | undefined;
+  const handleChange = internals?._handleChange;
+  if (!internals || !handleChange) {
+    return () => {};
+  }
+  internals._handleChange = (date, modifiers) => {
+    handleChange(date, modifiers);
+    const { value } = internals.props;
+    // Same guard as WDS `_saveNewValue`.
+    if (value?.toDateString() === date.toDateString() && !modifiers?.disabled) {
+      onPick(date);
+    }
+  };
+  return () => {
+    internals._handleChange = handleChange;
+  };
+};
+
+const isValidDate = (date: Date | null): date is Date =>
+  date !== null && !isNaN(date.getTime());
+
+// WDS parses empty input text as today. These `inputProps` handlers report an
+// emptied input through `onEmpty` and Enter on it through `onEmptyEnter`
+// instead, send typed dates to `onType` when it is given (the picker's
+// `onChange` otherwise), and Enter on a typed date to `onEnter`. An event
+// without its callback goes to the picker as before. Calendar picks don't go
+// through them.
+// WDS thread: https://wix.slack.com/archives/C39FTGUBZ/p1790691851370229
+export const typedDateInputProps = ({
+  picker,
+  input,
+  onEmpty,
+  onEmptyEnter,
+  onType,
+  onEnter,
+}: {
+  picker: RefObject<DatePicker | null>;
+  input: RefObject<HTMLInputElement | null>;
+  onEmpty?: () => void;
+  onEmptyEnter?: () => void;
+  onType?: (date: Date) => void;
+  onEnter?: (date: Date) => void;
+}): Partial<InputProps> => {
+  const internals = () => picker.current as DatePickerWithInternals | null;
+  const isEmpty = () => input.current?.value === '';
+  const takeOverEnter = (event: KeyboardEvent) => {
+    event.preventDefault();
+    closeDatePickerCalendar(picker.current);
+  };
+  const handlers: DateInputHandlers = {
+    onChange: (change) => {
+      if (onEmpty && isEmpty()) {
+        onEmpty();
+        return;
+      }
+      if (onType) {
+        onType(change.dateVal);
+        return;
+      }
+      internals()?._handleInputChange?.(change);
+    },
+    onKeyDown: (event, date) => {
+      if (event.key === 'Enter') {
+        const isInputEmpty = isEmpty();
+        if (isInputEmpty && onEmptyEnter) {
+          takeOverEnter(event);
+          onEmptyEnter();
+          return;
+        }
+        if (!isInputEmpty && onEnter && isValidDate(date)) {
+          takeOverEnter(event);
+          onEnter(date);
+          return;
+        }
+      }
+      internals()?._handleKeyDown?.(event, date);
+    },
+  };
+  // DatePicker passes `inputProps` to its inner DateInput, not to `<Input>`.
+  return handlers as unknown as Partial<InputProps>;
+};

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

@@ -25,7 +25,9 @@ export function FormDateInputDriver(
     getLabel: () => getFormFieldLabelText(formField),
     datePickerExists: () => datePickerBase.exists(),
     enterText: (text: string) => datePicker.inputDriver.enterText(text),
+    getValue: () => datePicker.inputDriver.getValue(),
     blur: () => datePicker.inputDriver.blur(),
+    selectDate: (date: Date) => datePicker.calendarDriver.clickDay(date),
     hasError: () => datePicker.inputDriver.hasStatus('error'),
     getErrorMessage: () => datePicker.inputDriver.getStatusMessage(),
     isRequired: () => formField.isRequired(),

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

@@ -8,6 +8,7 @@ import { BaseInputProps, BaseInputRef } from '../../types/base-input';
 import { useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 import { calendarPopoverDefaults } from '../popover-defaults';
+import { useFieldValueReplacement } from './use-field-value-replacement';
 import {
   getDateWithoutTimezone,
   getISODateStringWithFixedTimezone,
@@ -19,14 +20,17 @@ const _FormDateInput = (props: FormDateInputProps) => {
   const { field, dataHook, inputRef, formControl, data } = props;
   const { translate: t } = useWixPatternsContainer();
   const { t: tFields } = useTranslations();
+  const inputError = useRef('');
 
   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 (isEmpty(value)) {
+      return field.validation?.required
+        ? t('cairo.fieldValidation.requiredField')
+        : '';
     }
     if (validationType === 'formatError' && format) {
       return t('cairo.customFields.fieldType.date.invalid.value', {
@@ -42,7 +46,7 @@ const _FormDateInput = (props: FormDateInputProps) => {
     defaultValue: data?.[field?.id ?? ''],
     rules: {
       validate: (value) => {
-        const error = computeError(value);
+        const error = inputError.current || computeError(value);
         return error || true;
       },
     },
@@ -59,6 +63,16 @@ const _FormDateInput = (props: FormDateInputProps) => {
 
   const ref = useRef<BaseInputRef>({});
   const [errorMessage, setErrorMessage] = useState<string>('');
+  const revision = useFieldValueReplacement(formControl, field.id, (value) => {
+    inputError.current = '';
+    setErrorMessage('');
+    ref.current.invalid = false;
+    const iso =
+      typeof value === 'string'
+        ? getISODateStringWithFixedTimezone(value)
+        : undefined;
+    setDate(iso ? getDateWithoutTimezone(iso) : undefined);
+  });
 
   return (
     <FormField
@@ -68,6 +82,7 @@ const _FormDateInput = (props: FormDateInputProps) => {
       dataHook={dataHook}
     >
       <DatePicker
+        key={revision}
         ref={(internalRef) => {
           inputRef?.(ref.current);
           const inputEl =
@@ -84,6 +99,9 @@ const _FormDateInput = (props: FormDateInputProps) => {
         placeholderText={tFields('CMS.formDate.placeholder')}
         value={date}
         onChange={(newValue: Date) => {
+          inputError.current = '';
+          setErrorMessage('');
+          ref.current.invalid = false;
           setDate(newValue);
           const formattedDate = newValue
             ? getISODateStringWithFixedTimezone(newValue)
@@ -92,12 +110,16 @@ const _FormDateInput = (props: FormDateInputProps) => {
         }}
         onValidate={({ validationType, value: newValue, format }) => {
           const error = computeError(newValue, format, validationType);
+          inputError.current = error;
           setErrorMessage(error);
           ref.current.invalid = !!error;
 
           if (validationType === 'formatError' && newValue === '') {
             setDate(undefined);
             controller.field.onChange(null);
+          } else {
+            // Invalid text does not change the stored date, but must revalidate it.
+            controller.field.onChange(controller.field.value);
           }
         }}
         status={errorMessage ? 'error' : undefined}

package/src/components/date-input/use-field-value-replacement.ts

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from 'react';
+import { get } from '@wix/bex-core/form';
+import type { Control } from '@wix/bex-core/form';
+
+export function useFieldValueReplacement(
+  control: Control,
+  name: string,
+  onReplace: (value: unknown) => void,
+) {
+  const callback = useRef(onReplace);
+  callback.current = onReplace;
+  // A new key discards the picker's draft even when its saved value is unchanged.
+  const [revision, setRevision] = useState(0);
+
+  useEffect(() => {
+    // Control has no public reset listener. Input edits carry a type; setValue
+    // does not. Older RHF releases have a separate values subject.
+    const subjects:
+      | (Partial<Control['_subjects']> & {
+          values?: Pick<Control['_subjects']['state'], 'subscribe'>;
+        })
+      | undefined = control._subjects;
+    const values = subjects?.values ?? subjects?.state;
+    const array = subjects?.array;
+    // Reset cleanup is optional; an incompatible RHF version must not crash the field.
+    if (
+      typeof values?.subscribe !== 'function' ||
+      typeof array?.subscribe !== 'function'
+    ) {
+      return;
+    }
+    const subscription = values.subscribe({
+      next: (update) => {
+        if (
+          !update.values ||
+          !update.name ||
+          update.type ||
+          (update.name !== name && !name.startsWith(`${update.name}.`))
+        ) {
+          return;
+        }
+        callback.current(get(update.values, name));
+        setRevision((value) => value + 1);
+      },
+    });
+    // Reset broadcasts here even for unchanged values. Unlike the state
+    // subject, this does not fire when an unrelated field unregisters.
+    const resets = array.subscribe({
+      next: (update) => {
+        if (!update.name && update.values) {
+          callback.current(get(update.values, name));
+          setRevision((value) => value + 1);
+        }
+      },
+    });
+    return () => {
+      subscription?.unsubscribe?.();
+      resets?.unsubscribe?.();
+    };
+  }, [control, name]);
+
+  return revision;
+}

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

@@ -32,7 +32,10 @@ export function FormDateTimeDriver(
     dateExists: () => dateBase.exists(),
     timeExists: () => timeBase.exists(),
     enterDateText: (text: string) => datePicker.inputDriver.enterText(text),
+    getDateText: () => datePicker.inputDriver.getValue(),
     blurDate: () => datePicker.inputDriver.blur(),
+    enterTimeText: (text: string) => timeInput.setValue(text),
+    blurTime: () => timeInput.confirmValue(),
     dateHasError: () => datePicker.inputDriver.hasStatus('error'),
     getDateErrorMessage: () => datePicker.inputDriver.getStatusMessage(),
     timeHasError: () =>