npm - @transferwise/components - Versions diffs - 46.92.0 → 46.93.1 - Mend

@transferwise/components 46.92.0 → 46.93.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/build/actionOption/ActionOption.js +2 -0
package/build/actionOption/ActionOption.js.map +1 -1
package/build/actionOption/ActionOption.mjs +2 -0
package/build/actionOption/ActionOption.mjs.map +1 -1
package/build/common/Option/Option.js +9 -4
package/build/common/Option/Option.js.map +1 -1
package/build/common/Option/Option.mjs +10 -5
package/build/common/Option/Option.mjs.map +1 -1
package/build/dateLookup/dateTrigger/DateTrigger.js +11 -6
package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
package/build/dateLookup/dateTrigger/DateTrigger.mjs +11 -6
package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
package/build/definitionList/DefinitionList.js +5 -3
package/build/definitionList/DefinitionList.js.map +1 -1
package/build/definitionList/DefinitionList.mjs +5 -3
package/build/definitionList/DefinitionList.mjs.map +1 -1
package/build/main.css +23 -32
package/build/snackbar/Snackbar.js +4 -2
package/build/snackbar/Snackbar.js.map +1 -1
package/build/snackbar/Snackbar.mjs +4 -2
package/build/snackbar/Snackbar.mjs.map +1 -1
package/build/styles/common/Option/Option.css +22 -0
package/build/styles/dateLookup/dateTrigger/DateTrigger.css +1 -32
package/build/styles/main.css +23 -32
package/build/typeahead/typeaheadInput/TypeaheadInput.js +4 -1
package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
package/build/typeahead/typeaheadInput/TypeaheadInput.mjs +4 -1
package/build/typeahead/typeaheadInput/TypeaheadInput.mjs.map +1 -1
package/build/types/actionOption/ActionOption.d.ts +2 -1
package/build/types/actionOption/ActionOption.d.ts.map +1 -1
package/build/types/common/Option/Option.d.ts +1 -0
package/build/types/common/Option/Option.d.ts.map +1 -1
package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
package/build/types/definitionList/DefinitionList.d.ts.map +1 -1
package/build/types/typeahead/typeaheadInput/TypeaheadInput.d.ts.map +1 -1
package/package.json +1 -1
package/src/actionOption/ActionOption.story.tsx +2 -0
package/src/actionOption/ActionOption.tsx +3 -0
package/src/common/Option/Option.css +22 -0
package/src/common/Option/Option.less +21 -0
package/src/common/Option/Option.spec.tsx +21 -0
package/src/common/Option/Option.tsx +7 -1
package/src/dateLookup/DateLookup.spec.tsx +445 -0
package/src/dateLookup/dateTrigger/DateTrigger.css +1 -32
package/src/dateLookup/dateTrigger/DateTrigger.less +4 -28
package/src/dateLookup/dateTrigger/DateTrigger.tsx +9 -5
package/src/definitionList/DefinitionList.tsx +3 -3
package/src/inputs/InputGroup.story.tsx +5 -3
package/src/listItem/ListItem.spec.tsx +10 -2
package/src/listItem/ListItem.story.tsx +11 -3
package/src/main.css +23 -32
package/src/snackbar/Snackbar.tsx +3 -3
package/src/typeahead/Typeahead.story.tsx +46 -0
package/src/typeahead/typeaheadInput/TypeaheadInput.tsx +4 -1
package/src/withNextPortal/withNextPortal.spec.tsx +24 -0
package/src/common/Option/Option.spec.js +0 -129
package/src/dateLookup/DateLookup.proptypes.spec.js +0 -28
package/src/dateLookup/DateLookup.rtl.spec.tsx +0 -199
package/src/dateLookup/DateLookup.state.spec.js +0 -76
package/src/dateLookup/DateLookup.testingLibrary.spec.js +0 -256
package/src/dateLookup/DateLookup.view.spec.js +0 -151
package/src/dateLookup/dateHeader/DateHeader.spec.js +0 -95
package/src/dateLookup/dateTrigger/DateTrigger.spec.js +0 -123
package/src/dateLookup/dayCalendar/DayCalendar.spec.js +0 -122
package/src/dateLookup/dayCalendar/table/DayCalendarTable.spec.js +0 -147
package/src/dateLookup/monthCalendar/MonthCalendar.spec.js +0 -105
package/src/dateLookup/monthCalendar/table/MonthCalendarTable.spec.js +0 -120
package/src/dateLookup/tableLink/TableLink.spec.js +0 -109
package/src/dateLookup/yearCalendar/YearCalendar.spec.js +0 -88
package/src/dateLookup/yearCalendar/table/YearCalendarTable.spec.js +0 -121
package/src/modal/Modal.spec.js +0 -197
package/src/withNextPortal/withNextPortal.spec.js +0 -22
/package/src/modal/{Modal.rtl.spec.tsx → Modal.spec.tsx} +0 -0

package/src/main.css CHANGED Viewed

@@ -1770,6 +1770,28 @@ button.np-option {
     border-radius: var(--radius-small);
   }
 }
+.np-theme-personal .np-option-additional-content {
+  margin-left: 80px;
+  margin-left: var(--size-80);
+  margin-right: 16px;
+  margin-right: var(--size-16);
+  margin-top: -10px;
+  padding-bottom: 16px;
+  padding-bottom: var(--size-16);
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+@media (max-width: 480px) {
+  .np-theme-personal .np-option-additional-content {
+    margin-left: 16px;
+    margin-left: var(--size-16);
+  }
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-option-additional-content {
+    margin-top: -3px;
+  }
+}
 .np-select-option {
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -2003,55 +2025,24 @@ button.np-option {
   padding-left: var(--size-16);
 }
 .clear-btn {
-  transition: color 0.15s ease-in-out;
-  color: #c9cbce;
-  color: var(--color-interactive-secondary);
   position: absolute;
-  top: 16px;
-  top: var(--size-16);
-  right: 16px;
-  right: var(--size-16);
-}
-[dir="rtl"] .clear-btn {
-  left: 16px;
-  left: var(--size-16);
-  right: auto;
-  right: initial;
-}
-.np-theme-personal .clear-btn {
   top: 8px;
   top: var(--size-8);
   right: 8px;
   right: var(--size-8);
 }
-[dir="rtl"] .np-theme-personal .clear-btn {
+[dir="rtl"] .clear-btn {
   left: 8px;
   left: var(--size-8);
   right: auto;
   right: initial;
 }
 .clear-btn--sm {
-  top: 8px;
-  top: var(--size-8);
-}
-.np-theme-personal .clear-btn--sm {
   top: 0;
 }
 .clear-btn--lg {
-  top: 28px;
-}
-.np-theme-personal .clear-btn--lg {
   top: 20px;
 }
-.clear-btn:not(.disabled):not(:disabled):hover,
-.clear-btn:not(.disabled):not(:disabled):focus {
-  color: #d03238;
-  color: var(--color-interactive-negative-hover);
-}
-.clear-btn:not(.disabled):not(:disabled):active {
-  color: #bf1e2c;
-  color: var(--color-interactive-negative-active);
-}
 .np-decision .decision {
   display: flex;
 }

package/src/snackbar/Snackbar.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Component, createRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import ActionButton from '../actionButton';
+import Button from '../button';
 import Body from '../body';
 import { Theme, type ThemeDark, type ThemeLight } from '../common';
 import { DirectionContext } from '../provider/direction';
@@ -110,9 +110,9 @@ export class Snackbar extends Component<SnackbarProps, SnackbarState> {
           <Body ref={this.bodyRef} as="span" className="snackbar__text">
             {text}
             {action ? (
-              <ActionButton className="snackbar__text__action" onClick={action.onClick}>
+              <Button className="snackbar__text__action" v2 size="sm" onClick={action.onClick}>
                 {action.label}
-              </ActionButton>
+              </Button>
             ) : null}
           </Body>
         </CSSTransition>

package/src/typeahead/Typeahead.story.tsx CHANGED Viewed

@@ -7,6 +7,8 @@ import { Size } from '../common';
 import { useState } from 'react';
 import { Input } from '../inputs/Input';
 import { Field } from '../field/Field';
+import Button from '../button';
+import Modal from '../modal';
 type Story = StoryObj<typeof Typeahead>;
@@ -231,3 +233,47 @@ export const Search: Story = {
     );
   },
 };
+export const AutoFocusInModal: Story = {
+  render: function Render() {
+    const [open, setOpen] = useState<boolean>(true);
+    return (
+      <>
+        <Button v2 onClick={() => setOpen(true)}>
+          Open Modal
+        </Button>
+        <Modal
+          title="Global Search"
+          body={
+            <Typeahead
+              id="typeahead"
+              name="search-input"
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus
+              size="md"
+              showSuggestions
+              showNewEntry={false}
+              addon={<SearchIcon size={24} />}
+              options={[
+                { label: 'Option 1' },
+                { label: 'Option 2' },
+                { label: 'Option 3' },
+                { label: 'Option 4' },
+              ]}
+              inputAutoComplete="off"
+              onSearch={(search) => {
+                console.log(search);
+              }}
+              onChange={(option) => {}}
+              onBlur={() => {}}
+            />
+          }
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+        />
+      </>
+    );
+  },
+};

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx CHANGED Viewed

@@ -46,7 +46,10 @@ export default class TypeaheadInput<T> extends Component<
   componentDidMount() {
     const { autoFocus } = this.props;
     if (autoFocus) {
-      this.inputRef.current?.focus();
+      // Autofocus after context code executions (e.g open Modal) is completed
+      setTimeout(() => {
+        this.inputRef.current?.focus();
+      });
     }
   }

package/src/withNextPortal/withNextPortal.spec.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import { render } from '../test-utils';
+import withNextPortalWrapper from './withNextPortal';
+describe('withNextPortalWrapper', () => {
+  it('renders component in React portal', () => {
+    type Props = Pick<
+      HTMLAttributes<HTMLButtonElement>,
+      'id' | 'children' | 'className' | 'aria-label'
+    >;
+    const RandomComponentForTest = withNextPortalWrapper((props: Props) => <span {...props} />);
+    const data: Props = {
+      'aria-label': 'Test aria-label',
+      id: 'random-component',
+      children: 'Test Children',
+    };
+    render(<RandomComponentForTest {...data} />);
+    const componentDomRef = document.body.lastChild;
+    expect(componentDomRef).toHaveAttribute('aria-label', data['aria-label']);
+    expect(componentDomRef).toHaveTextContent(data.children as string);
+    expect(componentDomRef).toHaveAttribute('id', data.id);
+  });
+});

package/src/common/Option/Option.spec.js DELETED Viewed

@@ -1,129 +0,0 @@
-import { shallow } from 'enzyme';
-import { createRef } from 'react';
-import { render, screen } from '../../test-utils';
-import Option from '.';
-describe('Option', () => {
-  let component;
-  beforeEach(() => {
-    component = shallow(<Option title="" content="" media={<span />} button={<span />} />);
-  });
-  it('does not have decision class when the flag is set to false', () => {
-    expect(hasDecisonClass()).toBe(true);
-    component.setProps({ decision: false });
-    expect(hasDecisonClass()).toBe(false);
-  });
-  it('has complex class when the flag is passed', () => {
-    expect(hasComplexClass()).toBe(false);
-    component.setProps({ complex: true });
-    expect(hasComplexClass()).toBe(true);
-  });
-  it('has disabled class when the flag is passed', () => {
-    expect(hasDisabledClass()).toBe(false);
-    component.setProps({ disabled: true });
-    expect(hasDisabledClass()).toBe(true);
-  });
-  it('has disabled attibute when the flag is passed for a button', () => {
-    expect(hasDisabledAttribute()).toBe(false);
-    component.setProps({ disabled: true });
-    expect(hasDisabledAttribute()).toBe(false);
-    component.setProps({ disabled: false, as: 'button' });
-    expect(hasDisabledAttribute()).toBe(false);
-    component.setProps({ disabled: true, as: 'button' });
-    expect(hasDisabledAttribute()).toBe(true);
-  });
-  it('passes the className it is given to the element it renders', () => {
-    expect(component.hasClass('some-class')).toBe(false);
-    component.setProps({ className: 'some-class' });
-    expect(component.hasClass('some-class')).toBe(true);
-  });
-  it('calls click handler on click', () => {
-    const onClick = jest.fn();
-    const event = { iAmAnEvent: true };
-    component.setProps({ onClick });
-    expect(onClick).not.toHaveBeenCalled();
-    component.simulate('click', event);
-    expect(onClick).toHaveBeenCalledWith(event);
-  });
-  it('has for attribute to label when prop is passed', () => {
-    expect(htmlFor()).toBeUndefined();
-    component.setProps({ htmlFor: 'some-id' });
-    expect(htmlFor()).toBe('some-id');
-  });
-  it('has passed media in the circle on the left', () => {
-    const Icon = () => <svg />;
-    component.setProps({ media: <Icon /> });
-    expect(circleContentIsElement(<Icon />)).toBe(true);
-  });
-  it('does not render the circle content with circle-inverse class when inverseMediaCircle is set to false', () => {
-    expect(circleContentHasInverseClass()).toBe(true);
-    component.setProps({ inverseMediaCircle: false });
-    expect(circleContentHasInverseClass()).toBe(false);
-  });
-  it('renders the title', () => {
-    render(<Option title="Option title" content="" media={<span />} button={<span />} />);
-    expect(() => screen.getByText('Option title')).not.toThrow();
-  });
-  it('has passed content', () => {
-    component.setProps({ content: <p>A content</p> });
-    expect(bodyHasElement(<p>A content</p>)).toBe(true);
-  });
-  it('renders as a label by default', () => {
-    expect(mainComponentTag()).toBe('label');
-  });
-  it('renders as the tag that you pass it', () => {
-    component.setProps({ as: 'a', href: 'https://example.com' });
-    expect(mainComponentTag()).toBe('a');
-  });
-  it('does not render the circle if media not passed', () => {
-    expect(circle().exists()).toBe(true);
-    component.setProps({ media: null });
-    expect(circle().exists()).toBe(false);
-  });
-  it('passes href to the underlying component if passed', () => {
-    expect(component.prop('href')).toBeFalsy();
-    component.setProps({ href: 'https://example.com' });
-    expect(component.prop('href')).toBe('https://example.com');
-  });
-  it('`ref` attribute is passed to Option and reference is created', () => {
-    const reference = createRef();
-    expect(reference.current).toBeFalsy();
-    render(<Option ref={reference} title="" content="" media={<span />} button={<span />} />);
-    expect(reference.current).toBeTruthy();
-  });
-  const hasDecisonClass = () => component.hasClass('decision');
-  const hasComplexClass = () => component.hasClass('decision-complex');
-  const hasDisabledClass = () => component.hasClass('disabled');
-  const hasDisabledAttribute = () => component.prop('disabled');
-  const htmlFor = () => component.prop('htmlFor');
-  const circle = () => component.find('.media-left');
-  const circleContent = () => component.find('.media-left .circle');
-  const circleContentHasInverseClass = () => circleContent().hasClass('circle-inverse');
-  const circleContentIsElement = (element) => circleContent().childAt(0).matchesElement(element);
-  const mainComponentTag = () => component.name();
-  const bodyHasElement = (element) =>
-    component.find('.media-body').containsMatchingElement(element);
-});

package/src/dateLookup/DateLookup.proptypes.spec.js DELETED Viewed

@@ -1,28 +0,0 @@
-import { render, mockMatchMedia } from '../test-utils';
-import DateLookup from '.';
-mockMatchMedia();
-// This test suite could become redundant
-// once we refactor the DateLookup component to TypeScript
-describe('DateLookup propTypes', () => {
-  describe('when the value prop is set to null', () => {
-    it('renders without prop type warnings in the console', () => {
-      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-      render(<DateLookup value={null} onChange={jest.fn()} />);
-      // eslint-disable-next-line no-console
-      expect(console.error).not.toHaveBeenCalledWith(
-        expect.stringContaining('Warning: Failed %s type'),
-        'prop',
-        'The prop `value` is marked as required in `DateLookup`, but its value is `null`.',
-        expect.anything(),
-      );
-      consoleSpy.mockRestore();
-    });
-  });
-});

package/src/dateLookup/DateLookup.rtl.spec.tsx DELETED Viewed

@@ -1,199 +0,0 @@
-import { Field } from '../field/Field';
-import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
-import DateLookup, { DateLookupProps } from './DateLookup';
-import { act } from 'react';
-const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
-mockMatchMedia();
-mockResizeObserver();
-const initialValue = new Date(2000, 0, 1);
-describe('DateLookup', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-  afterEach(async () => {
-    await jest.runOnlyPendingTimersAsync();
-    jest.useRealTimers();
-    jest.clearAllMocks();
-  });
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Date of birth">
-        <DateLookup value={initialValue} onChange={() => {}} />
-      </Field>,
-    );
-    const button = screen.getByRole('button', { name: /^Date of birth/ });
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveAttribute('aria-haspopup');
-  });
-  it.each([' ', '{Enter}', '{ArrowDown}', '{ArrowUp}', '{ArrowRight}', '{ArrowLeft}'])(
-    "opens with '%s' and closes with '{Escape}'",
-    async (text) => {
-      render(<DateLookup value={initialValue} onChange={() => {}} />);
-      await user.tab();
-      await user.keyboard(text);
-      expect(screen.getByRole('button', { name: /next/iu })).toBeInTheDocument();
-      await user.keyboard('{Escape}');
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      expect(screen.queryByRole('button', { name: /next/iu })).not.toBeInTheDocument();
-    },
-  );
-  const setupAndOpenWithMouse = async (props: Partial<DateLookupProps> = {}) => {
-    const view = render(<DateLookup value={initialValue} onChange={() => {}} {...props} />);
-    await user.click(screen.getByRole('button'));
-    await act(async () => {
-      await jest.runOnlyPendingTimersAsync();
-    });
-    return view;
-  };
-  it('opens and closes with mouse', async () => {
-    await setupAndOpenWithMouse();
-    expect(screen.getByRole('button', { name: /next/iu })).toBeInTheDocument();
-    const dimmerElement = screen.getByRole('dialog').parentElement?.parentElement;
-    if (dimmerElement != null) {
-      await user.click(dimmerElement);
-    }
-    await act(async () => {
-      await jest.runOnlyPendingTimersAsync();
-    });
-    expect(screen.queryByRole('button', { name: /next/iu })).not.toBeInTheDocument();
-  });
-  describe('in day view', () => {
-    it.each([
-      ['{ArrowLeft}', -1],
-      ['{ArrowRight}', +1],
-      ['{ArrowUp}', -7],
-      ['{ArrowDown}', +7],
-    ])("handles '%s' to step %d day(s)", async (text, step) => {
-      const handleChange = jest.fn();
-      await setupAndOpenWithMouse({ onChange: handleChange });
-      expect(handleChange).not.toHaveBeenCalled();
-      await user.keyboard(text);
-      const value = new Date(initialValue);
-      value.setDate(initialValue.getDate() + step);
-      expect(handleChange).toHaveBeenCalledWith(value);
-      await user.keyboard('{Escape}');
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      expect(handleChange).toHaveBeenCalledWith(initialValue);
-    });
-  });
-  describe('in year view', () => {
-    it.each([
-      ['{ArrowLeft}', -1],
-      ['{ArrowRight}', +1],
-      ['{ArrowUp}', -4],
-      ['{ArrowDown}', +4],
-    ])("handles '%s' to step %d year(s)", async (text, step) => {
-      const handleChange = jest.fn();
-      await setupAndOpenWithMouse({ onChange: handleChange });
-      await user.click(screen.getByRole('button', { name: /year view/iu }));
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      expect(handleChange).not.toHaveBeenCalled();
-      await user.keyboard(text);
-      const value = new Date(initialValue);
-      value.setFullYear(initialValue.getFullYear() + step);
-      expect(handleChange).toHaveBeenCalledWith(value);
-      await user.keyboard('{Escape}');
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      expect(handleChange).toHaveBeenCalledWith(initialValue);
-    });
-  });
-  describe('in month view', () => {
-    it.each([
-      ['{ArrowLeft}', -1],
-      ['{ArrowRight}', +1],
-      ['{ArrowUp}', -4],
-      ['{ArrowDown}', +4],
-    ])("handles '%s' to step %d month(s)", async (text, step) => {
-      const handleChange = jest.fn();
-      await setupAndOpenWithMouse({ onChange: handleChange });
-      await user.click(screen.getByRole('button', { name: /year view/iu }));
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      await user.keyboard(' ');
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      expect(handleChange).not.toHaveBeenCalled();
-      await user.keyboard(text);
-      const value = new Date(initialValue);
-      value.setMonth(initialValue.getMonth() + step);
-      expect(handleChange).toHaveBeenCalledWith(value);
-      await user.keyboard('{Escape}');
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      expect(handleChange).toHaveBeenCalledWith(initialValue);
-    });
-  });
-  it('limits min value', async () => {
-    const min = new Date(initialValue);
-    min.setDate(min.getDate() - 1);
-    const handleChange = jest.fn();
-    await setupAndOpenWithMouse({ min, onChange: handleChange });
-    await user.keyboard('{ArrowLeft}{ArrowLeft}');
-    expect(handleChange).toHaveBeenCalledWith(min);
-  });
-  it('limits max value', async () => {
-    const max = new Date(initialValue);
-    max.setDate(max.getDate() + 1);
-    const handleChange = jest.fn();
-    await setupAndOpenWithMouse({ max, onChange: handleChange });
-    await user.keyboard('{ArrowRight}{ArrowRight}');
-    expect(handleChange).toHaveBeenCalledWith(max);
-  });
-});

package/src/dateLookup/DateLookup.state.spec.js DELETED Viewed

@@ -1,76 +0,0 @@
-import { shallow } from 'enzyme';
-import { useIntl } from 'react-intl';
-import { DateLookupWithoutInputAttributes as DateLookup } from './DateLookup';
-jest.mock('react-intl');
-// Tests for getDerivedStateFromProps results
-describe('DateLookup state', () => {
-  let component;
-  let defaultProps;
-  let initialValue;
-  const defaultState = { selectedDate: null, min: null, max: null };
-  beforeEach(() => {
-    initialValue = new Date();
-    defaultProps = { onChange: jest.fn(), value: initialValue };
-    useIntl.mockReturnValue({ locale: 'en-GB' });
-    component = shallow(<DateLookup {...defaultProps} />);
-  });
-  it('sets correct defaults', () => {
-    const { selectedDate, min, max, viewMonth, viewYear, open, mode } = component.instance().state;
-    expect(selectedDate).not.toBeNull();
-    expect(min).toBeNull();
-    expect(max).toBeNull();
-    expect(viewMonth).not.toBeNull();
-    expect(viewYear).not.toBeNull();
-    expect(open).toBe(false);
-    expect(mode).toBe('day');
-  });
-  it('does not update when date props did not change', () => {
-    const props = { open: true };
-    expect(DateLookup.getDerivedStateFromProps(props, defaultState)).toBeNull();
-  });
-  it('updates selectedDate on props value change', () => {
-    const props = { value: new Date(2018, 11, 27) };
-    const newState = DateLookup.getDerivedStateFromProps(props, defaultState);
-    expect(Number(newState.selectedDate)).toBe(Number(new Date(2018, 11, 27)));
-  });
-  it('sets date values to midnight', () => {
-    const props = {
-      value: new Date(2018, 11, 27, 15, 23),
-      min: new Date(2018, 10, 27, 22, 23),
-      max: new Date(2018, 11, 28, 0, 30),
-    };
-    const newState = DateLookup.getDerivedStateFromProps(props, defaultState);
-    expect(Number(newState.selectedDate)).toBe(Number(new Date(2018, 11, 27, 0, 0)));
-    expect(Number(newState.min)).toBe(Number(new Date(2018, 10, 27, 0, 0)));
-    expect(Number(newState.max)).toBe(Number(new Date(2018, 11, 28, 0, 0)));
-  });
-  it('calls onChange with min when it is < min', () => {
-    const onChange = jest.fn();
-    const props = { value: new Date(2018, 11, 27), min: new Date(2018, 11, 28), onChange };
-    DateLookup.getDerivedStateFromProps(props, defaultState);
-    expect(onChange).toHaveBeenCalledWith(new Date(2018, 11, 28));
-  });
-  it('calls onChange with max when it is > min', () => {
-    const onChange = jest.fn();
-    const props = { value: new Date(2018, 11, 27), max: new Date(2018, 10, 1), onChange };
-    DateLookup.getDerivedStateFromProps(props, defaultState);
-    expect(onChange).toHaveBeenCalledWith(new Date(2018, 10, 1));
-  });
-  it('updates viewMonth and viewYear to date within min/max on Clear', () => {
-    const props = { value: null, min: new Date(2018, 11, 26), max: new Date(2018, 11, 26) };
-    const newState = DateLookup.getDerivedStateFromProps(props, defaultState);
-    expect(newState.viewMonth).toBe(11);
-    expect(newState.viewYear).toBe(2018);
-  });
-});