@transferwise/components 46.67.0 → 46.67.2

package/src/i18n/pt.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(Opcional)",
   "neptune.Link.opensInNewTab": "(abre em uma nova aba)",
   "neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecione a moeda",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Escolha uma opção...",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",

package/src/i18n/ro.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(Opțional)",
   "neptune.Link.opensInNewTab": "(se deschide într-o filă nouă)",
   "neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "Selectează moneda",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selectează o opțiune...",
   "neptune.Select.searchPlaceholder": "Caută...",
   "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",

package/src/i18n/ru.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(необязательно)",
   "neptune.Link.opensInNewTab": "(откроется в новой вкладке)",
   "neptune.MoneyInput.Select.placeholder": "Выберите вариант...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "Выберите валюту",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
   "neptune.Select.searchPlaceholder": "Поиск...",
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",

package/src/i18n/th.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(ไม่บังคับ)",
   "neptune.Link.opensInNewTab": "(เปิดในแท็บใหม่)",
   "neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "เลือกสกุลเงิน",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",

package/src/i18n/tr.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(İsteğe bağlı)",
   "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
   "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "Para birimi seçin",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
   "neptune.Select.searchPlaceholder": "Ara...",
   "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",

package/src/i18n/zh-CN.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "（可选）",
   "neptune.Link.opensInNewTab": "（在新标签页中打开）",
   "neptune.MoneyInput.Select.placeholder": "请选择...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "选择货币",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "选择其中一项...",
   "neptune.Select.searchPlaceholder": "搜索",
   "neptune.SelectInput.noResultsFound": "找不到结果",

package/src/i18n/zh-HK.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "（可選）",
   "neptune.Link.opensInNewTab": "（在新分頁中開啟）",
   "neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "選擇貨幣",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
   "neptune.Select.searchPlaceholder": "搜尋…",
   "neptune.SelectInput.noResultsFound": "找不到任何結果",

package/src/main.css

@@ -2185,6 +2185,10 @@ html:not([dir="rtl"]) .np-flow-navigation__stepper {
 .np-flow-navigation--xs-max .np-animated-label {
   height: auto;
 }
+.np-flow-navigation--xs-max .np-animated-label .tw-icon-chevron-down {
+  margin-left: 4px;
+  margin-left: var(--size-4);
+}
 .np-flow-navigation--sm .np-flow-navigation__stepper {
   min-height: 56px;
 }

package/src/moneyInput/MoneyInput.tsx

@@ -381,6 +381,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           </div>
         ) : (
           <div
+            translate="no"
             className={clsx(
               this.style('input-group-btn'),
               this.style('amount-currency-select-btn'),

package/src/typeahead/Typeahead.spec.js

@@ -347,6 +347,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

@@ -401,20 +401,22 @@ 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) => (
+              <TypeaheadOption
+                key={`${option.label}${idx.toString()}`}
+                query={query}
+                option={option}
+                selected={keyboardFocusedOptionIndex === idx}
+                onClick={(event) => {
+                  this.onOptionSelected(event, option);
+                }}
+              />
+            ))}
+            {footer}
+          </ul>
+        )}
       </div>
     );
   };

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 = {

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -91,7 +91,7 @@ export default class TypeaheadInput<T> extends Component<
         aria-autocomplete="list"
         aria-expanded={dropdownOpen}
         aria-haspopup="listbox"
-        aria-controls={`menu-${typeaheadId}`}
+        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}
         autoComplete={autoComplete}
         role="combobox"
         value={value}