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

package/build/types/button/Button.d.ts

@@ -12,7 +12,6 @@ export type CommonProps = {
     type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes;
     priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
     size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
-    'aria-label'?: string;
 };
 export type ButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
     as?: 'button';

package/build/types/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAG5F,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACV,MAAM,WAAW,CAAC;AAOnB,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,CAAC;IACvF,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG;IACtD,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,oBAAoB,CAAC,iBAAiB,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG;IACxB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,WAAW,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAExE,QAAA,MAAM,MAAM,uGA6EX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAG5F,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACV,MAAM,WAAW,CAAC;AAOnB,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,CAAC;IACvF,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG;IACtD,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,oBAAoB,CAAC,iBAAiB,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG;IACxB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,WAAW,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAExE,QAAA,MAAM,MAAM,uGA4EX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/dateLookup/tableLink/TableLink.d.ts

@@ -1,5 +1,19 @@
-declare const _default: import("react").FC<import("react-intl").WithIntlProps<any>> & {
-    WrappedComponent: import("react").ComponentType<any>;
+/// <reference types="react" />
+import { IntlShape } from 'react-intl';
+interface TableLinkProps {
+    item: number;
+    type: 'day' | 'month' | 'year';
+    title?: string;
+    longTitle?: string;
+    active: boolean;
+    disabled: boolean;
+    today: boolean;
+    autofocus?: boolean;
+    onClick: (item: number) => void;
+    intl: IntlShape;
+}
+declare const _default: import("react").FC<import("react-intl").WithIntlProps<TableLinkProps>> & {
+    WrappedComponent: import("react").ComponentType<TableLinkProps>;
 };
 export default _default;
 //# sourceMappingURL=TableLink.d.ts.map

package/build/types/dateLookup/tableLink/TableLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.js"],"names":[],"mappings":""}
+{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.tsx"],"names":[],"mappings":";AACA,OAAO,EAAc,SAAS,EAAE,MAAM,YAAY,CAAC;AAInD,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,SAAS,CAAC;CACjB;;;;AAyDD,wBAAqC"}

package/build/types/dateLookup/tableLink/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./TableLink";
+export { default } from './TableLink';
 //# sourceMappingURL=index.d.ts.map

package/build/types/dateLookup/tableLink/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-45502d0",
+  "version": "0.0.0-experimental-bb03a6a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/button/Button.spec.js

@@ -85,12 +85,6 @@ describe('Button', () => {
       render(<Button {...props} className="catsarethebest" />);
       expect(screen.getByRole('button')).toHaveClass('catsarethebest');
     });
-
-    it('passes through aria-label if set', () => {
-      render(<Button {...props} aria-label="unique label" />);
-      const loadingButton = screen.getByLabelText('unique label');
-      expect(loadingButton).toBeInTheDocument();
-    });
   });
 
   describe('onClick', () => {
@@ -176,12 +170,6 @@ describe('Button', () => {
       expect(screen.getByRole('button', { name: 'loading' })).toBeInTheDocument();
     });
 
-    it('loading button has aria-label of loading', () => {
-      render(<Button {...props} loading />);
-      const loadingButton = screen.getByLabelText('loading');
-      expect(loadingButton).toBeInTheDocument();
-    });
-
     it('renders as block if block is true', () => {
       expect(render(<Button {...props} block />).container).toMatchSnapshot();
     });

package/src/button/Button.tsx

@@ -38,7 +38,6 @@ export type CommonProps = {
   type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes;
   priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
   size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
-  'aria-label'?: string;
 };
 
 export type ButtonProps = CommonProps &
@@ -70,7 +69,6 @@ const Button = forwardRef<ButtonReferenceType, Props>(
       priority = Priority.PRIMARY,
       size = Size.MEDIUM,
       type = ControlType.ACCENT,
-      'aria-label': ariaLabel,
       ...rest
     }: Props,
     reference,
@@ -128,7 +126,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
         className={classes}
         {...props}
         aria-live={loading ? 'polite' : 'off'}
-        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : ariaLabel}
+        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : undefined}
       >
         {children}
         {loading && <ProcessIndicator size={processIndicatorSize()} className="btn-loader" />}

package/src/dateLookup/dayCalendar/table/DayCalendarTable.js

@@ -65,6 +65,30 @@ class DayCalendarTable extends PureComponent {
     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,
@@ -72,6 +96,7 @@ class DayCalendarTable extends PureComponent {
       intl: { locale },
     } = this.props;
     const weeks = this.getTableStructure();
+    let autoFocusDay = this.getAutofocusDay(weeks);
     return (
       <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
         <thead>
@@ -103,6 +128,7 @@ class DayCalendarTable extends PureComponent {
                         locale,
                         SHORT_DAY_FORMAT,
                       )}
+                      autofocus={day === autoFocusDay}
                       longTitle={formatDate(new Date(viewYear, viewMonth, day), locale)}
                       active={this.isActive(day)}
                       disabled={this.isDisabled(day)}

package/src/dateLookup/tableLink/TableLink.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react';
+import { injectIntl, IntlShape } from 'react-intl';
+
+import messages from '../DateLookup.messages';
+
+interface TableLinkProps {
+  item: number;
+  type: 'day' | 'month' | 'year';
+  title?: string;
+  longTitle?: string;
+  active: boolean;
+  disabled: boolean;
+  today: boolean;
+  autofocus?: boolean;
+  onClick: (item: number) => void;
+  intl: IntlShape;
+}
+
+const TableLink = ({
+  item,
+  type,
+  title,
+  longTitle,
+  active,
+  disabled,
+  today,
+  autofocus,
+  onClick,
+  intl: { formatMessage },
+}: TableLinkProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (autofocus) {
+      buttonRef.current?.focus();
+    }
+  }, []);
+
+  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    if (!disabled) {
+      onClick(item);
+    }
+  };
+
+  const calculateAriaLabel = () => {
+    if (active) {
+      return `${longTitle || title || ''}, ${formatMessage(messages.selected)} ${formatMessage(
+        messages[type],
+      )}`;
+    }
+    return longTitle || title;
+  };
+
+  return (
+    <>
+      <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}
+      >
+        {title || item}
+      </button>
+    </>
+  );
+};
+
+export default injectIntl(TableLink);

package/src/dateLookup/tableLink/TableLink.js

@@ -1,70 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
-
-import messages from '../DateLookup.messages';
-
-class TableLink extends PureComponent {
-  onClick = (event) => {
-    event.preventDefault();
-    if (!this.props.disabled) {
-      this.props.onClick(this.props.item);
-    }
-  };
-
-  calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
-    if (active) {
-      return `${longTitle || title}, ${formatMessage(messages.selected)} ${formatMessage(
-        messages[type],
-      )}`;
-    }
-    return longTitle || title;
-  };
-
-  render() {
-    const {
-      item,
-      type,
-      title,
-      longTitle,
-      active,
-      disabled,
-      today,
-      intl: { formatMessage },
-    } = this.props;
-    return (
-      <>
-        <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}
-        >
-          {title || item}
-        </button>
-      </>
-    );
-  }
-}
-
-TableLink.propTypes = {
-  item: PropTypes.number.isRequired, // day (1-31), month (0-11) or year (2018 etc)
-  type: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
-  title: PropTypes.string,
-  longTitle: PropTypes.string,
-  active: PropTypes.bool.isRequired,
-  disabled: PropTypes.bool.isRequired,
-  today: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-TableLink.defaultProps = {
-  title: null,
-  longTitle: null,
-};
-
-export default injectIntl(TableLink);