@transferwise/components 46.34.0 → 46.35.0

package/src/common/panel/Panel.tsx

@@ -38,109 +38,107 @@ export type PanelProps = PropsWithChildren<{
 }> &
   HTMLAttributes<HTMLDivElement>;
 
-const Panel = forwardRef<HTMLDivElement, PanelProps>(
-  (
-    {
-      arrow = false,
-      flip = true,
-      altAxis = false,
-      children,
-      open = false,
-      onClose,
-      position = Position.BOTTOM,
-      anchorRef,
-      anchorWidth = false,
-      ...rest
-    }: PanelProps,
-    reference,
-  ) => {
-    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
-    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
+  {
+    arrow = false,
+    flip = true,
+    altAxis = false,
+    children,
+    open = false,
+    onClose,
+    position = Position.BOTTOM,
+    anchorRef,
+    anchorWidth = false,
+    ...rest
+  }: PanelProps,
+  reference,
+) {
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-    const modifiers = [];
+  const modifiers = [];
 
-    if (altAxis) {
-      modifiers.push({
-        // https://popper.js.org/docs/v2/modifiers/prevent-overflow
-        name: 'preventOverflow',
-        options: {
-          altAxis: true,
-          tether: false,
-        },
-      });
-    }
+  if (altAxis) {
+    modifiers.push({
+      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
+      name: 'preventOverflow',
+      options: {
+        altAxis: true,
+        tether: false,
+      },
+    });
+  }
 
-    if (arrow) {
-      modifiers.push({
-        name: 'arrow',
-        options: {
-          element: arrowElement,
-          options: {
-            padding: 8, // 8px from the edges of the popper
-          },
-        },
-      });
-      // This lets you displace a popper element from its reference element.
-      modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });
-    }
-    if (flip && fallbackPlacements[position]) {
-      modifiers.push({
-        name: 'flip',
+  if (arrow) {
+    modifiers.push({
+      name: 'arrow',
+      options: {
+        element: arrowElement,
         options: {
-          fallbackPlacements: fallbackPlacements[position],
+          padding: 8, // 8px from the edges of the popper
         },
-      });
-    }
-
-    const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {
-      placement: position,
-      modifiers,
+      },
     });
+    // This lets you displace a popper element from its reference element.
+    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });
+  }
+  if (flip && fallbackPlacements[position]) {
+    modifiers.push({
+      name: 'flip',
+      options: {
+        fallbackPlacements: fallbackPlacements[position],
+      },
+    });
+  }
+
+  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {
+    placement: position,
+    modifiers,
+  });
 
-    // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
-    // it is most simple just to always position before opening
-    useEffect(() => {
-      if (open && forceUpdate) {
-        forceUpdate();
-      }
-    }, [open]);
+  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
+  // it is most simple just to always position before opening
+  useEffect(() => {
+    if (open && forceUpdate) {
+      forceUpdate();
+    }
+  }, [open]);
 
-    const contentStyle: CSSProperties = {
-      ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),
-    };
+  const contentStyle: CSSProperties = {
+    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),
+  };
 
-    return (
-      <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>
+  return (
+    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>
+      <div
+        {...rest}
+        ref={setPopperElement}
+        role="dialog"
+        // eslint-disable-next-line react/forbid-dom-props
+        style={{ ...styles.popper }}
+        {...attributes.popper}
+        className={classnames('np-panel', { 'np-panel--open': open }, rest.className)}
+      >
         <div
-          {...rest}
-          ref={setPopperElement}
-          role="dialog"
-          // eslint-disable-next-line react/forbid-dom-props
-          style={{ ...styles.popper }}
-          {...attributes.popper}
-          className={classnames('np-panel', { 'np-panel--open': open }, rest['className'])}
+          ref={reference}
+          /* eslint-disable-next-line react/forbid-dom-props */
+          style={contentStyle}
+          className={classnames('np-panel__content')}
         >
-          <div
-            ref={reference}
-            /* eslint-disable-next-line react/forbid-dom-props */
-            style={contentStyle}
-            className={classnames('np-panel__content')}
-          >
-            {children}
-            {/* Arrow has to stay inside content to get the same animations as the "dialog" and to get hidden when panel is closed. */}
-            {arrow && (
-              <div
-                ref={setArrowElement}
-                className={classnames('np-panel__arrow')}
-                // eslint-disable-next-line react/forbid-dom-props
-                style={styles.arrow}
-              />
-            )}
-          </div>
+          {children}
+          {/* Arrow has to stay inside content to get the same animations as the "dialog" and to get hidden when panel is closed. */}
+          {arrow && (
+            <div
+              ref={setArrowElement}
+              className={classnames('np-panel__arrow')}
+              // eslint-disable-next-line react/forbid-dom-props
+              style={styles.arrow}
+            />
+          )}
         </div>
-      </Dimmer>
-    );
-  },
-);
+      </div>
+    </Dimmer>
+  );
+});
 
 export default Panel;

package/src/common/responsivePanel/ResponsivePanel.tsx

@@ -1,5 +1,3 @@
-import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
 import { forwardRef } from 'react';
 
 import { Position } from '..';
@@ -8,44 +6,42 @@ import { useLayout } from '../hooks';
 import Panel from '../panel';
 import { PanelProps } from '../panel/Panel';
 
-const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(
-  (
-    {
-      anchorRef,
-      arrow = false,
-      flip = true,
-      children,
-      className = undefined,
-      onClose,
-      open = false,
-      position = Position.BOTTOM,
-    }: PanelProps,
-    reference,
-  ) => {
-    const { isMobile } = useLayout();
-    if (isMobile) {
-      return (
-        <BottomSheet key="bottomSheet" open={open} className={className} onClose={onClose}>
-          {children}
-        </BottomSheet>
-      );
-    }
+const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(
+  {
+    anchorRef,
+    arrow = false,
+    flip = true,
+    children,
+    className = undefined,
+    onClose,
+    open = false,
+    position = Position.BOTTOM,
+  }: PanelProps,
+  reference,
+) {
+  const { isMobile } = useLayout();
+  if (isMobile) {
     return (
-      <Panel
-        key="panel"
-        ref={reference}
-        flip={flip}
-        arrow={arrow}
-        open={open}
-        position={position}
-        anchorRef={anchorRef}
-        className={className}
-        onClose={onClose}
-      >
+      <BottomSheet key="bottomSheet" open={open} className={className} onClose={onClose}>
         {children}
-      </Panel>
+      </BottomSheet>
     );
-  },
-);
+  }
+  return (
+    <Panel
+      key="panel"
+      ref={reference}
+      flip={flip}
+      arrow={arrow}
+      open={open}
+      position={position}
+      anchorRef={anchorRef}
+      className={className}
+      onClose={onClose}
+    >
+      {children}
+    </Panel>
+  );
+});
 
 export default ResponsivePanel;

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

@@ -1,20 +1,196 @@
 import { Field } from '../field/Field';
-import { mockMatchMedia, mockResizeObserver, render, screen } from '../test-utils';
-import DateLookup from './DateLookup';
+import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
+import DateLookup, { DateLookupProps } from './DateLookup';
+
+import { act } from 'react';
 
 mockMatchMedia();
 mockResizeObserver();
 
-const now = new Date();
+const initialValue = new Date(2000, 0, 1);
 
 describe('DateLookup', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(async () => {
+    await jest.runOnlyPendingTimersAsync();
+    jest.useRealTimers();
+  });
+
   it('supports `Field` for labeling', () => {
     render(
       <Field label="Date of birth">
-        <DateLookup value={now} onChange={() => {}} />
+        <DateLookup value={initialValue} onChange={() => {}} />
       </Field>,
     );
     // TODO: Replace with `.toHaveAttribute('aria-haspopup')`
-    expect(screen.getByLabelText('Date of birth')).toHaveTextContent(now.getFullYear().toString());
+    expect(screen.getByLabelText('Date of birth')).toHaveTextContent(
+      initialValue.getFullYear().toString(),
+    );
+  });
+
+  it.each([' ', '{Enter}', '{ArrowDown}', '{ArrowUp}', '{ArrowRight}', '{ArrowLeft}'])(
+    "opens with '%s' and closes with '{Escape}'",
+    async (text) => {
+      render(<DateLookup value={initialValue} onChange={() => {}} />);
+
+      userEvent.tab();
+      userEvent.keyboard(text);
+
+      expect(screen.getByRole('button', { name: /next/iu })).toBeInTheDocument();
+
+      userEvent.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} />);
+
+    userEvent.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) {
+      userEvent.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();
+
+      userEvent.keyboard(text);
+
+      const value = new Date(initialValue);
+      value.setDate(initialValue.getDate() + step);
+      expect(handleChange).toHaveBeenCalledWith(value);
+
+      userEvent.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 });
+
+      userEvent.click(screen.getByRole('button', { name: /year view/iu }));
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+
+      expect(handleChange).not.toHaveBeenCalled();
+
+      userEvent.keyboard(text);
+
+      const value = new Date(initialValue);
+      value.setFullYear(initialValue.getFullYear() + step);
+      expect(handleChange).toHaveBeenCalledWith(value);
+
+      userEvent.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 });
+
+      userEvent.click(screen.getByRole('button', { name: /year view/iu }));
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+      userEvent.keyboard(' ');
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+
+      expect(handleChange).not.toHaveBeenCalled();
+
+      userEvent.keyboard(text);
+
+      const value = new Date(initialValue);
+      value.setMonth(initialValue.getMonth() + step);
+      expect(handleChange).toHaveBeenCalledWith(value);
+
+      userEvent.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 });
+
+    userEvent.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 });
+
+    userEvent.keyboard('{ArrowRight}{ArrowRight}');
+
+    expect(handleChange).toHaveBeenCalledWith(max);
   });
 });