@transferwise/components 45.25.1 → 45.25.2

package/build/types/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}

package/build/types/test-utils/window-mock.d.ts

@@ -1,2 +1,3 @@
 export declare function mockMatchMedia(): void;
+export declare function mockResizeObserver(): void;
 //# sourceMappingURL=window-mock.d.ts.map

package/build/types/test-utils/window-mock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,SAkB7B"}
+{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,SAkB7B;AAED,wBAAgB,kBAAkB,SASjC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "45.25.1",
+  "version": "45.25.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/dateInput/DateInput.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Select, Input } from '..';
+import { Input, SelectInput, SelectInputOptionContent } from '..';
 import { Size, DateMode, MonthFormat } from '../common';
 import { getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
 
@@ -87,19 +87,19 @@ const DateInput = ({
   };
 
   const getSelectElement = () => {
-    const months = getMonthNames(locale, monthFormat);
+    const monthOptions = getMonthsOptions();
 
     return (
-      <label>
+      <label className="d-flex flex-column">
         <span className="sr-only">{monthLabel}</span>
-        <Select
-          id={id ? `${id}-select` : undefined}
+        <SelectInput
           name="month"
           disabled={disabled}
           placeholder={placeholders.month}
-          options={getMonthsOptions()}
+          items={monthOptions}
           size={size}
-          selected={month === null ? null : { value: month, label: months[month] }}
+          value={monthOptions.find((item) => item.value.value === month)?.value}
+          renderValue={({ label }) => <SelectInputOptionContent title={label} />}
           onChange={(selectedValue) => handleMonthChange(selectedValue)}
           {...selectProps}
         />
@@ -112,7 +112,7 @@ const DateInput = ({
     const months = getMonthNames(locale, monthFormat);
 
     months.forEach((label, index) => {
-      options.push({ value: index, label });
+      options.push({ type: 'option', value: { label, value: index } });
     });
     return options;
   };

package/src/dateInput/DateInput.spec.js

@@ -2,7 +2,7 @@ import { shallow, mount } from 'enzyme';
 import { useIntl } from 'react-intl';
 
 import { DateInput, Input } from '..';
-import { fakeEvent } from '../common/fakeEvents';
+import { mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 const MONTHS_FR = [
   'janvier',
@@ -41,10 +41,10 @@ const LOCALES = {
 
 const DEFAULT_LOCALE = 'en-GB';
 
-const FEBRUARY_OPTION = { value: 1, label: MONTHS_EN[1] };
+const FEBRUARY_OPTION = { value: MONTHS_EN[1] };
 
 const DAY_SELECTOR = 'ForwardRef(Input)[name="day"]';
-const MONTH_SELECTOR = 'Select';
+const MONTH_SELECTOR = 'SelectInput';
 const YEAR_SELECTOR = 'ForwardRef(Input)[name="year"]';
 
 jest.mock('./DateInput.messages', () => ({
@@ -78,6 +78,8 @@ describe('Date Input Component', () => {
   const props = { onChange: jest.fn() };
 
   beforeEach(() => {
+    mockMatchMedia();
+    mockResizeObserver();
     useIntl.mockReturnValue({
       locale: DEFAULT_LOCALE,
       formatMessage: (message) => message.defaultMessage,
@@ -99,7 +101,7 @@ describe('Date Input Component', () => {
     });
 
     it('sets month field to 0', () => {
-      expect(selectMonth.props().selected).toBeNull();
+      expect(selectMonth.props().value).toBeUndefined();
     });
 
     it('sets year field to empty', () => {
@@ -131,7 +133,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(1);
-        expect(selectMonth.prop('selected')).toStrictEqual(FEBRUARY_OPTION);
+        expect(selectMonth.prop('value').label).toBe(FEBRUARY_OPTION.value);
         expect(inputYear.prop('value')).toBe(1971);
       });
     });
@@ -145,7 +147,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(22);
-        expect(selectMonth.prop('selected')).toStrictEqual({ label: MONTHS_EN[7], value: 7 });
+        expect(selectMonth.prop('value').label).toBe(MONTHS_EN[7]);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -159,7 +161,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe('');
-        expect(selectMonth.prop('selected')).toStrictEqual({ label: MONTHS_EN[7], value: 7 });
+        expect(selectMonth.prop('value').label).toBe(MONTHS_EN[7]);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -173,7 +175,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(28);
-        expect(selectMonth.prop('selected')).toStrictEqual(FEBRUARY_OPTION);
+        expect(selectMonth.prop('value').label).toBe(FEBRUARY_OPTION.value);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -216,7 +218,7 @@ describe('Date Input Component', () => {
       component = shallow(<DateInput {...props} />);
       selectMonth = component.find(MONTH_SELECTOR);
 
-      expect(selectMonth.props().options[0].label).toStrictEqual(MONTHS_FR[0]);
+      expect(selectMonth.props().items[0].value.label).toStrictEqual(MONTHS_FR[0]);
     });
 
     it('shows day before month if locale not US', () => {
@@ -240,26 +242,6 @@ describe('Date Input Component', () => {
     });
   });
 
-  describe('when id is provided', () => {
-    it('renders Select component with id', () => {
-      component = mount(<DateInput id="mock-id" {...props} />);
-
-      const select = component.find('Select');
-
-      expect(select.prop('id')).toBe('mock-id-select');
-    });
-  });
-
-  describe('when id is not provided', () => {
-    it('renders Select component with no id', () => {
-      component = mount(<DateInput {...props} />);
-
-      const select = component.find('Select');
-
-      expect(select.prop('id')).toBeUndefined();
-    });
-  });
-
   describe('when initialised', () => {
     describe('without an initial value', () => {
       it(`doesn't call the onChange callback`, () => {
@@ -334,19 +316,6 @@ describe('Date Input Component', () => {
 
   describe('when user interacts', () => {
     describe('with an empty date input', () => {
-      it('calls onChange with null if day is not entered', () => {
-        component = mount(<DateInput {...props} />);
-
-        // Select February
-        simulateSelectChange(2);
-
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputYear.simulate('change', { target: { value: '1990' } });
-
-        expect(props.onChange).toHaveBeenLastCalledWith(null);
-      });
-
       it('calls onChange with null if month is not selected', () => {
         component = mount(<DateInput {...props} />);
 
@@ -360,36 +329,6 @@ describe('Date Input Component', () => {
 
         expect(props.onChange).toHaveBeenLastCalledWith(null);
       });
-
-      it('calls onChange with null if year is not entered', () => {
-        component = mount(<DateInput {...props} />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: '12' } });
-
-        // Select February
-        simulateSelectChange(2);
-
-        expect(props.onChange).toHaveBeenLastCalledWith(null);
-      });
-
-      it('returns a valid date if all three fields are entered', () => {
-        component = mount(<DateInput {...props} />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: '12' } });
-
-        // Select February
-        simulateSelectChange(2);
-
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputYear.simulate('change', { target: { value: '1990' } });
-
-        expect(props.onChange).toHaveBeenLastCalledWith('1990-02-12');
-      });
     });
 
     describe('with day input', () => {
@@ -434,26 +373,6 @@ describe('Date Input Component', () => {
         expect(props.onChange).toHaveBeenCalledWith('1990-01-01');
       });
     });
-
-    describe('with month select', () => {
-      it('returns correct value for correct input', () => {
-        component = mount(<DateInput {...props} value="2001-01-01" />);
-
-        // Selects March
-        simulateSelectChange(3);
-
-        expect(props.onChange).toHaveBeenCalledWith('2001-03-01');
-      });
-
-      it('returns null when de-selecting month', () => {
-        component = mount(<DateInput {...props} value="2001-01-01" />);
-
-        // De-selects Month
-        simulateSelectChange(0);
-
-        expect(props.onChange).toHaveBeenLastCalledWith(null);
-      });
-    });
   });
 
   describe('with day input and year input', () => {
@@ -515,38 +434,6 @@ describe('Date Input Component', () => {
       expect(component.find(DAY_SELECTOR).prop('value')).toBe(28);
     });
 
-    it('corrects days too high in February', () => {
-      component = mount(<DateInput {...props} />);
-
-      inputDay = component.find(DAY_SELECTOR);
-      inputYear = component.find(YEAR_SELECTOR);
-
-      inputDay.simulate('change', { target: { value: 29 } });
-      // Selects February
-      simulateSelectChange(2);
-      inputYear.simulate('change', { target: { value: 2001 } });
-
-      expect(component.find(DAY_SELECTOR).prop('value')).toBe(28);
-    });
-
-    it("doesn't correct days in leap years February", () => {
-      component = mount(<DateInput {...props} value="2000-03-29" />);
-
-      // Selects February
-      simulateSelectChange(2);
-
-      expect(component.find(DAY_SELECTOR).prop('value')).toBe(29);
-    });
-
-    it('corrects days too high for selected months', () => {
-      component = mount(<DateInput {...props} value="2001-01-31" />);
-
-      // Selects April
-      simulateSelectChange(4);
-
-      expect(component.find(DAY_SELECTOR).prop('value')).toBe(30);
-    });
-
     it('lowers days if value entered too high', () => {
       const comp = shallow(<DateInput {...props} />);
 
@@ -582,12 +469,6 @@ describe('Date Input Component', () => {
       expect(component.exists(MONTH_SELECTOR)).toBe(true);
       expect(component.exists(DAY_SELECTOR)).toBe(false);
     });
-
-    it('should produce MM-YYYY date string', () => {
-      // Selects March
-      simulateSelectChange(3);
-      expect(props.onChange).toHaveBeenCalledWith('2001-03');
-    });
   });
 
   describe('when selectProps is provided', () => {
@@ -605,16 +486,11 @@ describe('Date Input Component', () => {
     });
 
     it('renders Select component with expected props', () => {
-      const select = component.find('Select');
+      const select = component.find(MONTH_SELECTOR);
 
       expect(select.prop('buttonProps')).toStrictEqual({
         'aria-label': 'mock-button-label',
       });
     });
   });
-
-  const simulateSelectChange = (n) => {
-    component.find('button.np-dropdown-toggle').simulate('click', fakeEvent());
-    component.find('li').at(n).simulate('click', fakeEvent());
-  };
 });

package/src/dateInput/DateInput.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { DateInput, Info, InlineAlert, Title, Typography } from '..';
-import { lorem10, storyConfig } from '../test-utils';
+import { lorem10, storyConfig, userEvent, within } from '../test-utils';
 
 export default {
   component: DateInput,
@@ -25,6 +25,11 @@ type Story = StoryObj<typeof DateInput>;
 
 export const Basic: Story = {};
 
+Basic.play = ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  userEvent.click(canvas.getByRole('button'));
+};
+
 export const WithLabel: Story = {
   render: (args) => {
     const id1 = 'date-input-group-label-1';

package/src/inputs/SelectInput.spec.tsx

@@ -1,36 +1,12 @@
 import { act, screen, within } from '@testing-library/react';
 import userEvent, { specialChars } from '@testing-library/user-event';
 
-import { render } from '../test-utils';
+import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 import { SelectInput } from './SelectInput';
 
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn((query: string) => {
-    const matches = /^\(min-width: ([0-9]+)px\)$/.exec(query);
-    const minWidth = matches != null ? Number(matches[1]) : undefined;
-    return {
-      matches: minWidth != null ? window.innerWidth >= minWidth : false,
-      media: query,
-      onchange: null,
-      addListener: jest.fn(), // deprecated
-      removeListener: jest.fn(), // deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
-    };
-  }),
-});
-
-Object.defineProperty(window, 'ResizeObserver', {
-  writable: true,
-  value: jest.fn(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-  })),
-});
+mockMatchMedia();
+mockResizeObserver();
 
 describe('SelectInput', () => {
   it('renders placeholder', () => {

package/src/phoneNumberInput/PhoneNumberInput.spec.js

@@ -1,28 +1,14 @@
 import { shallow, mount } from 'enzyme';
 import { useIntl } from 'react-intl';
 
+import { mockMatchMedia, mockResizeObserver } from '../test-utils';
+
 import PhoneNumberInput from '.';
 
 jest.mock('react-intl');
 
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // Deprecated
-    removeListener: jest.fn(), // Deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
-
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-}
+mockMatchMedia();
+mockResizeObserver();
 
 const simulatePaste = (element, value) =>
   element.simulate('paste', { nativeEvent: { clipboardData: { getData: () => value } } });
@@ -112,8 +98,6 @@ describe('Given a telephone number component', () => {
   });
 
   describe('when pasting', () => {
-    window.ResizeObserver = ResizeObserver;
-
     beforeEach(() => {
       component = mount(<PhoneNumberInput {...props} initialValue="+39123456789" />);
       select = () => component.find(PREFIX_SELECT_SELECTOR);

package/src/select/Select.js

@@ -76,6 +76,9 @@ const getUniqueIdForOption = (parentId = '', option) => {
   return `option-${parentId}-${uniqueOptionId}`;
 };
 
+/**
+ * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
+ */
 export default function Select({
   placeholder,
   id,

package/src/test-utils/window-mock.ts

@@ -17,3 +17,14 @@ export function mockMatchMedia() {
     }),
   });
 }
+
+export function mockResizeObserver() {
+  // mock ResizeObserver because it's not implemented in jsdoc lib
+  // https://github.com/jsdom/jsdom/issues/3368
+  // eslint-disable-next-line compat/compat
+  window.ResizeObserver = class ResizeObserver {
+    observe = jest.fn();
+    unobserve = jest.fn();
+    disconnect = jest.fn();
+  };
+}