@transferwise/components 0.0.0-experimental-7512130 → 0.0.0-experimental-73858ea

package/build/index.esm.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useLayoutEffect, createContext, useContext, useCallback, PureComponent, createRef, Component, Children, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, PureComponent, createRef, Component, Children, Fragment as Fragment$1 } from 'react';
 import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
@@ -10,8 +10,9 @@ import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwi
 import throttle from 'lodash.throttle';
 import { CSSTransition } from 'react-transition-group';
 import { createPortal } from 'react-dom';
-import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
+import { FocusScope } from '@react-aria/focus';
 import mergeRefs from 'react-merge-refs';
+import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
 import { usePopper } from 'react-popper';
 import { Transition, Listbox } from '@headlessui/react';
 import { useId } from '@radix-ui/react-id';
@@ -1457,268 +1458,23 @@ function getInitials(name) {
   return allInitials[0] + allInitials.slice(-1);
 }
 
-const THROTTLE_MS = 100;
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-const useClientWidth = ({
-  ref,
-  throttleMs = THROTTLE_MS
-}) => {
-  const [clientWidth, setClientWidth] = useState(null);
-  useIsomorphicLayoutEffect(() => {
-    // eslint-disable-next-line unicorn/consistent-function-scoping
-    const updateClientWidth = () => {
-      if (ref) {
-        // when `ref` is a window
-        if ('innerWidth' in ref) {
-          setClientWidth(ref.innerWidth);
-        }
-        // when `ref` is an element
-        else if (ref.current) {
-          setClientWidth(ref.current.clientWidth);
-        }
-      }
-    };
-    // This assignment saves a reference to the function so it will be the same passed to both addEventListener removeEventListener.
-    // If throttle gets passed directly to both add and removeEventListenet the results will be that the event
-    // won't get removed even if the component is unmounted.
-    const attachedFunction = throttle(updateClientWidth, throttleMs);
-    window.addEventListener('resize', attachedFunction, true);
-    // using requestAnimationFrame to perform the calculation before the next repaint
-    // getting width earlier causes issues in animations when used with react-transition-group
-    window.requestAnimationFrame(updateClientWidth);
-    return () => window.removeEventListener('resize', attachedFunction, true);
-  }, []);
-  return [clientWidth];
-};
-useClientWidth.THROTTLE_MS = THROTTLE_MS;
-
-const useConditionalListener = ({
-  attachListener,
-  callback,
-  eventType,
-  parent
-}) => {
-  useEffect(() => {
-    if (attachListener && !isUndefined(parent)) {
-      parent.addEventListener(eventType, callback, true);
-    }
-    return () => {
-      if (!isUndefined(parent)) {
-        parent.removeEventListener(eventType, callback, true);
-      }
-    };
-  }, [attachListener, callback, eventType, parent]);
-};
-
-const DirectionContext = /*#__PURE__*/createContext(Direction.LTR);
-const DirectionProvider = ({
-  direction,
-  children
-}) => {
-  return /*#__PURE__*/jsx(DirectionContext.Provider, {
-    value: direction,
-    children: children
-  });
-};
-
-const useDirection = () => {
-  const direction = useContext(DirectionContext);
-  return {
-    direction,
-    isRTL: direction === 'rtl'
-  };
-};
-
-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});`
- */
-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];
-};
-
-const useLayout = () => {
-  const windowReference = typeof window === 'undefined' ? undefined : window;
-  const [breakpoint, setBreakpoint] = useState();
-  const [clientWidth] = useClientWidth({
-    ref: windowReference
-  });
-  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
-  };
-};
-
-/**
- * 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.
- */
-
-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;
-};
-
-/**
- * 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
- */
-
-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();
-  }
-};
-
-const {
-  TAB
-} = Key;
 const FocusBoundary = ({
   children
 }) => {
-  const boundaryReference = useRef(null);
-  const parent = isUndefined(document) ? undefined : document;
-  const [focusableEls, setFocusableEls] = useState({});
+  const wrapperReference = useRef(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 /*#__PURE__*/jsx("div", {
-    ref: boundaryReference,
+    ref: wrapperReference,
     tabIndex: -1,
-    className: "np-focus-boundary outline-none",
-    children: children
+    children: /*#__PURE__*/jsx(FocusScope, {
+      contain: true,
+      restoreFocus: true,
+      children: children
+    })
   });
 };
 var FocusBoundary$1 = FocusBoundary;
@@ -1974,6 +1730,176 @@ SlidingPanel.defaultProps = {
 };
 var SlidingPanel$1 = SlidingPanel;
 
+const THROTTLE_MS = 100;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const useClientWidth = ({
+  ref,
+  throttleMs = THROTTLE_MS
+}) => {
+  const [clientWidth, setClientWidth] = useState(null);
+  useIsomorphicLayoutEffect(() => {
+    // eslint-disable-next-line unicorn/consistent-function-scoping
+    const updateClientWidth = () => {
+      if (ref) {
+        // when `ref` is a window
+        if ('innerWidth' in ref) {
+          setClientWidth(ref.innerWidth);
+        }
+        // when `ref` is an element
+        else if (ref.current) {
+          setClientWidth(ref.current.clientWidth);
+        }
+      }
+    };
+    // This assignment saves a reference to the function so it will be the same passed to both addEventListener removeEventListener.
+    // If throttle gets passed directly to both add and removeEventListenet the results will be that the event
+    // won't get removed even if the component is unmounted.
+    const attachedFunction = throttle(updateClientWidth, throttleMs);
+    window.addEventListener('resize', attachedFunction, true);
+    // using requestAnimationFrame to perform the calculation before the next repaint
+    // getting width earlier causes issues in animations when used with react-transition-group
+    window.requestAnimationFrame(updateClientWidth);
+    return () => window.removeEventListener('resize', attachedFunction, true);
+  }, []);
+  return [clientWidth];
+};
+useClientWidth.THROTTLE_MS = THROTTLE_MS;
+
+const useConditionalListener = ({
+  attachListener,
+  callback,
+  eventType,
+  parent
+}) => {
+  useEffect(() => {
+    if (attachListener && !isUndefined(parent)) {
+      parent.addEventListener(eventType, callback, true);
+    }
+    return () => {
+      if (!isUndefined(parent)) {
+        parent.removeEventListener(eventType, callback, true);
+      }
+    };
+  }, [attachListener, callback, eventType, parent]);
+};
+
+const DirectionContext = /*#__PURE__*/createContext(Direction.LTR);
+const DirectionProvider = ({
+  direction,
+  children
+}) => {
+  return /*#__PURE__*/jsx(DirectionContext.Provider, {
+    value: direction,
+    children: children
+  });
+};
+
+const useDirection = () => {
+  const direction = useContext(DirectionContext);
+  return {
+    direction,
+    isRTL: direction === 'rtl'
+  };
+};
+
+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});`
+ */
+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];
+};
+
+const useLayout = () => {
+  const windowReference = typeof window === 'undefined' ? undefined : window;
+  const [breakpoint, setBreakpoint] = useState();
+  const [clientWidth] = useClientWidth({
+    ref: windowReference
+  });
+  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
+  };
+};
+
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
 const MOVE_OFFSET_THRESHOLD = 50;
@@ -11101,7 +11027,6 @@ class Snackbar extends Component {
           ref: this.bodyRef,
           as: "span",
           className: `snackbar__text snackbar__text--${theme}`,
-          "aria-live": "polite",
           children: [text, action ? /*#__PURE__*/jsx(ActionButton, {
             className: "snackbar__text__action",
             onClick: action.onClick,
@@ -13148,6 +13073,7 @@ const ProcessingStep = props => {
           'm-b-2': isModern
         }),
         type: Typography.TITLE_BODY,
+        "aria-live": "polite",
         children: psProcessingText
       }), psButtonText && /*#__PURE__*/jsx(Button, {
         disabled: psButtonDisabled,
@@ -13191,6 +13117,7 @@ const CompleteStep = props => {
       className: "droppable-card-content",
       children: [/*#__PURE__*/jsx("div", {
         className: "droppable-card-content d-flex flex-column align-items-center",
+        "aria-live": "polite",
         children: isError ? /*#__PURE__*/jsxs(Fragment, {
           children: [isModern ? /*#__PURE__*/jsx(StatusIcon, {
             size: Size.LARGE,
@@ -13559,6 +13486,7 @@ class Upload extends Component {
         onClear: event => this.handleOnClear(event)
       }), !isProcessing && /*#__PURE__*/jsx("div", {
         className: "droppable-dropping-card droppable-card",
+        "aria-live": "polite",
         children: /*#__PURE__*/jsxs("div", {
           className: "droppable-card-content",
           children: [/*#__PURE__*/jsx("div", {
@@ -14033,6 +13961,7 @@ const UploadItem = ({
         onDownload: onDownloadFile,
         children: /*#__PURE__*/jsx("div", {
           className: "np-upload-button",
+          "aria-live": "polite",
           children: /*#__PURE__*/jsxs("div", {
             className: "media",
             children: [/*#__PURE__*/jsx("div", {