@transferwise/components 0.0.0-experimental-45502d0 → 0.0.0-experimental-bb03a6a

package/build/index.js

@@ -2320,7 +2320,6 @@ const Button = /*#__PURE__*/React.forwardRef(({
   priority = exports.Priority.PRIMARY,
   size = exports.Size.MEDIUM,
   type = exports.ControlType.ACCENT,
-  'aria-label': ariaLabel,
   ...rest
 }, reference) => {
   const intl = reactIntl.useIntl();
@@ -2370,7 +2369,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
     className: classes,
     ...props,
     "aria-live": loading ? 'polite' : 'off',
-    "aria-label": loading ? intl.formatMessage(messages$9.loadingAriaLabel) : ariaLabel,
+    "aria-label": loading ? intl.formatMessage(messages$9.loadingAriaLabel) : undefined,
     children: [children, loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator$1, {
       size: processIndicatorSize(),
       className: "btn-loader"
@@ -3507,59 +3506,50 @@ function getStartOfDay(date) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
 }
 
-class TableLink extends React.PureComponent {
-  onClick = event => {
+const TableLink = ({
+  item,
+  type,
+  title,
+  longTitle,
+  active,
+  disabled,
+  today,
+  autofocus,
+  onClick,
+  intl: {
+    formatMessage
+  }
+}) => {
+  const buttonRef = React.useRef(null);
+  React.useEffect(() => {
+    if (autofocus) {
+      buttonRef.current?.focus();
+    }
+  }, []);
+  const onCalendarClick = event => {
     event.preventDefault();
-    if (!this.props.disabled) {
-      this.props.onClick(this.props.item);
+    if (!disabled) {
+      onClick(item);
     }
   };
-  calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
+  const calculateAriaLabel = () => {
     if (active) {
-      return `${longTitle || title}, ${formatMessage(messages$5.selected)} ${formatMessage(messages$5[type])}`;
+      return `${longTitle || title || ''}, ${formatMessage(messages$5.selected)} ${formatMessage(messages$5[type])}`;
     }
     return longTitle || title;
   };
-  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
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/jsxRuntime.jsx("button", {
+      ref: buttonRef,
+      type: "button",
+      className: `tw-date-lookup-${type}-option ${active ? 'active' : ''} ${today ? 'today' : ''} np-text-body-default-bold`,
+      disabled: disabled,
+      "aria-label": calculateAriaLabel(),
+      "aria-pressed": active,
+      onClick: onCalendarClick,
+      children: title || item
+    })
+  });
 };
 var TableLink$1 = reactIntl.injectIntl(TableLink);
 
@@ -3632,6 +3622,25 @@ class DayCalendarTable extends React.PureComponent {
     } = this.props;
     return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
+  getAutofocusDay = weeks => {
+    let activeDay = null;
+    let lowestNonDisabledDay = null;
+    for (const week of weeks) {
+      for (const day of week) {
+        if (this.isActive(day)) {
+          activeDay = day;
+          break;
+        }
+        if (!this.isDisabled(day) && lowestNonDisabledDay === null) {
+          lowestNonDisabledDay = day;
+        }
+      }
+      if (activeDay !== null) {
+        break;
+      }
+    }
+    return activeDay || lowestNonDisabledDay;
+  };
   render() {
     const {
       viewMonth,
@@ -3641,6 +3650,7 @@ class DayCalendarTable extends React.PureComponent {
       }
     } = this.props;
     const weeks = this.getTableStructure();
+    let autoFocusDay = this.getAutofocusDay(weeks);
     return /*#__PURE__*/jsxRuntime.jsxs("table", {
       className: "table table-condensed table-bordered tw-date-lookup-calendar m-b-0",
       children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
@@ -3670,6 +3680,7 @@ 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),