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

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 type FocusBoundaryProps = {
-    children: React.ReactNode;
+    children: 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":";AAEA,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,aAAa,iBAAkB,kBAAkB,gCAOtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"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"}

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

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

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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

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

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

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

package/build/types/dateLookup/DateLookup.messages.d.ts

@@ -0,0 +1,65 @@
+declare namespace _default {
+    namespace next {
+        const id: string;
+        const defaultMessage: string;
+        const description: string;
+    }
+    namespace previous {
+        const id_1: string;
+        export { id_1 as id };
+        const defaultMessage_1: string;
+        export { defaultMessage_1 as defaultMessage };
+        const description_1: string;
+        export { description_1 as description };
+    }
+    namespace day {
+        const id_2: string;
+        export { id_2 as id };
+        const defaultMessage_2: string;
+        export { defaultMessage_2 as defaultMessage };
+        const description_2: string;
+        export { description_2 as description };
+    }
+    namespace month {
+        const id_3: string;
+        export { id_3 as id };
+        const defaultMessage_3: string;
+        export { defaultMessage_3 as defaultMessage };
+        const description_3: string;
+        export { description_3 as description };
+    }
+    namespace year {
+        const id_4: string;
+        export { id_4 as id };
+        const defaultMessage_4: string;
+        export { defaultMessage_4 as defaultMessage };
+        const description_4: string;
+        export { description_4 as description };
+    }
+    namespace twentyYears {
+        const id_5: string;
+        export { id_5 as id };
+        const defaultMessage_5: string;
+        export { defaultMessage_5 as defaultMessage };
+        const description_5: string;
+        export { description_5 as description };
+    }
+    namespace selected {
+        const id_6: string;
+        export { id_6 as id };
+        const defaultMessage_6: string;
+        export { defaultMessage_6 as defaultMessage };
+        const description_6: string;
+        export { description_6 as description };
+    }
+    namespace goTo20YearView {
+        const id_7: string;
+        export { id_7 as id };
+        const defaultMessage_7: string;
+        export { defaultMessage_7 as defaultMessage };
+        const description_7: string;
+        export { description_7 as description };
+    }
+}
+export default _default;
+//# sourceMappingURL=DateLookup.messages.d.ts.map

package/build/types/dateLookup/DateLookup.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateLookup.messages.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.messages.js"],"names":[],"mappings":""}

package/build/types/dateLookup/dateHeader/DateHeader.d.ts

@@ -1,9 +1,10 @@
 export default DateHeader;
-declare function DateHeader({ label, onLabelClick, onPreviousClick, onNextClick }: {
+declare function DateHeader({ label, onLabelClick, onPreviousClick, onNextClick, dateMode }: {
     label: any;
     onLabelClick: any;
     onPreviousClick: any;
     onNextClick: any;
+    dateMode: any;
 }): import("react").JSX.Element;
 declare namespace DateHeader {
     namespace propTypes {
@@ -11,6 +12,7 @@ declare namespace DateHeader {
         const onLabelClick: any;
         const onPreviousClick: any;
         const onNextClick: any;
+        const dateMode: any;
     }
     namespace defaultProps {
         const label_1: null;

package/build/types/dateLookup/dateHeader/DateHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateHeader.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateHeader/DateHeader.js"],"names":[],"mappings":";AAOA;;;;;gCA0BC;;;;;;;;;;;QAWe,uCAAQ"}
+{"version":3,"file":"DateHeader.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateHeader/DateHeader.js"],"names":[],"mappings":";AASA;;;;;;gCA6CC;;;;;;;;;;;;QAYe,uCAAQ"}

package/build/types/dateLookup/tableLink/TableLink.d.ts

@@ -1,27 +1,5 @@
-export default TableLink;
-declare class TableLink extends PureComponent<any, any, any> {
-    constructor(props: any);
-    constructor(props: any, context: any);
-    onClick: (event: any) => void;
-    render(): import("react").JSX.Element;
-}
-declare namespace TableLink {
-    namespace propTypes {
-        const item: any;
-        const type: any;
-        const title: any;
-        const longTitle: any;
-        const active: any;
-        const disabled: any;
-        const today: any;
-        const onClick: any;
-    }
-    namespace defaultProps {
-        const title_1: null;
-        export { title_1 as title };
-        const longTitle_1: null;
-        export { longTitle_1 as longTitle };
-    }
-}
-import { PureComponent } from "react";
+declare const _default: import("react").FC<import("react-intl").WithIntlProps<any>> & {
+    WrappedComponent: import("react").ComponentType<any>;
+};
+export default _default;
 //# sourceMappingURL=TableLink.d.ts.map

package/build/types/dateLookup/tableLink/TableLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.js"],"names":[],"mappings":";AAGA;IA6Co1kB,wBAA8C;IAAA,sCAAgK;IA5ChilB,8BAKE;IAEF,sCAiBC;CACF"}
+{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.js"],"names":[],"mappings":""}

package/build/types/dateLookup/yearCalendar/YearCalendar.d.ts

@@ -1,30 +1,5 @@
-export default YearCalendar;
-declare class YearCalendar extends PureComponent<any, any, any> {
-    constructor(props: any);
-    constructor(props: any, context: any);
-    onYearSelect: (year: any) => void;
-    selectPreviousYears: () => void;
-    selectNextYears: () => void;
-    render(): import("react").JSX.Element;
-}
-declare namespace YearCalendar {
-    namespace propTypes {
-        const selectedDate: any;
-        const min: any;
-        const max: any;
-        const viewYear: any;
-        const placeholder: any;
-        const onSelect: any;
-        const onViewDateUpdate: any;
-    }
-    namespace defaultProps {
-        const selectedDate_1: null;
-        export { selectedDate_1 as selectedDate };
-        const min_1: null;
-        export { min_1 as min };
-        const max_1: null;
-        export { max_1 as max };
-    }
-}
-import { PureComponent } from "react";
+declare const _default: import("react").FC<import("react-intl").WithIntlProps<any>> & {
+    WrappedComponent: import("react").ComponentType<any>;
+};
+export default _default;
 //# sourceMappingURL=YearCalendar.d.ts.map

package/build/types/dateLookup/yearCalendar/YearCalendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YearCalendar.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/yearCalendar/YearCalendar.js"],"names":[],"mappings":";AAOA;IA6C0ukB,wBAA8C;IAAA,sCAAgK;IA5Ct7kB,kCAGE;IAEF,gCAEE;IAEF,4BAEE;IAEF,sCAWC;CACF"}
+{"version":3,"file":"YearCalendar.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/yearCalendar/YearCalendar.js"],"names":[],"mappings":""}

package/build/types/upload/steps/completeStep/completeStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"completeStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/completeStep/completeStep.js"],"names":[],"mappings":";AAYA,uEAiEC"}
+{"version":3,"file":"completeStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/completeStep/completeStep.js"],"names":[],"mappings":";AAYA,uEAoEC"}

package/build/types/upload/steps/processingStep/processingStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"processingStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/processingStep/processingStep.js"],"names":[],"mappings":";AASA,yEAiDC"}
+{"version":3,"file":"processingStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/processingStep/processingStep.js"],"names":[],"mappings":";AASA,yEAkDC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-e9526a8",
+  "version": "0.0.0-experimental-9a61b0a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -103,7 +103,6 @@
     "@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

@@ -6,11 +6,8 @@ exports[`BottomSheet renders content when open 1`] = `
   <div
     class="np-theme-light"
   >
-    <span
-      data-focus-scope-start="true"
-      hidden=""
-    />
     <div
+      class="np-focus-boundary outline-none"
       tabindex="-1"
     >
       <div
@@ -67,10 +64,6 @@ exports[`BottomSheet renders content when open 1`] = `
         </div>
       </div>
     </div>
-    <span
-      data-focus-scope-end="true"
-      hidden=""
-    />
   </div>
 </body>
 `;

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

@@ -0,0 +1,66 @@
+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/FocusBoundary.tsx

@@ -1,15 +1,45 @@
-import { FocusScope } from '@react-aria/focus';
+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;
 
 type FocusBoundaryProps = {
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 const FocusBoundary = ({ children }: FocusBoundaryProps) => {
+  const boundaryReference = useRef<HTMLDivElement | null>(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 (
-    // eslint-disable-next-line jsx-a11y/no-autofocus
-    <FocusScope contain restoreFocus autoFocus>
-      <div tabIndex={-1}>{children}</div>
-    </FocusScope>
+    <div ref={boundaryReference} tabIndex={-1} className="np-focus-boundary outline-none">
+      {children}
+    </div>
   );
 };
 

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

@@ -0,0 +1,16 @@
+// 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

@@ -0,0 +1,25 @@
+/**
+ * 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

@@ -0,0 +1,51 @@
+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

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

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

@@ -0,0 +1,23 @@
+/**
+ * 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

@@ -0,0 +1,103 @@
+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/dateLookup/DateLookup.css

@@ -1 +1 @@
-.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.tw-date-lookup-header-current{font-weight:800;font-weight:var(--font-weight-bold)}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option{align-items:center;color:#37517e;color:var(--color-content-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;line-height:32px;line-height:var(--size-32)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option.active,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option.active{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-interactive-primary)}
+.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tw-date-lookup-calendar abbr{text-decoration:none}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.tw-date-lookup-header-current{font-weight:800;font-weight:var(--font-weight-bold)}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option{align-items:center;color:#37517e;color:var(--color-content-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;line-height:32px;line-height:var(--size-32)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option.active,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option.active{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-interactive-primary)}

package/src/dateLookup/DateLookup.keyboardEvents.spec.js

@@ -7,13 +7,13 @@ import KEY_CODES from '../common/keyCodes';
 import DateLookup from '.';
 
 const defaultLocale = 'en-GB';
-
+const formatMessage = (id) => `${id}`;
 jest.mock('react-intl', () => ({
   injectIntl: (Component) =>
     function (props) {
-      return <Component {...props} intl={{ locale: defaultLocale }} />;
+      return <Component {...props} intl={{ locale: defaultLocale, formatMessage }} />;
     },
-  useIntl: () => ({ locale: defaultLocale }),
+  useIntl: () => ({ locale: defaultLocale, formatMessage }),
   defineMessages: (translations) => translations,
 }));
 

package/src/dateLookup/DateLookup.less

@@ -54,6 +54,10 @@
     }
   }
 
+  abbr {
+    text-decoration: none;
+  }
+
   .np-theme-personal & {
     background-color: inherit;
   }