@transferwise/components 46.160.5 → 46.160.7

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.less

@@ -15,6 +15,11 @@
     color: var(--color-interactive-primary);
     overflow: hidden;
     margin-bottom: 0 !important;
+
+    [dir="rtl"] & {
+      display: inline-grid;
+      grid-template-columns: auto 1fr;
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -30,6 +35,8 @@
     text-align: right;
     background-color: transparent;
     line-height: inherit;
+    field-sizing: content;
+    height: inherit;
 
     &:focus-visible {
       outline: none;

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx

@@ -296,13 +296,14 @@ export const AmountInput = ({
   });
 
   return (
-    <div className="wds-amount-input-container">
+    <div className="wds-amount-input-container" dir="ltr">
       <div
         className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}
         style={style}
       >
         <input
           ref={ref}
+          dir="auto"
           className="wds-amount-input-input"
           id={id}
           autoComplete="off"

package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.css

@@ -10,6 +10,10 @@
   overflow: hidden;
   margin-block-end: 0 !important;
 }
+[dir="rtl"] .wds-amount-input-input-container {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-amount-input-input-container {
     transition: none;
@@ -22,6 +26,8 @@
   text-align: end;
   background-color: transparent;
   line-height: inherit;
+  field-sizing: content;
+  block-size: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;

package/src/ExpressiveMoneyInput/hooks/useInputStyle.ts

@@ -16,14 +16,13 @@ type InputStyleObject = {
 
 export const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {
   const initialRender = !useTimeout(300);
-  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [
+  const inputWidth = useFirstDefinedValue(inputElement?.current?.parentElement?.clientWidth, [
     inputElement?.current,
     value,
   ]);
 
   const getStyle = useCallback((): CSSProperties => {
     const fontSize = getFontSize(value, focus, inputWidth);
-
     return {
       fontSize,
       height: fontSize,

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

@@ -62,6 +62,22 @@ export const RTLDiff: Story = {
     const i18n = useRtlDiffI18n();
     return (
       <>
+        <Field label="Localised placeholder">
+          <Input placeholder={i18n.placeholder_ar} />
+        </Field>
+
+        <Field label="Localised value">
+          <Input defaultValue={i18n.value_ar} />
+        </Field>
+
+        <Field label="LTR placeholder (email input)">
+          <Input placeholder={i18n.placeholder_en} type="email" />
+        </Field>
+
+        <Field label="LTR value (email input)">
+          <Input defaultValue={i18n.value_en} />
+        </Field>
+
         <Field label={i18n.requiredLabel}>
           <Input defaultValue={i18n.inputValue} />
         </Field>
@@ -95,7 +111,18 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    width: 'stretch',
     i18n: {
+      placeholder_en: { ltr: 'LTR placeholder...', rtl: 'LTR placeholder...' },
+      placeholder_ar: { ltr: 'Localised placeholder...', rtl: 'نص بديل مترجم...' },
+      value_en: {
+        ltr: 'ltr@value.com',
+        rtl: 'ltr@value.com',
+      },
+      value_ar: {
+        ltr: 'localised value',
+        rtl: 'قيمة مُكيَّفة محلياً',
+      },
       requiredLabel: { ltr: 'Required field', rtl: 'حقل مطلوب' },
       optionalLabel: { ltr: 'Optional field', rtl: 'حقل اختياري' },
       descriptionLabel: { ltr: 'Field with description and message', rtl: 'حقل مع وصف ورسالة' },

package/src/Inputs/Input/Input.css

@@ -147,6 +147,25 @@
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+[dir="rtl"] .np-input::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input::placeholder,
+[dir="rtl"] .np-input:placeholder-shown {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-input:-moz-placeholder[type="email"], [dir="rtl"] .np-input:-moz-placeholder[type="tel"], [dir="rtl"] .np-input:-moz-placeholder[type="number"], [dir="rtl"] .np-input:-moz-placeholder[type="url"] {
+  direction: ltr !important;
+}
+[dir="rtl"] .np-input:placeholder-shown[type="email"],
+[dir="rtl"] .np-input:placeholder-shown[type="tel"],
+[dir="rtl"] .np-input:placeholder-shown[type="number"],
+[dir="rtl"] .np-input:placeholder-shown[type="url"] {
+  direction: ltr !important;
+}
 .np-input--shape-rectangle {
   border-radius: 10px !important;
   border-radius: var(--radius-small) !important;

package/src/Inputs/Input/Input.less

@@ -5,6 +5,22 @@
     color: var(--color-content-tertiary);
   }
 
+  &::placeholder,
+  &:placeholder-shown{
+    [dir="rtl"] & {
+      direction: rtl !important;
+    }
+  }
+
+  &:placeholder-shown[type="email"],
+  &:placeholder-shown[type="tel"],
+  &:placeholder-shown[type="number"],
+  &:placeholder-shown[type="url"] {
+    [dir="rtl"] & {
+      direction: ltr !important;
+    }
+  }
+
   &--shape-rectangle {
     border-radius: var(--radius-small) !important;
   }

package/src/Inputs/Input/Input.tsx

@@ -26,6 +26,7 @@ export const Input = forwardRef(function Input(
   return (
     <input
       ref={reference}
+      dir="auto"
       className={clsx(className, inputClassNameBase({ size }), 'np-input', {
         'np-input--shape-rectangle': shape === 'rectangle',
         'np-input--shape-pill': shape === 'pill',

package/src/Inputs/{_stories → InputGroup/_stories}/InputGroup.story.tsx

@@ -1,19 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Search } from '@transferwise/icons';
 import { useRef, useState } from 'react';
+import { Search } from '@transferwise/icons';
+import { Flag } from '@wise/art';
 
 import {
   createSandboxStory,
   globalScope,
-} from '../../../.storybook/components/sandbox/SandboxEditor';
-import Field from '../../Field';
+} from '../../../../.storybook/components/sandbox/SandboxEditor';
 
-import { Input } from '../Input/Input';
-import { Flag } from '@wise/art';
-import { InputGroup } from '../InputGroup/InputGroup';
-import AvatarView from '../../AvatarView';
-import PhoneNumberInput from '../../PhoneNumberInput';
-import Button from '../../Button';
+import Field from '../../../Field';
+import AvatarView from '../../../AvatarView';
+import PhoneNumberInput from '../../../PhoneNumberInput';
+import Button from '../../../Button';
+import { Input } from '../../Input/Input';
+import { InputGroup } from '../InputGroup';
 
 export default {
   component: InputGroup,

package/src/Inputs/InputGroup/_stories/InputGroup.test.story.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Search } from '@transferwise/icons';
+
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import Button from '../../../Button';
+import { Input } from '../../Input/Input';
+import { InputGroup } from '../InputGroup';
+
+export default {
+  component: InputGroup,
+  title: 'Forms/InputGroup/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof InputGroup>;
+
+type Story = StoryObj<typeof InputGroup>;
+
+/**
+ * InputGroup positions addons at the logical start or end of an input.
+ * In RTL mode the start and end sides are mirrored, so an addonStart icon
+ * should appear on the right and an addonEnd button should appear on the left.
+ * All three placement combinations are included to verify each case.
+ */
+export const RTLDiff: Story = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <>
+        <InputGroup
+          addonStart={{
+            content: <Search size={24} />,
+            initialContentWidth: 24,
+          }}
+        >
+          <Input placeholder={i18n.placeholder_start} />
+        </InputGroup>
+
+        <InputGroup
+          addonEnd={{
+            content: (
+              <Button v2 size="sm">
+                Copy
+              </Button>
+            ),
+            interactive: true,
+            padding: 'sm',
+          }}
+        >
+          <Input placeholder={i18n.placeholder_end} />
+        </InputGroup>
+
+        <InputGroup
+          addonStart={{
+            content: <Search size={24} />,
+            initialContentWidth: 24,
+          }}
+          addonEnd={{
+            content: (
+              <Button v2 size="sm">
+                Clear
+              </Button>
+            ),
+            interactive: true,
+            padding: 'sm',
+          }}
+        >
+          <Input placeholder={i18n.placeholder_both} />
+        </InputGroup>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n:{
+      placeholder_both: { ltr: 'addonStart and addonEnd', rtl: 'البادئة والنهاية' },
+      placeholder_start: { ltr: 'addonStart only', rtl: 'البادئة فقط' },
+      placeholder_end: { ltr: 'addonEnd only', rtl: 'النهاية فقط' },
+
+    }
+  }),
+};

package/src/Inputs/{_stories → SearchInput/_stories}/SearchInput.story.tsx

@@ -4,11 +4,11 @@ import { useState } from 'react';
 import {
   createSandboxStory,
   globalScope,
-} from '../../../.storybook/components/sandbox/SandboxEditor';
-import { Size } from '../../common';
-import Field from '../../Field';
+} from '../../../../.storybook/components/sandbox/SandboxEditor';
+import { Size } from '../../../common';
+import Field from '../../../Field';
 
-import { SearchInput } from '../SearchInput/SearchInput';
+import { SearchInput } from '../SearchInput';
 
 export default {
   component: SearchInput,

package/src/Inputs/SearchInput/_stories/SearchInput.test.story.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { Size } from '../../../common';
+import { SearchInput } from '../SearchInput';
+
+export default {
+  component: SearchInput,
+  title: 'Forms/SearchInput/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof SearchInput>;
+
+type Story = StoryObj<typeof SearchInput>;
+
+export const RTLDiff: Story = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <>
+        {/* sm — search icon (addonStart) position flips to trailing side in RTL */}
+        <SearchInput size={Size.SMALL} shape="pill" placeholder={i18n.placeholder} />
+
+        {/* md — search icon (addonStart) position flips to trailing side in RTL */}
+        <SearchInput size={Size.MEDIUM} shape="pill" placeholder={i18n.placeholder} />
+
+        {/* sm rectangle — icon flip with rectangle shape */}
+        <SearchInput size={Size.SMALL} shape="rectangle" placeholder={i18n.placeholder} />
+
+        {/* md rectangle — icon flip with rectangle shape */}
+        <SearchInput size={Size.MEDIUM} shape="rectangle" placeholder={i18n.placeholder} />
+      </>
+    );
+  },
+  ...withRTLDiff({i18n:{
+      placeholder: { ltr: 'Search', rtl: 'بحث' },
+    }}),
+};

package/src/Inputs/SelectInput/_stories/SelectInput.rtl.test.story.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 import { Flag } from '@wise/art';
 
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { SelectInput, SelectInputOptionContent } from '..';
 
 export default {
@@ -108,28 +108,40 @@ const groupedItems = [
 ];
 
 export const OpenDropdown: Story = {
-  render: () => (
-    <SelectInput
-      size="lg"
-      filterable
-      filterPlaceholder="Type a currency / country"
-      placeholder="Select currency"
-      defaultValue={rtlCurrencies[0]}
-      items={groupedItems}
-      renderValue={(currency, withinTrigger) => (
-        <SelectInputOptionContent
-          title={currency.code}
-          note={withinTrigger ? undefined : currency.name}
-          icon={<Flag code={currency.code} intrinsicSize={24} />}
-        />
-      )}
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <SelectInput
+        size="lg"
+        filterable
+        filterPlaceholder={i18n.filterPlaceholder}
+        placeholder="Select currency"
+        defaultValue={rtlCurrencies[0]}
+        items={groupedItems}
+        renderValue={(currency, withinTrigger) => (
+          <SelectInputOptionContent
+            title={currency.code}
+            note={withinTrigger ? undefined : currency.name}
+            icon={<Flag code={currency.code} intrinsicSize={24} />}
+          />
+        )}
+      />
+    );
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('combobox');
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    width: '80%',
+    i18n: {
+      filterPlaceholder: {
+        ltr: 'Type a currency / country',
+        rtl: 'اكتب عملة / دولة',
+      },
+    },
+  }),
 };

package/src/Inputs/TextArea/TextArea.css

@@ -154,7 +154,22 @@
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.np-text-area::placeholder {
+.np-text-area:-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+.np-text-area::placeholder,
+.np-text-area:placeholder-shown {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+[dir="rtl"] .np-text-area::-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area:-moz-placeholder {
+  direction: rtl !important;
+}
+[dir="rtl"] .np-text-area::placeholder,
+[dir="rtl"] .np-text-area:placeholder-shown {
+  direction: rtl !important;
+}

package/src/Inputs/TextArea/TextArea.less

@@ -7,7 +7,12 @@
   overscroll-behavior: none;
   border-radius: var(--radius-small) !important;
 
-  &::placeholder {
+  &::placeholder,
+  &:placeholder-shown{
     color: var(--color-content-tertiary);
+
+    [dir="rtl"] & {
+      direction: rtl !important;
+    }
   }
 }

package/src/Inputs/TextArea/TextArea.tsx

@@ -25,6 +25,7 @@ export const TextArea = forwardRef(function TextArea(
   return (
     <textarea
       ref={reference}
+      dir="auto"
       className={clsx(className, inputClassNameBase(), 'np-text-area')}
       maxLength={maxLength}
       {...inputAttributes}

package/src/Inputs/{_stories → TextArea/_stories}/TextArea.story.tsx

@@ -4,10 +4,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import {
   createSandboxStory,
   globalScope,
-} from '../../../.storybook/components/sandbox/SandboxEditor';
-import Field from '../../Field';
-import { Sentiment } from '../../common';
-import { TextArea } from '../TextArea/TextArea';
+} from '../../../../.storybook/components/sandbox/SandboxEditor';
+import Field from '../../../Field';
+import { Sentiment } from '../../../common';
+import { TextArea } from '../TextArea';
 
 /**
  * TextArea must be the only input with `maxLength` inside a given Field.

package/src/Inputs/{_stories → TextArea/_stories}/TextArea.test.story.tsx

@@ -2,10 +2,10 @@ import { useState } from 'react';
 import { userEvent, within } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import Field from '../../Field';
-import { Sentiment } from '../../common';
-import { TextArea } from '../TextArea/TextArea';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import Field from '../../../Field';
+import { Sentiment } from '../../../common';
+import { TextArea } from '../TextArea';
 
 const meta: Meta<typeof TextArea> = {
   title: 'Forms/TextArea/Tests',
@@ -144,26 +144,50 @@ export const CJKTypingBlocked: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Field label="Message" required={false}>
-        <TextArea placeholder="Type something..." />
-      </Field>
-      <Field label="Message" required={false}>
-        <TextArea value="This is some entered text content in the textarea field." readOnly />
-      </Field>
-      <Field
-        label="Message"
-        required={false}
-        sentiment={Sentiment.NEGATIVE}
-        message="This field has an error message"
-      >
-        <TextArea value="Invalid input text" readOnly />
-      </Field>
-      <Field label="Message with character count" required={false}>
-        <TextArea maxLength={200} value="Text with a character counter displayed below." readOnly />
-      </Field>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <>
+        <Field label="Localised placeholder">
+          <TextArea placeholder={i18n.placeholder} />
+        </Field>
+        <Field label="Localised value">
+          <TextArea value={i18n.value_ar} readOnly />
+        </Field>
+        <Field label="LTR value">
+          <TextArea value={i18n.value_en} readOnly />
+        </Field>
+        <Field label="Message" sentiment={Sentiment.NEGATIVE} message={i18n.errorMessage}>
+          <TextArea value={i18n.invalidInputText} readOnly />
+        </Field>
+        <Field label="Message with character count">
+          <TextArea maxLength={200} value={i18n.characterCounter} readOnly />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    width: 'stretch',
+    i18n: {
+      placeholder: { ltr: 'Translated placeholder...', rtl: 'نص بديل مترجم...' },
+      value_en: {
+        ltr: 'This is LTR text content in the RTL textarea field, showing the input adapting to the content rather than page setting.',
+        rtl: 'This is LTR text content in the RTL textarea field, showing the input adapting to the content rather than page setting.',
+      },
+      value_ar: {
+        ltr: 'This is some entered text content in the textarea field.',
+        rtl: 'هذا هو بعض المحتوى النصي المدخل في حقل منطقة النص.',
+      },
+      errorMessage: {
+        ltr: 'This field has an error message',
+        rtl: 'هذا الحقل يحتوي على رسالة خطأ',
+      },
+      invalidInputText: { ltr: 'Invalid input text', rtl: 'نص الإدخال غير صالح' },
+      characterCounter: {
+        ltr: 'Text with a character counter displayed below.',
+        rtl: 'نص مع عداد أحرف معروض أدناه.',
+      },
+    },
+  }),
 };

package/src/MoneyInput/MoneyInput.css

@@ -10,6 +10,9 @@
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
+[dir="rtl"] .tw-money-input .money-input__number-input {
+  text-align: end;
+}
 .tw-money-input .money-input-currency-flag {
   display: flex;
   align-items: center;

package/src/MoneyInput/MoneyInput.less

@@ -11,6 +11,12 @@
     }
   }
 
+  .money-input__number-input{
+    [dir="rtl"] & {
+      text-align: end;
+    }
+  }
+
   .money-input-currency-flag {
     display: flex;
     align-items: center;

package/src/MoneyInput/MoneyInput.tsx

@@ -367,6 +367,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             locale: this.state.locale,
             decimals: this.props.decimals,
           })}
+          className="money-input__number-input"
           autoComplete="off"
           aria-describedby={selectedCurrencyElementId}
           onKeyDown={this.handleKeyDown}

package/src/MoneyInput/_stories/MoneyInput.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 MoneyInput from '..';
 
@@ -70,19 +70,23 @@ export const TriggerVariants: Story = {
 };
 
 export const OpenDropdown: Story = {
-  render: () => (
-    <MoneyInput
-      {...sharedProps}
-      size="lg"
-      currencies={multipleCurrencies}
-      selectedCurrency={eurCurrency}
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <MoneyInput
+        {...sharedProps}
+        size="lg"
+        currencies={multipleCurrencies}
+        selectedCurrency={eurCurrency}
+        searchPlaceholder={i18n.searchPlaceholder}
+      />
+    );
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('combobox');
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '40%' }),
+  ...withRTLDiff({ renderAs: 'iframe', width: '40%', i18n: { searchPlaceholder: { ltr: 'Search currencies or countries', rtl: 'ابحث عن العملات أو الدول' } } }),
 };

package/src/PhoneNumberInput/PhoneNumberInput.css

@@ -5,6 +5,9 @@
   margin-inline-start: 12px;
   margin-inline-start: var(--size-12);
 }
+[dir="rtl"] .tw-telephone__number-input-field {
+  text-align: end;
+}
 .tw-telephone__country-select {
   flex-basis: 120px;
   flex-shrink: 0;
@@ -12,6 +15,10 @@
 .tw-telephone__country-select .np-input-group {
   inline-size: 100%;
 }
+[dir="rtl"] .tw-telephone__country-select .np-select-input-content {
+  text-align: end;
+  direction: ltr;
+}
 .tw-telephone__country-select--with-input-group-addon-start .np-button-input {
   padding-inline-start: 48px;
   padding-inline-start: var(--size-48);