@transferwise/components 0.0.0-experimental-e05dfa3 → 0.0.0-experimental-7905c27

package/build/types/dateInput/DateInput.d.ts

@@ -15,6 +15,8 @@ export interface DateInputPlaceholders {
 }
 
 export interface DateInputProps {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
     disabled?: boolean;
     size?: DateInputSize;
     value?: DateInputValue;

package/build/types/dateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;;;gCAsQC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;;;;;gCA0QC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.js"],"names":[],"mappings":";AAqBA;IAoBE;;;;;;aAqBC;IApCD,wBAaC;IAjBD,wCAAsB;IAEtB,yCAAuB;IAIrB;;;;;;;;;;MAUC;IA0BH,6CAMC;IAFC,uCAAyE;IAI3E,6BAGC;IAED,iBAOE;IAEF,oBAME;IAEF,kBAME;IAEF,oCA2CE;IAEF,wEAmBE;IAEF,+DAOE;IAEF,gCAIE;IAEF,yBAA+C;IAE/C,2BAAmD;IAEnD,0BAAiD;IAEjD,sDAME;IAEF;;;eAEE;IAEF,+CA8BE;IAEF,wBAGE;IAEF,sCA0BC;CACF"}
+{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.js"],"names":[],"mappings":";AAqBA;IAmBE;;;;;;aAqBC;IAnCD,wBAYC;IAhBD,wCAAsB;IAEtB,yCAAuB;IAIrB;;;;;;;;;MASC;IA0BH,6CAMC;IAFC,uCAAyE;IAI3E,6BAGC;IAED,iBAOE;IAEF,kBAME;IAEF,oCA0CE;IAEF,wEAgBE;IAEF,+DAOE;IAEF,gCAIE;IAEF,yBAA+C;IAE/C,2BAAmD;IAEnD,0BAAiD;IAEjD,sDAME;IAEF;;;eAEE;IAEF,+CA8BE;IAEF,wBAGE;IAEF,sCA0BC;CACF"}

package/build/types/dateLookup/monthCalendar/table/MonthCalendarTable.d.ts

@@ -1,5 +1,5 @@
 export default MonthCalendarTable;
-declare function MonthCalendarTable({ selectedDate, min, max, viewYear, placeholder, onSelect }: {
+declare function MonthCalendarTable({ selectedDate: selected, min, max, viewYear, placeholder, onSelect, }: {
     selectedDate: any;
     min: any;
     max: any;

package/build/types/dateLookup/monthCalendar/table/MonthCalendarTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonthCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/monthCalendar/table/MonthCalendarTable.js"],"names":[],"mappings":";AAWA;;;;;;;gCA4DC"}
+{"version":3,"file":"MonthCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/monthCalendar/table/MonthCalendarTable.js"],"names":[],"mappings":";AAUA;;;;;;;gCAgDC"}

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

@@ -1,19 +1,5 @@
-/// <reference types="react" />
-import { IntlShape } from 'react-intl';
-interface TableLinkProps {
-    item: number;
-    type: 'day' | 'month' | 'year';
-    title?: string;
-    longTitle?: string;
-    active: boolean;
-    disabled: boolean;
-    today: boolean;
-    autofocus?: boolean;
-    onClick: (item: number) => void;
-    intl: IntlShape;
-}
-declare const _default: import("react").FC<import("react-intl").WithIntlProps<TableLinkProps>> & {
-    WrappedComponent: import("react").ComponentType<TableLinkProps>;
+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.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,SAAS,EAAE,MAAM,YAAY,CAAC;AAInD,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,SAAS,CAAC;CACjB;;;;AA8DD,wBAAqC"}
+{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.js"],"names":[],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { default } from './TableLink';
+export { default } from "./TableLink";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/index.js"],"names":[],"mappings":""}

package/build/types/dateLookup/yearCalendar/table/YearCalendarTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YearCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.js"],"names":[],"mappings":";AAWA;;;;;;;gCAuDC"}
+{"version":3,"file":"YearCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.js"],"names":[],"mappings":";AAUA;;;;;;;gCAkCC"}

package/build/types/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}

package/build/types/test-utils/window-mock.d.ts

@@ -1,2 +1,3 @@
 export declare function mockMatchMedia(): void;
+export declare function mockResizeObserver(): void;
 //# sourceMappingURL=window-mock.d.ts.map

package/build/types/test-utils/window-mock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,SAkB7B"}
+{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,SAkB7B;AAED,wBAAgB,kBAAkB,SASjC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-e05dfa3",
+  "version": "0.0.0-experimental-7905c27",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/dateInput/DateInput.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Select, Input } from '..';
+import { Input, SelectInput, SelectInputOptionContent } from '..';
 import { Size, DateMode, MonthFormat } from '../common';
 import { getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
 
@@ -14,6 +14,8 @@ const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
 const INITIAL_DEFAULT_STATE = { year: null, month: null, day: null };
 
 const DateInput = ({
+  'aria-labelledby': ariaLabelledBy,
+  'aria-label': ariaLabel,
   disabled,
   size,
   value,
@@ -88,16 +90,16 @@ const DateInput = ({
     const months = getMonthNames(locale, monthFormat);
 
     return (
-      <label>
+      <label className="d-flex flex-column">
         <span className="sr-only">{monthLabel}</span>
-        <Select
-          id={id ? `${id}-select` : undefined}
+        <SelectInput
           name="month"
           disabled={disabled}
           placeholder={placeholders.month}
-          options={getMonthsOptions()}
+          items={getMonthsOptions()}
           size={size}
-          selected={month === null ? null : { value: month, label: months[month] }}
+          value={month === null ? null : { value: month, label: months[month] }}
+          renderValue={({ label }) => <SelectInputOptionContent title={label} />}
           onChange={(selectedValue) => handleMonthChange(selectedValue)}
           {...selectProps}
         />
@@ -110,7 +112,7 @@ const DateInput = ({
     const months = getMonthNames(locale, monthFormat);
 
     months.forEach((label, index) => {
-      options.push({ value: index, label });
+      options.push({ type: 'option', value: { label, value: index } });
     });
     return options;
   };
@@ -224,6 +226,8 @@ const DateInput = ({
     <div
       className="tw-date"
       id={id}
+      aria-labelledby={ariaLabelledBy}
+      aria-label={ariaLabel}
       onFocus={(event) =>
         shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation()
       }
@@ -300,6 +304,8 @@ function shouldPropagateOnBlur({ target, relatedTarget }) {
 }
 
 DateInput.propTypes = {
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
   disabled: PropTypes.bool,
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),

package/src/dateInput/DateInput.spec.js

@@ -2,7 +2,7 @@ import { shallow, mount } from 'enzyme';
 import { useIntl } from 'react-intl';
 
 import { DateInput, Input } from '..';
-import { fakeEvent } from '../common/fakeEvents';
+import { mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 const MONTHS_FR = [
   'janvier',
@@ -41,10 +41,10 @@ const LOCALES = {
 
 const DEFAULT_LOCALE = 'en-GB';
 
-const FEBRUARY_OPTION = { value: 1, label: MONTHS_EN[1] };
+const FEBRUARY_OPTION = { value: MONTHS_EN[1] };
 
 const DAY_SELECTOR = 'ForwardRef(Input)[name="day"]';
-const MONTH_SELECTOR = 'Select';
+const MONTH_SELECTOR = 'SelectInput';
 const YEAR_SELECTOR = 'ForwardRef(Input)[name="year"]';
 
 jest.mock('./DateInput.messages', () => ({
@@ -78,6 +78,8 @@ describe('Date Input Component', () => {
   const props = { onChange: jest.fn() };
 
   beforeEach(() => {
+    mockMatchMedia();
+    mockResizeObserver();
     useIntl.mockReturnValue({
       locale: DEFAULT_LOCALE,
       formatMessage: (message) => message.defaultMessage,
@@ -99,7 +101,7 @@ describe('Date Input Component', () => {
     });
 
     it('sets month field to 0', () => {
-      expect(selectMonth.props().selected).toBeNull();
+      expect(selectMonth.props().value).toBeNull();
     });
 
     it('sets year field to empty', () => {
@@ -131,7 +133,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(1);
-        expect(selectMonth.prop('selected')).toStrictEqual(FEBRUARY_OPTION);
+        expect(selectMonth.prop('value').label).toBe(FEBRUARY_OPTION.value);
         expect(inputYear.prop('value')).toBe(1971);
       });
     });
@@ -145,7 +147,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(22);
-        expect(selectMonth.prop('selected')).toStrictEqual({ label: MONTHS_EN[7], value: 7 });
+        expect(selectMonth.prop('value').label).toBe(MONTHS_EN[7]);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -159,7 +161,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe('');
-        expect(selectMonth.prop('selected')).toStrictEqual({ label: MONTHS_EN[7], value: 7 });
+        expect(selectMonth.prop('value').label).toBe(MONTHS_EN[7]);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -173,7 +175,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(28);
-        expect(selectMonth.prop('selected')).toStrictEqual(FEBRUARY_OPTION);
+        expect(selectMonth.prop('value').label).toBe(FEBRUARY_OPTION.value);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -216,7 +218,7 @@ describe('Date Input Component', () => {
       component = shallow(<DateInput {...props} />);
       selectMonth = component.find(MONTH_SELECTOR);
 
-      expect(selectMonth.props().options[0].label).toStrictEqual(MONTHS_FR[0]);
+      expect(selectMonth.props().items[0].value.label).toStrictEqual(MONTHS_FR[0]);
     });
 
     it('shows day before month if locale not US', () => {
@@ -240,26 +242,6 @@ describe('Date Input Component', () => {
     });
   });
 
-  describe('when id is provided', () => {
-    it('renders Select component with id', () => {
-      component = mount(<DateInput id="mock-id" {...props} />);
-
-      const select = component.find('Select');
-
-      expect(select.prop('id')).toBe('mock-id-select');
-    });
-  });
-
-  describe('when id is not provided', () => {
-    it('renders Select component with no id', () => {
-      component = mount(<DateInput {...props} />);
-
-      const select = component.find('Select');
-
-      expect(select.prop('id')).toBeUndefined();
-    });
-  });
-
   describe('when initialised', () => {
     describe('without an initial value', () => {
       it(`doesn't call the onChange callback`, () => {
@@ -334,19 +316,6 @@ describe('Date Input Component', () => {
 
   describe('when user interacts', () => {
     describe('with an empty date input', () => {
-      it('calls onChange with null if day is not entered', () => {
-        component = mount(<DateInput {...props} />);
-
-        // Select February
-        simulateSelectChange(2);
-
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputYear.simulate('change', { target: { value: '1990' } });
-
-        expect(props.onChange).toHaveBeenLastCalledWith(null);
-      });
-
       it('calls onChange with null if month is not selected', () => {
         component = mount(<DateInput {...props} />);
 
@@ -360,36 +329,6 @@ describe('Date Input Component', () => {
 
         expect(props.onChange).toHaveBeenLastCalledWith(null);
       });
-
-      it('calls onChange with null if year is not entered', () => {
-        component = mount(<DateInput {...props} />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: '12' } });
-
-        // Select February
-        simulateSelectChange(2);
-
-        expect(props.onChange).toHaveBeenLastCalledWith(null);
-      });
-
-      it('returns a valid date if all three fields are entered', () => {
-        component = mount(<DateInput {...props} />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: '12' } });
-
-        // Select February
-        simulateSelectChange(2);
-
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputYear.simulate('change', { target: { value: '1990' } });
-
-        expect(props.onChange).toHaveBeenLastCalledWith('1990-02-12');
-      });
     });
 
     describe('with day input', () => {
@@ -434,26 +373,6 @@ describe('Date Input Component', () => {
         expect(props.onChange).toHaveBeenCalledWith('1990-01-01');
       });
     });
-
-    describe('with month select', () => {
-      it('returns correct value for correct input', () => {
-        component = mount(<DateInput {...props} value="2001-01-01" />);
-
-        // Selects March
-        simulateSelectChange(3);
-
-        expect(props.onChange).toHaveBeenCalledWith('2001-03-01');
-      });
-
-      it('returns null when de-selecting month', () => {
-        component = mount(<DateInput {...props} value="2001-01-01" />);
-
-        // De-selects Month
-        simulateSelectChange(0);
-
-        expect(props.onChange).toHaveBeenLastCalledWith(null);
-      });
-    });
   });
 
   describe('with day input and year input', () => {
@@ -515,38 +434,6 @@ describe('Date Input Component', () => {
       expect(component.find(DAY_SELECTOR).prop('value')).toBe(28);
     });
 
-    it('corrects days too high in February', () => {
-      component = mount(<DateInput {...props} />);
-
-      inputDay = component.find(DAY_SELECTOR);
-      inputYear = component.find(YEAR_SELECTOR);
-
-      inputDay.simulate('change', { target: { value: 29 } });
-      // Selects February
-      simulateSelectChange(2);
-      inputYear.simulate('change', { target: { value: 2001 } });
-
-      expect(component.find(DAY_SELECTOR).prop('value')).toBe(28);
-    });
-
-    it("doesn't correct days in leap years February", () => {
-      component = mount(<DateInput {...props} value="2000-03-29" />);
-
-      // Selects February
-      simulateSelectChange(2);
-
-      expect(component.find(DAY_SELECTOR).prop('value')).toBe(29);
-    });
-
-    it('corrects days too high for selected months', () => {
-      component = mount(<DateInput {...props} value="2001-01-31" />);
-
-      // Selects April
-      simulateSelectChange(4);
-
-      expect(component.find(DAY_SELECTOR).prop('value')).toBe(30);
-    });
-
     it('lowers days if value entered too high', () => {
       const comp = shallow(<DateInput {...props} />);
 
@@ -582,12 +469,6 @@ describe('Date Input Component', () => {
       expect(component.exists(MONTH_SELECTOR)).toBe(true);
       expect(component.exists(DAY_SELECTOR)).toBe(false);
     });
-
-    it('should produce MM-YYYY date string', () => {
-      // Selects March
-      simulateSelectChange(3);
-      expect(props.onChange).toHaveBeenCalledWith('2001-03');
-    });
   });
 
   describe('when selectProps is provided', () => {
@@ -605,16 +486,11 @@ describe('Date Input Component', () => {
     });
 
     it('renders Select component with expected props', () => {
-      const select = component.find('Select');
+      const select = component.find(MONTH_SELECTOR);
 
       expect(select.prop('buttonProps')).toStrictEqual({
         'aria-label': 'mock-button-label',
       });
     });
   });
-
-  const simulateSelectChange = (n) => {
-    component.find('button.np-dropdown-toggle').simulate('click', fakeEvent());
-    component.find('li').at(n).simulate('click', fakeEvent());
-  };
 });

package/src/dateInput/DateInput.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { DateInput, InlineAlert } from '..';
-import { lorem10, storyConfig } from '../test-utils';
+import { DateInput, Info, InlineAlert, Title, Typography } from '..';
+import { lorem10, storyConfig, userEvent, within } from '../test-utils';
 
 export default {
   component: DateInput,
@@ -25,6 +25,53 @@ type Story = StoryObj<typeof DateInput>;
 
 export const Basic: Story = {};
 
+Basic.play = ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  userEvent.click(canvas.getByRole('button'));
+};
+
+export const WithLabel: Story = {
+  render: (args) => {
+    const id1 = 'date-input-group-label-1';
+    const label = 'Date of Birth';
+    return (
+      <>
+        <Title type={Typography.TITLE_SUBSECTION}>
+          label (as <code>div</code> element) is linked with <code>DateInput</code> via{' '}
+          <code>aria-labelledby</code> prop
+        </Title>
+        <div className="control-label" id={id1}>
+          Date of Delivery
+        </div>
+        <DateInput {...args} aria-labelledby={id1} />
+
+        <br />
+
+        <Title type={Typography.TITLE_SUBSECTION}>
+          label (as <code>div</code> element) is detached but <code>DateInput</code> has same label
+          via <code>aria-label</code> attribute
+        </Title>
+        <div className="control-label">
+          {label}{' '}
+          <Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
+        </div>
+        <DateInput {...args} aria-label={label} />
+
+        <br />
+
+        <Title type={Typography.TITLE_SUBSECTION}>
+          <code>DateInput</code> wrapped in <code>fieldset</code> + using <code>legend</code> as
+          label (rare use case)
+        </Title>
+        <fieldset>
+          <legend className="control-label">Expiry Date</legend>
+          <DateInput {...args} />
+        </fieldset>
+      </>
+    );
+  },
+};
+
 export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
 
 export const InputError: Story = {

package/src/dateLookup/DateLookup.css

@@ -1 +1 @@
-.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{background-color:inherit;min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.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>tbody>tr>td{padding:4px;padding:var(--size-4)}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td{padding:0}}.tw-date-lookup-calendar>tbody>tr>td:has(.tw-date-lookup-day-option){padding:1px}.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);color:#37517e;color:var(--color-content-primary);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td button{padding:0}}.tw-date-lookup-calendar>tbody>tr>td button.tw-date-lookup-day-option{align-items:center;border-radius:50%;display:inline-flex;height:40px;height:var(--size-40);justify-content:center;line-height:40px;line-height:var(--size-40);padding:0;width:40px;width:var(--size-40)}.tw-date-lookup-calendar>tbody>tr>td button.tw-date-lookup-day-option.today{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.tw-date-lookup-calendar>tbody>tr>td:hover button:not(.disabled,:disabled),.tw-date-lookup-calendar>tbody>tr>td:not(.disabled,:disabled) button.show-focus{background-color:var(--color-background-screen-hover)}.tw-date-lookup-calendar>tbody>tr>td:not(.disabled,:disabled) button.active{background-color:var(--color-interactive-primary);color:#00a2dd;color:var(--color-interactive-accent)}.tw-date-lookup-calendar abbr{text-decoration:none}.tw-date-lookup-header-current-container{display:inline}.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)}
+.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)}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td{padding:0}}.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%}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td button{padding:0}}.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}.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-container,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current-container{display:inline-block}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current-container .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current-container .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.js

@@ -28,7 +28,6 @@ class DateLookup extends PureComponent {
     super(props);
     this.state = {
       selectedDate: getStartOfDay(props.value),
-      originalDate: null,
       min: getStartOfDay(props.min),
       max: getStartOfDay(props.max),
       viewMonth: (props.value || new Date()).getMonth(),
@@ -84,14 +83,6 @@ class DateLookup extends PureComponent {
     }
   };
 
-  discard = () => {
-    const { originalDate } = this.state;
-    if (originalDate !== null) {
-      this.props.onChange(originalDate);
-    }
-    this.close();
-  };
-
   close = () => {
     const { onBlur } = this.props;
     this.setState({ open: false });
@@ -101,7 +92,7 @@ class DateLookup extends PureComponent {
   };
 
   handleKeyDown = (event) => {
-    const { open, originalDate } = this.state;
+    const { open } = this.state;
     switch (event.keyCode) {
       case KeyCodes.LEFT:
         if (open) {
@@ -136,7 +127,6 @@ class DateLookup extends PureComponent {
         event.preventDefault();
         break;
       case KeyCodes.ESCAPE:
-        originalDate && this.props.onChange(originalDate);
         this.close();
         event.preventDefault();
         break;
@@ -146,10 +136,7 @@ class DateLookup extends PureComponent {
   };
 
   adjustDate = (daysToAdd, monthsToAdd, yearsToAdd) => {
-    const { selectedDate, min, max, mode, originalDate } = this.state;
-    if (originalDate === null) {
-      this.setState({ originalDate: selectedDate });
-    }
+    const { selectedDate, min, max, mode } = this.state;
     let date;
     if (selectedDate) {
       date = new Date(
@@ -256,7 +243,7 @@ class DateLookup extends PureComponent {
           open={open}
           className="tw-date-lookup-menu"
           position={Position.BOTTOM}
-          onClose={this.discard}
+          onClose={this.close}
         >
           {this.getCalendar()}
         </ResponsivePanel>

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

@@ -80,18 +80,6 @@ describe('DateLookup (keyboard events)', () => {
       pressKey(KEY_CODES.DOWN);
       onChangeCalledWith(new Date(2019, 0, 3));
     });
-
-    it('resets to original date when escape key is pressed', () => {
-      pressKey(KEY_CODES.LEFT);
-      pressKey(KEY_CODES.ESCAPE);
-      onChangeCalledWith(date);
-    });
-
-    it('resets to original date when clicking outside modal', () => {
-      pressKey(KEY_CODES.LEFT);
-      component.find('.dimmer').simulate('click');
-      onChangeCalledWith(date);
-    });
   });
 
   describe('when open and in month mode', () => {