@transferwise/components 46.160.1 → 46.160.2

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import SegmentedControl from '../SegmentedControl';
@@ -22,24 +23,31 @@ const viewSegments = [
   { id: 'seg-gamma', label: 'Gamma', value: 'gamma', controls: 'panel-gamma' },
 ] as const;
 
-export const RTLDiff: Story = {
-  render: () => (
+function InteractiveSegmentedControl() {
+  const [inputValue, setInputValue] = useState('one');
+  const [viewValue, setViewValue] = useState('beta');
+
+  return (
     <>
       <SegmentedControl
         name="rtl-input"
         mode="input"
         segments={inputSegments}
-        value="one"
-        onChange={() => {}}
+        value={inputValue}
+        onChange={setInputValue}
       />
       <SegmentedControl
         name="rtl-view"
         mode="view"
         segments={viewSegments}
-        value="alpha"
-        onChange={() => {}}
+        value={viewValue}
+        onChange={setViewValue}
       />
     </>
-  ),
-  ...withRTLDiff(),
+  );
+}
+
+export const RTLDiff: Story = {
+  render: () => <InteractiveSegmentedControl />,
+  ...withRTLDiff({ width: 'stretch', renderAs: 'iframe' }),
 };

package/src/Tooltip/Tooltip.css

@@ -42,9 +42,3 @@
   visibility: visible;
   visibility: initial;
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner .np-panel__arrow {
-  inset-inline-start: -7px;
-}
-.np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner .np-panel__arrow {
-  inset-inline-end: -7px;
-}

package/src/Tooltip/Tooltip.less

@@ -48,15 +48,3 @@
     }
   }
 }
-
-.np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner {
-  .np-panel__arrow {
-    left: -7px;
-  }
-}
-
-.np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner {
-  .np-panel__arrow {
-    right: -7px;
-  }
-}

package/src/Tooltip/Tooltip.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
+import { DirectionProvider } from '../Provider/Direction/DirectionProvider';
 import Tooltip from '.';
 
 describe('Tooltip Component', () => {
@@ -102,4 +103,54 @@ describe('Tooltip Component', () => {
     const tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toBeVisible();
   });
+
+  describe('RTL position mirroring', () => {
+    it('mirrors position="left" to right in RTL', async () => {
+      render(
+        <DirectionProvider direction="rtl">
+          <Tooltip label="Test Tooltip" position="left">
+            <span>Hover me</span>
+          </Tooltip>
+        </DirectionProvider>,
+      );
+      const triggerElement = screen.getByText('Hover me');
+      await userEvent.hover(triggerElement);
+
+      const tooltip = screen.getByRole('tooltip', { hidden: true });
+      expect(tooltip).toHaveAttribute('data-popper-placement', 'right');
+    });
+
+    it('mirrors position="right" to left in RTL', async () => {
+      render(
+        <DirectionProvider direction="rtl">
+          <Tooltip label="Test Tooltip" position="right">
+            <span>Hover me</span>
+          </Tooltip>
+        </DirectionProvider>,
+      );
+      const triggerElement = screen.getByText('Hover me');
+      await userEvent.hover(triggerElement);
+
+      const tooltip = screen.getByRole('tooltip', { hidden: true });
+      expect(tooltip).toHaveAttribute('data-popper-placement', 'left');
+    });
+
+    it.each(['top', 'bottom'] as const)(
+      'does not mirror position="%s" in RTL',
+      async (position) => {
+        render(
+          <DirectionProvider direction="rtl">
+            <Tooltip label="Test Tooltip" position={position}>
+              <span>Hover me</span>
+            </Tooltip>
+          </DirectionProvider>,
+        );
+        const triggerElement = screen.getByText('Hover me');
+        await userEvent.hover(triggerElement);
+
+        const tooltip = screen.getByRole('tooltip', { hidden: true });
+        expect(tooltip).toHaveAttribute('data-popper-placement', position);
+      },
+    );
+  });
 });

package/src/Tooltip/Tooltip.tsx

@@ -19,6 +19,7 @@ import {
 } from 'react';
 
 import { CommonProps, Position } from '../common';
+import useDirection from '../common/hooks/useDirection';
 import {
   PositionBottom,
   PositionLeft,
@@ -42,12 +43,21 @@ const Tooltip = ({
 }: TooltipProps) => {
   const [open, setOpen] = useState(false);
   const arrowRef = useRef<HTMLDivElement | null>(null);
+  const { isRTL } = useDirection();
+
+  const resolvedPosition = isRTL
+    ? position === 'left'
+      ? 'right'
+      : position === 'right'
+        ? 'left'
+        : position
+    : position;
 
   const fallbackId = useId();
   const tooltipId = id ?? fallbackId;
 
   const { refs, floatingStyles, placement, middlewareData } = useFloating({
-    placement: position,
+    placement: resolvedPosition,
     middleware: [
       offset(16),
       flip({ fallbackPlacements: [Position.TOP] }),

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

@@ -13,16 +13,6 @@ export default {
 
 type Story = StoryObj<typeof Tooltip>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
-
-const containerStyle: React.CSSProperties = {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  minHeight: '20rem',
-  width: '100%',
-};
-
 const hoverTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   const canvas = within(canvasElement);
   const button = canvas.queryByRole('button');
@@ -32,48 +22,40 @@ const hoverTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) =
 
 export const PositionTop: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Top positioned tooltip" position="top">
-        <Button>Top</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Top positioned tooltip" position="top">
+      <Button>Top</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
 };
 
 export const PositionBottom: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Bottom positioned tooltip" position="bottom">
-        <Button>Bottom</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Bottom positioned tooltip" position="bottom">
+      <Button>Bottom</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
 };
 
 export const PositionRight: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Right positioned tooltip" position="right">
-        <Button>Right</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Right positioned tooltip" position="right">
+      <Button>Right</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
 };
 
 export const PositionLeft: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Left positioned tooltip" position="left">
-        <Button>Left</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Left positioned tooltip" position="left">
+      <Button>Left</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
 };

package/src/common/Panel/Panel.css

@@ -40,33 +40,33 @@
   transform: translateY(10px) scale(0.95);
 }
 .np-panel[data-popper-placement^="top"] .np-panel__arrow {
-  inset-block-end: -6px;
+  inset-block-end: -7px;
 }
 .np-panel[data-popper-placement^="right"] > .np-panel__content {
   transform: translateX(-10px) scale(0.95);
 }
 .np-panel[data-popper-placement^="right"] .np-panel__arrow {
-  inset-inline-start: -6px;
+  inset-inline-start: -7px;
 }
 [dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
   inset-inline-start: unset;
-  inset-inline-end: -6px;
+  inset-inline-end: -7px;
 }
 .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
   transform: translateY(-10px) scale(0.95);
 }
 .np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
-  inset-block-start: -6px;
+  inset-block-start: -7px;
 }
 .np-panel[data-popper-placement^="left"] > .np-panel__content {
   transform: translateX(10px) scale(0.95);
 }
 .np-panel[data-popper-placement^="left"] .np-panel__arrow {
-  inset-inline-end: -6px;
+  inset-inline-end: -7px;
 }
 [dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
   inset-inline-end: unset;
-  inset-inline-start: -6px;
+  inset-inline-start: -7px;
 }
 .np-theme-personal .np-panel__content {
   border-radius: 16px;

package/src/common/Panel/Panel.less

@@ -51,7 +51,7 @@
     }
 
     .np-panel__arrow {
-      bottom: -6px;
+      bottom: -7px;
     }
   }
 
@@ -61,11 +61,11 @@
     }
 
     .np-panel__arrow {
-      left: -6px;
+      left: -7px;
 
       [dir="rtl"] & {
         left: unset;
-        right: -6px;
+        right: -7px;
       }
     }
   }
@@ -76,7 +76,7 @@
     }
 
     .np-panel__arrow {
-      top: -6px;
+      top: -7px;
     }
   }
 
@@ -86,11 +86,11 @@
     }
 
     .np-panel__arrow {
-      right: -6px;
+      right: -7px;
 
       [dir="rtl"] & {
         right: unset;
-        left: -6px;
+        left: -7px;
       }
     }
   }

package/src/i18n/tr.json

@@ -12,6 +12,10 @@
   "neptune.DateLookup.goTo20YearView": "20 yıl görünümüne git",
   "neptune.DateLookup.month": "ay",
   "neptune.DateLookup.next": "devam et",
+  "neptune.DateLookup.notAvailable": "kullanılamaz",
+  "neptune.DateLookup.outOfRangeAfter": "Lütfen {min} veya daha sonraki bir tarih girin.",
+  "neptune.DateLookup.outOfRangeBefore": "Lütfen {max} veya daha önceki bir tarih girin.",
+  "neptune.DateLookup.outOfRangeBetween": "Lütfen {min} ile {max} arasında bir tarih girin.",
   "neptune.DateLookup.previous": "önceki",
   "neptune.DateLookup.selected": "seçili",
   "neptune.DateLookup.twentyYears": "20 yıl",
@@ -46,6 +50,7 @@
   "neptune.Table.loaded": "Tablo verileri yüklendi",
   "neptune.Table.loading": "Tablo verileri yükleniyor",
   "neptune.Table.refreshPage": "Sayfayı yenile",
+  "neptune.Typeahead.suggestionsLabel": "Öneriler",
   "neptune.Upload.csButtonText": "Başka bir dosya yükleyin?",
   "neptune.Upload.csFailureText": "Yükleme başarısız. Lütfen yine deneyin",
   "neptune.Upload.csSuccessText": "Yükleme tamamlandı!",

package/src/i18n/zh-CN.json

@@ -12,6 +12,10 @@
   "neptune.DateLookup.goTo20YearView": "转到 20 年视图",
   "neptune.DateLookup.month": "月",
   "neptune.DateLookup.next": "下一页",
+  "neptune.DateLookup.notAvailable": "不可用",
+  "neptune.DateLookup.outOfRangeAfter": "请输入 {min}或之后的日期。",
+  "neptune.DateLookup.outOfRangeBefore": "请输入 {max}或之前的日期。",
+  "neptune.DateLookup.outOfRangeBetween": "请输入 {min}与 {max}之间的日期。",
   "neptune.DateLookup.previous": "上一页",
   "neptune.DateLookup.selected": "已选",
   "neptune.DateLookup.twentyYears": "20 年",
@@ -46,6 +50,7 @@
   "neptune.Table.loaded": "表数据已加载",
   "neptune.Table.loading": "表数据正在加载",
   "neptune.Table.refreshPage": "刷新页面",
+  "neptune.Typeahead.suggestionsLabel": "建议",
   "neptune.Upload.csButtonText": "上传另一个文件？",
   "neptune.Upload.csFailureText": "上传失败。请重试",
   "neptune.Upload.csSuccessText": "上传完毕！",

package/src/main.css

@@ -20368,36 +20368,53 @@ a[data-toggle="tooltip"] {
   block-size: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-diagonal-mask {
+  --np-avatar-layout-mask-direction: right;
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }
 [dir="rtl"] .np-avatar-layout-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+  --np-avatar-layout-mask-direction: left;
+  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+  margin-inline-end: unset;
 }
 .np-avatar-layout-diagonal-child {
   margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
   margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
 [dir="rtl"] .np-avatar-layout-diagonal-child {
-  margin-inline-start: 0;
-  margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+  -webkit-mask-image: initial;
+          mask-image: initial;
 }
 .np-avatar-layout-horizontal {
+  --np-avatar-layout-mask-direction: left;
   inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
   inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   block-size: var(--np-avatar-layout-size);
 }
-.np-avatar-layout-horizontal-mask {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+[dir="rtl"] .np-avatar-layout-horizontal {
+  --np-avatar-layout-mask-direction: right;
+}
+.np-avatar-layout-horizontal-mask,
+[dir="rtl"] .np-avatar-layout-horizontal-child {
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+}
+[dir="rtl"] .np-avatar-layout-horizontal-mask {
+  margin-inline-end: calc(var(--np-avatar-offset) * -1);
+}
+[dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
+  -webkit-mask-image: initial;
+          mask-image: initial;
 }
 .np-avatar-layout-horizontal-child {
   margin-inline-start: calc(var(--np-avatar-offset) * -1);
 }
 [dir="rtl"] .np-avatar-layout-horizontal-child {
+  margin-inline-start: unset;
   margin-inline-end: calc(var(--np-avatar-offset) * -1);
 }
 .np-icon-button {
@@ -21895,33 +21912,33 @@ button.np-option {
   transform: translateY(10px) scale(0.95);
 }
 .np-panel[data-popper-placement^="top"] .np-panel__arrow {
-  inset-block-end: -6px;
+  inset-block-end: -7px;
 }
 .np-panel[data-popper-placement^="right"] > .np-panel__content {
   transform: translateX(-10px) scale(0.95);
 }
 .np-panel[data-popper-placement^="right"] .np-panel__arrow {
-  inset-inline-start: -6px;
+  inset-inline-start: -7px;
 }
 [dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
   inset-inline-start: unset;
-  inset-inline-end: -6px;
+  inset-inline-end: -7px;
 }
 .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
   transform: translateY(-10px) scale(0.95);
 }
 .np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
-  inset-block-start: -6px;
+  inset-block-start: -7px;
 }
 .np-panel[data-popper-placement^="left"] > .np-panel__content {
   transform: translateX(10px) scale(0.95);
 }
 .np-panel[data-popper-placement^="left"] .np-panel__arrow {
-  inset-inline-end: -6px;
+  inset-inline-end: -7px;
 }
 [dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
   inset-inline-end: unset;
-  inset-inline-start: -6px;
+  inset-inline-start: -7px;
 }
 .np-theme-personal .np-panel__content {
   border-radius: 16px;
@@ -25836,7 +25853,8 @@ button.np-link {
   background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
-  transition: left 300ms;
+  transition: left 300ms,
+    right 300ms;
 }
 .segmented-control__segments--no-animate::after {
   transition: none !important;
@@ -26563,12 +26581,6 @@ button.np-link {
   visibility: visible;
   visibility: initial;
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner .np-panel__arrow {
-  inset-inline-start: -7px;
-}
-.np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner .np-panel__arrow {
-  inset-inline-end: -7px;
-}
 .typeahead.open .input-group {
   z-index: 1060;
 }