@transferwise/components 0.0.0-experimental-2825d2d → 0.0.0-experimental-1413ac0

package/build/types/promoCard/PromoCard.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { CardProps } from '../common/card';
 import { PromoCardIndicatorProps } from './PromoCardIndicator';
 export type ReferenceType = React.Ref<HTMLInputElement>;
-export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
 export type RelatedTypes = '' | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
 export interface PromoCardCommonProps {
     /** Optional prop to specify classNames onto the PromoCard */
@@ -54,7 +53,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
      */
     rel?: RelatedTypes;
     /** Optional prop to to display where the linked URL will show */
-    target?: LinkTarget;
+    target?: React.HTMLAttributeAnchorTarget;
     /** Only applies to role="radio" or "checkbox" */
     defaultChecked?: never;
     isChecked?: never;

package/build/types/promoCard/PromoCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}

package/build/types/select/searchBox/SearchBox.d.ts

@@ -3,6 +3,6 @@ declare const SearchBox: import("react").ForwardRefExoticComponent<{
     id?: string | undefined;
     classNames?: Record<string, string> | undefined;
     focusedOptionId?: string | undefined;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "value" | "placeholder" | "onChange" | "onClick"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "onChange" | "onClick" | "value"> & import("react").RefAttributes<HTMLInputElement>>;
 export default SearchBox;
 //# sourceMappingURL=SearchBox.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-2825d2d",
+  "version": "0.0.0-experimental-1413ac0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/common/commonProps.ts

@@ -14,7 +14,7 @@ export type AriaLabelProperty = {
 
 export type LinkProps = {
   href: string;
-  target?: '_blank' | '_self' | '_parent' | '_top';
+  target?: React.HTMLAttributeAnchorTarget;
   onClick?: React.MouseEventHandler<HTMLElement>;
 };
 

package/src/common/dateUtils/getDayNames/{getDayNames.ts → getDayNames.js}

@@ -1,10 +1,7 @@
 import { formatDate } from '@transferwise/formatting';
 
-export function getDayNames(
-  locale?: string | undefined,
-  format: Intl.DateTimeFormatOptions['weekday'] = 'short',
-) {
-  const days: string[] = [];
+export function getDayNames(locale, format = 'short') {
+  const days = [];
   const date = new Date(2018, 0, 1); // 2018 started with Monday
   while (days.length < 7) {
     days.push(formatDate(date, locale, { weekday: format }));

package/src/common/dateUtils/getMonthNames/{getMonthNames.ts → getMonthNames.js}

@@ -1,15 +1,13 @@
 import { formatDate } from '@transferwise/formatting';
 
-export const getMonthNames = (
-  locale: string | undefined,
-  format: Intl.DateTimeFormatOptions['month'] = 'long',
-): string[] => {
-  const months: string[] = [];
+export const getMonthNames = (locale, format = 'long') => {
+  const months = [];
   const date = new Date(2018, 0, 1);
   const monthFormat = { month: format };
   while (months.length < 12) {
     months.push(formatDate(date, locale, monthFormat));
     date.setMonth(date.getMonth() + 1);
   }
+
   return months;
 };

package/src/common/dateUtils/getMonthNames/getMonthNames.spec.js

@@ -1,4 +1,8 @@
-import { getMonthNames } from './getMonthNames';
+import { getMonthNames } from '..';
+
+jest.mock('@transferwise/formatting', () => ({
+  formatDate: (month) => month.getMonth(),
+}));
 
 describe('getMonthNames', () => {
   it('returns all months', () => {
@@ -6,13 +10,8 @@ describe('getMonthNames', () => {
   });
 
   it('starts with January and ends with December', () => {
-    const months = getMonthNames('en', 'long');
-    expect(months[0]).toBe('January');
-    expect(months.at(-1)).toBe('December');
-  });
-
-  it('gets localized month names', () => {
-    const months = getMonthNames('fr', 'long');
-    expect(months[0]).toBe('janvier');
+    const months = getMonthNames();
+    expect(months[0]).toBe(0);
+    expect(months[months.length - 1]).toBe(11);
   });
 });

package/src/common/dateUtils/isDateValid/isDateValid.js

@@ -0,0 +1,6 @@
+export const isDateValid = (date) => validDateObject(date) || validDateString(date);
+
+export const validDateString = (dateString) =>
+  typeof dateString === 'string' && validDateObject(new Date(dateString));
+
+const validDateObject = (dateObject) => dateObject instanceof Date && !isNaN(dateObject); // eslint-disable-line no-restricted-globals

package/src/common/dateUtils/isDateValid/{isDateValid.spec.ts → isDateValid.spec.js}

@@ -1,4 +1,4 @@
-import { isDateValid } from '..';
+import { isDateValid } from '.';
 
 describe('isDateValid', () => {
   it('should return false for invalid format', () => {
@@ -6,6 +6,6 @@ describe('isDateValid', () => {
   });
 
   it('should return true for valid format', () => {
-    expect(isDateValid(new Date('1995-12-17T03:24:00') as unknown as string)).toBe(true);
+    expect(isDateValid(new Date('1995-12-17T03:24:00'))).toBe(true);
   });
 });

package/src/common/dateUtils/isMonthAndYearFormat/{isMonthAndYearFormat.ts → isMonthAndYearFormat.js}

@@ -1,4 +1,4 @@
 import { validDateString } from '../isDateValid';
 
-export const isMonthAndYearFormat = (dateString: string) =>
+export const isMonthAndYearFormat = (dateString) =>
   validDateString(dateString) && dateString.split('-').length < 3;

package/src/common/dateUtils/isMonthAndYearFormat/isMonthAndYearFormat.spec.js

@@ -1,11 +1,15 @@
-import { isMonthAndYearFormat } from '..';
+import { isMonthAndYearFormat } from '.';
 
 describe('isDateValid', () => {
-  it('should return false if day is provided as string', () => {
+  it('should return false if day is provided', () => {
     expect(isMonthAndYearFormat('1998-02-04')).toBe(false);
   });
 
-  it('should return true if day is not provided as string', () => {
+  it('should return true if day is not provided', () => {
     expect(isMonthAndYearFormat('1998-02')).toBe(true);
   });
+
+  it('should return false if argument provided is not a string', () => {
+    expect(isMonthAndYearFormat([])).toBe(false);
+  });
 });

package/src/common/dateUtils/isWithinRange/{isWithinRange.ts → isWithinRange.js}

@@ -1,3 +1,3 @@
-export function isWithinRange(date?: Date, min?: Date, max?: Date) {
+export function isWithinRange(date, min, max) {
   return !date || ((!min || date >= min) && (!max || date <= max));
 }

package/src/common/dateUtils/isWithinRange/{isWithinRange.spec.ts → isWithinRange.spec.js}

@@ -2,17 +2,17 @@ import { isWithinRange } from '..';
 
 describe('isWithinRange', () => {
   it('returns true when no dates are provided', () => {
-    expect(isWithinRange(undefined, undefined, undefined)).toBe(true);
+    expect(isWithinRange()).toBe(true);
   });
 
   it('returns true when no min and max', () => {
-    expect(isWithinRange(new Date(), undefined, undefined)).toBe(true);
+    expect(isWithinRange(new Date())).toBe(true);
   });
 
   it('returns true when date is between min and max', () => {
-    const date: Date = new Date('1995-12-20');
-    const min: Date = new Date('1995-12-19');
-    const max: Date = new Date('1995-12-21');
+    const date = new Date('1995-12-20');
+    const min = new Date('1995-12-19');
+    const max = new Date('1995-12-21');
     expect(isWithinRange(date, min, max)).toBe(true);
   });
 
@@ -35,7 +35,7 @@ describe('isWithinRange', () => {
     const date = new Date('1995-12-23');
     const min = new Date('1995-12-20');
     const max = new Date('1995-12-22');
-    expect(isWithinRange(date, undefined, max)).toBe(false);
+    expect(isWithinRange(date, null, max)).toBe(false);
     expect(isWithinRange(date, min, max)).toBe(false);
   });
 });

package/src/common/dateUtils/moveToWithinRange/{moveToWithinRange.ts → moveToWithinRange.js}

@@ -1,6 +1,6 @@
-import { isWithinRange } from '..';
+import { isWithinRange } from '../isWithinRange';
 
 // Makes sure that date is between min and max dates, returns a cloned min or max
-export function moveToWithinRange(date: Date, min: Date, max: Date) {
+export function moveToWithinRange(date, min, max) {
   return isWithinRange(date, min, max) ? date : new Date(min && date < min ? +min : +max);
 }

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

@@ -1,14 +1,9 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import {
-  Input,
-  SelectInput,
-  SelectInputProps,
-  SelectInputOptionItem,
-  SelectInputOptionContent,
-} from '..';
+import { Input, SelectInput, SelectInputOptionContent } from '..';
 import { Size, DateMode, MonthFormat } from '../common';
 import { getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
 
@@ -16,79 +11,44 @@ import messages from './DateInput.messages';
 import { explodeDate, convertToLocalMidnight } from './utils';
 
 const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
-const INITIAL_DEFAULT_STATE: ExplodedDate = { year: null, month: null, day: null };
-
-export interface ExplodedDate {
-  year: number | null;
-  month: number | null;
-  day: number | null;
-}
-
-export interface DateInputProps {
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-  disabled?: boolean;
-  size?: Size.SMALL | Size.MEDIUM | Size.LARGE;
-  value?: Date | string | null;
-  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>>;
-}
+const INITIAL_DEFAULT_STATE = { year: null, month: null, day: null };
 
 const DateInput = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-label': ariaLabel,
-  disabled = false,
-  size = Size.MEDIUM,
-  value = null,
+  disabled,
+  size,
+  value,
   dayLabel,
   dayAutoComplete,
   monthLabel,
   yearLabel,
   yearAutoComplete,
-  monthFormat = MonthFormat.LONG,
-  mode = DateMode.DAY_MONTH_YEAR,
+  monthFormat,
+  mode,
   onChange,
   onFocus,
-  onBlur = undefined,
+  onBlur,
   placeholders,
-  id = '',
+  id,
   selectProps,
-}: DateInputProps) => {
+}) => {
   const { locale, formatMessage } = useIntl();
-
-  const getDateObject = (): Date | null => {
+  const getDateObject = () => {
     if (value && isDateValid(value)) {
       return typeof value === 'string' ? convertToLocalMidnight(value) : value;
     }
     return null;
   };
 
-  const getExplodedDate = (unit: 'year' | 'month' | 'day'): number | null => {
-    let explodedDate: ExplodedDate = INITIAL_DEFAULT_STATE;
+  const getExplodedDate = (unit) => {
+    let explodedDate = INITIAL_DEFAULT_STATE;
 
     if (value && isDateValid(value)) {
       const dateObject = getDateObject();
+      explodedDate = explodeDate(dateObject);
 
-      if (dateObject !== null) {
-        explodedDate = explodeDate(dateObject);
-      }
-
-      if (typeof value === 'string' && isMonthAndYearFormat(value)) {
+      if (isMonthAndYearFormat(value)) {
         explodedDate.day = null;
       }
     }
@@ -96,11 +56,9 @@ const DateInput = ({
   };
 
   const [day, setDay] = useState(() => getExplodedDate('day'));
-  const [month, setMonth] = useState<number | null>(() => getExplodedDate('month'));
+  const [month, setMonth] = useState(() => getExplodedDate('month'));
   const [year, setYear] = useState(() => getExplodedDate('year'));
-  const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date | ExplodedDate | null>(
-    getDateObject,
-  );
+  const [lastBroadcastedValue, setLastBroadcastedValue] = useState(getDateObject);
 
   dayLabel = dayLabel || formatMessage(messages.dayLabel);
   monthLabel = monthLabel || formatMessage(messages.monthLabel);
@@ -111,8 +69,8 @@ const DateInput = ({
     year: placeholders?.year || formatMessage(messages.yearPlaceholder),
   };
 
-  const getDateAsString = (date: Date | null) => {
-    if (date === null || !isDateValid(date)) {
+  const getDateAsString = (date) => {
+    if (!isDateValid(date)) {
       return '';
     }
     switch (mode) {
@@ -137,13 +95,11 @@ const DateInput = ({
         <SelectInput
           name="month"
           disabled={disabled}
-          placeholder={placeholders?.month}
+          placeholder={placeholders.month}
           items={monthOptions}
           size={size}
-          value={monthOptions.find((item) => item.value === month)?.value}
-          renderValue={(selectedValue) => (
-            <SelectInputOptionContent title={getMonthNames(locale, monthFormat)[selectedValue]} />
-          )}
+          value={monthOptions.find((item) => item.value.value === month)?.value}
+          renderValue={({ label }) => <SelectInputOptionContent title={label} />}
           onChange={(selectedValue) => handleMonthChange(selectedValue)}
           {...selectProps}
         />
@@ -152,19 +108,16 @@ const DateInput = ({
   };
 
   const getMonthsOptions = () => {
-    const options: SelectInputOptionItem<number>[] = [];
+    const options = [];
+    const months = getMonthNames(locale, monthFormat);
 
-    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].forEach((index) => {
-      options.push({ type: 'option', value: index });
+    months.forEach((label, index) => {
+      options.push({ type: 'option', value: { label, value: index } });
     });
     return options;
   };
 
-  const handleInternalValue = (
-    newDay: number | null = day,
-    newMonth: number | null = month,
-    newYear: number | null = year,
-  ) => {
+  const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {
     const dateValue =
       newDay != null && newMonth != null && newYear != null
         ? new Date(newYear, newMonth, newDay)
@@ -177,12 +130,11 @@ const DateInput = ({
     }
 
     if (mode === DateMode.MONTH_YEAR) {
-      if (newMonth && newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
+      if (newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
         broadcastNewValue(newValue);
       }
     } else if (
       newDay &&
-      newMonth !== null &&
       newMonth >= 0 &&
       newYear &&
       (newDay !== day || newMonth !== month || newYear !== year)
@@ -191,75 +143,70 @@ const DateInput = ({
     }
   };
 
-  const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checkedDay } = checkDate(parseInt(event.target.value), month, year);
+  const handleDayChange = (event) => {
+    const { checkedDay } = checkDate(event.target.value, month, year);
     setDay(checkedDay);
     handleInternalValue(checkedDay, month, year);
   };
 
-  const handleMonthChange = (selectedValue: number) => {
-    if (selectedValue === null) {
+  const handleMonthChange = (selectedValue) => {
+    if (!selectedValue) {
       setMonth(null);
       handleInternalValue(day, null, year);
       return;
     }
-    const selectedMonth = selectedValue ? selectedValue : 0;
+    const selectedMonth = selectedValue ? selectedValue.value : 0;
     const { checkedDay } = checkDate(day, selectedMonth, year);
     setMonth(selectedMonth);
-    if (day && checkedDay !== day) {
-      setDay(checkedDay);
+    if (day) {
+      if (checkedDay !== day) {
+        setDay(checkedDay);
+      }
     }
     handleInternalValue(checkedDay, selectedMonth, year);
   };
 
-  const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleYearChange = (event) => {
     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, parseInt(newValue));
+      const { checkedDay } = checkDate(day, month, newValue);
 
-      if (day && checkedDay !== day) {
-        setDay(checkedDay);
+      if (day) {
+        if (checkedDay !== day) {
+          setDay(checkedDay);
+        }
       }
-
-      setYear(parseInt(slicedYear));
-      handleInternalValue(checkedDay, month, parseInt(slicedYear));
+      setYear(slicedYear);
+      handleInternalValue(checkedDay, month, slicedYear);
     } else {
-      setYear(parseInt(slicedYear));
+      setYear(slicedYear);
       handleInternalValue(day, month, null);
     }
   };
 
-  const broadcastNewValue = (newValue: Date | ExplodedDate | null) => {
+  const broadcastNewValue = (newValue) => {
     if (newValue !== lastBroadcastedValue) {
       setLastBroadcastedValue(newValue);
-      if (newValue === INITIAL_DEFAULT_STATE) {
-        onChange(null);
-      } else {
-        onChange(getDateAsString(newValue as Date) || null);
-      }
+      onChange(getDateAsString(newValue) || null);
     }
   };
 
-  const checkDate = (
-    newDay: number | null = null,
-    newMonth: number | null = 0,
-    newYear: number | null = null,
-  ) => {
+  const checkDate = (newDay = null, newMonth = 0, newYear = null) => {
     let checkedDay = newDay;
-    const maxDay = new Date(newYear || 2000, newMonth ? newMonth + 1 : 1, 0).getDate();
+    const maxDay = new Date(newYear || 2000, newMonth + 1, 0).getDate();
 
     if (!newDay) {
       checkedDay = null;
     }
 
-    if (newDay && newDay < 0) {
+    if ((newDay && newDay < 0) || newDay === '00') {
       checkedDay = 1;
     }
 
-    if ((newDay && newMonth) || (newDay && newDay > 31)) {
+    if ((newDay && newMonth) || newDay > 31) {
       checkedDay = newDay > maxDay ? maxDay : newDay;
     }
 
@@ -281,12 +228,11 @@ const DateInput = ({
       id={id}
       aria-labelledby={ariaLabelledBy}
       aria-label={ariaLabel}
-      role="group" // Add role attribute to indicate container for interactive elements
-      onFocus={(event: React.FocusEvent<HTMLInputElement>) =>
-        shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()
+      onFocus={(event) =>
+        shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation()
       }
-      onBlur={(event: React.FocusEvent<HTMLInputElement>) =>
-        shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()
+      onBlur={(event) =>
+        shouldPropagateOnBlur(event) ? onBlur && onBlur() : event.stopPropagation()
       }
     >
       <div className="row">
@@ -336,20 +282,14 @@ const DateInput = ({
 };
 
 // Should only propagate if the relatedTarget is not part of this DateInput component.
-function shouldPropagateOnFocus({
-  target,
-  relatedTarget,
-}: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {
+function shouldPropagateOnFocus({ 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,
-}: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {
+function shouldPropagateOnBlur({ 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)
@@ -363,4 +303,41 @@ function shouldPropagateOnBlur({
   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;