@transferwise/components 45.15.0 → 45.16.0

package/src/common/focusBoundary/FocusBoundary.spec.tsx

@@ -1,66 +0,0 @@
-import { render, screen, userEvent } from '../../test-utils';
-
-import FocusBoundary from './FocusBoundary';
-
-const props = {
-  onClose: jest.fn(),
-};
-
-describe('FocusBoundary', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('renders component', () => {
-    const { container } = render(
-      <FocusBoundary {...props}>
-        <a href="test">Test</a>
-      </FocusBoundary>,
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('focus on container by default', () => {
-    render(
-      <>
-        <a href="test">not focusable</a>
-        <FocusBoundary {...props}>
-          <a href="test">Test</a>
-        </FocusBoundary>
-      </>,
-    );
-
-    expect(focusBoundary()).toHaveFocus();
-  });
-
-  it('traps the focus when user presses tab', () => {
-    render(
-      <>
-        <a href="test">not focusable</a>
-        <FocusBoundary {...props}>
-          <a href="test">firstFocusable</a>
-          <a href="test">lastFocusable</a>
-        </FocusBoundary>
-      </>,
-    );
-
-    userEvent.tab();
-    expect(firstFocusableElement()).toHaveFocus();
-
-    userEvent.tab();
-    expect(lastFocusableElement()).toHaveFocus();
-
-    userEvent.tab();
-    expect(firstFocusableElement()).toHaveFocus();
-
-    userEvent.tab({ shift: true });
-    expect(lastFocusableElement()).toHaveFocus();
-
-    userEvent.tab({ shift: true });
-    expect(firstFocusableElement()).toHaveFocus();
-  });
-
-  const firstFocusableElement = () => screen.getByText('firstFocusable');
-  const lastFocusableElement = () => screen.getByText('lastFocusable');
-  const focusBoundary = () => document.querySelector('.np-focus-boundary');
-});

package/src/common/focusBoundary/__snapshots__/FocusBoundary.spec.tsx.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FocusBoundary renders component 1`] = `
-<div>
-  <div
-    class="np-focus-boundary outline-none"
-    tabindex="-1"
-  >
-    <a
-      href="test"
-    >
-      Test
-    </a>
-  </div>
-</div>
-`;

package/src/common/focusBoundary/utils/getFocusableElements.js

@@ -1,25 +0,0 @@
-/**
- * This function returns the first and the last focusable elements within a node.
- *
- * @param {Node} focusBoundaryContainer - the area that contains focused elements.
- * @returns {object} focusableEls - which contains the first focusable element and the last focusable element. First and last can be the same element if area contains one or none focusable element.
- */
-
-export const getFocusableElements = (focusBoundaryContainer) => {
-  const focusableEls = { first: focusBoundaryContainer, last: focusBoundaryContainer };
-
-  if (focusBoundaryContainer?.querySelectorAll) {
-    const allEls = [
-      ...focusBoundaryContainer.querySelectorAll(
-        'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
-      ),
-    ].filter((element) => !element.hasAttribute('disabled'));
-
-    if (allEls.length > 0) {
-      [focusableEls.first] = allEls;
-      focusableEls.last = allEls[allEls.length - 1];
-    }
-  }
-
-  return focusableEls;
-};

package/src/common/focusBoundary/utils/getFocusableElements.spec.js

@@ -1,51 +0,0 @@
-import { cleanup, render, screen } from '../../../test-utils';
-
-import { getFocusableElements } from './getFocusableElements';
-
-describe('getFocusableElements', () => {
-  afterEach(() => {
-    cleanup();
-  });
-  it('returns first and last focusable element', () => {
-    const { container } = render(
-      <>
-        <div>another element</div>
-        <a href="test">first</a>
-        <div>another element</div>
-        <a href="test">middle</a>
-        <div>another element</div>
-        <a href="test">last</a>
-        <div>another element</div>
-      </>,
-    );
-    getFocusableElements(container);
-    expect(getFocusableElements(container)).toStrictEqual({
-      first: first(),
-      last: last(),
-    });
-  });
-
-  it('returns container if there are no focusable elements', () => {
-    const { container } = render(
-      <>
-        <div>another element</div>
-      </>,
-    );
-    getFocusableElements(container);
-    expect(getFocusableElements(container)).toStrictEqual({
-      first: container,
-      last: container,
-    });
-  });
-
-  it('returns undefined if container is not provided', () => {
-    getFocusableElements();
-    expect(getFocusableElements()).toStrictEqual({
-      first: undefined,
-      last: undefined,
-    });
-  });
-
-  const first = () => screen.getByText('first');
-  const last = () => screen.getByText('last');
-});

package/src/common/focusBoundary/utils/index.js

@@ -1,2 +0,0 @@
-export { getFocusableElements } from './getFocusableElements';
-export { resetFocus } from './resetFocus';

package/src/common/focusBoundary/utils/resetFocus.js

@@ -1,23 +0,0 @@
-/**
- * This function resets the focus to either last of first focusable elements within a node.
- *
- * @param {object} focusableEls - contains the first last of first focusable elements within a node.
- * @param {object} event - the triggered event
- */
-
-export const resetFocus = ({ focusableEls: { first, last }, event }) => {
-  const { activeElement } = document;
-  if (event.shiftKey && activeElement === first) {
-    if (last) {
-      last.focus();
-    }
-    event.preventDefault();
-  }
-
-  if (!event.shiftKey && activeElement === last) {
-    if (first) {
-      first.focus();
-    }
-    event.preventDefault();
-  }
-};

package/src/common/focusBoundary/utils/resetFocus.spec.js

@@ -1,103 +0,0 @@
-import { cleanup, render, screen, userEvent } from '../../../test-utils';
-import { fakeKeyDownEvent } from '../../fakeEvents';
-
-import { resetFocus } from './resetFocus';
-
-describe('resetFocus', () => {
-  beforeEach(() => {
-    render(
-      <>
-        <a href="test">first</a>
-        <a href="test">middle</a>
-        <a href="test">last</a>
-      </>,
-    );
-  });
-  afterEach(() => {
-    cleanup();
-  });
-  it('set focus to first element when last element is focused and event is tab', () => {
-    focusOnLast();
-
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent({ shiftKey: false }),
-    });
-    expect(first()).toHaveFocus();
-  });
-
-  it('set focus to last element when first element is focused and event is shift + tab', () => {
-    focusOnFirst();
-
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent({ shiftKey: true }),
-    });
-    expect(last()).toHaveFocus();
-  });
-
-  it(`doesn't change focus when first element is focused and event is tab`, () => {
-    focusOnFirst();
-
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent(),
-    });
-    expect(first()).toHaveFocus();
-  });
-
-  it(`doesn't change focus when last element is focused and event is shift+tab`, () => {
-    focusOnLast();
-
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent({ shiftKey: true }),
-    });
-    expect(last()).toHaveFocus();
-  });
-
-  it(`doesn't change focus when middle element is focused and event is shift+tab or tab`, () => {
-    focusOnMiddle();
-
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent({ shiftKey: true }),
-    });
-    expect(middle()).toHaveFocus();
-
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent(),
-    });
-    expect(middle()).toHaveFocus();
-  });
-
-  it(`doesn't change focus when first is the only element provided`, () => {
-    focusOnFirst();
-    resetFocus({
-      focusableEls: { first: first(), last: undefined },
-      event: fakeKeyDownEvent({ shiftKey: true }),
-    });
-    expect(first()).toHaveFocus();
-  });
-
-  it(`doesn't change focus when last is the only element provided`, () => {
-    focusOnLast();
-    resetFocus({
-      focusableEls: { first: undefined, last: last() },
-      event: fakeKeyDownEvent(),
-    });
-    expect(last()).toHaveFocus();
-  });
-
-  const first = () => screen.getByText('first');
-  const last = () => screen.getByText('last');
-  const middle = () => screen.getByText('middle');
-
-  const focusOnFirst = () => userEvent.tab();
-  const focusOnLast = () => userEvent.tab({ shift: true });
-  const focusOnMiddle = () => {
-    userEvent.tab();
-    userEvent.tab();
-  };
-});

package/src/snackbar/__snapshots__/Snackbar.spec.js.snap

@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Snackbar accepts element as text 1`] = `"<div class=\\"snackbar\\"><span class=\\"np-text-body-default snackbar__text snackbar__text--light snackbar__text-container-enter snackbar__text-container-enter-active\\"><span>test</span></span></div>"`;
-
-exports[`Snackbar adjusts the theme if passed 1`] = `"<div class=\\"snackbar\\"><span class=\\"np-text-body-default snackbar__text snackbar__text--dark snackbar__text-container-enter snackbar__text-container-enter-active\\"><span>test</span></span></div>"`;