@transferwise/components 46.162.1 → 46.163.0

package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx

@@ -7,6 +7,7 @@ export interface SelectInputOptionContentProps {
   note?: string;
   description?: string;
   icon?: React.ReactNode;
+  className?: string;
 }
 
 /**
@@ -19,6 +20,7 @@ export function SelectInputOptionContent({
   note,
   description,
   icon,
+  className,
 }: SelectInputOptionContentProps) {
   const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
 
@@ -27,6 +29,7 @@ export function SelectInputOptionContent({
       className={clsx(
         'np-select-input-option-content-container',
         (note || description) && 'np-text-body-large',
+        className,
       )}
     >
       {icon ? (
@@ -47,7 +50,7 @@ export function SelectInputOptionContent({
             withinTrigger && 'np-select-input-option-content-text-within-trigger',
           )}
         >
-          <div className="d-inline">{title}</div>
+          <div className="d-inline np-select-input-option-content-title">{title}</div>
           {note ? (
             <span className="np-select-input-option-content-text-secondary np-text-body-default">
               {note}

package/src/Inputs/SelectInput/SelectInput.test.tsx

@@ -721,6 +721,80 @@ describe('SelectInput', () => {
     expect(descriptionElement).toHaveClass('np-select-input-option-description-in-trigger');
   });
 
+  it('applies custom className to option content container in the trigger', () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+        renderValue={(currency) => (
+          <SelectInputOptionContent title={currency} className="custom-option-class" />
+        )}
+        value="USD"
+      />,
+    );
+
+    const triggerContent = screen
+      .getByText('USD')
+      .closest('.np-select-input-option-content-container');
+    expect(triggerContent).toHaveClass('custom-option-class');
+  });
+
+  it('applies custom className to option content container in dropdown options', async () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+        renderValue={(currency) => (
+          <SelectInputOptionContent title={currency} className="custom-option-class" />
+        )}
+        value="USD"
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.click(trigger);
+
+    const listbox = screen.getByRole('listbox');
+    const options = within(listbox).getAllByRole('option');
+    const optionContent = options[0].querySelector('.np-select-input-option-content-container');
+    expect(optionContent).toHaveClass('custom-option-class');
+  });
+
+  it('supports conditional className based on withinTrigger', async () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+        renderValue={(currency, withinTrigger) => (
+          <SelectInputOptionContent
+            title={currency}
+            className={withinTrigger ? undefined : 'dropdown-only-class'}
+          />
+        )}
+        value="USD"
+      />,
+    );
+
+    const triggerContent = screen
+      .getByText('USD')
+      .closest('.np-select-input-option-content-container');
+    expect(triggerContent).not.toHaveClass('dropdown-only-class');
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.click(trigger);
+
+    const listbox = screen.getByRole('listbox');
+    const options = within(listbox).getAllByRole('option');
+    const optionContent = options[0].querySelector('.np-select-input-option-content-container');
+    expect(optionContent).toHaveClass('dropdown-only-class');
+  });
+
   describe('listbox label', () => {
     const fieldLabel = 'Fruits';
     const triggerLabel = 'Select fruit';

package/src/ListItem/ListItem.css

@@ -567,7 +567,7 @@
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-navigation .tw-icon-chevron-right {
+.wds-list-item-navigation .tw-icon-chevron-end {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
   display: block;

package/src/ListItem/ListItem.grid.less

@@ -169,10 +169,10 @@
       }
     }
 
-    // LESS struggles with ranged container queries so
-    // we need to escape the interpolated expression.
-    @container (~"@{wds-list-item-cq-min} < width <= @{wds-list-item-cq-max}") {
-      .wds-list-item-media-image{
+    // LESS struggles with ranged container queries so we need to
+    // escape the interpolated expression using `e()` function.
+    @container (e("@{wds-list-item-cq-min} < width <= @{wds-list-item-cq-max}")) {
+      .wds-list-item-media-image {
         object-position: bottom left;
       }
 

package/src/ListItem/ListItem.less

@@ -224,7 +224,7 @@
   }
 
   &-navigation {
-    .tw-icon-chevron-right {
+    .tw-icon-chevron-end {
       color: var(--color-interactive-secondary);
       display: block;
     }

package/src/ListItem/Navigation/ListItemNavigation.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight } from '@transferwise/icons';
+import { ChevronEnd } from '@transferwise/icons';
 import type { ButtonProps } from '../../Button/Button.types';
 import { useListItemControl } from '../useListItemControl';
 import { PrimitiveButton } from '../../Primitives';
@@ -32,7 +32,7 @@ export const Navigation = function Navigation({
 }: ListItemNavigationProps) {
   const { baseItemProps } = useListItemControl('navigation', { href, hideIndicator, ...props });
   const { ids, describedByIds } = useContext(ListItemContext);
-  const icon = hideIndicator ? null : <ChevronRight size={16} data-testid="NavigationIndicator" />;
+  const icon = hideIndicator ? null : <ChevronEnd size={16} data-testid="NavigationIndicator" />;
 
   return href ? (
     <>{icon}</>

package/src/PhoneNumberInput/PhoneNumberInput.css

@@ -27,3 +27,6 @@
 .tw-telephone__number-input {
   flex: auto 1 1;
 }
+[dir="rtl"] .tw-telephone__prefix-option .np-select-input-option-content-title {
+  direction: ltr;
+}

package/src/PhoneNumberInput/PhoneNumberInput.less

@@ -7,7 +7,7 @@
     margin-left: var(--size-12);
   }
 
-  &__number-input-field{
+  &__number-input-field {
     [dir="rtl"] & {
       text-align: end;
     }
@@ -22,7 +22,7 @@
     width: 100%;
   }
 
-  .np-select-input-content{
+  .np-select-input-content {
     [dir="rtl"] & {
       text-align: end;
       direction: ltr;
@@ -40,3 +40,11 @@
 .tw-telephone__number-input {
   flex: auto 1 1;
 }
+
+// Prevent bidi algorithm from flipping "+{country-code}" to "{country-code}+"
+// in RTL dropdown options as phone numbers are universally read as LTR.
+.tw-telephone__prefix-option .np-select-input-option-content-title {
+  [dir="rtl"] & {
+    direction: ltr;
+  }
+}

package/src/PhoneNumberInput/PhoneNumberInput.tsx

@@ -229,6 +229,7 @@ const PhoneNumberInput = ({
                       ?.map((country) => country.iso3)
                       .join(', ')
               }
+              className={withinTrigger ? undefined : 'tw-telephone__prefix-option'}
             />
           )}
           filterable

package/src/PhoneNumberInput/_stories/PhoneNumberInput.rtl.test.story.tsx

@@ -33,7 +33,7 @@ export const Sizes: Story = {
       </Field>
     </>
   ),
-  ...withRTLDiff(),
+  ...withRTLDiff({ renderAs: 'iframe' }),
 };
 
 export const DropdownOpen: Story = {

package/src/PromoCard/Indicator/PromoCardIndicator.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, Check, Download } from '@transferwise/icons';
+import { ArrowEnd, Check, Download } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { ReactElement, ReactNode } from 'react';
 
@@ -57,7 +57,7 @@ const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
     isIconString &&
     {
       check: Check,
-      arrow: ArrowRight,
+      arrow: ArrowEnd,
       download: Download,
     }[icon];
 

package/src/PromoCard/PromoCard.css

@@ -53,9 +53,6 @@
 .np-Card-indicatorIcon .tw-icon {
   color: var(--Card-indicator-icon-color);
 }
-[dir="rtl"] .np-Card-indicatorIcon .tw-icon {
-  transform: scaleX(-1);
-}
 .np-Card--checked,
 .np-Card--link {
   color: currentColor;

package/src/PromoCard/PromoCard.less

@@ -50,11 +50,6 @@
 
     &Icon .tw-icon {
       color: var(--Card-indicator-icon-color);
-
-      // Flips icon for right to left content
-      [dir="rtl"] & {
-        transform: scaleX(-1);
-      }
     }
   }
 

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx

@@ -511,5 +511,5 @@ export const RTLDiff: Story = {
       />
     </>
   ),
-  ...withRTLDiff(),
+  ...withRTLDiff({ renderAs: 'iframe' }),
 };

package/src/Typeahead/Typeahead.css

@@ -65,6 +65,9 @@
   cursor: text;
   display: flex;
 }
+.typeahead--multiple .input-group.disabled .typeahead__input-container {
+  cursor: not-allowed;
+}
 .typeahead--multiple .sizer {
   white-space: pre;
   position: absolute;

package/src/Typeahead/Typeahead.less

@@ -77,6 +77,10 @@
       display: flex;
     }
 
+    .input-group.disabled .typeahead__input-container {
+      cursor: not-allowed;
+    }
+
     .sizer {
       white-space: pre;
       position: absolute;

package/src/Typeahead/Typeahead.test.tsx

@@ -256,4 +256,77 @@ describe('Typeahead', () => {
       expect.arrayContaining([{ label: 'foo' }, { label: 'bar' }]),
     );
   });
+
+  describe('when disabled', () => {
+    it('disables the input', () => {
+      render(<Typeahead id="test" name="test" options={[]} disabled onChange={() => {}} />);
+      expect(screen.getByRole('combobox')).toBeDisabled();
+    });
+
+    it('does not show the clear button when there is a value', () => {
+      render(
+        <Typeahead
+          id="test"
+          name="test"
+          options={[]}
+          initialValue={[{ label: 'Chip' }]}
+          disabled
+          onChange={() => {}}
+        />,
+      );
+      expect(screen.queryByRole('button', { name: /clear/i })).not.toBeInTheDocument();
+    });
+
+    it('keeps chips but does not let them be removed', () => {
+      render(
+        <Typeahead
+          id="test"
+          name="test"
+          options={[]}
+          multiple
+          initialValue={[{ label: 'Chip' }]}
+          disabled
+          onChange={() => {}}
+        />,
+      );
+      expect(screen.getByText('Chip').closest('.np-chip')).toHaveClass('disabled');
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('does not open the suggestions when the input is clicked', async () => {
+      render(
+        <Typeahead
+          id="test"
+          name="test"
+          options={[{ label: 'Option 1' }]}
+          minQueryLength={0}
+          disabled
+          onChange={() => {}}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('combobox'));
+
+      expect(screen.getByRole('combobox')).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('closes the open menu when it becomes disabled', async () => {
+      const onChange = jest.fn();
+      const props = {
+        id: 'test',
+        name: 'test',
+        options: [],
+        allowNew: true,
+        minQueryLength: 0,
+        onChange,
+      };
+      const { rerender } = render(<Typeahead {...props} />);
+
+      await userEvent.type(screen.getByRole('combobox'), 'New thing');
+      rerender(<Typeahead {...props} disabled />);
+      await userEvent.click(document.body);
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/Typeahead/Typeahead.tsx

@@ -61,6 +61,8 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
   chipSeparators?: readonly string[];
   /** @default true */
   clearable?: boolean;
+  /** @default false */
+  disabled?: boolean;
   footer?: ReactNode;
   /** @default [] */
   initialValue?: readonly TypeaheadOption<T>[];
@@ -112,6 +114,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     autoFocus: false,
     chipSeparators: [],
     clearable: true,
+    disabled: false,
     initialValue: [],
     inputAutoComplete: 'new-password',
     minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
@@ -160,6 +163,12 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     }
   }
 
+  componentDidUpdate(previousProps: TypeaheadPropsWithInputAttributes<T>) {
+    if (this.props.disabled && !previousProps.disabled) {
+      this.hideMenu();
+    }
+  }
+
   componentWillUnmount() {
     this.handleSearchDebounced.cancel();
   }
@@ -398,6 +407,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
   };
 
   renderChip = (option: TypeaheadOption<T>, idx: number): ReactNode => {
+    const { disabled } = this.props;
     const valid = this.props.validateChip?.(option);
 
     return (
@@ -408,7 +418,8 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
           'has-error': !valid,
           'np-chip--valid': valid,
         })}
-        onRemove={() => this.removeChip(option)}
+        disabled={disabled}
+        onRemove={disabled ? undefined : () => this.removeChip(option)}
       />
     );
   };
@@ -486,6 +497,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       addon,
       name,
       clearable,
+      disabled,
       allowNew,
       footer,
       showSuggestions,
@@ -501,9 +513,10 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
 
     const { errorState, query, selected, optionsShown, keyboardFocusedOptionIndex } = this.state;
 
-    const clearButton = clearable && (query || selected.length > 0);
+    const clearButton = !disabled && clearable && (query || selected.length > 0);
 
-    const dropdownOpen = optionsShown && showSuggestions && query.length >= minQueryLength;
+    const dropdownOpen =
+      !disabled && optionsShown && showSuggestions && query.length >= minQueryLength;
 
     const menu = this.renderMenu({
       footer,
@@ -556,6 +569,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
           <div
             className={clsx(`input-group input-group-${size}`, {
               'input-group--has-error': hasError,
+              disabled,
             })}
           >
             {addon && <span className="input-group-addon input-group-addon--search">{addon}</span>}
@@ -563,6 +577,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
             <TypeaheadInput
               {...{
                 autoFocus,
+                disabled,
                 multiple,
                 dropdownOpen,
                 placeholder,

package/src/Typeahead/TypeaheadInput/TypeaheadInput.tsx

@@ -23,7 +23,10 @@ export type TypeaheadInputProps<T> = {
   onPaste: React.ClipboardEventHandler<HTMLInputElement>;
   renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;
   ariaActivedescendant?: string;
-} & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight'>;
+} & Pick<
+  TypeaheadProps<T>,
+  'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'
+>;
 
 type TypeaheadInputState = {
   inputWidth: number;
@@ -73,6 +76,7 @@ export default class TypeaheadInput<T> extends Component<
     const {
       typeaheadId,
       autoFocus,
+      disabled,
       multiple,
       name,
       dropdownOpen,
@@ -98,6 +102,7 @@ export default class TypeaheadInput<T> extends Component<
         id={`input-${typeaheadId}`}
         aria-activedescendant={ariaActivedescendant}
         autoFocus={autoFocus}
+        disabled={disabled}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"
         aria-expanded={dropdownOpen}

package/src/Typeahead/_stories/Typeahead.story.tsx

@@ -36,6 +36,7 @@ const meta: Meta<typeof Typeahead> = {
     autoFocus: false,
     chipSeparators: [',', ' '],
     clearable: true,
+    disabled: false,
     inputAutoComplete: 'new-password',
     minQueryLength: 3,
     multiple: false,

package/src/Typeahead/_stories/Typeahead.test.story.tsx

@@ -3,6 +3,7 @@ import { Search as SearchIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
 import Button from '../../Button';
+import Field from '../../Field/Field';
 import Modal from '../../Modal';
 import Typeahead from '../Typeahead';
 
@@ -17,6 +18,46 @@ const meta: Meta<typeof Typeahead> = {
 };
 export default meta;
 
+export const Disabled: Story = {
+  render: () => (
+    <div className="d-flex flex-column">
+      <Field id="typeahead-disabled-empty" label="Empty">
+        <Typeahead
+          id="typeahead-disabled-empty"
+          name="typeahead-disabled-empty"
+          disabled
+          placeholder="Search currencies"
+          addon={<SearchIcon size={24} />}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="typeahead-disabled-value" label="With a value">
+        <Typeahead
+          id="typeahead-disabled-value"
+          name="typeahead-disabled-value"
+          disabled
+          addon={<SearchIcon size={24} />}
+          initialValue={[{ label: 'British pound' }]}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="typeahead-disabled-chips" label="With chips">
+        <Typeahead
+          id="typeahead-disabled-chips"
+          name="typeahead-disabled-chips"
+          disabled
+          multiple
+          initialValue={[{ label: 'British pound' }, { label: 'Euro' }]}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+    </div>
+  ),
+};
+
 export const AutoFocusInModal: Story = {
   parameters: {
     docs: {

package/src/i18n/en.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Country code",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
   "neptune.StatusIcon.iconLabel.error": "Error:",

package/src/i18n/es.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Código de país",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Número de teléfono",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefijo",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
   "neptune.StatusIcon.iconLabel.error": "Error:",

package/src/i18n/hu.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Országazonosító",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonszám",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Előtag",
   "neptune.Select.searchPlaceholder": "Keresés...",
   "neptune.SelectInput.noResultsFound": "Nincs találat",
   "neptune.StatusIcon.iconLabel.error": "Hiba:",

package/src/i18n/id.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Kode negara",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Nomor telepon",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Awalan",
   "neptune.Select.searchPlaceholder": "Cari...",
   "neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
   "neptune.StatusIcon.iconLabel.error": "Kesalahan:",

package/src/i18n/it.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Prefisso",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Numero di telefono",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefisso",
   "neptune.Select.searchPlaceholder": "Cerca...",
   "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
   "neptune.StatusIcon.iconLabel.error": "Errore:",

package/src/i18n/ja.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
   "neptune.PhoneNumberInput.countryCodeLabel": "国コード",
   "neptune.PhoneNumberInput.phoneNumberLabel": "電話番号",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "プレフィックス",
   "neptune.Select.searchPlaceholder": "検索する... ",
   "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
   "neptune.StatusIcon.iconLabel.error": "エラー：",

package/src/i18n/nl.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecteer een optie...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Landcode",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefoonnummer",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Voorvoegsel",
   "neptune.Select.searchPlaceholder": "Zoeken...",
   "neptune.SelectInput.noResultsFound": "Geen resultaten gevonden",
   "neptune.StatusIcon.iconLabel.error": "Fout:",

package/src/i18n/pl.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wybierz opcję...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Numer kierunkowy",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Numer telefonu",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefiks",
   "neptune.Select.searchPlaceholder": "Wyszukaj...",
   "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
   "neptune.StatusIcon.iconLabel.error": "Błąd:",

package/src/i18n/ro.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selectează o opțiune...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Codul țării",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Număr de telefon",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
   "neptune.Select.searchPlaceholder": "Caută...",
   "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
   "neptune.StatusIcon.iconLabel.error": "Eroare:",

package/src/i18n/uk.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Виберіть варіант…",
   "neptune.PhoneNumberInput.countryCodeLabel": "Код країни",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефону",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Префікс",
   "neptune.Select.searchPlaceholder": "Пошук…",
   "neptune.SelectInput.noResultsFound": "Нічого не знайдено",
   "neptune.StatusIcon.iconLabel.error": "Помилка:",

package/src/i18n/zh-HK.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
   "neptune.PhoneNumberInput.countryCodeLabel": "國家/地區代碼",
   "neptune.PhoneNumberInput.phoneNumberLabel": "電話號碼",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "前綴",
   "neptune.Select.searchPlaceholder": "搜尋…",
   "neptune.SelectInput.noResultsFound": "找不到任何結果",
   "neptune.StatusIcon.iconLabel.error": "錯誤:",