@transferwise/components 46.67.1 → 46.68.0

package/src/main.css

@@ -543,6 +543,9 @@ div.critical-comms .critical-comms-body {
 .np-btn.np-btn-xs.btn-block > span.btn-loader {
   top: 0;
 }
+.np-btn.disabled[class] {
+  pointer-events: auto;
+}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;
@@ -5458,280 +5461,279 @@ html:not([dir="rtl"]) .np-navigation-option {
 .upload-error-message .alert {
   min-width: 100px;
 }
-.np-upload-button-container {
-  border-style: solid;
-}
-.np-upload-button-container .droppable-card-content {
+.np-upload-input__upload-button {
+  position: relative;
+  padding: 16px;
+  padding: var(--size-16);
   display: flex;
+  align-items: center;
+  margin: 0;
+  border-bottom-left-radius: 10px;
+  border-bottom-left-radius: var(--radius-small);
+  border-bottom-right-radius: 10px;
+  border-bottom-right-radius: var(--radius-small);
+  border: var(--outerBorder);
+  cursor: pointer;
+}
+.np-upload-input__upload-button .np-upload-input__title {
+  color: var(--color-content-link);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-underline-offset: 0.3em;
 }
-.np-upload-button-container.droppable-dropping {
-  border-color: #c9cbce !important;
-  border-color: var(--color-interactive-secondary) !important;
+.np-upload-input__upload-button .np-upload-input__title + .np-upload-input__text {
+  margin-top: 4px;
+  margin-top: var(--size-4);
 }
-.np-upload-button-container.droppable-dropping:before {
-  z-index: 2;
+.np-upload-input__upload-button .np-upload-input__icon {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+  color: var(--color-interactive-primary);
 }
-.np-upload-button-container input[type="file"] {
+.np-upload-input__upload-button.is-dropping .np-upload-input__icon,
+.np-upload-input__upload-button.is-dropping .np-upload-input__item-content {
+  display: none;
+}
+.np-upload-input__upload-button:focus-within,
+.np-upload-input__upload-button:focus-visible {
+  outline: var(--ring-outline-color) solid 3px;
+  outline-offset: -3px;
+}
+.np-upload-input__upload-button-input {
+  position: absolute;
   opacity: 0;
   z-index: -1;
+}
+.np-upload-input__upload-button-input:focus {
+  outline: none;
+}
+.np-upload-input__upload-button .np-upload-input__drop-file-overlay {
+  display: flex;
+  flex: 1;
+  padding: 13px 0 !important;
+  background-color: transparent;
+  transition: transform 0.3s ease;
+  position: relative;
+}
+.np-upload-input__upload-button--with-entries {
+  border-top-width: 0;
+}
+.np-upload-input__upload-button--with-entries:before {
+  display: block;
   position: absolute;
+  height: 1px;
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
+  content: " ";
+  left: 16px;
+  left: var(--size-16);
+  width: calc(100% - 2 * 16px);
+  width: calc(100% - 2 * var(--size-16));
+  top: 0;
 }
-.np-upload-button-container .np-upload-button {
-  border: none;
+.np-upload-input__upload-button--without-entries {
+  border-top: var(--outerBorder);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-upload-input__upload-button--enabled.is-dropping,
+.np-upload-input__upload-button--enabled:hover,
+.np-upload-input__upload-button--enabled:active {
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
 }
-.np-upload-button {
+.np-upload-input__upload-button--enabled.is-dropping:before,
+.np-upload-input__upload-button--enabled:hover:before,
+.np-upload-input__upload-button--enabled:active:before {
   width: 100%;
-  border-top: 1px solid transparent;
-  padding: 16px;
-  padding: var(--padding-small);
-  border-radius: 0;
+  left: 0;
 }
-label.np-upload-button:not(.disabled):hover,
-label.np-upload-button:not(.disabled):active {
-  background-color: var(--color-background-screen-hover);
+.np-upload-input__upload-button--disabled {
+  cursor: inherit;
 }
-.disabled label.np-upload-button:not(.disabled):hover,
-.disabled label.np-upload-button:not(.disabled):active {
-  background-color: transparent;
+.np-upload-input {
+  --outerBorder: 1px solid var(--color-interactive-secondary);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
 }
-.np-upload-button .media {
-  align-items: flex-start;
+.np-upload-input .np-upload-input__section {
+  margin: 0;
 }
-@media (max-width: 320px) {
-  .np-upload-icon {
-    padding-left: 0;
-  }
+.np-upload-input .np-upload-input__section:only-child .np-upload-input__item {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  border-bottom: var(--outerBorder);
 }
-.np-upload-input.form-control {
-  height: auto;
-  padding: 0;
-  padding: initial;
+.np-upload-input .np-upload-input__section:has(.np-upload-input__item:last-child.is-interactive:hover):not(:has(.np-upload-input__item-button:hover)) + .np-upload-input__section--uploader .np-upload-input__upload-button::before {
+  left: 0;
+  width: 100%;
+  top: 0;
+}
+.np-upload-input__item {
+  position: relative;
+  padding: 16px;
+  padding: var(--size-16);
+  display: flex;
+  align-items: flex-start;
+  border-left: var(--outerBorder);
+  border-right: var(--outerBorder);
 }
-.np-upload-input > div:first-child,
-.np-upload-input > div:first-child .np-upload-item--single-file,
-.np-upload-input > div:first-child .np-upload-item--link {
+.np-upload-input__item:first-child {
+  border-top: var(--outerBorder);
   border-top-left-radius: 10px;
   border-top-left-radius: var(--radius-small);
   border-top-right-radius: 10px;
   border-top-right-radius: var(--radius-small);
 }
-.np-upload-input > div:last-child {
-  border-bottom-left-radius: 10px;
-  border-bottom-left-radius: var(--radius-small);
-  border-bottom-right-radius: 10px;
-  border-bottom-right-radius: var(--radius-small);
-}
-.np-theme-personal .np-upload-input.disabled .btn {
-  cursor: inherit;
-}
-.np-theme-personal .np-upload-input .np-upload-icon {
-  color: var(--color-interactive-primary);
+.np-upload-input__item + .np-upload-input__item:before {
+  content: " ";
+  display: block;
+  position: absolute;
+  height: 1px;
+  left: 16px;
+  left: var(--size-16);
+  width: calc(100% - 2 * 16px);
+  width: calc(100% - 2 * var(--size-16));
+  top: 0;
+  background: rgba(0,0,0,0.10196);
+  background: var(--color-border-neutral);
 }
-.np-theme-personal .np-upload-input .media-body {
+.np-upload-input__item .np-upload-input__item-content {
   padding-right: 32px;
   padding-right: var(--size-32);
-  color: var(--color-content-link);
-  white-space: break-spaces;
+  flex: 1;
 }
 @media (max-width: 320px) {
-  .np-theme-personal .np-upload-input .media-body {
+  .np-upload-input__item .np-upload-input__item-content {
     padding-right: 64px;
     padding-right: var(--size-64);
   }
 }
-.np-theme-personal .np-upload-input .media-body .np-text-body-large-bold {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-underline-offset: 0.3em;
-}
-.np-theme-personal .np-upload-input .media-body .np-text-body-default,
-.np-theme-personal .np-upload-input .media-body .np-upload-description,
-.np-theme-personal .np-upload-input .media-body .text-positive {
-  color: #5d7079 !important;
-  color: var(--color-content-secondary) !important;
-}
-.np-theme-personal .np-upload-input .media-body .text-negative {
-  color: var(--color-sentiment-negative) !important;
+.np-upload-input__item .np-upload-input__title,
+.np-upload-input__item .np-upload-input__text {
+  margin: 0;
+  -moz-text-align-last: left;
+       text-align-last: left;
+  color: #5d7079;
+  color: var(--color-content-secondary);
 }
-.np-theme-personal .np-upload-input-errors {
-  list-style: none;
-  padding-left: 0;
+.np-upload-input__item .np-upload-input__title + .np-upload-input__text {
+  margin-top: 4px;
+  margin-top: var(--size-4);
 }
-.np-theme-personal .np-upload-input-errors li {
-  position: relative;
-  padding-left: 16px;
-  padding-left: var(--size-16);
+.np-upload-input__item .np-upload-input__icon {
+  padding-right: 16px;
+  padding-right: var(--size-16);
 }
-@media (max-width: 320px) {
-  .np-theme-personal .np-upload-input-errors li {
-    padding-left: 32px;
-    padding-left: var(--size-32);
-  }
+.np-upload-input__item .np-upload-input__item-link,
+.np-upload-input__item .np-upload-input__item-container {
+  align-items: flex-start;
+  display: flex;
+  width: 100%;
 }
-.np-theme-personal .np-upload-input-errors li:before {
-  content: '•';
+.np-upload-input__item .np-upload-input__item-action {
+  --iconSize: var(--size-24);
+  --clickAreaSize: 44px;
+  --buttonTopRightOffset: var(--size-16);
+  --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
   position: absolute;
-  display: block;
-  left: 0;
-}
-.np-theme-personal .np-upload-input .status-circle {
-  width: 24px;
-  width: var(--size-x-small);
-  height: 24px;
-  height: var(--size-x-small);
+  right: 16px;
+  right: var(--buttonTopRightOffset);
+  top: 16px;
+  top: var(--buttonTopRightOffset);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .np-upload-input .status-circle {
-    width: 48px;
-    width: var(--size-large);
-    height: 48px;
-    height: var(--size-large);
+  .np-upload-input__item .np-upload-input__item-action {
+    --iconSize: var(--size-48);
+    --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
   }
 }
-.np-upload-item {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-  position: relative;
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: var(--iconSize);
+  width: var(--iconSize);
+  padding: 0 4px;
+  padding: 0 var(--size-4);
+  border-radius: 50%;
+  border: 0;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
+  transition: color, background-color 0.15s ease-in-out;
+  outline-offset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
-.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
-.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
+  content: '';
   display: block;
+  width: var(--clickAreaSize);
+  height: var(--clickAreaSize);
+  border-radius: 50%;
   position: absolute;
-  height: 1px;
-  background-color: rgba(0,0,0,0.10196);
-  background-color: var(--color-border-neutral);
-  content: " ";
-  left: 16px;
-  left: var(--size-16);
-  width: calc(100% - 2 * 16px);
-  width: calc(100% - 2 * var(--size-16));
-}
-.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
-.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
-  top: 0;
-}
-.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
-  bottom: -1px;
-}
-.np-upload-item:first-child ~ div {
-  border-top: 1px;
-}
-.np-upload-item:not(:first-child) .np-upload-item__link:hover {
-  border-top-color: rgba(0,0,0,0.10196);
-  border-top-color: var(--color-border-neutral);
+  top: var(--clickAreaTopRightOffset);
+  right: var(--clickAreaTopRightOffset);
 }
-.np-upload-item:not(:last-child) {
-  border-bottom: 0;
-}
-.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
-.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
-  display: none;
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
+  background-color: var(--color-sentiment-negative);
+  color: var(--color-contrast-overlay) !important;
 }
-.np-upload-button-container:hover:before,
-.np-upload-button-container.droppable-dropping:before {
-  left: 0 !important;
-  width: 100% !important;
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
+  background-color: var(--color-background-neutral-active);
 }
-.np-upload-button-container:has(:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  border-color: transparent;
-  outline-offset: -3px;
+.np-upload-input__item.is-interactive {
+  padding: 0;
 }
-.np-upload-item--single-file:focus-visible,
-.np-upload-item__link:focus-visible,
-.np-upload-button-container:has(:focus-visible) {
-  outline-width: 3px;
+.np-upload-input__item.is-interactive:hover:not(:has(.np-upload-input__item-button:hover)):before,
+.np-upload-input__item.is-interactive:hover:not(:has(.np-upload-input__item-button:hover)) + .np-upload-input__item:before {
+  width: 100%;
+  left: 0;
 }
-.np-upload-item--link a {
-  flex: 1;
+.np-upload-input__item.is-interactive .np-upload-input__item-link {
+  padding: 16px;
+  padding: var(--size-16);
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-top: 1px solid transparent;
   border-radius: inherit;
+  border-top: 1px solid transparent;
+  background-clip: padding-box;
 }
-.np-upload-item--link a:focus-visible {
+.np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
   outline-offset: -2px;
+  outline-width: 3px;
 }
-.np-upload-item--link a:hover:before {
-  display: none !important;
-}
-.np-upload-item--link a:hover:after {
-  left: 0 !important;
-  width: 100% !important;
-}
-.np-upload-item--link a:hover,
-.np-upload-item--link a:active {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.np-upload-item--link a:hover .np-upload-button,
-.np-upload-item--link a:active .np-upload-button {
+.np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
+.np-upload-input__item.is-interactive .np-upload-input__item-link:active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  border-radius: inherit;
 }
-.np-upload-item--link:first-of-type a {
-  border-top: 0;
+.np-upload-input__item.is-interactive:first-child .np-upload-input__item-link {
+  border-top-width: 0;
 }
-.np-upload-item__body {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.np-upload-input__item .np-upload-input-errors {
+  padding-left: 0;
+  list-style-type: "";
+}
+.np-upload-input__item .np-upload-input-errors > li {
   position: relative;
-  border-radius: inherit;
+  padding-left: 16px;
+  padding-left: var(--size-16);
 }
-.np-upload-item__remove-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
+.np-upload-input__item .np-upload-input-errors > li::before {
+  content: '•';
   position: absolute;
-  height: 24px;
-  height: var(--size-24);
-  min-height: 0;
-  width: 24px;
-  width: var(--size-24);
-  padding: 0;
-  border-radius: 50% !important;
-  outline-offset: 0 !important;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  border: none;
-  color: var(--color-interactive-primary);
-  right: 16px;
-  right: var(--size-16);
-  top: 16px;
-  top: var(--size-16);
-  transition: color, background-color 0.15s ease-in-out;
+  display: block;
+  left: 0;
 }
 @media (max-width: 320px) {
-  .np-upload-item__remove-button {
-    top: 16px;
-    top: var(--size-16);
-    right: 16px;
-    right: var(--size-16);
-    height: 48px;
-    height: var(--size-48);
-    width: 48px;
-    width: var(--size-48);
+  .np-upload-input__item .np-upload-input-errors > li {
+    padding-left: 32px;
+    padding-left: var(--size-32);
   }
 }
-.np-upload-item__remove-button:hover {
-  background-color: var(--color-sentiment-negative);
-  color: var(--color-contrast-overlay) !important;
-}
-.np-upload-item__remove-button:before {
-  display: block;
-  width: 44px;
-  height: 44px;
-  content: '';
-  border-radius: 50%;
-  position: absolute;
-}
 .np-progress {
   border-radius: 10px;
   border-radius: var(--radius-small);

package/src/typeahead/Typeahead.spec.js

@@ -258,6 +258,14 @@ describe('Typeahead', () => {
     expect(event.preventDefault).toHaveBeenCalledTimes(1);
   });
 
+  it('sets aria-activedescendant correctly based on focus', () => {
+    const inputElement = input().getDOMNode();
+
+    doTimes(3, () => input().simulate('keyDown', fakeKeyDownEventForKey('ArrowDown')));
+
+    expect(inputElement).toHaveAttribute('aria-activedescendant', 'menu-test option-Test2');
+  });
+
   it('displays alert when alert is provided and chips are valid or alert type is error', () => {
     const event = {
       key: 'Enter',
@@ -347,6 +355,12 @@ describe('Typeahead', () => {
       expect(options.every((label, i) => label === props.options[i].label)).toBe(true);
     });
 
+    it('renders dropdown-menu if has options', () => {
+      expect(component.find('.dropdown-menu')).toHaveLength(1);
+      component.setProps({ options: [] });
+      expect(component.find('.dropdown-menu')).toHaveLength(0);
+    });
+
     it('does not render new option if showNewEntry is false', () => {
       component.setProps({
         allowNew: true,

package/src/typeahead/Typeahead.story.tsx

@@ -6,6 +6,7 @@ import Typeahead, { type TypeaheadOption } from './Typeahead';
 import { Size } from '../common';
 import { useState } from 'react';
 import { Input } from '../inputs/Input';
+import { Field } from '../field/Field';
 
 type Story = StoryObj<typeof Typeahead>;
 
@@ -103,15 +104,17 @@ export const Basic: Story = {
 
 export const Creatable: Story = {
   render: (args) => (
-    <Typeahead
-      {...args}
-      allowNew
-      multiple
-      initialValue={[]}
-      validateChip={validateOptionAsEmail}
-      addon={<SearchIcon size={24} />}
-      options={[]}
-    />
+    <Field id={`input-${args.id}`} label="Typeahead with values">
+      <Typeahead
+        {...args}
+        allowNew
+        multiple
+        initialValue={[]}
+        validateChip={validateOptionAsEmail}
+        addon={<SearchIcon size={24} />}
+        options={[]}
+      />
+    </Field>
   ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

package/src/typeahead/Typeahead.tsx

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { DebouncedFunc } from 'lodash';
 import clamp from 'lodash.clamp';
 import debounce from 'lodash.debounce';
-import { Component, ReactNode } from 'react';
+import React, { Component, ReactNode } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import Chip from '../chips/Chip';
@@ -101,6 +101,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     size: Size.MEDIUM,
     validateChip: () => true,
   } satisfies Partial<TypeaheadProps<unknown>>;
+  optionRefs: (React.RefObject<HTMLLIElement> | null)[];
 
   constructor(props: TypeaheadPropsWithInputAttributes<T>) {
     super(props);
@@ -115,6 +116,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       optionsShown: false,
       isFocused: false,
     };
+    this.optionRefs = [] as (React.RefObject<HTMLLIElement> | null)[];
   }
 
   handleSearchDebounced: DebouncedFunc<Typeahead<T>['handleSearch']>;
@@ -228,7 +230,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
     }
   };
-
   moveFocusedOption(offset: number) {
     this.setState((previousState) => {
       const { keyboardFocusedOptionIndex } = previousState;
@@ -237,6 +238,10 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       if (keyboardFocusedOptionIndex !== null) {
         index = clamp(keyboardFocusedOptionIndex + offset, 0, options.length - 1);
       }
+      const optionRef = this.optionRefs[index];
+      if (optionRef?.current) {
+        optionRef.current.focus(); // Set focus on the option element
+      }
       return {
         keyboardFocusedOptionIndex: index,
       };
@@ -401,20 +406,28 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}
         id={`menu-${id}`}
       >
-        <ul className="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-          {optionsToRender.map((option, idx) => (
-            <TypeaheadOption
-              key={`${option.label}${idx.toString()}`}
-              query={query}
-              option={option}
-              selected={keyboardFocusedOptionIndex === idx}
-              onClick={(event) => {
-                this.onOptionSelected(event, option);
-              }}
-            />
-          ))}
-          {footer}
-        </ul>
+        {!!optionsToRender.length && (
+          <ul className="dropdown-menu" role="menu">
+            {optionsToRender.map((option, idx) => {
+              const ref = React.createRef<HTMLLIElement>();
+              this.optionRefs[idx] = ref;
+              return (
+                <TypeaheadOption
+                  key={`${option.label}${idx.toString()}`}
+                  ref={ref}
+                  query={query}
+                  option={option}
+                  selected={keyboardFocusedOptionIndex === idx}
+                  id={String(option.label.replace(/\s+/g, '-'))}
+                  onClick={(event) => {
+                    this.onOptionSelected(event, option);
+                  }}
+                />
+              )
+            })}
+            {footer}
+          </ul>
+        )}
       </div>
     );
   };
@@ -507,6 +520,11 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
               typeaheadId={id}
               renderChip={this.renderChip}
               autoComplete={inputAutoComplete}
+              ariaActivedescendant={
+                keyboardFocusedOptionIndex !== null && options[keyboardFocusedOptionIndex]
+                  ? `option-${options[keyboardFocusedOptionIndex].label.replace(/\s+/g, '-')}`
+                  : undefined
+              }
               onChange={this.handleOnChange}
               onKeyDown={this.handleOnKeyDown}
               onFocus={this.handleOnFocus}

package/src/typeahead/typeaheadInput/TypeaheadInput.spec.js

@@ -45,6 +45,12 @@ describe('Typeahead input', () => {
     expect(inputWrapper().find('span')).toHaveLength(selected.length);
   });
 
+  it('adds aria-controls prop if dropdown is open', () => {
+    expect(component.prop('aria-controls')).toBeUndefined();
+    component.setProps({ dropdownOpen: true });
+    expect(component.prop('aria-controls')).toBe('menu-test');
+  });
+
   it('passes all callbacks to input', () => {
     const event = {};
     const extraProps = {