@transferwise/components 46.6.0 → 46.7.0

package/src/inputs/SelectInput.tsx

@@ -12,7 +12,6 @@ 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';
@@ -125,13 +124,13 @@ function filterSelectInputItems<T>(items: readonly SelectInputItem<T>[], needle:
   });
 }
 
-export interface SelectInputProps<T = string> {
+export interface SelectInputProps<T = string, M extends boolean = false> {
   name?: string;
+  multiple?: M;
   placeholder?: string;
-  // TODO: multiple?: boolean;
   items: readonly SelectInputItem<NonNullable<T>>[];
-  defaultValue?: T;
-  value?: T;
+  defaultValue?: M extends true ? readonly T[] : T;
+  value?: M extends true ? readonly T[] : T;
   compareValues?:
     | (keyof NonNullable<T> & string)
     | ((a: T | undefined, b: T | undefined) => boolean);
@@ -154,7 +153,7 @@ export interface SelectInputProps<T = string> {
   size?: 'sm' | 'md' | 'lg';
   className?: string;
   onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
-  onChange?: (value: T) => void;
+  onChange?: (value: M extends true ? T[] : T) => void;
   onClear?: () => void;
 }
 
@@ -186,7 +185,14 @@ const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, siz
     className={className}
   >
     <SelectInputTriggerButton as={ButtonInput} size={size}>
-      {placeholderShown ? <span className="np-select-input-placeholder"> {content}</span> : content}
+      <span
+        className={classNames(
+          'np-select-input-content',
+          placeholderShown && 'np-select-input-placeholder',
+        )}
+      >
+        {content}
+      </span>
     </SelectInputTriggerButton>
   </InputGroup>
 )) satisfies SelectInputProps['renderTrigger'];
@@ -211,14 +217,15 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
 
 const noop = () => {};
 
-export function SelectInput<T = string>({
+export function SelectInput<T = string, M extends boolean = false>({
   name,
+  multiple,
   placeholder,
   items,
   defaultValue,
   value: controlledValue,
   compareValues,
-  renderValue = wrapInFragment,
+  renderValue = String,
   renderFooter,
   renderTrigger = defaultRenderTrigger,
   filterable,
@@ -229,7 +236,7 @@ export function SelectInput<T = string>({
   onFilterChange = noop,
   onChange,
   onClear,
-}: SelectInputProps<T>) {
+}: SelectInputProps<T, M>) {
   const [open, setOpen] = useState(false);
 
   const [filterQuery, _setFilterQuery] = useState('');
@@ -253,94 +260,106 @@ export function SelectInput<T = string>({
   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) => {
-        setOpen(false);
-        onChange?.(value);
-      }}
+      onChange={
+        ((value) => {
+          if (!multiple) {
+            setOpen(false);
+          }
+          onChange?.(value);
+        }) satisfies SelectInputProps<T, M>['onChange']
+      }
     >
-      {({ 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'
-                      ) {
+      {({ 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: () => {
                         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:
-                  value != null ? (
+                    getInteractionProps(),
+                  ),
+                }}
+              >
+                {renderTrigger({
+                  content: !placeholderShown ? (
                     <SelectInputOptionContentWithinTriggerContext.Provider value>
-                      {renderValue(value, true)}
+                      {multiple && Array.isArray(value)
+                        ? value
+                            .map((option: NonNullable<T>) => renderValue(option, true))
+                            .join(', ')
+                        : renderValue(value as NonNullable<T>, true)}
                     </SelectInputOptionContentWithinTriggerContext.Provider>
                   ) : (
                     placeholder
                   ),
-                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>
-      )}
+                  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>
+        );
+      }}
     </ListboxBase>
   );
 }
@@ -430,7 +449,7 @@ interface SelectInputOptionsProps<T = string>
 
 function SelectInputOptions<T = string>({
   items,
-  renderValue = wrapInFragment,
+  renderValue = String,
   renderFooter,
   filterable = false,
   filterPlaceholder,

package/src/inputs/TextArea.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/main.css

@@ -74,14 +74,6 @@ div.critical-comms .critical-comms-body {
     flex-wrap: wrap;
   }
 }
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);line-height: 1.5;line-height: var(--line-height-body);
-}
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-}
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
   font-size: 0.875rem;
   font-size: var(--font-size-14);line-height: 155%;letter-spacing: -0.006em;font-weight: 400;font-weight: var(--font-weight-regular);
@@ -2226,10 +2218,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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%;
@@ -2511,10 +2499,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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);
 }
@@ -2622,6 +2612,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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);
@@ -4455,10 +4448,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   border-radius: var(--radius-small);
   color: #37517e;
   color: var(--color-content-primary);
-  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/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');
     });
   });
 });

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -0,0 +1,193 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+
+import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
+
+import countries from './data/countries';
+import {
+  explodeNumberModel,
+  isValidPhoneNumber,
+  cleanNumber,
+  setDefaultPrefix,
+  sortArrayByProperty,
+  groupCountriesByPrefix,
+  excludeCountries,
+  findCountryByPrefix,
+} from './utils';
+import { PhoneNumber } from './utils/explodeNumberModel';
+
+const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
+
+export interface PhoneNumberInputProps {
+  id?: string;
+  required?: boolean;
+  disabled?: boolean;
+  initialValue?: string;
+  onChange: (value: string | null, prefix: string) => void;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  countryCode?: string;
+  searchPlaceholder?: string;
+  size?: SizeSmall | SizeMedium | SizeLarge;
+  placeholder?: string;
+  selectProps?: Partial<SelectInputProps<string | null>>;
+  /** List of iso3 codes of countries to remove from the list */
+  disabledCountries?: string[];
+}
+
+const defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];
+const defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];
+
+const PhoneNumberInput = ({
+  id,
+  required,
+  disabled,
+  initialValue,
+  onChange,
+  onFocus,
+  onBlur,
+  countryCode,
+  searchPlaceholder = 'Prefix',
+  size = Size.MEDIUM,
+  placeholder,
+  selectProps = defaultSelectProps,
+  disabledCountries = defaultDisabledCountries,
+}: PhoneNumberInputProps) => {
+  const { locale } = useIntl();
+
+  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
+    const cleanValue = initialValue ? cleanNumber(initialValue) : null;
+
+    if (!cleanValue || !isValidPhoneNumber(cleanValue)) {
+      return {
+        prefix: setDefaultPrefix(locale, countryCode),
+        suffix: '',
+      };
+    }
+
+    return explodeNumberModel(cleanValue);
+  });
+  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);
+
+  const countriesByPrefix = useMemo(
+    () =>
+      groupCountriesByPrefix(
+        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),
+      ),
+    [disabledCountries],
+  );
+
+  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    const suffix = event.target.value;
+    if (ALLOWED_PHONE_CHARS.test(suffix)) {
+      setInternalValue((prev) => ({ ...prev, suffix }));
+    }
+  };
+
+  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
+    if (!event.nativeEvent.clipboardData) {
+      return;
+    }
+
+    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(
+      /(\s|-)+/g,
+      '',
+    );
+    const pastedNumber = explodeNumberModel(pastedValue);
+
+    if (
+      pastedNumber.prefix != null &&
+      countriesByPrefix.has(pastedNumber.prefix) &&
+      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)
+    ) {
+      setInternalValue(pastedNumber);
+    }
+  };
+
+  useEffect(() => {
+    if (broadcastedValue === null) {
+      return setBroadcastedValue(internalValue);
+    }
+
+    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
+    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
+
+    if (internalPhoneNumber === broadcastedPhoneNumber) {
+      return;
+    }
+
+    const newValue = isValidPhoneNumber(internalPhoneNumber)
+      ? cleanNumber(internalPhoneNumber)
+      : null;
+
+    onChange(
+      newValue,
+      internalValue.prefix ?? '', // TODO: Allow `null` in public API
+    );
+    setBroadcastedValue(internalValue);
+  }, [onChange, broadcastedValue, internalValue]);
+
+  return (
+    <div className="tw-telephone">
+      <div className="tw-telephone__country-select">
+        <SelectInput
+          placeholder="Select an option…"
+          items={[...countriesByPrefix].map(([prefix, countries]) => ({
+            type: 'option',
+            value: prefix,
+            filterMatchers: [
+              prefix,
+              ...countries.map((country) => country.name),
+              ...countries.map((country) => country.iso3),
+            ],
+          }))}
+          value={internalValue.prefix}
+          renderValue={(prefix, withinTrigger) => (
+            <SelectInputOptionContent
+              title={prefix}
+              note={
+                withinTrigger
+                  ? undefined
+                  : countriesByPrefix
+                      .get(prefix)
+                      ?.map((country) => country.iso3)
+                      .join(', ')
+              }
+            />
+          )}
+          filterable
+          filterPlaceholder={searchPlaceholder}
+          disabled={disabled}
+          size={size}
+          onChange={(prefix) => {
+            const country = prefix != null ? findCountryByPrefix(prefix) : null;
+            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));
+          }}
+          {...selectProps}
+        />
+      </div>
+      <div className="tw-telephone__number-input">
+        <div className={`input-group input-group-${size}`}>
+          <input
+            id={id}
+            autoComplete="tel-national"
+            name="phoneNumber"
+            inputMode="numeric"
+            value={internalValue.suffix}
+            className="form-control"
+            disabled={disabled}
+            required={required}
+            placeholder={placeholder}
+            onChange={onSuffixChange}
+            onPaste={onPaste}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PhoneNumberInput;