@transferwise/components 46.27.0 → 46.28.0

package/src/dateLookup/getStartOfDay/{getStartOfDay.js → getStartOfDay.tsx}

@@ -2,7 +2,7 @@
 // getStartOfDay(new Date('1995-01-01')) in Los Angeles returns 31 Dec 1994, but in
 // in Singapore it is 1 Jan 1995.
 // You might want to use/implement `getUTCStartOfDay` if you want it to be 1995 in any timezone
-export function getStartOfDay(date) {
+export function getStartOfDay(date: Date | null) {
   if (!date) {
     return null;
   }

package/src/dateLookup/index.ts

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

package/src/dateLookup/monthCalendar/{MonthCalendar.js → MonthCalendar.tsx}

@@ -1,15 +1,25 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import messages from '../DateLookup.messages';
 import DateHeader from '../dateHeader';
 
 import MonthCalendarTable from './table';
 
-class MonthCalendar extends PureComponent {
-  onMonthSelect = (month) => {
+interface MonthCalendarProps extends WrappedComponentProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: () => void;
+  onLabelClick: () => void;
+  onViewDateUpdate: (date: { year?: number; month?: number }) => void;
+}
+
+class MonthCalendar extends PureComponent<MonthCalendarProps> {
+  onMonthSelect = (month: number) => {
     this.props.onViewDateUpdate({ month });
     this.props.onSelect();
   };
@@ -42,7 +52,11 @@ class MonthCalendar extends PureComponent {
           onNextClick={this.selectNextYear}
         />
         <MonthCalendarTable
-          {...{ selectedDate, min, max, viewYear, placeholder }}
+          selectedDate={selectedDate}
+          min={min}
+          max={max}
+          viewYear={viewYear}
+          placeholder={placeholder}
           onSelect={this.onMonthSelect}
         />
       </>
@@ -50,21 +64,4 @@ class MonthCalendar extends PureComponent {
   }
 }
 
-MonthCalendar.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onLabelClick: PropTypes.func.isRequired,
-  onViewDateUpdate: PropTypes.func.isRequired,
-};
-
-MonthCalendar.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default injectIntl(MonthCalendar);

package/src/dateLookup/monthCalendar/table/{MonthCalendarTable.js → MonthCalendarTable.tsx}

@@ -1,17 +1,33 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import TableLink from '../../tableLink';
 
+interface MonthCalendarTableProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: (date: number) => void;
+}
+
 const ROWS = 3;
 const COLS = 4;
-const MONTH_ONLY_FORMAT = { month: 'short' };
+const MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };
 
-const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
+const MonthCalendarTable = ({
+  selectedDate,
+  min,
+  max,
+  viewYear,
+  placeholder,
+  onSelect,
+}: MonthCalendarTableProps) => {
   const { locale } = useIntl();
-  const getLink = (month) => {
+
+  const getLink = (month: number) => {
     return (
       <TableLink
         item={month}
@@ -26,17 +42,19 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
     );
   };
 
-  const isActive = (month) => {
-    return (
-      selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear()
+  const isActive = (month: number) => {
+    return !!(
+      selectedDate &&
+      month === selectedDate.getMonth() &&
+      viewYear === selectedDate.getFullYear()
     );
   };
 
-  const isThisMonth = (month) => {
+  const isThisMonth = (month: number) => {
     return viewYear === new Date().getFullYear() && month === new Date().getMonth();
   };
 
-  const isDisabled = (month) => {
+  const isDisabled = (month: number) => {
     const date = new Date(viewYear, month);
     return !!(
       (min && date < new Date(min.getFullYear(), min.getMonth())) ||
@@ -45,7 +63,7 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
   };
 
   const autofocusMonth = (() => {
-    const months = [...new Array(ROWS * COLS)].map((_, index) => index);
+    const months = Array.from({ length: ROWS * COLS }, (_, index) => index);
     return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });
   })();
 
@@ -53,37 +71,20 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
     <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
       <thead className="sr-only">
         <tr>
-          <th colSpan="3">{placeholder}</th>
+          <th colSpan={COLS}>{placeholder}</th>
         </tr>
       </thead>
       <tbody>
-        {/* eslint-disable react/no-array-index-key */}
-        {[...new Array(ROWS)].map((row, rowIndex) => (
+        {Array.from({ length: ROWS }, (_, rowIndex) => (
           <tr key={rowIndex}>
-            {[...new Array(COLS)].map((col, colIndex) => (
+            {Array.from({ length: COLS }, (_, colIndex) => (
               <td key={colIndex}>{getLink(rowIndex * COLS + colIndex)}</td>
             ))}
           </tr>
         ))}
-        {/* eslint-enable react/no-array-index-key */}
       </tbody>
     </table>
   );
 };
 
-MonthCalendarTable.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-};
-
-MonthCalendarTable.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default MonthCalendarTable;

package/src/dateLookup/yearCalendar/{YearCalendar.js → YearCalendar.tsx}

@@ -1,14 +1,23 @@
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import messages from '../DateLookup.messages';
 import DateHeader from '../dateHeader';
 
 import YearCalendarTable from './table';
 
-class YearCalendar extends PureComponent {
-  onYearSelect = (year) => {
+interface YearCalendarProps extends WrappedComponentProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: () => void;
+  onViewDateUpdate: (date: { year: number }) => void;
+}
+
+class YearCalendar extends PureComponent<YearCalendarProps> {
+  onYearSelect = (year: number) => {
     this.props.onViewDateUpdate({ year });
     this.props.onSelect();
   };
@@ -38,7 +47,11 @@ class YearCalendar extends PureComponent {
           onNextClick={this.selectNextYears}
         />
         <YearCalendarTable
-          {...{ selectedDate, min, max, viewYear, placeholder }}
+          selectedDate={selectedDate}
+          min={min}
+          max={max}
+          viewYear={viewYear}
+          placeholder={placeholder}
           onSelect={this.onYearSelect}
         />
       </>
@@ -46,20 +59,4 @@ class YearCalendar extends PureComponent {
   }
 }
 
-YearCalendar.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onViewDateUpdate: PropTypes.func.isRequired,
-};
-
-YearCalendar.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default injectIntl(YearCalendar);

package/src/dateLookup/yearCalendar/table/{YearCalendarTable.js → YearCalendarTable.tsx}

@@ -1,18 +1,33 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import TableLink from '../../tableLink';
 
+interface YearCalendarTableProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewYear: number;
+  placeholder: string;
+  onSelect: (year: number) => void;
+}
+
 const ROWS = 5;
 const COLS = 4;
-const YEAR_ONLY_FORMAT = { year: 'numeric' };
+const YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };
 
-const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
+const YearCalendarTable = ({
+  selectedDate,
+  min,
+  max,
+  viewYear,
+  placeholder,
+  onSelect,
+}: YearCalendarTableProps) => {
   const { locale } = useIntl();
   const startYear = viewYear - (viewYear % 20);
-  const getLink = (year) => {
+  const getLink = (year: number) => {
     return (
       <TableLink
         item={year}
@@ -27,20 +42,20 @@ const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSe
     );
   };
 
-  const isActive = (year) => {
+  const isActive = (year: number) => {
     return !!(selectedDate && year === selectedDate.getFullYear());
   };
 
-  const isThisYear = (year) => {
+  const isThisYear = (year: number) => {
     return year === new Date().getFullYear();
   };
 
-  const isDisabled = (year) => {
+  const isDisabled = (year: number) => {
     return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));
   };
 
   const autofocusYear = (() => {
-    const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
+    const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);
     return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });
   })();
 
@@ -48,37 +63,20 @@ const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSe
     <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
       <thead className="sr-only">
         <tr>
-          <th colSpan="4">{placeholder}</th>
+          <th colSpan={COLS}>{placeholder}</th>
         </tr>
       </thead>
       <tbody>
-        {/* eslint-disable react/no-array-index-key */}
-        {[...new Array(ROWS)].map((row, rowIndex) => (
+        {Array.from({ length: ROWS }, (_, rowIndex) => (
           <tr key={rowIndex}>
-            {[...new Array(COLS)].map((col, colIndex) => (
+            {Array.from({ length: COLS }, (_, colIndex) => (
               <td key={colIndex}>{getLink(startYear + rowIndex * COLS + colIndex)}</td>
             ))}
           </tr>
         ))}
-        {/* eslint-enable react/no-array-index-key */}
       </tbody>
     </table>
   );
 };
 
-YearCalendarTable.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-};
-
-YearCalendarTable.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default YearCalendarTable;

package/src/i18n/th.json

@@ -4,10 +4,10 @@
   "neptune.ClearButton.ariaLabel": "ล้าง",
   "neptune.CloseButton.ariaLabel": "ปิด",
   "neptune.DateInput.day.label": "วัน",
-  "neptune.DateInput.day.placeholder": "DD",
+  "neptune.DateInput.day.placeholder": "วัน",
   "neptune.DateInput.month.label": "เดือน",
   "neptune.DateInput.year.label": "ปี",
-  "neptune.DateInput.year.placeholder": "YYYY",
+  "neptune.DateInput.year.placeholder": "ปี",
   "neptune.DateLookup.day": "วัน",
   "neptune.DateLookup.goTo20YearView": "ไปที่มุมมอง 20 ปี",
   "neptune.DateLookup.month": "เดือน",

package/src/index.ts

@@ -4,6 +4,7 @@
 export type { AccordionProps, AccordionItem } from './accordion';
 export type { AvatarProps } from './avatar';
 export type { ActionOptionProps } from './actionOption';
+export type { AlertProps, AlertAction, AlertArrowPosition, AlertType } from './alert';
 export type { BadgeProps } from './badge';
 export type { CircularButtonProps } from './circularButton';
 export type { DecisionProps } from './decision/Decision';
@@ -12,6 +13,7 @@ export type { InfoProps } from './info';
 export type { SummaryProps } from './summary';
 export type { InputProps } from './inputs/Input';
 export type { DateInputProps } from './dateInput';
+export type { DateLookupProps } from './dateLookup';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputGroupProps } from './inputs/InputGroup';
 export type { LoaderProps } from './loader';
@@ -194,7 +196,6 @@ export { AvatarType } from './avatar';
 export { InfoPresentation } from './info';
 export { UploadStep } from './upload';
 export { DecisionPresentation, DecisionType } from './decision';
-export { AlertArrowPosition } from './alert/withArrow';
 export { LogoType } from './logo';
 export { FileType } from './common';
 

package/src/inlineAlert/InlineAlert.spec.tsx

@@ -21,13 +21,6 @@ describe('InlineAlert', () => {
 
       expect(component).toHaveClass('alert-neutral');
     });
-
-    it('has a top left arrow', () => {
-      render(<InlineAlert>{message}</InlineAlert>);
-      const component = screen.getByRole('alert');
-
-      expect(component).toHaveClass('arrow');
-    });
   });
 
   describe('render with types', () => {

package/src/inlineAlert/InlineAlert.tsx

@@ -1,59 +1,31 @@
 import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { ReactNode } from 'react';
 
-import withArrow, { AlertArrowPosition } from '../alert/withArrow';
 import { Sentiment } from '../common';
-import { SentimentString } from '../common/propsValues/sentiment';
 
 export interface InlineAlertProps {
   id?: string;
-  type?: Sentiment | SentimentString;
+  type?: `${Sentiment}`;
   className?: string;
   children: ReactNode;
 }
 
-const typeClassMap: Record<Sentiment.ERROR | Sentiment.NEGATIVE, string> = {
-  [Sentiment.ERROR]: 'danger',
-  [Sentiment.NEGATIVE]: 'danger',
-};
-
-const InlineAlert = ({ id, type = Sentiment.NEUTRAL, className, children }: InlineAlertProps) => {
-  const { isModern } = useTheme();
-
-  const typeClass = `alert-${typeClassMap[type as Sentiment.ERROR | Sentiment.NEGATIVE] || type}`;
-
-  if (isModern) {
-    return (
-      <div role="alert" id={id} className={classNames('alert alert-detach', typeClass, className)}>
-        {(type === 'error' || type === 'negative') && <AlertCircleIcon />}
-        <div>{children}</div>
-      </div>
-    );
-  }
-
-  const getAlertContents = ({
-    children,
-    className,
-  }: {
-    children: ReactNode;
-    className?: string;
-  }) => {
-    return (
-      <div
-        role="alert"
-        id={id}
-        className={classNames('alert alert-detach p-x-2 p-y-1', typeClass, className)}
-      >
-        {children}
-      </div>
-    );
-  };
-
-  const AlertWithArrow = withArrow(getAlertContents, AlertArrowPosition.TOP_LEFT);
-
-  return <AlertWithArrow {...{ id, type, className, children }} />;
-};
-
-export default InlineAlert;
+export default function InlineAlert({
+  id,
+  type = 'neutral',
+  className,
+  children,
+}: InlineAlertProps) {
+  const danger = type === 'negative' || type === 'error';
+  return (
+    <div
+      role="alert"
+      id={id}
+      className={classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className)}
+    >
+      {danger && <AlertCircleIcon />}
+      <div>{children}</div>
+    </div>
+  );
+}

package/src/inputs/InputGroup.tsx

@@ -107,9 +107,9 @@ function InputAddon({
   const ref = useRef<HTMLSpanElement>(null);
   useResizeObserver(ref, (entry) => {
     // TODO: Remove fallback once most browsers support `borderBoxSize`
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (entry.borderBoxSize != null) {
-      setInputPadding(entry.borderBoxSize[0].inlineSize);
+    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;
+    if (inlineSize != null) {
+      setInputPadding(inlineSize);
     } else {
       const targetStyle = getComputedStyle(entry.target);
       setInputPadding(

package/src/inputs/SelectInput.tsx

@@ -537,6 +537,7 @@ function SelectInputOptions<T = string>({
 
       <section
         ref={listboxContainerRef}
+        tabIndex={-1}
         className={classNames(
           'np-select-input-listbox-container',
           items.some((item) => item.type === 'group') &&

package/src/inputs/_BottomSheet.tsx

@@ -12,7 +12,6 @@ import classNames from 'classnames';
 import { useState } from 'react';
 
 import { CloseButton } from '../common/closeButton';
-import FocusBoundary from '../common/focusBoundary/FocusBoundary';
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
 import { Size } from '../common/propsValues/size';
 
@@ -81,65 +80,56 @@ export function BottomSheet({
             }}
             afterLeave={onCloseEnd}
           >
-            <FocusBoundary>
+            <Transition.Child
+              enter="np-bottom-sheet-v2-backdrop-container--enter"
+              enterFrom="np-bottom-sheet-v2-backdrop-container--enter-from"
+              leave="np-bottom-sheet-v2-backdrop-container--leave"
+              leaveTo="np-bottom-sheet-v2-backdrop-container--leave-to"
+            >
+              <div className="np-bottom-sheet-v2-backdrop" />
+            </Transition.Child>
+
+            <div className="np-bottom-sheet-v2">
               <Transition.Child
-                enter="np-bottom-sheet-v2-backdrop-container--enter"
-                enterFrom="np-bottom-sheet-v2-backdrop-container--enter-from"
-                leave="np-bottom-sheet-v2-backdrop-container--leave"
-                leaveTo="np-bottom-sheet-v2-backdrop-container--leave-to"
+                className="np-bottom-sheet-v2-content"
+                enter="np-bottom-sheet-v2-content--enter"
+                enterFrom="np-bottom-sheet-v2-content--enter-from"
+                leave="np-bottom-sheet-v2-content--leave"
+                leaveTo="np-bottom-sheet-v2-content--leave-to"
               >
-                <div className="np-bottom-sheet-v2-backdrop" />
-              </Transition.Child>
-
-              <div className="np-bottom-sheet-v2">
-                <Transition.Child
-                  className="np-bottom-sheet-v2-content"
-                  enter="np-bottom-sheet-v2-content--enter"
-                  enterFrom="np-bottom-sheet-v2-content--enter-from"
-                  leave="np-bottom-sheet-v2-content--leave"
-                  leaveTo="np-bottom-sheet-v2-content--leave-to"
-                >
-                  <FloatingFocusManager
-                    context={context}
-                    initialFocus={initialFocusRef}
-                    guards={false}
-                    modal={false}
+                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
+                  <div
+                    key={floatingKey} // Force inner state invalidation on open
+                    ref={refs.setFloating}
+                    className="np-bottom-sheet-v2-content-inner-container"
+                    {...getFloatingProps()}
                   >
+                    <div className="np-bottom-sheet-v2-header">
+                      <CloseButton
+                        size={Size.SMALL}
+                        onClick={() => {
+                          onClose?.();
+                        }}
+                      />
+                    </div>
                     <div
-                      key={floatingKey} // Force inner state invalidation on open
-                      ref={refs.setFloating}
-                      className="np-bottom-sheet-v2-content-inner-container"
-                      {...getFloatingProps()}
+                      className={classNames(
+                        'np-bottom-sheet-v2-content-inner',
+                        title && 'np-bottom-sheet-v2-content-inner--has-title',
+                        {
+                          'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
+                        },
+                      )}
                     >
-                      <div className="np-bottom-sheet-v2-header">
-                        <CloseButton
-                          size={Size.SMALL}
-                          onClick={() => {
-                            onClose?.();
-                          }}
-                        />
-                      </div>
-                      <div
-                        className={classNames(
-                          'np-bottom-sheet-v2-content-inner',
-                          title && 'np-bottom-sheet-v2-content-inner--has-title',
-                          {
-                            'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
-                          },
-                        )}
-                      >
-                        {title ? (
-                          <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
-                        ) : null}
-                        <div className="np-bottom-sheet-v2-body np-text-body-default">
-                          {children}
-                        </div>
-                      </div>
+                      {title ? (
+                        <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
+                      ) : null}
+                      <div className="np-bottom-sheet-v2-body np-text-body-default">{children}</div>
                     </div>
-                  </FloatingFocusManager>
-                </Transition.Child>
-              </div>
-            </FocusBoundary>
+                  </div>
+                </FloatingFocusManager>
+              </Transition.Child>
+            </div>
           </Transition>
         </ThemeProvider>
       </FloatingPortal>