@transferwise/components 46.12.0 → 46.14.0

package/src/dateInput/DateInput.story.tsx

@@ -1,9 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
+import * as React from 'react';
 
-import { DateInput, Info, InlineAlert, Title, Typography } from '..';
+import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
 import { lorem10, storyConfig } from '../test-utils';
 
+import { DateInputProps } from './DateInput';
+
 export default {
   component: DateInput,
   title: 'Forms/DateInput',
@@ -14,17 +17,15 @@ export default {
     yearLabel: 'Year input',
     yearAutoComplete: 'bday-year',
     selectProps: {
-      buttonProps: {
-        'aria-label': 'Select month',
-      },
+      placeholder: 'Month',
     },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof DateInput>;
 
-type Story = StoryObj<typeof DateInput>;
+type Story = StoryObj<DateInputProps>;
 
-export const Basic: Story = {};
+export const Basic: StoryObj = {};
 
 Basic.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
@@ -65,8 +66,10 @@ export const WithLabel: Story = {
           label (rare use case)
         </Title>
         <fieldset>
-          <legend className="control-label">Expiry Date</legend>
-          <DateInput {...args} />
+          <legend className="control-label">
+            Expiry Date for Credit Card (example of MONTH_YEAR mode)
+          </legend>
+          <DateInput {...args} mode={DateMode.MONTH_YEAR} />
         </fieldset>
       </>
     );

package/src/dateInput/{DateInput.js → DateInput.tsx}

@@ -1,64 +1,101 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Input, SelectInput, SelectInputOptionContent } from '..';
+import { Input, SelectInput, SelectInputProps, SelectInputOptionContent } from '..';
 import { Size, DateMode, MonthFormat } from '../common';
 import { getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
 
 import messages from './DateInput.messages';
-import { explodeDate, convertToLocalMidnight } from './utils';
+import { convertToLocalMidnight } from './utils';
 
 const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
-const INITIAL_DEFAULT_STATE = { year: null, month: null, day: null };
+
+export interface DateInputProps {
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  disabled?: boolean;
+  size?: Size.SMALL | Size.MEDIUM | Size.LARGE;
+  value?: Date | string;
+  onChange: (value: string | null) => void;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  dayLabel?: string;
+  dayAutoComplete?: string;
+  monthLabel?: string;
+  yearLabel?: string;
+  yearAutoComplete?: string;
+  monthFormat?: `${MonthFormat}`;
+  mode?: `${DateMode}`;
+  placeholders?: {
+    day?: string;
+    month?: string;
+    year?: string;
+  };
+  id?: string;
+  selectProps?: Partial<SelectInputProps<number | null>>;
+}
 
 const DateInput = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-label': ariaLabel,
-  disabled,
-  size,
+  disabled = false,
+  size = Size.MEDIUM,
   value,
   dayLabel,
   dayAutoComplete,
   monthLabel,
   yearLabel,
   yearAutoComplete,
-  monthFormat,
-  mode,
+  monthFormat = MonthFormat.LONG,
+  mode = DateMode.DAY_MONTH_YEAR,
   onChange,
   onFocus,
   onBlur,
   placeholders,
   id,
-  selectProps,
-}) => {
+  selectProps = {},
+}: DateInputProps) => {
   const { locale, formatMessage } = useIntl();
-  const getDateObject = () => {
+
+  const getDateObject = (): Date | undefined => {
     if (value && isDateValid(value)) {
       return typeof value === 'string' ? convertToLocalMidnight(value) : value;
     }
-    return null;
+    return undefined;
   };
 
-  const getExplodedDate = (unit) => {
-    let explodedDate = INITIAL_DEFAULT_STATE;
-
+  const getInitialDate = (unit: 'year' | 'month' | 'day'): number | null => {
     if (value && isDateValid(value)) {
       const dateObject = getDateObject();
-      explodedDate = explodeDate(dateObject);
 
-      if (isMonthAndYearFormat(value)) {
-        explodedDate.day = null;
+      if (typeof value === 'string' && isMonthAndYearFormat(value) && unit === 'day') {
+        return null;
+      }
+
+      if (dateObject !== undefined) {
+        switch (unit) {
+          case 'year':
+            return dateObject.getFullYear();
+          case 'month':
+            return dateObject.getMonth();
+          case 'day':
+            return dateObject.getDate();
+          default:
+            return null;
+        }
       }
     }
-    return explodedDate[unit];
+    return null;
   };
 
-  const [day, setDay] = useState(() => getExplodedDate('day'));
-  const [month, setMonth] = useState(() => getExplodedDate('month'));
-  const [year, setYear] = useState(() => getExplodedDate('year'));
-  const [lastBroadcastedValue, setLastBroadcastedValue] = useState(getDateObject);
+  const [day, setDay] = useState(() => getInitialDate('day'));
+  const [month, setMonth] = useState(() => getInitialDate('month'));
+  const [year, setYear] = useState(() => getInitialDate('year'));
+  const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date | null | undefined>(
+    getDateObject,
+  );
+  const monthNames = getMonthNames(locale, monthFormat);
 
   dayLabel = dayLabel || formatMessage(messages.dayLabel);
   monthLabel = monthLabel || formatMessage(messages.monthLabel);
@@ -69,7 +106,7 @@ const DateInput = ({
     year: placeholders?.year || formatMessage(messages.yearPlaceholder),
   };
 
-  const getDateAsString = (date) => {
+  const getDateAsString = (date: Date) => {
     if (!isDateValid(date)) {
       return '';
     }
@@ -87,19 +124,19 @@ const DateInput = ({
   };
 
   const getSelectElement = () => {
-    const monthOptions = getMonthsOptions();
-
     return (
       <label className="d-flex flex-column">
         <span className="sr-only">{monthLabel}</span>
         <SelectInput
           name="month"
           disabled={disabled}
-          placeholder={placeholders.month}
-          items={monthOptions}
+          placeholder={placeholders?.month}
+          items={Array.from({ length: 12 }, (_, index) => ({ type: 'option', value: index }))}
           size={size}
-          value={monthOptions.find((item) => item.value.value === month)?.value}
-          renderValue={({ label }) => <SelectInputOptionContent title={label} />}
+          value={month}
+          renderValue={(selectedValue) => (
+            <SelectInputOptionContent title={monthNames[selectedValue]} />
+          )}
           onChange={(selectedValue) => handleMonthChange(selectedValue)}
           {...selectProps}
         />
@@ -107,106 +144,92 @@ const DateInput = ({
     );
   };
 
-  const getMonthsOptions = () => {
-    const options = [];
-    const months = getMonthNames(locale, monthFormat);
-
-    months.forEach((label, index) => {
-      options.push({ type: 'option', value: { label, value: index } });
-    });
-    return options;
-  };
-
   const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {
-    const dateValue =
-      newDay != null && newMonth != null && newYear != null
-        ? new Date(newYear, newMonth, newDay)
-        : null;
+    if (newDay == null || newMonth == null || newYear == null) {
+      broadcastNewValue(null);
+      return;
+    }
 
-    const newValue = isDateValid(dateValue) ? dateValue : null;
+    const dateValue = new Date(newYear, newMonth, newDay);
 
-    if (!newValue) {
-      broadcastNewValue(INITIAL_DEFAULT_STATE);
+    if (!isDateValid(dateValue)) {
+      broadcastNewValue(null);
+      return;
     }
 
     if (mode === DateMode.MONTH_YEAR) {
-      if (newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
-        broadcastNewValue(newValue);
+      if (newMonth !== month || newYear !== year) {
+        broadcastNewValue(dateValue);
       }
-    } else if (
-      newDay &&
-      newMonth >= 0 &&
-      newYear &&
-      (newDay !== day || newMonth !== month || newYear !== year)
-    ) {
-      broadcastNewValue(newValue);
+    } else if (newDay !== day || newMonth !== month || newYear !== year) {
+      broadcastNewValue(dateValue);
     }
   };
 
-  const handleDayChange = (event) => {
-    const { checkedDay } = checkDate(event.target.value, month, year);
+  const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { checkedDay } = checkDate(Number.parseInt(event.target.value, 10), month, year);
     setDay(checkedDay);
     handleInternalValue(checkedDay, month, year);
   };
 
-  const handleMonthChange = (selectedValue) => {
-    if (!selectedValue) {
+  const handleMonthChange = (selectedMonth: number | null) => {
+    if (selectedMonth === null) {
       setMonth(null);
       handleInternalValue(day, null, year);
       return;
     }
-    const selectedMonth = selectedValue ? selectedValue.value : 0;
     const { checkedDay } = checkDate(day, selectedMonth, year);
     setMonth(selectedMonth);
-    if (day) {
-      if (checkedDay !== day) {
-        setDay(checkedDay);
-      }
+    if (day && checkedDay !== day) {
+      setDay(checkedDay);
     }
     handleInternalValue(checkedDay, selectedMonth, year);
   };
 
-  const handleYearChange = (event) => {
+  const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = event.target.value;
     const slicedYear = newValue.length > 4 ? newValue.slice(0, 4) : newValue;
 
     if (slicedYear.toString().length === 4) {
       // Correct day based on year and month.
-      const { checkedDay } = checkDate(day, month, newValue);
+      const { checkedDay } = checkDate(day, month, Number.parseInt(newValue, 10));
 
-      if (day) {
-        if (checkedDay !== day) {
-          setDay(checkedDay);
-        }
+      if (day && checkedDay !== day) {
+        setDay(checkedDay);
       }
-      setYear(slicedYear);
-      handleInternalValue(checkedDay, month, slicedYear);
+
+      setYear(Number.parseInt(slicedYear, 10));
+      handleInternalValue(checkedDay, month, Number.parseInt(slicedYear, 10));
     } else {
-      setYear(slicedYear);
+      setYear(Number.parseInt(slicedYear, 10));
       handleInternalValue(day, month, null);
     }
   };
 
-  const broadcastNewValue = (newValue) => {
+  const broadcastNewValue = (newValue: Date | null) => {
     if (newValue !== lastBroadcastedValue) {
       setLastBroadcastedValue(newValue);
-      onChange(getDateAsString(newValue) || null);
+      onChange(newValue != null ? getDateAsString(newValue) : null);
     }
   };
 
-  const checkDate = (newDay = null, newMonth = 0, newYear = null) => {
+  const checkDate = (
+    newDay: number | null = null,
+    newMonth: number | null = 0,
+    newYear: number | null = null,
+  ) => {
     let checkedDay = newDay;
-    const maxDay = new Date(newYear || 2000, newMonth + 1, 0).getDate();
+    const maxDay = new Date(newYear || 2000, newMonth != null ? newMonth + 1 : 1, 0).getDate();
 
     if (!newDay) {
       checkedDay = null;
     }
 
-    if ((newDay && newDay < 0) || newDay === '00') {
+    if (newDay && newDay < 0) {
       checkedDay = 1;
     }
 
-    if ((newDay && newMonth) || newDay > 31) {
+    if ((newDay && newMonth) || (newDay && newDay > 31)) {
       checkedDay = newDay > maxDay ? maxDay : newDay;
     }
 
@@ -228,11 +251,12 @@ const DateInput = ({
       id={id}
       aria-labelledby={ariaLabelledBy}
       aria-label={ariaLabel}
-      onFocus={(event) =>
-        shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation()
+      role="group" // Add role attribute to indicate container for interactive elements
+      onFocus={(event: React.FocusEvent<HTMLInputElement>) =>
+        shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()
       }
-      onBlur={(event) =>
-        shouldPropagateOnBlur(event) ? onBlur && onBlur() : event.stopPropagation()
+      onBlur={(event: React.FocusEvent<HTMLInputElement>) =>
+        shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()
       }
     >
       <div className="row">
@@ -282,14 +306,20 @@ const DateInput = ({
 };
 
 // Should only propagate if the relatedTarget is not part of this DateInput component.
-function shouldPropagateOnFocus({ target, relatedTarget }) {
+function shouldPropagateOnFocus({
+  target,
+  relatedTarget,
+}: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {
   const targetParent = target.closest('.tw-date');
   const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');
   return targetParent !== relatedParent;
 }
 
 // Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.
-function shouldPropagateOnBlur({ target, relatedTarget }) {
+function shouldPropagateOnBlur({
+  target,
+  relatedTarget,
+}: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {
   const blurElementParent = target.closest('.tw-date');
   // Even though FocusEvent.relatedTarget is supported by IE
   // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)
@@ -303,41 +333,4 @@ function shouldPropagateOnBlur({ target, relatedTarget }) {
   return blurElementParent !== focusElementParent;
 }
 
-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)]),
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  dayLabel: PropTypes.string,
-  dayAutoComplete: PropTypes.string,
-  monthLabel: PropTypes.string,
-  yearLabel: PropTypes.string,
-  yearAutoComplete: PropTypes.string,
-  monthFormat: PropTypes.oneOf(['long', 'short']),
-  mode: PropTypes.oneOf(['day-month-year', 'month-year']),
-  placeholders: PropTypes.shape({
-    day: PropTypes.node,
-    month: PropTypes.node,
-    year: PropTypes.node,
-  }),
-  id: PropTypes.string,
-  selectProps: PropTypes.object,
-};
-
-DateInput.defaultProps = {
-  disabled: false,
-  size: Size.MEDIUM,
-  value: null,
-  onFocus: null,
-  onBlur: null,
-  monthFormat: MonthFormat.LONG,
-  mode: DateMode.DAY_MONTH_YEAR,
-  id: '',
-  selectProps: {},
-};
-
 export default DateInput;

package/src/dateInput/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DateInput';
+export type { DateInputProps } from './DateInput';

package/src/dateInput/utils/convertToLocalMidnight/{convertToLocalMidnight.js → convertToLocalMidnight.ts}

@@ -1,4 +1,4 @@
-export const convertToLocalMidnight = (date) => {
+export const convertToLocalMidnight = (date: string) => {
   const utcDate = new Date(date.split('T')[0]); // using YYYY-MM-DD creates UTC date
 
   return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());

package/src/dateInput/utils/{index.js → index.ts}

@@ -1,2 +1 @@
-export { explodeDate } from './explodeDate';
 export { convertToLocalMidnight } from './convertToLocalMidnight';

package/src/dateLookup/DateLookup.js

@@ -240,10 +240,20 @@ class DateLookup extends PureComponent {
   render() {
     const { selectedDate, open } = this.state;
 
-    const { size, placeholder, label, monthFormat, disabled, clearable, value } = this.props;
+    const {
+      size,
+      placeholder,
+      label,
+      'aria-labelledby': ariaLabelledBy,
+      monthFormat,
+      disabled,
+      clearable,
+      value,
+    } = this.props;
     return (
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
         ref={this.element}
+        aria-labelledby={ariaLabelledBy}
         className="input-group"
         onKeyDown={this.handleKeyDown}
       >
@@ -273,6 +283,7 @@ DateLookup.propTypes = {
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   placeholder: PropTypes.string,
   label: PropTypes.string,
+  'aria-labelledby': PropTypes.string,
   monthFormat: PropTypes.oneOf(['long', 'short']),
   disabled: PropTypes.bool,
   onChange: PropTypes.func.isRequired,

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

@@ -32,12 +32,19 @@ describe('DateLookup (events)', () => {
       size: 'lg',
       placeholder: 'Asd..',
       label: 'label',
+      'aria-labelledby': 'prioritized-label',
       onChange: jest.fn(),
       onClick: jest.fn(),
       disabled: false,
       clearable: false,
     };
-    ({ container } = render(<DateLookup {...props} />));
+    ({ container } = render(
+      <>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label id="prioritized-label">Prioritized label</label>
+        <DateLookup {...props} />
+      </>,
+    ));
   });
 
   afterEach(() => {
@@ -114,6 +121,10 @@ describe('DateLookup (events)', () => {
     expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
   });
 
+  it('supports custom `aria-labelledby` attribute', () => {
+    expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
+  });
+
   describe('when is clearable', () => {
     beforeEach(() => {
       props = { value: date, onChange: jest.fn(), clearable: true };

package/src/dateLookup/dayCalendar/table/DayCalendarTable.js

@@ -58,6 +58,7 @@ class DayCalendarTable extends PureComponent {
   isDisabled = (day) => {
     const { min, max, viewMonth, viewYear } = this.props;
     const date = new Date(viewYear, viewMonth, day);
+
     return !isWithinRange(date, min, max);
   };
 

package/src/decision/Decision.css

@@ -1,93 +1,17 @@
 .np-decision .decision {
   display: flex;
 }
-.np-decision__tile--small + .np-decision__tile--small {
-  margin-left: 16px;
-  margin-left: var(--size-16);
-}
-[dir="rtl"] .np-decision__tile--small + .np-decision__tile--small {
-  margin-right: 16px;
-  margin-right: var(--size-16);
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision.np-decision--grid .np-decision__tile--small {
-  margin-left: 0;
-  margin-bottom: 16px !important;
-  margin-bottom: var(--size-16) !important;
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small {
-  margin-right: 0;
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
-  margin-right: 16px;
-  margin-right: var(--size-16);
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
-  margin-left: 16px;
-  margin-left: var(--size-16);
-  margin-right: 0;
-  margin-right: initial;
-}
-.np-decision__tile + .np-decision__tile {
-  margin-left: 24px;
-  margin-left: var(--size-24);
-}
-[dir="rtl"] .np-decision__tile + .np-decision__tile {
-  margin-right: 24px;
-  margin-right: var(--size-24);
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision .np-text-title-subsection {
-  margin-bottom: 0;
-}
 .np-decision__tile--small .np-text-title-subsection {
   font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 1.2;
   line-height: var(--line-height-title);
-  margin-bottom: 0;
-}
-.np-decision.np-decision--grid .np-decision__tile {
-  margin-left: 0;
-  margin-bottom: 24px !important;
-  margin-bottom: var(--size-24) !important;
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile {
-  margin-right: 0;
-  margin-left: 0;
-  margin-left: initial;
-}
-.np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
-  margin-right: 24px;
-  margin-right: var(--size-24);
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
-  margin-left: 24px;
-  margin-left: var(--size-24);
-  margin-right: 0;
-  margin-right: initial;
-}
-.np-decision.np-decision--grid .np-size-swapper {
-  margin-right: calc(0 - 24px);
-  margin-right: calc(0 - var(--size-24));
-}
-[dir="rtl"] .np-decision.np-decision--grid .np-size-swapper {
-  margin-left: calc(0 - 24px);
-  margin-left: calc(0 - var(--size-24));
-  margin-right: 0;
-  margin-right: initial;
 }
-.np-decision.np-decision--grid.np-decision--small .np-size-swapper {
-  margin-right: calc(0 - 16px);
-  margin-right: calc(0 - var(--size-16));
+.np-decision:not(.flex-column) {
+  gap: 24px;
+  gap: var(--size-24);
 }
-[dir="rtl"] .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
-  margin-left: calc(0 - 16px);
-  margin-left: calc(0 - var(--size-16));
-  margin-right: 0;
-  margin-right: initial;
+.np-decision:not(.flex-column).np-decision--small {
+  gap: 16px;
+  gap: var(--size-16);
 }

package/src/decision/Decision.less

@@ -5,56 +5,18 @@
     display: flex;
   }
 
-  &__tile--small + &__tile--small {
-    .margin(left, var(--size-16));
-  }
-
-  &.np-decision--grid &__tile--small {
-    .margin(left, 0);
-
-    margin-bottom: var(--size-16) !important;
-
-    &:not(:last-of-type) {
-      .margin(right, var(--size-16));
-    }
-  }
-
-  &__tile + &__tile {
-    .margin(left, var(--size-24));
-  }
-
-  .np-text-title-subsection {
-    margin-bottom: 0;
-  }
-
   &__tile--small {
     .np-text-title-subsection {
       font-size: var(--font-size-16);
       line-height: var(--line-height-title);
-      margin-bottom: 0;
     }
   }
 
-  &.np-decision--grid &__tile {
-
-    .margin(left, 0);
-
-    margin-bottom: var(--size-24) !important;
-
-    &:not(:last-of-type) {
-      .margin(right, var(--size-24));
-    }
-  }
-
-  &.np-decision--grid {
-    .np-size-swapper {
-      .margin(right, calc(0 - var(--size-24)));
-    }
+  &:not(.flex-column) {
+    gap: var(--size-24);
 
     &.np-decision--small {
-      .np-size-swapper {
-        .margin(right, calc(0 - var(--size-16)));
-      }
+      gap: var(--size-16);
     }
   }
 }