@wix/patterns-fields 1.108.0 → 1.110.0

package/dist/types/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;;;;;;;;;;;;CAA46B,CAAC;AAC/7B,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;;;;;;;;;;;CAAojB,CAAC"}
+{"version":3,"file":"toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;;;;;;;;;;;;CAA67B,CAAC;AACh9B,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;;;;;;;;;;;CAAojB,CAAC"}

package/dist/types/components/text/text-view.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-view.st.css.d.ts","sourceRoot":"","sources":["../../../../src/components/text/text-view.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;CAA8E,CAAC;AACjG,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI,IAAK,CAAC"}
+{"version":3,"file":"text-view.st.css.d.ts","sourceRoot":"","sources":["../../../../src/components/text/text-view.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;CAAgF,CAAC;AACnG,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI,IAAK,CAAC"}

package/dist/types/utils/keyboard.d.ts

@@ -0,0 +1,4 @@
+/** Enter (not Shift+Enter, not mid-composition) pressed inside editable text —
+ *  not in a toolbar input such as a link URL field. */
+export declare const isEnterInEditableText: (e: KeyboardEvent) => boolean;
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/types/utils/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../../src/utils/keyboard.ts"],"names":[],"mappings":"AAAA;uDACuD;AACvD,eAAO,MAAM,qBAAqB,GAAI,GAAG,aAAa,YAIqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.108.0",
+  "version": "1.110.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -124,7 +124,7 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.89.0",
+    "@wix/patterns-fields-utils": "1.91.0",
     "@wix/rich-content": "1.0.37",
     "@wix/sdk": "^1.17.2",
     "@wix/wix-ui-icons-common": "^3.189.0",
@@ -152,8 +152,8 @@
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
     "@wix/babel-cli": "^1.11.0",
-    "@wix/bex-core": "2.386.0",
-    "@wix/design-system": "^1.319.0",
+    "@wix/bex-core": "2.388.0",
+    "@wix/design-system": "^1.330.2",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
     "@wix/wix-data-items-common": "^1.0.270",
@@ -212,5 +212,5 @@
       "optional": true
     }
   },
-  "falconPackageHash": "7236b46723bb703c3913b3fb94d84a23b696119b21426b35217859d5"
+  "falconPackageHash": "bb5b3c3bf9f0007ceacfd54e6d151e8e85457fdc68e652502a14df5e"
 }

package/src/__tests__/components/cell-rich-content-input.spec.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { act, render } from '@testing-library/react';
+import { CellRichContentInput } from '../../components/rich-content/cell-rich-content-input';
+
+type ExitFullScreen = (content?: unknown, isContentChanged?: boolean) => void;
+let exitFullScreen: ExitFullScreen;
+
+jest.mock(
+  '../../components/rich-content/rich-content-input/rich-content-editor',
+  () => ({
+    RichContentEditor: (props: { onExitFullScreen: ExitFullScreen }) => {
+      exitFullScreen = props.onExitFullScreen;
+      return null;
+    },
+  }),
+);
+
+jest.mock(
+  '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos',
+  () => ({
+    fromPlainText: (text: string) => ({ nodes: [], text }),
+    toPlainTextSync: () => '',
+    ensureContentId: (content: unknown) => content,
+  }),
+);
+
+describe('<CellRichContentInput/>', () => {
+  const content = { nodes: [] };
+
+  const setup = (props: { initialTypedKey?: string } = {}) => {
+    const onChange = jest.fn();
+    const onSave = jest.fn();
+    render(
+      <CellRichContentInput
+        value={content}
+        onChange={onChange}
+        onSave={onSave}
+        {...props}
+      />,
+    );
+    return { onChange, onSave };
+  };
+
+  it('closes without reporting a change when the content did not change', () => {
+    const { onChange, onSave } = setup();
+    act(() => exitFullScreen(content, false));
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onSave).toHaveBeenCalledTimes(1);
+  });
+
+  it('reports the new content when it changed', () => {
+    const { onChange, onSave } = setup();
+    const edited = { nodes: [{ type: 'PARAGRAPH' }] };
+    act(() => exitFullScreen(edited, true));
+    expect(onChange).toHaveBeenCalledWith(edited);
+    expect(onSave).toHaveBeenCalledTimes(1);
+  });
+
+  it('reports a typed-to-edit key as a change', () => {
+    const { onChange } = setup({ initialTypedKey: 'x' });
+    act(() => exitFullScreen(content, false));
+    expect(onChange).toHaveBeenCalledWith(content);
+  });
+
+  it('saves only once when closed twice (X button and Escape together)', () => {
+    const { onSave } = setup();
+    act(() => {
+      exitFullScreen(content, true);
+      exitFullScreen(content, true);
+    });
+    expect(onSave).toHaveBeenCalledTimes(1);
+  });
+});

package/src/__tests__/components/cell-rich-text-editor.spec.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { act, render } from '@testing-library/react';
+import { EditorState, Modifier } from 'draft-js';
+import { CellRichTextEditor } from '../../components/rich-text/cell-rich-text-editor';
+
+let editorProps: {
+  editorState: EditorState;
+  onChange: (state: EditorState) => void;
+};
+
+jest.mock(
+  '../../components/rich-text/rich-text-input/rich-text-editor/rich-editor',
+  () => ({
+    RichEditor: (props: typeof editorProps) => {
+      editorProps = props;
+      return null;
+    },
+  }),
+);
+
+describe('<CellRichTextEditor/>', () => {
+  const setup = (props: { initialTypedKey?: string } = {}) => {
+    const onChange = jest.fn();
+    render(
+      <CellRichTextEditor
+        value="<p>Hello</p>"
+        onChange={onChange}
+        {...props}
+      />,
+    );
+    return { onChange };
+  };
+
+  it('does not call onChange for a selection-only change (e.g. focus)', () => {
+    const { onChange } = setup();
+    act(() =>
+      editorProps.onChange(EditorState.moveFocusToEnd(editorProps.editorState)),
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('calls onChange when the content changes', () => {
+    const { onChange } = setup();
+    const state = editorProps.editorState;
+    const content = Modifier.insertText(
+      state.getCurrentContent(),
+      state.getSelection(),
+      '!',
+    );
+    act(() =>
+      editorProps.onChange(
+        EditorState.push(state, content, 'insert-characters'),
+      ),
+    );
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0]).toContain('!');
+  });
+
+  it('reports a typed-to-edit key as a change on mount', () => {
+    const { onChange } = setup({ initialTypedKey: 'x' });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0]).toContain('x');
+  });
+});

package/src/__tests__/components/cell-rich-text-input.spec.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { CellRichTextInput } from '../../components/rich-text/cell-rich-text-input';
+
+jest.mock('../../components/rich-text/cell-rich-text-editor', () => ({
+  DEFAULT_CELL_TEXT_STYLE: {},
+  CellRichTextEditor: () => (
+    <div data-hook="mock-editor" contentEditable="true" />
+  ),
+}));
+
+describe('<CellRichTextInput/>', () => {
+  const setup = () => {
+    const onCommit = jest.fn();
+    const { baseElement } = render(
+      <CellRichTextInput value="" onChange={jest.fn()} onCommit={onCommit} />,
+    );
+    const editor = baseElement.querySelector('[data-hook="mock-editor"]')!;
+    return { onCommit, editor };
+  };
+
+  it('commits on Enter in the text', () => {
+    const { onCommit, editor } = setup();
+    fireEvent.keyDown(editor, { key: 'Enter' });
+    expect(onCommit).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not commit on Shift+Enter', () => {
+    const { onCommit, editor } = setup();
+    fireEvent.keyDown(editor, { key: 'Enter', shiftKey: true });
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it('does not commit on Enter outside the text (e.g. a toolbar input)', () => {
+    const { onCommit } = setup();
+    fireEvent.keyDown(document.body, { key: 'Enter' });
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,100 @@
+import '../../../testkit/test-polyfills';
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { CellDateInput } from '../../../components/date-input/cell-date-input';
+
+const setup = (value: Date | null = new Date(2024, 0, 15)) => {
+  const onChange = jest.fn();
+  const onEmpty = jest.fn();
+  const onEnter = jest.fn();
+  const { container } = render(
+    <CellDateInput
+      value={value}
+      onChange={onChange}
+      onEmpty={onEmpty}
+      onEnter={onEnter}
+    />,
+  );
+  const input = container.querySelector('input')!;
+  return { input, onChange, onEmpty, onEnter };
+};
+
+describe('CellDateInput', () => {
+  it('reports an emptied input through onEmpty instead of emitting a date', () => {
+    const { input, onChange, onEmpty } = setup();
+
+    fireEvent.change(input, { target: { value: '' } });
+
+    expect(onEmpty).toHaveBeenCalledTimes(1);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('reports Enter on an emptied input through onEnter with null', () => {
+    const { input, onChange, onEnter } = setup();
+
+    fireEvent.change(input, { target: { value: '' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onEnter).toHaveBeenCalledWith(null);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('reports Enter on a typed date through onEnter with the date', () => {
+    const { input, onEnter } = setup();
+
+    fireEvent.change(input, { target: { value: '02/20/2024' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onEnter).toHaveBeenCalledWith(new Date(2024, 1, 20));
+  });
+
+  describe('with onEnter and no onEmpty', () => {
+    const setupEnterOnly = () => {
+      const onEnter = jest.fn();
+      const { container } = render(
+        <CellDateInput value={new Date(2024, 0, 15)} onEnter={onEnter} />,
+      );
+      const input = container.querySelector('input')!;
+      return { input, onEnter };
+    };
+
+    it('reports Enter on a typed date through onEnter with the date', () => {
+      const { input, onEnter } = setupEnterOnly();
+
+      fireEvent.change(input, { target: { value: '02/20/2024' } });
+      fireEvent.keyDown(input, { key: 'Enter' });
+
+      expect(onEnter).toHaveBeenCalledWith(new Date(2024, 1, 20));
+    });
+
+    it('reports Enter on an emptied input through onEnter with null', () => {
+      const { input, onEnter } = setupEnterOnly();
+
+      fireEvent.change(input, { target: { value: '' } });
+      fireEvent.keyDown(input, { key: 'Enter' });
+
+      expect(onEnter).toHaveBeenCalledWith(null);
+    });
+  });
+
+  it('emits a typed date through onChange', () => {
+    const { input, onChange, onEmpty } = setup();
+
+    fireEvent.change(input, { target: { value: '02/20/2024' } });
+
+    expect(onChange).toHaveBeenCalledWith(new Date(2024, 1, 20));
+    expect(onEmpty).not.toHaveBeenCalled();
+  });
+
+  it('emits a day picked from the calendar while the input is empty', () => {
+    const { input, onChange, onEmpty } = setup(null);
+
+    fireEvent.click(input);
+    fireEvent.click(document.querySelector('[data-date]')!);
+
+    expect(onChange).toHaveBeenCalledWith(expect.any(Date));
+    expect(onEmpty).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/components/date-input/date-picker-internals.spec.tsx

@@ -0,0 +1,69 @@
+import '../../../testkit/test-polyfills';
+
+import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react';
+import { DatePicker } from '@wix/design-system';
+
+import { onSameDayCalendarPick } from '../../../components/date-input/date-picker-internals';
+
+const setup = () => {
+  const onChange = jest.fn();
+  const onPick = jest.fn();
+  const pickerRef = React.createRef<DatePicker>();
+  render(
+    <DatePicker
+      ref={pickerRef}
+      value={new Date(2024, 0, 15, 3, 30)}
+      onChange={onChange}
+    />,
+  );
+  const undo = onSameDayCalendarPick(pickerRef.current, onPick);
+  const clickDay = (day: number) => {
+    act(() => {
+      pickerRef.current!.openCalendar();
+    });
+    fireEvent.click(
+      document.querySelector(
+        `[data-outsideday='false'][data-date='2024-0-${day}']`,
+      )!,
+    );
+  };
+  return { onChange, onPick, undo, clickDay };
+};
+
+describe('onSameDayCalendarPick', () => {
+  it('reports a pick of the value day, which WDS skips', () => {
+    const { onChange, onPick, clickDay } = setup();
+
+    clickDay(15);
+
+    expect(onPick).toHaveBeenCalledTimes(1);
+    expect(onPick).toHaveBeenCalledWith(new Date(2024, 0, 15, 12));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('does not report a pick of another day, which WDS sends to onChange', () => {
+    const { onChange, onPick, clickDay } = setup();
+
+    clickDay(20);
+
+    expect(onPick).not.toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(new Date(2024, 0, 20, 3, 30));
+  });
+
+  it('stops reporting once undone', () => {
+    const { onPick, undo, clickDay } = setup();
+
+    undo();
+    clickDay(15);
+
+    expect(onPick).not.toHaveBeenCalled();
+  });
+
+  it('does nothing without a picker', () => {
+    const onPick = jest.fn();
+
+    expect(() => onSameDayCalendarPick(null, onPick)()).not.toThrow();
+    expect(onPick).not.toHaveBeenCalled();
+  });
+});

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

@@ -22,6 +22,147 @@ const setup = (
 };
 
 describe('FormDateInput field', () => {
+  it.each(['reset', 'setValue'] as const)(
+    'clears stale errors on %s, even when restoring the same value',
+    async (method) => {
+      const driver = setup({ initialValue: '2026-09-16' });
+      const initialText = await driver.tk.getValue();
+      await driver.tk.enterText('not-a-date');
+      await driver.tk.blur();
+      await driver.submit();
+      expect(driver.onSubmit).not.toHaveBeenCalled();
+
+      await driver[method]('2026-09-16');
+      expect(await driver.tk.getValue()).toBe(initialText);
+      expect(await driver.tk.hasError()).toBe(false);
+      await driver.submit();
+      expect(driver.onSubmit).toHaveBeenCalledTimes(1);
+      expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+        '2026-09-16',
+      );
+    },
+  );
+
+  it.each(['reset', 'setValue'] as const)(
+    'shows and submits an externally replaced date via %s',
+    async (method) => {
+      const driver = setup({ initialValue: '2026-09-16' });
+      const initialText = await driver.tk.getValue();
+      await driver.tk.enterText('not-a-date');
+      await driver.tk.blur();
+
+      await driver[method]('2026-09-18');
+      expect(await driver.tk.getValue()).not.toBe(initialText);
+      expect(await driver.tk.getValue()).not.toBe('not-a-date');
+      expect(await driver.tk.hasError()).toBe(false);
+      await driver.submit();
+      expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+        '2026-09-18',
+      );
+    },
+  );
+
+  it('keeps the error when another field is replaced or removed', async () => {
+    const driver = setup({ initialValue: '2026-09-16' });
+    await driver.tk.enterText('not-a-date');
+    await driver.tk.blur();
+    await driver.setValue('2026-09-18', 'anotherField');
+    await driver.unregister('anotherField');
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it.each([false, true])(
+    'resets invalid input to an empty value (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATE', validation: { required } }),
+      });
+      await driver.tk.enterText('not-a-date');
+      await driver.tk.blur();
+      await driver.reset(null);
+      expect(await driver.tk.getValue()).toBe('');
+      await driver.submit();
+      expect(driver.onSubmit).toHaveBeenCalledTimes(required ? 0 : 1);
+      if (!required) {
+        expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBeNull();
+      }
+    },
+  );
+
+  it.each([false, true])(
+    'blocks submit for invalid text over a valid date (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATE', validation: { required } }),
+        initialValue: '2026-09-16',
+      });
+
+      await driver.tk.enterText('not-a-date');
+      await driver.tk.blur();
+      expect(await driver.tk.hasError()).toBe(true);
+
+      await driver.submit();
+
+      expect(driver.onSubmit).not.toHaveBeenCalled();
+    },
+  );
+
+  it('allows submit after correcting an invalid date', async () => {
+    const driver = setup({ initialValue: '2026-09-16' });
+    await driver.tk.enterText('not-a-date');
+    await driver.tk.blur();
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+
+    await driver.tk.enterText('09/17/2026');
+    await driver.tk.blur();
+    await driver.submit();
+
+    expect(await driver.tk.hasError()).toBe(false);
+    expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+      '2026-09-17',
+    );
+  });
+
+  it.each([false, true])(
+    'handles clearing an invalid date (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATE', validation: { required } }),
+        initialValue: '2026-09-16',
+      });
+      await driver.tk.enterText('not-a-date');
+      await driver.tk.blur();
+      await driver.tk.enterText('');
+      await driver.tk.blur();
+      await driver.submit();
+
+      expect(await driver.tk.hasError()).toBe(required);
+      expect(driver.onSubmit).toHaveBeenCalledTimes(required ? 0 : 1);
+      if (!required) {
+        expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBeNull();
+      }
+    },
+  );
+
+  it('allows submit after replacing invalid text with a calendar selection', async () => {
+    const driver = setup({ initialValue: '2026-09-16' });
+    await driver.tk.enterText('not-a-date');
+    await driver.tk.blur();
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+
+    await driver.tk.calendarPopover.open();
+    await driver.tk.selectDate(new Date(2026, 8, 17));
+    await driver.submit();
+
+    expect(await driver.tk.hasError()).toBe(false);
+    expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+      '2026-09-17',
+    );
+  });
+
   it('renders the field displayName as the label', async () => {
     const driver = setup();