@transferwise/components 45.26.0 → 45.26.2

package/src/popover/Popover.js

@@ -39,7 +39,7 @@ const Popover = ({ children, className, content, preferredPlacement, title }) =>
         <div
           className={isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content'}
           aria-hidden={!open}
-          role="tooltip"
+          role="dialog"
         >
           {title && (
             <Title type={Typography.TITLE_BODY} className="m-b-1">

package/src/popover/__snapshots__/Popover.spec.js.snap

@@ -14,7 +14,7 @@ exports[`Popover on desktop renders when is open 1`] = `
     <div
       aria-hidden="false"
       class="np-popover__content"
-      role="tooltip"
+      role="dialog"
     >
       <h4
         class="np-text-title-body m-b-1"
@@ -89,7 +89,7 @@ exports[`Popover on mobile renders when is open 1`] = `
           <div
             aria-hidden="false"
             class="np-popover__content"
-            role="tooltip"
+            role="dialog"
           >
             <h4
               class="np-text-title-body m-b-1"

package/src/summary/Summary.tsx

@@ -100,7 +100,6 @@ const Summary = ({
   help,
   icon,
   illustration = null,
-  // @ts-expect-error help is old and deprecated prop
   info = help,
   status,
   title,

package/src/typeahead/Typeahead.story.js

@@ -114,3 +114,9 @@ export const Basic = () => {
     />
   );
 };
+
+Basic.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  userEvent.type(canvas.getByRole('combobox'), 'abc');
+  userEvent.type(canvas.getByRole('combobox'), '{arrowDown}');
+};

package/src/typeahead/typeaheadOption/TypeaheadOption.css

@@ -1 +1 @@
-.typeahead__option.tw-dropdown-item .dropdown-item:active strong{color:#fff}.typeahead__option.tw-dropdown-item--focused{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}
+.typeahead__option.tw-dropdown-item .dropdown-item:active strong{color:#fff}.typeahead__option.tw-dropdown-item--focused{border-radius:10px;border-radius:var(--radius-small);box-shadow:inset 0 0 0 1px #c9cbce;box-shadow:inset 0 0 0 1px var(--color-interactive-secondary)}

package/src/typeahead/typeaheadOption/TypeaheadOption.js

@@ -16,7 +16,7 @@ const Option = (props) => {
         'tw-dropdown-item--focused': selected,
       })}
     >
-      <a className="dropdown-item" href="#" onClick={onClick}>
+      <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
         <span>{hightlight(label, query)}</span>
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && <span className="np-text-body-default text-ellipsis">{secondary}</span>}

package/src/typeahead/typeaheadOption/TypeaheadOption.less

@@ -8,6 +8,7 @@
   }
 
   &--focused {
-    background-color: var(--color-background-neutral);
+    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+    border-radius: var(--radius-small);
   }
 }

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);