@transferwise/components 0.0.0-experimental-e05dfa3 → 0.0.0-experimental-7905c27

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();
+  };
+}

package/build/types/dateLookup/getFocusableTime/getFocusableTime.d.ts

@@ -1,2 +0,0 @@
-export declare function getFocusableTime(isSelected: (time: number) => boolean, isNow: (time: number) => boolean, isDisabled: (time: number) => boolean, timeSpan: number[]): number | null;
-//# sourceMappingURL=getFocusableTime.d.ts.map

package/build/types/dateLookup/getFocusableTime/getFocusableTime.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getFocusableTime.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/getFocusableTime/getFocusableTime.tsx"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,EACrC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,EAChC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,EACrC,QAAQ,EAAE,MAAM,EAAE,GACjB,MAAM,GAAG,IAAI,CAsBf"}

package/src/dateLookup/getFocusableTime/getFocusable.spec.js

@@ -1,38 +0,0 @@
-import { getFocusableTime } from './getFocusableTime';
-
-describe('getFocusableTime', () => {
-  const isSelected = (value) => value === 2;
-  const isNow = (value) => value === 3;
-  const isDisabled = (value) => value === 4;
-  const values = [1, 2, 3, 4, 5];
-
-  it('returns first selected value', () => {
-    expect(getFocusableTime(isSelected, isNow, isDisabled, values)).toBe(2);
-  });
-
-  it('returns first now value if nothing is selected', () => {
-    expect(getFocusableTime(() => false, isNow, isDisabled, values)).toBe(3);
-  });
-
-  it('returns first non disabled value when nothing is selected or now', () => {
-    expect(
-      getFocusableTime(
-        () => false,
-        () => false,
-        isDisabled,
-        values,
-      ),
-    ).toBe(1);
-  });
-
-  it('returns null if no selected, now, or non-disabled', () => {
-    expect(
-      getFocusableTime(
-        () => false,
-        () => false,
-        () => true,
-        values,
-      ),
-    ).toBeNull();
-  });
-});

package/src/dateLookup/getFocusableTime/getFocusableTime.tsx

@@ -1,28 +0,0 @@
-export function getFocusableTime(
-  isSelected: (time: number) => boolean,
-  isNow: (time: number) => boolean,
-  isDisabled: (time: number) => boolean,
-  timeSpan: number[],
-): number | null {
-  let selected: number | null = null;
-  let now: number | null = null;
-  let disabled: number | null = null;
-
-  for (const time of timeSpan) {
-    if (isSelected(time)) {
-      selected = time;
-      break;
-    }
-    if (isNow(time)) {
-      now = time;
-    }
-    if (!isDisabled(time) && disabled === null) {
-      disabled = time;
-    }
-
-    if (selected) {
-      break;
-    }
-  }
-  return selected || now || disabled;
-}

package/src/dateLookup/tableLink/TableLink.tsx

@@ -1,80 +0,0 @@
-import classNames from 'classnames';
-import { useEffect, useRef } from 'react';
-import { injectIntl, IntlShape } from 'react-intl';
-
-import messages from '../DateLookup.messages';
-
-interface TableLinkProps {
-  item: number;
-  type: 'day' | 'month' | 'year';
-  title?: string;
-  longTitle?: string;
-  active: boolean;
-  disabled: boolean;
-  today: boolean;
-  autofocus?: boolean;
-  onClick: (item: number) => void;
-  intl: IntlShape;
-}
-
-const TableLink = ({
-  item,
-  type,
-  title,
-  longTitle,
-  active,
-  disabled,
-  today,
-  autofocus,
-  onClick,
-  intl: { formatMessage },
-}: TableLinkProps) => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    if (autofocus) {
-      setTimeout(() => {
-        buttonRef.current?.focus();
-      }, 0);
-    }
-  }, [autofocus]);
-
-  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    if (!disabled) {
-      onClick(item);
-    }
-  };
-
-  const calculateAriaLabel = () => {
-    if (active) {
-      return `${longTitle || title || ''}, ${formatMessage(messages.selected)} ${formatMessage(
-        messages[type],
-      )}`;
-    }
-    return longTitle || title;
-  };
-
-  return (
-    <>
-      <button
-        ref={buttonRef}
-        type="button"
-        className={classNames(
-          `tw-date-lookup-${type}-option np-text-body-default-bold`,
-          { active: !!active },
-          { today: !!today },
-        )}
-        disabled={disabled}
-        tabIndex={autofocus ? 0 : -1}
-        aria-label={calculateAriaLabel()}
-        aria-pressed={active}
-        onClick={onCalendarClick}
-      >
-        {title || item}
-      </button>
-    </>
-  );
-};
-
-export default injectIntl(TableLink);