@transferwise/components 46.160.5 → 46.160.7

package/src/PhoneNumberInput/PhoneNumberInput.less

@@ -6,6 +6,12 @@
   .tw-telephone__number-input {
     margin-left: var(--size-12);
   }
+
+  &__number-input-field{
+    [dir="rtl"] & {
+      text-align: end;
+    }
+  }
 }
 
 .tw-telephone__country-select {
@@ -15,6 +21,13 @@
   .np-input-group {
     width: 100%;
   }
+
+  .np-select-input-content{
+    [dir="rtl"] & {
+      text-align: end;
+      direction: ltr;
+    }
+  }
 }
 
 .tw-telephone__country-select--with-input-group-addon-start {

package/src/PhoneNumberInput/PhoneNumberInput.messages.ts

@@ -13,4 +13,9 @@ export default defineMessages({
     id: 'neptune.PhoneNumberInput.phoneNumberLabel',
     defaultMessage: 'Phone number',
   },
+  phoneNumberPrefix: {
+    id: 'neptune.PhoneNumberInput.phoneNumberPrefix',
+    defaultMessage: 'Prefix',
+    description: 'phone number prefix / country code',
+  },
 });

package/src/PhoneNumberInput/PhoneNumberInput.tsx

@@ -59,7 +59,7 @@ const PhoneNumberInput = ({
   onFocus,
   onBlur,
   countryCode,
-  searchPlaceholder = 'Prefix',
+  searchPlaceholder,
   size = Size.MEDIUM,
   placeholder,
   selectProps = defaultSelectProps,
@@ -232,7 +232,7 @@ const PhoneNumberInput = ({
             />
           )}
           filterable
-          filterPlaceholder={searchPlaceholder}
+          filterPlaceholder={searchPlaceholder ?? formatMessage(messages.phoneNumberPrefix)}
           disabled={disabled}
           size={size}
           id={ids.countryCode.select}
@@ -261,6 +261,7 @@ const PhoneNumberInput = ({
         <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>
           <Input
             ref={phoneNumberInputRef}
+            className="tw-telephone__number-input-field"
             id={ids.phoneNumber.input}
             autoComplete="tel-national"
             name="phoneNumber"

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Field from '../../Field/Field';
 import PhoneNumberInput from '..';
 
@@ -37,16 +37,24 @@ export const Sizes: Story = {
 };
 
 export const DropdownOpen: Story = {
-  render: () => (
-    <Field label="Phone number">
-      <PhoneNumberInput onChange={() => {}} />
-    </Field>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <Field label="Phone number">
+        <PhoneNumberInput searchPlaceholder={i18n.searchPlaceholder} onChange={() => {}} />
+      </Field>
+    );
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('combobox');
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    i18n: { searchPlaceholder: { ltr: 'Country code', rtl: 'رمز الدولة' } },
+  }),
 };

package/src/Prompt/InfoPrompt/InfoPrompt.test.tsx

@@ -274,11 +274,12 @@ describe('InfoPrompt', () => {
       expect(window.location.assign).not.toHaveBeenCalled();
     });
 
-    it('should not navigate if no action href is provided', () => {
+    it('should call onClick on touch tap when action has no href', () => {
+      const onClick = jest.fn();
       render(
         <InfoPrompt
           {...defaultProps}
-          action={{ label: 'Click me', onClick: jest.fn() }}
+          action={{ label: 'Click me', onClick }}
           data-testid="prompt"
         />,
       );
@@ -286,8 +287,61 @@ describe('InfoPrompt', () => {
 
       fireEvent.touchStart(prompt);
       fireEvent.touchEnd(prompt);
+      expect(onClick).toHaveBeenCalledTimes(1);
       expect(window.location.assign).not.toHaveBeenCalled();
       expect(window.open).not.toHaveBeenCalled();
     });
+
+    it('should call onClick and navigate when action has both href and onClick', () => {
+      const onClick = jest.fn();
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Learn more', href: '/learn-more', onClick }}
+          data-testid="prompt"
+        />,
+      );
+      const prompt = screen.getByTestId('prompt');
+
+      fireEvent.touchStart(prompt);
+      fireEvent.touchEnd(prompt);
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(window.location.assign).toHaveBeenCalledWith('/learn-more');
+    });
+
+    it('should not fire action when tapping dismiss button', () => {
+      const onClick = jest.fn();
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Learn more', href: '/learn-more', onClick }}
+          data-testid="prompt"
+          onDismiss={jest.fn()}
+        />,
+      );
+      const dismissButton = screen.getByRole('button', { name: 'Close', hidden: true });
+
+      fireEvent.touchStart(dismissButton);
+      fireEvent.touchEnd(dismissButton);
+      expect(onClick).not.toHaveBeenCalled();
+      expect(window.location.assign).not.toHaveBeenCalled();
+    });
+
+    it('should not double-fire onClick when tapping the action element directly', () => {
+      const onClick = jest.fn();
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Learn more', href: '/learn-more', onClick }}
+          data-testid="prompt"
+        />,
+      );
+      const actionLink = screen.getByRole('link', { name: 'Learn more', hidden: true });
+
+      fireEvent.touchStart(actionLink);
+      fireEvent.touchEnd(actionLink);
+      expect(onClick).not.toHaveBeenCalled();
+      expect(window.location.assign).not.toHaveBeenCalled();
+    });
   });
 });

package/src/Prompt/InfoPrompt/InfoPrompt.tsx

@@ -1,4 +1,4 @@
-import { Children, HTMLAttributes, ReactNode, isValidElement, useState } from 'react';
+import { Children, HTMLAttributes, ReactNode, TouchEvent, isValidElement, useState } from 'react';
 import { LiveRegion, Sentiment, Typography } from '../../common';
 import type { AriaLive } from '../../common';
 import { GiftBox } from '@transferwise/icons';
@@ -103,16 +103,23 @@ export const InfoPrompt = ({
       ? Sentiment.POSITIVE
       : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);
 
-  const handleTouchStart = () => {
+  const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLElement;
+    if (target.closest('.wds-prompt__dismiss') || target.closest('.wds-info-prompt__action')) {
+      return;
+    }
     setShouldFire(true);
   };
 
   const handleTouchEnd = () => {
-    if (shouldFire && action?.href) {
-      if (action.target === '_blank') {
-        window.top?.open(action.href, '_blank', 'noopener, noreferrer');
-      } else {
-        window.top?.location.assign(action.href);
+    if (shouldFire && action) {
+      (action.onClick as (() => void) | undefined)?.();
+      if (action.href) {
+        if (action.target === '_blank') {
+          window.top?.open(action.href, '_blank', 'noopener, noreferrer');
+        } else {
+          window.top?.location.assign(action.href);
+        }
       }
     }
     setShouldFire(false);

package/src/Prompt/InfoPrompt/_stories/InfoPrompt.story.tsx

@@ -236,7 +236,11 @@ export const WithTitle: Story = {
 
 /**
  * Use the `action` prop to add a clickable link below the message.
- * Actions can have an `href` for navigation or an `onClick` for custom behavior.
+ * Actions can have an `href` for navigation, an `onClick` for custom behavior, or both.
+ *
+ * On touch devices the entire prompt surface acts as a tap target for the action,
+ * making it easier to interact with on small screens. A scroll gesture (touch move)
+ * cancels the tap. Tapping the dismiss button does not trigger the action.
  */
 export const WithAction: Story = {
   render: (args: InfoPromptProps) => (
@@ -322,6 +326,7 @@ export const Dismissible: Story = {
             sentiment="success"
             title="Payment successful"
             description="Your payment was successful."
+            action={{ label: 'Learn more', href: '#', target: '_blank' }}
             onDismiss={() => setShowPrompt(false)}
           />
         ) : (

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -51,3 +51,20 @@
     grid-column: span 3;
   }
 }
+.wds-prompt__dismiss {
+  position: relative;
+}
+.wds-prompt__dismiss:before {
+  --size: calc(var(--size-24) + var(--Prompt-padding-x, var(--padding-x-small)) * 2);
+  --offset: calc(-1 * var(--Prompt-padding-x, var(--padding-x-small)));
+  content: "";
+  position: absolute;
+  inset: calc(-1 * 8px);
+  inset: var(--offset);
+  inline-size: calc(24px + 8px * 2);
+  inline-size: var(--size);
+  block-size: calc(24px + 8px * 2);
+  block-size: var(--size);
+  border-radius: 10px;
+  border-radius: var(--Prompt-border-radius, var(--radius-small));
+}

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -46,4 +46,19 @@
       }
     }
   }
+
+  &__dismiss {
+    position: relative;
+
+    &:before {
+      --size: calc(var(--size-24) + var(--Prompt-padding-x, var(--padding-x-small)) * 2);
+      --offset: calc(-1 * var(--Prompt-padding-x, var(--padding-x-small)));
+      content: "";
+      position: absolute;
+      inset: var(--offset);
+      width: var(--size);
+      height: var(--size);
+      border-radius: var(--Prompt-border-radius, var(--radius-small));
+    }
+  }
 }

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.tsx

@@ -75,6 +75,7 @@ export const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(
               size={24}
               priority="secondary"
               aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
+              className="wds-prompt__dismiss"
               onClick={onDismiss}
             >
               <Cross />

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

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import TextareaWithDisplayFormat from '..';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Field from '../../Field/Field';
+import TextareaWithDisplayFormat from '..';
 
 export default {
   component: TextareaWithDisplayFormat,
@@ -13,36 +13,51 @@ export default {
 type Story = StoryObj<typeof TextareaWithDisplayFormat>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Field id="card-code" label="Gift card code">
-        <TextareaWithDisplayFormat
-          id="card-code"
-          value="1234567890123456"
-          maxLength={16}
-          displayPattern="**** - **** - ****"
-          onChange={() => {}}
-        />
-      </Field>
-      <Field id="iban" label="IBAN">
-        <TextareaWithDisplayFormat
-          id="iban"
-          value="GB29NWBK60161331926819"
-          maxLength={22}
-          displayPattern="** **** **** **** **** **"
-          onChange={() => {}}
-        />
-      </Field>
-      <Field id="empty" label="Empty with placeholder">
-        <TextareaWithDisplayFormat
-          id="empty"
-          value=""
-          displayPattern="**** - **** - ****"
-          placeholder="Enter code"
-          onChange={() => {}}
-        />
-      </Field>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <>
+        <Field id="empty" label="Empty with placeholder">
+          <TextareaWithDisplayFormat
+            id="empty"
+            value=""
+            displayPattern="**** - **** - ****"
+            placeholder={i18n.placeholder}
+            onChange={() => {}}
+          />
+        </Field>
+        <Field id="card-code" label="Localised pattern">
+          <TextareaWithDisplayFormat
+            id="card-code"
+            value={i18n.value}
+            maxLength={16}
+            displayPattern="**** - **** - ****"
+            onChange={() => {}}
+          />
+        </Field>
+        <Field id="iban" label="IBAN (not localised)">
+          <TextareaWithDisplayFormat
+            id="iban"
+            value="GB29NWBK60161331926819"
+            maxLength={22}
+            displayPattern="** **** **** **** **** **"
+            onChange={() => {}}
+          />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      value: {
+        ltr: 'XKQMRTBWJNFL',
+        rtl: 'خكقمرتبوجنفل',
+      },
+      placeholder: {
+        ltr: 'Enter code',
+        rtl: 'أدخل الرمز',
+      },
+    },
+  }),
 };

package/src/Typeahead/TypeaheadInput/TypeaheadInput.tsx

@@ -6,6 +6,8 @@ import { Component, createRef, ReactNode } from 'react';
 
 import { Input } from '../../Inputs/Input/Input';
 import { TypeaheadOption, TypeaheadProps } from '../Typeahead';
+import { Direction } from '../../common';
+import { DirectionContext } from '../../Provider/Direction';
 
 const DEFAULT_INPUT_MIN_WIDTH = 10;
 
@@ -67,7 +69,7 @@ export default class TypeaheadInput<T> extends Component<
     });
   };
 
-  renderInput = () => {
+  renderInput = (isRTL: boolean) => {
     const {
       typeaheadId,
       autoFocus,
@@ -90,6 +92,7 @@ export default class TypeaheadInput<T> extends Component<
     return (
       <Input
         ref={this.inputRef}
+        dir={isRTL ? 'rtl' : 'auto'}
         className={clsx(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
@@ -116,26 +119,34 @@ export default class TypeaheadInput<T> extends Component<
   render() {
     const { multiple, selected, value, maxHeight, renderChip } = this.props;
 
-    return multiple ? (
-      <div
-        className="form-control typeahead__input-container"
-        style={{ maxHeight }}
-        onClick={() => {
-          this.inputRef.current?.focus();
-        }}
-      >
-        <div className="typeahead__input-wrapper">
-          {selected && selected.map((chip, idx) => renderChip(chip, idx))}
+    return (
+      <DirectionContext.Consumer>
+        {(direction) => {
+          const isRTL = direction === Direction.RTL;
 
-          {this.renderInput()}
-          <div className="typeahead__input-aligner" />
-        </div>
-        <div ref={this.sizerRef} className="sizer form-control typeahead__input">
-          {value}
-        </div>
-      </div>
-    ) : (
-      this.renderInput()
+          return multiple ? (
+            <div
+              className="form-control typeahead__input-container"
+              style={{ maxHeight }}
+              onClick={() => {
+                this.inputRef.current?.focus();
+              }}
+            >
+              <div className="typeahead__input-wrapper">
+                {selected && selected.map((chip, idx) => renderChip(chip, idx))}
+
+                {this.renderInput(isRTL)}
+                <div className="typeahead__input-aligner" />
+              </div>
+              <div ref={this.sizerRef} className="sizer form-control typeahead__input">
+                {value}
+              </div>
+            </div>
+          ) : (
+            this.renderInput(isRTL)
+          );
+        }}
+      </DirectionContext.Consumer>
     );
   }
 }

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

@@ -2,7 +2,11 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 import { Search as SearchIcon } from '@transferwise/icons';
 
-import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import {
+  forEachColumn,
+  useRtlDiffI18n,
+  withRTLDiff,
+} from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Size } from '../../common';
 import Typeahead from '..';
 
@@ -14,70 +18,99 @@ export default {
 
 type Story = StoryObj<typeof Typeahead>;
 
-const baseOptions = [
-  { label: 'British pound', note: 'GBP' },
-  { label: 'Euro', note: 'EUR' },
-  { label: 'US Dollar', note: 'USD' },
-];
+const localisedStrings = {
+  gbp: { ltr: 'British pound', rtl: 'جنيه إسترليني' },
+  eur: { ltr: 'Euro', rtl: 'يورو' },
+  usd: { ltr: 'US Dollar', rtl: 'دولار أمريكي' },
+  placeholder: { ltr: 'Search currencies…', rtl: 'ابحث عن العملات...' },
+};
 
 export const TriggerVariants: Story = {
-  render: () => (
-    <>
-      <Typeahead
-        id="rtl-addon-md"
-        name="rtl-addon-md"
-        placeholder="Search currencies…"
-        size={Size.MEDIUM}
-        addon={<SearchIcon size={24} />}
-        clearable
-        options={baseOptions}
-        initialValue={[{ label: 'British pound', note: 'GBP' }]}
-        onChange={() => {}}
-      />
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    const baseOptions = [
+      { label: i18n.gbp, note: 'GBP' },
+      { label: i18n.eur, note: 'EUR' },
+      { label: i18n.usd, note: 'USD' },
+    ];
+
+    return (
+      <>
+        <Typeahead
+          id="rtl-addon-placeholder"
+          name="rtl-addon-placeholder"
+          placeholder={i18n.placeholder}
+          size={Size.MEDIUM}
+          addon={<SearchIcon size={24} />}
+          clearable
+          options={baseOptions}
+          onChange={() => {}}
+        />
+        <Typeahead
+          id="rtl-addon-md"
+          name="rtl-addon-md"
+          placeholder={i18n.placeholder}
+          size={Size.MEDIUM}
+          addon={<SearchIcon size={24} />}
+          clearable
+          options={baseOptions}
+          initialValue={[{ label: i18n.gbp, note: 'GBP' }]}
+          onChange={() => {}}
+        />
+        <Typeahead
+          id="rtl-addon-lg"
+          name="rtl-addon-lg"
+          placeholder={i18n.placeholder}
+          size={Size.LARGE}
+          addon={<SearchIcon size={24} />}
+          clearable
+          options={baseOptions}
+          initialValue={[{ label: i18n.eur, note: 'EUR' }]}
+          onChange={() => {}}
+        />
+        <Typeahead
+          id="rtl-multiple"
+          name="rtl-multiple"
+          placeholder={i18n.placeholder}
+          size={Size.MEDIUM}
+          addon={<SearchIcon size={24} />}
+          multiple
+          clearable
+          options={baseOptions}
+          initialValue={[
+            { label: i18n.gbp, note: 'GBP' },
+            { label: i18n.eur, note: 'EUR' },
+          ]}
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({ width: '80%', i18n: localisedStrings }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
       <Typeahead
-        id="rtl-addon-lg"
-        name="rtl-addon-lg"
-        placeholder="Search currencies…"
+        id="rtl-open"
+        name="rtl-open"
+        placeholder={i18n.placeholder}
         size={Size.LARGE}
         addon={<SearchIcon size={24} />}
         clearable
-        options={baseOptions}
-        initialValue={[{ label: 'Euro', note: 'EUR' }]}
-        onChange={() => {}}
-      />
-      <Typeahead
-        id="rtl-multiple"
-        name="rtl-multiple"
-        placeholder="Search currencies…"
-        size={Size.MEDIUM}
-        addon={<SearchIcon size={24} />}
-        multiple
-        clearable
-        options={baseOptions}
-        initialValue={[
-          { label: 'British pound', note: 'GBP' },
-          { label: 'Euro', note: 'EUR' },
+        options={[
+          { label: i18n.gbp, note: 'GBP' },
+          { label: i18n.eur, note: 'EUR' },
+          { label: i18n.usd, note: 'USD' },
         ]}
         onChange={() => {}}
       />
-    </>
-  ),
-  ...withRTLDiff({ width: '80%' }),
-};
-
-export const OpenDropdown: Story = {
-  render: () => (
-    <Typeahead
-      id="rtl-open"
-      name="rtl-open"
-      placeholder="Search currencies…"
-      size={Size.LARGE}
-      addon={<SearchIcon size={24} />}
-      clearable
-      options={baseOptions}
-      onChange={() => {}}
-    />
-  ),
+    );
+  },
   play: async ({ canvasElement }) => {
     await forEachColumn(canvasElement, async (column) => {
       const scope = within(column);
@@ -86,5 +119,5 @@ export const OpenDropdown: Story = {
       await userEvent.keyboard('Brit');
     });
   },
-  ...withRTLDiff({ width: '80%' }),
+  ...withRTLDiff({ width: '80%', i18n: localisedStrings }),
 };

package/src/_deprecated/Select/_stories/Select.rtl.test.story.tsx

@@ -67,5 +67,12 @@ export const OpenDropdown: Story = {
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    width: '80%',
+    i18n: {
+      searchPlaceholder: { ltr: 'Type a currency', rtl: 'اكتب عملة' },
+      placeholder: { ltr: 'Select currency', rtl: 'اختر العملة' },
+    },
+  }),
 };