@transferwise/components 0.0.0-experimental-2e23c2a → 0.0.0-experimental-16e2eec

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/inputs/SelectInput.css

@@ -158,12 +158,10 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-.np-select-input-content {
+.np-select-input-placeholder {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-.np-select-input-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }

package/src/inputs/SelectInput.less

@@ -3,13 +3,10 @@
 @import "./_Popover.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
-.np-select-input-content {
+.np-select-input-placeholder {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-
-.np-select-input-placeholder {
   color: var(--color-content-tertiary);
 }
 

package/src/inputs/SelectInput.spec.tsx

@@ -182,30 +182,4 @@ 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(popularCurrencies[0]);
+    const [selectedCurrency, setSelectedCurrency] = useState<Currency>(popularCurrencies[0]);
 
     return (
       <SelectInput
@@ -301,78 +301,6 @@ 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 (

package/src/inputs/SelectInput.tsx

@@ -12,6 +12,7 @@ import { useScreenSize } from '../common/hooks/useScreenSize';
 import { PolymorphicWithOverrides } from '../common/polymorphicWithOverrides/PolymorphicWithOverrides';
 import { Breakpoint } from '../common/propsValues/breakpoint';
 import dateTriggerMessages from '../dateLookup/dateTrigger/DateTrigger.messages';
+import { wrapInFragment } from '../utilities/wrapInFragment';
 import { Merge } from '../utils';
 
 import { InputGroup } from './InputGroup';
@@ -124,13 +125,13 @@ function filterSelectInputItems<T>(items: readonly SelectInputItem<T>[], needle:
   });
 }
 
-export interface SelectInputProps<T = string, M extends boolean = false> {
+export interface SelectInputProps<T = string> {
   name?: string;
-  multiple?: M;
   placeholder?: string;
+  // TODO: multiple?: boolean;
   items: readonly SelectInputItem<NonNullable<T>>[];
-  defaultValue?: M extends true ? readonly T[] : T;
-  value?: M extends true ? readonly T[] : T;
+  defaultValue?: T;
+  value?: T;
   compareValues?:
     | (keyof NonNullable<T> & string)
     | ((a: T | undefined, b: T | undefined) => boolean);
@@ -153,7 +154,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   size?: 'sm' | 'md' | 'lg';
   className?: string;
   onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
-  onChange?: (value: M extends true ? T[] : T) => void;
+  onChange?: (value: T) => void;
   onClear?: () => void;
 }
 
@@ -185,14 +186,7 @@ const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, siz
     className={className}
   >
     <SelectInputTriggerButton as={ButtonInput} size={size}>
-      <span
-        className={classNames(
-          'np-select-input-content',
-          placeholderShown && 'np-select-input-placeholder',
-        )}
-      >
-        {content}
-      </span>
+      {placeholderShown ? <span className="np-select-input-placeholder"> {content}</span> : content}
     </SelectInputTriggerButton>
   </InputGroup>
 )) satisfies SelectInputProps['renderTrigger'];
@@ -217,15 +211,14 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
 
 const noop = () => {};
 
-export function SelectInput<T = string, M extends boolean = false>({
+export function SelectInput<T = string>({
   name,
-  multiple = false as M,
   placeholder,
   items,
   defaultValue,
   value: controlledValue,
   compareValues,
-  renderValue = String,
+  renderValue = wrapInFragment,
   renderFooter,
   renderTrigger = defaultRenderTrigger,
   filterable,
@@ -236,7 +229,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   onFilterChange = noop,
   onChange,
   onClear,
-}: SelectInputProps<T, M>) {
+}: SelectInputProps<T>) {
   const [open, setOpen] = useState(false);
 
   const [filterQuery, _setFilterQuery] = useState('');
@@ -260,106 +253,94 @@ export function SelectInput<T = string, M extends boolean = false>({
   return (
     <ListboxBase
       name={name}
-      multiple={multiple}
       defaultValue={defaultValue}
       value={controlledValue}
       // TODO: Remove assertion when upgrading TypeScript to v5
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       by={compareValues as any}
       disabled={disabled}
-      onChange={
-        ((value) => {
-          if (!multiple) {
-            setOpen(false);
-          }
-          onChange?.(value);
-        }) satisfies SelectInputProps<T, M>['onChange']
-      }
+      onChange={(value) => {
+        setOpen(false);
+        onChange?.(value);
+      }}
     >
-      {({ disabled: uiDisabled, value }) => {
-        const placeholderShown =
-          multiple && Array.isArray(value) ? value.length === 0 : value == null;
-        return (
-          <OptionsOverlay
-            placement="bottom-start"
-            open={open}
-            renderTrigger={({ ref, getInteractionProps }) => (
-              <SelectInputTriggerButtonPropsContext.Provider
-                // eslint-disable-next-line react/jsx-no-constructed-context-values
-                value={{
-                  ref: mergeRefs([ref, triggerRef]),
-                  ...mergeProps(
-                    {
-                      onClick: () => {
+      {({ disabled: uiDisabled, value }) => (
+        <OptionsOverlay
+          placement="bottom-start"
+          open={open}
+          renderTrigger={({ ref, getInteractionProps }) => (
+            <SelectInputTriggerButtonPropsContext.Provider
+              // eslint-disable-next-line react/jsx-no-constructed-context-values
+              value={{
+                ref: mergeRefs([ref, triggerRef]),
+                ...mergeProps(
+                  {
+                    onClick: () => {
+                      setOpen((prev) => !prev);
+                    },
+                    onKeyDown: (event: React.KeyboardEvent) => {
+                      if (
+                        event.key === ' ' ||
+                        event.key === 'Enter' ||
+                        event.key === 'ArrowDown' ||
+                        event.key === 'ArrowUp'
+                      ) {
                         setOpen((prev) => !prev);
-                      },
-                      onKeyDown: (event: React.KeyboardEvent) => {
-                        if (
-                          event.key === ' ' ||
-                          event.key === 'Enter' ||
-                          event.key === 'ArrowDown' ||
-                          event.key === 'ArrowUp'
-                        ) {
-                          setOpen((prev) => !prev);
-                        }
-                      },
+                      }
                     },
-                    getInteractionProps(),
-                  ),
-                }}
-              >
-                {renderTrigger({
-                  content: !placeholderShown ? (
+                  },
+                  getInteractionProps(),
+                ),
+              }}
+            >
+              {renderTrigger({
+                content:
+                  value != null ? (
                     <SelectInputOptionContentWithinTriggerContext.Provider value>
-                      {multiple && Array.isArray(value)
-                        ? value
-                            .map((option: NonNullable<T>) => renderValue(option, true))
-                            .join(', ')
-                        : renderValue(value as NonNullable<T>, true)}
+                      {renderValue(value, true)}
                     </SelectInputOptionContentWithinTriggerContext.Provider>
                   ) : (
                     placeholder
                   ),
-                  placeholderShown,
-                  clear:
-                    onClear != null
-                      ? () => {
-                          onClear();
-                          triggerRef.current?.focus({ preventScroll: true });
-                        }
-                      : undefined,
-                  disabled: uiDisabled,
-                  size,
-                  className,
-                })}
-              </SelectInputTriggerButtonPropsContext.Provider>
-            )}
-            initialFocusRef={controllerRef}
-            size={filterable ? 'lg' : 'md'}
-            padding="none"
-            onClose={() => {
-              setOpen(false);
-            }}
-            onCloseEnd={() => {
-              if (filterQuery !== '') {
-                setFilterQuery('');
-              }
-            }}
-          >
-            <SelectInputOptions
-              items={items}
-              renderValue={renderValue}
-              renderFooter={renderFooter}
-              filterable={filterable}
-              filterPlaceholder={filterPlaceholder}
-              searchInputRef={searchInputRef}
-              listboxRef={listboxRef}
-              filterQuery={filterQuery}
-              onFilterChange={setFilterQuery}
-            />
-          </OptionsOverlay>
-        );
-      }}
+                placeholderShown: value == null,
+                clear:
+                  onClear != null
+                    ? () => {
+                        onClear();
+                        triggerRef.current?.focus({ preventScroll: true });
+                      }
+                    : undefined,
+                disabled: uiDisabled,
+                size,
+                className,
+              })}
+            </SelectInputTriggerButtonPropsContext.Provider>
+          )}
+          initialFocusRef={controllerRef}
+          size={filterable ? 'lg' : 'md'}
+          padding="none"
+          onClose={() => {
+            setOpen(false);
+          }}
+          onCloseEnd={() => {
+            if (filterQuery !== '') {
+              setFilterQuery('');
+            }
+          }}
+        >
+          <SelectInputOptions
+            items={items}
+            renderValue={renderValue}
+            renderFooter={renderFooter}
+            filterable={filterable}
+            filterPlaceholder={filterPlaceholder}
+            searchInputRef={searchInputRef}
+            listboxRef={listboxRef}
+            filterQuery={filterQuery}
+            onFilterChange={setFilterQuery}
+          />
+        </OptionsOverlay>
+      )}
     </ListboxBase>
   );
 }
@@ -449,7 +430,7 @@ interface SelectInputOptionsProps<T = string>
 
 function SelectInputOptions<T = string>({
   items,
-  renderValue = String,
+  renderValue = wrapInFragment,
   renderFooter,
   filterable = false,
   filterPlaceholder,

package/src/main.css

@@ -2511,12 +2511,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-.np-select-input-content {
+.np-select-input-placeholder {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-.np-select-input-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }

package/src/phoneNumberInput/PhoneNumberInput.spec.js

@@ -37,11 +37,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set prefix control to default UK value', () => {
-      expect(select.props().value).toStrictEqual({
-        value: '+44',
-        note: 'GBR, GGY, IMN, JEY',
-        label: '+44',
-      });
+      expect(select.props().value).toBe('+44');
     });
 
     it('should set number control to empty', () => {
@@ -49,11 +45,11 @@ describe('Given a telephone number component', () => {
     });
 
     it('should not disable the select', () => {
-      expect(select.prop('disabled')).toBe(false);
+      expect(select.prop('disabled')).toBeFalsy();
     });
 
     it('should not disable the input', () => {
-      expect(input.prop('disabled')).toBe(false);
+      expect(input.prop('disabled')).toBeFalsy();
     });
   });
 
@@ -65,7 +61,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set control values correctly', () => {
-      expect(select.props().value.value).toStrictEqual('+39');
+      expect(select.props().value).toBe('+39');
       expect(input.prop('value')).toBe('123456789');
     });
   });
@@ -92,8 +88,8 @@ describe('Given a telephone number component', () => {
       input = component.find(NUMBER_SELECTOR);
     });
 
-    it('should render input with null id', () => {
-      expect(input.prop('id')).toBeNull();
+    it('should render input with unspecified id', () => {
+      expect(input.prop('id')).toBeUndefined();
     });
   });
 
@@ -118,7 +114,7 @@ describe('Given a telephone number component', () => {
       it(`${number} code should update the value properly`, () => {
         simulatePaste(component.find('input'), number);
 
-        expect(select().props().value.value).toStrictEqual(countryCode);
+        expect(select().props().value).toBe(countryCode);
         expect(input().prop('value')).toBe(localNumber);
         expect(props.onChange).toHaveBeenCalledWith(number.replace(/(\s|-)+/g, ''), countryCode);
       });
@@ -126,28 +122,28 @@ describe('Given a telephone number component', () => {
 
     it('should not paste invalid characters', () => {
       simulatePaste(component.find('input'), '+36asdasdasd');
-      expect(select().props().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it('should not paste countries which are not in the select', () => {
       simulatePaste(component.find('input'), '+9992342343423');
-      expect(select().props().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should not paste numbers which doesn't start with the country code", () => {
       simulatePaste(component.find('input'), '0+36303932551');
-      expect(select().props().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should not paste numbers which doesn't contain a country code", () => {
       simulatePaste(component.find('input'), '06303932551');
-      expect(select().props().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
@@ -161,7 +157,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set the select to the longest matching prefix', () => {
-      expect(select.props().value.value).toStrictEqual('+1868');
+      expect(select.props().value).toBe('+1868');
     });
 
     it('should set the number input to the rest of the number', () => {
@@ -177,7 +173,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should empty the select', () => {
-      expect(select.props().value).toBeUndefined();
+      expect(select.props().value).toBeNull();
     });
 
     it('should put the whole value in the input without the plus', () => {
@@ -191,7 +187,7 @@ describe('Given a telephone number component', () => {
       select = component.find(PREFIX_SELECT_SELECTOR);
       input = component.find(NUMBER_SELECTOR);
 
-      expect(select.props().value.value).toStrictEqual('+44');
+      expect(select.props().value).toBe('+44');
       expect(input.prop('value')).toBe('');
     });
   });
@@ -254,7 +250,7 @@ describe('Given a telephone number component', () => {
       });
 
       it('should use the prefix of the supplied value', () => {
-        expect(select.props().value.value).toBe('+1');
+        expect(select.props().value).toBe('+1');
       });
     });
 
@@ -268,7 +264,7 @@ describe('Given a telephone number component', () => {
         });
 
         it('should default the prefix to the local country', () => {
-          expect(select.props().value.value).toBe('+34');
+          expect(select.props().value).toBe('+34');
         });
       });
 
@@ -281,7 +277,7 @@ describe('Given a telephone number component', () => {
         });
 
         it('should override locale prefix with country specific prefix', () => {
-          expect(select.props().value.value).toBe('+1');
+          expect(select.props().value).toBe('+1');
         });
       });
     });
@@ -349,7 +345,7 @@ describe('Given a telephone number component', () => {
 
     it('renders Select component with expected props', () => {
       const select = component.find(PREFIX_SELECT_SELECTOR);
-      expect(select.prop('className')).toStrictEqual('custom-class');
+      expect(select.prop('className')).toBe('custom-class');
     });
   });
 });