@transferwise/components 0.0.0-experimental-c59c986 → 0.0.0-experimental-7025851

package/build/index.esm.js

@@ -7,19 +7,19 @@ import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1,
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
-import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
-import throttle from 'lodash.throttle';
-import { CSSTransition } from 'react-transition-group';
-import { createPortal } from 'react-dom';
-import { FocusScope } from '@react-aria/focus';
-import mergeRefs from 'react-merge-refs';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
-import { usePopper } from 'react-popper';
 import { Transition, Listbox } from '@headlessui/react';
 import mergeProps from 'merge-props';
+import mergeRefs from 'react-merge-refs';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
+import { FocusScope } from '@react-aria/focus';
 import { usePreventScroll } from '@react-aria/overlays';
+import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
+import { CSSTransition } from 'react-transition-group';
+import { usePopper } from 'react-popper';
+import throttle from 'lodash.throttle';
+import { createPortal } from 'react-dom';
+import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
 import { Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
@@ -2965,22 +2965,24 @@ const DateInput = ({
     }
   };
   const getSelectElement = () => {
-    const months = getMonthNames(locale, monthFormat);
+    const monthOptions = getMonthsOptions();
     return /*#__PURE__*/jsxs("label", {
+      className: "d-flex flex-column",
       children: [/*#__PURE__*/jsx("span", {
         className: "sr-only",
         children: monthLabel
-      }), /*#__PURE__*/jsx(Select, {
-        id: id ? `${id}-select` : undefined,
+      }), /*#__PURE__*/jsx(SelectInput, {
         name: "month",
         disabled: disabled,
         placeholder: placeholders.month,
-        options: getMonthsOptions(),
+        items: monthOptions,
         size: size,
-        selected: month === null ? null : {
-          value: month,
-          label: months[month]
-        },
+        value: monthOptions.find(item => item.value.value === month)?.value,
+        renderValue: ({
+          label
+        }) => /*#__PURE__*/jsx(SelectInputOptionContent, {
+          title: label
+        }),
         onChange: selectedValue => handleMonthChange(selectedValue),
         ...selectProps
       })]
@@ -2991,8 +2993,11 @@ const DateInput = ({
     const months = getMonthNames(locale, monthFormat);
     months.forEach((label, index) => {
       options.push({
-        value: index,
-        label
+        type: 'option',
+        value: {
+          label,
+          value: index
+        }
       });
     });
     return options;
@@ -3570,26 +3575,8 @@ DateHeader.defaultProps = {
 };
 var DateHeader$1 = DateHeader;
 
-function getFocusableTime(isSelected, isNow, isDisabled, timeSpan) {
-  let selected = null;
-  let now = null;
-  let disabled = null;
-  for (const time of timeSpan) {
-    if (isSelected(time)) {
-      selected = time;
-      break;
-    }
-    if (isNow(time)) {
-      now = time;
-    }
-    if (!isDisabled(time) && disabled === null) {
-      disabled = time;
-    }
-    if (selected) {
-      break;
-    }
-  }
-  return selected || now || disabled;
+function getFocusableTime(props) {
+  return props.timeSpan.find(time => props.isActive(time)) || props.timeSpan.find(time => props.isNow(time) && !props.isDisabled(time)) || props.timeSpan.find(time => !props.isDisabled(time));
 }
 
 // NB! Using with UTC timestamp (YYYY-MM-DD) might lead to unexpected results, for example
@@ -3612,12 +3599,10 @@ const TableLink = ({
   disabled,
   today,
   autofocus,
-  onClick,
-  intl: {
-    formatMessage
-  }
+  onClick
 }) => {
   const buttonRef = useRef(null);
+  const intl = useIntl();
   useEffect(() => {
     if (autofocus) {
       setTimeout(() => {
@@ -3633,7 +3618,7 @@ const TableLink = ({
   };
   const calculateAriaLabel = () => {
     if (active) {
-      return `${longTitle || title || ''}, ${formatMessage(messages$6.selected)} ${formatMessage(messages$6[type])}`;
+      return `${longTitle || title || ''}, ${intl.formatMessage(messages$6.selected)} ${intl.formatMessage(messages$6[type])}`;
     }
     return longTitle || title;
   };
@@ -3655,7 +3640,6 @@ const TableLink = ({
     })
   });
 };
-var TableLink$1 = injectIntl(TableLink);
 
 const SHORT_DAY_FORMAT = {
   day: 'numeric'
@@ -3735,7 +3719,12 @@ class DayCalendarTable extends PureComponent {
   };
   getAutofocusDay = weeks => {
     const days = weeks.flatMap(week => week);
-    return getFocusableTime(this.isActive, this.isToday, this.isDisabled, days);
+    return getFocusableTime({
+      isActive: this.isActive,
+      isNow: this.isToday,
+      isDisabled: this.isDisabled,
+      timeSpan: days
+    });
   };
   render() {
     const {
@@ -3772,7 +3761,7 @@ class DayCalendarTable extends PureComponent {
         children: weeks.map((week, weekIndex) => /*#__PURE__*/jsx("tr", {
           children: week.map((day, dayIndex) => /*#__PURE__*/jsx("td", {
             className: dayIndex > 4 ? 'default' : '',
-            children: day && /*#__PURE__*/jsx(TableLink$1, {
+            children: day && /*#__PURE__*/jsx(TableLink, {
               item: day,
               type: "day",
               title: formatDate(new Date(viewYear, viewMonth, day), locale, SHORT_DAY_FORMAT),
@@ -3896,18 +3885,18 @@ const MonthCalendarTable = ({
     locale
   } = useIntl();
   const getLink = month => {
-    return /*#__PURE__*/jsx(TableLink$1, {
+    return /*#__PURE__*/jsx(TableLink, {
       item: month,
       type: "month",
       title: formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT),
-      active: isSelected(month),
+      active: isActive(month),
       disabled: isDisabled(month),
       today: viewYear === new Date().getFullYear() && month === new Date().getMonth(),
       autofocus: autofocusMonth === month,
       onClick: onSelect
     });
   };
-  const isSelected = month => {
+  const isActive = month => {
     return selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear();
   };
   const isThisMonth = month => {
@@ -3919,7 +3908,12 @@ const MonthCalendarTable = ({
   };
   const autofocusMonth = (() => {
     const months = [...new Array(ROWS$1 * COLS$1)].map((_, index) => index);
-    return getFocusableTime(isSelected, isThisMonth, isDisabled, months);
+    return getFocusableTime({
+      isActive,
+      isNow: isThisMonth,
+      isDisabled,
+      timeSpan: months
+    });
   })();
   return /*#__PURE__*/jsxs("table", {
     className: "table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0",
@@ -4040,7 +4034,7 @@ const YearCalendarTable = ({
   } = useIntl();
   const startYear = viewYear - viewYear % 20;
   const getLink = year => {
-    return /*#__PURE__*/jsx(TableLink$1, {
+    return /*#__PURE__*/jsx(TableLink, {
       item: year,
       type: "year",
       title: formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT),
@@ -4051,7 +4045,7 @@ const YearCalendarTable = ({
       onClick: onSelect
     });
   };
-  const isSelected = year => {
+  const isActive = year => {
     return selectedDate && year === selectedDate.getFullYear();
   };
   const isThisYear = year => {
@@ -4062,7 +4056,12 @@ const YearCalendarTable = ({
   };
   const autofocusYear = (() => {
     const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
-    return getFocusableTime(isSelected, isThisYear, isDisabled, years);
+    return getFocusableTime({
+      isActive,
+      isNow: isThisYear,
+      isDisabled,
+      timeSpan: years
+    });
   })();
   return /*#__PURE__*/jsxs("table", {
     className: "table table-condensed table-bordered tw-date-lookup-calendar m-b-0",
@@ -7921,6 +7920,10 @@ const getUniqueIdForOption = (parentId = '', option) => {
   const uniqueOptionId = option.value || (option.label?.replace(/\s/g, '') ?? '');
   return `option-${parentId}-${uniqueOptionId}`;
 };
+
+/**
+ * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
+ */
 function Select({
   placeholder,
   id,