@transferwise/components 46.6.0 → 46.7.0

package/build/types/phoneNumberInput/utils/isStringNumeric/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isStringNumeric/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isStringNumeric/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/build/types/phoneNumberInput/utils/isStringNumeric/isStringNumeric.d.ts

@@ -1,2 +1,2 @@
-export function isStringNumeric(value: any): boolean;
+export declare const isStringNumeric: (value: string) => boolean;
 //# sourceMappingURL=isStringNumeric.d.ts.map

package/build/types/phoneNumberInput/utils/isStringNumeric/isStringNumeric.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isStringNumeric.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isStringNumeric/isStringNumeric.js"],"names":[],"mappings":"AAAO,qDAA8D"}
+{"version":3,"file":"isStringNumeric.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isStringNumeric/isStringNumeric.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,UAAW,MAAM,YAAgC,CAAC"}

package/build/types/phoneNumberInput/utils/isValidPhoneNumber/index.d.ts

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

package/build/types/phoneNumberInput/utils/isValidPhoneNumber/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isValidPhoneNumber/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isValidPhoneNumber/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/build/types/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.d.ts

@@ -1,2 +1,7 @@
-export function isValidPhoneNumber(phoneNumber: any): boolean;
+/**
+ *
+ * @param phoneNumber
+ * @returns True if number that starts with "+" and contains a mix of digits and spaces with at least 4 digits.
+ */
+export declare const isValidPhoneNumber: (phoneNumber: string) => boolean;
 //# sourceMappingURL=isValidPhoneNumber.d.ts.map

package/build/types/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isValidPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.js"],"names":[],"mappings":"AAMO,sDAHM,OAAO,CAM4B"}
+{"version":3,"file":"isValidPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,gBAAiB,MAAM,YACsC,CAAC"}

package/build/types/phoneNumberInput/utils/longestMatchingPrefix/index.d.ts

@@ -1,2 +1,3 @@
-export function longestMatchingPrefix(matchingCodes: any): any;
+import { Country } from '../../data/countries';
+export declare const longestMatchingPrefix: (matchingCodes: Country[]) => Country;
 //# sourceMappingURL=index.d.ts.map

package/build/types/phoneNumberInput/utils/longestMatchingPrefix/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/longestMatchingPrefix/index.js"],"names":[],"mappings":"AAAO,+DACoE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/longestMatchingPrefix/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,eAAO,MAAM,qBAAqB,kBAAmB,OAAO,EAAE,YACa,CAAC"}

package/build/types/phoneNumberInput/utils/setDefaultPrefix/index.d.ts

@@ -1,2 +1,8 @@
-export function setDefaultPrefix(locale: string, countryCode: any): string;
+/**
+ * Given a valid locale it returns the correspondent prefix if found or +44 otherwise.
+ *
+ * @param locale BCP 47 language tag of locale, e.g. `"es-ES"`.
+ * @param countryCode Two-letter country code (ISO 3166-1 alpha-2).
+ */
+export declare const setDefaultPrefix: (locale: string, countryCode?: string) => string;
 //# sourceMappingURL=index.d.ts.map

package/build/types/phoneNumberInput/utils/setDefaultPrefix/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/setDefaultPrefix/index.js"],"names":[],"mappings":"AAeO,yCAJI,MAAM,qBAEJ,MAAM,CAWlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/setDefaultPrefix/index.ts"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,WAAY,MAAM,gBAAgB,MAAM,WAKpE,CAAC"}

package/build/types/phoneNumberInput/utils/sortArrayByProperty/index.d.ts

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

package/build/types/phoneNumberInput/utils/sortArrayByProperty/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/build/types/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.d.ts

@@ -1,2 +1,2 @@
-export function sortArrayByProperty(arrayToSort: any, property: any): any[];
+export declare function sortArrayByProperty<T extends Record<PropertyKey, string>>(arrayToSort: T[], property: keyof T): T[];
 //# sourceMappingURL=sortArrayByProperty.d.ts.map

package/build/types/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sortArrayByProperty.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.js"],"names":[],"mappings":"AACO,4EACkE"}
+{"version":3,"file":"sortArrayByProperty.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.ts"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,EACvE,WAAW,EAAE,CAAC,EAAE,EAChB,QAAQ,EAAE,MAAM,CAAC,OAGlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.6.0",
+  "version": "46.7.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -68,7 +68,6 @@
     "babel-plugin-formatjs": "^10.5.3",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "enzyme": "^3.11.0",
-    "html-loader": "^1.3.2",
     "jest": "^27.0.6",
     "jest-cli": "^27.0.6",
     "jest-fetch-mock": "^3.0.3",
@@ -78,12 +77,12 @@
     "rollup": "^3.28.1",
     "storybook": "^7.4.5",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.9.3",
+    "@transferwise/neptune-css": "14.9.4",
     "@wise/components-theming": "0.8.4"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "^14.9.3",
+    "@transferwise/neptune-css": "^14.9.4",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^0.8.4",
     "react": ">=16.14",

package/src/common/locale/{index.spec.js → index.spec.ts}

@@ -24,8 +24,8 @@ describe('locale utils', () => {
       ['zh_HK', 'zh'],
       ['ja-JP', 'ja'],
       ['zhHK', null],
-      [null, null],
-      [undefined, null],
+      [null as any, null],
+      [undefined as any, null],
       ['', null],
       ['  ', null],
       ['ar-dz', null],
@@ -51,8 +51,8 @@ describe('locale utils', () => {
       ['zh_HK', 'zh-HK'],
       ['ja-JP', 'ja-JP'],
       ['zhHK', null],
-      [null, null],
-      [undefined, null],
+      [null as any, null],
+      [undefined as any, null],
       ['', null],
       ['  ', null],
       ['ar-dz', 'ar-DZ'],

package/src/common/locale/index.ts

@@ -0,0 +1,96 @@
+import { Direction } from '..';
+
+export const DEFAULT_LANG = 'en';
+export const DEFAULT_LOCALE = 'en-GB';
+
+/**
+ * Languages written right-to-left.
+ */
+export const RTL_LANGUAGES = ['ar', 'he'];
+
+/**
+ * @deprecated The source of truth for supported languages lives in Crab.
+ */
+export const SUPPORTED_LANGUAGES = [
+  DEFAULT_LANG,
+  'de',
+  'es',
+  'fr',
+  'hu',
+  'id',
+  'it',
+  'ja',
+  'pl',
+  'pt',
+  'ro',
+  'ru',
+  'th',
+  'tr',
+  'uk',
+  'zh',
+];
+
+/**
+ * Verifies and adjusts locale, replacing `_` with `-`.
+ *
+ * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
+ * @returns `null` if locale is unrecognized by `Intl.Locale`.
+ */
+export function adjustLocale(locale: string) {
+  const localeTrimmed = locale?.trim();
+  if (localeTrimmed) {
+    try {
+      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  }
+  return null;
+}
+
+/**
+ * Provides corresponding lang (iso2) for provided locale.
+ *
+ * @deprecated The use of this function almost always breaks language variants
+ * e.g. Simplified and Traditional Chinese.
+ * There should be no use case for this function.
+ * To select the correct translations from a translations object, pass the
+ * locale directly into Crab's getLocalisedMessages.
+ * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
+ * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.
+ */
+export function getLangFromLocale(locale: string) {
+  const adjustedLocale = adjustLocale(locale);
+  if (adjustedLocale != null) {
+    const { language } = new Intl.Locale(adjustedLocale);
+    if (SUPPORTED_LANGUAGES.includes(language)) {
+      return language;
+    }
+  }
+  return null;
+}
+
+/**
+ * Provides corresponding country code (iso2) for locales code with explicit region value.
+ *
+ * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.
+ * @returns `null` if the locale is invalid or the region can‘t be identified.
+ */
+export function getCountryFromLocale(locale: string) {
+  const adjustedLocale = adjustLocale(locale);
+  return adjustedLocale != null ? new Intl.Locale(adjustedLocale).region ?? null : null;
+}
+
+/**
+ * Provides the layout direction for a given locale.
+ *
+ * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
+ * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.
+ */
+export function getDirectionFromLocale(locale: string) {
+  const adjustedLocale = adjustLocale(locale);
+  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)
+    ? Direction.RTL
+    : Direction.LTR;
+}

package/src/index.ts

@@ -15,6 +15,7 @@ export type {
   SelectInputTriggerButtonProps,
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
+export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
 export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
 export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
 export type { ModalProps } from './modal';

package/src/inputs/Input.css

@@ -47,10 +47,6 @@
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }.np-form-control--size-sm {
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-  font-size: 1rem;
-  font-size: var(--font-size-16);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;

package/src/inputs/SelectInput.css

@@ -158,10 +158,12 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-.np-select-input-placeholder {
+.np-select-input-content {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+.np-select-input-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
@@ -269,6 +271,9 @@
   padding: var(--size-12) var(--size-16);
   color: var(--color-interactive-primary);
 }
+.np-select-input-option-container:focus {
+  outline: none;
+}
 .np-select-input-option-container--active {
   box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);

package/src/inputs/SelectInput.less

@@ -3,10 +3,13 @@
 @import "./_Popover.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
-.np-select-input-placeholder {
+.np-select-input-content {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+
+.np-select-input-placeholder {
   color: var(--color-content-tertiary);
 }
 
@@ -100,6 +103,10 @@
   padding: var(--size-12) var(--size-16);
   color: var(--color-interactive-primary);
 
+  &:focus {
+    outline: none;
+  }
+
   &--active {
     box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   }

package/src/inputs/SelectInput.spec.tsx

@@ -182,4 +182,30 @@ describe('SelectInput', () => {
     const listbox = screen.getByRole('listbox');
     expect(within(listbox).getAllByRole('option')).toHaveLength(2);
   });
+
+  it('selects multiple options', async () => {
+    render(
+      <SelectInput
+        multiple
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+      />,
+    );
+
+    const trigger = screen.getAllByRole('button')[0];
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.click(trigger);
+    });
+
+    const listbox = screen.getByRole('listbox');
+    const options = within(listbox).getAllByRole('option');
+    options.forEach((option) => {
+      userEvent.click(option);
+    });
+
+    expect(trigger).toHaveTextContent('USD, EUR');
+  });
 });

package/src/inputs/SelectInput.story.tsx

@@ -242,7 +242,7 @@ export const Currencies: StoryObj<{
   onChange: (value: Currency) => void;
 }> = {
   render: function Story({ onChange }) {
-    const [selectedCurrency, setSelectedCurrency] = useState<Currency>(popularCurrencies[0]);
+    const [selectedCurrency, setSelectedCurrency] = useState(popularCurrencies[0]);
 
     return (
       <SelectInput
@@ -301,6 +301,78 @@ export const Currencies: StoryObj<{
   },
 };
 
+export const MultipleCurrencies: StoryObj<{
+  onChange: (value: Currency[]) => void;
+}> = {
+  render: function Story({ onChange }) {
+    const [selectedCurrencies, setSelectedCurrencies] = useState<readonly Currency[]>([
+      popularCurrencies[0],
+    ]);
+
+    return (
+      <SelectInput
+        multiple
+        placeholder="Choose currencies…"
+        items={[
+          {
+            type: 'group',
+            label: 'Popular currencies',
+            options: popularCurrencies.map((currency) => currencyOption(currency)),
+          },
+          {
+            type: 'group',
+            label: 'All currencies',
+            options: allCurrencies.map((currency) => currencyOption(currency)),
+          },
+        ]}
+        value={selectedCurrencies}
+        renderValue={(currency, withinTrigger) =>
+          withinTrigger ? (
+            currency.code
+          ) : (
+            <SelectInputOptionContent
+              title={currency.code}
+              note={currency.name}
+              icon={<Flag code={currency.code} intrinsicSize={24} />}
+            />
+          )
+        }
+        // eslint-disable-next-line sonarjs/no-identical-functions
+        renderFooter={({ resultsEmpty, queryNormalized: normalizedQuery }) =>
+          resultsEmpty && normalizedQuery != null && /^[a-z]{3}$/u.test(normalizedQuery) ? (
+            <>
+              It’s not possible use {normalizedQuery.toUpperCase()} yet.{' '}
+              <a href="#_" className="np-text-link-default">
+                Email me when it’s available.
+              </a>
+            </>
+          ) : (
+            <>
+              Can’t find it?{' '}
+              <a href="#_" className="np-text-link-default">
+                Request the currency you need,
+              </a>{' '}
+              and we’ll notify you once it’s available.
+            </>
+          )
+        }
+        filterable
+        filterPlaceholder="Type a currency / country"
+        size="lg"
+        onChange={(currency) => {
+          setSelectedCurrencies(currency);
+          onChange(currency);
+        }}
+      />
+    );
+  },
+  argTypes: {
+    onChange: {
+      action: 'changed',
+    },
+  },
+};
+
 export const CustomTrigger: StoryObj = {
   render: function Story() {
     return (