@transferwise/components 46.6.0 → 46.8.0

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';
@@ -32,6 +33,7 @@ export type {
   LinkTypes,
   DisplayTypes,
 } from './common';
+export type { SegmentedControlProps } from './segmentedControl';
 
 /**
  * Components
@@ -106,6 +108,7 @@ export { default as RadioGroup } from './radioGroup';
 export { default as RadioOption } from './radioOption';
 export { default as Section } from './section';
 export { default as Select } from './select';
+export { default as SegmentedControl } from './segmentedControl';
 export { default as SlidingPanel } from './slidingPanel';
 export { default as SnackbarPortal } from './snackbar/Snackbar';
 export { default as SnackbarProvider } from './snackbar/SnackbarProvider';

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 (

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%;
@@ -4640,6 +4629,107 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
   box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
 }
+.segmented-control {
+  box-sizing: border-box;
+  --segment-highlight-width: 0;
+  --segment-highlight-x: var(--size-4);
+}
+.segmented-control__segments {
+  display: inline-flex;
+  position: relative;
+  padding: 4px;
+  padding: var(--size-4);
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: outline 300ms;
+  outline: 2px solid transparent;
+}
+.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
+  outline: 2px solid var(--color-interactive-primary);
+}
+.segmented-control__segments::after {
+  content: "";
+  position: absolute;
+  width: var(--segment-highlight-width);
+  top: 4px;
+  top: var(--size-4);
+  bottom: 4px;
+  bottom: var(--size-4);
+  left: var(--segment-highlight-x);
+  z-index: 0;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  transition: left 300ms;
+}
+.segmented-control__segments--no-animate::after {
+  transition: none !important;
+}
+.segmented-control__segment {
+  position: relative;
+  flex: 1 1 100%;
+  flex-flow: column;
+  padding: 8px 16px;
+  padding: var(--size-8) var(--size-16);
+  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--size-4);
+  min-width: 0;
+  line-height: inherit;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 24px;
+  border-radius: var(--size-24);
+  z-index: 1;
+  cursor: pointer;
+  transition: background 300ms;
+  color: var(--color-interactive-primary);
+}
+.segmented-control__segment:first-child {
+  margin-left: 0;
+}
+.segmented-control__segment:hover {
+  background: rgba(0,0,0,0.10196);
+  background: var(--color-background-overlay);
+}
+.segmented-control__radio-input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+.segmented-control__button {
+  width: 100%;
+  height: 100%;
+  background: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  outline: none;
+  font: inherit;
+  outline: 2px solid transparent;
+}
+.segmented-control__button:focus {
+  outline-offset: 0px;
+}
+.segmented-control__button:focus-visible {
+  outline-color: var(--color-interactive-primary);
+}
+.segmented-control__selected-segment:hover {
+  background: transparent;
+}
+.segmented-control__text {
+  word-wrap: break-word;
+  word-break: break-word;
+  color: var(--color-interactive-primary);
+  transition: font-weight 300ms;
+}
 .np-summary {
   min-width: 280px;
 }

package/src/main.less

@@ -53,6 +53,7 @@
 @import "./statusIcon/StatusIcon.less";
 @import "./stepper/Stepper.less";
 @import "./select/Select.less";
+@import "./segmentedControl/SegmentedControl.less";
 @import "./summary/Summary.less";
 @import "./switch/Switch.less";
 @import "./tabs/Tabs.less";