@transferwise/components 0.0.0-experimental-e9526a8 → 0.0.0-experimental-9a61b0a

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, useCallback, useLayoutEffect, createContext, useContext, PureComponent, createRef, Component, Children, Fragment as Fragment$1 } 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 { 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,9 +10,8 @@ import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwi
 import throttle from 'lodash.throttle';
 import { CSSTransition } from 'react-transition-group';
 import { createPortal } from 'react-dom';
-import { FocusScope } from '@react-aria/focus';
-import mergeRefs from 'react-merge-refs';
 import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
+import mergeRefs from 'react-merge-refs';
 import { usePopper } from 'react-popper';
 import { Transition, Listbox } from '@headlessui/react';
 import { useId } from '@radix-ui/react-id';
@@ -763,7 +762,7 @@ const ActionOption = ({
   });
 };
 
-var messages$8 = defineMessages({
+var messages$9 = defineMessages({
   ariaLabel: {
     id: "neptune.CloseButton.ariaLabel"
   }
@@ -779,7 +778,7 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   testId
 }, reference) {
   const intl = useIntl();
-  ariaLabel ??= intl.formatMessage(messages$8.ariaLabel);
+  ariaLabel ??= intl.formatMessage(messages$9.ariaLabel);
   const Icon = filled ? CrossCircleFill : Cross;
   return /*#__PURE__*/jsx("button", {
     ref: reference,
@@ -799,7 +798,7 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   });
 });
 
-var messages$7 = defineMessages({
+var messages$8 = defineMessages({
   opensInNewTab: {
     id: "neptune.Link.opensInNewTab"
   }
@@ -828,7 +827,7 @@ const Link = ({
     onClick: onClick,
     ...props,
     children: [children, " ", isBlank && /*#__PURE__*/jsx(NavigateAway, {
-      title: formatMessage(messages$7.opensInNewTab)
+      title: formatMessage(messages$8.opensInNewTab)
     })]
   });
 };
@@ -1458,22 +1457,269 @@ 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
 }) => {
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-autofocus
-    jsx(FocusScope, {
-      contain: true,
-      restoreFocus: true,
-      autoFocus: true,
-      children: /*#__PURE__*/jsx("div", {
-        tabIndex: -1,
-        children: children
-      })
-    })
-  );
+  const boundaryReference = useRef(null);
+  const parent = isUndefined(document) ? undefined : document;
+  const [focusableEls, setFocusableEls] = useState({});
+  useEffect(() => {
+    if (boundaryReference?.current) {
+      boundaryReference.current.focus({
+        preventScroll: true
+      });
+      setFocusableEls(getFocusableElements(boundaryReference.current));
+    }
+  }, []);
+  // 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,
+    tabIndex: -1,
+    className: "np-focus-boundary outline-none",
+    children: children
+  });
 };
 var FocusBoundary$1 = FocusBoundary;
 
@@ -1728,176 +1974,6 @@ 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;
@@ -2461,7 +2537,7 @@ const Chip = ({
   }, value);
 };
 
-var messages$6 = defineMessages({
+var messages$7 = defineMessages({
   ariaLabel: {
     id: "neptune.Chips.ariaLabel"
   }
@@ -2493,7 +2569,7 @@ const Chips = ({
         value: chip.value,
         label: chip.label,
         closeButton: {
-          'aria-label': intl.formatMessage(messages$6.ariaLabel, {
+          'aria-label': intl.formatMessage(messages$7.ariaLabel, {
             choice: chip.label
           })
         },
@@ -2601,7 +2677,7 @@ const validDateObject = dateObject => dateObject instanceof Date && !isNaN(dateO
 
 const isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
 
-var messages$5 = defineMessages({
+var messages$6 = defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
   },
@@ -2679,12 +2755,12 @@ const DateInput = ({
   const [month, setMonth] = useState(() => getExplodedDate('month'));
   const [year, setYear] = useState(() => getExplodedDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = useState(getDateObject);
-  dayLabel = dayLabel || formatMessage(messages$5.dayLabel);
-  monthLabel = monthLabel || formatMessage(messages$5.monthLabel);
-  yearLabel = yearLabel || formatMessage(messages$5.yearLabel);
+  dayLabel = dayLabel || formatMessage(messages$6.dayLabel);
+  monthLabel = monthLabel || formatMessage(messages$6.monthLabel);
+  yearLabel = yearLabel || formatMessage(messages$6.yearLabel);
   placeholders = {
     day: placeholders?.day || 'DD',
-    month: placeholders?.month || formatMessage(messages$5.monthLabel),
+    month: placeholders?.month || formatMessage(messages$6.monthLabel),
     year: placeholders?.year || 'YYYY'
   };
   const getDateAsString = date => {
@@ -3115,7 +3191,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(({
 });
 var ResponsivePanel$1 = ResponsivePanel;
 
-var messages$4 = defineMessages({
+var messages$5 = defineMessages({
   ariaLabel: {
     id: "neptune.ClearButton.ariaLabel"
   }
@@ -3178,7 +3254,7 @@ const DateTrigger = ({
         className: "input-group-addon",
         children: /*#__PURE__*/jsx(CloseButton, {
           className: `clear-btn clear-btn--${size}`,
-          "aria-label": formatMessage(messages$4.ariaLabel),
+          "aria-label": formatMessage(messages$5.ariaLabel),
           size: Size.SMALL,
           onClick: event => {
             event.stopPropagation();
@@ -3208,50 +3284,85 @@ DateTrigger.defaultProps = {
 };
 var DateTrigger$1 = DateTrigger;
 
+var messages$4 = defineMessages({
+  next: {
+    id: "neptune.DateLookup.next"
+  },
+  previous: {
+    id: "neptune.DateLookup.previous"
+  },
+  day: {
+    id: "neptune.DateLookup.day"
+  },
+  month: {
+    id: "neptune.DateLookup.month"
+  },
+  year: {
+    id: "neptune.DateLookup.year"
+  },
+  twentyYears: {
+    id: "neptune.DateLookup.twentyYears"
+  },
+  selected: {
+    id: "neptune.DateLookup.selected"
+  },
+  goTo20YearView: {
+    id: "neptune.DateLookup.goTo20YearView"
+  }
+});
+
 const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold rounded-sm';
 const DateHeader = ({
   label,
   onLabelClick,
   onPreviousClick,
-  onNextClick
-}) => /*#__PURE__*/jsxs("div", {
-  className: "text-xs-center p-t-1 p-b-2 clearfix",
-  children: [/*#__PURE__*/jsx("div", {
-    className: "pull-left-single-direction",
-    children: /*#__PURE__*/jsx("button", {
-      type: "button",
-      className: `d-inline-flex ${buttonClasses}`,
-      onClick: onPreviousClick,
-      children: /*#__PURE__*/jsx(Chevron$1, {
-        orientation: Position.LEFT,
-        className: "left-single-direction",
-        size: Size.MEDIUM
+  onNextClick,
+  dateMode
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/jsxs("div", {
+    className: "text-xs-center p-t-1 p-b-2 clearfix",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "pull-left-single-direction",
+      children: /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: `d-inline-flex ${buttonClasses}`,
+        "aria-label": `${intl.formatMessage(messages$4.previous)} ${dateMode}`,
+        onClick: onPreviousClick,
+        children: /*#__PURE__*/jsx(Chevron$1, {
+          orientation: Position.LEFT,
+          className: "left-single-direction",
+          size: Size.MEDIUM
+        })
       })
-    })
-  }), label && /*#__PURE__*/jsx("button", {
-    type: "button",
-    className: `tw-date-lookup-header-current ${buttonClasses}`,
-    onClick: onLabelClick,
-    children: label
-  }), /*#__PURE__*/jsx("div", {
-    className: "pull-right-single-direction",
-    children: /*#__PURE__*/jsx("button", {
+    }), label && /*#__PURE__*/jsx("button", {
       type: "button",
-      className: `d-inline-flex ${buttonClasses}`,
-      onClick: onNextClick,
-      children: /*#__PURE__*/jsx(Chevron$1, {
-        orientation: Position.RIGHT,
-        className: "right-single-direction",
-        size: Size.MEDIUM
+      className: `tw-date-lookup-header-current ${buttonClasses}`,
+      "aria-label": intl.formatMessage(messages$4.goTo20YearView),
+      onClick: onLabelClick,
+      children: label
+    }), /*#__PURE__*/jsx("div", {
+      className: "pull-right-single-direction",
+      children: /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: `d-inline-flex ${buttonClasses}`,
+        "aria-label": `${useIntl().formatMessage(messages$4.next)} ${dateMode}`,
+        onClick: onNextClick,
+        children: /*#__PURE__*/jsx(Chevron$1, {
+          orientation: Position.RIGHT,
+          className: "right-single-direction",
+          size: Size.MEDIUM
+        })
       })
-    })
-  })]
-});
+    })]
+  });
+};
 DateHeader.propTypes = {
   label: PropTypes.string,
   onLabelClick: PropTypes.func,
   onPreviousClick: PropTypes.func.isRequired,
-  onNextClick: PropTypes.func.isRequired
+  onNextClick: PropTypes.func.isRequired,
+  dateMode: PropTypes.string
 };
 DateHeader.defaultProps = {
   label: null,
@@ -3277,6 +3388,12 @@ class TableLink extends PureComponent {
       this.props.onClick(this.props.item);
     }
   };
+  calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
+    if (active) {
+      return `${longTitle || title}, ${formatMessage(messages$4.selected)} ${formatMessage(messages$4[type])}`;
+    }
+    return longTitle || title;
+  };
   render() {
     const {
       item,
@@ -3285,14 +3402,17 @@ class TableLink extends PureComponent {
       longTitle,
       active,
       disabled,
-      today
+      today,
+      intl: {
+        formatMessage
+      }
     } = this.props;
     return /*#__PURE__*/jsx(Fragment, {
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `tw-date-lookup-${type}-option ${active ? 'active' : ''} ${today ? 'today' : ''} np-text-body-default-bold`,
         disabled: disabled,
-        "aria-label": longTitle,
+        "aria-label": this.calculateAriaLabel(longTitle, title, active, type, formatMessage),
         onClick: this.onClick,
         children: title || item
       })
@@ -3314,7 +3434,7 @@ TableLink.defaultProps = {
   title: null,
   longTitle: null
 };
-var TableLink$1 = TableLink;
+var TableLink$1 = injectIntl(TableLink);
 
 const SHORT_DAY_FORMAT = {
   day: 'numeric'
@@ -3358,6 +3478,7 @@ class DayCalendarTable extends PureComponent {
   };
   days = getDayNames(this.props.intl.locale, 'short');
   daysShort = getDayNames(this.props.intl.locale, 'narrow');
+  daysLong = getDayNames(this.props.intl.locale, 'long');
   selectDay = day => {
     const {
       viewMonth,
@@ -3401,10 +3522,16 @@ class DayCalendarTable extends PureComponent {
             className: "text-xs-center np-text-body-default-bold",
             children: [/*#__PURE__*/jsx("span", {
               className: "hidden-xs",
-              children: day.slice(0, 3)
+              children: /*#__PURE__*/jsx("abbr", {
+                title: this.daysLong[index],
+                children: day.slice(0, 3)
+              })
             }), /*#__PURE__*/jsx("span", {
               className: "visible-xs-inline-block",
-              children: this.daysShort[index].slice(0, 2)
+              children: /*#__PURE__*/jsx("abbr", {
+                title: this.daysLong[index],
+                children: this.daysShort[index].slice(0, 2)
+              })
             })]
           }, day))
         })
@@ -3472,7 +3599,8 @@ class DayCalendar extends PureComponent {
       viewMonth,
       viewYear,
       intl: {
-        locale
+        locale,
+        formatMessage
       },
       monthFormat,
       onLabelClick,
@@ -3484,6 +3612,7 @@ class DayCalendar extends PureComponent {
           month: monthFormat,
           year: 'numeric'
         }),
+        dateMode: formatMessage(messages$4.month),
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousMonth,
         onNextClick: this.selectNextMonth
@@ -3603,13 +3732,15 @@ class MonthCalendar extends PureComponent {
       max,
       viewYear,
       intl: {
-        locale
+        locale,
+        formatMessage
       },
       placeholder,
       onLabelClick
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
+        dateMode: formatMessage(messages$4.year),
         label: formatDate(new Date(viewYear, 0), locale, {
           year: 'numeric'
         }),
@@ -3727,10 +3858,14 @@ class YearCalendar extends PureComponent {
       min,
       max,
       viewYear,
-      placeholder
+      placeholder,
+      intl: {
+        formatMessage
+      }
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
+        dateMode: formatMessage(messages$4.twentyYears),
         onPreviousClick: this.selectPreviousYears,
         onNextClick: this.selectNextYears
       }), /*#__PURE__*/jsx(YearCalendarTable$1, {
@@ -3758,7 +3893,7 @@ YearCalendar.defaultProps = {
   min: null,
   max: null
 };
-var YearCalendar$1 = YearCalendar;
+var YearCalendar$1 = injectIntl(YearCalendar);
 
 const MODE = {
   DAY: 'day',
@@ -6423,7 +6558,7 @@ function SelectInput({
             children: [onClear != null && value != null ? /*#__PURE__*/jsxs(Fragment, {
               children: [/*#__PURE__*/jsx("button", {
                 type: "button",
-                "aria-label": intl.formatMessage(messages$4.ariaLabel),
+                "aria-label": intl.formatMessage(messages$5.ariaLabel),
                 disabled: uiDisabled,
                 className: "np-select-input-addon np-select-input-addon--interactive",
                 onClick: event => {
@@ -10497,6 +10632,14 @@ var en = {
 	"neptune.DateInput.day.label": "Day",
 	"neptune.DateInput.month.label": "Month",
 	"neptune.DateInput.year.label": "Year",
+	"neptune.DateLookup.day": "day",
+	"neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+	"neptune.DateLookup.month": "month",
+	"neptune.DateLookup.next": "next",
+	"neptune.DateLookup.previous": "previous",
+	"neptune.DateLookup.selected": "selected",
+	"neptune.DateLookup.twentyYears": "20 years",
+	"neptune.DateLookup.year": "year",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.Select.searchPlaceholder": "Search...",
@@ -13004,6 +13147,7 @@ const ProcessingStep = props => {
           'm-b-2': isModern
         }),
         type: Typography.TITLE_BODY,
+        "aria-live": "polite",
         children: psProcessingText
       }), psButtonText && /*#__PURE__*/jsx(Button, {
         disabled: psButtonDisabled,
@@ -13047,6 +13191,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,
@@ -13415,6 +13560,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", {
@@ -13889,6 +14035,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", {