@transferwise/components 0.0.0-experimental-9a61b0a → 0.0.0-experimental-73858ea

package/build/types/common/focusBoundary/FocusBoundary.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 type FocusBoundaryProps = {
-    children: ReactNode;
+    children: React.ReactNode;
 };
 declare const FocusBoundary: ({ children }: FocusBoundaryProps) => import("react").JSX.Element;
 export default FocusBoundary;

package/build/types/common/focusBoundary/FocusBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FocusBoundary.d.ts","sourceRoot":"","sources":["../../../../src/common/focusBoundary/FocusBoundary.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAS/D,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,aAAa,iBAAkB,kBAAkB,gCA6BtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FocusBoundary.d.ts","sourceRoot":"","sources":["../../../../src/common/focusBoundary/FocusBoundary.tsx"],"names":[],"mappings":";AAGA,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,aAAa,iBAAkB,kBAAkB,gCAatD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-9a61b0a",
+  "version": "0.0.0-experimental-73858ea",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -103,6 +103,7 @@
     "@headlessui/react": "^1.7.17",
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-id": "^1.0.0",
+    "@react-aria/focus": "^3.14.2",
     "@react-aria/overlays": "^3.17.0",
     "@react-spring/web": "~9.6.1",
     "@transferwise/formatting": "^2.1.0",

package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap

@@ -7,9 +7,12 @@ exports[`BottomSheet renders content when open 1`] = `
     class="np-theme-light"
   >
     <div
-      class="np-focus-boundary outline-none"
       tabindex="-1"
     >
+      <span
+        data-focus-scope-start="true"
+        hidden=""
+      />
       <div
         class="dimmer"
         role="presentation"
@@ -63,6 +66,10 @@ exports[`BottomSheet renders content when open 1`] = `
           </div>
         </div>
       </div>
+      <span
+        data-focus-scope-end="true"
+        hidden=""
+      />
     </div>
   </div>
 </body>

package/src/common/focusBoundary/FocusBoundary.tsx

@@ -1,44 +1,21 @@
-import { isKey, isUndefined } from '@transferwise/neptune-validation';
-import { ReactNode, useEffect, useRef, useState } from 'react';
-
-import { useConditionalListener } from '../hooks';
-import { Key } from '../key';
-
-import { getFocusableElements, resetFocus } from './utils';
-
-const { TAB } = Key;
+import { FocusScope } from '@react-aria/focus';
+import { useEffect, useRef } from 'react';
 
 type FocusBoundaryProps = {
-  children: ReactNode;
+  children: React.ReactNode;
 };
 
 const FocusBoundary = ({ children }: FocusBoundaryProps) => {
-  const boundaryReference = useRef<HTMLDivElement | null>(null);
-  const parent = isUndefined(document) ? undefined : document;
-  const [focusableEls, setFocusableEls] = useState({});
-
+  const wrapperReference = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    if (boundaryReference?.current) {
-      boundaryReference.current.focus({ preventScroll: true });
-      setFocusableEls(getFocusableElements(boundaryReference.current));
-    }
+    wrapperReference.current?.focus({ preventScroll: true });
   }, []);
 
-  // If event type is Tab the resetFocus will force the focus to either the first focusable or last in boundaryRef .
-  useConditionalListener({
-    eventType: 'keydown',
-    callback: (event) => {
-      if (isKey({ keyType: TAB, event })) {
-        resetFocus({ event, focusableEls });
-      }
-    },
-    attachListener: true,
-    parent,
-  });
-
   return (
-    <div ref={boundaryReference} tabIndex={-1} className="np-focus-boundary outline-none">
-      {children}
+    <div ref={wrapperReference} tabIndex={-1}>
+      <FocusScope contain restoreFocus>
+        {children}
+      </FocusScope>
     </div>
   );
 };

package/build/types/common/focusBoundary/utils/getFocusableElements.d.ts

@@ -1,2 +0,0 @@
-export function getFocusableElements(focusBoundaryContainer: Node): object;
-//# sourceMappingURL=getFocusableElements.d.ts.map

package/build/types/common/focusBoundary/utils/getFocusableElements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getFocusableElements.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/getFocusableElements.js"],"names":[],"mappings":"AAOO,6DAJI,IAAI,GACF,MAAM,CAoBlB"}

package/build/types/common/focusBoundary/utils/index.d.ts

@@ -1,3 +0,0 @@
-export { getFocusableElements } from "./getFocusableElements";
-export { resetFocus } from "./resetFocus";
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/focusBoundary/utils/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/index.js"],"names":[],"mappings":""}

package/build/types/common/focusBoundary/utils/resetFocus.d.ts

@@ -1,2 +0,0 @@
-export function resetFocus({ focusableEls: { first, last }, event }: object): void;
-//# sourceMappingURL=resetFocus.d.ts.map

package/build/types/common/focusBoundary/utils/resetFocus.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"resetFocus.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/resetFocus.js"],"names":[],"mappings":"AAOO,qEAJI,MAAM,QAmBhB"}

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