@transferwise/components 46.162.0 → 46.162.2

package/src/ListItem/Navigation/ListItemNavigation.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight } from '@transferwise/icons';
+import { ChevronEnd } from '@transferwise/icons';
 import type { ButtonProps } from '../../Button/Button.types';
 import { useListItemControl } from '../useListItemControl';
 import { PrimitiveButton } from '../../Primitives';
@@ -32,7 +32,7 @@ export const Navigation = function Navigation({
 }: ListItemNavigationProps) {
   const { baseItemProps } = useListItemControl('navigation', { href, hideIndicator, ...props });
   const { ids, describedByIds } = useContext(ListItemContext);
-  const icon = hideIndicator ? null : <ChevronRight size={16} data-testid="NavigationIndicator" />;
+  const icon = hideIndicator ? null : <ChevronEnd size={16} data-testid="NavigationIndicator" />;
 
   return href ? (
     <>{icon}</>

package/src/PhoneNumberInput/PhoneNumberInput.css

@@ -27,3 +27,6 @@
 .tw-telephone__number-input {
   flex: auto 1 1;
 }
+[dir="rtl"] .tw-telephone__prefix-option .np-select-input-option-content-title {
+  direction: ltr;
+}

package/src/PhoneNumberInput/PhoneNumberInput.less

@@ -7,7 +7,7 @@
     margin-left: var(--size-12);
   }
 
-  &__number-input-field{
+  &__number-input-field {
     [dir="rtl"] & {
       text-align: end;
     }
@@ -22,7 +22,7 @@
     width: 100%;
   }
 
-  .np-select-input-content{
+  .np-select-input-content {
     [dir="rtl"] & {
       text-align: end;
       direction: ltr;
@@ -40,3 +40,11 @@
 .tw-telephone__number-input {
   flex: auto 1 1;
 }
+
+// Prevent bidi algorithm from flipping "+{country-code}" to "{country-code}+"
+// in RTL dropdown options as phone numbers are universally read as LTR.
+.tw-telephone__prefix-option .np-select-input-option-content-title {
+  [dir="rtl"] & {
+    direction: ltr;
+  }
+}

package/src/PhoneNumberInput/PhoneNumberInput.tsx

@@ -229,6 +229,7 @@ const PhoneNumberInput = ({
                       ?.map((country) => country.iso3)
                       .join(', ')
               }
+              className={withinTrigger ? undefined : 'tw-telephone__prefix-option'}
             />
           )}
           filterable

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

@@ -33,7 +33,7 @@ export const Sizes: Story = {
       </Field>
     </>
   ),
-  ...withRTLDiff(),
+  ...withRTLDiff({ renderAs: 'iframe' }),
 };
 
 export const DropdownOpen: Story = {

package/src/PromoCard/Indicator/PromoCardIndicator.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, Check, Download } from '@transferwise/icons';
+import { ArrowEnd, Check, Download } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { ReactElement, ReactNode } from 'react';
 
@@ -57,7 +57,7 @@ const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
     isIconString &&
     {
       check: Check,
-      arrow: ArrowRight,
+      arrow: ArrowEnd,
       download: Download,
     }[icon];
 

package/src/PromoCard/PromoCard.css

@@ -53,9 +53,6 @@
 .np-Card-indicatorIcon .tw-icon {
   color: var(--Card-indicator-icon-color);
 }
-[dir="rtl"] .np-Card-indicatorIcon .tw-icon {
-  transform: scaleX(-1);
-}
 .np-Card--checked,
 .np-Card--link {
   color: currentColor;

package/src/PromoCard/PromoCard.less

@@ -50,11 +50,6 @@
 
     &Icon .tw-icon {
       color: var(--Card-indicator-icon-color);
-
-      // Flips icon for right to left content
-      [dir="rtl"] & {
-        transform: scaleX(-1);
-      }
     }
   }
 

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx

@@ -511,5 +511,5 @@ export const RTLDiff: Story = {
       />
     </>
   ),
-  ...withRTLDiff(),
+  ...withRTLDiff({ renderAs: 'iframe' }),
 };

package/src/Provider/Provider.tsx

@@ -4,7 +4,6 @@ import { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common'
 import en from '../i18n/en.json';
 
 import { DirectionProvider } from './Direction';
-import { LanguageProvider } from './Language';
 
 export interface ProviderProps {
   i18n: Pick<ResolvedIntlConfig, 'locale' | 'messages'> &
@@ -30,16 +29,14 @@ export default function Provider({ i18n, children }: ProviderProps) {
 
   return (
     <DirectionProvider direction={getDirectionFromLocale(locale)}>
-      <LanguageProvider locale={locale}>
-        <IntlProvider
-          defaultLocale={DEFAULT_LOCALE}
-          locale={intlConfig.locale}
-          messages={intlConfig.messages}
-          defaultRichTextElements={defaultRichTextElements}
-        >
-          {children}
-        </IntlProvider>
-      </LanguageProvider>
+      <IntlProvider
+        defaultLocale={DEFAULT_LOCALE}
+        locale={intlConfig.locale}
+        messages={intlConfig.messages}
+        defaultRichTextElements={defaultRichTextElements}
+      >
+        {children}
+      </IntlProvider>
     </DirectionProvider>
   );
 }

package/src/Provider/index.ts

@@ -1,6 +1,4 @@
 export { DirectionProvider } from './Direction';
 export type { DirectionProviderProps } from './Direction';
-export { LanguageProvider } from './Language';
-export type { LanguageProviderProps } from './Language';
 export { default } from './Provider';
 export type { ProviderProps } from './Provider';

package/src/i18n/en.json

@@ -35,6 +35,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Country code",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",
+  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
   "neptune.StatusIcon.iconLabel.error": "Error:",

package/src/index.ts

@@ -123,7 +123,7 @@ export type {
   PromoCardProps,
 } from './PromoCard';
 export type { PromoCardGroupProps } from './PromoCard';
-export type { DirectionProviderProps, LanguageProviderProps, ProviderProps } from './Provider';
+export type { DirectionProviderProps, ProviderProps } from './Provider';
 export type { RadioProps } from './Radio';
 export type { RadioGroupProps, RadioGroupRadio } from './RadioGroup';
 export type { RadioOptionProps } from './_deprecated/RadioOption';
@@ -272,7 +272,7 @@ export { default as ProcessIndicator } from './ProcessIndicator';
 export { default as Progress } from './Progress';
 export { default as ProgressBar } from './ProgressBar';
 export { default as PromoCard, PromoCardGroup } from './PromoCard';
-export { DirectionProvider, LanguageProvider, default as Provider } from './Provider';
+export { DirectionProvider, default as Provider } from './Provider';
 export { default as Radio } from './Radio';
 export { default as RadioGroup } from './RadioGroup';
 export { default as RadioOption } from './_deprecated/RadioOption';

package/src/main.css

@@ -21502,9 +21502,6 @@ a[data-toggle="tooltip"] {
 .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
-  scale: -1 1;
-}
 .np-btn {
   position: relative;
 }
@@ -22660,6 +22657,19 @@ button.np-option {
 .tw-date .tw-date--day {
   margin-block-end: 0;
 }
+[dir="rtl"] .tw-date .np-input {
+  text-align: end;
+}
+[dir="rtl"] .tw-date .np-input::-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input:-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input::placeholder,
+[dir="rtl"] .tw-date .np-input:placeholder-shown {
+  text-align: start;
+}
 @media (min-width: 600px) {
   .np-theme-personal .tw-date label {
     margin-block-end: 0;
@@ -23970,7 +23980,7 @@ button.np-option {
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-navigation .tw-icon-chevron-right {
+.wds-list-item-navigation .tw-icon-chevron-end {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
   display: block;
@@ -25380,6 +25390,9 @@ button.np-link {
 .tw-telephone__number-input {
   flex: auto 1 1;
 }
+[dir="rtl"] .tw-telephone__prefix-option .np-select-input-option-content-title {
+  direction: ltr;
+}
 .np-theme-personal .np-popover__container {
   border-radius: 16px;
   border-radius: var(--radius-medium);
@@ -25515,9 +25528,6 @@ button.np-link {
 .np-Card-indicatorIcon .tw-icon {
   color: var(--Card-indicator-icon-color);
 }
-[dir="rtl"] .np-Card-indicatorIcon .tw-icon {
-  transform: scaleX(-1);
-}
 .np-Card--checked,
 .np-Card--link {
   color: currentColor;

package/build/Provider/Language/LanguageProvider.js

@@ -1,20 +0,0 @@
-'use strict';
-
-var React = require('react');
-var index = require('../../common/Locale/index.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const LanguageContext = /*#__PURE__*/React.createContext(index.DEFAULT_LOCALE);
-const LanguageProvider = ({
-  locale,
-  children
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx(LanguageContext.Provider, {
-    value: locale,
-    children: children
-  });
-};
-
-exports.LanguageContext = LanguageContext;
-exports.LanguageProvider = LanguageProvider;
-//# sourceMappingURL=LanguageProvider.js.map

package/build/Provider/Language/LanguageProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LanguageProvider.js","sources":["../../../src/Provider/Language/LanguageProvider.tsx"],"sourcesContent":["import { createContext, PropsWithChildren } from 'react';\n\nimport { DEFAULT_LOCALE } from '../../common/Locale';\n\nexport const LanguageContext = createContext<string>(DEFAULT_LOCALE);\n\nexport type LanguageProviderProps = PropsWithChildren<{ locale: string }>;\n\nexport const LanguageProvider = ({ locale, children }: LanguageProviderProps) => {\n  return <LanguageContext.Provider value={locale}>{children}</LanguageContext.Provider>;\n};\n"],"names":["LanguageContext","createContext","DEFAULT_LOCALE","LanguageProvider","locale","children","_jsx","Provider","value"],"mappings":";;;;;;MAIaA,eAAe,gBAAGC,mBAAa,CAASC,oBAAc;AAI5D,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,MAAM;AAAEC,EAAAA;AAAQ,CAAyB,KAAI;AAC9E,EAAA,oBAAOC,cAAA,CAACN,eAAe,CAACO,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,MAAO;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAA2B,CAAC;AACvF;;;"}

package/build/Provider/Language/LanguageProvider.mjs

@@ -1,17 +0,0 @@
-import { createContext } from 'react';
-import { DEFAULT_LOCALE } from '../../common/Locale/index.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-const LanguageContext = /*#__PURE__*/createContext(DEFAULT_LOCALE);
-const LanguageProvider = ({
-  locale,
-  children
-}) => {
-  return /*#__PURE__*/jsx(LanguageContext.Provider, {
-    value: locale,
-    children: children
-  });
-};
-
-export { LanguageContext, LanguageProvider };
-//# sourceMappingURL=LanguageProvider.mjs.map

package/build/Provider/Language/LanguageProvider.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"LanguageProvider.mjs","sources":["../../../src/Provider/Language/LanguageProvider.tsx"],"sourcesContent":["import { createContext, PropsWithChildren } from 'react';\n\nimport { DEFAULT_LOCALE } from '../../common/Locale';\n\nexport const LanguageContext = createContext<string>(DEFAULT_LOCALE);\n\nexport type LanguageProviderProps = PropsWithChildren<{ locale: string }>;\n\nexport const LanguageProvider = ({ locale, children }: LanguageProviderProps) => {\n  return <LanguageContext.Provider value={locale}>{children}</LanguageContext.Provider>;\n};\n"],"names":["LanguageContext","createContext","DEFAULT_LOCALE","LanguageProvider","locale","children","_jsx","Provider","value"],"mappings":";;;;MAIaA,eAAe,gBAAGC,aAAa,CAASC,cAAc;AAI5D,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,MAAM;AAAEC,EAAAA;AAAQ,CAAyB,KAAI;AAC9E,EAAA,oBAAOC,GAAA,CAACN,eAAe,CAACO,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,MAAO;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAA2B,CAAC;AACvF;;"}

package/build/types/Provider/Language/LanguageProvider.d.ts

@@ -1,7 +0,0 @@
-import { PropsWithChildren } from 'react';
-export declare const LanguageContext: import("react").Context<string>;
-export type LanguageProviderProps = PropsWithChildren<{
-    locale: string;
-}>;
-export declare const LanguageProvider: ({ locale, children }: LanguageProviderProps) => import("react").JSX.Element;
-//# sourceMappingURL=LanguageProvider.d.ts.map

package/build/types/Provider/Language/LanguageProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LanguageProvider.d.ts","sourceRoot":"","sources":["../../../../src/Provider/Language/LanguageProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIzD,eAAO,MAAM,eAAe,iCAAwC,CAAC;AAErE,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE1E,eAAO,MAAM,gBAAgB,GAAI,sBAAsB,qBAAqB,gCAE3E,CAAC"}

package/build/types/Provider/Language/index.d.ts

@@ -1,3 +0,0 @@
-export { LanguageProvider } from './LanguageProvider';
-export type { LanguageProviderProps } from './LanguageProvider';
-//# sourceMappingURL=index.d.ts.map

package/build/types/Provider/Language/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Provider/Language/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}