@transferwise/components 0.0.0-experimental-26e03bf → 0.0.0-experimental-c82d979

package/src/dateLookup/DateLookup.tsx

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
 import { createRef, PureComponent, KeyboardEvent } from 'react';
-import { Breakpoint } from '@transferwise/neptune-tokens';
-
+import CalendarInput from '../calendarInput';
 import {
   Size,
   MonthFormat,
@@ -10,15 +9,10 @@ import {
   type SizeMedium,
   type SizeLarge,
 } from '../common';
-import { isWithinRange, moveToWithinRange, returnDateView } from '../common/dateUtils';
 import ResponsivePanel from '../common/responsivePanel';
 import { WithInputAttributesProps, withInputAttributes } from '../inputs/contexts';
 import { OverlayIdProvider } from '../provider/overlay/OverlayIdProvider';
 import DateTrigger from './dateTrigger';
-import DayCalendar from './dayCalendar';
-import { getStartOfDay } from './getStartOfDay';
-import MonthCalendar from './monthCalendar';
-import YearCalendar from './yearCalendar';
 
 export interface DateLookupProps {
   id?: string;
@@ -40,15 +34,8 @@ export interface DateLookupProps {
 type DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;
 
 interface DateLookupState {
-  selectedDate: Date | null;
   originalDate: Date | null;
-  min: Date | null;
-  max: Date | null;
-  viewMonth: number;
-  viewYear: number;
   open: boolean;
-  mode: 'day' | 'month' | 'year';
-  isMobile: boolean;
 }
 
 class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {
@@ -68,64 +55,29 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
   } satisfies Partial<DateLookupPropsWithInputAttributes>;
 
   element = createRef<HTMLDivElement>();
-  dropdown = createRef<HTMLDivElement>();
 
   constructor(props: DateLookup['props']) {
     super(props);
-    const dateView = returnDateView(props.value, props.min, props.max);
     this.state = {
-      selectedDate: getStartOfDay(props.value),
       originalDate: null,
-      min: getStartOfDay(props.min),
-      max: getStartOfDay(props.max),
-      viewMonth: dateView.getMonth(),
-      viewYear: dateView.getFullYear(),
       open: false,
-      mode: 'day',
-      isMobile: false,
     };
   }
 
-  static getDerivedStateFromProps(props: DateLookup['props'], state: DateLookupState) {
-    const propsSelected = getStartOfDay(props.value);
-    const propsMin = getStartOfDay(props.min);
-    const propsMax = getStartOfDay(props.max);
-    const hasSelectedChanged = state.selectedDate?.getTime() !== propsSelected?.getTime();
-    const hasMinChanged = state.min?.getTime() !== propsMin?.getTime();
-    const hasMaxChanged = state.max?.getTime() !== propsMax?.getTime();
-    if (hasSelectedChanged || hasMinChanged || hasMaxChanged) {
-      const selectedDate = hasSelectedChanged ? propsSelected : state.selectedDate;
-      const min = hasMinChanged ? propsMin : state.min;
-      const max = hasMaxChanged ? propsMax : state.max;
-      if (selectedDate && !isWithinRange(selectedDate, min, max)) {
-        props.onChange(moveToWithinRange(selectedDate, min, max));
-        return null;
-      }
-      const viewDateThatIsWithinRange: Date = returnDateView(selectedDate, min, max);
-      const viewMonth = viewDateThatIsWithinRange.getMonth();
-      const viewYear = viewDateThatIsWithinRange.getFullYear();
-      return { selectedDate, min, max, viewMonth, viewYear };
-    }
-    return null;
-  }
-
   componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {
     if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {
       this.focusOn('.active');
     }
-    const mediaQuery = window.matchMedia(`(max-width: ${Breakpoint.SMALL}px)`);
-    this.setState({ isMobile: mediaQuery.matches });
   }
 
   componentWillUnmount() {
-    // Prevents memory leak by cleaning state.
     this.setState = () => {};
   }
 
   open = () => {
     const { onFocus } = this.props;
 
-    this.setState({ open: true, mode: 'day' });
+    this.setState({ open: true });
     if (onFocus) {
       onFocus();
     }
@@ -151,36 +103,13 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     const { open, originalDate } = this.state;
     switch (event.key) {
       case 'ArrowLeft':
-        if (open) {
-          this.adjustDate(-1, -1, -1);
-        } else {
-          this.open();
-        }
-        event.preventDefault();
-        break;
       case 'ArrowUp':
-        if (open) {
-          this.adjustDate(-7, -4, -4);
-        } else {
-          this.open();
-        }
-        event.preventDefault();
-        break;
       case 'ArrowRight':
-        if (open) {
-          this.adjustDate(1, 1, 1);
-        } else {
-          this.open();
-        }
-        event.preventDefault();
-        break;
       case 'ArrowDown':
-        if (open) {
-          this.adjustDate(7, 4, 4);
-        } else {
+        if (!open) {
           this.open();
+          event.preventDefault();
         }
-        event.preventDefault();
         break;
       case 'Escape':
         if (originalDate !== null) {
@@ -194,27 +123,6 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     }
   };
 
-  adjustDate = (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {
-    const { selectedDate, min, max, mode, originalDate } = this.state;
-    if (originalDate === null) {
-      this.setState({ originalDate: selectedDate });
-    }
-    let date: Date | null;
-    if (selectedDate) {
-      date = new Date(
-        mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),
-        mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),
-        mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),
-      );
-    } else {
-      date = getStartOfDay(new Date());
-    }
-    date &&= moveToWithinRange(date, min, max);
-    if (date?.getTime() !== selectedDate?.getTime()) {
-      this.props.onChange(date);
-    }
-  };
-
   focusOn = (preferredElement: string, fallbackElement?: string) => {
     const element = this.element.current?.querySelector(preferredElement) as HTMLElement | null;
     if (element) {
@@ -224,71 +132,37 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     }
   };
 
-  switchMode = (mode: 'day' | 'month' | 'year') => {
-    this.setState({ mode }, () => {
-      this.focusOn('.active', '.today');
-    });
-  };
-
-  switchToDays = () => this.switchMode('day');
-
-  switchToMonths = () => this.switchMode('month');
-
-  switchToYears = () => this.switchMode('year');
-
-  handleSelectedDateUpdate = (selectedDate: Date) => {
-    this.setState({ selectedDate }, () => {
-      this.props.onChange(selectedDate);
-      this.close();
-      this.focusOn('.btn');
-    });
+  handleDateChange = (date: Date | null) => {
+    this.setState(
+      (state) => {
+        const originalDate = state.originalDate ?? this.props.value;
+        return { originalDate };
+      },
+      () => {
+        this.props.onChange(date);
+      },
+    );
   };
 
-  handleViewDateUpdate = ({ month = this.state.viewMonth, year = this.state.viewYear }) => {
-    this.setState({ viewMonth: month, viewYear: year });
+  handleDateSelect = (date: Date) => {
+    this.props.onChange(date);
+    this.close();
+    this.focusOn('.btn');
   };
 
   getCalendar = () => {
-    const { selectedDate, min, max, viewMonth, viewYear, mode, isMobile } = this.state;
-    const { placeholder, monthFormat } = this.props;
+    const { value, min, max, monthFormat, placeholder } = this.props;
     return (
-      <div className={clsx({ 'p-a-1': !isMobile })}>
-        {mode === 'day' && (
-          <DayCalendar
-            selectedDate={selectedDate}
-            min={min}
-            max={max}
-            viewMonth={viewMonth}
-            viewYear={viewYear}
-            monthFormat={monthFormat}
-            onSelect={this.handleSelectedDateUpdate}
-            onLabelClick={this.switchToYears}
-            onViewDateUpdate={this.handleViewDateUpdate}
-          />
-        )}
-        {mode === 'month' && (
-          <MonthCalendar
-            selectedDate={selectedDate}
-            min={min}
-            max={max}
-            viewYear={viewYear}
-            placeholder={placeholder}
-            onSelect={this.switchToDays}
-            onLabelClick={this.switchToYears}
-            onViewDateUpdate={this.handleViewDateUpdate}
-          />
-        )}
-        {mode === 'year' && (
-          <YearCalendar
-            selectedDate={selectedDate}
-            min={min}
-            max={max}
-            viewYear={viewYear}
-            placeholder={placeholder}
-            onSelect={this.switchToMonths}
-            onViewDateUpdate={this.handleViewDateUpdate}
-          />
-        )}
+      <div className="p-a-1">
+        <CalendarInput
+          value={value}
+          min={min}
+          max={max}
+          monthFormat={monthFormat}
+          placeholder={placeholder}
+          onChange={this.handleDateChange}
+          onSelect={this.handleDateSelect}
+        />
       </div>
     );
   };
@@ -299,7 +173,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
   };
 
   render() {
-    const { selectedDate, open } = this.state;
+    const { open } = this.state;
 
     const {
       inputAttributes,
@@ -329,7 +203,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
           <DateTrigger
             id={id}
             ariaLabelledBy={ariaLabelledBy}
-            selectedDate={selectedDate}
+            selectedDate={value}
             size={size}
             placeholder={placeholder}
             label={label}

package/src/index.ts

@@ -29,6 +29,7 @@ export type {
 export type { BottomSheetProps } from './common/bottomSheet';
 export type { DateInputProps } from './dateInput';
 export type { DateLookupProps } from './dateLookup';
+export type { CalendarInputProps } from './calendarInput';
 export type { DecisionProps } from './decision/Decision';
 export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
 export type { DimmerProps } from './dimmer';
@@ -163,6 +164,7 @@ export { default as CriticalCommsBanner } from './criticalBanner';
 export type { CriticalCommsBannerProps } from './criticalBanner';
 export { default as DateInput } from './dateInput';
 export { default as DateLookup } from './dateLookup';
+export { default as CalendarInput } from './calendarInput';
 export { default as Decision } from './decision';
 export { default as DefinitionList } from './definitionList';
 export { default as Dimmer } from './dimmer';

package/src/main.css

@@ -27180,6 +27180,103 @@ a[data-toggle="tooltip"] {
   scale: -1 1;
 }
 
+.tw-date-lookup-calendar {
+  min-width: 300px;
+  text-align: center;
+  table-layout: fixed;
+  border: none;
+  background-color: inherit;
+}
+
+.tw-date-lookup-calendar thead {
+  background-color: transparent;
+  background-color: initial;
+}
+
+.tw-date-lookup-calendar > tbody > tr > td.weekend button {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+
+.tw-date-lookup-calendar > tbody > tr > td {
+  border: none;
+  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 {
+  width: 100%;
+  padding: 4px 0;
+  padding: var(--size-4) 0;
+  color: #0097c7;
+  color: var(--color-content-accent);
+  border: transparent;
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  background-color: transparent;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+
+@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 {
+  height: 40px;
+  height: var(--size-40);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  line-height: 40px;
+  line-height: var(--size-40);
+  width: 40px;
+  width: var(--size-40);
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}
+
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
+.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
+  background-color: var(--color-background-screen-hover);
+}
+
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
+  background-color: var(--color-interactive-primary);
+  color: var(--color-interactive-contrast);
+}
+
+.tw-date-lookup-calendar abbr {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.tw-date-lookup-header-current-container {
+  display: inline;
+}
+
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;
@@ -28317,112 +28414,6 @@ button.np-option {
   width: 400px;
 }
 
-.tw-date-lookup-calendar {
-  min-width: 300px;
-  text-align: center;
-  table-layout: fixed;
-  background-color: inherit;
-}
-
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-
-.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 {
-  width: 100%;
-  padding: 4px 0;
-  padding: var(--size-4) 0;
-  color: #0097c7;
-  color: var(--color-content-accent);
-  border: transparent;
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  background-color: transparent;
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-
-@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 {
-  height: 40px;
-  height: var(--size-40);
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  line-height: 40px;
-  line-height: var(--size-40);
-  width: 40px;
-  width: var(--size-40);
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 4px;
-}
-
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
-.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
-  background-color: var(--color-background-screen-hover);
-}
-
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
-  background-color: var(--color-interactive-primary);
-  color: var(--color-interactive-contrast);
-}
-
-.tw-date-lookup-calendar abbr {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.tw-date-lookup-header-current-container {
-  display: inline;
-}
-
-.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: transparent;
-  background-color: initial;
-}
-
-.np-theme-personal.tw-date-lookup-menu td,
-.np-theme-personal .tw-date-lookup-menu td {
-  border: none;
-}
-
 .np-date-trigger {
   overflow: hidden;
   text-overflow: ellipsis;

package/src/main.less

@@ -16,6 +16,7 @@
 @import "./body/Body.less";
 @import "./button/LegacyButton.less";
 @import "./button/Button.less";
+@import "./calendarInput/CalendarInput.less";
 @import "./card/Card.less";
 @import "./carousel/Carousel.less";
 @import "./checkboxButton/CheckboxButton.less";

package/src/prompt/InfoPrompt/InfoPrompt.story.tsx

@@ -6,7 +6,6 @@ import { Confetti, GiftBox, Star, Suitcase, Briefcase, Plane } from '@transferwi
 import { lorem10, lorem20 } from '../../test-utils';
 import Button from '../../button';
 import Title from '../../title';
-import Link from '../../link';
 import { InfoPrompt, InfoPromptProps, InfoPromptMedia } from './InfoPrompt';
 
 const withComponentGrid =
@@ -233,47 +232,6 @@ export const WithAction: StoryObj<InfoPromptProps> = {
   ),
 };
 
-/**
- * The `description` prop accepts rich content (ReactNode), allowing inline interactive elements
- * such as links that can trigger a popover.
- *
- * **Important**: If the description contains an interactive element, do not use the `action` prop
- * simultaneously — InfoPrompt should have at most one interaction.
- */
-export const WithRichDescription: StoryObj<InfoPromptProps> = {
-  render: (args: InfoPromptProps) => (
-    <>
-      <InfoPrompt
-        {...args}
-        sentiment="neutral"
-        description={
-          <>
-            Your transfer is subject to our{' '}
-            <Link href="/fees" target="_blank" type="link-default">
-              fee schedule
-            </Link>
-            .
-          </>
-        }
-      />
-      <InfoPrompt
-        {...args}
-        sentiment="warning"
-        title="Verification Required"
-        description={
-          <>
-            Please{' '}
-            <Link href="/verify" type="link-default">
-              verify your identity
-            </Link>{' '}
-            to continue sending money.
-          </>
-        }
-      />
-    </>
-  ),
-};
-
 /**
  * When `onDismiss` is provided, a close button appears allowing users to dismiss the prompt.
  * Note: The component itself is not automatically removed - you must handle state management.

package/src/prompt/InfoPrompt/InfoPrompt.test.tsx

@@ -1,5 +1,4 @@
-import { act, fireEvent, mockMatchMedia, render, screen, userEvent } from '../../test-utils';
-import { WDS_LIVE_REGION_DELAY_MS } from '../../common/constants';
+import { fireEvent, mockMatchMedia, render, screen, userEvent, waitFor } from '../../test-utils';
 import { resetLiveRegionAnnouncementQueue } from '../../common/liveRegion/LiveRegion';
 import { InfoPrompt, InfoPromptProps } from './InfoPrompt';
 
@@ -16,74 +15,11 @@ describe('InfoPrompt', () => {
     resetLiveRegionAnnouncementQueue();
   });
 
-  afterEach(() => {
-    jest.clearAllTimers();
-    jest.useRealTimers();
-  });
-
   it('renders description', () => {
     render(<InfoPrompt {...defaultProps} />);
     expect(screen.getByText('Prompt description')).toBeInTheDocument();
   });
 
-  it('renders rich-content description (ReactNode)', () => {
-    render(
-      <InfoPrompt
-        description={
-          <>
-            See our <a href="/fees">fee schedule</a>.
-          </>
-        }
-      />,
-    );
-    expect(screen.getByRole('link', { name: 'fee schedule', hidden: true })).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'fee schedule', hidden: true })).toHaveAttribute(
-      'href',
-      '/fees',
-    );
-  });
-
-  it('re-announces when rich-content description text changes', () => {
-    jest.useFakeTimers();
-
-    const { rerender } = render(
-      <InfoPrompt
-        description={
-          <>
-            See our <a href="/fees">fee schedule</a>.
-          </>
-        }
-      />,
-    );
-
-    act(() => {
-      jest.advanceTimersByTime(WDS_LIVE_REGION_DELAY_MS);
-    });
-
-    const liveRegion = screen.getByRole('status');
-    expect(liveRegion.firstElementChild).not.toHaveAttribute('aria-hidden');
-    expect(liveRegion).toHaveTextContent('See our fee schedule.');
-
-    rerender(
-      <InfoPrompt
-        description={
-          <>
-            Read the updated <a href="/fees">pricing guide</a>.
-          </>
-        }
-      />,
-    );
-
-    expect(liveRegion.firstElementChild).toHaveAttribute('aria-hidden', 'true');
-
-    act(() => {
-      jest.advanceTimersByTime(WDS_LIVE_REGION_DELAY_MS);
-    });
-
-    expect(liveRegion.firstElementChild).not.toHaveAttribute('aria-hidden');
-    expect(liveRegion).toHaveTextContent('Read the updated pricing guide.');
-  });
-
   it('renders title when provided', () => {
     render(<InfoPrompt {...defaultProps} title="Test Title" />);
     expect(screen.getByText('Test Title')).toBeInTheDocument();