@wix/patterns-fields 1.72.0 → 1.74.0

package/src/__tests__/components/audio/form-audio.spec.tsx

@@ -60,4 +60,26 @@ describe('FormAudio field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  // Only the empty state can fail `required`, so its add button is where
+  // react-hook-form should land. Nothing focuses a field whose input never
+  // reached controller.field.ref.
+  it('focuses the add button when a required value blocks submit', async () => {
+    const field = makeField({
+      type: 'AUDIO',
+      validation: { required: true },
+    });
+    const driver = setup({ field });
+
+    await driver.submit();
+
+    const active = document.activeElement;
+    expect(active?.tagName).toBe('BUTTON');
+    expect(
+      document
+        .querySelector(`[data-hook="audio-field-${field.id}"]`)
+        ?.contains(active),
+    ).toBe(true);
+  });
+
 });

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

@@ -1,5 +1,7 @@
 import '../../../testkit/test-polyfills';
 
+import { act, createEvent, fireEvent } from '@testing-library/react';
+
 import { FormColor } from '../../../components/color-view/form-color';
 import { FormColorDriver } from '../../../components/color-view/form-color.driver';
 import { FormFieldDriver, makeField } from '../../form-field.driver';
@@ -35,15 +37,56 @@ describe('FormColor field', () => {
     expect(await driver.tk.getValue()).toBe('');
   });
 
-  it('renders the FillButton when no color is set', async () => {
+  it('renders the FillPreview when no color is set and the field is at rest', async () => {
+    const driver = setup('');
+
+    expect(await driver.tk.hasFillPreview()).toBe(true);
+    expect(await driver.tk.hasFillButton()).toBe(false);
+  });
+
+  it('renders the FillButton once the input is focused with no color set', async () => {
     const driver = setup('');
 
-    expect(await driver.tk.getFillButton().exists()).toBe(true);
+    const input = document.querySelector('input')!;
+    await act(async () => {
+      input.focus();
+      fireEvent.focus(input);
+    });
+
+    expect(await driver.tk.hasFillButton()).toBe(true);
   });
 
   it('renders the FillPreview when a color is set', async () => {
     const driver = setup('#FF5733');
 
-    expect(await driver.tk.getFillPreview().exists()).toBe(true);
+    expect(await driver.tk.hasFillPreview()).toBe(true);
+  });
+
+  it('opens the color picker on the first press of the swatch', async () => {
+    const driver = setup('');
+
+    const swatch = document.querySelector<HTMLElement>(
+      '[data-hook="fill-preview-button"]',
+    )!;
+
+    await act(async () => {
+      // jsdom does not implement the browser's focus-on-mousedown default, so
+      // drive it here: the browser focuses the pressed button unless the
+      // handler prevents it. Without that guard the click sets `showPicker`,
+      // the swatch swaps to a FillButton, and the focused element is torn out
+      // from under the pointer.
+      const mouseDown = createEvent.mouseDown(swatch);
+      fireEvent(swatch, mouseDown);
+      if (!mouseDown.defaultPrevented) {
+        swatch.focus();
+      }
+      fireEvent.mouseUp(swatch);
+      fireEvent.click(swatch);
+    });
+
+    expect(await driver.tk.isPickerOpen()).toBe(true);
+    // The swatch has to survive its own click. WDS Popover reads a click whose
+    // target has been detached as a click outside itself and closes again.
+    expect(document.contains(swatch)).toBe(true);
   });
 });

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

@@ -51,4 +51,26 @@ describe('FormDocument field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  // Only the empty state can fail `required`, so its add button is where
+  // react-hook-form should land. Nothing focuses a field whose input never
+  // reached controller.field.ref.
+  it('focuses the add button when a required value blocks submit', async () => {
+    const field = makeField({
+      type: 'DOCUMENT',
+      validation: { required: true },
+    });
+    const driver = setup({ field });
+
+    await driver.submit();
+
+    const active = document.activeElement;
+    expect(active?.tagName).toBe('BUTTON');
+    expect(
+      document
+        .querySelector(`[data-hook="document-field-${field.id}"]`)
+        ?.contains(active),
+    ).toBe(true);
+  });
+
 });

package/src/__tests__/components/image/form-image-input.spec.tsx

@@ -72,4 +72,26 @@ describe('FormImageInput field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  // Only the empty state can fail `required`, so its add button is where
+  // react-hook-form should land. Nothing focuses a field whose input never
+  // reached controller.field.ref.
+  it('focuses the add button when a required value blocks submit', async () => {
+    const field = makeField({
+      type: 'IMAGE',
+      validation: { required: true },
+    });
+    const driver = setup({ field });
+
+    await driver.submit();
+
+    const active = document.activeElement;
+    expect(active?.tagName).toBe('BUTTON');
+    expect(
+      document
+        .querySelector(`[data-hook="image-field-${field.id}"]`)
+        ?.contains(active),
+    ).toBe(true);
+  });
+
 });

package/src/__tests__/components/media-gallery/form-media-gallery.spec.tsx

@@ -71,4 +71,25 @@ describe('FormMediaGallery field', () => {
 
     expect(await driver.tk.hasError()).toBe(false);
   });
+
+  // Only the empty state can fail `required`, so its add button is where
+  // react-hook-form should land. Nothing focuses a field whose input never
+  // reached controller.field.ref.
+  it('focuses the add button when a required value blocks submit', async () => {
+    const field = makeField({
+      type: 'MEDIA_GALLERY',
+      validation: { required: true },
+    });
+    const driver = setup({ field });
+
+    await driver.submit();
+
+    const active = document.activeElement;
+    expect(active?.tagName).toBe('BUTTON');
+    expect(
+      document
+        .querySelector(`[data-hook="media-gallery-field-${field.id}"]`)
+        ?.contains(active),
+    ).toBe(true);
+  });
 });

package/src/__tests__/components/multi-document/form-multi-document.spec.tsx

@@ -57,4 +57,25 @@ describe('FormMultiDocument field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  // Only the empty state can fail `required`, so its add button is where
+  // react-hook-form should land. Nothing focuses a field whose input never
+  // reached controller.field.ref.
+  it('focuses the add button when a required value blocks submit', async () => {
+    const field = makeField({
+      type: 'MULTI_DOCUMENT',
+      validation: { required: true },
+    });
+    const driver = setup({ field });
+
+    await driver.submit();
+
+    const active = document.activeElement;
+    expect(active?.tagName).toBe('BUTTON');
+    expect(
+      document
+        .querySelector(`[data-hook="multi-document-field-${field.id}"]`)
+        ?.contains(active),
+    ).toBe(true);
+  });
 });

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

@@ -77,4 +77,26 @@ describe('FormRichContent field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  // Ricos is lazy and renders no editable node here, so there is nothing to
+  // focus — the wrapper still has to bring the field into view. Without the
+  // ref registered, react-hook-form calls nothing at all.
+  it('brings the field into view when a required value blocks submit', async () => {
+    const scrollIntoView = jest.fn();
+    // Not implemented in jsdom.
+    Element.prototype.scrollIntoView = scrollIntoView;
+
+    const field = makeField({
+      type: 'RICH_CONTENT',
+      validation: { required: true },
+    });
+    const driver = setup({ field, initialValue: '' });
+
+    await driver.submit();
+
+    expect(scrollIntoView).toHaveBeenCalled();
+
+    delete (Element.prototype as Partial<Element>).scrollIntoView;
+  });
+
 });

package/src/__tests__/components/rich-editors-border.spec.ts

@@ -0,0 +1,45 @@
+import fs from 'fs';
+import path from 'path';
+
+// CAIRO-4561: both editors rendered with no border at all. The rules were
+// there, but they read `var(--wds-color-blue-300)` with no fallback, and a
+// custom property that resolves to nothing makes the whole declaration invalid
+// — so the border was dropped rather than falling back to a default. WDS Input
+// spells every one of these as `var(--token, var(--wsr-token, #literal))`.
+const STYLESHEETS = [
+  'components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css',
+  'components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css',
+];
+
+const read = (relative: string) =>
+  fs.readFileSync(path.join(__dirname, '../../', relative), 'utf8');
+
+/** Every declaration whose property is border-ish or a shadow. */
+const borderDeclarations = (css: string) =>
+  css
+    .split(/[;{}]/)
+    .map((chunk) => chunk.trim())
+    .filter((chunk) => /^(border[\w-]*|box-shadow)\s*:/.test(chunk));
+
+describe('rich editor borders', () => {
+  it.each(STYLESHEETS)('declares a visible border in %s', (relative) => {
+    const declarations = borderDeclarations(read(relative));
+
+    expect(
+      declarations.some((d) => d.includes('var(--wds-input-border-color,')),
+    ).toBe(true);
+  });
+
+  it.each(STYLESHEETS)(
+    'gives every custom property in a border declaration a fallback in %s',
+    (relative) => {
+      const withoutFallback = borderDeclarations(read(relative)).filter((d) =>
+        Array.from(d.matchAll(/var\(\s*(--[\w-]+)\s*([,)])/g)).some(
+          ([, , delimiter]) => delimiter === ')',
+        ),
+      );
+
+      expect(withoutFallback).toEqual([]);
+    },
+  );
+});

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

@@ -76,4 +76,22 @@ describe('FormRichText field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  // The editor exposes no focus handle, so react-hook-form gets a wrapper
+  // whose focus() brings the field into view and then focuses the editor if
+  // it has rendered. Nothing happens at all when the ref is not registered.
+  it('focuses the editor when a required value blocks submit', async () => {
+    const field = makeField({
+      type: 'RICH_TEXT',
+      validation: { required: true },
+    });
+    const driver = setup({ field, initialValue: '' });
+
+    await driver.submit();
+
+    const editable = document.querySelector('[contenteditable]');
+    expect(editable).toBeTruthy();
+    expect(document.activeElement).toBe(editable);
+  });
+
 });

package/src/__tests__/hooks/use-field-ref.spec.tsx

@@ -0,0 +1,132 @@
+import '../../testkit/test-polyfills';
+
+import React from 'react';
+import { act, render } from '@testing-library/react';
+import type { Field } from '@wix/bex-core';
+import { useForm } from '@wix/bex-core/form';
+import type { Control, FieldValues } from '@wix/bex-core/form';
+
+import { PatternsFieldsTestProvider } from '../../testkit/patterns-fields-test-provider';
+import { FormAddress } from '../../components/address/form-address';
+import { FormTime } from '../../components/time-input/form-time';
+import { FormDocument } from '../../components/document/form-document';
+import { FormImageInput } from '../../components/image/form-image-input';
+import { fieldRefHandle } from '../../hooks';
+
+interface Case {
+  name: string;
+  Component: React.ComponentType<any>;
+  field: Field;
+}
+
+const field = (id: string, type: string): Field =>
+  ({
+    id,
+    displayName: id,
+    type,
+    validation: { required: true },
+  } as Field);
+
+// Every control here answers focus() and nothing else, which is the shape that
+// used to make setFocus with shouldSelect throw.
+const CASES: Case[] = [
+  // AddressInputImperativeHandle: { focus, clear }
+  {
+    name: 'FormAddress',
+    Component: FormAddress,
+    field: field('location', 'ADDRESS'),
+  },
+  // TimeInputImperativeActions: no select()
+  { name: 'FormTime', Component: FormTime, field: field('start', 'TIME') },
+  // AddItemActions: { blur, focus }. Shared with audio, multi-document and
+  // media-gallery, so one of the four covers that shape.
+  {
+    name: 'FormDocument',
+    Component: FormDocument,
+    field: field('spec', 'DOCUMENT'),
+  },
+  // ImageViewer instance, shared with video.
+  {
+    name: 'FormImageInput',
+    Component: FormImageInput,
+    field: field('cover', 'IMAGE'),
+  },
+];
+
+describe('fieldRefHandle', () => {
+  it('sends focus to the given callback', () => {
+    const focus = jest.fn();
+
+    fieldRefHandle(focus, () => undefined).focus();
+
+    expect(focus).toHaveBeenCalled();
+  });
+
+  // The whole point: a control with only focus() must not make the other
+  // calls blow up, because react-hook-form makes them unconditionally.
+  it('absorbs the calls a focus-only control cannot answer', () => {
+    const handle = fieldRefHandle(
+      () => {},
+      () => ({ focus: () => {} }),
+    );
+
+    expect(() => handle.select()).not.toThrow();
+    expect(() => handle.setCustomValidity('nope')).not.toThrow();
+    expect(handle.reportValidity()).toBe(true);
+  });
+
+  it('passes the calls on to a control that does answer them', () => {
+    const control = {
+      focus: jest.fn(),
+      select: jest.fn(),
+      setCustomValidity: jest.fn(),
+      reportValidity: jest.fn().mockReturnValue(false),
+    };
+    const handle = fieldRefHandle(control.focus, () => control);
+
+    handle.select();
+    handle.setCustomValidity('bad');
+
+    expect(control.select).toHaveBeenCalled();
+    expect(control.setCustomValidity).toHaveBeenCalledWith('bad');
+    expect(handle.reportValidity()).toBe(false);
+  });
+});
+
+describe.each(CASES)(
+  '$name, whose control only has focus',
+  ({ Component, field: f }) => {
+    let form: ReturnType<typeof useForm<FieldValues>> | undefined;
+
+    const Harness = () => {
+      const methods = useForm<FieldValues>({ mode: 'onChange' });
+      form = methods;
+      return (
+        <Component
+          field={f}
+          value={undefined as never}
+          onChange={() => {}}
+          dataHook={`${f.id}-field`}
+          formControl={methods.control as Control<FieldValues>}
+          data={{}}
+        />
+      );
+    };
+
+    // react-hook-form reaches select() through the handle it wraps around
+    // whatever was registered, so a focus-only control used to throw here.
+    it('survives setFocus with shouldSelect', () => {
+      render(
+        <PatternsFieldsTestProvider>
+          <Harness />
+        </PatternsFieldsTestProvider>,
+      );
+
+      expect(() =>
+        act(() => {
+          form!.setFocus(f.id, { shouldSelect: true });
+        }),
+      ).not.toThrow();
+    });
+  },
+);

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

@@ -9,6 +9,7 @@ import type { Address } from '../../types/address';
 import { isEmpty } from '../../validations/value';
 
 import { FormAddressInput } from './input/form-address-input';
+import { useFieldRef } from '../../hooks';
 
 export interface FormAddressProps extends BaseInputProps<Address> {}
 
@@ -31,6 +32,8 @@ const _FormAddress = (props: FormAddressProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   return (
     <FormField
       label={field.displayName}
@@ -45,7 +48,7 @@ const _FormAddress = (props: FormAddressProps) => {
         onChange={(value) => controller.field.onChange?.(value)}
         // Hand the input to react-hook-form so shouldFocusError scrolls to +
         // focuses this field when it blocks save.
-        inputRef={controller.field.ref}
+        inputRef={setFieldRef}
         dataHook={`address-${field.id}`}
         field={field.id}
       />

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput1990163582";
+var _namespace_ = "addressinput517975534";
 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":"addressinput1990163582__root","tableAddressInput":"addressinput1990163582__tableAddressInput"};
+export var classes = {"root":"addressinput517975534__root","tableAddressInput":"addressinput517975534__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,9 +1,9 @@
-import React, { useCallback, useRef } from 'react';
+import React from 'react';
 
 import type { Address } from '../../../types/address';
 import type { FormInputProps } from '../../../types/form-input';
 import { Z_INDEX_MODAL_POPOVER } from '../../common';
-import { useAutoFocus } from '../../../hooks';
+import { useAutoFocus, useMergedRef } from '../../../hooks';
 
 import type { AddressInputImperativeHandle } from './address-input';
 import { AddressInput } from './address-input';
@@ -25,28 +25,13 @@ export const FormAddressInput: React.FC<FormAddressInputProps> = ({
   dataHook,
   inputRef: forwardedRef,
 }) => {
-  const inputRef = useRef<AddressInputImperativeHandle | null>(null);
+  const [inputRef, setInputRef] =
+    useMergedRef<AddressInputImperativeHandle>(forwardedRef);
   useAutoFocus(inputRef, autoFocus);
 
-  // autoFocus reads the handle from here, so a caller's ref has to be filled
-  // alongside it rather than replacing it.
-  const setRef = useCallback(
-    (handle: AddressInputImperativeHandle | null) => {
-      inputRef.current = handle;
-      if (typeof forwardedRef === 'function') {
-        forwardedRef(handle);
-      } else if (forwardedRef) {
-        (
-          forwardedRef as React.MutableRefObject<AddressInputImperativeHandle | null>
-        ).current = handle;
-      }
-    },
-    [forwardedRef],
-  );
-
   return (
     <AddressInput
-      ref={setRef}
+      ref={setInputRef}
       dataHook={dataHook}
       value={data}
       onChange={onChange}

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_ = "actionsmenu3350107513";
+var _namespace_ = "actionsmenu425944360";
 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":"actionsmenu3350107513__root","action":"actionsmenu3350107513__action"};
+export var classes = {"root":"actionsmenu425944360__root","action":"actionsmenu425944360__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_ = "formaudiofield4179309703";
+var _namespace_ = "formaudiofield4018066963";
 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":"formaudiofield4179309703__root","addItem":"formaudiofield4179309703__addItem","mediaTitle":"formaudiofield4179309703__mediaTitle"};
+export var classes = {"root":"formaudiofield4018066963__root","addItem":"formaudiofield4018066963__addItem","mediaTitle":"formaudiofield4018066963__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-field/form-audio-field.tsx

@@ -5,7 +5,7 @@ import { getMediaURL } from '../../../auto-field-types';
 import type { AddItemActions } from '@wix/design-system';
 import { AddItem, AudioPlayer, Box, Text } from '@wix/design-system';
 
-import { useTranslations, useWithCallback } from '../../../hooks';
+import { useMergedRef, useTranslations, useWithCallback } from '../../../hooks';
 import { getMediaTitle, MEDIA_TYPES } from '../../../utils';
 
 import { Z_INDEX_MODAL_POPOVER } from '../../common';
@@ -26,13 +26,14 @@ export const FormAudioField: FC<FormMediaControlProps> = ({
   readOnly,
   invalid,
   dataHook,
+  inputRef: forwardedRef,
 }) => {
   const { t } = useTranslations();
 
   const onChange = useWithCallback(onChangeAudio, onInput);
   const onClear = useWithCallback(onClearAudio, onInput);
 
-  const inputRef = useRef<AddItemActions>(null);
+  const [inputRef, setInputRef] = useMergedRef<AddItemActions>(forwardedRef);
   const viewRef = useRef<HTMLDivElement>(null);
 
   const { callMedia, onMediaLoad, downloadMedia, loading } = useMediaControl({
@@ -91,7 +92,7 @@ export const FormAudioField: FC<FormMediaControlProps> = ({
   if (!data) {
     return (
       <AddItem
-        ref={inputRef}
+        ref={setInputRef}
         dataHook={dataHook}
         className={style(classes.addItem, {
           disabled: !!readOnly,

package/src/components/audio/audio-field/form-audio.tsx

@@ -7,6 +7,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../../types/base-input';
 import { isEmpty } from '../../../validations/string';
 import { FormAudioField } from './form-audio-field';
+import { useFieldRef } from '../../../hooks';
 
 export interface FormAudioProps extends BaseInputProps<string> {}
 
@@ -30,6 +31,8 @@ const _FormAudio = (props: FormAudioProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   return (
     <FormField
       label={field.displayName}
@@ -39,6 +42,10 @@ const _FormAudio = (props: FormAudioProps) => {
       dataHook={dataHook}
     >
       <FormAudioField
+        // Hand the add button to react-hook-form so
+        // shouldFocusError scrolls to + focuses this field when it
+        // blocks save.
+        inputRef={setFieldRef}
         data={controller.field.value}
         onChange={(value) => controller.field.onChange(value)}
         onClear={() => controller.field.onChange(null)}

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_ = "audioplayer3525516735";
+var _namespace_ = "audioplayer1561698613";
 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":"audioplayer3525516735__root"};
+export var classes = {"root":"audioplayer1561698613__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_ = "cellcolorview2573090781";
+var _namespace_ = "cellcolorview1736640766";
 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":"cellcolorview2573090781__root","hashPrefix":"cellcolorview2573090781__hashPrefix"};
+export var classes = {"root":"cellcolorview1736640766__root","hashPrefix":"cellcolorview1736640766__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};