@transferwise/components 45.12.0 → 45.14.0

package/src/common/hooks/useConditionalListener/useConditionalListener.ts

@@ -0,0 +1,25 @@
+import { isUndefined } from '@transferwise/neptune-validation';
+import { useEffect } from 'react';
+
+import { ParentElement } from '../..';
+
+type Data = {
+  attachListener: boolean;
+  callback: EventListenerOrEventListenerObject;
+  eventType: string;
+  parent: ParentElement | undefined;
+};
+
+export const useConditionalListener = ({ attachListener, callback, eventType, parent }: Data) => {
+  useEffect(() => {
+    if (attachListener && !isUndefined(parent)) {
+      parent.addEventListener(eventType, callback, true);
+    }
+
+    return () => {
+      if (!isUndefined(parent)) {
+        parent.removeEventListener(eventType, callback, true);
+      }
+    };
+  }, [attachListener, callback, eventType, parent]);
+};

package/src/common/hooks/useDirection/index.js

@@ -0,0 +1 @@
+export { useDirection as default } from './useDirection';

package/src/common/hooks/useDirection/useDirection.spec.js

@@ -0,0 +1,21 @@
+import { renderHook } from '../../../test-utils';
+
+import { useDirection } from './useDirection';
+
+describe('useDirection', () => {
+  it('returns ltr as default', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useDirection());
+
+    expect(current).toStrictEqual({ direction: 'ltr', isRTL: false });
+  });
+
+  it('returns rtl for ar locale', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useDirection(), { locale: 'ar' });
+
+    expect(current).toStrictEqual({ direction: 'rtl', isRTL: true });
+  });
+});

package/src/common/hooks/useDirection/useDirection.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+
+import { DirectionContext } from '../../../provider/direction/DirectionProvider';
+import { LayoutDirection } from '../../direction';
+
+export const useDirection = (): { direction: LayoutDirection; isRTL: boolean } => {
+  const direction = useContext(DirectionContext);
+  return {
+    direction,
+    isRTL: direction === 'rtl',
+  };
+};

package/src/common/hooks/useEffectEvent.ts

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+/*
+ * Inspired by:
+ *
+ * - https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+ * - https://legacy.reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+ */
+
+export function useEffectEvent<A extends unknown[], R>(
+  callback: (...args: A) => R,
+): typeof callback {
+  const ref = useRef<typeof callback>(() => {
+    throw new Error('Cannot call an event handler while rendering.');
+  });
+
+  useEffect(() => {
+    ref.current = callback;
+  });
+
+  return useCallback((...args) => ref.current(...args), []);
+}

package/src/common/hooks/useHasIntersected/index.js

@@ -0,0 +1 @@
+export { useHasIntersected as default } from './useHasIntersected';

package/src/common/hooks/useHasIntersected/useHasIntersected.js

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+
+const ObserverParams = {
+  threshold: 0.1,
+};
+
+/**
+ * useHasIntersected.
+ * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.
+ * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.
+ *
+ * @param elRef.elRef
+ * @param {object} [elRef] - node object that contains a react reference to the element that needs to be observed.
+ * @param {strimng} [loading = 'eager'] - string that contains the type of loading.
+ * @param elRef.loading
+ * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
+ */
+export const useHasIntersected = ({ elRef, loading }) => {
+  const [hasIntersected, setHasIntersected] = useState(false);
+
+  const { current } = elRef || {};
+
+  const isValidReference = () => {
+    return elRef && current;
+  };
+
+  const handleOnIntersect = (entries, observer) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        setHasIntersected(true);
+        observer.unobserve(current);
+      }
+    });
+  };
+
+  useEffect(() => {
+    let observer;
+    let didCancel = false;
+
+    // Check if window is define for SSR and Old browsers fallback
+    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
+      setHasIntersected(true);
+    } else if (!didCancel) {
+      observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
+      observer.observe(current);
+    }
+    return () => {
+      didCancel = true;
+      if (observer) {
+        observer.unobserve(current);
+      }
+    };
+  }, [elRef]);
+
+  if (loading === 'eager') {
+    return [false];
+  }
+
+  return [hasIntersected];
+};

package/src/common/hooks/useHasIntersected/useHasIntersected.spec.js

@@ -0,0 +1,119 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import useHasIntersected from '.';
+
+describe('useHasIntersected', () => {
+  const originalIntersectionObserver = window.IntersectionObserver;
+  let observe;
+  let unobserve;
+  let loading;
+  let elementReference;
+
+  beforeEach(() => {
+    observe = jest.fn();
+    unobserve = jest.fn();
+    loading = 'lazy';
+  });
+  afterEach(() => {
+    window.IntersectionObserver = originalIntersectionObserver;
+  });
+  describe('when loading is set to eager', () => {
+    it('returns false', () => {
+      const { result } = renderHook(() =>
+        useHasIntersected({ elRef: elementReference, loading: 'eager' }),
+      );
+      expect(result.current).toStrictEqual([false]);
+    });
+  });
+
+  describe('when loading is set to lazy', () => {
+    beforeEach(() => {
+      elementReference = { current: 'a valid ref' };
+    });
+    describe('when element is not visible', () => {
+      it('returns true if ref is an invalid ref', () => {
+        const { result } = renderHook(() => useHasIntersected({ elRef: null, loading }));
+        expect(result.current).toStrictEqual([true]);
+      });
+      it('returns true if ref is valid and IntersectionObserver is not supported', () => {
+        window.IntersectionObserver = null;
+
+        const { result } = renderHook(() =>
+          useHasIntersected({ elRef: elementReference, loading }),
+        );
+        expect(result.current).toStrictEqual([true]);
+      });
+      it('returns false if ref is valid', () => {
+        setupIntersectionObserver(false);
+
+        const { result } = renderHook(() =>
+          useHasIntersected({ elRef: elementReference, loading }),
+        );
+        expect(result.current).toStrictEqual([false]);
+      });
+    });
+
+    describe('when element is visible', () => {
+      it('returns true if ref is valid and IntersectionObserver is supported', () => {
+        setupIntersectionObserver(true);
+
+        const { result } = renderHook(() =>
+          useHasIntersected({ elRef: elementReference, loading }),
+        );
+        expect(observe).toHaveBeenCalledTimes(1);
+        expect(result.current).toStrictEqual([true]);
+      });
+
+      it('calls observer', () => {
+        // eslint-disable-next-line jest/prefer-spy-on
+        window.IntersectionObserver = jest.fn(() => ({
+          observe,
+          unobserve,
+        }));
+
+        renderHook(() => useHasIntersected({ elRef: elementReference, loading }));
+        expect(observe).toHaveBeenCalledTimes(1);
+        expect(observe).toHaveBeenCalledWith(elementReference.current);
+        expect(unobserve).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('calls unobserve', () => {
+      it('when element is intersecting', () => {
+        setupIntersectionObserver(true);
+
+        renderHook(() => useHasIntersected({ elRef: elementReference, loading }));
+        expect(unobserve).toHaveBeenCalledTimes(1);
+        expect(unobserve).toHaveBeenCalledWith(elementReference.current);
+      });
+    });
+
+    describe('calls unobserve with correct ref', () => {
+      it('when component unmounts before unobserve is called', () => {
+        let current = 'a valid ref';
+        let reference = { current };
+
+        setupIntersectionObserver(true);
+        observe = jest.fn(() => {
+          reference.current = undefined;
+        });
+
+        const { unmount } = renderHook(() => useHasIntersected({ elRef: reference, loading }));
+        unmount();
+
+        expect(unobserve).toHaveBeenLastCalledWith(current);
+      });
+    });
+  });
+
+  const setupIntersectionObserver = (isIntersecting) => {
+    // eslint-disable-next-line jest/prefer-spy-on
+    window.IntersectionObserver = jest.fn((callback) => {
+      callback([{ isIntersecting }], { unobserve });
+      return {
+        observe,
+        unobserve,
+      };
+    });
+  };
+});

package/src/common/hooks/useLayout/index.ts

@@ -0,0 +1 @@
+export { useLayout as default } from './useLayout';

package/src/common/hooks/useLayout/useLayout.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+
+import { Breakpoint } from '../../propsValues/breakpoint';
+import { useClientWidth } from '../useClientWidth/useClientWidth';
+
+export const useLayout = (): {
+  isMobile: boolean;
+  isExtraSmall: boolean;
+  isSmall: boolean;
+  isMedium: boolean;
+  isLarge: boolean;
+  isExtraLarge: boolean;
+} => {
+  const windowReference = typeof window === 'undefined' ? undefined : window;
+
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>();
+  const [clientWidth] = useClientWidth({ ref: windowReference }) as [number | null];
+
+  useEffect(() => {
+    if (!clientWidth) {
+      return;
+    }
+
+    if (clientWidth <= Breakpoint.EXTRA_SMALL) {
+      setBreakpoint(Breakpoint.EXTRA_SMALL);
+      return;
+    }
+
+    if (Breakpoint.EXTRA_SMALL < clientWidth && clientWidth <= Breakpoint.SMALL) {
+      setBreakpoint(Breakpoint.SMALL);
+      return;
+    }
+
+    if (Breakpoint.SMALL < clientWidth && clientWidth <= Breakpoint.MEDIUM) {
+      setBreakpoint(Breakpoint.MEDIUM);
+      return;
+    }
+
+    if (Breakpoint.MEDIUM < clientWidth && clientWidth <= Breakpoint.LARGE) {
+      setBreakpoint(Breakpoint.LARGE);
+      return;
+    }
+
+    if (Breakpoint.LARGE < clientWidth) {
+      setBreakpoint(Breakpoint.EXTRA_LARGE);
+    }
+  }, [clientWidth]);
+
+  return {
+    isMobile: !!breakpoint && [Breakpoint.EXTRA_SMALL, Breakpoint.SMALL].includes(breakpoint),
+    isExtraSmall: breakpoint === Breakpoint.EXTRA_SMALL,
+    isSmall: breakpoint === Breakpoint.SMALL,
+    isMedium: breakpoint === Breakpoint.MEDIUM,
+    isLarge: breakpoint === Breakpoint.LARGE,
+    isExtraLarge: breakpoint === Breakpoint.EXTRA_LARGE,
+  };
+};

package/src/common/hooks/useResizeObserver.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { useEffectEvent } from './useEffectEvent';
+
+export function useResizeObserver(
+  ref: React.RefObject<Element>,
+  callback: (entry: ResizeObserverEntry) => void,
+) {
+  const handleCallback = useEffectEvent(callback);
+  useEffect(() => {
+    if (ref.current != null) {
+      const resizeObserver = new ResizeObserver(([entry]) => {
+        handleCallback(entry);
+      });
+      resizeObserver.observe(ref.current, { box: 'border-box' });
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return () => {};
+  }, [handleCallback, ref]);
+}

package/src/common/index.js

@@ -0,0 +1,26 @@
+export { default as HistoryNavigator } from './historyNavigator';
+export * from './domHelpers';
+export { addNoScrollClass, removeNoScrollClass } from './DOMOperations';
+export * from './theme';
+export * from './direction';
+// Props
+export * from './propsValues/control';
+export { Breakpoint } from './propsValues/breakpoint';
+export * from './propsValues/size';
+export * from './propsValues/typography';
+export * from './propsValues/width';
+export { Type } from './propsValues/type';
+export { DateMode } from './propsValues/dateMode';
+export { MonthFormat } from './propsValues/monthFormat';
+export * from './propsValues/position';
+export { Layout } from './propsValues/layouts';
+export * from './propsValues/status';
+export { Sentiment } from './propsValues/sentiment';
+export * from './propsValues/profileType';
+export { Variant } from './propsValues/variant';
+export * from './propsValues/scroll';
+export { MarkdownNodeType } from './propsValues/markdownNodeType';
+export { FileType } from './fileType';
+export { Key } from './key';
+export * from './locale';
+export * from './commonProps';

package/src/common/key.js

@@ -0,0 +1,8 @@
+export const Key = {
+  ENTER: 'Enter',
+  ESCAPE: 'Escape',
+  SPACE: [' ', 'Spacebar'],
+  TAB: 'Tab',
+  PERIOD: '.',
+  COMMA: ',',
+};

package/src/common/keyCodes.js

@@ -0,0 +1,19 @@
+/**
+ * TODO: mention what to use instead or consider to delete this object
+ *
+ * @deprecated
+ */
+export default {
+  DOWN: 40,
+  UP: 38,
+  LEFT: 37,
+  RIGHT: 39,
+  ENTER: 13,
+  ESCAPE: 27,
+  TAB: 9,
+  SPACE: 32,
+  BACKSPACE: 8,
+  DELETE: 46,
+  COMMA: 188,
+  PERIOD: 190,
+};

package/src/common/locale/index.js

@@ -0,0 +1,130 @@
+import { Direction } from '..';
+
+/**
+ * Default language
+ *
+ * @type {string}
+ */
+export const DEFAULT_LANG = 'en';
+
+/**
+ * Default locale
+ *
+ * @type {string}
+ */
+export const DEFAULT_LOCALE = 'en-GB';
+
+/**
+ * Array of languages that are written from the right to the left
+ *
+ * @type {string[]}
+ */
+export const RTL_LANGUAGES = ['ar', 'he'];
+
+export const SUPPORTED_LANGUAGES = [
+  DEFAULT_LANG,
+  'de',
+  'es',
+  'fr',
+  'hu',
+  'id',
+  'it',
+  'ja',
+  'pl',
+  'pt',
+  'ro',
+  'ru',
+  'th',
+  'tr',
+  'uk',
+  'zh',
+];
+
+/**
+ * Verifies and adjusts locale (replace `_` with `-`)
+ * Returns null if locale is unrecognized by {Intl.Locale}
+ *
+ * @param {string} locale (`es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
+ * @returns {string|null}
+ */
+export function adjustLocale(locale) {
+  if (!locale || locale.trim().length === 0) {
+    return null;
+  }
+  try {
+    const { baseName } = new Intl.Locale(locale.trim().replace('_', '-'));
+    return baseName;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
+  }
+}
+
+/**
+ * Provides corresponding lang (iso2) for provided locale
+ * if locale is invalid or language is unsupported returns null
+ *
+ * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
+ * @returns {string|null}
+ */
+export function getLangFromLocale(locale) {
+  const adjustedLocale = adjustLocale(locale);
+  if (adjustedLocale === null) {
+    return null;
+  }
+  try {
+    const { language } = new Intl.Locale(adjustedLocale);
+
+    if (SUPPORTED_LANGUAGES.includes(language)) {
+      return language;
+    }
+    return null;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
+  }
+}
+
+/**
+ * Provides corresponding country code (iso2) for locales code with explicit region value (`es-ES`, `en-GB`, `ja-JP` etc.)
+ * if the value is invalid or missing region it returns null
+ *
+ * @param {string} locale
+ * @returns {string|null}
+ */
+export function getCountryFromLocale(locale) {
+  const adjustedLocale = adjustLocale(locale);
+  if (adjustedLocale === null) {
+    return null;
+  }
+  try {
+    const { region } = new Intl.Locale(adjustedLocale);
+    return region ?? null;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
+  }
+}
+
+/**
+ * Provides the layout direction for a given locale.
+ * If locale is invalid or language is unsupported returns Direction.LTR
+ *
+ * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
+ * @returns {Direction} The layout direction based on the locale
+ */
+export function getDirectionFromLocale(locale) {
+  try {
+    const adjustedLocale = adjustLocale(locale);
+    const { language } = new Intl.Locale(adjustedLocale);
+
+    return RTL_LANGUAGES.includes(language) ? Direction.RTL : Direction.LTR;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return Direction.LTR;
+  }
+}

package/src/common/locale/index.spec.js

@@ -0,0 +1,127 @@
+import translationFiles from '../../i18n';
+
+import {
+  getLangFromLocale,
+  adjustLocale,
+  getCountryFromLocale,
+  SUPPORTED_LANGUAGES,
+  getDirectionFromLocale,
+} from '.';
+
+describe('locale utils', () => {
+  beforeAll(() => {
+    jest.spyOn(console, 'error').mockImplementation();
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('getLangFromLocale', () => {
+    it.each([
+      ['en-GB', 'en'],
+      ['en_GB', 'en'],
+      ['EN-GB', 'en'],
+      ['en-gb', 'en'],
+      ['en_US', 'en'],
+      ['en-US', 'en'],
+      ['ES', 'es'],
+      ['ZH-HK', 'zh'],
+      ['ZH_HK', 'zh'],
+      ['zh_HK', 'zh'],
+      ['ja-JP', 'ja'],
+      ['zhHK', null],
+      [null, null],
+      [undefined, null],
+      ['', null],
+      ['  ', null],
+      ['ar-dz', null],
+      ['ar-iq', null],
+      ['zh-tw', 'zh'],
+      ['nl-nl', null],
+    ])('locale "%s" -> language "%s"', (locale, expectedValue) => {
+      expect(getLangFromLocale(locale)).toBe(expectedValue);
+    });
+  });
+
+  describe('adjustLocale', () => {
+    it.each([
+      ['en-GB', 'en-GB'],
+      ['en_GB', 'en-GB'],
+      ['EN-GB', 'en-GB'],
+      ['en-gb', 'en-GB'],
+      ['en_US', 'en-US'],
+      ['en-US', 'en-US'],
+      ['ES', 'es'],
+      ['ZH-HK', 'zh-HK'],
+      ['ZH_HK', 'zh-HK'],
+      ['zh_HK', 'zh-HK'],
+      ['ja-JP', 'ja-JP'],
+      ['zhHK', null],
+      [null, null],
+      [undefined, null],
+      ['', null],
+      ['  ', null],
+      ['ar-dz', 'ar-DZ'],
+      ['ar-iq', 'ar-IQ'],
+      ['zh-tw', 'zh-TW'],
+      ['nl-nl', 'nl-NL'],
+    ])('locale "%s" -> language "%s"', (locale, expectedValue) => {
+      expect(adjustLocale(locale)).toBe(expectedValue);
+    });
+  });
+
+  describe('contract between SUPPORTED_LANGUAGES and names of translations files', () => {
+    it('number of lang codes should be equal to number of translations files', () => {
+      expect(SUPPORTED_LANGUAGES).toHaveLength(Object.keys(translationFiles).length);
+    });
+
+    it('lang codes should match to names of translations object', () => {
+      Object.keys(translationFiles).forEach((property) => {
+        const result = SUPPORTED_LANGUAGES.includes(property);
+        if (!result) {
+          // eslint-disable-next-line no-console
+          console.log(`'${property}' doesn't exist in ${[SUPPORTED_LANGUAGES]}`);
+        }
+        expect(result).toBe(true);
+      });
+    });
+
+    it('lang codes should match with names of translations files', async () => {
+      for (const locale of SUPPORTED_LANGUAGES) {
+        const file = await import(`../../i18n/${locale}.json`);
+        expect(file).not.toBeNull();
+        expect(file.default).toBe(translationFiles[locale]);
+      }
+    });
+  });
+
+  describe('getCountryFromLocale', () => {
+    it.each([
+      ['en', null],
+      ['fr', null],
+      ['it', null],
+      ['en-US', 'US'],
+      ['en-GB', 'GB'],
+      ['es-ES', 'ES'],
+      ['es_ES', 'ES'],
+      ['es_E', null],
+      ['es-E', null],
+    ])('given an "%s" as a locale value it should return "%s"', (locale, expectedValue) => {
+      expect(getCountryFromLocale(locale)).toBe(expectedValue);
+    });
+  });
+
+  describe('getDirectionFromLocale', () => {
+    it.each([
+      ['en', 'ltr'],
+      ['ar', 'rtl'],
+      ['ar-AE', 'rtl'],
+      ['ar_AE', 'rtl'],
+      ['he', 'rtl'],
+    ])('given an "%s" as a locale value it should return "%s"', (locale, expectedValue) => {
+      expect(getDirectionFromLocale(locale)).toBe(expectedValue);
+    });
+  });
+});

package/src/common/panel/Panel.css

@@ -0,0 +1 @@
+.np-panel__content{background-color:#fff;background-color:var(--color-background-elevated);box-shadow:0 0 40px rgba(69,71,69,.2);opacity:0;transition:opacity .2s cubic-bezier(.6,.2,.1,1),transform .2s cubic-bezier(.6,.2,.1,1),visibility 0s linear .2s;visibility:hidden}.np-panel__content,.np-theme-personal .np-panel__content{border-radius:10px;border-radius:var(--radius-small)}.np-theme-personal--bright-green .np-panel__content,.np-theme-personal--dark .np-panel__content,.np-theme-personal--forest-green .np-panel__content{box-shadow:none}.np-panel--open .np-panel__content{opacity:1;transform:none!important;transition:opacity .2s cubic-bezier(.6,.2,.1,1),transform .2s cubic-bezier(.6,.2,.1,1),visibility 0s linear 0s;visibility:visible}.np-panel__arrow,.np-panel__arrow:before{height:14px;position:absolute;width:14px}.np-panel__arrow:before{background:#fff;background:var(--color-background-elevated);content:"";left:0;transform:rotate(45deg)}.np-panel[data-popper-placement^=top]>.np-panel__content{transform:translateY(10px) scale(.95)}.np-panel[data-popper-placement^=top]>.np-panel__content .np-panel__arrow{bottom:-6px}.np-panel[data-popper-placement^=right]>.np-panel__content{transform:translateX(-10px) scale(.95)}.np-panel[data-popper-placement^=right]>.np-panel__content .np-panel__arrow{left:-6px}.np-panel[data-popper-placement^=bottom]>.np-panel__content{transform:translateY(-10px) scale(.95)}.np-panel[data-popper-placement^=bottom]>.np-panel__content .np-panel__arrow{top:-6px}.np-panel[data-popper-placement^=left]>.np-panel__content{transform:translateX(10px) scale(.95)}.np-panel[data-popper-placement^=left]>.np-panel__content .np-panel__arrow{right:-6px}.np-theme-personal .np-panel__content{border-radius:16px;border-radius:var(--radius-medium);box-shadow:0 0 40px rgba(69,71,69,.2)}.np-theme-personal--bright-green .np-dropdown-menu,.np-theme-personal--dark .np-dropdown-menu,.np-theme-personal--forest-green .np-dropdown-menu{background-color:#fff;background-color:var(--color-background-elevated)}