@transferwise/components 0.0.0-experimental-e05dfa3 → 0.0.0-experimental-7905c27

package/build/index.js

@@ -9,18 +9,18 @@ var PropTypes = require('prop-types');
 var reactIntl = require('react-intl');
 var componentsTheming = require('@wise/components-theming');
 var formatting = require('@transferwise/formatting');
-var throttle = require('lodash.throttle');
-var reactTransitionGroup = require('react-transition-group');
-var reactDom = require('react-dom');
-var focus = require('@react-aria/focus');
-var mergeRefs = require('react-merge-refs');
-var shim = require('use-sync-external-store/shim');
-var neptuneValidation = require('@transferwise/neptune-validation');
-var reactPopper = require('react-popper');
 var react$1 = require('@headlessui/react');
 var mergeProps = require('merge-props');
+var mergeRefs = require('react-merge-refs');
+var shim = require('use-sync-external-store/shim');
 var react = require('@floating-ui/react');
+var focus = require('@react-aria/focus');
 var overlays = require('@react-aria/overlays');
+var reactTransitionGroup = require('react-transition-group');
+var reactPopper = require('react-popper');
+var throttle = require('lodash.throttle');
+var reactDom = require('react-dom');
+var neptuneValidation = require('@transferwise/neptune-validation');
 var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
@@ -53,9 +53,9 @@ function _interopNamespace(e) {
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var throttle__default = /*#__PURE__*/_interopDefault(throttle);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
+var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
+var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
@@ -2934,6 +2934,8 @@ const INITIAL_DEFAULT_STATE = {
   day: null
 };
 const DateInput = ({
+  'aria-labelledby': ariaLabelledBy,
+  'aria-label': ariaLabel,
   disabled,
   size,
   value,
@@ -2999,20 +3001,25 @@ const DateInput = ({
   const getSelectElement = () => {
     const months = getMonthNames(locale, monthFormat);
     return /*#__PURE__*/jsxRuntime.jsxs("label", {
+      className: "d-flex flex-column",
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: "sr-only",
         children: monthLabel
-      }), /*#__PURE__*/jsxRuntime.jsx(Select, {
-        id: id ? `${id}-select` : undefined,
+      }), /*#__PURE__*/jsxRuntime.jsx(SelectInput, {
         name: "month",
         disabled: disabled,
         placeholder: placeholders.month,
-        options: getMonthsOptions(),
+        items: getMonthsOptions(),
         size: size,
-        selected: month === null ? null : {
+        value: month === null ? null : {
           value: month,
           label: months[month]
         },
+        renderValue: ({
+          label
+        }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContent, {
+          title: label
+        }),
         onChange: selectedValue => handleMonthChange(selectedValue),
         ...selectProps
       })]
@@ -3023,8 +3030,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;
@@ -3121,6 +3131,8 @@ const DateInput = ({
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "tw-date",
     id: id,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
     onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation(),
     onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur() : event.stopPropagation(),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -3203,6 +3215,8 @@ function shouldPropagateOnBlur({
   return blurElementParent !== focusElementParent;
 }
 DateInput.propTypes = {
+  'aria-label': PropTypes__default.default.string,
+  'aria-labelledby': PropTypes__default.default.string,
   disabled: PropTypes__default.default.bool,
   size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
   value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.instanceOf(Date)]),
@@ -3598,28 +3612,6 @@ 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;
-}
-
 // NB! Using with UTC timestamp (YYYY-MM-DD) might lead to unexpected results, for example
 // getStartOfDay(new Date('1995-01-01')) in Los Angeles returns 31 Dec 1994, but in
 // in Singapore it is 1 Jan 1995.
@@ -3631,57 +3623,59 @@ function getStartOfDay(date) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
 }
 
-const TableLink = ({
-  item,
-  type,
-  title,
-  longTitle,
-  active,
-  disabled,
-  today,
-  autofocus,
-  onClick,
-  intl: {
-    formatMessage
-  }
-}) => {
-  const buttonRef = React.useRef(null);
-  React.useEffect(() => {
-    if (autofocus) {
-      setTimeout(() => {
-        buttonRef.current?.focus();
-      }, 0);
-    }
-  }, [autofocus]);
-  const onCalendarClick = event => {
+class TableLink extends React.PureComponent {
+  onClick = event => {
     event.preventDefault();
-    if (!disabled) {
-      onClick(item);
+    if (!this.props.disabled) {
+      this.props.onClick(this.props.item);
     }
   };
-  const calculateAriaLabel = () => {
+  calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
     if (active) {
-      return `${longTitle || title || ''}, ${formatMessage(messages$6.selected)} ${formatMessage(messages$6[type])}`;
+      return `${longTitle || title}, ${formatMessage(messages$6.selected)} ${formatMessage(messages$6[type])}`;
     }
     return longTitle || title;
   };
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/jsxRuntime.jsx("button", {
-      ref: buttonRef,
-      type: "button",
-      className: classNames__default.default(`tw-date-lookup-${type}-option np-text-body-default-bold`, {
-        active: !!active
-      }, {
-        today: !!today
-      }),
-      disabled: disabled,
-      tabIndex: autofocus ? 0 : -1,
-      "aria-label": calculateAriaLabel(),
-      "aria-pressed": active,
-      onClick: onCalendarClick,
-      children: title || item
-    })
-  });
+  render() {
+    const {
+      item,
+      type,
+      title,
+      longTitle,
+      active,
+      disabled,
+      today,
+      intl: {
+        formatMessage
+      }
+    } = this.props;
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        className: `tw-date-lookup-${type}-option ${active ? 'active' : ''} ${today ? 'today' : ''} np-text-body-default-bold`,
+        disabled: disabled,
+        "aria-label": this.calculateAriaLabel(longTitle, title, active, type, formatMessage),
+        "aria-pressed": active,
+        onClick: this.onClick,
+        children: title || item
+      })
+    });
+  }
+}
+TableLink.propTypes = {
+  item: PropTypes__default.default.number.isRequired,
+  // day (1-31), month (0-11) or year (2018 etc)
+  type: PropTypes__default.default.oneOf(['day', 'month', 'year']).isRequired,
+  title: PropTypes__default.default.string,
+  longTitle: PropTypes__default.default.string,
+  active: PropTypes__default.default.bool.isRequired,
+  disabled: PropTypes__default.default.bool.isRequired,
+  today: PropTypes__default.default.bool.isRequired,
+  onClick: PropTypes__default.default.func.isRequired
+};
+TableLink.defaultProps = {
+  title: null,
+  longTitle: null
 };
 var TableLink$1 = reactIntl.injectIntl(TableLink);
 
@@ -3754,17 +3748,6 @@ class DayCalendarTable extends React.PureComponent {
     } = this.props;
     return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
-  isToday = day => {
-    const {
-      viewMonth,
-      viewYear
-    } = this.props;
-    return +getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day);
-  };
-  getAutofocusDay = weeks => {
-    const days = weeks.flatMap(week => week);
-    return getFocusableTime(this.isActive, this.isToday, this.isDisabled, days);
-  };
   render() {
     const {
       viewMonth,
@@ -3774,7 +3757,6 @@ class DayCalendarTable extends React.PureComponent {
       }
     } = this.props;
     const weeks = this.getTableStructure();
-    let autoFocusDay = this.getAutofocusDay(weeks, viewMonth, viewYear);
     return /*#__PURE__*/jsxRuntime.jsxs("table", {
       className: "table table-condensed table-bordered tw-date-lookup-calendar m-b-0",
       children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
@@ -3804,11 +3786,10 @@ class DayCalendarTable extends React.PureComponent {
               item: day,
               type: "day",
               title: formatting.formatDate(new Date(viewYear, viewMonth, day), locale, SHORT_DAY_FORMAT),
-              autofocus: day === autoFocusDay,
               longTitle: formatting.formatDate(new Date(viewYear, viewMonth, day), locale),
               active: this.isActive(day),
               disabled: this.isDisabled(day),
-              today: this.isToday(day),
+              today: +getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day),
               onClick: this.selectDay
             })
           }, dayIndex))
@@ -3909,11 +3890,11 @@ var DayCalendar$1 = reactIntl.injectIntl(DayCalendar);
 
 const ROWS$1 = 3;
 const COLS$1 = 4;
-const MONTH_ONLY_FORMAT = {
+const MONTH_ONLY_FORMAY = {
   month: 'short'
 };
 const MonthCalendarTable = ({
-  selectedDate,
+  selectedDate: selected,
   min,
   max,
   viewYear,
@@ -3923,32 +3904,19 @@ const MonthCalendarTable = ({
   const {
     locale
   } = reactIntl.useIntl();
-  const getLink = month => {
-    return /*#__PURE__*/jsxRuntime.jsx(TableLink$1, {
-      item: month,
-      type: "month",
-      title: formatting.formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT),
-      active: isSelected(month),
-      disabled: isDisabled(month),
-      today: viewYear === new Date().getFullYear() && month === new Date().getMonth(),
-      autofocus: autofocusMonth === month,
-      onClick: onSelect
-    });
-  };
-  const isSelected = month => {
-    return selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear();
-  };
-  const isThisMonth = month => {
-    return viewYear === new Date().getFullYear() && month === new Date().getMonth();
-  };
+  const getLink = month => /*#__PURE__*/jsxRuntime.jsx(TableLink$1, {
+    item: month,
+    type: "month",
+    title: formatting.formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAY),
+    active: !!(selected && month === selected.getMonth() && viewYear === selected.getFullYear()),
+    disabled: isDisabled(month),
+    today: viewYear === new Date().getFullYear() && month === new Date().getMonth(),
+    onClick: onSelect
+  });
   const isDisabled = month => {
     const date = new Date(viewYear, month);
     return !!(min && date < new Date(min.getFullYear(), min.getMonth()) || max && date > new Date(max.getFullYear(), max.getMonth()));
   };
-  const autofocusMonth = (() => {
-    const months = [...new Array(ROWS$1 * COLS$1)].map((_, index) => index);
-    return getFocusableTime(isSelected, isThisMonth, isDisabled, months);
-  })();
   return /*#__PURE__*/jsxRuntime.jsxs("table", {
     className: "table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0",
     children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
@@ -4067,31 +4035,15 @@ const YearCalendarTable = ({
     locale
   } = reactIntl.useIntl();
   const startYear = viewYear - viewYear % 20;
-  const getLink = year => {
-    return /*#__PURE__*/jsxRuntime.jsx(TableLink$1, {
-      item: year,
-      type: "year",
-      title: formatting.formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT),
-      active: !!(selectedDate && year === selectedDate.getFullYear()),
-      disabled: isDisabled(year),
-      today: year === new Date().getFullYear(),
-      autofocus: autofocusYear === year,
-      onClick: onSelect
-    });
-  };
-  const isSelected = year => {
-    return selectedDate && year === selectedDate.getFullYear();
-  };
-  const isThisYear = year => {
-    return year === new Date().getFullYear();
-  };
-  const isDisabled = year => {
-    return !!(min && year < min.getFullYear() || max && year > max.getFullYear());
-  };
-  const autofocusYear = (() => {
-    const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
-    return getFocusableTime(isSelected, isThisYear, isDisabled, years);
-  })();
+  const getLink = year => /*#__PURE__*/jsxRuntime.jsx(TableLink$1, {
+    item: year,
+    type: "year",
+    title: formatting.formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT),
+    active: !!(selectedDate && year === selectedDate.getFullYear()),
+    disabled: !!(min && year < min.getFullYear() || max && year > max.getFullYear()),
+    today: year === new Date().getFullYear(),
+    onClick: onSelect
+  });
   return /*#__PURE__*/jsxRuntime.jsxs("table", {
     className: "table table-condensed table-bordered tw-date-lookup-calendar m-b-0",
     children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
@@ -4198,7 +4150,6 @@ class DateLookup extends React.PureComponent {
     super(props);
     this.state = {
       selectedDate: getStartOfDay(props.value),
-      originalDate: null,
       min: getStartOfDay(props.min),
       max: getStartOfDay(props.max),
       viewMonth: (props.value || new Date()).getMonth(),
@@ -4261,15 +4212,6 @@ class DateLookup extends React.PureComponent {
       onFocus();
     }
   };
-  discard = () => {
-    const {
-      originalDate
-    } = this.state;
-    if (originalDate !== null) {
-      this.props.onChange(originalDate);
-    }
-    this.close();
-  };
   close = () => {
     const {
       onBlur
@@ -4283,8 +4225,7 @@ class DateLookup extends React.PureComponent {
   };
   handleKeyDown = event => {
     const {
-      open,
-      originalDate
+      open
     } = this.state;
     switch (event.keyCode) {
       case KeyCodes.LEFT:
@@ -4320,7 +4261,6 @@ class DateLookup extends React.PureComponent {
         event.preventDefault();
         break;
       case KeyCodes.ESCAPE:
-        originalDate && this.props.onChange(originalDate);
         this.close();
         event.preventDefault();
         break;
@@ -4331,14 +4271,8 @@ class DateLookup extends React.PureComponent {
       selectedDate,
       min,
       max,
-      mode,
-      originalDate
+      mode
     } = this.state;
-    if (originalDate === null) {
-      this.setState({
-        originalDate: selectedDate
-      });
-    }
     let date;
     if (selectedDate) {
       date = new Date(mode === MODE.YEAR ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(), mode === MODE.MONTH ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(), mode === MODE.DAY ? selectedDate.getDate() + daysToAdd : selectedDate.getDate());
@@ -4471,7 +4405,7 @@ class DateLookup extends React.PureComponent {
         open: open,
         className: "tw-date-lookup-menu",
         position: exports.Position.BOTTOM,
-        onClose: this.discard,
+        onClose: this.close,
         children: this.getCalendar()
       })]
     });
@@ -7946,6 +7880,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,